Merge pull request #94 from imaginer-dev/edit_router

feat: add NotFound page

Author: gihwan-dev

src/main.tsx

@@ -4,6 +4,7 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import './styles/index.css';
 import App from './App.tsx';
 import TextInputForm from './pages/InputFormTest.tsx';
+import { NotFound } from './pages/Notfound.tsx';
 
 import { createBrowserRouter, RouterProvider } from 'react-router-dom';
 import LoginPage from './pages/LoginPage.tsx';
@@ -14,8 +15,17 @@ const router = createBrowserRouter([
     element: <App />,
   },
   {
-    path: '/test/inputForm',
-    element: <TextInputForm />,
+    path: '*',
+    element: <NotFound />,
+  },
+  {
+    path: '/test',
+    children: [
+      {
+        path: 'inputForm',
+        element: <TextInputForm />,
+      },
+    ],
   },
   {
     path: 'login',

src/pages/Footer.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+
+const Footer: React.FC = () => {
+  return (
+    <footer className="footer footer-center rounded bg-base-200 p-10 text-base-content">
+      <nav className="grid grid-flow-col gap-4">
+        <a className="link-hover link">About us</a>
+        <a className="link-hover link">Contact</a>
+        <a className="link-hover link">Jobs</a>
+        <a className="link-hover link">Press kit</a>
+      </nav>
+      <nav>
+        <div className="grid grid-flow-col gap-4">
+          <a>
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" className="fill-current">
+              <path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"></path>
+            </svg>
+          </a>
+          <a>
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" className="fill-current">
+              <path d="M19.615 3.184c-3.604-.246-11.631-.245-15.23 0-3.897.266-4.356 2.62-4.385 8.816.029 6.185.484 8.549 4.385 8.816 3.6.245 11.626.246 15.23 0 3.897-.266 4.356-2.62 4.385-8.816-.029-6.185-.484-8.549-4.385-8.816zm-10.615 12.816v-8l8 3.993-8 4.007z"></path>
+            </svg>
+          </a>
+          <a>
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" className="fill-current">
+              <path d="M9 8h-3v4h3v12h5v-12h3.642l.358-4h-4v-1.667c0-.955.192-1.333 1.115-1.333h2.885v-5h-3.808c-3.596 0-5.192 1.583-5.192 4.615v3.385z"></path>
+            </svg>
+          </a>
+        </div>
+      </nav>
+      <aside>
+        <p>Copyright © 2024 - All right reserved by ACME Industries Ltd</p>
+      </aside>
+    </footer>
+  );
+};
+
+export default Footer;

src/pages/Notfound.tsx

@@ -0,0 +1,19 @@
+export const NotFound = () => (
+  <div>
+    <main className="grid min-h-full place-items-center bg-white px-6 py-24 sm:py-32 lg:px-8">
+      <div className="text-center">
+        <p className="text-base font-semibold text-indigo-600">404</p>
+        <h1 className="mt-4 text-3xl font-bold tracking-tight text-gray-900 sm:text-5xl">Page not found</h1>
+        <p className="mt-6 text-base leading-7 text-gray-600">주소를 잘못 찾아오신것 같아요 :)</p>
+        <div className="mt-10 flex items-center justify-center gap-x-6">
+          <a
+            href="/"
+            className="rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+          >
+            홈으로 바로가기
+          </a>
+        </div>
+      </div>
+    </main>
+  </div>
+);