feat: 첫 번째 선택된 학생 이름 렌더링

GDSC-Hongik · Nov 17, 2024 · a1f8a0c · a1f8a0c
1 parent 0e88202
commit a1f8a0c
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 14 deletions.
diff --git a/apps/admin/app/students/_components/OutstandingModal.tsx b/apps/admin/app/students/_components/OutstandingModal.tsx
@@ -18,8 +18,8 @@ import {
 
 const OutstandingModal = () => {
   const study = useAtomValue(studyAtom);
-  const selectedStudents = useAtomValue(selectedStudentsAtom);
-  const STUDENTS_NUM = selectedStudents.length;
+  const { firstStudentName, students } = useAtomValue(selectedStudentsAtom);
+  const STUDENTS_NUM = students.length;
 
   const [outstandingStudents, setOutstandingStudents] = useAtom(
     outstandingStudentsAtom
@@ -39,7 +39,7 @@ const OutstandingModal = () => {
         : studyAchievementApi.deleteStudyAchievement;
 
     const result = await fetch(study.studyId, {
-      studentIds: selectedStudents,
+      studentIds: students,
       achievementType: achievement,
     });
 
@@ -79,11 +79,8 @@ const OutstandingModal = () => {
         )}
 
         <Text color="sub">
-          {
-            // TODO: 가장 앞 사람 정보 요청
-            /* 이현영 님 외{" "} */
-          }
-          <styled.span color="primary">{STUDENTS_NUM}명</styled.span>
+          {firstStudentName} 님 외{" "}
+          <styled.span color="primary">{STUDENTS_NUM - 1}명</styled.span>
         </Text>
         {enabled ? (
           <Button onClick={handleClickOutstanding}>

diff --git a/apps/admin/app/students/_components/StudentHeaderButtons.tsx b/apps/admin/app/students/_components/StudentHeaderButtons.tsx
@@ -14,7 +14,7 @@ const StudentsHeaderButtons = () => {
     outstandingStudentsAtom
   );
   const { type, achievement, enabled } = outstandingStudents;
-  const selectedStudents = useAtomValue(selectedStudentsAtom);
+  const { students } = useAtomValue(selectedStudentsAtom);
 
   const handleClickCancelButton = () => {
     setOutstandingStudents({
@@ -30,8 +30,8 @@ const StudentsHeaderButtons = () => {
       </Button>
       <Button
         asProp={Link}
-        disabled={!selectedStudents.length}
-        href={selectedStudents.length ? "/students/outstanding" : ""}
+        disabled={!students.length}
+        href={students.length ? "/students/outstanding" : ""}
         size="sm"
       >
         {achievement && `${outstandingRoundMap[achievement]} ${type}`}

diff --git a/apps/admin/app/students/_components/StudentTable/StudentList.tsx b/apps/admin/app/students/_components/StudentTable/StudentList.tsx
@@ -36,13 +36,20 @@ const StudentList = ({
   if (!studentList.length) return <Text>스터디 수강생이 없어요.</Text>;
 
   const handleChangeSelectedStudents = (rows: number[]) => {
-    setSelectedStudents(rows);
+    const firstStudent = studentList.find(
+      (student) => student.memberId === rows[0]
+    );
+
+    setSelectedStudents({
+      firstStudentName: firstStudent && firstStudent.name,
+      students: rows,
+    });
   };
 
   return (
     <Table
       fullWidth
-      selectedRowsProp={selectedStudents}
+      selectedRowsProp={selectedStudents.students}
       showCheckbox={enabled}
       onChange={handleChangeSelectedStudents}
     >

diff --git a/apps/admin/app/students/_contexts/StudyProvider.tsx b/apps/admin/app/students/_contexts/StudyProvider.tsx
@@ -19,14 +19,21 @@ export type OutstandingStudentsProps = {
   enabled: boolean;
 };
 
+export type SelectedStudentsProps = {
+  firstStudentName?: string;
+  students: number[] | [];
+};
+
 export const studyAtom = atom<StudyAtomprops>();
 studyIdStore.set(studyAtom, undefined);
 
 export const outstandingStudentsAtom = atom<OutstandingStudentsProps>({
   enabled: false,
 });
 
-export const selectedStudentsAtom = atom<number[] | []>([]);
+export const selectedStudentsAtom = atom<SelectedStudentsProps>({
+  students: [],
+});
 
 export const StudyProvider = ({ children }: PropsWithChildren) => {
   return <Provider store={studyIdStore}>{children}</Provider>;