ref: 401,404,500 하나의 컴포넌트로 공통화

Author: junjeeong

src/App.tsx

@@ -20,7 +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";
+import Error from "@/pages/Error";
 
 const PageTracker = () => {
   const location = useLocation();
@@ -94,7 +94,7 @@ const App = () => {
           <Route path="/mbti-test" element={<MbtiTestIntro />} />
           <Route path="/mbti-test-progress" element={<MbtiTestQuestions />} />
           <Route path="/mbti-test-result" element={<MbtiTestResult />} />
-          <Route path="*" element={<NotFound />} />
+          <Route path="*" element={<Error mode="500" />} />
         </Routes>
       </CenteredLayout>
     </Router>

src/pages/Error.tsx

@@ -0,0 +1,51 @@
+import PrimaryButton from "@/components/button/PrimaryButton";
+import { useNavigate } from "react-router-dom";
+
+const Error = ({ mode }: { mode: "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[mode].title}</h1>
+        <p className="text-center whitespace-pre-wrap text-gray-600">
+          {content[mode].description}
+        </p>
+      </div>
+      <div className="absolute bottom-[60px]">
+        <PrimaryButton size="md" onClick={content[mode].onClick}>
+          {content[mode].buttonTitle}
+        </PrimaryButton>
+      </div>
+    </main>
+  );
+};
+
+export default Error;