[FE] fix: HomeTable 페이지 인덱스 이슈 수정 (#461)

* fix: `HomeTable` 페이지 인덱스 이슈 수정 * feat: 글 없을 경우 메시지 렌더링
woowacourse-teams · Sep 21, 2023 · a4fa95d · a4fa95d
1 parent cf70b10
commit a4fa95d
Show file tree

Hide file tree

Showing 4 changed files with 166 additions and 12 deletions.
diff --git a/frontend/src/components/@common/Pagination/Pagination.tsx b/frontend/src/components/@common/Pagination/Pagination.tsx
@@ -7,17 +7,17 @@ type Props = {
 };
 
 const Pagination = ({ pageLength, activePage, changeActivePage }: Props) => {
-  const isShowPrevious = activePage > 1;
-  const isShowNext = activePage < pageLength;
+  const isShowPrevious = activePage > 0;
+  const isShowNext = activePage < pageLength - 1;
 
   // 시작 페이지와 끝 페이지의 범위를 설정해주는 함수
   const setPageRange = () => {
-    const isBetween1and4 = activePage < 5;
-    const isNearLast4Pages = activePage >= pageLength - 4;
+    const isBetween1and4 = activePage < 4;
+    const isNearLast4Pages = activePage >= pageLength - 5;
 
-    if (isBetween1and4) return [1, Math.min(9, pageLength)];
+    if (isBetween1and4) return [0, Math.min(8, pageLength - 1)];
 
-    if (isNearLast4Pages) return [Math.max(pageLength - 8, 1), pageLength];
+    if (isNearLast4Pages) return [Math.max(pageLength - 9, 0), pageLength - 1];
 
     return [activePage - 4, activePage + 4];
   };
@@ -38,7 +38,7 @@ const Pagination = ({ pageLength, activePage, changeActivePage }: Props) => {
               $isActive={pageIndex === activePage}
               onClick={() => changeActivePage(pageIndex)}
             >
-              {pageIndex}
+              {pageIndex + 1}
             </S.PageButton>
           </li>
         );

diff --git a/frontend/src/components/HomeTable/HomeTable.tsx b/frontend/src/components/HomeTable/HomeTable.tsx
@@ -10,12 +10,12 @@ type Props = {
   initialPageIndex?: number;
 };
 
-const HomeTable = ({ initialPageIndex = 1 }: Props) => {
+const HomeTable = ({ initialPageIndex = 0 }: Props) => {
   const { content, totalPages, rowRef, activePage, changeActivePage } =
     useHomeTable(initialPageIndex);
   const { goWritingPage } = usePageNavigate();
 
-  if (!content || !totalPages) return null;
+  if (!content || !totalPages) return <S.AddWritingText>글을 추가해 주세요😊</S.AddWritingText>;
 
   return (
     <S.Container>
@@ -86,6 +86,10 @@ const S = {
     gap: 50px;
   `,
 
+  AddWritingText: styled.p`
+    font-size: 1.5rem;
+  `,
+
   HomeTable: styled.table`
     width: 100%;
     text-align: left;

diff --git a/frontend/src/components/HomeTable/useHomeTable.ts b/frontend/src/components/HomeTable/useHomeTable.ts
@@ -6,14 +6,14 @@ import { GetHomeWritingsResponse } from 'types/apis/writings';
 
 export const useHomeTable = (initialPageIndex: number) => {
   const [activePage, setActivePage] = useState(initialPageIndex);
-  const [fetchOption, setFetchOption] = useState(`?page=${activePage}&sort=createAt,desc`);
+  const [fetchOption, setFetchOption] = useState(`?page=${activePage}`);
   const { data } = useQuery<GetHomeWritingsResponse>(['homeWritings', fetchOption], () =>
     getHomeWritings(fetchOption),
   );
   const rowRef = useRef<HTMLTableRowElement>(null);
 
   const changeActivePage = (pageIndex: number) => {
-    setFetchOption(`?page=${pageIndex}&sort=createAt,desc`);
+    setFetchOption(`?page=${pageIndex}`);
     setActivePage(pageIndex);
   };
 

diff --git a/frontend/src/mocks/homeWritingMock.ts b/frontend/src/mocks/homeWritingMock.ts
@@ -33,6 +33,156 @@ export const getHomeWritingMock = (): GetHomeWritingsResponse => {
           },
         ],
       },
+      {
+        id: 2,
+        title: '제목2',
+        category: {
+          id: 3,
+          categoryName: '기본',
+        },
+        createdAt: new Date('2023-07-11T06:55:46.922Z'),
+        publishedDetails: [
+          {
+            blogName: 'MEDIUM',
+            publishedAt: new Date('2023-07-11T06:55:46.922Z'),
+          },
+        ],
+      },
+      {
+        id: 2,
+        title: '제목2',
+        category: {
+          id: 3,
+          categoryName: '기본',
+        },
+        createdAt: new Date('2023-07-11T06:55:46.922Z'),
+        publishedDetails: [
+          {
+            blogName: 'MEDIUM',
+            publishedAt: new Date('2023-07-11T06:55:46.922Z'),
+          },
+        ],
+      },
+      {
+        id: 1,
+        title: '제목1',
+        category: {
+          id: 3,
+          categoryName: '기본',
+        },
+        createdAt: new Date('2023-07-11T06:55:46.922Z'),
+        publishedDetails: [
+          {
+            blogName: 'MEDIUM',
+            publishedAt: new Date('2023-07-11T06:55:46.922Z'),
+          },
+        ],
+      },
+      {
+        id: 2,
+        title: '제목2',
+        category: {
+          id: 3,
+          categoryName: '기본',
+        },
+        createdAt: new Date('2023-07-11T06:55:46.922Z'),
+        publishedDetails: [
+          {
+            blogName: 'MEDIUM',
+            publishedAt: new Date('2023-07-11T06:55:46.922Z'),
+          },
+        ],
+      },
+      {
+        id: 2,
+        title: '제목2',
+        category: {
+          id: 3,
+          categoryName: '기본',
+        },
+        createdAt: new Date('2023-07-11T06:55:46.922Z'),
+        publishedDetails: [
+          {
+            blogName: 'MEDIUM',
+            publishedAt: new Date('2023-07-11T06:55:46.922Z'),
+          },
+        ],
+      },
+      {
+        id: 2,
+        title: '제목2',
+        category: {
+          id: 3,
+          categoryName: '기본',
+        },
+        createdAt: new Date('2023-07-11T06:55:46.922Z'),
+        publishedDetails: [
+          {
+            blogName: 'MEDIUM',
+            publishedAt: new Date('2023-07-11T06:55:46.922Z'),
+          },
+        ],
+      },
+      {
+        id: 1,
+        title: '제목1',
+        category: {
+          id: 3,
+          categoryName: '기본',
+        },
+        createdAt: new Date('2023-07-11T06:55:46.922Z'),
+        publishedDetails: [
+          {
+            blogName: 'MEDIUM',
+            publishedAt: new Date('2023-07-11T06:55:46.922Z'),
+          },
+        ],
+      },
+      {
+        id: 2,
+        title: '제목2',
+        category: {
+          id: 3,
+          categoryName: '기본',
+        },
+        createdAt: new Date('2023-07-11T06:55:46.922Z'),
+        publishedDetails: [
+          {
+            blogName: 'MEDIUM',
+            publishedAt: new Date('2023-07-11T06:55:46.922Z'),
+          },
+        ],
+      },
+      {
+        id: 2,
+        title: '제목2',
+        category: {
+          id: 3,
+          categoryName: '기본',
+        },
+        createdAt: new Date('2023-07-11T06:55:46.922Z'),
+        publishedDetails: [
+          {
+            blogName: 'MEDIUM',
+            publishedAt: new Date('2023-07-11T06:55:46.922Z'),
+          },
+        ],
+      },
+      {
+        id: 2,
+        title: '제목2',
+        category: {
+          id: 3,
+          categoryName: '기본',
+        },
+        createdAt: new Date('2023-07-11T06:55:46.922Z'),
+        publishedDetails: [
+          {
+            blogName: 'MEDIUM',
+            publishedAt: new Date('2023-07-11T06:55:46.922Z'),
+          },
+        ],
+      },
     ],
     pageable: {
       sort: {
@@ -46,7 +196,7 @@ export const getHomeWritingMock = (): GetHomeWritingsResponse => {
       paged: true,
       unpaged: false,
     },
-    totalPages: 1,
+    totalPages: 20,
     totalElements: 20,
     last: true,
     size: 20,