Merge pull request #381 from Jaymyong66/refactor/NotFoundPage

ErrorBoundary에 NotFound 페이지 적용

frontend/src/components/Layout/Layout.tsx

@@ -4,6 +4,7 @@ import { Outlet } from 'react-router-dom';
 
 import { Header } from '@/components';
 import { useHeaderHeight } from '@/hooks/utils/useHeaderHeight';
+import { NotFoundPage } from '@/pages';
 import * as S from './Layout.style';
 
 const Layout = () => {
@@ -20,13 +21,7 @@ const Layout = () => {
     <S.LayoutContainer>
       <Header headerRef={headerRef} />
       <S.Wrapper>
-        <ErrorBoundary
-          fallback={({ error }) => (
-            <div>
-              <span>{String(error)}</span>Local Sentry 에러바운더리입니다.
-            </div>
-          )}
-        >
+        <ErrorBoundary fallback={() => <NotFoundPage />}>
           <Outlet />
         </ErrorBoundary>
       </S.Wrapper>

frontend/src/pages/NotFoundPage/NotFoundPage.tsx

@@ -4,7 +4,7 @@ import { tigger } from '@/assets/images';
 import { Button, Flex, Heading, Text } from '@/components';
 import { theme } from '@/style/theme';
 
-const ErrorPage = () => {
+const NotFoundPage = () => {
   const navigate = useNavigate();
 
   return (
@@ -36,4 +36,4 @@ const ErrorPage = () => {
   );
 };
 
-export default ErrorPage;
+export default NotFoundPage;

frontend/src/pages/index.ts

@@ -4,3 +4,4 @@ export { default as TemplatePage } from './TemplatePage/TemplatePage';
 export { default as TemplateUploadPage } from './TemplateUploadPage/TemplateUploadPage';
 export { default as SignupPage } from './SignupPage/SignupPage';
 export { default as LoginPage } from './LoginPage/LoginPage';
+export { default as NotFoundPage } from './NotFoundPage/NotFoundPage';

frontend/src/routes/router.tsx

@@ -1,13 +1,13 @@
 import { createBrowserRouter } from 'react-router-dom';
 
 import { Layout } from '@/components';
-import { TemplatePage, MyTemplatePage, TemplateUploadPage, SignupPage, LoginPage } from '@/pages';
+import { TemplatePage, MyTemplatePage, TemplateUploadPage, SignupPage, LoginPage, NotFoundPage } from '@/pages';
 import AuthGuard from './AuthGuard';
 import GuestGuard from './GuestGuard';
 
 const router = createBrowserRouter([
   {
-    errorElement: <div>Global Error Element</div>,
+    errorElement: <NotFoundPage />,
     element: <Layout />,
     children: [
       {
@@ -50,6 +50,10 @@ const router = createBrowserRouter([
           </AuthGuard>
         ),
       },
+      {
+        path: '*',
+        element: <NotFoundPage />,
+      },
     ],
   },
 ]);