From efc4b4c2a045ffc9c965e3cadf75f45da829dd47 Mon Sep 17 00:00:00 2001
From: shlee9999 <95556588+shlee9999@users.noreply.github.com>
Date: Mon, 9 Dec 2024 00:22:17 +0900
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8Feat:=20404=20Page?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/LazyComponents.tsx |  1 +
 src/pages/NotFoundPage/index.tsx  | 23 +++++++++++++++++++++++
 src/pages/NotFoundPage/styles.ts  | 21 +++++++++++++++++++++
 src/router.tsx                    | 10 +++++++---
 4 files changed, 52 insertions(+), 3 deletions(-)
 create mode 100644 src/pages/NotFoundPage/index.tsx
 create mode 100644 src/pages/NotFoundPage/styles.ts

diff --git a/src/components/LazyComponents.tsx b/src/components/LazyComponents.tsx
index 915622a4..2d21f91d 100644
--- a/src/components/LazyComponents.tsx
+++ b/src/components/LazyComponents.tsx
@@ -11,3 +11,4 @@ export const RegisterDogPage = lazy(() => import('~pages/RegisterPage/Dog'))
 export const WalkCompletePage = lazy(() => import('~pages/WalkCompletePage'))
 export const ProfilePage = lazy(() => import('~pages/ProfilePage'))
 export const FamilyDDangPage = lazy(() => import('~pages/FamilyDDangPage'))
+export const NotFoundPage = lazy(() => import('~pages/NotFoundPage'))
diff --git a/src/pages/NotFoundPage/index.tsx b/src/pages/NotFoundPage/index.tsx
new file mode 100644
index 00000000..f02beea3
--- /dev/null
+++ b/src/pages/NotFoundPage/index.tsx
@@ -0,0 +1,23 @@
+import DogFood from '~assets/dog_food.svg?react'
+import { ActionButton } from '~components/Button/ActionButton'
+import { Typo24 } from '~components/Typo'
+import * as S from './styles'
+import { useNavigate } from 'react-router-dom'
+
+export default function NotFoundPage() {
+  const navigate = useNavigate()
+  return (
+    <S.NotFoundPage>
+      <S.ErrorMessage>404!</S.ErrorMessage>
+      <Typo24 $textAlign='center' $weight='800' style={{ marginBottom: 24 }}>
+        요청하신 페이지를 찾을 수 없어요
+      </Typo24>
+      <ActionButton $type='roundedRect' onClick={() => navigate(-1)}>
+        되돌아가기
+      </ActionButton>
+      <S.Wrapper>
+        <DogFood />
+      </S.Wrapper>
+    </S.NotFoundPage>
+  )
+}
diff --git a/src/pages/NotFoundPage/styles.ts b/src/pages/NotFoundPage/styles.ts
new file mode 100644
index 00000000..78586dc8
--- /dev/null
+++ b/src/pages/NotFoundPage/styles.ts
@@ -0,0 +1,21 @@
+import { styled } from 'styled-components'
+
+export const NotFoundPage = styled.div`
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  padding: 0 20px 30%;
+`
+
+export const ErrorMessage = styled.p`
+  font-size: 64px;
+  text-align: center;
+  font-weight: 800;
+  color: ${({ theme }) => theme.colors.brand.default};
+`
+export const Wrapper = styled.div`
+  position: absolute;
+  bottom: 12%;
+`
diff --git a/src/router.tsx b/src/router.tsx
index bda24bab..735420a6 100644
--- a/src/router.tsx
+++ b/src/router.tsx
@@ -1,8 +1,8 @@
-import Footer from '~components/Footer'
 import { createBrowserRouter, Outlet } from 'react-router-dom'
-import * as Pages from './components/LazyComponents'
-import ModalContainer from '~modals/ModalContainer'
 import { WebSocketProvider } from '~/WebSocketContext'
+import Footer from '~components/Footer'
+import ModalContainer from '~modals/ModalContainer'
+import * as Pages from './components/LazyComponents'
 
 export const router = createBrowserRouter([
   {
@@ -47,6 +47,10 @@ export const router = createBrowserRouter([
         path: '/profile/:id',
         element: <Pages.ProfilePage />,
       },
+      {
+        path: '*',
+        element: <Pages.NotFoundPage />,
+      },
     ],
   },
   {