feat: infinite scroll 형식 변경

Author: sohee

src/components/attendanceAdmin/session/AttendanceModal/index.tsx

@@ -88,7 +88,7 @@ function AttendanceModal(props: Props) {
     }
   };
 
-  if (status === 'LOADING') return <Loading />;
+  if (status === 'LOADING') return <Loading full />;
   return (
     <StAttendanceModal>
       <ModalHeader

src/components/attendanceAdmin/totalScore/MemberList/index.tsx

@@ -24,12 +24,15 @@ function MemberList() {
   const currentGeneration = useRecoilValue(currentGenerationState);
 
   const {
-    data: members,
+    data: membersData,
     fetchNextPage,
     isFetchingNextPage,
     status,
   } = useGetInfiniteMemberList(parseInt(currentGeneration), selectedPart);
 
+  const members = membersData?.pages.map((item) => item.members) ?? [];
+  const totalCount = membersData?.pages[0].totalCount ?? 0;
+
   useObserver({
     target: bottomRef,
     fetchNextPage,
@@ -52,10 +55,10 @@ function MemberList() {
       <StPageHeader>
         <h1>출석 총점</h1>
         <PartFilter selected={selectedPart} onChangePart={onChangePart} />
-        <p>총 0명</p>
+        <p>총 {totalCount}명</p>
       </StPageHeader>
       <ListWrapper>
-        {members?.pages.map(
+        {members.map(
           (pageMembers, pageIndex) =>
             pageMembers &&
             pageMembers.map((member, index) => {

src/pages/attendanceAdmin/session/[id].tsx

@@ -62,13 +62,16 @@ function SessionDetailPage() {
   } = useGetSessionDetail(id);
 
   const {
-    data: members,
+    data: membersData,
     fetchNextPage,
     isFetchingNextPage,
     status,
     refetch: refetchMembers,
   } = useGetInfiniteSessionMembers(id, selectedPart);
 
+  const members = membersData?.pages.map((item) => item.attendances) ?? [];
+  const totalCount = membersData?.pages[0].totalCount ?? 0;
+
   useObserver({
     target: bottomRef,
     fetchNextPage,
@@ -220,12 +223,6 @@ function SessionDetailPage() {
     }
   };
 
-  const getMemberCount = (attendances: Record<string, number>) => {
-    let sum = 0;
-    Object.keys(attendances).map((key) => (sum += attendances[key]));
-    return sum;
-  };
-
   const getButtonContent = (status: SESSION_STATUS): ReactNode => {
     switch (status) {
       case 'BEFORE':
@@ -249,7 +246,7 @@ function SessionDetailPage() {
         return () => closeAttendance();
       default:
         // eslint-disable-next-line prettier/prettier
-        return () => {};
+        return () => { };
     }
   };
 
@@ -266,7 +263,7 @@ function SessionDetailPage() {
             <PartFilter selected={selectedPart} onChangePart={onChangePart} />
           )}
           <div className="attendances">
-            <p>총 {getMemberCount(session.attendances)}명</p>
+            <p>총 {totalCount}명</p>
             <div>
               <p>출석 {session.attendances.attendance}</p>
               <p>지각 {session.attendances.tardy}</p>
@@ -279,7 +276,7 @@ function SessionDetailPage() {
 
       {session && members ? (
         <ListWrapper>
-          {members?.pages.map(
+          {members.map(
             (pageMembers, pageIndex) =>
               pageMembers &&
               pageMembers.map((member, index) => {

src/services/api/lecture/index.ts

@@ -60,9 +60,14 @@ export const getSessionMembers = async (
   lectureId: number,
   part?: PART,
 ) => {
-  const query = buildQuery({ part, page: `${page}` });
-  const { data }: AxiosResponse<{ data: SessionMember[] }> = await client.get(
-    `/attendances/lecture/${lectureId}${query}`,
+  const query = buildQuery({ page: `${page}` });
+  const partQuery = part && part !== 'ALL' ? `&part=${part}` : '';
+  const {
+    data,
+  }: AxiosResponse<{
+    data: { attendances: SessionMember[]; totalCount: number };
+  }> = await client.get(
+    `/attendances/lecture/${lectureId}${query}${partQuery}`,
   );
   return data.data;
 };

src/services/api/lecture/query.ts

@@ -40,15 +40,20 @@ export const useGetSessionDetail = (lectureId: number | null) => {
 export const useGetInfiniteSessionMembers = (
   lectureId: number | null,
   part?: PART,
-): UseInfiniteQueryResult<SessionMember[]> => {
+): UseInfiniteQueryResult<{
+  attendances: SessionMember[];
+  totalCount: number;
+}> => {
   return useInfiniteQuery(
     ['sessionMembers', lectureId, part],
     async ({ pageParam = 0 }) =>
       pageParam !== null &&
       (await getSessionMembers(pageParam, lectureId ?? 0, part)),
     {
       getNextPageParam: (lastPage, pages) =>
-        lastPage && lastPage.length < PAGE_SIZE ? null : pages.length,
+        lastPage && lastPage.attendances.length < PAGE_SIZE
+          ? null
+          : pages.length,
     },
   );
 };

src/services/api/member/index.ts

@@ -13,8 +13,9 @@ export const getMemberList = async (
     generation: `${generation}`,
     page: `${page}`,
   });
-  const { data }: AxiosResponse<{ data: ScoreMember[] }> = await client.get(
-    `/members/list${query}`,
-  );
+  const {
+    data,
+  }: AxiosResponse<{ data: { members: ScoreMember[]; totalCount: number } }> =
+    await client.get(`/members/list${query}`);
   return data.data;
 };

src/services/api/member/query.ts

@@ -7,14 +7,14 @@ import { getMemberList } from './index';
 export const useGetInfiniteMemberList = (
   generation: number,
   part: PART,
-): UseInfiniteQueryResult<ScoreMember[]> => {
+): UseInfiniteQueryResult<{ members: ScoreMember[]; totalCount: number }> => {
   return useInfiniteQuery(
     ['memberList', generation, part],
     async ({ pageParam = 0 }) =>
       pageParam !== null && (await getMemberList(pageParam, generation, part)),
     {
       getNextPageParam: (lastPage, pages) =>
-        lastPage && lastPage.length < PAGE_SIZE ? null : pages.length,
+        lastPage && lastPage.members.length < PAGE_SIZE ? null : pages.length,
     },
   );
 };