Merge pull request #202 from MBTips/feature/404-페이지

feat: 401,404,500 엣지케이스 Error 컴포넌트로 통일

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 Error from "@/pages/Error";
 
 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={<Error statusCode="500" />} />
         </Routes>
       </CenteredLayout>
     </Router>

src/App.tsx

@@ -0,0 +1,51 @@
+import PrimaryButton from "@/components/button/PrimaryButton";
+import { useNavigate } from "react-router-dom";
+
+const Error = ({ statusCode }: { statusCode: "401" | "404" | "500" }) => {
+  const navigate = useNavigate();
+
+  const content = {
+    401: {
+      title: "세션이 만료되었습니다.",
+      description: `활동이 없어 자동으로 로그아웃되었어요.\n채팅을 이어가려면 다시 로그인해 주세요.`,
+      buttonTitle: "홈으로 가기",
+      onClick: () => {
+        navigate("/");
+      }
+    },
+    404: {
+      title: "페이지를 찾을 수 없습니다.",
+      description: `입력하신 주소가 올바르지 않거나,\n요청하신 페이지가 삭제되었을 수 있습니다.`,
+      buttonTitle: "홈으로 가기",
+      onClick: () => {
+        navigate("/");
+      }
+    },
+    500: {
+      title: "앗! 잠시 오류가 일어났어요",
+      description: `일시적인 문제가 발생했습니다.\n잠시 후 다시 시도해 주세요.`,
+      buttonTitle: "새로고침 버튼",
+      onClick: () => {
+        window.location.reload();
+      }
+    }
+  };
+  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="에러 아이콘" width={63} height={63} />
+        <h1 className="text-2xl font-bold ">{content[statusCode].title}</h1>
+        <p className="text-center whitespace-pre-wrap text-gray-600">
+          {content[statusCode].description}
+        </p>
+      </div>
+      <div className="absolute bottom-[60px]">
+        <PrimaryButton size="md" onClick={content[statusCode].onClick}>
+          {content[statusCode].buttonTitle}
+        </PrimaryButton>
+      </div>
+    </main>
+  );
+};
+
+export default Error;