feat: 지원현황/면접기록 목록페이지에서 합불상태를 조회할 수 있다.

frontend/components/applicant/Board.tsx

@@ -11,6 +11,7 @@ import { useQuery } from "@tanstack/react-query";
 import { useSearchParams } from "next/navigation";
 import { ORDER_MENU } from "@/src/constants";
 import { useSearchQuery } from "@/src/hooks/useSearchQuery";
+import { type ApplicantPassState } from "../../src/apis/kanban";
 
 interface ApplicantBoardProps {
   generation: string;
@@ -59,8 +60,10 @@ const ApplicantBoard = ({ generation }: ApplicantBoardProps) => {
       "name"
     )}`,
     subElements: [
-      applicantDataFinder(value, "field1"),
-      applicantDataFinder(value, "field2"),
+      `${applicantDataFinder(value, "field1")}/${applicantDataFinder(
+        value,
+        "field2"
+      )}`,
       `${applicantDataFinder(value, "grade")} ${applicantDataFinder(
         value,
         "semester"
@@ -71,11 +74,14 @@ const ApplicantBoard = ({ generation }: ApplicantBoardProps) => {
             Number(applicantDataFinder(value, "uploadDate"))
           ).toLocaleString("ko-KR", { dateStyle: "short" }),
     ],
+    passState: `${
+      applicantDataFinder(value, "passState").passState
+    }` as ApplicantPassState,
   }));
 
   return (
     <Board
-      wapperClassname="divide-x"
+      wrapperClassname="divide-x"
       boardData={createSearchData(true) ?? boardData}
       onClick={onClick}
     >

frontend/components/common/board/Board.tsx

@@ -1,92 +1,50 @@
 "use client";
 
-import { PropsWithChildren, useState } from "react";
-import BoardCell from "./BoardCell.component";
-import Modal from "react-modal";
-import Image from "next/image";
-import CloseImage from "/public/icons/ellipsis.multiply.svg";
-import { cn } from "@/src/utils/cn";
-import Txt from "../Txt.component";
+import { type PropsWithChildren } from "react";
+import useModalState from "../../../src/hooks/useModalState";
+import BoardModal from "./BoardModal";
+import BoardTable from "./BoardTable";
+import { type ApplicantPassState } from "../../../src/apis/kanban";
 
-interface BoardData {
+export interface BoardData {
   id: string;
   title: string;
   subElements: string[];
   time?: Date;
+  passState?: ApplicantPassState;
 }
 
 interface BoardProps extends PropsWithChildren {
   onClick?: (id: string) => void;
-  wapperClassname?: string;
+  wrapperClassname?: string;
   boardData: BoardData[];
 }
 
 const Board = ({
   children,
   onClick,
-  wapperClassname,
+  wrapperClassname,
   boardData,
 }: BoardProps) => {
-  const [isOpen, setIsOpen] = useState(false);
+  const { isOpen, openModal, closeModal } = useModalState();
 
-  const openModel = (id: string) => {
-    setIsOpen(true);
+  const handleModalOpen = (id: string) => () => {
+    openModal();
     onClick && onClick(id);
   };
-  const closeModel = () => setIsOpen(false);
 
   return (
-    <section className="flex flex-col">
-      {boardData.length === 0 ? (
-        <Txt>검색결과가 없습니다.</Txt>
-      ) : (
-        <>
-          {boardData.map((item) => (
-            <BoardCell
-              key={item.id}
-              title={item.title}
-              subElements={item.subElements}
-              onClick={() => openModel(item.id)}
-            />
-          ))}
-        </>
-      )}
-      <Modal
-        style={{
-          content: {
-            width: "calc(100% - 12rem)",
-            zIndex: "9999",
-            height: "calc(100%)",
-            margin: "3rem 6rem 0 6rem",
-            minWidth: "1280px",
-            boxShadow: "0px 0px 6px 1px rgba(0, 0, 0, 0.14)",
-            border: "none",
-            position: "relative",
-            inset: "0",
-            padding: "2.5rem 3rem",
-          },
-          overlay: {
-            padding: "0",
-            position: "absolute",
-          },
-        }}
+    <>
+      <BoardTable boardRows={boardData} handleModalOpen={handleModalOpen} />
+      <BoardModal
         isOpen={isOpen}
-        onRequestClose={closeModel}
+        onRequestClose={closeModal}
         ariaHideApp={false}
+        wrapperClassname={wrapperClassname}
       >
-        <button className="absolute z-10" onClick={closeModel}>
-          <Image src={CloseImage} alt="close" />
-        </button>
-        <div
-          className={cn(
-            "flex pt-8 absolute h-[calc(100%-6rem)] w-[calc(100%-6rem)]",
-            wapperClassname
-          )}
-        >
-          {children}
-        </div>
-      </Modal>
-    </section>
+        {children}
+      </BoardModal>
+    </>
   );
 };
 

frontend/components/common/board/BoardCell.component.tsx

@@ -1,18 +1,28 @@
+import { type ApplicantPassState } from "../../../src/apis/kanban";
+import PassStateLabel from "../../passState/PassStateLabel";
 import Txt from "../Txt.component";
 
 export interface BoardCellProps {
   title: string;
   subElements: string[];
+  passState?: ApplicantPassState;
   score?: string;
   onClick?: () => void;
 }
 
-const BoardCell = ({ title, subElements, score, onClick }: BoardCellProps) => {
+const BoardCell = ({
+  title,
+  subElements,
+  score,
+  passState,
+  onClick,
+}: BoardCellProps) => {
   return (
     <button className="flex border-t py-4 justify-between" onClick={onClick}>
       <Txt typography="h6" className="flex-[2_0_0] text-left truncate">
         {title}
       </Txt>
+      {passState && <PassStateLabel passState={passState} />}
       <div className="flex gap-20 flex-[2_0_0] text-center truncate">
         {subElements.map((subElement, index) => (
           <Txt

frontend/components/common/board/BoardModal.tsx

@@ -0,0 +1,52 @@
+import Modal from "react-modal";
+import CloseImage from "/public/icons/ellipsis.multiply.svg";
+import Image from "next/image";
+import { cn } from "@/src/utils/cn";
+
+const modalStyle = {
+  content: {
+    width: "calc(100% - 12rem)",
+    zIndex: "9999",
+    height: "calc(100%)",
+    margin: "3rem 6rem 0 6rem",
+    minWidth: "1280px",
+    boxShadow: "0px 0px 6px 1px rgba(0, 0, 0, 0.14)",
+    border: "none",
+    position: "relative",
+    inset: "0",
+    padding: "2.5rem 3rem",
+  },
+  overlay: {
+    padding: "0",
+    position: "absolute",
+  },
+} as const;
+
+interface BoardModalProps extends Modal.Props {
+  wrapperClassname?: string;
+}
+
+const BoardModal = ({
+  wrapperClassname,
+  style,
+  children,
+  ...props
+}: BoardModalProps) => {
+  return (
+    <Modal style={{ ...modalStyle, ...style }} {...props}>
+      <button className="absolute z-10" onClick={props.onRequestClose}>
+        <Image src={CloseImage} alt="close" />
+      </button>
+      <div
+        className={cn(
+          "flex pt-8 absolute h-[calc(100%-6rem)] w-[calc(100%-6rem)]",
+          wrapperClassname
+        )}
+      >
+        {children}
+      </div>
+    </Modal>
+  );
+};
+
+export default BoardModal;

frontend/components/common/board/BoardTable.tsx

@@ -0,0 +1,31 @@
+import Txt from "../Txt.component";
+import { BoardData } from "./Board";
+import BoardCell from "./BoardCell.component";
+
+interface BoardTableProps {
+  boardRows: BoardData[];
+  handleModalOpen: (id: string) => () => void;
+}
+const BoardTable = ({ boardRows, handleModalOpen }: BoardTableProps) => {
+  return (
+    <section className="flex flex-col">
+      {boardRows.length === 0 ? (
+        <Txt>검색결과가 없습니다.</Txt>
+      ) : (
+        <>
+          {boardRows.map(({ id, title, subElements, passState }) => (
+            <BoardCell
+              key={id}
+              title={title}
+              subElements={subElements}
+              passState={passState}
+              onClick={handleModalOpen(id)}
+            />
+          ))}
+        </>
+      )}
+    </section>
+  );
+};
+
+export default BoardTable;

frontend/components/interview/Board.tsx

@@ -8,8 +8,9 @@ import { useAtom } from "jotai";
 import { interViewApplicantIdState } from "@/src/stores/interview/Interview.atom";
 import { useSearchParams } from "next/navigation";
 import { getInterviewRecordByPageWithOrder } from "@/src/apis/interview";
-import { ORDER_MENU } from "@/src/constants";
+import { CHARACTERS, ORDER_MENU } from "@/src/constants";
 import { useSearchQuery } from "@/src/hooks/useSearchQuery";
+import { removeAll } from "@/src/functions/replacer";
 
 interface InterviewBoardProps {
   generation: string;
@@ -34,7 +35,7 @@ const InterviewBoard = ({ generation }: InterviewBoardProps) => {
     });
   };
 
-  const { data, isLoading } = useQuery({
+  const { data, status } = useQuery({
     queryKey: ["allInterviewRecord", pageIndex, order, generation],
     queryFn: () =>
       getInterviewRecordByPageWithOrder({
@@ -44,29 +45,35 @@ const InterviewBoard = ({ generation }: InterviewBoardProps) => {
       }),
   });
 
-  if (!data || isLoading) {
+  if (status === "loading") {
     return <div>loading...</div>;
   }
 
-  const { records } = data;
+  if (status === "error") {
+    return <div>에러가 발생하였습니다. 잠시 후 다시 시도해보세요.</div>;
+  }
 
-  const boardData = records.map((value) => {
+  const boardData = data.records.map((value) => {
     return {
       id: value.applicantId,
       title: value.name,
       subElements: [
-        value.field1.split('"').join(""),
-        value.field2.split('"').join(""),
-        `${value.grade.split('"').join("")} ${value.semester
-          .split('"')
-          .join("")}`,
+        removeAll(value.field1, CHARACTERS.DOUBLE_QUOTE).concat(
+          CHARACTERS.SLASH,
+          removeAll(value.field2, CHARACTERS.DOUBLE_QUOTE)
+        ),
+        removeAll(value.grade, CHARACTERS.DOUBLE_QUOTE).concat(
+          CHARACTERS.SPACE,
+          removeAll(value.semester, CHARACTERS.DOUBLE_QUOTE)
+        ),
       ],
+      passState: value.state.passState,
     };
   });
 
   return (
     <Board
-      wapperClassname="divide-x"
+      wrapperClassname="divide-x"
       boardData={createSearchData() ?? boardData}
       onClick={(id) => onClick(id)}
     >

frontend/components/passState/PassStateLabel.tsx

@@ -0,0 +1,27 @@
+import { ApplicantPassState } from "../../src/apis/kanban";
+import { getApplicantPassState } from "../../src/functions/formatter";
+import Txt from "../common/Txt.component";
+
+interface PassStateLabelProps {
+  passState: ApplicantPassState;
+}
+
+// TODO: if you want more reusable component, it's should get addtional prop that custom css style.
+const PassStateLabel = ({ passState }: PassStateLabelProps) => {
+  return (
+    <Txt
+      className="w-full flex-1 last:text-right truncate"
+      color={
+        passState === "non-passed"
+          ? "red"
+          : passState === "final-passed"
+          ? "blue"
+          : "black"
+      }
+    >
+      {getApplicantPassState(passState)}
+    </Txt>
+  );
+};
+
+export default PassStateLabel;

frontend/src/apis/interview/index.ts

@@ -1,5 +1,6 @@
 import { https } from "@/src/functions/axios";
 import { PageInfo } from "../applicant";
+import { type ApplicantPassState } from "../kanban";
 
 export interface RecordsRes {
   applicantId: string;
@@ -12,6 +13,10 @@ export interface RecordsRes {
   grade: string;
   semester: string;
   modifiedAt: string;
+  // TODO: 더 범용적이고 재사용 가능하게 타입 선언이 필요함.
+  state: {
+    passState: ApplicantPassState;
+  };
 }
 
 interface RecordsByPageRes {

frontend/src/constants/index.ts

@@ -177,3 +177,9 @@ export const needValidatePath = [
 ];
 
 export const MAX_TEXT_LENGTH = 1000;
+
+export const CHARACTERS = {
+  DOUBLE_QUOTE: '"',
+  SLASH: "/",
+  SPACE: " ",
+};

frontend/src/functions/replacer.ts

@@ -39,3 +39,6 @@ export const replacer = (value: string, type: ReplacerType) => {
 
 export const replaceTwoString = (original: number, by: string = "0") =>
   original.toString().padStart(2, by);
+
+export const removeAll = (str: string, pattern: string | RegExp) =>
+  str.replaceAll(pattern, "");