pagination 훅 함수 :push

board-front/src/hooks/pagination.hook.ts

@@ -20,7 +20,26 @@ const usePagination = <T>(countPerPage: number) => {
   const [totalSection, setTotalSection] = useState<number>(1);
 
   //          function: 보여줄 객체의 리스트 추출 함수           //
-  //const setView
+  const setView = () => {
+    const FIRST_INDEX = countPerPage * (currentPage - 1);
+    const LAST_INDEX =
+      totalList.length > countPerPage * currentPage
+        ? countPerPage * currentPage
+        : totalList.length;
+    const viewList = totalList.slice(FIRST_INDEX, LAST_INDEX);
+    setViewList(viewList);
+  };
+
+  //          function: 보여줄 페이지 리스트 추출 함수           //
+  const setViewPage = () => {
+    const FIRST_INDEX = 10 * (currentSection - 1);
+    const LAST_INDEX =
+      totalPageList.length > 10 * currentSection
+        ? 10 * currentSection
+        : totalPageList.length;
+    const viewPageList = totalPageList.slice(FIRST_INDEX, LAST_INDEX);
+    setViewPageList(viewPageList);
+  };
 
   //          effect: total list가 변경될 때마다 실행될 작업          //
   useEffect(() => {
@@ -36,8 +55,21 @@ const usePagination = <T>(countPerPage: number) => {
 
     setCurrentPage(1);
     setCurrentSection(1);
+
+    setView();
+    setViewPage();
   }, [totalList]);
 
+  //          effect: current page가 변경될 때마다 실행될 작업          //
+  useEffect(() => {
+    setView();
+  }, [currentPage]);
+
+  //          effect: current section이 변경될 때마다 실행될 작업          //
+  useEffect(() => {
+    setViewPage();
+  }, [currentPage]);
+
   return {
     currentPage /* 현재 페이지가 어떤 위치에 있는지 */,
     setCurrentPage,