Merge branch 'develop' of https://github.com/DSM-PICK/PICK2024_FRONT_…

…TEACHER into develop

src/api/afterManage/index.ts

@@ -0,0 +1,25 @@
+import { useMutation, useQuery } from "@tanstack/react-query";
+import { instance } from "..";
+import { ChangeStatus, ClubList } from "../type";
+
+export const GetClubList = (club: string) => {
+  return useQuery<ClubList[]>({
+    queryKey: ["GetClubList", club],
+    queryFn: async () => {
+      const response = await instance.get(`/attendance/club?club=${club}`);
+      return response.data;
+    },
+  });
+};
+
+export const FixStatus = () => {
+  return useMutation<void, Error, ChangeStatus[]>({
+    mutationFn: async (param) => {
+      try {
+        await instance.patch(`/attendance/modify`, param);
+      } catch (error) {
+        console.log(error);
+      }
+    },
+  });
+};

src/api/outList/index.ts

@@ -1,6 +1,6 @@
 import { useMutation, useQuery } from "@tanstack/react-query";
 import { instance } from "..";
-import { applicationOK, earlyReturnHome } from "../type";
+import { Accept, ClassProp, applicationOK, earlyReturnHome } from "../type";
 
 export const Application = () => {
   return useQuery<applicationOK[]>({
@@ -36,3 +36,34 @@ export const ReturnSchool = () => {
     },
   });
 };
+
+export const GetClass = () => {
+  return useMutation<applicationOK[], Error, ClassProp>({
+    mutationFn: async (param: ClassProp) => {
+      try {
+        const response = await instance.get(
+          `${param.type}/grade?grade=${param.grade}&class_num=${param.class}`
+        );
+        return response.data;
+      } catch (error) {
+        throw error;
+      }
+    },
+  });
+};
+export const OutAcceptApi = () => {
+  return useMutation<void, Error, Accept>({
+    mutationFn: async (param) => {
+      try {
+        const response = await instance.patch(`${param.type}/status`, {
+          type: param.type,
+          status: param.status,
+          ids: param.ids,
+        });
+        return response.data;
+      } catch (error) {
+        throw error;
+      }
+    },
+  });
+};

src/api/type.ts

@@ -6,6 +6,7 @@ export interface applicationOK {
   grade: number;
   class_num: number;
   num: number;
+  reason: string;
 }
 
 export interface earlyReturnHome {
@@ -15,4 +16,35 @@ export interface earlyReturnHome {
   grade: number;
   class_num: number;
   num: number;
+  reason: string;
+}
+
+export interface Accept {
+  type: string;
+  status: "OK" | "NO";
+  ids: string[];
+}
+
+export interface ClassProp {
+  grade: number;
+  class: number;
+  type: string;
+}
+
+export interface ClubList {
+  id: string;
+  username: string;
+  grade: number;
+  class_num: number;
+  num: number;
+  status6: string;
+  status7: string;
+  status8: string;
+  status9: string;
+  status10: string;
+}
+
+export interface ChangeStatus {
+  user_id: string;
+  status_list: string[];
 }

src/app/afterManage/page.tsx

@@ -0,0 +1,100 @@
+"use client";
+import { FixStatus, GetClubList } from "@/api/afterManage";
+import { 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 { getStudentString } from "@/util/util";
+import { useEffect, useState } from "react";
+
+const AfterManage = () => {
+  const [clubList, setClubList] = useState<ClubList[]>([]);
+  const [selectedTab, setSelectedTab] = useState<boolean>(true);
+  const [selectClassTime, setSelectClassTime] = useState<number>(8);
+  const [selectClub, setSelectClub] = useState<string>("대동여지도");
+  const { data: getClub } = GetClubList(selectClub);
+  const { mutate: changeStatus } = FixStatus();
+
+  const handleSaveModalConfirm = () => {
+    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);
+      }
+    });
+    changeStatus(updatedData);
+  };
+
+  useEffect(() => {
+    if (getClub) {
+      setClubList(getClub);
+    }
+  }, [getClub]);
+
+  const handleClubChange = (selectedOption: string) => {
+    setSelectClub(selectedOption);
+  };
+
+  const handleClassTimeChange = (selectedOption: number) => {
+    setSelectClassTime(selectedOption);
+  };
+
+  const onClickTab = (tab: boolean) => {
+    setSelectedTab(tab);
+  };
+
+  return (
+    <BackGround
+      title="방과후 관리"
+      TabOK={true}
+      leftTab="전공 동아리"
+      rightTab="방과후(창조실)"
+      Dropdown={
+        <div className="flex gap-2">
+          <Dropdown type="club" onChange={handleClubChange} />
+          <Dropdown type="classTime" onChange={handleClassTimeChange} />
+        </div>
+      }
+      TabOnclick={onClickTab}
+    >
+      <div className="overflow-y-scroll h-96 flex flex-col gap-4">
+        {selectedTab &&
+          clubList.map((item, index) => (
+            <AfterList
+              key={index}
+              time={selectClassTime}
+              name={getStudentString(item)}
+              id={item.id}
+              state1={item.status6}
+              state2={item.status7}
+              state3={item.status8}
+            />
+          ))}
+      </div>
+      <div className="absolute bottom-4% w-5/6 left-50%">
+        <Button
+          colorType="primary"
+          onClick={handleSaveModalConfirm}
+          buttonSize="full"
+        >
+          출결 저장하기
+        </Button>
+      </div>
+    </BackGround>
+  );
+};
+
+export default AfterManage;

src/app/main/page.tsx

@@ -8,8 +8,8 @@ import { getFullToday, getToday, getWeekDay } from "@/util/date";
 
 const Main = () => {
   const [date, setDate] = useState(new Date().toLocaleTimeString());
-  const [name, setName] = useState(null);
   const [floor, setFloor] = useState(null);
+  const [name, setName] = useState(null);
   return (
     <div className=" bg-primary-1200 flex flex-col items-center ">
       <Header />