Merge pull request #204 from Soohyuniii/feat/mbti-test-결과를-select-info에-반영

feat: mbti test 결과를 select info에 반영

Author: Soohyuniii

src/components/button/ChatStartButton.tsx

@@ -1,10 +1,12 @@
 import { useNavigate } from "react-router-dom";
 import { trackEvent } from "@/libs/analytics";
-const ChatStartButton = ({
-  mode
-}: {
+
+type ChatStartButtonProps = {
   mode: "go-fast" | "go-virtual" | "go-chat";
-}) => {
+  mbti?: string;
+};
+
+const ChatStartButton = ({ mode, mbti }: ChatStartButtonProps) => {
   const navigate = useNavigate();
 
   const handleNavigate = () => {
@@ -14,14 +16,14 @@ const ChatStartButton = ({
           page: "홈",
           element: "빠른 대화 시작"
         });
-        navigate("/select-info", { state: "fastFriend" });
+        navigate("/select-info", { state: { type: "fastFriend", mbti } });
         break;
       case "go-virtual":
         trackEvent("Click", {
           page: "홈",
           element: "친구 - 바로 대화하기"
         });
-        navigate("/select-info", { state: "virtualFriend" });
+        navigate("/select-info", { state: { type: "virtualFriend", mbti } });
         break;
       case "go-chat":
         navigate("/chat");

src/pages/MbtiTestResult.tsx

@@ -7,51 +7,66 @@ import useLayoutSize from "@/hooks/useLayoutSize";
 import Header from "@/components/header/Header";
 
 const MbtiTestResult = () => {
+  const mbti = localStorage.getItem("mbti-test-mbti") ?? "";
+  const result = MBTI_RESULT_INFO[mbti as keyof typeof MBTI_RESULT_INFO];
+  const size = useLayoutSize();
+  const imageURL =
+    size === "sm"
+      ? `/image/mbti-test/360px/image_${mbti?.toLocaleLowerCase()}_360.png`
+      : size === "md"
+        ? `/image/mbti-test/375px/image_${mbti?.toLocaleLowerCase()}_375.png`
+        : `/image/mbti-test/500px/image_${mbti?.toLocaleLowerCase()}_500.png`;
 
-    const mbti = localStorage.getItem("mbti-test-mbti");
-    const result = MBTI_RESULT_INFO[mbti as keyof typeof MBTI_RESULT_INFO];
-    const size = useLayoutSize();
-    const imageURL = size === "sm" ? `/image/mbti-test/360px/image_${mbti?.toLocaleLowerCase()}_360.png` : (size === "md" ? `/image/mbti-test/375px/image_${mbti?.toLocaleLowerCase()}_375.png` : `/image/mbti-test/500px/image_${mbti?.toLocaleLowerCase()}_500.png`);
-    console.log(imageURL);
-    
-    const handleClick = (e: MouseEvent) => {
-        e.preventDefault();
-    }
+  if (!result) return <div>404 error occured</div>;
 
-    if (!result) return <div>404 error occured</div>;
-
-    return (
-        <div className="flex flex-col sm:w-[360px] md:w-[375px] lg:w-[500px] h-[1008px]">
-            <Header title="결과" showShareIcon={false}/>
-            <main className="flex flex-col flex-grow items-center w-full px-5 bg-white h-screen py-5">
-                <img src={imageURL} alt="mbti 테스트 결과 이미지" className="sm:w-[320px] md:w-[335px] lg:w-[460px] h-[292px]"/>
-                <h2 className="mt-6 font-bold text-2xl">{mbti?.toUpperCase()}는 이런 성향이에요!</h2>
-                <ul className="flex gap-3 mt-4">
-                    <li style={{ backgroundColor: result.bgColor, color: result.textColor }} className="px-4 py-1 rounded-[40px] font-bold">{result.tag[0]}</li>
-                    <li style={{ backgroundColor: result.bgColor, color: result.textColor }} className="px-4 py-1 rounded-[40px] font-bold">{result.tag[1]}</li>
-                </ul>
-                <div className="flex flex-col bg-white mt-4 p-[28px] border-[#EDEDED] border-1 rounded-[20px]">
-                    <h3 className="font-bold text-lg">좋아하는 대화 주제</h3>
-                    <ul className="ml-5 list-disc">
-                        <li>{result.topic[0]}</li>
-                        <li>{result.topic[1]}</li>
-                    </ul>
-                    <h3 className="mt-6 font-bold text-lg">좋아하는 대화 태도</h3>
-                    <ul className="ml-5 list-disc">
-                        <li>{result.attitude[0]}</li>
-                        <li>{result.attitude[1]}</li>
-                    </ul>
-                </div>
-                <div className="mt-[22px] w-full">
-                    <ChatStartButton mode={"go-virtual"}/>
-                </div>
-                <div className="flex gap-4 mt-5 w-full">
-                    <RestartButton/>
-                    <ShareButton />
-                </div>
-            </main>
+  return (
+    <div className="flex h-[1008px] flex-col sm:w-[360px] md:w-[375px] lg:w-[500px]">
+      <Header title="결과" showShareIcon={false} />
+      <main className="flex h-screen w-full flex-grow flex-col items-center bg-white px-5 py-5">
+        <img
+          src={imageURL}
+          alt="mbti 테스트 결과 이미지"
+          className="h-[292px] sm:w-[320px] md:w-[335px] lg:w-[460px]"
+        />
+        <h2 className="mt-6 text-2xl font-bold">
+          {mbti?.toUpperCase()}는 이런 성향이에요!
+        </h2>
+        <ul className="mt-4 flex gap-3">
+          <li
+            style={{ backgroundColor: result.bgColor, color: result.textColor }}
+            className="rounded-[40px] px-4 py-1 font-bold"
+          >
+            {result.tag[0]}
+          </li>
+          <li
+            style={{ backgroundColor: result.bgColor, color: result.textColor }}
+            className="rounded-[40px] px-4 py-1 font-bold"
+          >
+            {result.tag[1]}
+          </li>
+        </ul>
+        <div className="mt-4 flex flex-col rounded-[20px] border-1 border-[#EDEDED] bg-white p-[28px]">
+          <h3 className="text-lg font-bold">좋아하는 대화 주제</h3>
+          <ul className="ml-5 list-disc">
+            <li>{result.topic[0]}</li>
+            <li>{result.topic[1]}</li>
+          </ul>
+          <h3 className="mt-6 text-lg font-bold">좋아하는 대화 태도</h3>
+          <ul className="ml-5 list-disc">
+            <li>{result.attitude[0]}</li>
+            <li>{result.attitude[1]}</li>
+          </ul>
+        </div>
+        <div className="mt-[22px] w-full">
+          <ChatStartButton mode={"go-fast"} mbti={mbti} />
+        </div>
+        <div className="mt-5 flex w-full gap-4">
+          <RestartButton />
+          <ShareButton />
         </div>
-    );
-}
+      </main>
+    </div>
+  );
+};
 
-export default MbtiTestResult;
+export default MbtiTestResult;

src/pages/SelectInfo.tsx

@@ -1,4 +1,4 @@
-import { ChangeEvent, useState } from "react";
+import { ChangeEvent, useEffect, useState } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
 import FormButton from "@/components/button/FormButton";
 import Header from "@/components/header/Header";
@@ -42,15 +42,20 @@ function isVirtualFriendResponse(
 const SelectInfo = () => {
   const navigate = useNavigate();
   const location = useLocation();
-  const mode = location.state; // mode: fastFriend, virtualFriend 두 종류 존재
-  const isNameRequired = mode === "virtualFriend";
+  const { type, mbti: testResultMBTI } = location.state; // type: fastFriend, virtualFriend 두 종류 존재
+  const isNameRequired = type === "virtualFriend";
   const headerTitle =
-    mode === "fastFriend" ? "상대방 정보선택" : "친구 저장하기";
+    type === "fastFriend" ? "상대방 정보선택" : "친구 저장하기";
   const selectInfoTitle =
-    mode === "fastFriend"
+    type === "fastFriend"
       ? `상대방의 MBTI를 선택하면\n대화를 시뮬레이션 해볼 수 있어요`
       : `친구의 MBTI를\n선택해주세요`;
 
+  const mbtiTestResult =
+    typeof location.state === "object" && testResultMBTI !== null
+      ? testResultMBTI
+      : undefined;
+
   const [selectedMBTI, setSelectedMBTI] = useState<{
     [key: string]: string | null;
   }>({
@@ -66,6 +71,17 @@ const SelectInfo = () => {
   const [interest, setInterest] = useState<string[]>([]);
   const [toastMessage, setToastMessage] = useState<string | null>(null);
 
+  useEffect(() => {
+    if (mbtiTestResult && mbtiTestResult.length === 4) {
+      setSelectedMBTI({
+        E: mbtiTestResult[0],
+        N: mbtiTestResult[1],
+        F: mbtiTestResult[2],
+        P: mbtiTestResult[3]
+      });
+    }
+  }, [mbtiTestResult]);
+
   const mbtiOptions = ["E", "N", "F", "P", "I", "S", "T", "J"];
   const ageOptions = ["10대", "20대", "30대 이상"];
   const genderOptions = ["여자", "남자"];
@@ -158,7 +174,7 @@ const SelectInfo = () => {
     };
 
     const selectedData =
-      mode === "virtualFriend"
+      type === "virtualFriend"
         ? {
             ...commonData,
             friendName: name,
@@ -173,7 +189,7 @@ const SelectInfo = () => {
           };
 
     const apiUrl =
-      mode === "virtualFriend" ? "api/virtual-friend" : "api/fast-friend";
+      type === "virtualFriend" ? "api/virtual-friend" : "api/fast-friend";
 
     try {
       const response = await instance.post<FriendResponse>(
@@ -182,27 +198,27 @@ const SelectInfo = () => {
       );
       const responseData = response.data.data;
 
-      if (mode === "virtualFriend" && isVirtualFriendResponse(responseData)) {
+      if (type === "virtualFriend" && isVirtualFriendResponse(responseData)) {
         trackEvent("Click", {
           page: "친구 저장",
           element: "대화 시작하기"
         });
         navigate("/chat", {
           state: {
             mbti,
-            mode,
+            mode: type,
             id: responseData.conversationId
           }
         });
-      } else if (mode === "fastFriend" && typeof responseData === "number") {
+      } else if (type === "fastFriend" && typeof responseData === "number") {
         trackEvent("Click", {
           page: "빠른 대화 설정",
           element: "대화 시작하기"
         });
         navigate("/chat", {
           state: {
             mbti,
-            mode,
+            mode: type,
             id: responseData
           }
         });