[Feat] CompletePage 사용자 만족도 조사 추가

src/views/CompletePage/index.tsx

@@ -1,24 +1,44 @@
 import { track } from '@amplitude/analytics-browser';
-import { useContext } 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, subText } from './style.css';
+import {
+  container,
+  icon,
+  mainText,
+  pointBoxVar,
+  pointContainerVar,
+  subText,
+  surveyBox,
+  thanksTextVar,
+} from './style.css';
 
 const CompletePage = () => {
   const {
     recruitingInfo: { name, season, group, soptName },
   } = useContext(RecruitingInfoContext);
   const isMakers = soptName?.toLowerCase().includes('makers');
+  const [point, setPoint] = useState<number | 'CHANGED'>(-1);
 
   const handleClickMyPage = () => {
     track('click-complete-my');
     window.location.reload();
   };
 
+  const handleClickPoint = (i: number) => {
+    setPoint(i);
+    setTimeout(() => {
+      setPoint('CHANGED');
+    }, 500);
+    setTimeout(() => {
+      setPoint(-1);
+    }, 2500);
+  };
+
   return (
     <section className={container}>
       <div className={icon}>
@@ -31,6 +51,26 @@ const CompletePage = () => {
           marginBottom: 50,
         }}>{`이메일 도착 시점에 차이가 있을 수 있습니다.\n이메일이 오지 않으면 스팸 메일함을 확인해주세요.`}</Callout>
       <Button onClick={handleClickMyPage}>마이페이지로 이동하기</Button>
+      <div className={surveyBox}>
+        <span
+          style={{
+            textAlign: 'center',
+            whiteSpace: 'pre-line',
+          }}>{`지원서 이용 만족도를 0-10점 중에 선택해주세요.\n의견을 주시면 프로덕트 개선에 도움이 됩니다.`}</span>
+        <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}
+                className={pointBoxVar[v === point ? 'selected' : 'default']}
+                onClick={() => handleClickPoint(v)}>
+                <span style={{ paddingTop: 5 }}>{v}</span>
+              </li>
+            ))}
+          </ul>
+        </div>
+      </div>
     </section>
   );
 };

src/views/CompletePage/style.css.ts

@@ -1,4 +1,4 @@
-import { style } from '@vanilla-extract/css';
+import { style, styleVariants } from '@vanilla-extract/css';
 import { calc } from '@vanilla-extract/css-utils';
 
 import { theme } from 'styles/theme.css';
@@ -23,24 +23,123 @@ export const icon = style({
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
-  marginBottom: '32px',
+  marginBottom: 20,
   width: 66,
   height: 66,
   borderRadius: '50%',
   background: theme.color.primaryLinear,
 });
 
 export const mainText = style({
-  marginBottom: 24,
+  marginBottom: 8,
   color: theme.color.baseText,
   textAlign: 'center',
   whiteSpace: 'pre-line',
   ...theme.font.HEADING_2_32_B,
 });
 
 export const subText = style({
-  marginBottom: 50,
+  marginBottom: 30,
   color: theme.color.baseText,
   textAlign: 'center',
   ...theme.font.BODY_1_18_M,
 });
+
+export const surveyBox = style({
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  alignItems: 'center',
+  gap: 12,
+  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,
+});
+
+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({
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  width: 28,
+  height: 36,
+  borderRadius: 6,
+  transition: 'all 0.3s ease',
+  cursor: 'pointer',
+});
+
+export const pointBoxVar = styleVariants({
+  default: [
+    pointBox,
+    {
+      backgroundColor: theme.color.subBackground,
+      color: theme.color.baseText,
+    },
+  ],
+  selected: [
+    pointBox,
+    {
+      backgroundColor: theme.color.primary,
+      color: theme.color.white,
+    },
+  ],
+});
+
+export const thanksText = style({
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  width: '100%',
+  height: '100%',
+  paddingTop: 5,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  ...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,
+    },
+  ],
+});