feat: 칸반 보드 페이지에서 지원자의 지원 상태를 카드에 보여준다. (#197)

frontend/components/kanban/card/Card.component.tsx

@@ -2,6 +2,7 @@ import { KanbanCardData } from "@/src/stores/kanban/Kanban.atoms";
 import { cn } from "@/src/utils/cn";
 import { useParams, useRouter } from "next/navigation";
 import Icon from "@/components/common/Icon";
+import KanbanCardApplicantStatusLabel from "./CardApplicantStatusLabel";
 
 type KanbanCardComponentType = {
   data: KanbanCardData | null;
@@ -33,6 +34,7 @@ function KanbanCardComponent({
     major,
     applicantId: dataApplicantId,
     cardType,
+    passState,
   } = data;
 
   const onClickDetail = () => {
@@ -53,7 +55,10 @@ function KanbanCardComponent({
       )}
       onClick={onClickDetail}
     >
-      <div className="text-xs text-secondary-200">{major}</div>
+      <div className="text-xs text-secondary-200 flex justify-between items-center">
+        {major}
+        <KanbanCardApplicantStatusLabel passState={passState} />
+      </div>
       <div className="font-bold truncate">{title}</div>
       <div className="mt-2 flex justify-between items-center text-sm text-secondary-200">
         <div className="text-sm">{apply.join(" / ")}</div>

frontend/components/kanban/card/CardApplicantStatusLabel.tsx

@@ -0,0 +1,39 @@
+import { ApplicantPassState, KanbanCardReq } from "@/src/apis/kanban";
+import { cn } from "@/src/utils/cn";
+
+interface labelConfigType {
+  backgroundColor: string;
+  label: string;
+}
+
+export const labelConfig: Record<ApplicantPassState, labelConfigType> = {
+  "non-processed": {
+    backgroundColor: "bg-gray-300",
+    label: "처리중",
+  },
+  "first-passed": {
+    backgroundColor: "bg-lime-300",
+    label: "1차 합격",
+  },
+  "final-passed": {
+    backgroundColor: "bg-blue-300",
+    label: "최종 합격",
+  },
+  "non-passed": {
+    backgroundColor: "bg-red-300",
+    label: "탈락",
+  },
+};
+
+const KanbanCardApplicantStatusLabel = ({
+  passState,
+}: KanbanCardReq["state"]) => {
+  const { backgroundColor, label } = labelConfig[passState];
+  return (
+    <div className={cn("text-xs px-2.5 py-1 rounded-lg", backgroundColor)}>
+      {label}
+    </div>
+  );
+};
+
+export default KanbanCardApplicantStatusLabel;

frontend/src/apis/kanban/index.ts

@@ -1,6 +1,12 @@
 import { https } from "@/src/functions/axios";
 import { KanbanColumnData } from "../../stores/kanban/Kanban.atoms";
 
+export type ApplicantPassState =
+  | "non-processed"
+  | "non-passed"
+  | "first-passed"
+  | "final-passed";
+
 export interface KanbanCardReq {
   id: number;
   boardId: number;
@@ -16,6 +22,9 @@ export interface KanbanCardReq {
   firstPriority: string;
   secondPriority: string;
   isLabeled: boolean;
+  state: {
+    passState: ApplicantPassState;
+  };
 }
 
 // TODO: card api 추가 시 수정 필요
@@ -142,6 +151,7 @@ export const getAllKanbanData = async (
             comment: card.commentCount,
             heart: card.labelCount,
             isHearted: card.isLabeled,
+            passState: card.state.passState,
           };
         })
         .filter((card) => card !== null),

frontend/src/stores/kanban/Kanban.atoms.ts

@@ -1,3 +1,4 @@
+import { ApplicantPassState } from "@/src/apis/kanban";
 import { atom } from "jotai";
 
 export type KanbanColumnData = {
@@ -17,6 +18,7 @@ export type KanbanCardData = {
   heart: number;
   isHearted: boolean;
   applicantId: string;
+  passState: ApplicantPassState["passState"];
 };
 
 export const KanbanDataArrayState = atom({} as KanbanColumnData[]);