출석 관리 api 만들기

DSM-PICK · Apr 22, 2024 · adec555 · adec555
2 parents d8beaa5 + c4d2149
commit adec555
Show file tree

Hide file tree

Showing 3 changed files with 87 additions and 26 deletions.
diff --git a/src/api/attendanceCheck/index.ts b/src/api/attendanceCheck/index.ts
@@ -1,18 +1,30 @@
 import { useMutation, useQuery } from "@tanstack/react-query";
 import { instance } from "..";
-import { ClubList } from "../type";
+import { AttendanceChack, ClubList } from "../type";
 
 export const GetStudentsAttendance = () => {
-    return useMutation<ClubList[], Error, { grade: number; class: number }>({
-      mutationFn: async (param) => {
-        try {
-          const response = await instance.get(
-            `/attendance/grade?grade=${param.grade}&class_num=${param.class}`
-          );
-          return response.data;
-        } catch (error) {
-          console.log(error);
-        }
-      },
-    });
-  };
+  return useMutation<ClubList[], Error, { grade: number; class: number }>({
+    mutationFn: async (param) => {
+      try {
+        const response = await instance.get(
+          `/attendance/grade?grade=${param.grade}&class_num=${param.class}`
+        );
+        return response.data;
+      } catch (error) {
+        console.log(error);
+      }
+    },
+  });
+};
+
+export const AttendanceSave = () => {
+  return useMutation<void, Error, AttendanceChack[]>({
+    mutationFn: async (param) => {
+      try {
+        await instance.patch("/attendance/modify", param);
+      } catch (error) {
+        console.log(error);
+      }
+    },
+  });
+};
diff --git a/src/api/type.ts b/src/api/type.ts
@@ -44,6 +44,11 @@ export interface ClubList {
   status10: string;
 }
 
+export interface AttendanceChack {
+  user_id: string;
+  status_list: string[];
+}
+
 export interface ChangeStatus {
   user_id: string;
   status_list: string[];

diff --git a/src/app/attendanceCheck/page.tsx b/src/app/attendanceCheck/page.tsx
@@ -1,7 +1,8 @@
 "use client";
-import { GetStudentsAttendance } from "@/api/attendanceCheck";
-import { AfterStudent, ClubList } from "@/api/type";
+import { AttendanceSave, GetStudentsAttendance } from "@/api/attendanceCheck";
+import { AfterStudent, AttendanceChack, ClubList } from "@/api/type";
 import BackGround from "@/components/background";
+import Button from "@/components/button";
 import Dropdown from "@/components/dropdown";
 import AfterList from "@/components/list/afterManage";
 import { getStudentString } from "@/util/util";
@@ -13,6 +14,7 @@ const attendanceCheck = () => {
   const [selectedGrade, setSelectedGrade] = useState<number>(1);
   const [selectedClass, setSelectedClass] = useState<number>(1);
   const { mutate: getStudentsAttendance } = GetStudentsAttendance();
+  const { mutate: attendanceSave } = AttendanceSave();
 
   const handleGradeChange = (selectedOption: number) => {
     setStudents([]);
@@ -46,6 +48,37 @@ const attendanceCheck = () => {
     }
   };
 
+  const AttandenceSaveFn = async () => {
+    const updatedData: AttendanceChack[] = [];
+    students?.forEach((item) => {
+      const localData = localStorage.getItem(item.id);
+      if (localData) {
+        const parsedData = JSON.parse(localData);
+        const studentData = {
+          user_id: item.id,
+          status_list: [parsedData[0], parsedData[1], parsedData[2]],
+        };
+        updatedData.push(studentData);
+      }
+    });
+
+    try {
+      await attendanceSave(updatedData, {
+        onSuccess: () => {
+         //location.reload();
+        },
+        onError: (error) => {
+          alert(error.name);
+        },
+      });
+      updatedData.forEach((item) => {
+        localStorage.setItem(item.user_id, JSON.stringify(item.status_list));
+      });
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
   useEffect(() => {
     const keys = Object.keys(localStorage);
     keys.forEach((key) => {
@@ -54,32 +87,43 @@ const attendanceCheck = () => {
       }
     });
     Check();
-  }, [selectedGrade, selectedClass]);
+  }, [selectedGrade, selectedClass, selectClassTime]);
 
   return (
     <BackGround
       title="출석 체크"
       TabOK={false}
       Dropdown={
-        <div className="flex">
-          <Dropdown onChange={handleGradeChange} type="grade" />
-          <Dropdown onChange={handleClassChange} type="class" />
-          <Dropdown onChange={handleClassTimeChange} type="classTime" />
+        <div className="flex justify-between">
+          <div className=" flex gap-3">
+            <Dropdown onChange={handleGradeChange} type="grade" />
+            <Dropdown onChange={handleClassChange} type="class" />
+            <Dropdown onChange={handleClassTimeChange} type="classTime" />
+          </div>
+          <div className=" w-16 flex">
+            <Button
+              colorType="primary"
+              onClick={AttandenceSaveFn}
+              buttonSize="extraSmall"
+            >
+              저장
+            </Button>
+          </div>
         </div>
       }
       TabOnclick={() => {}}
     >
       <div className=" flex flex-col gap-4 h-full">
-        {students.map((item, index) => (
+        {students?.map((item, index) => (
           <AfterList
             key={index}
             time={selectClassTime}
             name={getStudentString(item)}
             id={item.id}
-            state1={item.status8}
-            state2={item.status9}
-            state3={item.status10}
-            after={true}
+            state1={item.status6}
+            state2={item.status7}
+            state3={item.status8}
+            after
           />
         ))}
       </div>