Merge branch 'develop'

DSM-PICK · Jun 26, 2024 · 99fd8d1 · 99fd8d1
2 parents b39d013 + ae6fdaf
commit 99fd8d1
Show file tree

Hide file tree

Showing 3 changed files with 94 additions and 98 deletions.
diff --git a/src/api/outList/index.ts b/src/api/outList/index.ts
@@ -25,13 +25,16 @@ export const EarlyReturn = () => {
 
 export const ReturnSchool = () => {
   const { handleError } = apiError();
-  return useMutation<Error, void, { id: string }>({
-    mutationFn: async (param) => {
+  return useMutation<Error, void, string[]>({
+    mutationFn: async (...param) => {
       try {
-        const response = await instance.patch(
-          `/application/change/${param.id}`
-        );
-        return response.data;
+        console.log(param);
+        const { data } = await instance.patch(`/application/return`, ...param, {
+          headers: {
+            "Content-Type": "application/json",
+          },
+        });
+        return data;
       } catch (error) {
         handleError(error);
       }

diff --git a/src/app/outList/page.tsx b/src/app/outList/page.tsx
@@ -1,34 +1,40 @@
 "use client";
-import { Application, EarlyReturn } from "@/api/outList";
-import { applicationOK, earlyReturnHome } from "@/api/type";
+import { Application, EarlyReturn, ReturnSchool } from "@/api/outList";
 import BackGround from "@/components/background";
+import Button from "@/components/button";
 import NonReturn from "@/components/list/application";
+import Modal from "@/components/modal";
+import useAcceptListSelection from "@/hook/handleAcceptListClick";
 import { getFullToday } from "@/util/date";
 import { getStudentString } from "@/util/util";
 import React, { useEffect, useState } from "react";
 
 const OutList = () => {
   const [selectedTab, setSelectedTab] = useState<boolean>(true);
-  const [applicationData, setApplicationData] = useState<applicationOK[]>([]);
-  const [earlyData, setEarlyData] = useState<earlyReturnHome[]>();
+  const { selectedStudents, selectedStudentName, handleAcceptListClick } =
+    useAcceptListSelection();
+  const [modal, setModal] = useState<boolean>(false);
 
   const { data: applicationOKData } = Application();
   const { data: earlyReturnData } = EarlyReturn();
-
-  useEffect(() => {
-    if (applicationOKData) {
-      setApplicationData(applicationOKData);
-    }
-  }, [applicationOKData]);
-
-  useEffect(() => {
-    setEarlyData(earlyReturnData);
-  }, [earlyReturnData]);
+  const { mutate: ReturnApplication } = ReturnSchool();
 
   const onClickTab = (tab: boolean) => {
     setSelectedTab(tab);
   };
 
+  const Return = () => {
+    ReturnApplication(selectedStudents, {
+      onSuccess: () => {
+        location.reload();
+      },
+      onError: () => {
+        console.log("에러가 발생했습니다");
+        setModal(false);
+      },
+    });
+  };
+
   return (
     <BackGround
       title="외출자 목록"
@@ -37,33 +43,74 @@ const OutList = () => {
       leftTab="외출"
       rightTab="조기귀가"
       TabOnclick={onClickTab}
+      Dropdown={
+        selectedTab && (
+          <div className=" flex justify-between items-center">
+            <div></div>
+            <div className=" flex gap-2 w-32">
+              <Button
+                colorType="primary"
+                buttonSize="extraSmall2"
+                onClick={() => {
+                  setModal(true);
+                }}
+              >
+                복귀
+              </Button>
+            </div>
+          </div>
+        )
+      }
     >
       <div className=" overflow-y-scroll gap-4 flex flex-col">
-        {selectedTab
-          ? Array.isArray(applicationData) && (
-              <>
-                {applicationData.map((item, index) => (
-                  <NonReturn
-                    id={item.id}
-                    type="application"
-                    key={index}
-                    returnTime={item.end_time}
-                    name={getStudentString(item)}
-                    reason={item.reason}
-                  />
-                ))}
-              </>
-            )
-          : earlyData?.map((item, index) => (
-              <NonReturn
-                id={item.id}
-                key={index}
-                name={getStudentString(item)}
-                type="early-return"
-                reason={item.reason}
-              />
-            ))}
+        {selectedTab ? (
+          <>
+            {Array.isArray(applicationOKData) &&
+              applicationOKData?.map((item, index) => (
+                <NonReturn
+                  onClick={() => {
+                    handleAcceptListClick(item.id, item.username);
+                  }}
+                  id={item.id}
+                  type="application"
+                  key={index}
+                  returnTime={item.end_time}
+                  name={getStudentString(item)}
+                  reason={item.reason}
+                />
+              ))}
+          </>
+        ) : (
+          earlyReturnData?.map((item, index) => (
+            <NonReturn
+              id={item.id}
+              key={index}
+              name={getStudentString(item)}
+              type="early-return"
+              reason={item.reason}
+            />
+          ))
+        )}
       </div>
+      {modal && (
+        <Modal
+          type="button"
+          buttonMessage="확인"
+          heading1={`${
+            selectedStudentName.length > 1
+              ? `${selectedStudentName[0]} 학생 외 ${
+                  selectedStudentName.length - 1
+                }명을 복귀시키겠습니까?`
+              : selectedStudentName.length === 1
+              ? `${selectedStudentName[0]} 학생을 복귀시키겠습니까?`
+              : ""
+          }`}
+          onCancel={() => {
+            setModal(false);
+          }}
+          onConfirm={Return}
+        />
+      )}
     </BackGround>
   );
 };

diff --git a/src/components/list/application/index.tsx b/src/components/list/application/index.tsx
@@ -1,8 +1,5 @@
 "use client";
-import { ReturnSchool } from "@/api/outList";
-import Button from "@/components/button";
 import StatusDrop from "@/components/dropdown/status";
-import Modal from "@/components/modal";
 import React, { useState } from "react";
 
 interface NonReturnProp {
@@ -18,41 +15,10 @@ export const NonReturn: React.FC<NonReturnProp> = ({
   name,
   returnTime,
   type,
-  id,
   onClick,
   reason,
 }) => {
-  const { mutate: ReturnStudent } = ReturnSchool();
   const [click, setClick] = useState<boolean>(false);
-  const [modal, setModal] = useState<boolean>(false);
-
-  const onClickModal = () => {
-    setModal(true);
-  };
-
-  const onCancelModal = () => {
-    setModal(false);
-  };
-
-  const confirmReturn = async () => {
-    try {
-      await ReturnStudent(
-        { id: id },
-        {
-          onSuccess: () => {
-            location.reload();
-            alert("복귀에 성공하셨습니다");
-          },
-          onError: () => {
-            console.log("에러발생");
-          },
-        }
-      );
-    } catch (error) {
-      console.error(error);
-    }
-    setModal(false);
-  };
 
   return (
     <div onClick={onClick}>
@@ -69,29 +35,9 @@ export const NonReturn: React.FC<NonReturnProp> = ({
               <div className=" text-caption2 text-neutral-400">
                 {returnTime} 복귀 예정
               </div>
-              <div className=" p-px">
-                <div className="flex gap-2 w-14">
-                  <Button
-                    colorType="primary"
-                    buttonSize="extraSmall"
-                    onClick={onClickModal}
-                  >
-                    복귀
-                  </Button>
-                </div>
-              </div>
             </>
           )}
           {type === "after" && <StatusDrop onChange={() => {}} state="출석" />}
-          {modal && (
-            <Modal
-              heading1={`${name}의 외출을 끝내시겠습니까?`}
-              type="button"
-              buttonMessage="복귀"
-              onCancel={onCancelModal}
-              onConfirm={confirmReturn}
-            />
-          )}
           {type === "accept" && (
             <div className=" text-caption2 text-neutral-400">{returnTime}</div>
           )}