From eb62db34312358fd54d236865e2fa4bea39ef043 Mon Sep 17 00:00:00 2001
From: ttaerrim <ltr0121@naver.com>
Date: Sun, 10 Dec 2023 17:49:41 +0900
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20404=20=ED=8E=98=EC=9D=B4=EC=A7=80?=
 =?UTF-8?q?=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/frontend/src/hooks/useRouter.tsx         |  2 ++
 app/frontend/src/pages/NotFound/index.css.ts | 31 ++++++++++++++++++++
 app/frontend/src/pages/NotFound/index.tsx    | 25 ++++++++++++++++
 app/frontend/src/pages/index.ts              |  1 +
 4 files changed, 59 insertions(+)
 create mode 100644 app/frontend/src/pages/NotFound/index.css.ts
 create mode 100644 app/frontend/src/pages/NotFound/index.tsx

diff --git a/app/frontend/src/hooks/useRouter.tsx b/app/frontend/src/hooks/useRouter.tsx
index 669379a45..75f2a8cba 100644
--- a/app/frontend/src/hooks/useRouter.tsx
+++ b/app/frontend/src/hooks/useRouter.tsx
@@ -10,6 +10,7 @@ import {
   MapLayout,
   Groups,
   ProfilePage,
+  NotFound,
 } from '@/pages';
 
 export const useRouter = () =>
@@ -17,6 +18,7 @@ export const useRouter = () =>
     {
       path: '/',
       element: <Layout />,
+      errorElement: <NotFound />,
       children: [{ index: true, element: <MainPage /> }],
     },
     {
diff --git a/app/frontend/src/pages/NotFound/index.css.ts b/app/frontend/src/pages/NotFound/index.css.ts
new file mode 100644
index 000000000..5fab7f4a8
--- /dev/null
+++ b/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',
+  },
+]);
diff --git a/app/frontend/src/pages/NotFound/index.tsx b/app/frontend/src/pages/NotFound/index.tsx
new file mode 100644
index 000000000..b78d77c07
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/app/frontend/src/pages/index.ts b/app/frontend/src/pages/index.ts
index d816d16a7..be3bc46ce 100644
--- a/app/frontend/src/pages/index.ts
+++ b/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';