feat: add authorization

src/components/admin/AuthRequiredRoute.tsx

@@ -1,28 +1,41 @@
 import { Navigate, Outlet } from "react-router-dom";
 import styled from "styled-components";
 
+import { useCourses } from "../../api/course.ts";
 import { useUser } from "../../api/user.ts";
+import { useClassId } from "../../hooks/urlParse.tsx";
 import SideBar from "../SideBar.tsx";
 
 function AuthRequiredRoute() {
-  // TODO: handle isError
-  const { data: user, isLoading } = useUser();
+  const { data: user, isLoading: isUserLoading } = useUser();
+  const { data: classList, isLoading: isClassListLoading } = useCourses();
 
-  if (isLoading) {
-    // TODO: apply design
+  const classId = useClassId();
+
+  if (isUserLoading || isClassListLoading) {
     return <div></div>;
-  } else {
-    if (user) {
-      return (
-        <Container>
-          <SideBar />
-          <Outlet />
-        </Container>
-      );
-    } else {
-      return <Navigate to="/admin/signin" replace />;
+  }
+
+  if (!user) {
+    return <Navigate to="/admin/signin" replace />;
+  }
+
+  if (classId) {
+    const isAuthorized = classList?.some(
+      (classItem) => classItem.id === classId
+    );
+
+    if (!isAuthorized) {
+      return <Navigate to="/class" replace />;
     }
   }
+
+  return (
+    <Container>
+      <SideBar />
+      <Outlet />
+    </Container>
+  );
 }
 
 const Container = styled.div`

src/pages/class/ClassList.tsx

@@ -1,5 +1,5 @@
 import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { useRef, useState } from "react";
+import { useState } from "react";
 import { useNavigate } from "react-router-dom";
 import styled from "styled-components";