Merge pull request #71 from CSID-DGU/frontend/feature/add-exam

FE: [feat] 시험 레포트 페이지 ui 구현 #70

src/frontend/eyesee-admin/src/app/report/[examId]/page.tsx

@@ -0,0 +1,20 @@
+import DashBoardSection from "@/components/dashBoard/DashBoardSection";
+import UserSection from "@/components/dashBoard/UserSection";
+import ReportSection from "@/components/report/ReportSection";
+import { testSesstionData } from "@/types/user";
+
+const ReportPage = () => {
+  // TODO: 서버 데이터 연결
+  const sessionData = testSesstionData;
+
+  return (
+    <div className="flex min-h-screen w-screen bg-[##0E1D3C]">
+      <UserSection sessionData={sessionData} />
+      <DashBoardSection sesstionData={sessionData}>
+        <ReportSection />
+      </DashBoardSection>
+    </div>
+  );
+};
+
+export default ReportPage;

src/frontend/eyesee-admin/src/components/dashBoard/DashBoardSection.tsx

@@ -12,9 +12,13 @@ import TestInfo from "./TestInfo";
 
 type DashBoardSectionProps = {
   sesstionData: testSesstion;
+  children?: React.ReactNode;
 };
 
-const DashBoardSection = ({ sesstionData }: DashBoardSectionProps) => {
+const DashBoardSection = ({
+  sesstionData,
+  children,
+}: DashBoardSectionProps) => {
   const [column, setColumn] = useState(5);
   const [row, setRow] = useState(
     Math.ceil(sesstionData.examStudentNumber / column)
@@ -47,6 +51,7 @@ const DashBoardSection = ({ sesstionData }: DashBoardSectionProps) => {
           <PeopleIcon onClick={() => setCodeModalOpen(true)} />
           <RowMoreIcon />
         </TestInfo>
+        {children}
         <div
           className="grid gap-5 justify-center items-center"
           style={{

src/frontend/eyesee-admin/src/components/mypage/TestCard.tsx

@@ -5,6 +5,7 @@ import { testType } from "@/types/test";
 import React from "react";
 import EditIcon from "@/assets/icons/EditIcon.svg";
 import BoardIcon from "@/assets/icons/BoardIcon.svg";
+import ReportIcon from "@/assets/icons/ReportIcon.svg";
 import { useRouter } from "next/navigation";
 
 type TestCardProps = {
@@ -16,40 +17,50 @@ const TestCard = ({ test, type }: TestCardProps) => {
   const router = useRouter();
 
   // 아이콘과 경로 값을 반환하는 함수
-  const testMap = (type: string) => {
-    if (type === testState.BEFORE) {
-      return {
-        icon: <EditIcon />,
-        path: `/edit-exam/${test.examId}`,
-        label: "Edit",
-      };
+  const buttonComponent = (type: string) => {
+    if (type === testState.DONE) {
+      return (
+        <button
+          onClick={() => router.push(`/report/${test.examId}`)}
+          className="flex items-center gap-2"
+        >
+          <ReportIcon />
+        </button>
+      );
     } else {
-      return {
-        icon: <BoardIcon />,
-        path: `/dashboard/${test.examId}`,
-        label: "Dashboard",
-      };
+      return (
+        <div className="flex gap-[6px]">
+          <button
+            onClick={() => router.push(`/edit-exam/${test.examId}`)}
+            className="flex items-center gap-2"
+          >
+            <EditIcon />
+          </button>
+          <button
+            onClick={() => router.push(`/dashboard/${test.examId}`)}
+            className="flex items-center gap-2"
+          >
+            <BoardIcon />
+          </button>
+        </div>
+      );
     }
   };
 
-  // testMap 함수 호출 결과를 저장
-  const { icon, path } = testMap(type);
-
   return (
     <div
       className={`${
-        type === testState.BEFORE ? "bg-blueGradient" : "bg-redGradient"
+        type === testState.BEFORE
+          ? "bg-blueGradient"
+          : type === testState.INPROGRESS
+          ? "bg-redGradient"
+          : "bg-grayGradient"
       } px-8 py-4 rounded-[20px] w-[320px]`}
     >
       <div className="flex flex-col py-5 gap-4">
         <div className="flex justify-between items-center">
           <h1 className="text-2xl font-medium text-white">{test.examName}</h1>
-          <button
-            onClick={() => router.push(path)}
-            className="flex items-center gap-2"
-          >
-            {icon}
-          </button>
+          {buttonComponent(type)}
         </div>
         <div className="flex justify-between items-center">
           <span className="text-white">시험 코드 :</span>

src/frontend/eyesee-admin/src/components/report/ReportSection.tsx

@@ -0,0 +1,45 @@
+import ExcelIcon from "@/assets/images/Excel.svg";
+
+const ReportSection = () => {
+  return (
+    <div className="relative w-full mb-20 flex justify-between gap-20">
+      <div className="cursor-pointer absolute bottom-0 flex items-center gap-3">
+        <ExcelIcon />
+        <p className="text-[20px]">엑셀 다운로드</p>
+      </div>
+      <div className="w-[50%] h-full text-[2.5rem] font-bold text-white">
+        <p className="">2024년 11월 27일</p>
+        <p className="text-[#16A34A]">융합캡스톤디자인 중간시험</p>
+        <p>부정행위 탐지 결과</p>
+      </div>
+      <div className="[w-50%] flex flex-col h-full">
+        <div className="w-full flex gap-20 py-3 items-center justify-between text-[20px] text-bold border-b border-white">
+          <div>총 탐지된 부정행위 건수</div>
+          <div>75건</div>
+        </div>
+        <div className="w-full flex gap-20 py-3 items-center justify-between text-[20px] text-bold border-b border-white">
+          <div>부정행위 탐지 수험자 수</div>
+          <div>15명</div>
+        </div>
+        <div className="w-full flex gap-20 py-3 items-center justify-between text-[20px] text-bold border-b border-white">
+          <div>평균 부정행위 탐지 건수</div>
+          <div>5건/수험자</div>
+        </div>
+        <div className="w-full flex gap-20 py-3 items-center justify-between text-[20px] text-bold border-b border-white">
+          <div>최다 부정행위 탐지 수험자</div>
+          <div>학번: 2022113107, 횟수: 10건</div>
+        </div>
+        <div className="w-full flex gap-20 py-3 items-center justify-between text-[20px] text-bold border-b border-white">
+          <div>부정행위 탐지율</div>
+          <div>30%</div>
+        </div>
+        <div className="w-full flex gap-20 py-3 items-center justify-between text-[20px] text-bold border-b border-white">
+          <div>부정행위 유형별 통계</div>
+          <div>시선: 50건, 자리이탈: 10건</div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ReportSection;

src/frontend/eyesee-admin/tailwind.config.ts

@@ -17,6 +17,7 @@ const config: Config = {
         bgGradient: "linear-gradient(180deg, #000 0%, #242142 100%)",
         blueGradient: "linear-gradient(180deg, #0E1D3C 0%, #000 100%)",
         redGradient: "linear-gradient(180deg, #0E1D3C 0%, #410C0C 100%)",
+        grayGradient: "linear-gradient(180deg, #0E1D3C 0%, #2A2A2A 100%)",
       },
       boxShadow: {
         dashboordShadow: "0px -5px 10px 0px rgba(0, 0, 0, 0.25)",