diff --git a/frontend/components/kanban/card/Card.component.tsx b/frontend/components/kanban/card/Card.component.tsx index af9acdf7..72dc5e82 100644 --- a/frontend/components/kanban/card/Card.component.tsx +++ b/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} > -
{major}
+
+ {major} + +
{title}
{apply.join(" / ")}
diff --git a/frontend/components/kanban/card/CardApplicantStatusLabel.tsx b/frontend/components/kanban/card/CardApplicantStatusLabel.tsx new file mode 100644 index 00000000..cfbc7750 --- /dev/null +++ b/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 = { + "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 ( +
+ {label} +
+ ); +}; + +export default KanbanCardApplicantStatusLabel; diff --git a/frontend/src/apis/kanban/index.ts b/frontend/src/apis/kanban/index.ts index 0bb09c03..e794e8b7 100644 --- a/frontend/src/apis/kanban/index.ts +++ b/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), diff --git a/frontend/src/stores/kanban/Kanban.atoms.ts b/frontend/src/stores/kanban/Kanban.atoms.ts index fa56a556..3ea8ab2c 100644 --- a/frontend/src/stores/kanban/Kanban.atoms.ts +++ b/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[]);