FE: [feat] 대시보드 화면 완성 #19

CSID-DGU · Nov 3, 2024 · d5d0c34 · d5d0c34
1 parent 66046db
commit d5d0c34
Show file tree

Hide file tree

Showing 8 changed files with 40 additions and 26 deletions.
diff --git a/src/frontend/eyesee-admin/src/app/dashboard/page.tsx b/src/frontend/eyesee-admin/src/app/dashboard/page.tsx
@@ -7,7 +7,7 @@ const DashBoardPage = () => {
   const sessionData = testSesstionData;
 
   return (
-    <div className="flex h-screen min-w-screen overflow-scroll bg-[##0E1D3C]">
+    <div className="flex h-screen w-screen bg-[##0E1D3C]">
       <UserSection sessionData={sessionData} />
       <DashBoardSection sesstionData={sessionData} />
     </div>

diff --git a/src/frontend/eyesee-admin/src/assets/icons/GridIcon.svg b/src/frontend/eyesee-admin/src/assets/icons/GridIcon.svg
diff --git a/src/frontend/eyesee-admin/src/assets/icons/PeopleIcon.svg b/src/frontend/eyesee-admin/src/assets/icons/PeopleIcon.svg
diff --git a/src/frontend/eyesee-admin/src/assets/icons/RowMoreIcon.svg b/src/frontend/eyesee-admin/src/assets/icons/RowMoreIcon.svg
diff --git a/src/frontend/eyesee-admin/src/components/dashBoard/DashBoardSection.tsx b/src/frontend/eyesee-admin/src/components/dashBoard/DashBoardSection.tsx
@@ -19,25 +19,14 @@ const DashBoardSection = ({ sesstionData }: DashBoardSectionProps) => {
     Math.ceil(sesstionData.examStudentNumber / row)
   );
 
-  // row를 설정하면 column이 자동 계산
-  const handleRowChange = (newRow: number) => {
-    setRow(newRow);
-    setColumn(Math.ceil(sesstionData.examStudentNumber / newRow));
-  };
-
-  // column을 설정하면 row가 자동 계산
-  const handleColumnChange = (newColumn: number) => {
-    setColumn(newColumn);
-    setRow(Math.ceil(sesstionData.examStudentNumber / newColumn));
-  };
-
   const [tableModalOpen, setTableModalOpen] = useState(false);
   const [codeModalOpen, setCodeModalOpen] = useState(false);
 
   return (
     <>
       {tableModalOpen && (
         <TableSetModal
+          examStudentNumber={sesstionData.examStudentNumber}
           row={row}
           column={column}
           setColumn={setColumn}
@@ -55,19 +44,21 @@ const DashBoardSection = ({ sesstionData }: DashBoardSectionProps) => {
             🕐 {sesstionData.examDuration}
           </p>
         </div>
-        <div className="w-full flex justify-end items-center gap-5">
+        <div className="w-full flex justify-end items-center gap-5 mb-5">
           <GridIcon onClick={() => setTableModalOpen(true)} />
           <PeopleIcon onClick={() => setCodeModalOpen(true)} />
           <RowMoreIcon />
         </div>
         <div
-          className="grid gap-5"
+          className="grid gap-5 justify-center items-center"
           style={{
             gridTemplateColumns: `repeat(${column}, minmax(0, 1fr))`,
           }}
         >
           {sesstionData.user.map((user) => (
-            <DashBoardCard key={user.userId} user={user} />
+            <div className="flex justify-center">
+              <DashBoardCard key={user.userId} user={user} />
+            </div>
           ))}
         </div>
       </div>

diff --git a/src/frontend/eyesee-admin/src/components/dashBoard/TableSetModal.tsx b/src/frontend/eyesee-admin/src/components/dashBoard/TableSetModal.tsx
@@ -3,6 +3,7 @@ import GridIcon from "@/assets/icons/GridIcon.svg";
 import CloseIcon from "@/assets/icons/CloseIcon.svg";
 
 type TableSetModalProps = {
+  examStudentNumber: number;
   row: number;
   column: number;
   setRow: Dispatch<SetStateAction<number>>;
@@ -11,18 +12,27 @@ type TableSetModalProps = {
 };
 
 const TableSetModal = ({
+  examStudentNumber,
   row,
   column,
   setRow,
   setColumn,
   setTableModalOpen,
 }: TableSetModalProps) => {
+  // row를 설정하면 column이 자동 계산
   const handleRowChange = (newRow: number) => {
-    setRow(newRow);
+    if (newRow > 0) {
+      setRow(newRow);
+      setColumn(Math.ceil(examStudentNumber / newRow));
+    }
   };
 
-  const handleColumnChange = (newCol: number) => {
-    setColumn(newCol);
+  // column을 설정하면 row가 자동 계산
+  const handleColumnChange = (newColumn: number) => {
+    if (newColumn > 0) {
+      setColumn(newColumn);
+      setRow(Math.ceil(examStudentNumber / newColumn));
+    }
   };
 
   return (

diff --git a/src/frontend/eyesee-admin/src/components/dashBoard/TestCodeModal.tsx b/src/frontend/eyesee-admin/src/components/dashBoard/TestCodeModal.tsx
@@ -6,7 +6,17 @@ type TestCodeModalProps = {
   setCodeModalOpen: Dispatch<SetStateAction<boolean>>;
   code: string;
 };
+
 const TestCodeModal = ({ setCodeModalOpen, code }: TestCodeModalProps) => {
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(code);
+      alert("시험 코드가 복사되었습니다!");
+    } catch (error) {
+      console.error("복사 실패:", error);
+    }
+  };
+
   return (
     <div className="w-screen h-screen fixed bg-[rgba(25,26,30,0.6)] z-50 flex justify-center items-center">
       <div className="relative w-[420px] flex flex-col gap-4 pt-24 pb-12 bg-[#0E1D3C]">
@@ -20,10 +30,13 @@ const TestCodeModal = ({ setCodeModalOpen, code }: TestCodeModalProps) => {
         <div className="flex flex-col justify-center items-center gap-8">
           <div className="text-2xl text-white">시험코드</div>
           <div className="flex gap-4">
-            <div className="text-2xl bg-white rounded-sm px-4">1294209</div>
-            <div className="text-[20px] px-4 bg-[#16A34A] text-white rounded-sm">
+            <div className="text-2xl bg-white rounded-sm px-4">{code}</div>
+            <button
+              onClick={handleCopy}
+              className="text-[20px] px-4 bg-[#16A34A] text-white rounded-sm"
+            >
               복사
-            </div>
+            </button>
           </div>
         </div>
       </div>

diff --git a/src/frontend/eyesee-admin/src/components/dashBoard/UserSection.tsx b/src/frontend/eyesee-admin/src/components/dashBoard/UserSection.tsx
@@ -17,7 +17,7 @@ const UserSection = ({ sessionData }: UserSectionProps) => {
         <div className="pb-2">
           전체 응시자 ({sessionData.examStudentNumber})
         </div>
-        <div className="bg-[rgba(9,38,102,0.10)] w-fit rounded-xl">
+        <div className="bg-[rgba(9,38,102,0.10)] w-fit rounded-xl h-[80vh] overflow-scroll">
           {sessionData.user.map((user) => (
             <UserCard user={user} />
           ))}