Merge pull request #207 from SOPT-36-NINEDOT/feat/#206/404

[Feat]: 404 페이지 구현

Author: jisooooooooooo

src/page/index.ts

@@ -5,3 +5,4 @@ export { default as History } from './history/History';
 export { default as SignUp } from './signup/SignUp';
 export { default as Edit } from './edit/Edit';
 export { default as GoogleCallback } from './callback/GoogleCallback';
+export { default as NotFound } from './notFound/NotFound';

src/page/notFound/NotFound.css.ts

@@ -0,0 +1,33 @@
+import { style } from '@vanilla-extract/css';
+
+import { colors, fonts, layout } from '@/style/token';
+
+export const container = style([
+  layout.columnCenter,
+  {
+    gap: '4rem',
+    height: 'calc(100vh - 15rem - 8rem)',
+    backgroundColor: colors.grey1,
+    textAlign: 'center',
+  },
+]);
+
+export const title = style([
+  fonts.display03,
+  {
+    color: colors.grey11,
+  },
+]);
+
+export const button = style([
+  fonts.subtitle05,
+  {
+    width: '19.6rem',
+    height: '5.4rem',
+    padding: '1.4rem 2rem',
+    backgroundColor: colors.blue06,
+    borderRadius: '8px',
+    color: colors.grey11,
+    textAlign: 'center',
+  },
+]);

src/page/notFound/NotFound.tsx

@@ -0,0 +1,36 @@
+import { useNavigate } from 'react-router-dom';
+
+import * as styles from './NotFound.css';
+
+import { PATH } from '@/route';
+
+const TEXT = {
+  title: ['찾으시는 페이지가 없어요', '홈으로 돌아가 볼까요?'],
+  button: '홈으로 가기',
+} as const;
+
+const NotFound = () => {
+  const navigate = useNavigate();
+
+  const handleGoHome = () => {
+    navigate(PATH.ROOT);
+  };
+
+  return (
+    <main className={styles.container}>
+      <h1 className={styles.title}>
+        {TEXT.title.map((line, index) => (
+          <span key={`${line}-${index}`}>
+            {line}
+            {index !== TEXT.title.length - 1 && <br />}
+          </span>
+        ))}
+      </h1>
+      <button type="button" className={styles.button} onClick={handleGoHome}>
+        {TEXT.button}
+      </button>
+    </main>
+  );
+};
+
+export default NotFound;

src/route/MainRoutes.tsx

@@ -2,8 +2,8 @@ import type { RouteObject } from 'react-router-dom';
 
 import { PATH } from './path';
 
+import { Home, NotFound } from '@/page';
 import { Layout } from '@/shared/component/Layout';
-import Home from '@/page/home/Home';
 import Intro from '@/page/intro/Intro';
 
 export const mainRoutes: RouteObject[] = [
@@ -81,6 +81,10 @@ export const mainRoutes: RouteObject[] = [
           return { Component: SignUp };
         },
       },
+      {
+        path: PATH.NOT_FOUND,
+        element: <NotFound />,
+      },
     ],
   },
 ];

src/route/path.ts

@@ -12,6 +12,7 @@ export const PATH = {
   PRIVACY: '/privacy',
   SIGNUP: '/signup',
   REDIRECT: '/auth/google/callback',
+  NOT_FOUND: '*',
 } as const;
 
 export type PathType = (typeof PATH)[keyof typeof PATH];