feat: 테스트 이력 및 로그인 여부에 따라 버튼, 모달 처리

Author: maylh

src/apis/auth/index.ts

@@ -13,6 +13,7 @@ export const useGetKakaoLogin = () => {
     mutationFn: ({ code }: { code: string }) => getKakaoLogin(code),
     onSuccess: async (response) => {
       const userNickname = response.data.data.nickname;
+      const hasType = response.data.data.hasType;
 
       setCookie('userNickname', userNickname, {
         httpOnly: false,
@@ -22,6 +23,14 @@ export const useGetKakaoLogin = () => {
         maxAge: 1209600, // 14일
       });
 
+      setCookie('hasType', hasType, {
+        httpOnly: false,
+        secure: process.env.NODE_ENV === 'production',
+        sameSite: 'lax',
+        path: '/',
+        maxAge: 1209600, // 14일
+      });
+
       // 비회원 상태에서 테스트 완료 후 로그인한 경우 테스트 결과 저장
       const type = sessionStorage.getItem('type') as TestType;
 
@@ -48,6 +57,7 @@ export const usePostLogout = () => {
     onSuccess: () => {
       localStorage.clear();
       deleteCookie('userNickname');
+      deleteCookie('hasType');
 
       router.push('/');
     },
@@ -66,6 +76,7 @@ export const usePostWithdraw = () => {
     onSuccess: () => {
       localStorage.clear();
       deleteCookie('userNickname');
+      deleteCookie('hasType');
       router.push('/');
       window.location.reload();
     },

src/apis/instance.ts

@@ -68,6 +68,7 @@ instance.interceptors.response.use(
 
         localStorage.clear();
         deleteCookie('userNickname');
+        deleteCookie('hasType');
         console.error(error);
         alert(MESSAGES.EXPIRED);
         window.location.replace('/');

src/apis/test/index.ts

@@ -1,6 +1,7 @@
 import { postJbtiTest, postTestResult } from '@apis/test/axios';
 import { TestType } from '@constants/test';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { setCookie } from 'cookies-next';
 import { useRouter } from 'next/navigation';
 
 export const usePostTestResult = () => {
@@ -17,6 +18,14 @@ export const usePostTestResult = () => {
       return data;
     },
     onSuccess: (data) => {
+      setCookie('hasType', true, {
+        httpOnly: false,
+        secure: process.env.NODE_ENV === 'production',
+        sameSite: 'lax',
+        path: '/',
+        maxAge: 1209600,
+      });
+
       queryClient.setQueryData(['test-result'], data);
       router.push(`/test/result`);
     },
@@ -29,5 +38,14 @@ export const usePostTestResult = () => {
 export const useSaveTestResult = () => {
   return useMutation({
     mutationFn: (type: TestType) => postTestResult(type),
+    onSuccess: () => {
+      setCookie('hasType', true, {
+        httpOnly: false,
+        secure: process.env.NODE_ENV === 'production',
+        sameSite: 'lax',
+        path: '/',
+        maxAge: 1209600,
+      });
+    },
   });
 };

src/app/test/page.tsx

@@ -13,18 +13,30 @@ import * as styles from './testPage.css';
 import { usePostTestResult } from '@apis/test';
 import { useRouter } from 'next/navigation';
 import TestHeader from '@components/test/testHeader/TestHeader';
+import { getCookie } from 'cookies-next';
+import ModalContainer from '@components/common/modal/ModalContainer';
 
 const TestPage = () => {
   const router = useRouter();
   const [selections, setSelections] = useState<string[]>([]);
+  const [isModalOpen, setIsModalOpen] = useState(false);
   const steps = ['START', ...TEST_STEPS.map((step) => step.id)];
+  const hasType = getCookie('hasType');
 
   const { Funnel, Step, nextStep, prevStep, currentStep } = useFunnel(steps);
   const progressStep = steps.indexOf(currentStep);
 
   const { mutate, isPending, isSuccess } = usePostTestResult();
   const isLoading = isPending || isSuccess;
 
+  const handleStartClick = () => {
+    if (hasType) {
+      setIsModalOpen(true);
+    } else {
+      nextStep();
+    }
+  };
+
   const handleSelect = (choice: string) => {
     const currentStepIndex = steps.indexOf(currentStep) - 1;
 
@@ -72,7 +84,7 @@ const TestPage = () => {
           <Funnel steps={steps}>
             {[
               <Step key="START" name="START">
-                <TestStart onClick={nextStep} />
+                <TestStart onClick={handleStartClick} />
               </Step>,
 
               ...TEST_STEPS.map(({ id, title, option1, option2 }) => (
@@ -89,6 +101,21 @@ const TestPage = () => {
           </Funnel>
         </div>
       )}
+
+      {isModalOpen && (
+        <ModalContainer
+          modalTitle="성향테스트를 이미 받으셨어요!"
+          modalBody="다시 받고싶으시다면 ‘다시하기’를 눌러주세요"
+          isOpen={isModalOpen}
+          handleClose={() => setIsModalOpen(false)}
+          handleSubmit={() => {
+            setIsModalOpen(false);
+            nextStep();
+          }}
+          leftBtnLabel="뒤로가기"
+          rightBtnLabel="다시하기"
+        />
+      )}
     </div>
   );
 };

src/app/test/result/page.tsx

@@ -16,11 +16,13 @@ import { toPng } from 'html-to-image';
 import TestHeader from '@components/test/testHeader/TestHeader';
 import { useRouter } from 'next/navigation';
 import ExceptLayout from '@components/except/exceptLayout/ExceptLayout';
+import { getCookie } from 'cookies-next';
 
 const ResultPage = () => {
   const cardRef = useRef<HTMLDivElement>(null);
   const router = useRouter();
   const queryClient = useQueryClient();
+  const userNickname = getCookie('userNickname');
 
   const resultData = queryClient.getQueryData<TestResponse>(['test-result']);
 
@@ -95,8 +97,18 @@ https://www.gototemplestay.com/test`,
       </section>
 
       <div className={styles.buttonSection}>
-        <Bubble text="나에게 맞는 절을 계속 추천받을 수 있어요!" />
-        <KakaoBtn page="TEST" type={resultData.code} />
+        {userNickname ? (
+          <PageBottomBtn
+            btnText="3초만에 템플스테이 추천받기"
+            size="large"
+            onClick={() => router.push('/')}
+          />
+        ) : (
+          <>
+            <Bubble text="나에게 맞는 절을 계속 추천받을 수 있어요!" />
+            <KakaoBtn page="TEST" type={resultData.code} />
+          </>
+        )}
         <PageBottomBtn btnText="친구에게 공유하기" size="large" onClick={handleShare} />
       </div>
     </div>