FE: [feat] API 중간발표 get 요청 연결 #22

CSID-DGU · Nov 4, 2024 · 5cc413e · 5cc413e
1 parent 03b6d34
commit 5cc413e
Show file tree

Hide file tree

Showing 16 changed files with 218 additions and 97 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>