ADD :: 404페이지

Author: phyuna0525

src/404.tsx

@@ -0,0 +1,22 @@
+import { useNavigate } from "react-router-dom";
+import Button from "./components/button";
+import styled from "styled-components";
+
+export const NotFound = () => {
+    const router = useNavigate();
+    return (
+        <Container>
+            <h1>404 Not Found</h1>
+            <Button width="100" onClick={() => router('/main')}>메인으로 가기</Button>
+        </Container>
+    );
+}
+
+const Container = styled.div`
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100vh;
+    gap: 16px;
+`

src/router/router.tsx

@@ -1,3 +1,4 @@
+import { NotFound } from "@/404";
 import Attendance from "@/pages/attendance";
 import Bug from "@/pages/bug";
 import Login from "@/pages/login";
@@ -21,6 +22,10 @@ export const Router = createBrowserRouter([
         path: "",
         element: <Login />,
       },
+      {
+        path: '*',
+        element: <NotFound />
+      },
       {
         path: "main",
         element: <Main />,