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

FE: [fix] 디버깅 코드 삭제 및 UI 수정

Author: hyeona01

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

@@ -25,7 +25,9 @@ const UserDetailPage = () => {
     <>
       {userDetailData ? (
         <div className="flex w-screen h-screen bg-[#0E1D3C]">
-          <TimeLine timeLineData={userDetailData} setVideoNum={setVideoNum} />
+          <div className="w-[30vw]">
+            <TimeLine timeLineData={userDetailData} setVideoNum={setVideoNum} />
+          </div>
           <div className="grow text-white p-10">
             <TestInfo
               examName={userDetailData.examName}
@@ -46,12 +48,12 @@ const UserDetailPage = () => {
                     : 0
                 }
               />
-              <div className="flex gap-5 py-5">
+              <div className="w-[70vw] flex gap-5 py-5 overflow-x-auto">
                 {userDetailData.cheatingVideos.map((video, index) => (
                   <div
                     key={index}
                     onClick={() => setVideoNum(index)}
-                    className="h-28 max-w-48 rounded-sm overflow-hidden"
+                    className="h-28 w-48 rounded-sm overflow-hidden shrink-0"
                   >
                     <video src={video.filepath} />
                   </div>

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

@@ -50,8 +50,14 @@ const DashBoardSection = ({
           {children}
         </TestInfo>
         <div className="flex items-center w-full justify-end gap-5 mb-5">
-          <GridIcon onClick={() => setTableModalOpen(true)} />
-          <PeopleIcon onClick={() => setCodeModalOpen(true)} />
+          <GridIcon
+            className="cursor-pointer"
+            onClick={() => setTableModalOpen(true)}
+          />
+          <PeopleIcon
+            className="cursor-pointer"
+            onClick={() => setCodeModalOpen(true)}
+          />
           <RowMoreIcon />
         </div>
         <div
@@ -63,7 +69,6 @@ const DashBoardSection = ({
           {sesstionData.user.map((user) => (
             <div key={user.userId} className="flex justify-center">
               <DashBoardCard
-                key={user.userId}
                 user={user}
                 exam={{
                   name: sesstionData.examName,

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

@@ -19,7 +19,7 @@ const UserSection = ({ sessionData }: UserSectionProps) => {
   return (
     <div className="w-[342px] py-8 px-2.5">
       <div className="text-[#999] text-[20px] font-bold mb-12">
-        <span onClick={handleClick} className="pl-3 pr-5">
+        <span onClick={handleClick} className="pl-3 pr-5 cursor-pointer">
           〈
         </span>
         {sessionData.examName}

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

@@ -63,8 +63,8 @@ const ReportSection = ({ reportData }: ReportSectionType) => {
           <div>부정행위 유형별 통계</div>
           <div className="flex flex-col gap-2">
             {Object.entries(reportData.cheatingTypeStatistics).map(
-              ([type, count]) => (
-                <span key={type} className="border-b border-gray-500 px-3">
+              ([type, count], index) => (
+                <span key={index} className="border-b border-gray-500 px-3">
                   {type}: {count}건
                 </span>
               )

src/frontend/eyesee-admin/src/components/userDetail/TimeLine.tsx

@@ -19,15 +19,15 @@ const TimeLine = ({ timeLineData, setVideoNum }: TimeLineProps) => {
   return (
     <div className="py-8 px-2.5 w-[342px] h-screen overflow-scroll bg-white">
       <div className="text-[#0E1D3C] text-[20px] font-bold mb-12">
-        <span onClick={handleClick} className="pl-3 pr-5">
+        <span onClick={handleClick} className="pl-3 pr-5 cursor-pointer">
           〈
         </span>
         {timeLineData.userName}님 Time Line
       </div>
       <div className="flex flex-col gap-16 border-l-2 border-l-[#0E1D3C] min-h-[80vh] ml-12">
         {timeLineData.cheatingStatistics.map((cheating, index) => (
           <div
-            key={cheating.cheatingStatisticsId}
+            key={index}
             onClick={() => setVideoNum(index)}
             className="relative flex items-center gap-10 cursor-pointer"
             style={{ left: -9 }}

src/frontend/eyesee-user/src/app/exam-room/page.tsx

@@ -105,8 +105,12 @@ const RealTimeVideoPage = () => {
         console.error("부정행위 시작 시간이 없습니다.");
         return;
       }
+      // const endTime = new Date().toISOString();
+      const now = new Date();
+      const offset = 9 * 60 * 60 * 1000; // 한국 시간은 UTC+9
+      const kstTime = new Date(now.getTime() + offset);
+      const endTime = kstTime.toISOString().replace("Z", "+09:00");
 
-      const endTime = new Date().toISOString();
       const result = await videoPost(
         Number(userId),
         cheatingStartTimeRef.current,
@@ -157,14 +161,14 @@ const RealTimeVideoPage = () => {
         uploadVideo(file);
 
         // 로컬 다운로드 (테스트용)
-        const url = URL.createObjectURL(blob);
-        const a = document.createElement("a");
-        a.href = url;
-        a.download = `cheating_${new Date().toISOString()}.mov`;
-        a.click();
-
-        console.log(`비디오 크기: ${blob.size / 1024} KB`);
-        console.log("부정행위 비디오 저장 완료");
+        // const url = URL.createObjectURL(blob);
+        // const a = document.createElement("a");
+        // a.href = url;
+        // a.download = `cheating_${new Date().toISOString()}.mov`;
+        // a.click();
+
+        // console.log(`비디오 크기: ${blob.size / 1024} KB`);
+        // console.log("부정행위 비디오 저장 완료");
       }
     };