feat: 404.tsx 개발

Author: junjeeong

public/icon/error.svg

@@ -20,6 +20,7 @@ import MbtiTestQuestions from "@/pages/MbtiTestQuestions";
 import MbtiTestResult from "@/pages/MbtiTestResult";
 import CenteredLayout from "@/components/CenteredLayout";
 import { initGA, trackPageView } from "@/libs/analytics";
+import NotFound from "@/pages/NotFound";
 
 const PageTracker = () => {
   const location = useLocation();
@@ -77,16 +78,23 @@ const App = () => {
           <Route path="/" element={<Home />} />
           <Route path="/select-info" element={<SelectInfo />} />
           <Route path="/chat" element={<Chat />} />
-          <Route path="/chat-recommend" element={<ChatRecommend />} />
-          <Route path="/chat-tips" element={<ChatTips />} />
-          <Route path="/chat-temporature" element={<ChatTemporature />} />
+          <Route
+            path="/chat-recommend/:virtualFriendId"
+            element={<ChatRecommend />}
+          />
+          <Route path="/chat-tips/:virtualFriendId" element={<ChatTips />} />
+          <Route
+            path="/chat-temporature/:conversationId"
+            element={<ChatTemporature />}
+          />
           <Route path="/contents/:id" element={<Content />} />
           <Route path="/login" element={<Login />} />
           <Route path="/my-info" element={<MyInfo />} />
           <Route path="/kakao-login" element={<KaKaoLogin />} />
-          <Route path="/mbti-test" element={<MbtiTestIntro />} />     
+          <Route path="/mbti-test" element={<MbtiTestIntro />} />
           <Route path="/mbti-test-progress" element={<MbtiTestQuestions />} />
           <Route path="/mbti-test-result" element={<MbtiTestResult />} />
+          <Route path="*" element={<NotFound />} />
         </Routes>
       </CenteredLayout>
     </Router>

src/App.tsx

@@ -0,0 +1,36 @@
+import PrimaryButton from "@/components/button/PrimaryButton";
+import { useNavigate } from "react-router-dom";
+
+const NotFound = () => {
+  const navigate = useNavigate();
+
+  const goHome = () => {
+    navigate("/");
+  };
+
+  return (
+    <main className="relative flex flex-col items-center  bg-white">
+      <div className="absolute bottom-[372px] flex h-[196px] flex-col items-center justify-between">
+        <img
+          src="/icon/error.svg"
+          alt="404 페이지 아이콘"
+          width={63}
+          height={63}
+        />
+        <h1 className="text-2xl font-bold ">페이지를 찾을 수 없습니다.</h1>
+        <p className=" text-center text-gray-600">
+          입력하신 주소가 올바르지 않거나,
+          <br />
+          요청하신 페이지가 삭제되었을 수 있습니다.
+        </p>
+      </div>
+      <div className="absolute bottom-[60px]">
+        <PrimaryButton size="md" onClick={goHome}>
+          홈으로 가기
+        </PrimaryButton>
+      </div>
+    </main>
+  );
+};
+
+export default NotFound;