diff --git a/src/frontend/eyesee-admin/package.json b/src/frontend/eyesee-admin/package.json
index c546895..5b8f440 100644
--- a/src/frontend/eyesee-admin/package.json
+++ b/src/frontend/eyesee-admin/package.json
@@ -6,7 +6,8 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint",
+    "type:check": "tsc --noEmit"
   },
   "dependencies": {
     "@tanstack/react-query": "^5.59.17",
diff --git a/src/frontend/eyesee-admin/src/apis/dashBoard.ts b/src/frontend/eyesee-admin/src/apis/dashBoard.ts
index 821764e..1d61f87 100644
--- a/src/frontend/eyesee-admin/src/apis/dashBoard.ts
+++ b/src/frontend/eyesee-admin/src/apis/dashBoard.ts
@@ -1,10 +1,10 @@
-import { testType } from "@/types/test";
 import { api } from ".";
 import { testSesstion } from "@/types/user";
+import { RESTYPE } from "@/types/common";
 
 export const getDashboardData = async (
   examId: number
-): Promise<testSesstion> => {
+): Promise<RESTYPE<testSesstion>> => {
   const response = await api.get(`/exams/${examId}/sessions`);
   return response.data;
 };
diff --git a/src/frontend/eyesee-admin/src/apis/examList.ts b/src/frontend/eyesee-admin/src/apis/examList.ts
index 1bbc29a..e78c691 100644
--- a/src/frontend/eyesee-admin/src/apis/examList.ts
+++ b/src/frontend/eyesee-admin/src/apis/examList.ts
@@ -1,7 +1,18 @@
 import { testType } from "@/types/test";
 import { api } from ".";
+import { RESTYPE } from "@/types/common";
 
-export const getBeforeExamList = async (): Promise<testType> => {
+export const getBeforeExamList = async (): Promise<RESTYPE<testType[]>> => {
   const response = await api.get("/exams/before");
   return response.data;
 };
+
+export const getInProgressExamList = async (): Promise<RESTYPE<testType[]>> => {
+  const response = await api.get("/exams/in-progress");
+  return response.data;
+};
+
+export const getDoneExamList = async (): Promise<RESTYPE<testType[]>> => {
+  const response = await api.get("/exams/done");
+  return response.data;
+};
diff --git a/src/frontend/eyesee-admin/src/apis/userDetail.ts b/src/frontend/eyesee-admin/src/apis/userDetail.ts
index 8848ac5..e60985a 100644
--- a/src/frontend/eyesee-admin/src/apis/userDetail.ts
+++ b/src/frontend/eyesee-admin/src/apis/userDetail.ts
@@ -1,12 +1,11 @@
-import { testType } from "@/types/test";
 import { api } from ".";
-import { testSesstion } from "@/types/user";
 import { timeLineType } from "@/types/timeLine";
+import { RESTYPE } from "@/types/common";
 
 export const getUserDetail = async (
-  examId: number,
-  userId: number
-): Promise<timeLineType> => {
+  examId: string,
+  userId: string
+): Promise<RESTYPE<timeLineType>> => {
   const response = await api.get(`/exams/${examId}/sessions/${userId}`);
   return response.data;
 };
diff --git a/src/frontend/eyesee-admin/src/app/dashboard/[examId]/[userId]/page.tsx b/src/frontend/eyesee-admin/src/app/dashboard/[examId]/[userId]/page.tsx
index ad745bc..ded1a59 100644
--- a/src/frontend/eyesee-admin/src/app/dashboard/[examId]/[userId]/page.tsx
+++ b/src/frontend/eyesee-admin/src/app/dashboard/[examId]/[userId]/page.tsx
@@ -3,42 +3,59 @@
 import TestInfo from "@/components/dashBoard/TestInfo";
 import CheatingVideo from "@/components/userDetail/CheatingVideo";
 import TimeLine from "@/components/userDetail/TimeLine";
-import { dummyTimeLineData } from "@/types/timeLine";
-import React, { useState } from "react";
+import { useUserDetail } from "@/hooks/api/useUserDetail";
+import { timeLineType } from "@/types/timeLine";
+import { useParams } from "next/navigation";
+import React, { useEffect, useState } from "react";
 
 const UserDetailPage = () => {
-  const userDetailData = dummyTimeLineData;
+  const [userDetailData, setUserDetailData] = useState<timeLineType>();
   const [vidieoNum, setVideoNum] = useState(0);
 
+  const { userId, examId } = useParams();
+  const { data } = useUserDetail(examId as string, userId as string);
+
+  useEffect(() => {
+    if (data) {
+      setUserDetailData(data.data);
+    }
+  }, [data]);
+
   return (
-    <div className="flex w-screen h-screen bg-[#0E1D3C]">
-      <TimeLine timeLineData={userDetailData} setVideoNum={setVideoNum} />
-      <div className="grow text-white p-10">
-        <TestInfo examName="융합캡스톤디자인 중간시험" examDuration={120} />
-        <div>
-          <CheatingVideo
-            cheatingVideo={userDetailData.cheatingVideos[vidieoNum]}
-            cheatingType={
-              userDetailData.cheatingStatistics[vidieoNum].cheatingType
-            }
-            cheatingCounts={
-              userDetailData.cheatingStatistics[vidieoNum].cheatingCount
-            }
-          />
-          <div className="flex gap-5 py-5">
-            {userDetailData.cheatingVideos.map((video, index) => (
-              <div
-                key={index}
-                onClick={() => setVideoNum(index)}
-                className="h-28 max-w-48 rounded-sm overflow-hidden"
-              >
-                <video src={video.filepath} />
+    <>
+      {userDetailData ? (
+        <div className="flex w-screen h-screen bg-[#0E1D3C]">
+          <TimeLine timeLineData={userDetailData} setVideoNum={setVideoNum} />
+          <div className="grow text-white p-10">
+            <TestInfo examName="융합캡스톤디자인 중간시험" examDuration={120} />
+            <div>
+              <CheatingVideo
+                cheatingVideo={userDetailData.cheatingVideos[vidieoNum]}
+                cheatingType={
+                  userDetailData.cheatingStatistics[vidieoNum].cheatingTypeName
+                }
+                cheatingCounts={
+                  userDetailData.cheatingStatistics[vidieoNum].cheatingCount
+                }
+              />
+              <div className="flex gap-5 py-5">
+                {userDetailData.cheatingVideos.map((video, index) => (
+                  <div
+                    key={index}
+                    onClick={() => setVideoNum(index)}
+                    className="h-28 max-w-48 rounded-sm overflow-hidden"
+                  >
+                    <video src={video.filepath} />
+                  </div>
+                ))}
               </div>
-            ))}
+            </div>
           </div>
         </div>
-      </div>
-    </div>
+      ) : (
+        <div>로딩 중</div>
+      )}
+    </>
   );
 };
 
diff --git a/src/frontend/eyesee-admin/src/app/dashboard/[examId]/page.tsx b/src/frontend/eyesee-admin/src/app/dashboard/[examId]/page.tsx
index 7fdfb90..a0b95aa 100644
--- a/src/frontend/eyesee-admin/src/app/dashboard/[examId]/page.tsx
+++ b/src/frontend/eyesee-admin/src/app/dashboard/[examId]/page.tsx
@@ -12,8 +12,7 @@ const DashBoardPage = () => {
 
   useEffect(() => {
     if (data) {
-      setSessionData(data);
-      console.log(data);
+      setSessionData(data.data);
     }
   }, [data]);
 
diff --git a/src/frontend/eyesee-admin/src/components/dashBoard/DashBoardSection.tsx b/src/frontend/eyesee-admin/src/components/dashBoard/DashBoardSection.tsx
index 0c93287..734119c 100644
--- a/src/frontend/eyesee-admin/src/components/dashBoard/DashBoardSection.tsx
+++ b/src/frontend/eyesee-admin/src/components/dashBoard/DashBoardSection.tsx
@@ -15,9 +15,9 @@ type DashBoardSectionProps = {
 };
 
 const DashBoardSection = ({ sesstionData }: DashBoardSectionProps) => {
-  const [row, setRow] = useState(5);
-  const [column, setColumn] = useState(
-    Math.ceil(sesstionData.examStudentNumber / row)
+  const [column, setColumn] = useState(5);
+  const [row, setRow] = useState(
+    Math.ceil(sesstionData.examStudentNumber / column)
   );
 
   const [tableModalOpen, setTableModalOpen] = useState(false);
diff --git a/src/frontend/eyesee-admin/src/components/mypage/BeforeSection.tsx b/src/frontend/eyesee-admin/src/components/mypage/BeforeSection.tsx
index 6bc7307..b7771c8 100644
--- a/src/frontend/eyesee-admin/src/components/mypage/BeforeSection.tsx
+++ b/src/frontend/eyesee-admin/src/components/mypage/BeforeSection.tsx
@@ -1,22 +1,46 @@
-import { beforeTestData } from "@/types/test";
+"use client";
+
+import { testType } from "@/types/test";
 import TestCard from "./TestCard";
 import { testState } from "@/constant/test";
+import { useBeforeExam } from "@/hooks/api/useExamList";
+import { useEffect, useState } from "react";
 
 const BeforeSection = () => {
+  const { data } = useBeforeExam();
+  const [beforeTestData, setBeforeTestData] = useState<testType[]>();
+
+  useEffect(() => {
+    if (data) {
+      setBeforeTestData(data.data);
+    }
+  }, [data]);
+
   return (
-    <div className="bg-[rgba(14,29,60,0.20)] p-4 rounded-lg">
-      <div className="flex items-center gap-2.5 p-2.5 pb-5">
-        <span className="text-[#6f6f6f] text-lg font-normal">Before</span>
-        <span className="text-[#6f6f6f] text-lg font-semibold">
-          {beforeTestData.length}
-        </span>
-      </div>
-      <div className="flex flex-col items-center gap-4">
-        {beforeTestData.map((test) => (
-          <TestCard test={test} type={testState.BEFORE} />
-        ))}
-      </div>
-    </div>
+    <>
+      {beforeTestData ? (
+        <div className="bg-[rgba(14,29,60,0.20)] p-4 rounded-lg">
+          <div className="flex items-center gap-2.5 p-2.5 pb-5">
+            <span className="text-[#6f6f6f] text-lg font-normal">Before</span>
+            <span className="text-[#6f6f6f] text-lg font-semibold">
+              {beforeTestData.length}
+            </span>
+          </div>
+          <div className="flex flex-col items-center gap-4">
+            {beforeTestData.length > 0 &&
+              beforeTestData.map((test) => (
+                <TestCard
+                  key={test.examId}
+                  test={test}
+                  type={testState.BEFORE}
+                />
+              ))}
+          </div>
+        </div>
+      ) : (
+        <div>로딩 중</div>
+      )}
+    </>
   );
 };
 
diff --git a/src/frontend/eyesee-admin/src/components/mypage/DoneSection.tsx b/src/frontend/eyesee-admin/src/components/mypage/DoneSection.tsx
index 5b3ae1b..e037f85 100644
--- a/src/frontend/eyesee-admin/src/components/mypage/DoneSection.tsx
+++ b/src/frontend/eyesee-admin/src/components/mypage/DoneSection.tsx
@@ -1,22 +1,41 @@
-import { beforeTestData } from "@/types/test";
+"use client";
+
+import { testType } from "@/types/test";
 import TestCard from "./TestCard";
 import { testState } from "@/constant/test";
+import { useDoneExam } from "@/hooks/api/useExamList";
+import { useEffect, useState } from "react";
 
 const DoneSection = () => {
+  const { data } = useDoneExam();
+  const [doneData, setDoneData] = useState<testType[]>();
+
+  useEffect(() => {
+    if (data) {
+      setDoneData(data.data);
+    }
+  }, [data]);
+
   return (
-    <div className="bg-[rgba(14,29,60,0.20)] p-4 rounded-lg">
-      <div className="flex items-center gap-2.5 p-2.5 pb-5">
-        <span className="text-[#6f6f6f] text-lg font-normal">Done</span>
-        <span className="text-[#6f6f6f] text-lg font-semibold">
-          {beforeTestData.length}
-        </span>
-      </div>
-      <div className="flex flex-col items-center gap-4">
-        {beforeTestData.map((test) => (
-          <TestCard test={test} type={testState.DONE} />
-        ))}
-      </div>
-    </div>
+    <>
+      {doneData ? (
+        <div className="bg-[rgba(14,29,60,0.20)] p-4 rounded-lg">
+          <div className="flex items-center gap-2.5 p-2.5 pb-5">
+            <span className="text-[#6f6f6f] text-lg font-normal">Done</span>
+            <span className="text-[#6f6f6f] text-lg font-semibold">
+              {doneData.length}
+            </span>
+          </div>
+          <div className="flex flex-col items-center gap-4">
+            {doneData.map((test) => (
+              <TestCard key={test.examId} test={test} type={testState.DONE} />
+            ))}
+          </div>
+        </div>
+      ) : (
+        <div>로딩 중</div>
+      )}
+    </>
   );
 };
 
diff --git a/src/frontend/eyesee-admin/src/components/mypage/InProgressSection.tsx b/src/frontend/eyesee-admin/src/components/mypage/InProgressSection.tsx
index 3df5dd2..26868cd 100644
--- a/src/frontend/eyesee-admin/src/components/mypage/InProgressSection.tsx
+++ b/src/frontend/eyesee-admin/src/components/mypage/InProgressSection.tsx
@@ -1,22 +1,47 @@
-import { beforeTestData } from "@/types/test";
+"use client";
+
+import { testType } from "@/types/test";
 import TestCard from "./TestCard";
 import { testState } from "@/constant/test";
+import { useEffect, useState } from "react";
+import { useInProgressExam } from "@/hooks/api/useExamList";
 
 const InProgressSection = () => {
+  const { data } = useInProgressExam();
+  const [inProgressData, setInProgressData] = useState<testType[]>();
+
+  useEffect(() => {
+    if (data) {
+      setInProgressData(data.data);
+    }
+  }, [data]);
+
   return (
-    <div className="bg-[rgba(14,29,60,0.20)] p-4 rounded-lg">
-      <div className="flex items-center gap-2.5 p-2.5 pb-5">
-        <span className="text-[#6f6f6f] text-lg font-normal">In Progress</span>
-        <span className="text-[#6f6f6f] text-lg font-semibold">
-          {beforeTestData.length}
-        </span>
-      </div>
-      <div className="flex flex-col items-center gap-4">
-        {beforeTestData.map((test) => (
-          <TestCard test={test} type={testState.INPROGRESS} />
-        ))}
-      </div>
-    </div>
+    <>
+      {inProgressData ? (
+        <div className="bg-[rgba(14,29,60,0.20)] p-4 rounded-lg">
+          <div className="flex items-center gap-2.5 p-2.5 pb-5">
+            <span className="text-[#6f6f6f] text-lg font-normal">
+              In Progress
+            </span>
+            <span className="text-[#6f6f6f] text-lg font-semibold">
+              {inProgressData.length}
+            </span>
+          </div>
+          <div className="flex flex-col items-center gap-4">
+            {inProgressData.map((test) => (
+              <TestCard
+                key={test.examId}
+                test={test}
+                type={testState.INPROGRESS}
+              />
+            ))}
+          </div>
+        </div>
+      ) : (
+        <div>로딩 중</div>
+      )}
+    </>
   );
 };
 
diff --git a/src/frontend/eyesee-admin/src/components/userDetail/CheatingVideo.tsx b/src/frontend/eyesee-admin/src/components/userDetail/CheatingVideo.tsx
index 5f0b4c3..5a56456 100644
--- a/src/frontend/eyesee-admin/src/components/userDetail/CheatingVideo.tsx
+++ b/src/frontend/eyesee-admin/src/components/userDetail/CheatingVideo.tsx
@@ -15,7 +15,8 @@ const CheatingVideo = ({
   return (
     <div className="text-white">
       <div className="bg-[rgba(58,64,97,0.7)] text-xl px-6 py-4 rounded-t-lg flex justify-between items-center">
-        ⏳ {cheatingVideo.startTime} ~ {cheatingVideo.endTime}
+        ⏳ {cheatingVideo.startTime.slice(11)} ~{" "}
+        {cheatingVideo.endTime.slice(11)}
         <button className="bg-[#EF4444] px-3 py-2 flex justify-center items-center rounded-lg text-base">
           {cheatingType} {cheatingCounts}회
         </button>
diff --git a/src/frontend/eyesee-admin/src/components/userDetail/TimeLine.tsx b/src/frontend/eyesee-admin/src/components/userDetail/TimeLine.tsx
index 6b7afec..2c15dd6 100644
--- a/src/frontend/eyesee-admin/src/components/userDetail/TimeLine.tsx
+++ b/src/frontend/eyesee-admin/src/components/userDetail/TimeLine.tsx
@@ -34,9 +34,10 @@ const TimeLine = ({ timeLineData, setVideoNum }: TimeLineProps) => {
           >
             <CircleIcon />
             <div className="text-xl text-[#000]">
-              <div>{cheating.DetectedTime.slice(-8)}</div>
+              <div>{cheating.detectedTime}</div>
+              {/* <div>{cheating.DetectedTime.slice(-8)}</div> */}
               <div>
-                {cheating.cheatingType} {cheating.cheatingCount}회 감지
+                {cheating.cheatingTypeName} {cheating.cheatingCount}회 감지
               </div>
             </div>
           </div>
diff --git a/src/frontend/eyesee-admin/src/hooks/api/useExamList.ts b/src/frontend/eyesee-admin/src/hooks/api/useExamList.ts
index 42cc579..9b3b917 100644
--- a/src/frontend/eyesee-admin/src/hooks/api/useExamList.ts
+++ b/src/frontend/eyesee-admin/src/hooks/api/useExamList.ts
@@ -1,4 +1,8 @@
-import { getBeforeExamList } from "@/apis/examList";
+import {
+  getBeforeExamList,
+  getDoneExamList,
+  getInProgressExamList,
+} from "@/apis/examList";
 import { useQuery } from "@tanstack/react-query";
 
 export const useBeforeExam = () => {
@@ -7,3 +11,17 @@ export const useBeforeExam = () => {
     queryFn: getBeforeExamList,
   });
 };
+
+export const useInProgressExam = () => {
+  return useQuery({
+    queryKey: ["exam", "inProgress"],
+    queryFn: getInProgressExamList,
+  });
+};
+
+export const useDoneExam = () => {
+  return useQuery({
+    queryKey: ["exam", "done"],
+    queryFn: getDoneExamList,
+  });
+};
diff --git a/src/frontend/eyesee-admin/src/hooks/api/useUserDetail.ts b/src/frontend/eyesee-admin/src/hooks/api/useUserDetail.ts
index 34d169a..ac1773d 100644
--- a/src/frontend/eyesee-admin/src/hooks/api/useUserDetail.ts
+++ b/src/frontend/eyesee-admin/src/hooks/api/useUserDetail.ts
@@ -1,7 +1,7 @@
 import { getUserDetail } from "@/apis/userDetail";
 import { useQuery } from "@tanstack/react-query";
 
-export const useUserDetail = (examId: number, userId: number) => {
+export const useUserDetail = (examId: string, userId: string) => {
   return useQuery({
     queryKey: ["userDetail", userId],
     queryFn: () => getUserDetail(examId, userId),
diff --git a/src/frontend/eyesee-admin/src/types/common.ts b/src/frontend/eyesee-admin/src/types/common.ts
new file mode 100644
index 0000000..d6fe0f5
--- /dev/null
+++ b/src/frontend/eyesee-admin/src/types/common.ts
@@ -0,0 +1,6 @@
+export type RESTYPE<T> = {
+  statusCode: number;
+  code: string;
+  message: string;
+  data: T;
+};
diff --git a/src/frontend/eyesee-admin/src/types/timeLine.ts b/src/frontend/eyesee-admin/src/types/timeLine.ts
index 72a7137..f8b2756 100644
--- a/src/frontend/eyesee-admin/src/types/timeLine.ts
+++ b/src/frontend/eyesee-admin/src/types/timeLine.ts
@@ -1,8 +1,8 @@
 export type cheatingStatistics = {
   cheatingStatisticsId: number;
-  cheatingType: string;
+  cheatingTypeName: string;
   cheatingCount: number;
-  DetectedTime: string;
+  detectedTime: string;
 };
 
 export type cheatingVideo = {
@@ -29,21 +29,21 @@ export const dummyTimeLineData: timeLineType = {
   cheatingStatistics: [
     {
       cheatingStatisticsId: 1,
-      cheatingType: "휴대폰 사용",
+      cheatingTypeName: "휴대폰 사용",
       cheatingCount: 2,
-      DetectedTime: "2023-11-02T10:20:00",
+      detectedTime: "2023-11-02T10:20:00",
     },
     {
       cheatingStatisticsId: 2,
-      cheatingType: "시선 이탈",
+      cheatingTypeName: "시선 이탈",
       cheatingCount: 5,
-      DetectedTime: "2023-11-02T10:25:00",
+      detectedTime: "2023-11-02T10:25:00",
     },
     {
       cheatingStatisticsId: 3,
-      cheatingType: "종이 사용",
+      cheatingTypeName: "종이 사용",
       cheatingCount: 1,
-      DetectedTime: "2023-11-02T10:30:00",
+      detectedTime: "2023-11-02T10:30:00",
     },
   ],
   cheatingVideos: [