feat: 점수 클릭 후 렌더링 상태 변경

sopt-makers · Aug 2, 2024 · 1855974 · 1855974
1 parent 974350e
commit 1855974
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 13 deletions.
diff --git a/src/views/CompletePage/index.tsx b/src/views/CompletePage/index.tsx
@@ -1,19 +1,19 @@
 import { track } from '@amplitude/analytics-browser';
-import { useContext, useState } from 'react';
+import { useContext, useEffect, 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 } from './style.css';
+import { container, icon, mainText, pointBoxVar, pointContainer, subText, surveyBox, thanksText } from './style.css';
 
 const CompletePage = () => {
   const {
     recruitingInfo: { name, season, group, soptName },
   } = useContext(RecruitingInfoContext);
   const isMakers = soptName?.toLowerCase().includes('makers');
-  const [point, setPoint] = useState(0);
+  const [point, setPoint] = useState<number | 'CHANGED'>(-1);
 
   const handleClickMyPage = () => {
     track('click-complete-my');
@@ -22,6 +22,9 @@ const CompletePage = () => {
 
   const handleClickPoint = (i: number) => {
     setPoint(i);
+    setTimeout(() => {
+      setPoint('CHANGED');
+    }, 1000);
   };
 
   return (
@@ -42,16 +45,20 @@ const CompletePage = () => {
             textAlign: 'center',
             whiteSpace: 'pre-line',
           }}>{`지원서 이용 만족도를 0-10점 중에 선택해주세요.\n의견을 주시면 프로덕트 개선에 도움이 됩니다.`}</span>
-        <ul className={pointContainer}>
-          {Array.from({ length: 10 }, (_, i) => i + 1).map((v) => (
-            <li
-              key={v}
-              className={pointBoxVar[v === point ? 'selected' : 'default']}
-              onClick={() => handleClickPoint(v)}>
-              <span>{v}</span>
-            </li>
-          ))}
-        </ul>
+        {point === 'CHANGED' ? (
+          <span className={thanksText}>소중한 의견 감사합니다 :&#41;</span>
+        ) : (
+          <ul className={pointContainer}>
+            {Array.from({ length: 11 }, (_, i) => i).map((v) => (
+              <li
+                key={v}
+                className={pointBoxVar[v === point ? 'selected' : 'default']}
+                onClick={() => handleClickPoint(v)}>
+                <span style={{ paddingTop: 5 }}>{v}</span>
+              </li>
+            ))}
+          </ul>
+        )}
       </div>
     </section>
   );

diff --git a/src/views/CompletePage/style.css.ts b/src/views/CompletePage/style.css.ts
@@ -57,6 +57,7 @@ export const surveyBox = style({
   ...theme.font.BODY_2_16_M,
   border: `1px solid ${theme.color.border}`,
   borderRadius: 15,
+  transition: 'all 0.3s ease',
 });
 
 export const pointContainer = style({
@@ -91,3 +92,12 @@ export const pointBoxVar = styleVariants({
     },
   ],
 });
+
+export const thanksText = style({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  height: 36,
+  ...theme.font.TITLE_6_16_SB,
+  color: theme.color.lighterText,
+});