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

frontend/components/applicant/Board.tsx

@@ -77,7 +77,7 @@ const ApplicantBoard = ({ generation }: ApplicantBoardProps) => {
 
   return (
     <Board
-      wapperClassname="divide-x"
+      wrapperClassname="divide-x"
       boardData={createSearchData(true) ?? boardData}
       onClick={onClick}
     >

frontend/components/common/board/Board.tsx

@@ -2,14 +2,12 @@
 
 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 useModalState from "../../../src/hooks/useModalState";
+import BoardModal from "./BoardModal";
+import BoardTable from "./BoardTable";
 
-interface BoardData {
+export interface BoardData {
   id: string;
   title: string;
   subElements: string[];
@@ -18,33 +16,14 @@ interface BoardData {
 
 interface BoardProps extends PropsWithChildren {
   onClick?: (id: string) => void;
-  wapperClassname?: string;
+  wrapperClassname?: string;
   boardData: BoardData[];
 }
 
-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;
-
 const Board = ({
   children,
   onClick,
-  wapperClassname,
+  wrapperClassname,
   boardData,
 }: BoardProps) => {
   const { isOpen, openModal, closeModal } = useModalState();
@@ -55,40 +34,17 @@ const Board = ({
   };
 
   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={handleModalOpen(item.id)}
-            />
-          ))}
-        </>
-      )}
-      <Modal
-        style={modalStyle}
+    <>
+      <BoardTable boardRows={boardData} handleModalOpen={handleModalOpen} />
+      <BoardModal
         isOpen={isOpen}
         onRequestClose={closeModal}
         ariaHideApp={false}
+        wrapperClassname={wrapperClassname}
       >
-        <button className="absolute z-10" onClick={closeModal}>
-          <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/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,30 @@
+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((item) => (
+            <BoardCell
+              key={item.id}
+              title={item.title}
+              subElements={item.subElements}
+              onClick={handleModalOpen(item.id)}
+            />
+          ))}
+        </>
+      )}
+    </section>
+  );
+};
+
+export default BoardTable;

frontend/components/interview/Board.tsx

@@ -70,7 +70,7 @@ const InterviewBoard = ({ generation }: InterviewBoardProps) => {
 
   return (
     <Board
-      wapperClassname="divide-x"
+      wrapperClassname="divide-x"
       boardData={createSearchData() ?? boardData}
       onClick={(id) => onClick(id)}
     >