Merge branch 'dev' of https://github.com/MBTips/FE-MBTips into fix/select-info의-30대-이상-버튼-값

Author: Soohyuniii

public/icon/restart.svg

@@ -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>
   );

public/image/ENTP.png

@@ -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>

public/image/Rectangle.png

@@ -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="친구 추가 버튼"

public/image/mbti_test.png

@@ -0,0 +1,17 @@
+const MbtiAnswerButtons = ({ content }: { content: string[] }) => {
+    
+    const commonStyle = "flex justify-center items-center bg-primary-pale border-1 border-primary-light rounded-lg w-[335px] h-[80px] font-medium text-primary-normal text-lg";
+
+    return (
+        <div className="flex flex-col gap-9">
+            <button className={commonStyle}>
+            {content[0]}
+            </button>
+            <button className={commonStyle}>
+            {content[1]}
+            </button>
+        </div>
+  )
+}
+
+export default MbtiAnswerButtons;

public/image/mbti_test_result_image.png

@@ -0,0 +1,17 @@
+import { useNavigate } from "react-router-dom";
+
+const RestartButton = () => {
+    const navigate = useNavigate();
+
+    const goFirstStep = () => {
+        navigate("/mbti-test");
+    }
+
+    return (
+        <button className="flex justify-center items-center bg-gray-100 rounded-lg w-[72px] h-[60px]" onClick={goFirstStep}>
+            <img src="/icon/restart.svg" alt="다시하기 버튼" width={24} height={24} />
+        </button>
+  )
+}
+
+export default RestartButton;