Merge pull request #62 from softeerbootcamp4th/TASK-184

[Feature][Task-184] 404 not found error page 구현
softeerbootcamp4th · Aug 16, 2024 · 5fd156a · 5fd156a
2 parents ed797dc + 7478628
commit 5fd156a
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 6 deletions.
diff --git a/packages/user/src/components/layout/ErrorContainer.tsx b/packages/user/src/components/layout/ErrorContainer.tsx
@@ -9,12 +9,12 @@ export default function ErrorContainer({ errorMessage, reset }: ErrorFallbackPro
 	return (
 		<div
 			role="alert"
-			className="w-screen flex h-screen flex-col items-center gap-15 justify-center"
+			className="gap-15 flex h-screen w-screen flex-col items-center justify-center"
 		>
 			<img src="/images/fcfs/result/wrong.png" alt="오류 발생 이미지" />
 			<div className="flex flex-col items-center gap-5">
 				<h4>{errorMessage}</h4>
-				<Button onClick={reset}>새로 고침 하기</Button>
+				<Button onClick={reset}>홈으로 돌아가기</Button>
 			</div>
 		</div>
 	);

diff --git a/packages/user/src/pages/ErrorPage.tsx b/packages/user/src/pages/ErrorPage.tsx
@@ -2,10 +2,8 @@ import { useNavigate } from 'react-router-dom';
 import ErrorContainer from 'src/components/layout/ErrorContainer.tsx';
 import RoutePaths from 'src/constants/routePath.ts';
 
-export default function ErrorPage() {
+export default function ErrorPage({ message = '문제가 발생했어요!' }: { message?: string }) {
 	const navigate = useNavigate();
 
-	return (
-		<ErrorContainer errorMessage="문제가 발생했어요!" reset={() => navigate(RoutePaths.Home)} />
-	);
+	return <ErrorContainer errorMessage={message} reset={() => navigate(RoutePaths.Home)} />;
 }
diff --git a/packages/user/src/pages/NotFoundErrorPage.tsx b/packages/user/src/pages/NotFoundErrorPage.tsx
@@ -0,0 +1,5 @@
+import ErrorPage from 'src/pages/ErrorPage.tsx';
+
+export default function NotFoundErrorPage() {
+	return <ErrorPage message="페이지를 찾을 수 없어요!" />;
+}
diff --git a/packages/user/src/routes/router.tsx b/packages/user/src/routes/router.tsx
@@ -5,6 +5,7 @@ import AuthProvider from 'src/context/auth/index.tsx';
 import ErrorPage from 'src/pages/ErrorPage.tsx';
 import EventPage from 'src/pages/EventPage.tsx';
 import HomePage from 'src/pages/HomePage.tsx';
+import NotFoundErrorPage from 'src/pages/NotFoundErrorPage.tsx';
 
 const routes: RouteObject[] = [
 	{
@@ -26,6 +27,7 @@ const routes: RouteObject[] = [
 			},
 		],
 	},
+	{ path: '*', element: <NotFoundErrorPage /> },
 ];
 
 const router = createBrowserRouter(routes);