fix: 칸반보드의 라벨이 계속 늘어나는 문제 해결 (#216)

Author: 2yunseong

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}

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}

frontend/src/apis/applicant/index.ts

@@ -91,11 +91,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 {
@@ -104,13 +107,15 @@ 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,
         };
       })
       .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,
     }));

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,20 +45,22 @@ 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 {
     const { data } = await https.get<string[]>(`/cards/${cardId}/labels`);
     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,
     }));