Merge pull request #411 from ttaerrim/410-404

[Feat] 404 페이지 추가

app/frontend/src/hooks/useRouter.tsx

@@ -10,13 +10,15 @@ import {
   MapLayout,
   Groups,
   ProfilePage,
+  NotFound,
 } from '@/pages';
 
 export const useRouter = () =>
   createBrowserRouter([
     {
       path: '/',
       element: <Layout />,
+      errorElement: <NotFound />,
       children: [{ index: true, element: <MainPage /> }],
     },
     {

app/frontend/src/pages/NotFound/index.css.ts

@@ -0,0 +1,31 @@
+import { style } from '@vanilla-extract/css';
+
+import { vars } from '@/styles';
+import { sansBold16, sansRegular16 } from '@/styles/font.css';
+
+const { morakGreen } = vars.color;
+
+export const button = style([
+  sansBold16,
+  {
+    textDecorationLine: 'underline',
+    color: morakGreen,
+    cursor: 'pointer',
+  },
+]);
+
+export const container = style({
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  height: '100vh',
+});
+
+export const text = style([
+  sansRegular16,
+  {
+    textAlign: 'center',
+    whiteSpace: 'break-spaces',
+    lineHeight: '2rem',
+  },
+]);

app/frontend/src/pages/NotFound/index.tsx

@@ -0,0 +1,25 @@
+import { useNavigate } from 'react-router-dom';
+
+import { MessageWrapper } from '@/components';
+
+import * as styles from './index.css';
+
+export function NotFound() {
+  const navigate = useNavigate();
+
+  const onClickMain = () => {
+    navigate('/');
+  };
+  return (
+    <div className={styles.container}>
+      <MessageWrapper>
+        <p className={styles.text}>
+          {`페이지를 찾을 수 없습니다.\n`}
+          <button type="button" onClick={onClickMain} className={styles.button}>
+            메인 페이지로 이동하기
+          </button>
+        </p>
+      </MessageWrapper>
+    </div>
+  );
+}

app/frontend/src/pages/index.ts

@@ -5,4 +5,5 @@ export * from './Map';
 export * from './Mogaco';
 export * from './MogacoDetail';
 export * from './MogacoPost';
+export * from './NotFound';
 export * from './Profile';