From 6eb7d8d43fed3621121659b51ee514970d0a7c7a Mon Sep 17 00:00:00 2001
From: hyuna <hyuna_0525@dsm.hs.kr>
Date: Thu, 22 Aug 2024 13:28:49 +0900
Subject: [PATCH] =?UTF-8?q?fix=20::=20=EC=99=B8=EC=B6=9C=EC=88=98=EB=9D=BD?=
 =?UTF-8?q?=20=EB=A6=AC=ED=8C=A9=ED=86=A0=EB=A7=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/apis/outAccept/outAccept.ts |  15 ++---
 src/app/outAccept/page.tsx      | 105 +++++++++-----------------------
 2 files changed, 37 insertions(+), 83 deletions(-)

diff --git a/src/apis/outAccept/outAccept.ts b/src/apis/outAccept/outAccept.ts
index 717d218..35db34d 100644
--- a/src/apis/outAccept/outAccept.ts
+++ b/src/apis/outAccept/outAccept.ts
@@ -1,4 +1,4 @@
-import { useMutation } from "@tanstack/react-query";
+import { useMutation, useQuery } from "@tanstack/react-query";
 import { instance } from "..";
 import apiError from "@/hook/apiError";
 
@@ -35,15 +35,16 @@ interface ClassProp {
   type: string;
 }
 
-export const useGetClass = () => {
+export const useGetClass = (grade: number, class_num: number, type: string) => {
   const { handleError } = apiError();
-  return useMutation<applicationDataProp[], applicationDataProp[], ClassProp>({
-    mutationFn: async (param: ClassProp) => {
+  return useQuery({
+    queryKey: ["useGetClass", grade, class_num, type],
+    queryFn: async () => {
       try {
-        const response = await instance.get(
-          `${param.type}/grade?grade=${param.grade}&class_num=${param.class}`
+        const { data } = await instance.get<applicationDataProp[]>(
+          `${type}/grade?grade=${grade}&class_num=${class_num}`
         );
-        return response.data;
+        return data;
       } catch (error) {
         handleError(error);
       }
diff --git a/src/app/outAccept/page.tsx b/src/app/outAccept/page.tsx
index 35ca725..29d73b4 100644
--- a/src/app/outAccept/page.tsx
+++ b/src/app/outAccept/page.tsx
@@ -33,23 +33,17 @@ const OutAccept = () => {
   const [accept, setAccept] = useState<boolean>(false);
   const { selectedStudents, selectedStudentName, handleAcceptListClick } =
     useAcceptListSelection();
-  const [data, setData] = useState<applicationDataProp[]>([]);
-
   const { mutate: outAcceptMutate } = useOutAccept();
-  const { mutate: getClassMutate } = useGetClass();
+  const { data: getClassMutate, refetch: ReGetClassMutate } = useGetClass(
+    selectedGrade,
+    selectedClass,
+    selectedTab ? "application" : "early-return"
+  );
 
   const onClickTab = (tab: boolean) => {
     setSelectedTab(tab);
   };
 
-  useEffect(() => {
-    AcceptDataList();
-  }, [selectedTab]);
-
-  useEffect(() => {
-    AcceptDataList();
-  }, [selectedGrade, selectedClass]);
-
   const handleGradeChange = (selectedOption: number) => {
     if (selectedOption === 5) {
       setSelectedGrade(5);
@@ -77,31 +71,6 @@ const OutAccept = () => {
     setSelectedClass(setclass_num);
   }, []);
 
-  const AcceptDataList = async () => {
-    try {
-      if (selectedGrade && selectedClass) {
-        const reqOption = selectedTab ? "application" : "early-return";
-        await getClassMutate(
-          {
-            type: reqOption,
-            grade: selectedGrade,
-            class: selectedClass,
-          },
-          {
-            onSuccess: (data) => {
-              setData(data);
-            },
-            onError: (error) => {
-              console.log(error);
-            },
-          }
-        );
-      }
-    } catch (error) {
-      console.error("Out accept error", error);
-    }
-  };
-
   const Acceptconfirm = async () => {
     try {
       if (selectedGrade && selectedClass) {
@@ -114,9 +83,8 @@ const OutAccept = () => {
           },
           {
             onSuccess: () => {
-              setData(data);
               setAccept(false);
-              location.reload();
+              ReGetClassMutate();
             },
             onError: () => {
               setAccept(false);
@@ -167,12 +135,11 @@ const OutAccept = () => {
             ids: selectedStudents,
           },
           {
-            onSuccess: (response) => {
-              setData(data);
+            onSuccess: () => {
               setRefuse(false);
-              location.reload();
+              ReGetClassMutate();
             },
-            onError: (error) => {
+            onError: () => {
               setRefuse(false);
             },
           }
@@ -192,10 +159,6 @@ const OutAccept = () => {
     setAccept(false);
   };
 
-  const previous = () => {
-    router.push("/outAccept/previous");
-  };
-
   return (
     <BackGround
       linkChildren="외출 수락"
@@ -203,36 +166,26 @@ const OutAccept = () => {
       secondTitle={getFullToday()}
       DropChildren={
         <>
-          <Button colorType="ghost" buttonSize="small" onClick={previous}>
+          <Button
+            colorType="ghost"
+            buttonSize="small"
+            onClick={() => router.push("/outAccept/previous")}
+          >
             외출 기록보기
           </Button>
-          {selectedTab ? (
-            <div className=" flex gap-5">
-              <Dropdown
-                type="all"
-                onChange={handleGradeChange}
-                homeRoom={true}
-              />
-              <Dropdown
-                type="class"
-                onChange={handleClassChange}
-                homeRoom={true}
-              />
-            </div>
-          ) : (
-            <div className=" flex gap-5">
-              <Dropdown
-                type="all"
-                onChange={handleGradeChange}
-                homeRoom={true}
-              />
-              <Dropdown
-                type="class"
-                onChange={handleClassChange}
-                homeRoom={true}
-              />
-            </div>
-          )}
+          <div className=" flex gap-5">
+            {selectedTab ? (
+              <>
+                <Dropdown type="all" onChange={handleGradeChange} homeRoom />
+                <Dropdown type="class" onChange={handleClassChange} homeRoom />
+              </>
+            ) : (
+              <>
+                <Dropdown type="all" onChange={handleGradeChange} homeRoom />
+                <Dropdown type="class" onChange={handleClassChange} homeRoom />
+              </>
+            )}
+          </div>
         </>
       }
     >
@@ -244,7 +197,7 @@ const OutAccept = () => {
         />
         {selectedTab ? (
           <div className="flex flex-wrap gap-5 justify-between">
-            {data.map((dataItem, index) => (
+            {getClassMutate?.map((dataItem, index) => (
               <AcceptList
                 onClick={() =>
                   handleAcceptListClick(dataItem.id, dataItem.username)
@@ -258,7 +211,7 @@ const OutAccept = () => {
           </div>
         ) : (
           <div className="flex flex-wrap gap-5 justify-between">
-            {data.map((dataItem, index) => (
+            {getClassMutate?.map((dataItem, index) => (
               <AcceptList
                 onClick={() =>
                   handleAcceptListClick(dataItem.user_id, dataItem.username)