Merge pull request #80 from Soohyuniii/feature/친구저장으로-이동하기

feat: navigate to select info of virtual friend

Author: Soohyuniii

src/App.tsx

@@ -8,6 +8,9 @@ import ChatTemporature from "@/pages/ChatTemporature";
 import Content from "@/pages/Content";
 import Login from "@/pages/Login";
 import KaKaoLogin from "@/pages/KaKaoLogin";
+import MbtiTestIntro from "@/pages/MbtiTestIntro";
+import MbtiTestQuestions from "@/pages/MbtiTestQuestions";
+import MbtiTestResult from "@/pages/MbtiTestResult";
 import CenteredLayout from "./components/CenteredLayout";
 
 const App = () => {
@@ -23,8 +26,11 @@ const App = () => {
           <Route path="/chat-temporature" element={<ChatTemporature />} />
           <Route path="/contents/:id" element={<Content />} />
           <Route path="/login" element={<Login />} />
-          <Route path="/kakao-login" element={<KaKaoLogin />} />{" "}
-      </Routes>
+          <Route path="/kakao-login" element={<KaKaoLogin />} />
+          <Route path="/mbti-test" element={<MbtiTestIntro />} />
+          <Route path="/mbti-test/:n" element={<MbtiTestQuestions />} />
+          <Route path="/mbti-test-result/:mbti" element={<MbtiTestResult />} />
+        </Routes>
       </CenteredLayout>
     </Router>
   );

src/components/StrokeBanner.tsx

@@ -1,16 +1,24 @@
+import { useNavigate } from "react-router-dom";
+
 const StrokeBanner = () => {
+  const navigate = useNavigate();
+
+  const handleNavigate = () => {
+    const mode = "virtualFriend";
+    navigate("/select-info", { state: mode });
+  };
+
   return (
     <div className="flex h-[178px] w-[320px] flex-col justify-center rounded-lg border border-dashed border-gray-200 px-[38px] py-6 text-center md:w-[335px] lg:w-[460px]">
-      {/* "상대방 정보 선택" 페이지 생성되면되면 Link로 쓸 예정*/}
-      <a href="/setting-friends">
+      <button onClick={handleNavigate}>
         <img
           src="/icon/plus_button.svg"
           alt="친구 등록 버튼"
           className="mx-auto hover:scale-110"
           width={40}
           height={40}
         />
-      </a>
+      </button>
       <strong className="text-4 mt-4 font-bold text-gray-900">
         친구 정보를 저장하고 대화할 수 있어요
       </strong>

src/components/SubTitle.tsx

@@ -14,6 +14,11 @@ const SubTitle = ({ mode }: { mode: "빠른대화" | "친구목록" }) => {
     }
   };
 
+  const handleNavigate = () => {
+    const mode = "virtualFriend";
+    navigate("/select-info", { state: mode });
+  };
+
   return (
     <div className="flex items-center">
       <h2 className="text-xl font-bold text-gray-900">
@@ -23,7 +28,7 @@ const SubTitle = ({ mode }: { mode: "빠른대화" | "친구목록" }) => {
         {titleList[mode].description}
       </p>
       {mode === "친구목록" && (
-        <button onClick={() => navigate("/setting-friends")}>
+        <button onClick={handleNavigate}>
           <img
             src="/icon/plus.svg"
             alt="친구 추가 버튼"

tsconfig.app.json

@@ -9,7 +9,7 @@
       "@/store/*": ["store/*"],
       "@/types/*": ["types/*"],
       "@/utils/*": ["utils/*"],
-      "@/constants/*": ["constants/*"],
+      "@/constants/*": ["constants/*"]
     },
     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
     "target": "ES2020",

vite.config.ts

@@ -36,6 +36,14 @@ export default defineConfig({
       {
         find: "@/constants",
         replacement: path.resolve(__dirname, "src/constants")
+      },
+      {
+        find: "@/store",
+        replacement: path.resolve(__dirname, "src/store")
+      },
+      {
+        find: "@/api",
+        replacement: path.resolve(__dirname, "src/api")
       }
     ]
   }