add : 교실 이동

add : 교실 이동

src/apis/changeClass/index.ts

@@ -1,6 +1,5 @@
 import { instance } from "..";
 import { useMutation } from "@tanstack/react-query";
-import { getToken } from "@/utils/auth";
 
 interface changeClass {
   class_num: number;
@@ -13,13 +12,24 @@ interface changeClass {
   username: string;
 }
 
+interface FloorClass {
+  id: string;
+  class_num: number;
+  classroom_name: string;
+  end_period: number;
+  grade: number;
+  move: string;
+  num: number;
+  start_period: number;
+  username: string;
+}
+
 export const GetFloor = () => {
   return useMutation<changeClass[], void, { floor: number }>({
     mutationFn: async (param) => {
       try {
         const response = await instance.get(
-          `/class-room/floor?floor=${param.floor}`,
-
+          `/class-room/floor?floor=${param.floor}&status=OK`
         );
         return response.data;
       } catch (error) {
@@ -30,12 +40,26 @@ export const GetFloor = () => {
 };
 
 export const ChangeClassList = () => {
-
   return useMutation<changeClass[], Error, { grade: number; class: number }>({
     mutationFn: async (param) => {
       try {
         const response = await instance.get(
-          `/class-room/grade?grade=${param.grade}&classNum=${param.class}`,
+          `/class-room/grade?grade=${param.grade}&classNum=${param.class}`
+        );
+        return response.data;
+      } catch (error) {
+        console.log(error);
+      }
+    },
+  });
+};
+
+export const AcceptClassChange = () => {
+  return useMutation<FloorClass[], Error, { floor: number }>({
+    mutationFn: async (param) => {
+      try {
+        const response = await instance.get(
+          `/class-room/floor?floor=${param.floor}&status=QUIET`
         );
         return response.data;
       } catch (error) {
@@ -44,3 +68,18 @@ export const ChangeClassList = () => {
     },
   });
 };
+
+export const AcceptClass = () => {
+  return useMutation<void, Error, { status: string; id: string[] }>({
+    mutationFn: async (param) => {
+      try {
+        await instance.patch(`/class-room/status`, {
+          status: param.status,
+          ids: param.id,
+        });
+      } catch (error) {
+        console.log(error);
+      }
+    },
+  });
+};

src/app/classChange/ok/page.tsx

@@ -0,0 +1,152 @@
+"use client";
+import React, { useEffect } from "react";
+import DoubleTab from "../../components/common/tab/page";
+import { getFullToday } from "@/utils/date";
+import { useState } from "react";
+import Dropdown from "../../components/common/dropdown";
+import ChangeClass from "../../components/common/list/changeClass/page";
+import { ChangeClassList, GetFloor } from "@/apis/changeClass";
+import { getStudentString } from "@/utils/until";
+import { BackGround } from "../../components/common/background";
+import Link from "next/link";
+
+interface changeClass {
+  class_num: number;
+  classroom_name: string;
+  floor: number;
+  grade: number;
+  id: string;
+  num: number;
+  user_id: string;
+  username: string;
+}
+
+const ClassChangeOk = () => {
+  const [selectedTab, setSelectedTab] = useState<boolean>(true);
+  const [selectedGrade, setSelectedGrade] = useState<number>(1);
+  const [selectedClass, setSelectedClass] = useState<number>(1);
+  const { mutate: changelistMutate } = ChangeClassList();
+  const [floorData, setFloorData] = useState<changeClass[]>([]);
+  const { mutate: changelistFloorMutate } = GetFloor();
+  const [changelist, setChangelist] = useState<changeClass[]>([]);
+  const [selectedFloor, setSelectedFloor] = useState<number>(2);
+
+  const onClickTab = (tab: boolean) => {
+    setSelectedTab(tab);
+  };
+
+  const handleGradeChange = (selectedOption: number) => {
+    setSelectedGrade(selectedOption);
+  };
+
+  const handleClassChange = (selectedOption: number) => {
+    setSelectedClass(selectedOption);
+  };
+
+  const handleFloorChange = (selectedOption: number) => {
+    setSelectedFloor(selectedOption);
+  };
+
+  useEffect(() => {
+    changeClassData();
+  }, [selectedGrade, selectedClass]);
+
+  useEffect(() => {
+    ChangeClassDataFloor();
+  }, [selectedFloor]);
+
+  useEffect(() => {
+    changeClassData();
+  }, []);
+
+  const ChangeClassDataFloor = async () => {
+    try {
+      if (selectedFloor) {
+        await changelistFloorMutate(
+          { floor: selectedFloor },
+          {
+            onSuccess: (data) => {
+              setFloorData(data);
+            },
+            onError: (error) => {
+              console.log(error);
+            },
+          }
+        );
+      }
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
+  const changeClassData = async () => {
+    try {
+      if (selectedClass && selectedGrade) {
+        await changelistMutate(
+          { grade: selectedGrade, class: selectedClass },
+          {
+            onSuccess: (data) => {
+              console.log(data);
+              setChangelist(data);
+            },
+          }
+        );
+      }
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
+  return (
+    <BackGround
+      subTitle="교실 이동"
+      secondTitle={getFullToday()}
+      linkChildren={
+        <>
+          <Link href={"/classChange"}>교실 이동 수락</Link> &gt; 교실 이동 현황
+        </>
+      }
+      DropChildren={
+        <>
+          <DoubleTab
+            firstChildren="반 별로 보기"
+            secondChildren="층 별로 보기"
+            onClick={onClickTab}
+          />
+          <div className="flex gap-5">
+            {selectedTab ? (
+              <>
+                <Dropdown type="grade" onChange={handleGradeChange} />
+                <Dropdown type="class" onChange={handleClassChange} />
+              </>
+            ) : (
+              <Dropdown type="floor" onChange={handleFloorChange} />
+            )}
+          </div>
+        </>
+      }
+    >
+      <div className="flex flex-wrap gap-5 justify-between w-full">
+        {selectedTab
+          ? changelist?.map((item, index) => (
+              <ChangeClass
+                key={index}
+                prevClass={`${item.grade}-${item.class_num}`}
+                nextClass={item.classroom_name}
+                student={getStudentString(item)}
+              />
+            ))
+          : floorData?.map((item, index) => (
+              <ChangeClass
+                key={index}
+                prevClass={`${item.grade}-${item.class_num}`}
+                nextClass={item.classroom_name}
+                student={getStudentString(item)}
+              />
+            ))}
+      </div>
+    </BackGround>
+  );
+};
+
+export default ClassChangeOk;