diff --git a/frontend/components/applicant/Board.tsx b/frontend/components/applicant/Board.tsx
index f24daec..56fdf87 100644
--- a/frontend/components/applicant/Board.tsx
+++ b/frontend/components/applicant/Board.tsx
@@ -3,7 +3,6 @@
 import Board from "@/components/common/board/Board";
 import { getApplicantByPageWithGeneration } from "@/src/apis/applicant";
 import ApplicantDetailRight from "./DetailRight.component";
-import ApplicantDetailLeft from "./DetailLeft.component";
 import { useState } from "react";
 import { ApplicantReq } from "@/src/apis/application";
 import { applicantDataFinder } from "@/src/functions/finder";
@@ -12,6 +11,8 @@ import { useSearchParams } from "next/navigation";
 import { ORDER_MENU } from "@/src/constants";
 import { useSearchQuery } from "@/src/hooks/useSearchQuery";
 import { type ApplicantPassState } from "../../src/apis/kanban";
+import ApplicantDetailLeft from "./_applicant/ApplicantDetailLeft";
+import { findApplicantState } from "@/src/utils/applicant";
 
 interface ApplicantBoardProps {
   generation: string;
@@ -74,9 +75,10 @@ const ApplicantBoard = ({ generation }: ApplicantBoardProps) => {
             Number(applicantDataFinder(value, "uploadDate"))
           ).toLocaleString("ko-KR", { dateStyle: "short" }),
     ],
-    passState: `${
-      applicantDataFinder(value, "passState").passState
-    }` as ApplicantPassState,
+    passState: `${applicantDataFinder(
+      value,
+      "passState"
+    )}` as ApplicantPassState,
   }));
 
   return (
diff --git a/frontend/src/apis/applicant/index.ts b/frontend/src/apis/applicant/index.ts
index 355e65d..85f31ac 100644
--- a/frontend/src/apis/applicant/index.ts
+++ b/frontend/src/apis/applicant/index.ts
@@ -12,6 +12,46 @@ interface AllApplicantReq {
   [string: string]: string;
 }
 
+interface ApplicantByPageReqAnswer {
+  field: string;
+  field1: string;
+  field2: string;
+  name: string;
+  contacted: string;
+  classOf: string;
+  registered: string;
+  grade: string;
+  semester: string;
+  major: string;
+  doubleMajor: string;
+  minor: string;
+  activity: string;
+  reason: string;
+  future: string;
+  experience: string;
+  experienceTextarea: string;
+  restoration: string;
+  deep: string;
+  collaboration: string;
+  studyPlan: string;
+  portfolio: string;
+  fileUrl: string;
+  email: string;
+  check: string;
+  personalInformationAgree: string;
+  personalInformationAgreeForPortfolio: string;
+  generation: string;
+  uploadDate: string;
+  channel: string;
+  timeline: number[];
+  id: string;
+  year: number;
+  created_at: string;
+  passState: {
+    passState: ApplicantPassState;
+  };
+}
+
 export const getApplicantByIdWithField = async (
   id: string,
   fields?: string[]
@@ -36,9 +76,29 @@ export interface PageInfo {
   boardLimit: number;
 }
 
+function formatApplicantsDataToApplicantReq(
+  applicants: ApplicantByPageReqAnswer[]
+) {
+  return applicants.map(
+    (applicant) =>
+      Object.keys(applicant).map((key) => {
+        if (key === "passState") {
+          return {
+            name: "passState",
+            answer: applicant.passState.passState,
+          };
+        }
+        return {
+          name: key,
+          answer: applicant[key as keyof ApplicantByPageReqAnswer],
+        };
+      }) as ApplicantReq[]
+  );
+}
+
 interface ApplicantByPageReq {
   pageInfo: PageInfo;
-  answers: AllApplicantReq[];
+  answers: ApplicantByPageReqAnswer[];
 }
 
 export const getApplicantByPageWithGeneration = async (
@@ -54,12 +114,7 @@ export const getApplicantByPageWithGeneration = async (
 
   return {
     maxPage: pageInfo.endPage,
-    applicants: answers.map((applicant) =>
-      Object.keys(applicant).map((key) => ({
-        name: key,
-        answer: applicant[key],
-      }))
-    ),
+    applicants: formatApplicantsDataToApplicantReq(answers),
   };
 };