Merge pull request #144 from prgrms-web-devcourse-final-project/102-design/404

[Feature] #102 404 페이지

Author: shlee9999

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'))

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>
+  )
+}

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%;
+`

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 />,
+      },
     ],
   },
   {