feat: 에러 페이지 추가

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: <NotFoundPage />,
+  },
   {
     path: 'live/:roomId',
     element: <LivePage />,
@@ -39,7 +44,7 @@ const router = createBrowserRouter([
   {
     path: '',
     element: <PageLayout />,
-    errorElement: <NotFoundPage />,
+    errorElement: <ErrorPage />,
     children: [
       {
         index: true,

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 (
+    <>
+      <Header />
+      <div className={styles.wrapper}>
+        <div className={styles.contents}>
+          <p className={styles.title}>에러가 발생했습니다.</p>
+          <p className={styles.msg}>
+            <span className={styles.seconds}>{time}초</span> 후에 자동으로 홈으로 이동합니다.
+          </p>
+          <Link
+            to={'/'}
+            className={styles.link}
+          >
+            홈으로 가기
+          </Link>
+        </div>
+        <Footer />
+      </div>
+    </>
+  );
+}

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

frontend/src/pages/ErrorPage/index.js

@@ -0,0 +1 @@
+export { default } from './ErrorPage';