fix: 체크박스 직접 관리, 선택된 학생 리스트 API 요청 시 배열로 변환

apps/admin/app/students/@modal/_components/OutstandingModalButton.tsx

@@ -37,6 +37,14 @@ const OutstandingModalButton = () => {
     },
   };
 
+  const handleClickCloseModal = () => {
+    setSelectedStudents({
+      students: new Set(),
+      firstStudentName: "",
+    });
+    onClose();
+  };
+
   const handleClickOutstanding = async () => {
     if (!study || !achievement || !type) return;
 
@@ -45,31 +53,25 @@ const OutstandingModalButton = () => {
         const fetch = apiMap["COMPLETE"][type];
         return fetch({
           studyId: study.studyId,
-          studentIds: students,
+          studentIds: Array.from(students),
         });
       }
       const fetch = apiMap["ACHIEVEMENT"][type];
       return fetch(study.studyId, {
-        studentIds: students,
+        studentIds: Array.from(students),
         achievementType: achievement as AchievementType,
       });
     };
     const result = await fetchApi();
 
-    if (result.success) {
-      revalidateTagByName(tags.students);
-      setEnabledOutstandingStudents({
-        enabled: false,
-      });
-    }
-  };
-
-  const handleClickCloseModal = () => {
-    setSelectedStudents({
-      students: new Set(),
-      firstStudentName: "",
+    revalidateTagByName(tags.students);
+    setEnabledOutstandingStudents({
+      enabled: false,
     });
-    onClose();
+
+    if (!result.success) {
+      handleClickCloseModal();
+    }
   };
 
   return enabled ? (

apps/admin/app/students/_components/StudentTable/StudentList.tsx

@@ -1,6 +1,8 @@
+import { styled } from "@styled-system/jsx";
 import { Text } from "@wow-class/ui";
 import { useAtom, useAtomValue } from "jotai";
 import type { StudyStudentApiResponseDto } from "types/dtos/studyStudent";
+import Checkbox from "wowds-ui/Checkbox";
 import Table from "wowds-ui/Table";
 
 import {
@@ -36,44 +38,73 @@ const StudentList = ({
   if (!studentList.length) return <Text>스터디 수강생이 없어요.</Text>;
 
   const handleChangeSelectedStudents = (ids: number[]) => {
-    const firstStudent =
-      selectedStudents.firstStudentName ||
-      studentList.find((student) => student.memberId === ids[0])?.name;
+    const firstStudent = studentList.find(
+      (student) => student.memberId === ids[0]
+    )?.name;
 
     setSelectedStudents({
       firstStudentName: firstStudent,
       students: new Set(ids),
     });
   };
 
+  const isAllChecked = studentList.length === selectedStudents.students.size;
+
   return (
-    <Table fullWidth showCheckbox={enabled}>
-      <Table.Thead
-        onChange={() =>
-          handleChangeSelectedStudents(
-            studentList.map((student) => student.memberId)
-          )
-        }
-      >
-        {STUENT_INFO_LIST_BEFORE.map((info) => (
-          <Table.Th key={info}>{info}</Table.Th>
-        ))}
-        {studentList[0] && <StudyTasksThs tasks={studentList[0].studyTasks} />}
-        {STUDENT_INFO_LIST_AFTER.map((info) => (
-          <Table.Th key={info}>{info}</Table.Th>
-        ))}
-      </Table.Thead>
+    <Table
+      fullWidth
+      selectedRowsProp={selectedStudents.students}
+      showCheckbox={enabled}
+    >
+      <styled.thead>
+        <styled.tr>
+          {enabled && (
+            <Table.Th style={tableCheckBoxStyle}>
+              <Checkbox
+                checked={isAllChecked}
+                onChange={() => {
+                  if (isAllChecked) {
+                    setSelectedStudents({
+                      firstStudentName: "",
+                      students: new Set(),
+                    });
+                    return;
+                  }
+                  handleChangeSelectedStudents(
+                    studentList.map((student) => student.memberId)
+                  );
+                }}
+              />
+            </Table.Th>
+          )}
+          {STUENT_INFO_LIST_BEFORE.map((info) => (
+            <Table.Th key={info}>{info}</Table.Th>
+          ))}
+          {studentList[0] && (
+            <StudyTasksThs tasks={studentList[0].studyTasks} />
+          )}
+          {STUDENT_INFO_LIST_AFTER.map((info) => (
+            <Table.Th key={info}>{info}</Table.Th>
+          ))}
+        </styled.tr>
+      </styled.thead>
       <Table.Tbody>
         {studentList.map((student) => (
           <Table.Tr
             key={student.memberId}
             value={student.memberId}
-            onChange={() =>
+            onChange={() => {
+              if (selectedStudents.students.has(student.memberId)) {
+                const newSet = new Set(selectedStudents.students);
+                newSet.delete(student.memberId);
+                handleChangeSelectedStudents([...newSet]);
+                return;
+              }
               handleChangeSelectedStudents([
                 ...selectedStudents.students,
                 student.memberId,
-              ])
-            }
+              ]);
+            }}
           >
             <StudentListItem {...student} />
           </Table.Tr>
@@ -84,3 +115,11 @@ const StudentList = ({
 };
 
 export default StudentList;
+
+const tableCheckBoxStyle = {
+  minWidth: "15px",
+  display: "flex",
+  minHeight: "44px",
+  justifyContent: "center",
+  alignItems: "center",
+};