[Feature] 스터디 수강생 페이지네이션 적용, 엑셀 다운로드 (#160)

chore: 디자인시스템 0.1.19 버전업

feat: 추가 및 변경된 DTO 등록(StudyStudentApiResponseDto, PageStudyStudentApiResponseDto)

feat: 페이지네이션 임시적용

feat: 디자인 시스템 테이블 컴포넌트 적용

feat: 페이지네이션 적용

feat: 우수회원 배지 AwardIcon 컴포넌트

feat: 1차 우수회원, 2차 우수회원 표 적용

feat: 수료 체크박스 StarCheckIcon 컴포넌트

feat: 수료여부 표 적용

refactor: 수강생 Th 정보 배열로 관리

feat: 과제 제출 타입 엔티티 및 태그 맵 객체

feat: 과제 제출 태그 표 적용

feat: task, attendance 타입 엔티티 및 studyTasks 타입 변경

feat: 과제 출석 태그 맵 객체

fix: 중복된 key 유니크하게 바꾸기

feat: 과제 출석 태그 적용

refactor: StudentListItem 컴포넌트 분리

feat: 출석률, 과제 수행률 표 적용

fix: 페이지네이션 잘못된 형식 수정

fix: 과제 상태 NOT_SUBMITTED 텍스트 변경

feat: 수강생 필터 UI

feat: 엑셀 다운로드 버튼

fix: 수강생 없을 때와 데이터 받는 중일 때 구분

fix: application/octet-stream 타입도 blob으로 응답 읽도록 수정

feat: 수강생 엑셀 다운로드, 스터디리스트 코어멤버도 자신이 생성한 스터디만 보이도록 임시수정

fix: CANCELED로 프로퍼티 이름 변경

fix: 타입 에러 수정

fix: 필터 로직 임시삭제

fix: Tr value값 넘겨주기

refactor: StudentList 테이블 컴포넌트 분리

refactor: 테이블 관련 컴포넌트 폴더 이동

fix: AwardIcon 활성화 시 컬러 미적용 문제 해결

refactor: 타입에 따라 태그 정보를 반환하는 formatTaskToTagInfo 함수

refactor: 불필요한 삼항연산자 개선

refactor: 수강생 페이지네이션 DTO 네이밍 변경

apps/admin/apis/study/studyApi.ts

@@ -9,7 +9,8 @@ import type {
 import type { AttendanceApiResponseDto } from "types/dtos/attendance";
 import type { CurriculumApiResponseDto } from "types/dtos/curriculumList";
 import type { StudyBasicInfoApiResponseDto } from "types/dtos/studyBasicInfo";
-import type { StudyStudentApiResponseDto } from "types/dtos/studyStudent";
+import type { PaginatedStudyStudentResponseDto } from "types/dtos/studyStudent";
+import type { PageableType } from "types/entities/page";
 import type { StudyAnnouncementType } from "types/entities/study";
 
 import type { StudyListApiResponseDto } from "../../types/dtos/studyList";
@@ -149,14 +150,26 @@ export const studyApi = {
     );
     return response.data;
   },
-  getStudyStudents: async (studyId: number) => {
-    const response = await fetcher.get<StudyStudentApiResponseDto[]>(
+  getStudyStudents: async (studyId: number, pageable: PageableType) => {
+    const response = await fetcher.get<PaginatedStudyStudentResponseDto>(
       `/mentor/studies/${studyId}/students`,
       {
         next: { tags: [tags.students] },
         cache: "force-cache",
+      },
+      pageable
+    );
+    return response.data;
+  },
+  getStudyStudentsExcel: async (studyId: number) => {
+    const response = await fetcher.get(
+      `/mentor/studies/${studyId}/students/excel`,
+      {
+        next: { tags: [tags.studentsExcel] },
+        cache: "force-cache",
       }
     );
+
     return response.data;
   },
 };

apps/admin/app/students/_components/StudentFilter.tsx

@@ -0,0 +1,13 @@
+import { Flex } from "@styled-system/jsx";
+import Chip from "wowds-ui/Chip";
+
+const StudentFilter = () => {
+  return (
+    <Flex gap="0.5rem">
+      <Chip clickable label="우수 회원 보기" />
+      <Chip clickable label="수료 회원 보기" />
+    </Flex>
+  );
+};
+
+export default StudentFilter;

apps/admin/app/students/_components/StudentPagination.tsx

@@ -0,0 +1,20 @@
+import type { PaginatedStudyStudentResponseDto } from "types/dtos/studyStudent";
+import Pagination from "wowds-ui/Pagination";
+
+const StudentPagination = ({
+  pageInfo,
+  handleClickChangePage,
+}: {
+  pageInfo: Omit<PaginatedStudyStudentResponseDto, "content"> | null;
+  handleClickChangePage: (nextPage: number) => void;
+}) => {
+  if (!pageInfo || !pageInfo.numberOfElements) return null;
+  return (
+    <Pagination
+      totalPages={pageInfo.totalPages}
+      onChange={handleClickChangePage}
+    />
+  );
+};
+
+export default StudentPagination;

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

@@ -0,0 +1,51 @@
+import { Text } from "@wow-class/ui";
+import type { StudyStudentApiResponseDto } from "types/dtos/studyStudent";
+import Table from "wowds-ui/Table";
+
+import StudentListItem from "./StudentListItem";
+import { StudyTasksThs } from "./StudyTasks";
+
+const STUENT_INFO_LIST_BEFORE = [
+  "수료",
+  "1차 우수회원",
+  "2차 우수회원",
+  "이름",
+  "학번",
+  "디스코드 사용자명",
+  "디스코드 닉네임",
+  "깃허브 링크",
+];
+
+const STUDENT_INFO_LIST_AFTER = ["출석률", "과제 수행률", "전체 수행정도"];
+
+const StudentList = ({
+  studentList,
+}: {
+  studentList: StudyStudentApiResponseDto[] | [];
+}) => {
+  if (!studentList) return null;
+  if (!studentList.length) return <Text>스터디 수강생이 없어요.</Text>;
+
+  return (
+    <Table>
+      <Table.Thead>
+        {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.Tbody>
+        {studentList.map((student) => (
+          <Table.Tr key={student.memberId} value={student.memberId}>
+            <StudentListItem {...student} />
+          </Table.Tr>
+        ))}
+      </Table.Tbody>
+    </Table>
+  );
+};
+
+export default StudentList;

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

@@ -0,0 +1,71 @@
+import { AwardIcon, StarCheckIcon, Text } from "@wow-class/ui";
+import Link from "next/link";
+import type { CSSProperties } from "react";
+import type { StudyStudentApiResponseDto } from "types/dtos/studyStudent";
+import { formatNumberToPercent } from "utils/formatNumber";
+import Table from "wowds-ui/Table";
+import TextButton from "wowds-ui/TextButton";
+
+import { StudyTasksTds } from "./StudyTasks";
+
+const StudentListItem = ({
+  studyHistoryStatus,
+  isFirstRoundOutstandingStudent,
+  isSecondRoundOutstandingStudent,
+  name,
+  studentId,
+  discordUsername,
+  nickname,
+  githubLink,
+  studyTasks,
+  assignmentRate,
+  attendanceRate,
+}: StudyStudentApiResponseDto) => {
+  return (
+    <>
+      <Table.Td>
+        <StarCheckIcon checked={studyHistoryStatus === "COMPLETED"} />
+      </Table.Td>
+      <Table.Td>
+        <Text style={awardTextStyle} typo="body2">
+          <AwardIcon disabled={!isFirstRoundOutstandingStudent} />
+          1차
+        </Text>
+      </Table.Td>
+      <Table.Td>
+        <Text style={awardTextStyle} typo="body2">
+          <AwardIcon disabled={!isSecondRoundOutstandingStudent} />
+          2차
+        </Text>
+      </Table.Td>
+      <Table.Td>{name}</Table.Td>
+      <Table.Td>{studentId}</Table.Td>
+      <Table.Td>{discordUsername}</Table.Td>
+      <Table.Td>{nickname}</Table.Td>
+      <Table.Td>
+        <TextButton
+          asProp={Link}
+          href={githubLink || ""}
+          style={textButtonStyle}
+          text={githubLink}
+        />
+      </Table.Td>
+      <StudyTasksTds tasks={studyTasks} />
+      <Table.Td>{formatNumberToPercent(assignmentRate)}</Table.Td>
+      <Table.Td>{formatNumberToPercent(attendanceRate)}</Table.Td>
+    </>
+  );
+};
+
+const textButtonStyle: CSSProperties = {
+  width: "fit-content",
+  padding: 0,
+};
+
+const awardTextStyle: CSSProperties = {
+  display: "flex",
+  gap: "0.25rem",
+  alignItems: "center",
+};
+
+export default StudentListItem;

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

@@ -0,0 +1,40 @@
+import type { StudyTaskResponseDto } from "types/dtos/studyStudent";
+import Table from "wowds-ui/Table";
+
+import TaskTag from "./TaskTag";
+
+export const StudyTasksThs = ({
+  tasks,
+}: {
+  tasks: (
+    | StudyTaskResponseDto<"ASSIGNMENT">
+    | StudyTaskResponseDto<"ATTENDANCE">
+  )[];
+}) => {
+  return tasks.map((task) => {
+    const { week, taskType } = task;
+    return (
+      <Table.Th key={taskType + week}>
+        {taskType === "ATTENDANCE" ? `${week}주차 출석` : `${week}주차 과제`}
+      </Table.Th>
+    );
+  });
+};
+
+export const StudyTasksTds = ({
+  tasks,
+}: {
+  tasks: (
+    | StudyTaskResponseDto<"ASSIGNMENT">
+    | StudyTaskResponseDto<"ATTENDANCE">
+  )[];
+}) => {
+  return tasks.map((task) => {
+    const { week, taskType } = task;
+    return (
+      <Table.Td key={taskType + week}>
+        <TaskTag task={task} />
+      </Table.Td>
+    );
+  });
+};

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

@@ -0,0 +1,29 @@
+import { assignmentSubmissionStatusMap } from "constants/status/assignmentStatusMap";
+import { attendanceTaskStatusMap } from "constants/status/attendanceStatusMap";
+import type { StudyTaskResponseDto } from "types/dtos/studyStudent";
+import type { TaskType } from "types/entities/task";
+import Tag from "wowds-ui/Tag";
+
+const TaskTag = ({ task }: { task: StudyTaskResponseDto<TaskType> }) => {
+  const formatTaskToTagInfo = () => {
+    if (task.taskType === "ATTENDANCE") {
+      return attendanceTaskStatusMap[task.attendanceStatus];
+    }
+    if (task.taskType === "ASSIGNMENT") {
+      return assignmentSubmissionStatusMap[task.assignmentSubmissionStatus];
+    }
+    return null;
+  };
+
+  const tagInfo = formatTaskToTagInfo();
+  if (!tagInfo) return null;
+  const { tagText, tagColor } = tagInfo;
+
+  return (
+    <Tag color={tagColor} variant="solid2">
+      {tagText}
+    </Tag>
+  );
+};
+
+export default TaskTag;