Merge pull request #263 from MBTips/bug/mbti-test-result-페이지-공유-안되는-문제-해결-건

fix: Mbti test result 페이지에서 공유하기했을 때 url에 mbti가 들어갈 수 있도록 변경

Author: junjeeong

src/App.tsx

@@ -118,7 +118,7 @@ const App = () => {
           <Route path="/kakao-login" element={<KaKaoLogin />} />
           <Route path="/mbti-test" element={<MbtiTestIntro />} />
           <Route path="/mbti-test-progress" element={<MbtiTestQuestions />} />
-          <Route path="/mbti-test-result" element={<MbtiTestResult />} />
+          <Route path="/mbti-test-result/:mbti" element={<MbtiTestResult />} />
           <Route path="*" element={<Error statusCode="500" />} />
         </Routes>
       </CenteredLayout>

src/pages/MbtiTestResult.tsx

@@ -4,9 +4,10 @@ import RestartButton from "@/components/button/RestartButton";
 import ChatStartButton from "@/components/button/ChatStartButton";
 import useLayoutSize from "@/hooks/useLayoutSize";
 import Header from "@/components/header/Header";
+import { useParams } from "react-router-dom";
 
 const MbtiTestResult = () => {
-  const mbti = localStorage.getItem("mbti-test-mbti") ?? "";
+  const { mbti } = useParams();
   const result = MBTI_RESULT_INFO[mbti as keyof typeof MBTI_RESULT_INFO];
   const size = useLayoutSize();
   const imageURL =

src/store/useMbtiTestState.ts

@@ -5,6 +5,7 @@ type PageNumber = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
 interface MbtiTestState {
   currentPage: PageNumber;
   currentMbti: string;
+  pageIsCompleted: Record<PageNumber, boolean>;
   mbtiLog: Record<string, number>;
   setNextStep: () => void;
   setPreviousStep: () => void;
@@ -18,6 +19,20 @@ interface MbtiTestState {
 const useMbtiTestState = create<MbtiTestState>((set, get) => ({
   currentPage: 1,
   currentMbti: "",
+  pageIsCompleted: {
+    1: false,
+    2: false,
+    3: false,
+    4: false,
+    5: false,
+    6: false,
+    7: false,
+    8: false,
+    9: false,
+    10: false,
+    11: false,
+    12: false
+  },
   mbtiLog: {
     E: 0,
     I: 0,
@@ -30,14 +45,16 @@ const useMbtiTestState = create<MbtiTestState>((set, get) => ({
   },
   setNextStep: () => {
     const currentPage = get().currentPage;
+    const currentMbti = get().currentMbti;
     const setPageComplete = get().setPageComplete;
 
     setPageComplete(currentPage); // 현재 페이지를 완료로 설정
 
     // 마지막 페이지라면 결과 페이지로 이동
     if (currentPage === 12) {
       get().getMbtiByLog();
-      if (get().currentMbti !== "") window.location.href = "/mbti-test-result";
+      if (currentMbti !== "")
+        window.location.href = `/mbti-test-result/${currentMbti}`;
       else console.error("mbti가 비어있습니다.");
     } else {
       // 그렇지 않다면 페이지를 증가시킴