Merge branch 'develop'

DSM-PICK · Aug 18, 2024 · afb40f3 · afb40f3
2 parents 5352131 + 3194392
commit afb40f3
Show file tree

Hide file tree

Showing 10 changed files with 276 additions and 431 deletions.
diff --git a/package.json b/package.json
@@ -15,14 +15,15 @@
     "react": "^18",
     "react-cookie": "^7.1.4",
     "react-cookies": "^0.1.1",
-    "react-dom": "^18"
+    "react-dom": "^18",
+    "zustand": "^4.5.4"
   },
   "devDependencies": {
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "postcss": "^8",
-    "tailwindcss": "^3.4.1",
+    "tailwindcss": "^3.4.9",
     "typescript": "^5"
   }
 }
diff --git a/src/api/afterManage/index.ts b/src/api/afterManage/index.ts
@@ -9,14 +9,16 @@ import {
 } from "../type";
 import apiError from "@/hook/errorHandling";
 
-export const GetClubList = (club: string) => {
+export const GetClubList = (club: string, period: number) => {
   const { handleError } = apiError();
   return useQuery<ClubList[]>({
-    queryKey: ["GetClubList", club],
+    queryKey: ["GetClubList", club, period],
     queryFn: async () => {
       try {
-        const response = await instance.get(`/attendance/club?club=${club}`);
-        return response.data;
+        const { data } = await instance.get(
+          `/attendance/club?club=${club}&period=${period}`
+        );
+        return data;
       } catch (error) {
         handleError(error);
       }
@@ -26,10 +28,13 @@ export const GetClubList = (club: string) => {
 
 export const FixStatus = () => {
   const { handleError } = apiError();
-  return useMutation<void, Error, ChangeStatus[]>({
+  return useMutation<void, Error, { period: number; data: ChangeStatus[] }>({
     mutationFn: async (param) => {
       try {
-        await instance.patch(`/attendance/modify`, param);
+        await instance.patch(
+          `/attendance/modify?period=${param.period}`,
+          param.data
+        );
       } catch (error) {
         handleError(error);
       }
@@ -97,16 +102,3 @@ export const AfterStudentDelete = () => {
     },
   });
 };
-
-export const CheckStatus = () => {
-  const { handleError } = apiError();
-  return useMutation<void, Error, ChangeClub[]>({
-    mutationFn: async (param) => {
-      try {
-        await instance.patch(`/attendance/modify`, param);
-      } catch (error) {
-        handleError(error);
-      }
-    },
-  });
-};
diff --git a/src/api/attendanceCheck/index.ts b/src/api/attendanceCheck/index.ts
@@ -1,30 +1,22 @@
 import { useMutation, useQuery } from "@tanstack/react-query";
 import { instance } from "..";
-import { AttendanceChack, ClubList } from "../type";
+import { ClubList } from "../type";
 import apiError from "@/hook/errorHandling";
 
-export const GetStudentsAttendance = () => {
+export const GetStudentsAttendance = (
+  grade: number,
+  class_num: number,
+  period: number
+) => {
   const { handleError } = apiError();
-  return useMutation<ClubList[], Error, { grade: number; class: number }>({
-    mutationFn: async (param) => {
+  return useQuery({
+    queryKey: [GetStudentsAttendance, grade, class_num, period],
+    queryFn: async () => {
       try {
-        const response = await instance.get(
-          `/attendance/grade?grade=${param.grade}&class_num=${param.class}`
+        const { data } = await instance.get<ClubList[]>(
+          `/attendance/grade?grade=${grade}&class_num=${class_num}&period=${period}`
         );
-        return response.data;
-      } catch (error) {
-        handleError(error);
-      }
-    },
-  });
-};
-
-export const AttendanceSave = () => {
-  const { handleError } = apiError();
-  return useMutation<void, Error, AttendanceChack[]>({
-    mutationFn: async (param) => {
-      try {
-        await instance.patch("/attendance/modify", param);
+        return data;
       } catch (error) {
         handleError(error);
       }

diff --git a/src/api/type.ts b/src/api/type.ts
@@ -37,22 +37,18 @@ export interface ClubList {
   grade: number;
   class_num: number;
   num: number;
+  status: string;
   classroom_name: string;
-  status6: string;
-  status7: string;
-  status8: string;
-  status9: string;
-  status10: string;
 }
 
 export interface AttendanceChack {
   user_id: string;
-  status_list: string[];
+  status: string;
 }
 
 export interface ChangeStatus {
   user_id: string;
-  status_list: string[];
+  status: string;
 }
 
 export interface FloorClass {
@@ -86,11 +82,7 @@ export interface AfterStudent {
   num: number;
   name: string;
   classroom_name: string;
-  status1: string;
-  status2: string;
-  status3: string;
-  status4: string;
-  status5: string;
+  status: string;
 }
 
 export interface ChangeClub {

diff --git a/src/app/afterManage/page.tsx b/src/app/afterManage/page.tsx
@@ -1,100 +1,45 @@
 "use client";
 import {
-  CheckStatus,
   FixStatus,
   GetAfterStudent,
   GetClubList,
   PostStudent,
 } from "@/api/afterManage";
-import { AfterStudent, ChangeClub, ChangeStatus, 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 AfterDelete from "@/components/list/delete";
 import Modal from "@/components/modal";
 import useAcceptListSelection from "@/hook/handleAcceptListClick";
+import useAttendanceStore from "@/stores/useChangeStatus";
 import { getStudentString, setStudentNum } from "@/util/util";
-import { useEffect, useState } from "react";
+import { useState } from "react";
 
 const AfterManage = () => {
   const [edit, setEdit] = useState<boolean>(false);
   const [modal, setMadal] = useState<boolean>(false);
-  const [clubList, setClubList] = useState<ClubList[]>([]);
   const [selectedTab, setSelectedTab] = useState<boolean>(true);
   const [selectClassTime, setSelectClassTime] = useState<number>(8);
   const [selectClub, setSelectClub] = useState<string>("대동여지도");
-  const [studentData, setStudentData] = useState<AfterStudent[]>();
-  const { data: getClub } = GetClubList(selectClub);
+  const { data: getClub } = GetClubList(selectClub, selectClassTime);
   const { mutate: Post } = PostStudent();
   const { mutate: changeStatus } = FixStatus();
-  const { data: getStudent } = GetAfterStudent();
-  const { mutate: CulbCheck } = CheckStatus();
+  const { data: getStudent, refetch: ReGetStudent } = GetAfterStudent();
   const { handleAcceptListClick } = useAcceptListSelection();
-  const handleSaveClub = async () => {
-    const updatedData: ChangeClub[] = [];
-    studentData?.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],
-            parsedData[3],
-            parsedData[4],
-          ],
-        };
-        updatedData.push(studentData);
-      }
-    });
+  const { students } = useAttendanceStore();
 
-    try {
-      await changeStatus(updatedData, {
+  const handleSaveClub = async () => {
+    changeStatus(
+      { period: selectClassTime, data: students },
+      {
         onSuccess: () => {
           alert("상태가 변경되었습니다");
+          ReGetStudent();
         },
-        onError: (error) => {
-          alert(error.name);
-        },
-      });
-    } catch (error) {
-      updatedData.forEach((item) => {
-        localStorage.setItem(item.user_id, JSON.stringify(item.status_list));
-      });
-      console.log(error);
-    }
-  };
-
-  useEffect(() => {
-    if (getStudent) {
-      setStudentData(getStudent);
-    }
-  }, [getStudent]);
-
-  const handleSaveModalConfirm = () => {
-    setEdit(false);
-    const updatedData: ChangeStatus[] = [];
-    clubList?.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],
-            parsedData[3] || "ATTENDANCE",
-            parsedData[4] || "ATTENDANCE",
-          ],
-        };
-        updatedData.push(studentData);
       }
-    });
-    CulbCheck(updatedData);
+    );
+    setEdit(false);
   };
 
   const onClickSave = () => {
@@ -115,22 +60,6 @@ const AfterManage = () => {
     setMadal(false);
   };
 
-  useEffect(() => {
-    setClubList([]);
-    if (getClub) {
-      setClubList(getClub);
-    }
-  }, [getClub]);
-
-  useEffect(() => {
-    const keys = Object.keys(localStorage);
-    keys.forEach((key) => {
-      if (key.includes("-")) {
-        localStorage.removeItem(key);
-      }
-    });
-  }, [selectClub]);
-
   const handleClubChange = (selectedOption: string) => {
     setSelectClub(selectedOption);
   };
@@ -186,17 +115,12 @@ const AfterManage = () => {
     >
       <div className="overflow-y-scroll h-80 flex flex-col gap-4">
         {selectedTab ? (
-          clubList.map((item, index) => (
+          getClub?.map((item, index) => (
             <AfterList
               key={index}
-              time={selectClassTime}
               name={getStudentString(item)}
               id={item.id}
-              state1={item.status6}
-              state2={item.status7}
-              state3={item.status8}
-              state4={item.status9}
-              state5={item.status10}
+              state={item.status}
               class_name={item.classroom_name}
             />
           ))
@@ -206,22 +130,17 @@ const AfterManage = () => {
               <div className=" flex flex-col gap-8 w-full">
                 {edit ? (
                   <>
-                    {studentData?.map((item, index) => {
+                    {getStudent?.map((item, index) => {
                       return (
                         <AfterList
                           after={true}
                           key={index}
                           id={item.id}
-                          state1={item.status1}
-                          state2={item.status2}
-                          state3={item.status3}
-                          state4={item.status4}
-                          state5={item.status5}
+                          state={item.status}
                           name={`${setStudentNum(item)} ${item.name}`}
                           onClick={() =>
                             handleAcceptListClick(item.id, item.name)
                           }
-                          time={selectClassTime}
                           class_name={item.classroom_name}
                         />
                       );
@@ -233,7 +152,7 @@ const AfterManage = () => {
               </div>
             ) : (
               <>
-                {studentData?.map((item, index) => (
+                {getStudent?.map((item, index) => (
                   <AfterDelete student={item.name} key={index} id={item.id} />
                 ))}
               </>
@@ -257,7 +176,7 @@ const AfterManage = () => {
             <Button
               colorType="ghost"
               buttonSize="full"
-              onClick={handleSaveModalConfirm}
+              onClick={handleSaveClub}
             >
               출결 저장하기
             </Button>