refactor: useState와 useEffect 제거

JNU-econovation · Sep 18, 2024 · cc6dae1 · cc6dae1
1 parent 03153e8
commit cc6dae1
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 17 deletions.
diff --git a/frontend/components/applicant/applicantNode/CustomResource.component.tsx b/frontend/components/applicant/applicantNode/CustomResource.component.tsx
@@ -2,18 +2,18 @@ import Txt from "@/components/common/Txt.component";
 import {
   ApplicantReq,
   getApplicantState,
+  getApplicantStateRes,
   patchApplicantState,
 } from "@/src/apis/applicant";
 import { applicantDataFinder } from "@/src/functions/finder";
 import Portfolio from "./Portfolio";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { useSearchParams } from "next/navigation";
-import { useEffect, useState } from "react";
 import KanbanCardApplicantStatusLabel from "@/components/kanban/card/CardApplicantStatusLabel";
-import { ApplicantPassState } from "@/src/apis/kanban";
 import { useAtomValue } from "jotai";
 import { KanbanSelectedButtonNumberState } from "@/src/stores/kanban/Navbar.atoms";
 import { getMyInfo } from "@/src/apis/interview";
+
 interface ApplicantResourceProps {
   data: ApplicantReq[];
   postId: string;
@@ -43,17 +43,36 @@ const ApplicantResource = ({
     data: myInfo,
     isLoading: myInfoLoading,
     isError: myInfoError,
-  } = useQuery(["user"], getMyInfo);
-
-  const [passState, setPassState] =
-    useState<ApplicantPassState>("non-processed");
-
+  } = useQuery({
+    queryKey: ["user"],
+    queryFn: getMyInfo,
+  });
   const { mutate } = useMutation({
     mutationFn: (afterState: "non-pass" | "pass") =>
       patchApplicantState(`${applicantId}`, afterState),
-    onSuccess: (data) => {
+    onMutate: async () => {
+      await queryClient.cancelQueries([
+        "applicantState",
+        applicantId,
+        navbarId,
+      ]);
+
+      const snapshotState = queryClient.getQueryData<getApplicantStateRes>([
+        "applicantState",
+        applicantId,
+        navbarId,
+      ]);
+
+      return { snapshotState };
+    },
+    onSuccess: () => {
       queryClient.invalidateQueries(["kanbanDataArray", generation]);
-      setPassState(data.passState);
+    },
+    onError: (error, variables, context) => {
+      window.alert("상태 변경에 실패했습니다.");
+    },
+    onSettled: () => {
+      queryClient.invalidateQueries(["applicantState", applicantId, navbarId]);
     },
   });
 
@@ -65,12 +84,6 @@ const ApplicantResource = ({
     mutate("pass");
   };
 
-  useEffect(() => {
-    if (initialState) {
-      setPassState(initialState);
-    }
-  }, [initialState]);
-
   if (!initialState || isLoading || !myInfo || myInfoLoading) {
     return <div>로딩중...</div>;
   }
@@ -87,7 +100,7 @@ const ApplicantResource = ({
             <Txt className="text-xl text-secondary-200 font-medium">
               {applicantDataFinder(data, "major")}
             </Txt>
-            <KanbanCardApplicantStatusLabel passState={passState} />
+            <KanbanCardApplicantStatusLabel passState={initialState} />
           </div>
           <Txt typography="h2">{`[${applicantDataFinder(
             data,

diff --git a/frontend/src/apis/applicant/index.ts b/frontend/src/apis/applicant/index.ts
@@ -148,7 +148,7 @@ export const patchApplicantState = async (
   return data;
 };
 
-type getApplicantStateRes = ApplicantPassState | undefined;
+export type getApplicantStateRes = ApplicantPassState | undefined;
 
 export const getApplicantState = async (
   navigationId: string,