feat(frontend): 404 Not Foundのページを実装 (#297)

frontend/src/routes/__root.tsx

@@ -13,4 +13,16 @@ export const Route = createRootRouteWithContext<{
       <TanStackRouterDevtools />
     </>
   ),
+  notFoundComponent: () => {
+    return (
+      <div className="flex h-full flex-col items-center justify-center gap-6 text-center">
+        <section className="space-y-2">
+          <h1 className="text-2xl font-bold">Page not found</h1>
+          <p className="text-muted-foreground">
+            The page you are looking for does not exist.
+          </p>
+        </section>
+      </div>
+    )
+  },
 })

frontend/src/routes/_student/problems/$problemId/route.tsx

@@ -25,4 +25,7 @@ export const Route = createFileRoute("/_student/problems/$problemId")({
       throw error
     }
   },
+  notFoundComponent: () => {
+    return "Problem not found"
+  },
 })

frontend/src/routes/_teacher/admin/problems/$problemId/index.lazy.tsx

@@ -1,5 +1,10 @@
+import { Button } from "@/components/ui/button"
 import { $api } from "@/lib/api"
-import { createLazyFileRoute } from "@tanstack/react-router"
+import {
+  createLazyFileRoute,
+  Link,
+  NotFoundRouteComponent,
+} from "@tanstack/react-router"
 import { toast } from "sonner"
 
 import { ProblemForm } from "../-components/problem-form"
@@ -41,8 +46,27 @@ const Problem = () => {
   )
 }
 
+const AdminProblemNotFound: NotFoundRouteComponent = () => {
+  const { problemId } = Route.useParams()
+
+  return (
+    <div className="flex h-full flex-col items-center justify-center gap-6 text-center">
+      <section className="space-y-2">
+        <h1 className="text-2xl font-bold">Problem not found</h1>
+        <p className="text-muted-foreground">
+          The problem with ID <code>{problemId}</code> does not exist.
+        </p>
+      </section>
+      <Button asChild variant="link">
+        <Link to="/admin/problems">Back to problems</Link>
+      </Button>
+    </div>
+  )
+}
+
 export const Route = createLazyFileRoute(
   "/_teacher/admin/problems/$problemId/",
 )({
   component: Problem,
+  notFoundComponent: AdminProblemNotFound,
 })

frontend/src/routes/_teacher/admin/problems/$problemId/index.tsx

@@ -18,4 +18,7 @@ export const Route = createFileRoute("/_teacher/admin/problems/$problemId/")({
       throw error
     }
   },
+  notFoundComponent: () => {
+    return "Problem not found"
+  },
 })

frontend/src/routes/_teacher/admin/submissions/$submissionId/route.lazy.tsx

@@ -1,6 +1,10 @@
 import { Button } from "@/components/ui/button"
 import { $api } from "@/lib/api"
-import { createLazyFileRoute, Link } from "@tanstack/react-router"
+import {
+  createLazyFileRoute,
+  Link,
+  NotFoundRouteComponent,
+} from "@tanstack/react-router"
 import { ArrowLeft } from "lucide-react"
 
 import { SubmissionInfo } from "./-components/submission-info"
@@ -45,8 +49,27 @@ export const SubmissionDetail = () => {
   )
 }
 
+const AdminSubmissionNotFound: NotFoundRouteComponent = () => {
+  const { submissionId } = Route.useParams()
+
+  return (
+    <div className="flex h-full flex-col items-center justify-center gap-6 text-center">
+      <section className="space-y-2">
+        <h1 className="text-2xl font-bold">Submission not found</h1>
+        <p className="text-muted-foreground">
+          The submission with ID <code>{submissionId}</code> does not exist.
+        </p>
+      </section>
+      <Button asChild variant="link">
+        <Link to="/admin/submissions">Back to submissions</Link>
+      </Button>
+    </div>
+  )
+}
+
 export const Route = createLazyFileRoute(
   "/_teacher/admin/submissions/$submissionId",
 )({
   component: SubmissionDetail,
+  notFoundComponent: AdminSubmissionNotFound,
 })

frontend/src/routes/_teacher/admin/submissions/$submissionId/route.tsx

@@ -22,4 +22,7 @@ export const Route = createFileRoute(
       throw error
     }
   },
+  notFoundComponent: () => {
+    return "Submission not found"
+  },
 })