Merge pull request #340 from Team-Blitz-Steady/refactor/#337/applicant

Refactor/#337/applicant
Team-Blitz-Steady · Dec 20, 2023 · c132052 · c132052
2 parents 69aea47 + b0a6343
commit c132052
Show file tree

Hide file tree

Showing 3 changed files with 103 additions and 65 deletions.
diff --git a/src/app/(steady)/steady/applicant/[steady_id]/[application_id]/page.tsx b/src/app/(steady)/steady/applicant/[steady_id]/[application_id]/page.tsx
@@ -1,16 +1,10 @@
 "use client";
 
-import { useRouter } from "next/navigation";
-import { useQueryClient, useSuspenseQuery } from "@tanstack/react-query";
-import changeApplicationStatus from "@/services/application/changeApplicationStatus";
+import { useSuspenseQuery } from "@tanstack/react-query";
 import getApplicationDetails from "@/services/application/getApplicationDetails";
-import Button, { buttonSize } from "@/components/_common/Button";
-import { AlertModal } from "@/components/_common/Modal";
+import ApplicantButtons from "@/components/containers/applicant/ApplicantButtons";
 import { Question } from "@/components/containers/application";
-import {
-  getApplicantListKey,
-  getApplicationDetailsKey,
-} from "@/constants/queryKeys";
+import { getApplicationDetailsKey } from "@/constants/queryKeys";
 
 const UserApplicantPage = ({
   params,
@@ -19,32 +13,11 @@ const UserApplicantPage = ({
 }) => {
   const applicationId = params.application_id;
   const steadyId = params.steady_id;
-  const queryClient = useQueryClient();
+
   const { data: applicationDetailsData } = useSuspenseQuery({
     queryKey: getApplicationDetailsKey(applicationId),
     queryFn: () => getApplicationDetails(applicationId),
   });
-  const router = useRouter();
-
-  const handleClickAccept = async () => {
-    await changeApplicationStatus(applicationId, {
-      status: "ACCEPTED",
-    });
-    await queryClient.invalidateQueries({
-      queryKey: getApplicantListKey(steadyId),
-    });
-    router.replace(`/steady/applicant/${steadyId}`);
-  };
-
-  const handleClickReject = async () => {
-    await changeApplicationStatus(applicationId, {
-      status: "REJECTED",
-    });
-    await queryClient.invalidateQueries({
-      queryKey: getApplicantListKey(steadyId),
-    });
-    router.replace(`/steady/applicant/${steadyId}`);
-  };
 
   return (
     <div className="flex w-full flex-col gap-10 overflow-y-scroll pr-30">
@@ -60,42 +33,13 @@ const UserApplicantPage = ({
         </Question>
       ))}
       <div className="mt-auto flex justify-end gap-20">
-        <AlertModal
-          trigger={
-            <Button className={`${buttonSize.sm} bg-st-red text-st-white`}>
-              거절
-            </Button>
-          }
-          actionButton={
-            <Button
-              className={`${buttonSize.sm} bg-st-red text-st-white`}
-              onClick={handleClickReject}
-            >
-              거절
-            </Button>
-          }
-        >
-          <div className="text-18 font-bold">거절 하시겠습니까?</div>
-        </AlertModal>
-        <AlertModal
-          trigger={
-            <Button className={`${buttonSize.sm} bg-st-green text-st-white`}>
-              승인
-            </Button>
-          }
-          actionButton={
-            <Button
-              className={`${buttonSize.sm} bg-st-green text-st-white`}
-              onClick={handleClickAccept}
-            >
-              승인
-            </Button>
-          }
-        >
-          <div className="text-18 font-bold">승인 하시겠습니까?</div>
-        </AlertModal>
+        <ApplicantButtons
+          applicationId={applicationId}
+          steadyId={steadyId}
+        />
       </div>
     </div>
   );
 };
+
 export default UserApplicantPage;
diff --git a/src/components/containers/applicant/ApplicantButtons.tsx b/src/components/containers/applicant/ApplicantButtons.tsx
@@ -0,0 +1,57 @@
+import Button, { buttonSize } from "@/components/_common/Button";
+import { AlertModal } from "@/components/_common/Modal";
+import { useManageApplicant } from "./hooks/useManageApplicant";
+
+const ApplicantButtons = ({
+  applicationId,
+  steadyId,
+}: {
+  applicationId: string;
+  steadyId: string;
+}) => {
+  const { handleClickAccept, handleClickReject } = useManageApplicant({
+    applicationId,
+    steadyId,
+  });
+
+  return (
+    <>
+      <AlertModal
+        trigger={
+          <Button className={`${buttonSize.sm} bg-st-red text-st-white`}>
+            거절
+          </Button>
+        }
+        actionButton={
+          <Button
+            className={`${buttonSize.sm} bg-st-red text-st-white`}
+            onClick={handleClickReject}
+          >
+            거절
+          </Button>
+        }
+      >
+        <div className="text-18 font-bold">거절 하시겠습니까?</div>
+      </AlertModal>
+      <AlertModal
+        trigger={
+          <Button className={`${buttonSize.sm} bg-st-green text-st-white`}>
+            승인
+          </Button>
+        }
+        actionButton={
+          <Button
+            className={`${buttonSize.sm} bg-st-green text-st-white`}
+            onClick={handleClickAccept}
+          >
+            승인
+          </Button>
+        }
+      >
+        <div className="text-18 font-bold">승인 하시겠습니까?</div>
+      </AlertModal>
+    </>
+  );
+};
+
+export default ApplicantButtons;
diff --git a/src/components/containers/applicant/hooks/useManageApplicant.ts b/src/components/containers/applicant/hooks/useManageApplicant.ts
@@ -0,0 +1,37 @@
+import { useRouter } from "next/navigation";
+import { useQueryClient } from "@tanstack/react-query";
+import changeApplicationStatus from "@/services/application/changeApplicationStatus";
+import { getApplicantListKey } from "@/constants/queryKeys";
+
+export const useManageApplicant = ({
+  applicationId,
+  steadyId,
+}: {
+  applicationId: string;
+  steadyId: string;
+}) => {
+  const router = useRouter();
+  const queryClient = useQueryClient();
+
+  const handleClickAccept = async () => {
+    await changeApplicationStatus(applicationId, {
+      status: "ACCEPTED",
+    });
+    await queryClient.invalidateQueries({
+      queryKey: getApplicantListKey(steadyId),
+    });
+    router.replace(`/steady/applicant/${steadyId}`);
+  };
+
+  const handleClickReject = async () => {
+    await changeApplicationStatus(applicationId, {
+      status: "REJECTED",
+    });
+    await queryClient.invalidateQueries({
+      queryKey: getApplicantListKey(steadyId),
+    });
+    router.replace(`/steady/applicant/${steadyId}`);
+  };
+
+  return { handleClickAccept, handleClickReject };
+};