add : 교실 이동 현황 보기

DSM-PICK · Apr 21, 2024 · 19a424f · 19a424f
2 parents 38f56bd + 44d8494
commit 19a424f
Show file tree

Hide file tree

Showing 5 changed files with 109 additions and 12 deletions.
diff --git a/src/api/classChange/index.ts b/src/api/classChange/index.ts
@@ -1,6 +1,6 @@
 import { useMutation, useQuery } from "@tanstack/react-query";
 import { instance } from "..";
-import { FloorClass } from "../type";
+import { FloorClass, changeClass } from "../type";
 
 export const AcceptClassChange = (floor: number) => {
   return useQuery<FloorClass[]>({
@@ -28,3 +28,18 @@ export const AcceptClass = () => {
     },
   });
 };
+
+export const GetFloor = () => {
+  return useMutation<changeClass[], void, { floor: number }>({
+    mutationFn: async (param) => {
+      try {
+        const response = await instance.get(
+          `/class-room/floor?floor=${param.floor}&status=OK`
+        );
+        return response.data;
+      } catch (error) {
+        throw error;
+      }
+    },
+  });
+};
diff --git a/src/api/type.ts b/src/api/type.ts
@@ -88,3 +88,14 @@ export interface ChangeClub {
   user_id: string;
   status_list: string[];
 }
+
+export interface changeClass {
+  class_num: number;
+  classroom_name: string;
+  floor: number;
+  grade: number;
+  id: string;
+  num: number;
+  user_id: string;
+  username: string;
+}
diff --git a/src/app/afterManage/page.tsx b/src/app/afterManage/page.tsx
@@ -106,6 +106,7 @@ const AfterManage = () => {
       };
     });
     Post(updatedData);
+    setMadal(false);
   };
 
   const handleAcceptListClick = (id: string, name: string) => {
@@ -131,6 +132,7 @@ const AfterManage = () => {
   };
 
   useEffect(() => {
+    setClubList([]);
     if (getClub) {
       setClubList(getClub);
     }
@@ -250,7 +252,7 @@ const AfterManage = () => {
           />
         )}
       </div>
-      <div className="absolute bottom-4% w-5/6 left-50%">
+      <div className="absolute bottom-4% w-5/6">
         {edit ? (
           selectedTab ? (
             <Button

diff --git a/src/app/classChange/page.tsx b/src/app/classChange/page.tsx
@@ -22,6 +22,8 @@ const ClassChange = () => {
   const { data: AccpetMutate } = AcceptClassChange(selectedFloor);
   const { mutate: AccpetList } = AcceptClass();
 
+  const router = useRouter();
+
   const Accept = async () => {
     setAccept(true);
   };
@@ -108,20 +110,11 @@ const ClassChange = () => {
     <BackGround
       TabOnclick={() => {}}
       TabOK={false}
-      title="교실이동수락"
+      title="교실 이동 수락"
       subTitle={getFullToday()}
       Dropdown={
         <div className=" flex justify-between items-center">
           <div className="flex gap-5 items-center">
-            {/* <Button
-              colorType="ghost"
-              buttonSize="small"
-              onClick={() => {
-                nav.push("/classChange/ok");
-              }}
-            >
-              교실 이동 보기
-            </Button> */}
             <Dropdown type="floor" onChange={handleFloorChange} />
           </div>
           <div className=" flex gap-2 w-32">
@@ -186,6 +179,17 @@ const ClassChange = () => {
           onConfirm={Acceptconfirm}
         />
       )}
+      <div className=" absolute bottom-4% w-5/6">
+        <Button
+          onClick={() => {
+            router.push("/classChange/status");
+          }}
+          colorType="primary"
+          buttonSize="full"
+        >
+          전체 이동자 보기
+        </Button>
+      </div>
     </BackGround>
   );
 };

diff --git a/src/app/classChange/status/page.tsx b/src/app/classChange/status/page.tsx
@@ -0,0 +1,65 @@
+"use client";
+import React, { useEffect } from "react";
+import { getFullToday } from "@/util/date";
+import { useState } from "react";
+import Dropdown from "@/components/dropdown";
+import { GetFloor } from "@/api/classChange";
+import { getStudentString } from "@/util/util";
+import BackGround from "@/components/background";
+import ChangeClass from "@/components/classChange";
+import { changeClass } from "@/api/type";
+
+const ClassChangeOk = () => {
+  const [floorData, setFloorData] = useState<changeClass[]>([]);
+  const { mutate: changelistFloorMutate } = GetFloor();
+  const [selectedFloor, setSelectedFloor] = useState<number>(2);
+
+  const handleFloorChange = (selectedOption: number) => {
+    setSelectedFloor(selectedOption);
+  };
+
+  useEffect(() => {
+    ChangeClassDataFloor();
+  }, [selectedFloor]);
+
+  const ChangeClassDataFloor = async () => {
+    try {
+      if (selectedFloor) {
+        await changelistFloorMutate(
+          { floor: selectedFloor },
+          {
+            onSuccess: (data) => {
+              setFloorData(data);
+            },
+            onError: (error) => {
+              console.log(error);
+            },
+          }
+        );
+      }
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
+  return (
+    <BackGround
+      title="교실이동"
+      subTitle={getFullToday()}
+      Dropdown={<Dropdown type="floor" onChange={handleFloorChange} />}
+      TabOK={false}
+      TabOnclick={() => {}}
+    >
+      {floorData?.map((item, index) => (
+        <ChangeClass
+          key={index}
+          prevClass={`${item.grade}-${item.class_num}`}
+          nextClass={item.classroom_name}
+          student={getStudentString(item)}
+        />
+      ))}
+    </BackGround>
+  );
+};
+
+export default ClassChangeOk;