NOT FOUND 페이지 구현 (#639)

* assets: not found 이미지 추가

* feat: not found 페이지 구현

frontend/src/pages/NotFoundPage.tsx

@@ -0,0 +1,53 @@
+import Button from '@/components/common/Button/Button';
+import { usePageRouter } from '@/hooks/usePageRouter';
+import React from 'react';
+import styled from 'styled-components';
+import notFound from '@/assets/not-found.jpg';
+
+const NotFoundPage = () => {
+  const { goToMainPage } = usePageRouter();
+
+  return (
+    <S.NotFoundPageContainer>
+      <S.NotFoundImage src={notFound} />
+      <S.Message>
+        <S.Bold>페이지를 찾을 수 없습니다 😢</S.Bold>
+      </S.Message>
+      <Button colorTheme="WHITE" onClick={goToMainPage}>
+        홈으로 가기
+      </Button>
+    </S.NotFoundPageContainer>
+  );
+};
+
+export default NotFoundPage;
+
+const S = {
+  NotFoundPageContainer: styled.div`
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 50px;
+
+    margin-top: 10vh;
+  `,
+
+  NotFoundImage: styled.img`
+    height: 40vh;
+  `,
+
+  Message: styled.h1`
+    font-size: 30px;
+    line-height: 1.5;
+    white-space: pre-wrap;
+    text-align: center;
+
+    @media (max-width: 768px) {
+      font-size: 24px;
+    }
+  `,
+
+  Bold: styled.span`
+    font-weight: 700;
+  `,
+};

frontend/src/router.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import App from './App';
 import { createBrowserRouter } from 'react-router-dom';
 import MainPage from './pages/MainPage';
+import NotFoundPage from './pages/NotFoundPage';
 const RunnerPostPage = React.lazy(() => import('./pages/RunnerPostDetailPage'));
 const RunnerPostCreatePage = React.lazy(() => import('./pages/RunnerPostCreatePage'));
 const LoginPage = React.lazy(() => import('./pages/LoginPage'));
@@ -89,6 +90,7 @@ export const router = createBrowserRouter(
           element: <NoticePage />,
         },
         { path: ROUTER_PATH.RESULT, element: <ResultPage /> },
+        { path: ROUTER_PATH.NOT_FOUND, element: <NotFoundPage /> },
       ],
     },
   ],

frontend/src/types/image.d.ts

@@ -2,3 +2,4 @@
 declare module '*.svg';
 declare module '*.png';
 declare module '*.webp';
+declare module '*.jpg';