Merge pull request #110 from pagers-org/carpe/home-pagination

feat(home): 홈 페이지의 Pagination 을 실제 아티클 프리뷰 데이터를 기반으로 렌더링하도록 합니다.
pagers-org · Sep 17, 2023 · c9531a2 · c9531a2
2 parents 2dbdab1 + 989e56d
commit c9531a2
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 11 deletions.
diff --git a/apps/react-world/src/apis/article/ArticlePreviewService.ts b/apps/react-world/src/apis/article/ArticlePreviewService.ts
@@ -2,19 +2,20 @@ import { isAxiosError } from 'axios';
 import { api } from '../apiInstances';
 import type { ArticlePreviewResponse } from './ArticlePreviewService.types';
 
+export const ARTICLE_PREVIEW_FETCH_LIMIT = 10;
+
 class ArticleService {
   static async fetchArticlePreviews(
     pageNumber: number,
   ): Promise<ArticlePreviewResponse> {
     try {
-      const limit = 10;
-      const calculatedOffset = (pageNumber - 1) * limit;
+      const calculatedOffset = (pageNumber - 1) * ARTICLE_PREVIEW_FETCH_LIMIT;
       const offset = calculatedOffset >= 0 ? calculatedOffset : 0; // offset이 0보다 작으면 0으로 설정
 
       const response = await api.get('/articles', {
         params: {
           offset,
-          limit,
+          ARTICLE_PREVIEW_FETCH_LIMIT,
         },
       });
       return response.data;

diff --git a/apps/react-world/src/components/home/HomeFeedContents.tsx b/apps/react-world/src/components/home/HomeFeedContents.tsx
@@ -4,10 +4,14 @@ import PopularArticleTagList from './PopularArticleTagList';
 import HomeFeedTab from './HomeFeedTab';
 import Pagination from './Pagination';
 import useArticlePreviewQuery from '../../quries/useArticlePreviewQuery';
+import { ARTICLE_PREVIEW_FETCH_LIMIT } from '../../apis/article/ArticlePreviewService';
 
 const HomeFeedContents = () => {
   // TODO: Zustand Store 에서 초기값을 지정하고, 이후 현재 페이지 정보를 가지도록 구현 필요
   const { data, isLoading } = useArticlePreviewQuery(1);
+  const totalPageCount = data?.articlesCount
+    ? data.articlesCount / ARTICLE_PREVIEW_FETCH_LIMIT
+    : 0;
 
   return (
     <Container>
@@ -24,7 +28,7 @@ const HomeFeedContents = () => {
                   articlePreview={articlePreview}
                 />
               ))}
-              <Pagination pages={[1, 2]} activePage={1} />
+              <Pagination totalPages={totalPageCount} activePageIndex={0} />
             </>
           )}
         </div>

diff --git a/apps/react-world/src/components/home/Pagination.styled.ts b/apps/react-world/src/components/home/Pagination.styled.ts
@@ -32,8 +32,8 @@ export const PageButton = styled.a<{ isActive: boolean }>`
 
   &:focus,
   &:hover {
-    color: #3d8b3d;
-    background-color: #eceeef;
+    color: ${props => (props.isActive ? '#fff' : '#3d8b3d')};
+    background-color: ${props => (props.isActive ? '#5cb85c' : '#eceeef')};
     border-color: #ddd;
   }
 

diff --git a/apps/react-world/src/components/home/Pagination.tsx b/apps/react-world/src/components/home/Pagination.tsx
@@ -1,15 +1,17 @@
 import { PaginationContainer, PageButton } from './Pagination.styled';
 
 interface PaginationProps {
-  pages: number[];
-  activePage: number;
+  totalPages: number;
+  activePageIndex: number;
 }
 
-const Pagination = ({ pages, activePage }: PaginationProps) => {
+const Pagination = ({ totalPages, activePageIndex }: PaginationProps) => {
+  const pages = Array.from({ length: totalPages }, (_, i) => i + 1);
+
   return (
     <PaginationContainer>
-      {pages.map(page => (
-        <PageButton key={page} href="#" isActive={page === activePage}>
+      {pages.map((page, index) => (
+        <PageButton key={page} href="#" isActive={index === activePageIndex}>
           {page}
         </PageButton>
       ))}