From e22589077ab81d782dc218e23313081dd738463d Mon Sep 17 00:00:00 2001
From: 2yunseong <dbsdltjd123@gmail.com>
Date: Thu, 19 Sep 2024 06:14:09 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20=EC=A4=91=EB=B3=B5=EB=90=A0=20=EC=88=98?=
 =?UTF-8?q?=20=EC=9E=88=EB=8A=94=20key=EA=B0=92=EC=9D=B4=20=EC=A1=B4?=
 =?UTF-8?q?=EC=9E=AC=ED=95=98=EB=AF=80=EB=A1=9C,=20=EC=9E=AC=EC=A1=B0?=
 =?UTF-8?q?=EC=A0=95=EC=9D=B4=20=EC=8B=A4=ED=8C=A8=ED=95=98=EB=8A=94=20?=
 =?UTF-8?q?=EB=AC=B8=EC=A0=9C=20=ED=95=B4=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../applicantNode/Label.component.tsx         | 31 +++++++------------
 .../kanban/content/work/Label.component.tsx   | 31 +++++++------------
 frontend/src/apis/applicant/index.ts          |  7 ++++-
 frontend/src/apis/work/index.ts               |  5 ++-
 4 files changed, 32 insertions(+), 42 deletions(-)

diff --git a/frontend/components/applicant/applicantNode/Label.component.tsx b/frontend/components/applicant/applicantNode/Label.component.tsx
index 0329265d..076bad0b 100644
--- a/frontend/components/applicant/applicantNode/Label.component.tsx
+++ b/frontend/components/applicant/applicantNode/Label.component.tsx
@@ -18,7 +18,7 @@ interface ApplicantLabelProps {
 const ApplicantLabel = ({ postId, generation }: ApplicantLabelProps) => {
   const [openAdditional, setOpenAdditional] = useState(false);
 
-  const { data, error, isLoading } = useQuery<ApplicantLabelReq[]>(
+  const { data, error, isLoading } = useQuery(
     ["applicantLabel", postId],
     () => getApplicantLabel(postId),
     {
@@ -38,6 +38,8 @@ const ApplicantLabel = ({ postId, generation }: ApplicantLabelProps) => {
     setOpenAdditional((prev) => !prev);
   };
 
+  const omitLabels = openAdditional ? data : data.slice(0, 6);
+
   return (
     <div className="my-12">
       <div className="text-lg font-semibold">
@@ -48,25 +50,14 @@ const ApplicantLabel = ({ postId, generation }: ApplicantLabelProps) => {
       </div>
       <div className="flex items-baseline gap-2">
         <div className="grid grid-cols-6 gap-2 my-4 w-fit">
-          {openAdditional
-            ? data.map((label) => (
-                <ApplicantLabelButton
-                  generation={generation}
-                  key={label.name}
-                  label={label}
-                  postId={postId}
-                />
-              ))
-            : data
-                .map((label) => (
-                  <ApplicantLabelButton
-                    generation={generation}
-                    key={label.name}
-                    label={label}
-                    postId={postId}
-                  />
-                ))
-                .slice(0, 6)}
+          {omitLabels.map((label) => (
+            <ApplicantLabelButton
+              generation={generation}
+              key={label.id}
+              label={label}
+              postId={postId}
+            />
+          ))}
         </div>
         <button
           onClick={toggleOpen}
diff --git a/frontend/components/kanban/content/work/Label.component.tsx b/frontend/components/kanban/content/work/Label.component.tsx
index bc134bf6..7e0e235c 100644
--- a/frontend/components/kanban/content/work/Label.component.tsx
+++ b/frontend/components/kanban/content/work/Label.component.tsx
@@ -14,7 +14,7 @@ interface WorkLabelProps {
 const WorkLabel = ({ cardId, generation }: WorkLabelProps) => {
   const [openAdditional, setOpenAdditional] = useState(false);
 
-  const { data, error, isLoading } = useQuery<WorkLabelReq[]>(
+  const { data, error, isLoading } = useQuery(
     ["workLabel", cardId],
     () => getWorkLabel(cardId),
     {
@@ -34,6 +34,8 @@ const WorkLabel = ({ cardId, generation }: WorkLabelProps) => {
     setOpenAdditional((prev) => !prev);
   };
 
+  const omitLabels = openAdditional ? data : data.slice(0, 6);
+
   return (
     <div className="my-12">
       <div className="text-lg font-semibold">
@@ -44,25 +46,14 @@ const WorkLabel = ({ cardId, generation }: WorkLabelProps) => {
       </div>
       <div className="flex items-baseline gap-2">
         <div className="grid grid-cols-6 gap-2 my-4 w-fit">
-          {openAdditional
-            ? data.map((label) => (
-                <WorkLabelButton
-                  generation={generation}
-                  key={label.name}
-                  label={label}
-                  cardId={cardId}
-                />
-              ))
-            : data
-                .map((label) => (
-                  <WorkLabelButton
-                    generation={generation}
-                    key={label.name}
-                    label={label}
-                    cardId={cardId}
-                  />
-                ))
-                .slice(0, 6)}
+          {omitLabels.map((label) => (
+            <WorkLabelButton
+              key={label.id}
+              generation={generation}
+              label={label}
+              cardId={cardId}
+            />
+          ))}
         </div>
         <button
           onClick={toggleOpen}
diff --git a/frontend/src/apis/applicant/index.ts b/frontend/src/apis/applicant/index.ts
index a2a5db74..e9535adf 100644
--- a/frontend/src/apis/applicant/index.ts
+++ b/frontend/src/apis/applicant/index.ts
@@ -90,11 +90,14 @@ export const getApplicationById = async (id: string) => {
 };
 
 export interface ApplicantLabelReq {
+  id: number;
   name: string;
   active: boolean;
 }
 
-export const getApplicantLabel = async (id: string) => {
+export const getApplicantLabel = async (
+  id: string
+): Promise<ApplicantLabelReq[]> => {
   const allInterviewers = await getAllInterviewerWithOrder("name");
 
   try {
@@ -103,6 +106,7 @@ export const getApplicantLabel = async (id: string) => {
       .map((interviewer) => {
         const label = data.find((label) => label === interviewer.name);
         return {
+          id: interviewer.id,
           name: interviewer.name,
           active: !!label,
         };
@@ -110,6 +114,7 @@ export const getApplicantLabel = async (id: string) => {
       .sort((a, b) => (a.active === b.active ? 0 : a.active ? -1 : 1));
   } catch (e) {
     return allInterviewers.map((interviewer) => ({
+      id: interviewer.id,
       name: interviewer.name,
       active: false,
     }));
diff --git a/frontend/src/apis/work/index.ts b/frontend/src/apis/work/index.ts
index 3be5842a..0694337e 100644
--- a/frontend/src/apis/work/index.ts
+++ b/frontend/src/apis/work/index.ts
@@ -34,6 +34,7 @@ export const deleteWork = async (cardId: string) => {
 };
 
 export interface WorkLabelReq {
+  id: number;
   name: string;
   active: boolean;
 }
@@ -44,7 +45,7 @@ export const postWorkLabel = async (cardId: number) => {
   return data;
 };
 
-export const getWorkLabel = async (cardId: number) => {
+export const getWorkLabel = async (cardId: number): Promise<WorkLabelReq[]> => {
   const allInterviewers = await getAllInterviewerWithOrder("");
 
   try {
@@ -52,12 +53,14 @@ export const getWorkLabel = async (cardId: number) => {
     return allInterviewers.map((interviewer) => {
       const label = data.find((label) => label === interviewer.name);
       return {
+        id: interviewer.id,
         name: interviewer.name,
         active: !!label,
       };
     });
   } catch (e) {
     return allInterviewers.map((interviewer) => ({
+      id: interviewer.id,
       name: interviewer.name,
       active: false,
     }));