Feature/#222 pageNavigator 생성 (#222)

* feat : pageNavigator 생성

* [refactor] : pr반영

---------

Co-authored-by: 김문경 <>

src/app/api/study.ts

@@ -8,6 +8,7 @@ const postStudyFetch = (teamId: number, study: CreateStudyDto) =>
     method: 'POST',
     body: study,
   });
+const getStudyAllFetch = (studyId: number) => studyFetcher(`/studies/${studyId}/all`);
 
 const getStudyFetch = (studyId: number) => studyFetcher(`/studies/${studyId}`);
 
@@ -48,6 +49,7 @@ const getStudyMembersFetch = (studyId: number) => studyFetcher(`/studies/${study
 
 export {
   postStudyFetch,
+  getStudyAllFetch,
   getStudyFetch,
   deleteStudyFetch,
   putEditStudyFetch,

src/components/PageNavigator/index.tsx

@@ -0,0 +1,58 @@
+import { Button, Flex } from '@chakra-ui/react';
+import { BiChevronRight, BiChevronLeft } from 'react-icons/bi';
+
+import { PageNavigatorProps } from './types';
+
+const PageNavigator = ({ currentPage, setCurrentPage, componentLength, itemsPerPage }: PageNavigatorProps) => {
+  const totalPages = Math.ceil(componentLength / itemsPerPage);
+  const goToPage = (pageNumber: number) => {
+    setCurrentPage(pageNumber);
+  };
+
+  const goToPreviousPage = () => {
+    setCurrentPage((prevPage: number) => Math.max(prevPage - 1, 1));
+  };
+
+  const goToNextPage = () => {
+    setCurrentPage((prevPage: number) => Math.min(prevPage + 1, totalPages));
+  };
+
+  const currentTensDigit = Math.floor((currentPage - 1) / 10) * 10;
+  return (
+    <Flex align="center" justify="center" mt="4">
+      <Button
+        mr="2"
+        bgColor="transparent"
+        disabled={currentPage === 1}
+        leftIcon={<BiChevronLeft />}
+        onClick={goToPreviousPage}
+        rounded="xl"
+      />
+      {Array.from({ length: Math.min(totalPages - currentTensDigit, 10) }, (_, index) => {
+        const pageNumber = currentTensDigit + index + 1;
+        return (
+          <Button
+            key={pageNumber}
+            mr="2"
+            shadow={currentPage === pageNumber ? 'md' : 'none'}
+            bgColor={currentPage === pageNumber ? 'white' : 'transparent'}
+            onClick={() => goToPage(pageNumber)}
+            rounded="xl"
+          >
+            {pageNumber}
+          </Button>
+        );
+      })}
+      <Button
+        mr="2"
+        bgColor="transparent"
+        disabled={currentPage === totalPages}
+        onClick={goToNextPage}
+        rightIcon={<BiChevronRight />}
+        rounded="xl"
+      />
+    </Flex>
+  );
+};
+
+export default PageNavigator;

src/components/PageNavigator/types.ts

@@ -0,0 +1,6 @@
+export interface PageNavigatorProps {
+  currentPage: number;
+  setCurrentPage: (pageNumber: number | ((prevPage: number) => number)) => void;
+  componentLength: number;
+  itemsPerPage: number;
+}

src/containers/studyAsset/StudyAssets/index.tsx

@@ -1,15 +1,24 @@
 'use client';
 
-import { Flex, Grid } from '@chakra-ui/react';
+import { Flex, Grid, useBreakpointValue } from '@chakra-ui/react';
+import { useState } from 'react';
 
+import PageNavigator from '@/components/PageNavigator';
 import StudyAssetCard from '@/components/StudyAssetCard';
 import studyAssetCardDataAll from '@/mocks/studyAssetCardAll';
 
 const StudyAssets = () => {
+  const [currentPage, setCurrentPage] = useState<number>(1);
+
+  const itemsPerPage = useBreakpointValue({ base: 4, md: 8, xl: 10 })!;
+
+  const startIndex = (currentPage - 1) * itemsPerPage;
+  const endIndex = currentPage * itemsPerPage;
+  const currentData = studyAssetCardDataAll.slice(startIndex, endIndex);
   return (
     <Flex direction="column">
-      <Grid gap={{ sm: '2', md: '4', xl: '8' }} templateColumns="repeat(4, 1fr)" w="100%">
-        {studyAssetCardDataAll.map((data) => (
+      <Grid gap={{ sm: '2', md: '4', xl: '8' }} templateColumns={`repeat(${itemsPerPage / 2}, 1fr)`} w="100%">
+        {currentData.map((data) => (
           <StudyAssetCard
             id={data.id}
             key={data.title}
@@ -21,6 +30,12 @@ const StudyAssets = () => {
           />
         ))}
       </Grid>
+      <PageNavigator
+        currentPage={currentPage}
+        setCurrentPage={setCurrentPage}
+        componentLength={studyAssetCardDataAll.length}
+        itemsPerPage={itemsPerPage}
+      />
     </Flex>
   );
 };