Feature(#24): Error 페이지, 강의 종료 페이지 구현

frontend/src/App.tsx

@@ -1,4 +1,4 @@
-import { BrowserRouter, Routes, Route } from "react-router-dom";
+import { BrowserRouter, Navigate, Routes, Route } from "react-router-dom";
 import "./global.css";
 import Home from "@/pages/Home/Home";
 import Login from "./pages/Login/Login";
@@ -12,6 +12,8 @@ import Example from "./pages/Example/Example";
 import ToastContainer from "./components/Toast/ToastContainer";
 import Start from "./pages/Start/Start";
 import MyPage from "./pages/MyPage/MyPage";
+import Error from "./pages/Error/Error";
+import LectureEnd from "./pages/LectureEnd/LectureEnd";
 
 const App = () => {
   return (
@@ -26,7 +28,10 @@ const App = () => {
           <Route path="/test" element={<Test />} />
           <Route path="/instructor" element={<Instructor />} />
           <Route path="/participant" element={<Participant />} />
+          <Route path="/lecture-end" element={<LectureEnd />} />
           <Route path="/example" element={<Example />} />
+          <Route path="/error" element={<Error />} />
+          <Route path="/*" element={<Navigate to="/error" />} />
         </Routes>
       </BrowserRouter>
     </RecoilRoot>

frontend/src/pages/Error/Error.tsx

@@ -0,0 +1,25 @@
+import { useNavigate } from "react-router-dom";
+import LogoBig from "@/assets/imgs/logoBig.png";
+import Button from "@/components/Button/Button";
+import HomeIcon from "@/assets/svgs/home.svg?react";
+
+const Error = () => {
+  const navigate = useNavigate();
+
+  return (
+    <div className="flex flex-col items-center justify-center display-center w-11/12 sm:8/12 md:w-fit">
+      <div className="flex flex-row items-center justify-center">
+        <p className="font-pretendard font-bold text-8xl md:text-size-260">4</p>
+        <img src={LogoBig} className="w-24 h-24 md:w-fit md:h-fit" alt="로고 이미지" />
+        <p className="font-pretendard font-bold text-8xl md:text-size-260">4</p>
+      </div>
+      <p className="font-pretendard font-semibold text-size-32 md:text-size-64">NOT FOUND</p>
+      <p className="semibold-20 text-grayscale-darkgray mt-12 mb-6">이런! 잘못된 접근이에요.</p>
+      <Button type="full" buttonStyle="black" onClick={() => navigate("/")}>
+        <HomeIcon className="fill-grayscale-white" />홈 화면으로 돌아가기
+      </Button>
+    </div>
+  );
+};
+
+export default Error;

frontend/src/pages/LectureEnd/LectureEnd.tsx

@@ -0,0 +1,21 @@
+import { useNavigate } from "react-router-dom";
+import EndLecture from "@/assets/imgs/endLecture.png";
+import Button from "@/components/Button/Button";
+import HomeIcon from "@/assets/svgs/home.svg?react";
+
+const LectureEnd = () => {
+  const navigate = useNavigate();
+
+  return (
+    <div className="flex flex-col items-center justify-center display-center w-11/12 md:w-fit">
+      <img src={EndLecture} className="w-64 h-64 md:w-fit md:h-fit" alt="로고 이미지" />
+      <p className="font-pretendard font-semibold text-size-32 -mt-20 md:-mt-32 md:text-size-64">CLOSED</p>
+      <p className="semibold-20 text-grayscale-darkgray mt-12 mb-6">강의가 종료되었어요.</p>
+      <Button type="full" buttonStyle="black" onClick={() => navigate("/")}>
+        <HomeIcon className="fill-grayscale-white" />홈 화면으로 돌아가기
+      </Button>
+    </div>
+  );
+};
+
+export default LectureEnd;