design: 애니메이션 추가

sopt-makers · Aug 2, 2024 · 0f694f2 · 0f694f2
1 parent 1855974
commit 0f694f2
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 11 deletions.
diff --git a/src/views/CompletePage/index.tsx b/src/views/CompletePage/index.tsx
@@ -1,12 +1,21 @@
 import { track } from '@amplitude/analytics-browser';
-import { useContext, useEffect, useState } from 'react';
+import { useContext, useState } from 'react';
 
 import Button from '@components/Button';
 import Callout from '@components/Callout';
 import { RecruitingInfoContext } from '@store/recruitingInfoContext';
 
 import IconCheckmark from './icons/IconCheckmark';
-import { container, icon, mainText, pointBoxVar, pointContainer, subText, surveyBox, thanksText } from './style.css';
+import {
+  container,
+  icon,
+  mainText,
+  pointBoxVar,
+  pointContainerVar,
+  subText,
+  surveyBox,
+  thanksTextVar,
+} from './style.css';
 
 const CompletePage = () => {
   const {
@@ -24,7 +33,10 @@ const CompletePage = () => {
     setPoint(i);
     setTimeout(() => {
       setPoint('CHANGED');
-    }, 1000);
+    }, 500);
+    setTimeout(() => {
+      setPoint(-1);
+    }, 2500);
   };
 
   return (
@@ -45,10 +57,9 @@ const CompletePage = () => {
             textAlign: 'center',
             whiteSpace: 'pre-line',
           }}>{`지원서 이용 만족도를 0-10점 중에 선택해주세요.\n의견을 주시면 프로덕트 개선에 도움이 됩니다.`}</span>
-        {point === 'CHANGED' ? (
-          <span className={thanksText}>소중한 의견 감사합니다 :&#41;</span>
-        ) : (
-          <ul className={pointContainer}>
+        <div style={{ position: 'relative', width: 348, height: 36 }}>
+          <span className={thanksTextVar[point === 'CHANGED' ? 'default' : 'out']}>소중한 의견 감사합니다 :&#41;</span>
+          <ul className={pointContainerVar[point !== 'CHANGED' ? 'default' : 'out']}>
             {Array.from({ length: 11 }, (_, i) => i).map((v) => (
               <li
                 key={v}
@@ -58,7 +69,7 @@ const CompletePage = () => {
               </li>
             ))}
           </ul>
-        )}
+        </div>
       </div>
     </section>
   );

diff --git a/src/views/CompletePage/style.css.ts b/src/views/CompletePage/style.css.ts
@@ -51,18 +51,39 @@ export const surveyBox = style({
   justifyContent: 'center',
   alignItems: 'center',
   gap: 12,
-  padding: '22px 75px',
+  width: 466,
+  padding: '22px 0px',
   marginTop: 50,
   color: theme.color.lightestText,
   ...theme.font.BODY_2_16_M,
   border: `1px solid ${theme.color.border}`,
   borderRadius: 15,
-  transition: 'all 0.3s ease',
 });
 
 export const pointContainer = style({
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  width: '100%',
+  height: '100%',
   display: 'flex',
   gap: 4,
+  transition: 'all 0.3s ease',
+});
+
+export const pointContainerVar = styleVariants({
+  default: [
+    pointContainer,
+    {
+      opacity: 1,
+    },
+  ],
+  out: [
+    pointContainer,
+    {
+      opacity: 0,
+    },
+  ],
 });
 
 const pointBox = style({
@@ -94,10 +115,31 @@ export const pointBoxVar = styleVariants({
 });
 
 export const thanksText = style({
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  width: '100%',
+  height: '100%',
+  paddingTop: 5,
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
-  height: 36,
   ...theme.font.TITLE_6_16_SB,
   color: theme.color.lighterText,
+  transition: 'all 0.3s ease',
+});
+
+export const thanksTextVar = styleVariants({
+  default: [
+    thanksText,
+    {
+      opacity: 1,
+    },
+  ],
+  out: [
+    thanksText,
+    {
+      opacity: 0,
+    },
+  ],
 });