Merge pull request #223 from PNUMeat/fix/new-pagination-apply-all

[fix] 페이지네이션 미적용 부분 적용 및 렌더링 개선

Author: mingkyeongg

src/api/dashboard.ts

@@ -28,31 +28,12 @@ export interface IArticle {
 
 export interface IArticlesByDateResponse {
   content: IArticle[];
-  empty: boolean;
-  first: boolean;
-  last: boolean;
-  number: number;
-  numberOfElements: number;
-  pageable: {
-    offset: number;
-    pageNumber: number;
-    pageSize: number;
-    paged: boolean;
-    unpaged: boolean;
-    sort: {
-      empty: boolean;
-      sorted: boolean;
-      unsorted: boolean;
-    };
+  page: {
+    size: number;
+    number: number;
+    totalElements: number;
+    totalPages: number;
   };
-  size: number;
-  sort: {
-    empty: boolean;
-    sorted: boolean;
-    unsorted: boolean;
-  };
-  totalElements: number;
-  totalPages: number;
 }
 
 export interface ITopicResponse {

src/components/commons/Pagination.tsx

@@ -47,29 +47,31 @@ export const Pagination = ({
   };
 
   return (
-    <Flex justify="center">
-      <PaginationContainer hideShadow={hideShadow} marginTop={marginTop}>
-        {isShowingArrows && (
-          <LeftArrow src={ArrowButton} onClick={handlePrev} />
-        )}
-        <Spacer width={12} h={0} />
-        <PageList>
-          {visiblePageNumbers.map((page) => (
-            <PageNumber
-              key={page}
-              isActive={page === currentPageProp + 1}
-              onClick={() => handlePageChange(page - 1)}
-            >
-              {page}
-            </PageNumber>
-          ))}
-        </PageList>
-        <Spacer width={12} h={0} />
-        {isShowingArrows && (
-          <RightArrow src={ArrowButton} onClick={handleNext} />
-        )}
-      </PaginationContainer>
-    </Flex>
+    totalPages > 0 && (
+      <Flex justify="center">
+        <PaginationContainer hideShadow={hideShadow} marginTop={marginTop}>
+          {isShowingArrows && (
+            <LeftArrow src={ArrowButton} onClick={handlePrev} />
+          )}
+          <Spacer width={12} h={0} />
+          <PageList>
+            {visiblePageNumbers.map((page) => (
+              <PageNumber
+                key={page}
+                isActive={page === currentPageProp + 1}
+                onClick={() => handlePageChange(page - 1)}
+              >
+                {page}
+              </PageNumber>
+            ))}
+          </PageList>
+          <Spacer width={12} h={0} />
+          {isShowingArrows && (
+            <RightArrow src={ArrowButton} onClick={handleNext} />
+          )}
+        </PaginationContainer>
+      </Flex>
+    )
   );
 };
 

src/pages/TeamDashboard/TeamDashboard.tsx

@@ -65,7 +65,7 @@ const TeamDashboardPage = () => {
   });
   // 가장 비용이 적은 캐싱
   if (isPaginationReady && articlesData) {
-    totalPageCache = articlesData.totalPages;
+    totalPageCache = articlesData.page.totalPages;
   }
 
   const onClickCalendarDate = (newDate: string) => {
@@ -137,13 +137,16 @@ const TeamDashboardPage = () => {
             onShowTopicDetail={handleShowTopicDetail}
             onShowArticleDetail={handleShowArticleDetail}
           />
-          <Pagination
-            totalPages={articlesData?.totalPages ?? totalPageCache}
-            currentPageProp={page}
-            onPageChange={handlePageChange}
-            hideShadow={isMobile}
-            marginTop="-70px"
-          />
+          {articlesData && (
+            <Pagination
+              totalPages={articlesData?.page.totalPages ?? totalPageCache}
+              currentPageProp={page}
+              onPageChange={handlePageChange}
+              hideShadow={isMobile}
+              marginTop="-70px"
+            />
+          )}
+
           <Spacer h={isMobile ? 30 : 40} />
           {currentView === 'topic' && (
             <TopicDetail teamId={Number(teamId)} selectedDate={selectedDate} />