update sendemail animation

src/components/mailanimation.tsx

@@ -0,0 +1,22 @@
+export default function MailAnimation() {
+    return (
+        <>
+            <div className="letter-image">
+                <div className="animated-mail">
+                    <div className="back-fold"></div>
+                    <div className="letter">
+                        <div className="letter-border"></div>
+                        <div className="letter-title"></div>
+                        <div className="letter-context"></div>
+                        <div className="letter-stamp">
+                            <div className="letter-stamp-inner"></div>
+                        </div>
+                    </div>
+                    <div className="top-fold"></div>
+                    <div className="body"></div>
+                    <div className="left-fold"></div>
+                </div>
+            </div>
+        </>
+    )
+}

src/pages/_app.tsx

@@ -10,7 +10,7 @@ const queryClient = new QueryClient();
 
 // styles
 import '../styles/globals.css';
-import '../styles/textanimation.css';
+import '../styles/mailanimation.css';
 
 export default function App({ Component, pageProps }: AppProps) {
     return (

src/pages/user/sendemail.tsx

@@ -10,7 +10,7 @@ import axios from 'axios';
 
 // components
 import Header from "@/components/header";
-import TextAnimation from '@/components/textanimation';
+import MailAnimation from '@/components/mailanimation';
 
 const SendEmail = ({params}: any) => {
     // 디바이스 체크
@@ -59,7 +59,7 @@ const SendEmail = ({params}: any) => {
             {/* 메인 */}
             <div className='w-[100%] flex flex-col justify-start items-center'>
                 <div className='w-[100%] text-[14px] tlg:text-[12px] text-theme-6 dark:text-theme-7 flex flex-col justify-center items-center'>
-                    <TextAnimation/>
+                    <MailAnimation/>
                     <h2 className='text-center leading-relaxed break-keep'>
                         인증 메일이 <span className='text-theme-5 dark:text-theme-9 font-medium'>[{params.id}]</span>(으)로 전송되었습니다. <br className='txs:hidden'/>
                         받으신 이메일의 링크를 클릭하면 가입이 완료됩니다.

src/styles/mailanimation.css

@@ -0,0 +1,156 @@
+.letter-image {
+    width: 200px;
+    height: 300px;
+}
+.animated-mail {
+    position: absolute;
+    width: 200px;
+    height: 150px;
+    top: 60px;
+    animation: animatedMail 0.4s 0.4s both;
+}
+.animated-mail .body {
+    position: absolute;
+    bottom: 0;
+    width: 0;
+    height: 0;
+    border-style: solid;
+    border-width: 0 0 100px 200px;
+    border-color: transparent transparent #f7e06e transparent;
+    z-index: 2;
+}
+html.dark .animated-mail .body {
+    border-color: transparent transparent #99acdc transparent;
+}
+.animated-mail .top-fold {
+    position: absolute;
+    top: 51px;
+    width: 0;
+    height: 0;
+    border-style: solid;
+    border-width: 50px 100px 0 100px;
+    -webkit-transform-origin: 50% 0%;
+    -moz-transform-origin: 50% 0%;
+    transform-origin: 50% 0%;
+    border-color: #f2cc0d transparent transparent transparent;
+    z-index: 2;
+    animation: topFold 0.4s 0.4s both;
+}
+html.dark .animated-mail .top-fold {
+    border-color: #6682ca transparent transparent transparent;
+}
+.animated-mail .back-fold {
+    position: absolute;
+    bottom: 0;
+    width: 200px;
+    height: 100px;
+    background: #f2cc0d;
+    z-index: 0;
+}
+html.dark .animated-mail .back-fold {
+    background: #6682ca;
+}
+.animated-mail .left-fold {
+    position: absolute;
+    bottom: 0;
+    width: 0;
+    height: 0;
+    border-style: solid;
+    border-width: 50px 0 50px 100px;
+    border-color: transparent transparent transparent #f5d63d;
+    z-index: 2;
+}
+html.dark .animated-mail .left-fold {
+    border-color: transparent transparent transparent #8097d3;
+}
+.animated-mail .letter {
+    left: 20px;
+    bottom: 0px;
+    position: absolute;
+    width: 160px;
+    height: 60px;
+    background: white;
+    z-index: 1;
+    overflow: hidden;
+    animation: letter 0.4s 0.6s both;
+}
+.animated-mail .letter .letter-border {
+    height: 10px;
+    width: 100%;
+    background: repeating-linear-gradient(-45deg, #f2cc0d, #f2cc0d 8px, transparent 8px, transparent 18px);
+}
+html.dark .animated-mail .letter .letter-border {
+    background: repeating-linear-gradient(-45deg, #6682ca, #6682ca 8px, transparent 8px, transparent 18px);
+}
+.animated-mail .letter .letter-title {
+    margin-top: 10px;
+    margin-left: 5px;
+    height: 10px;
+    width: 40%;
+    background: #f2cc0d;
+}
+html.dark .animated-mail .letter .letter-title {
+    background: #6682ca;
+}
+.animated-mail .letter .letter-context {
+    margin-top: 10px;
+    margin-left: 5px;
+    height: 10px;
+    width: 20%;
+    background: #f2cc0d;
+}
+html.dark .animated-mail .letter .letter-context {
+    background: #6682ca;
+}
+.animated-mail .letter .letter-stamp {
+    margin-top: 30px;
+    margin-left: 120px;
+    border-radius: 100%;
+    height: 30px;
+    width: 30px;
+    background: #f2cc0d;
+    opacity: 0.3;
+}
+html.dark .animated-mail .letter .letter-stamp {
+    background: #6682ca;
+}
+.letter-image:hover .animated-mail .letter {
+    height: 180px;
+}
+@keyframes animatedMail {
+    0% {
+        transform: translateY(0);
+        -webkit-transform: translateY(0);
+        -moz-transform: translateY(0);
+    }
+    100% {
+        transform: translateY(50px);
+        -webkit-transform: translateY(50px);
+        -moz-transform: translateY(50px);
+    }
+}
+@keyframes topFold {
+    0% {
+        transform: rotateX(0deg);
+        -webkit-transform: rotateX(0deg);
+        -moz-transform: rotateX(0deg);
+        z-index: 2;
+    }
+    50% {
+        z-index: 0;
+    }
+    100% {
+        transform: rotateX(180deg);
+        -webkit-transform: rotateX(180deg);
+        -moz-transform: rotateX(180deg);
+        z-index: 0;
+    }
+}
+@keyframes letter {
+    0% {
+        height: 60px;
+    }
+    100% {
+        height: 180px;
+    }
+}