From 0f694f2e1fa7cc2b7ad1ba2c4f93a06cea4700d3 Mon Sep 17 00:00:00 2001
From: lydiacho <sheecho0804@ewhain.net>
Date: Sat, 3 Aug 2024 00:23:52 +0900
Subject: [PATCH] =?UTF-8?q?design:=20=EC=95=A0=EB=8B=88=EB=A9=94=EC=9D=B4?=
 =?UTF-8?q?=EC=85=98=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/CompletePage/index.tsx    | 27 +++++++++++-----
 src/views/CompletePage/style.css.ts | 48 +++++++++++++++++++++++++++--
 2 files changed, 64 insertions(+), 11 deletions(-)

diff --git a/src/views/CompletePage/index.tsx b/src/views/CompletePage/index.tsx
index 1a5a4713..f0fca115 100644
--- 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
index 4e93d6f8..52813071 100644
--- 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,
+    },
+  ],
 });