Merge pull request #16 from boostcampwm-2024/featuer/not-found-page

✨ feat: 404페이지 추가

client/package.json

@@ -38,6 +38,7 @@
     "lucide-react": "^0.454.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-helmet": "^6.1.0",
     "react-router-dom": "^6.27.0",
     "recharts": "^2.13.3",
     "socket.io-client": "^4.8.1",
@@ -54,6 +55,7 @@
     "@types/node": "^22.9.0",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
+    "@types/react-helmet": "^6.1.11",
     "@typescript-eslint/eslint-plugin": "^8.12.2",
     "@typescript-eslint/parser": "^8.12.2",
     "@vitejs/plugin-react-swc": "^3.5.0",

client/src/App.tsx

@@ -2,6 +2,7 @@ import { lazy, Suspense, useEffect } from "react";
 import { Routes, Route } from "react-router-dom";
 
 import LoadingPage from "@/pages/Loading.tsx";
+import NotFound from "@/pages/NotFound";
 
 import { denamuAscii } from "@/constants/denamuAscii.ts";
 
@@ -46,6 +47,14 @@ export default function App() {
             </Suspense>
           }
         />
+        <Route
+          path="*"
+          element={
+            <Suspense fallback={<LoadingPage />}>
+              <NotFound />
+            </Suspense>
+          }
+        />
       </Routes>
       <ReactQueryDevtools />
     </QueryClientProvider>

client/src/pages/NotFound.tsx

@@ -0,0 +1,29 @@
+import { Helmet } from "react-helmet";
+import { useNavigate } from "react-router-dom";
+
+export default function NotFound() {
+  const navigate = useNavigate();
+  return (
+    <div className="min-h-screen flex flex-col items-center justify-center">
+      <Helmet>
+        <title>404-Not-Found</title>
+        <meta name="description" content="요청한 페이지를 찾을 수 없습니다." />
+      </Helmet>
+      <div className="max-w-2xl w-full text-center space-y-8">
+        <h1 className="text-8xl font-bold text-green-500">404</h1>
+
+        <div className="space-y-4">
+          <h2 className="text-2xl font-semibold text-gray-800">Not Found</h2>
+          <p className="text-gray-600 max-w-md mx-auto">요청하신 페이지를 찾을 수 없습니다.</p>
+        </div>
+
+        <button
+          onClick={() => navigate("/")}
+          className="inline-flex items-center px-6 py-3 text-white bg-green-500 rounded-lg hover:bg-green-600 transition-colors"
+        >
+          홈으로 돌아가기
+        </button>
+      </div>
+    </div>
+  );
+}