diff --git a/frontend/src/Router.jsx b/frontend/src/Router.jsx
index 5df90dc..05c8d35 100644
--- a/frontend/src/Router.jsx
+++ b/frontend/src/Router.jsx
@@ -6,6 +6,7 @@ import NotFoundPage from './pages/NotFoundPage';
import { lazy } from 'react';
import MyPageLayout from './components/Layout/MyPageLayout';
import LivePage from './pages/LivePage';
+import ErrorPage from './pages/ErrorPage';
const LectureLayout = lazy(async () => await import('./components/Layout/LectureLayout'));
const LearningLectureDetailPage = lazy(async () => await import('./pages/LearningLectureDetailPage'));
@@ -32,6 +33,10 @@ const QuizsetDetailPage = lazy(async () => await import('./pages/QuizsetDetailPa
const QuizsetEditPage = lazy(async () => await import('./pages/QuizsetEditPage'));
const router = createBrowserRouter([
+ {
+ path: '*',
+ element: ,
+ },
{
path: 'live/:roomId',
element: ,
@@ -39,7 +44,7 @@ const router = createBrowserRouter([
{
path: '',
element: ,
- errorElement: ,
+ errorElement: ,
children: [
{
index: true,
diff --git a/frontend/src/pages/ErrorPage/ErrorPage.jsx b/frontend/src/pages/ErrorPage/ErrorPage.jsx
new file mode 100644
index 0000000..35cc1e8
--- /dev/null
+++ b/frontend/src/pages/ErrorPage/ErrorPage.jsx
@@ -0,0 +1,45 @@
+import styles from './ErrorPage.module.css';
+import { useEffect, useState } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+import { Header } from '../../components/Header';
+import { Footer } from '../../components/Footer';
+
+export default function ErrorPage() {
+ const [time, setTime] = useState(5);
+ const navigate = useNavigate();
+
+ useEffect(() => {
+ const timer = setInterval(() => {
+ setTime((prev) => prev - 1);
+ }, 1000);
+
+ return () => clearInterval(timer);
+ }, []);
+
+ useEffect(() => {
+ if (time === 0) {
+ navigate('/');
+ }
+ }, [navigate, time]);
+
+ return (
+ <>
+
+
+
+
에러가 발생했습니다.
+
+ {time}초 후에 자동으로 홈으로 이동합니다.
+
+
+ 홈으로 가기
+
+
+
+
+ >
+ );
+}
diff --git a/frontend/src/pages/ErrorPage/ErrorPage.module.css b/frontend/src/pages/ErrorPage/ErrorPage.module.css
new file mode 100644
index 0000000..f20ee2a
--- /dev/null
+++ b/frontend/src/pages/ErrorPage/ErrorPage.module.css
@@ -0,0 +1,49 @@
+.wrapper {
+ flex-grow: 1;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ align-items: center;
+ width: 100%;
+ height: 100%;
+ min-height: 100vh;
+ padding-top: 64px;
+ color: var(--text-color);
+ font-size: 24px;
+ line-height: 1.2;
+ font-weight: 700;
+ box-sizing: border-box;
+}
+
+.contents {
+ flex-grow: 1;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ gap: 12px;
+}
+
+.title {
+ margin: 32px;
+ font-size: 32px;
+}
+
+.msg {
+ padding: 0;
+ margin: 0;
+}
+
+.seconds {
+ color: var(--primary-color);
+ font-size: 24px;
+ line-height: 1.2;
+ font-weight: 700;
+}
+
+.link {
+ color: var(--primary-color);
+ font-size: 16px;
+ line-height: 1.4;
+ font-weight: 700;
+}
diff --git a/frontend/src/pages/ErrorPage/index.js b/frontend/src/pages/ErrorPage/index.js
new file mode 100644
index 0000000..83691b6
--- /dev/null
+++ b/frontend/src/pages/ErrorPage/index.js
@@ -0,0 +1 @@
+export { default } from './ErrorPage';