From 1fa563efea36f6926750d9404b5055436b3ab2d9 Mon Sep 17 00:00:00 2001
From: minbo <smb5174@naver.com>
Date: Mon, 16 Sep 2024 14:28:18 +0900
Subject: [PATCH 01/16] =?UTF-8?q?feat:=20=EC=A7=80=EC=9B=90=EC=9E=90?=
 =?UTF-8?q?=EC=9D=98=20=EC=83=81=ED=83=9C=EB=A5=BC=20=EB=B3=80=EA=B2=BD?=
 =?UTF-8?q?=ED=95=98=EB=8A=94=20api=20=ED=95=A8=EC=88=98=20=EA=B5=AC?=
 =?UTF-8?q?=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/apis/applicant/index.ts | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/frontend/src/apis/applicant/index.ts b/frontend/src/apis/applicant/index.ts
index a2a5db74..7eb39b4f 100644
--- a/frontend/src/apis/applicant/index.ts
+++ b/frontend/src/apis/applicant/index.ts
@@ -1,6 +1,7 @@
 import { getAllInterviewerWithOrder } from "@/src/apis/interview";
 import { APPLICANT_KEYS } from "@/src/constants";
 import { https } from "@/src/functions/axios";
+import { ApplicantPassState, getKanbanCards, KanbanCardReq } from "../kanban";
 
 export interface ApplicantReq {
   name: string;
@@ -131,3 +132,14 @@ export const getApplicantTimeTables = async (id: string) => {
 
   return data;
 };
+
+export const patchApplicantState = async (
+  id: string,
+  afterState: "non-pass" | "pass"
+) => {
+  const { data } = await https.patch<KanbanCardReq["state"]>(
+    `/applicants/${id}/state?afterState=${afterState}`
+  );
+
+  return data;
+};

From beb5efe888439891139804261f72333c63b54c8a Mon Sep 17 00:00:00 2001
From: minbo <smb5174@naver.com>
Date: Mon, 16 Sep 2024 14:31:11 +0900
Subject: [PATCH 02/16] =?UTF-8?q?feat:=20=ED=8A=B9=EC=A0=95=20=EC=A7=80?=
 =?UTF-8?q?=EC=9B=90=EC=9E=90=EC=97=90=20=EB=8C=80=ED=95=9C=20=EC=A7=80?=
 =?UTF-8?q?=EC=9B=90=20=EC=83=81=ED=83=9C=EB=A5=BC=20=EA=B0=80=EC=A0=B8?=
 =?UTF-8?q?=EC=98=A4=EB=8A=94=20api=20=ED=95=A8=EC=88=98=20=EA=B5=AC?=
 =?UTF-8?q?=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/apis/applicant/index.ts | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/frontend/src/apis/applicant/index.ts b/frontend/src/apis/applicant/index.ts
index 7eb39b4f..77404c9f 100644
--- a/frontend/src/apis/applicant/index.ts
+++ b/frontend/src/apis/applicant/index.ts
@@ -143,3 +143,14 @@ export const patchApplicantState = async (
 
   return data;
 };
+
+export const getApplicantState = async (
+  navigationId: string,
+  applicantId: string,
+  generation: string
+): Promise<ApplicantPassState | undefined> => {
+  const cardsData = await getKanbanCards(navigationId, generation);
+
+  return cardsData.find((card) => card.applicantId === applicantId)?.state
+    .passState;
+};

From 165b80c343bb2781714f3bbf2656069de833cfc1 Mon Sep 17 00:00:00 2001
From: minbo <smb5174@naver.com>
Date: Mon, 16 Sep 2024 14:32:03 +0900
Subject: [PATCH 03/16] =?UTF-8?q?feat:=20=EC=B9=B8=EB=B0=98=20=EB=B3=B4?=
 =?UTF-8?q?=EB=93=9C=20=EC=83=81=EC=84=B8=20=ED=8E=98=EC=9D=B4=EC=A7=80?=
 =?UTF-8?q?=EC=97=90=EC=84=9C=20=EC=A7=80=EC=9B=90=EC=9E=90=EC=9D=98=20?=
 =?UTF-8?q?=EC=A7=80=EC=9B=90=20=EC=83=81=ED=83=9C=20ui=20=EA=B5=AC?=
 =?UTF-8?q?=ED=98=84,=20=ED=9A=8C=EC=9E=A5=EB=8B=A8=EA=B3=BC=20=EA=B4=80?=
 =?UTF-8?q?=EB=A6=AC=EC=9E=90=EB=A7=8C=20=EC=A7=80=EC=9B=90=20=EC=83=81?=
 =?UTF-8?q?=ED=83=9C=EA=B0=80=20=EB=B3=80=EA=B2=BD=20=EA=B0=80=EB=8A=A5?=
 =?UTF-8?q?=ED=95=98=EA=B2=8C=20=EB=B2=84=ED=8A=BC=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../applicant/DetailLeft.component.tsx        |   2 +-
 .../CustomResource.component.tsx              | 101 ++++++++++++++++--
 2 files changed, 92 insertions(+), 11 deletions(-)

diff --git a/frontend/components/applicant/DetailLeft.component.tsx b/frontend/components/applicant/DetailLeft.component.tsx
index 7abe5b3f..f227c47b 100644
--- a/frontend/components/applicant/DetailLeft.component.tsx
+++ b/frontend/components/applicant/DetailLeft.component.tsx
@@ -24,7 +24,7 @@ const ApplicantDetailLeft = ({
 
   return (
     <>
-      <ApplicantResource data={data} postId={postId} />
+      <ApplicantResource data={data} postId={postId} generation={generation} />
       <ApplicantLabel postId={postId} generation={generation} />
       <ApplicantComment
         cardId={cardId}
diff --git a/frontend/components/applicant/applicantNode/CustomResource.component.tsx b/frontend/components/applicant/applicantNode/CustomResource.component.tsx
index d6ff1ccb..80231386 100644
--- a/frontend/components/applicant/applicantNode/CustomResource.component.tsx
+++ b/frontend/components/applicant/applicantNode/CustomResource.component.tsx
@@ -1,23 +1,104 @@
 import Txt from "@/components/common/Txt.component";
-import { ApplicantReq } from "@/src/apis/applicant";
+import {
+  ApplicantReq,
+  getApplicantState,
+  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, getAllKanbanData } 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;
+  generation: string;
 }
 
-const ApplicantResource = ({ data, postId }: ApplicantResourceProps) => {
+const ApplicantResource = ({
+  data,
+  postId,
+  generation,
+}: ApplicantResourceProps) => {
+  const navbarId = useAtomValue(KanbanSelectedButtonNumberState);
+  const searchParams = useSearchParams();
+  const applicantId = searchParams.get("applicantId");
+  const queryClient = useQueryClient();
+
+  const { data: initialState, isLoading } = useQuery(
+    ["applicantState", applicantId],
+    () => getApplicantState(navbarId, applicantId as string, generation)
+  );
+
+  const { data: myInfo } = useQuery(["user"], getMyInfo);
+
+  const [passState, setPassState] =
+    useState<ApplicantPassState>("non-processed");
+
+  const { mutate } = useMutation({
+    mutationFn: (afterState: "non-pass" | "pass") =>
+      patchApplicantState(applicantId as string, afterState),
+    onSuccess: (data) => {
+      queryClient.invalidateQueries(["kanbanDataArray", generation]);
+      setPassState(data.passState);
+    },
+  });
+
+  const handleFailedButtonClick = () => {
+    mutate("non-pass");
+  };
+
+  const handlePassedButtonClick = () => {
+    mutate("pass");
+  };
+
+  useEffect(() => {
+    if (initialState) {
+      setPassState(initialState);
+    }
+  }, [initialState]);
+
+  if (isLoading) {
+    return <></>;
+  }
+
   return (
     <>
-      <div className="flex flex-col gap-1 mb-2">
-        <Txt className="text-xl text-secondary-200 font-medium">
-          {applicantDataFinder(data, "major")}
-        </Txt>
-        <Txt typography="h2">{`[${applicantDataFinder(
-          data,
-          "field"
-        )}] ${applicantDataFinder(data, "name")}`}</Txt>
+      <div className="flex justify-between items-center">
+        <div className="flex flex-col gap-1 mb-2">
+          <div className="flex justify-between items-center">
+            <Txt className="text-xl text-secondary-200 font-medium">
+              {applicantDataFinder(data, "major")}
+            </Txt>
+            <KanbanCardApplicantStatusLabel passState={passState} />
+          </div>
+          <Txt typography="h2">{`[${applicantDataFinder(
+            data,
+            "field"
+          )}] ${applicantDataFinder(data, "name")}`}</Txt>
+        </div>
+        {(myInfo?.role === "ROLE_OPERATION" ||
+          myInfo?.role === "ROLE_PRESIDENT") && (
+          <div className="flex gap-5">
+            <button
+              onClick={handleFailedButtonClick}
+              className="bg-zinc-200 w-20 h-20 hover:bg-sky-400 rounded-xl"
+            >
+              불합격
+            </button>
+            <button
+              onClick={handlePassedButtonClick}
+              className="bg-zinc-200 w-20 h-20 hover:bg-sky-400 rounded-xl"
+            >
+              합격
+            </button>
+          </div>
+        )}
       </div>
       <div className="flex gap-4 mb-8">
         <div className="flex gap-1">

From 79168a46a2dd2d9fcfe7cafa68a0421e28c2b859 Mon Sep 17 00:00:00 2001
From: minbo <smb5174@naver.com>
Date: Tue, 17 Sep 2024 13:48:09 +0900
Subject: [PATCH 04/16] =?UTF-8?q?refactor:=20=ED=83=80=EC=9E=85=20?=
 =?UTF-8?q?=EB=8B=A8=EC=96=B8=EC=9D=84=20=ED=85=9C=ED=94=8C=EB=A6=BF=20?=
 =?UTF-8?q?=EB=A6=AC=ED=84=B0=EB=9F=B4=EB=A1=9C=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../applicant/applicantNode/CustomResource.component.tsx      | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/components/applicant/applicantNode/CustomResource.component.tsx b/frontend/components/applicant/applicantNode/CustomResource.component.tsx
index 80231386..a7303ed8 100644
--- a/frontend/components/applicant/applicantNode/CustomResource.component.tsx
+++ b/frontend/components/applicant/applicantNode/CustomResource.component.tsx
@@ -32,7 +32,7 @@ const ApplicantResource = ({
 
   const { data: initialState, isLoading } = useQuery(
     ["applicantState", applicantId],
-    () => getApplicantState(navbarId, applicantId as string, generation)
+    () => getApplicantState(navbarId, `${applicantId}`, generation)
   );
 
   const { data: myInfo } = useQuery(["user"], getMyInfo);
@@ -42,7 +42,7 @@ const ApplicantResource = ({
 
   const { mutate } = useMutation({
     mutationFn: (afterState: "non-pass" | "pass") =>
-      patchApplicantState(applicantId as string, afterState),
+      patchApplicantState(`${applicantId}`, afterState),
     onSuccess: (data) => {
       queryClient.invalidateQueries(["kanbanDataArray", generation]);
       setPassState(data.passState);

From b47fb1863ae833892a05588cbaab107287c32ce0 Mon Sep 17 00:00:00 2001
From: minbo <smb5174@naver.com>
Date: Tue, 17 Sep 2024 13:51:03 +0900
Subject: [PATCH 05/16] =?UTF-8?q?refactor:=20=ED=95=B8=EB=93=A4=EB=9F=AC?=
 =?UTF-8?q?=20=ED=95=A8=EC=88=98=EC=9D=98=20prefix=20=EB=B3=80=EA=B2=BD=20?=
 =?UTF-8?q?handle=20->=20on?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../applicant/applicantNode/CustomResource.component.tsx  | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontend/components/applicant/applicantNode/CustomResource.component.tsx b/frontend/components/applicant/applicantNode/CustomResource.component.tsx
index a7303ed8..a37c41f7 100644
--- a/frontend/components/applicant/applicantNode/CustomResource.component.tsx
+++ b/frontend/components/applicant/applicantNode/CustomResource.component.tsx
@@ -49,11 +49,11 @@ const ApplicantResource = ({
     },
   });
 
-  const handleFailedButtonClick = () => {
+  const onFailedButtonClick = () => {
     mutate("non-pass");
   };
 
-  const handlePassedButtonClick = () => {
+  const onPassedButtonClick = () => {
     mutate("pass");
   };
 
@@ -86,13 +86,13 @@ const ApplicantResource = ({
           myInfo?.role === "ROLE_PRESIDENT") && (
           <div className="flex gap-5">
             <button
-              onClick={handleFailedButtonClick}
+              onClick={onFailedButtonClick}
               className="bg-zinc-200 w-20 h-20 hover:bg-sky-400 rounded-xl"
             >
               불합격
             </button>
             <button
-              onClick={handlePassedButtonClick}
+              onClick={onPassedButtonClick}
               className="bg-zinc-200 w-20 h-20 hover:bg-sky-400 rounded-xl"
             >
               합격

From 1656aa1596de2adb4ef445546e915eeea1b10718 Mon Sep 17 00:00:00 2001
From: minbo <smb5174@naver.com>
Date: Tue, 17 Sep 2024 14:22:35 +0900
Subject: [PATCH 06/16] =?UTF-8?q?refactor:=20=EB=A1=9C=EB=94=A9=20?=
 =?UTF-8?q?=EC=B2=98=EB=A6=AC=20=EC=A1=B0=EA=B1=B4=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../applicant/applicantNode/CustomResource.component.tsx   | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/frontend/components/applicant/applicantNode/CustomResource.component.tsx b/frontend/components/applicant/applicantNode/CustomResource.component.tsx
index a37c41f7..7d74e57b 100644
--- a/frontend/components/applicant/applicantNode/CustomResource.component.tsx
+++ b/frontend/components/applicant/applicantNode/CustomResource.component.tsx
@@ -35,7 +35,10 @@ const ApplicantResource = ({
     () => getApplicantState(navbarId, `${applicantId}`, generation)
   );
 
-  const { data: myInfo } = useQuery(["user"], getMyInfo);
+  const { data: myInfo, isLoading: myInfoLoading } = useQuery(
+    ["user"],
+    getMyInfo
+  );
 
   const [passState, setPassState] =
     useState<ApplicantPassState>("non-processed");
@@ -63,7 +66,7 @@ const ApplicantResource = ({
     }
   }, [initialState]);
 
-  if (isLoading) {
+  if (!initialState || isLoading || !myInfo || myInfoLoading) {
     return <></>;
   }
 

From 6abdd7500204fbdd16595894860aeb509aa0e8e9 Mon Sep 17 00:00:00 2001
From: minbo <smb5174@naver.com>
Date: Tue, 17 Sep 2024 14:58:19 +0900
Subject: [PATCH 07/16] =?UTF-8?q?refactor:=20api=20=ED=95=A8=EC=88=98?=
 =?UTF-8?q?=EC=9D=98=20return=20=EA=B0=92=20=ED=83=80=EC=9E=85=EC=9D=84=20?=
 =?UTF-8?q?interface=EC=99=80=20type=EC=9C=BC=EB=A1=9C=20=EC=A7=80?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/apis/applicant/index.ts | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/frontend/src/apis/applicant/index.ts b/frontend/src/apis/applicant/index.ts
index 77404c9f..1777488c 100644
--- a/frontend/src/apis/applicant/index.ts
+++ b/frontend/src/apis/applicant/index.ts
@@ -133,22 +133,28 @@ export const getApplicantTimeTables = async (id: string) => {
   return data;
 };
 
+interface patchApplicantStateRes {
+  passState: ApplicantPassState;
+}
+
 export const patchApplicantState = async (
   id: string,
   afterState: "non-pass" | "pass"
 ) => {
-  const { data } = await https.patch<KanbanCardReq["state"]>(
+  const { data } = await https.patch<patchApplicantStateRes>(
     `/applicants/${id}/state?afterState=${afterState}`
   );
 
   return data;
 };
 
+type getApplicantStateRes = ApplicantPassState | undefined;
+
 export const getApplicantState = async (
   navigationId: string,
   applicantId: string,
   generation: string
-): Promise<ApplicantPassState | undefined> => {
+): Promise<getApplicantStateRes> => {
   const cardsData = await getKanbanCards(navigationId, generation);
 
   return cardsData.find((card) => card.applicantId === applicantId)?.state

From e860e3cf697bee1fa9e1e0bea8b9d2c1bb10a83e Mon Sep 17 00:00:00 2001
From: minbo <smb5174@naver.com>
Date: Tue, 17 Sep 2024 15:37:32 +0900
Subject: [PATCH 08/16] =?UTF-8?q?feat:=20=EC=97=90=EB=9F=AC=20=EC=B2=98?=
 =?UTF-8?q?=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../CustomResource.component.tsx              | 22 +++++++++++++------
 1 file changed, 15 insertions(+), 7 deletions(-)

diff --git a/frontend/components/applicant/applicantNode/CustomResource.component.tsx b/frontend/components/applicant/applicantNode/CustomResource.component.tsx
index 7d74e57b..6ca06222 100644
--- a/frontend/components/applicant/applicantNode/CustomResource.component.tsx
+++ b/frontend/components/applicant/applicantNode/CustomResource.component.tsx
@@ -30,15 +30,19 @@ const ApplicantResource = ({
   const applicantId = searchParams.get("applicantId");
   const queryClient = useQueryClient();
 
-  const { data: initialState, isLoading } = useQuery(
-    ["applicantState", applicantId],
-    () => getApplicantState(navbarId, `${applicantId}`, generation)
+  const {
+    data: initialState,
+    isLoading,
+    isError,
+  } = useQuery(["applicantState", applicantId], () =>
+    getApplicantState(navbarId, `${applicantId}`, generation)
   );
 
-  const { data: myInfo, isLoading: myInfoLoading } = useQuery(
-    ["user"],
-    getMyInfo
-  );
+  const {
+    data: myInfo,
+    isLoading: myInfoLoading,
+    isError: myInfoError,
+  } = useQuery(["user"], getMyInfo);
 
   const [passState, setPassState] =
     useState<ApplicantPassState>("non-processed");
@@ -70,6 +74,10 @@ const ApplicantResource = ({
     return <></>;
   }
 
+  if (isError || myInfoError) {
+    return <div>에러 발생</div>;
+  }
+
   return (
     <>
       <div className="flex justify-between items-center">

From 8f1095ccb14003625a6cdc683f37719f3e5932fa Mon Sep 17 00:00:00 2001
From: minbo <smb5174@naver.com>
Date: Tue, 17 Sep 2024 15:37:58 +0900
Subject: [PATCH 09/16] =?UTF-8?q?feat:=20=EB=A1=9C=EB=94=A9=20=EC=B2=98?=
 =?UTF-8?q?=EB=A6=AC=20=EB=A9=94=EC=8B=9C=EC=A7=80=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../applicant/applicantNode/CustomResource.component.tsx        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/components/applicant/applicantNode/CustomResource.component.tsx b/frontend/components/applicant/applicantNode/CustomResource.component.tsx
index 6ca06222..6029321d 100644
--- a/frontend/components/applicant/applicantNode/CustomResource.component.tsx
+++ b/frontend/components/applicant/applicantNode/CustomResource.component.tsx
@@ -71,7 +71,7 @@ const ApplicantResource = ({
   }, [initialState]);
 
   if (!initialState || isLoading || !myInfo || myInfoLoading) {
-    return <></>;
+    return <div>로딩중...</div>;
   }
 
   if (isError || myInfoError) {

From 4bc51852cccddc4ff08fe8fe986595ac64066c25 Mon Sep 17 00:00:00 2001
From: minbo <smb5174@naver.com>
Date: Wed, 18 Sep 2024 09:22:00 +0900
Subject: [PATCH 10/16] =?UTF-8?q?refactor:=20=EC=9D=B8=ED=84=B0=ED=8E=98?=
 =?UTF-8?q?=EC=9D=B4=EC=8A=A4=EB=A5=BC=20=ED=8C=8C=EC=8A=A4=EC=B9=BC=20?=
 =?UTF-8?q?=EC=BC=80=EC=9D=B4=EC=8A=A4=EB=A1=9C=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/apis/applicant/index.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/apis/applicant/index.ts b/frontend/src/apis/applicant/index.ts
index 1777488c..0f255975 100644
--- a/frontend/src/apis/applicant/index.ts
+++ b/frontend/src/apis/applicant/index.ts
@@ -133,7 +133,7 @@ export const getApplicantTimeTables = async (id: string) => {
   return data;
 };
 
-interface patchApplicantStateRes {
+interface PatchApplicantStateRes {
   passState: ApplicantPassState;
 }
 
@@ -141,7 +141,7 @@ export const patchApplicantState = async (
   id: string,
   afterState: "non-pass" | "pass"
 ) => {
-  const { data } = await https.patch<patchApplicantStateRes>(
+  const { data } = await https.patch<PatchApplicantStateRes>(
     `/applicants/${id}/state?afterState=${afterState}`
   );
 

From 1bb9f569e20a73e214fbd7819be785607e5f7a27 Mon Sep 17 00:00:00 2001
From: minbo <smb5174@naver.com>
Date: Wed, 18 Sep 2024 09:22:47 +0900
Subject: [PATCH 11/16] =?UTF-8?q?refactor:=20=EC=82=AC=EC=9A=A9=ED=95=98?=
 =?UTF-8?q?=EC=A7=80=20=EC=95=8A=EB=8A=94=20=EB=AA=A8=EB=93=88=20=EC=A0=9C?=
 =?UTF-8?q?=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../applicant/applicantNode/CustomResource.component.tsx        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/components/applicant/applicantNode/CustomResource.component.tsx b/frontend/components/applicant/applicantNode/CustomResource.component.tsx
index 6029321d..0ee4f018 100644
--- a/frontend/components/applicant/applicantNode/CustomResource.component.tsx
+++ b/frontend/components/applicant/applicantNode/CustomResource.component.tsx
@@ -10,7 +10,7 @@ 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, getAllKanbanData } from "@/src/apis/kanban";
+import { ApplicantPassState } from "@/src/apis/kanban";
 import { useAtomValue } from "jotai";
 import { KanbanSelectedButtonNumberState } from "@/src/stores/kanban/Navbar.atoms";
 import { getMyInfo } from "@/src/apis/interview";

From e692ac479a245fdde068b5d2846994c7aa8533d8 Mon Sep 17 00:00:00 2001
From: minbo <smb5174@naver.com>
Date: Wed, 18 Sep 2024 09:25:24 +0900
Subject: [PATCH 12/16] =?UTF-8?q?refactor:=20useQuery=20=EB=B2=84=EC=A0=84?=
 =?UTF-8?q?=EC=97=85,=20queryKey=EC=97=90=20navbarId=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../applicant/applicantNode/CustomResource.component.tsx   | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/frontend/components/applicant/applicantNode/CustomResource.component.tsx b/frontend/components/applicant/applicantNode/CustomResource.component.tsx
index 0ee4f018..312f1d44 100644
--- a/frontend/components/applicant/applicantNode/CustomResource.component.tsx
+++ b/frontend/components/applicant/applicantNode/CustomResource.component.tsx
@@ -34,9 +34,10 @@ const ApplicantResource = ({
     data: initialState,
     isLoading,
     isError,
-  } = useQuery(["applicantState", applicantId], () =>
-    getApplicantState(navbarId, `${applicantId}`, generation)
-  );
+  } = useQuery({
+    queryKey: ["applicantState", applicantId, navbarId],
+    queryFn: () => getApplicantState(navbarId, `${applicantId}`, generation),
+  });
 
   const {
     data: myInfo,

From 03153e839fc2c6686a2836f2ef732cd9862d9066 Mon Sep 17 00:00:00 2001
From: minbo <smb5174@naver.com>
Date: Wed, 18 Sep 2024 09:38:33 +0900
Subject: [PATCH 13/16] =?UTF-8?q?refactor:=20=EC=98=B5=EC=85=94=EB=84=90?=
 =?UTF-8?q?=20=EC=97=B0=EC=82=B0=EC=9E=90=20=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../applicant/applicantNode/CustomResource.component.tsx      | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/components/applicant/applicantNode/CustomResource.component.tsx b/frontend/components/applicant/applicantNode/CustomResource.component.tsx
index 312f1d44..4d946c1f 100644
--- a/frontend/components/applicant/applicantNode/CustomResource.component.tsx
+++ b/frontend/components/applicant/applicantNode/CustomResource.component.tsx
@@ -94,8 +94,8 @@ const ApplicantResource = ({
             "field"
           )}] ${applicantDataFinder(data, "name")}`}</Txt>
         </div>
-        {(myInfo?.role === "ROLE_OPERATION" ||
-          myInfo?.role === "ROLE_PRESIDENT") && (
+        {(myInfo.role === "ROLE_OPERATION" ||
+          myInfo.role === "ROLE_PRESIDENT") && (
           <div className="flex gap-5">
             <button
               onClick={onFailedButtonClick}

From cc6dae1673a476cd951220ecbcb06323647b4323 Mon Sep 17 00:00:00 2001
From: minbo <smb5174@naver.com>
Date: Wed, 18 Sep 2024 16:21:35 +0900
Subject: [PATCH 14/16] =?UTF-8?q?refactor:=20useState=EC=99=80=20useEffect?=
 =?UTF-8?q?=20=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../CustomResource.component.tsx              | 45 ++++++++++++-------
 frontend/src/apis/applicant/index.ts          |  2 +-
 2 files changed, 30 insertions(+), 17 deletions(-)

diff --git a/frontend/components/applicant/applicantNode/CustomResource.component.tsx b/frontend/components/applicant/applicantNode/CustomResource.component.tsx
index 4d946c1f..ac47efa0 100644
--- 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
index 0f255975..6bc7655d 100644
--- 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,

From e2d85e0728cf375b39d73b4554a6cc2fe16dcaa8 Mon Sep 17 00:00:00 2001
From: minbo <smb5174@naver.com>
Date: Wed, 18 Sep 2024 18:54:53 +0900
Subject: [PATCH 15/16] =?UTF-8?q?refactor:=20getApplicantState=20=ED=95=A8?=
 =?UTF-8?q?=EC=88=98=EB=A5=BC=20=EC=9C=A0=ED=8B=B8=ED=95=A8=EC=88=98?=
 =?UTF-8?q?=EB=A1=9C=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../applicantNode/CustomResource.component.tsx | 18 ++++++++++--------
 frontend/src/apis/applicant/index.ts           | 13 -------------
 frontend/src/utils/applicant/index.ts          |  9 +++++++++
 3 files changed, 19 insertions(+), 21 deletions(-)
 create mode 100644 frontend/src/utils/applicant/index.ts

diff --git a/frontend/components/applicant/applicantNode/CustomResource.component.tsx b/frontend/components/applicant/applicantNode/CustomResource.component.tsx
index ac47efa0..ce057872 100644
--- a/frontend/components/applicant/applicantNode/CustomResource.component.tsx
+++ b/frontend/components/applicant/applicantNode/CustomResource.component.tsx
@@ -1,10 +1,5 @@
 import Txt from "@/components/common/Txt.component";
-import {
-  ApplicantReq,
-  getApplicantState,
-  getApplicantStateRes,
-  patchApplicantState,
-} from "@/src/apis/applicant";
+import { ApplicantReq, patchApplicantState } from "@/src/apis/applicant";
 import { applicantDataFinder } from "@/src/functions/finder";
 import Portfolio from "./Portfolio";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
@@ -13,6 +8,8 @@ import KanbanCardApplicantStatusLabel from "@/components/kanban/card/CardApplica
 import { useAtomValue } from "jotai";
 import { KanbanSelectedButtonNumberState } from "@/src/stores/kanban/Navbar.atoms";
 import { getMyInfo } from "@/src/apis/interview";
+import { findApplicantState } from "@/src/utils/applicant";
+import { ApplicantPassState, getKanbanCards } from "@/src/apis/kanban";
 
 interface ApplicantResourceProps {
   data: ApplicantReq[];
@@ -36,7 +33,12 @@ const ApplicantResource = ({
     isError,
   } = useQuery({
     queryKey: ["applicantState", applicantId, navbarId],
-    queryFn: () => getApplicantState(navbarId, `${applicantId}`, generation),
+    queryFn: async () =>
+      findApplicantState(
+        await getKanbanCards(navbarId, generation),
+        `${applicantId}`
+      ),
+    staleTime: 3000,
   });
 
   const {
@@ -57,7 +59,7 @@ const ApplicantResource = ({
         navbarId,
       ]);
 
-      const snapshotState = queryClient.getQueryData<getApplicantStateRes>([
+      const snapshotState = queryClient.getQueryData<ApplicantPassState>([
         "applicantState",
         applicantId,
         navbarId,
diff --git a/frontend/src/apis/applicant/index.ts b/frontend/src/apis/applicant/index.ts
index 6bc7655d..355e65dc 100644
--- a/frontend/src/apis/applicant/index.ts
+++ b/frontend/src/apis/applicant/index.ts
@@ -147,16 +147,3 @@ export const patchApplicantState = async (
 
   return data;
 };
-
-export type getApplicantStateRes = ApplicantPassState | undefined;
-
-export const getApplicantState = async (
-  navigationId: string,
-  applicantId: string,
-  generation: string
-): Promise<getApplicantStateRes> => {
-  const cardsData = await getKanbanCards(navigationId, generation);
-
-  return cardsData.find((card) => card.applicantId === applicantId)?.state
-    .passState;
-};
diff --git a/frontend/src/utils/applicant/index.ts b/frontend/src/utils/applicant/index.ts
new file mode 100644
index 00000000..3210c4aa
--- /dev/null
+++ b/frontend/src/utils/applicant/index.ts
@@ -0,0 +1,9 @@
+import { KanbanCardReq } from "@/src/apis/kanban";
+
+export const findApplicantState = (
+  cardsData: KanbanCardReq[],
+  applicantId: string
+) => {
+  return cardsData.find((card) => card.applicantId === applicantId)?.state
+    .passState;
+};

From b3e062fc0cf5e18f3bcc01cc8679cdff35f4ab0d Mon Sep 17 00:00:00 2001
From: minbo <smb5174@naver.com>
Date: Wed, 18 Sep 2024 18:55:29 +0900
Subject: [PATCH 16/16] =?UTF-8?q?refactor:=20staleTime=20=EC=A0=81?=
 =?UTF-8?q?=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../kanban/column/ColumnWithBackButton.component.tsx      | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/frontend/components/kanban/column/ColumnWithBackButton.component.tsx b/frontend/components/kanban/column/ColumnWithBackButton.component.tsx
index 423669d7..89caab0c 100644
--- a/frontend/components/kanban/column/ColumnWithBackButton.component.tsx
+++ b/frontend/components/kanban/column/ColumnWithBackButton.component.tsx
@@ -30,9 +30,11 @@ const KanbanColumnDetailCard = ({
     data: kanbanDataArray,
     isError,
     isLoading,
-  } = useQuery<KanbanColumnData[]>(["kanbanDataArray", generation], () =>
-    getAllKanbanData(navbarId, generation)
-  );
+  } = useQuery<KanbanColumnData[]>({
+    queryKey: ["kanbanDataArray", generation],
+    queryFn: () => getAllKanbanData(navbarId, generation),
+    staleTime: 3000,
+  });
 
   if (!kanbanDataArray || isLoading) {
     return <div>로딩중...</div>;