[Feat] 404 에러 페이지 구현

frontend/package.json

@@ -12,10 +12,12 @@
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "dependencies": {
+    "@types/react-lottie": "^1.2.10",
     "@types/socket.io-client": "^3.0.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-icons": "^5.3.0",
+    "react-lottie": "^1.2.7",
     "react-router-dom": "^6.27.0",
     "socket.io-client": "^4.8.1",
     "zustand": "^5.0.1"

frontend/src/pages/ErrorPage.tsx

@@ -0,0 +1,66 @@
+import Lottie from "react-lottie";
+import snowmanAnimate from "../../public/assets/snowman.json";
+import { useNavigate } from "react-router-dom";
+
+const ErrorPage = () => {
+  const navigate = useNavigate();
+  return (
+    <section
+      className={
+        "w-full text-center py-20 h-screen flex items-center justify-center"
+      }
+    >
+      <div className={"relative "}>
+        <div
+          className={
+            "flex text-green-100 w-[1024px] relative -mt-32 mx-auto aspect-video -z-10"
+          }
+          aria-label={"눈사람"}
+        >
+          <span
+            className={
+              "text-9xl [text-shadow:_0_2px_2px_rgb(0_0_0_/_40%)] absolute left-80 top-1/2  font-bold"
+            }
+          >
+            4
+          </span>
+          <Lottie
+            options={{
+              animationData: snowmanAnimate,
+              loop: true,
+              autoplay: true,
+            }}
+            ariaRole={undefined}
+            isClickToPauseDisabled={true}
+          />
+          <span
+            className={
+              "text-9xl [text-shadow:_0_2px_2px_rgb(0_0_0_/_40%)] absolute right-80 top-1/2  font-bold"
+            }
+          >
+            4
+          </span>
+        </div>
+        <div
+          className={
+            "absolute bottom-16 left-1/2 transform -translate-x-1/2 z-20 pointer-events-nones"
+          }
+        >
+          <p className={"font-light text-xl"}>
+            이런! 요청하신 데이터를 찾을 수 없었어요!
+          </p>
+          <button
+            className={
+              " bg-green-500 hover:bg-green-600 text-white p-2 rounded-lg mt-4 "
+            }
+            onClick={() => navigate("/sessions")}
+          >
+            메인 페이지로 이동하기
+          </button>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default ErrorPage;

frontend/src/routes.tsx

@@ -2,6 +2,7 @@ import App from "./App.tsx";
 import CreateSessionPage from "./pages/CreateSessionPage.tsx";
 import SessionListPage from "./pages/SessionListPage.tsx";
 import SessionPage from "./pages/SessionPage";
+import ErrorPage from "@/pages/ErrorPage.tsx";
 
 export const routes = [
   {
@@ -25,7 +26,7 @@ export const routes = [
     path: "/sessions/create",
   },
   {
-    element: <>에러 페이지</>,
+    element: <ErrorPage />,
     path: "/*",
   },
 ];