feat : 재사용 가능한 페이지네이션 구현 (#92)

Author: wldnjs990

src/pages/Admin/Report.tsx

@@ -5,6 +5,7 @@ import { AlarmIcon } from '@/assets/icons';
 
 import AdminPageTitle from './components/AdminPageTitle';
 import ListHeaderFrame from './components/ListHeaderFrame';
+import PagenationNavigation from './components/PagenationNavigation';
 import ReportDetailModal from './components/ReportDetailModal';
 import ReportHandlingModal from './components/ReportHandlingModal';
 import ReportListItem from './components/ReportListItem';
@@ -19,28 +20,33 @@ export default function ReportManage() {
     currentPage: '1',
     totalPages: '0',
   });
+
   const [selectedReport, setSelectReport] = useState<Report | null>(null);
   const [selectedReportId, setSelectedReportId] = useState<number | null>(null);
 
-  // const [allReports, setAllReports] = useState();
-
   const [reportQueryString, setReportQueryString] = useState<ReportQueryString>({
     reportType: null,
     status: 'PENDING',
     page: '1',
-    size: '3',
+    size: '2',
   });
+
   const handleGetReports = async (reportQueryString: ReportQueryString) => {
     const res = await getReports(reportQueryString);
     if (res?.status === 200) {
-      console.log(res.data.data.content);
-      setReports(res.data.data.content);
+      const data = res.data.data;
+      setReports(data.content);
       setReportPages(() => ({
-        currentPage: res.data.data.currentPage,
-        totalPages: res.data.data.totalPages,
+        currentPage: data.currentPage,
+        totalPages: data.totalPages,
       }));
     }
   };
+
+  const handleNowPage = (page: string) => {
+    setReportQueryString((cur) => ({ ...cur, page: page }));
+  };
+
   useEffect(() => {
     handleGetReports(reportQueryString);
   }, [reportQueryString]);
@@ -68,39 +74,11 @@ export default function ReportManage() {
               setSelectReport={setSelectReport}
             />
           ))}
-          <div className="bg-accent-1 mt-5 flex h-10 w-full items-center justify-center">
-            <div className="flex gap-2">
-              <button
-                className="h-full w-10 rounded-2xl border bg-white"
-                onClick={() => {
-                  const nowPage = Number(reportQueryString.page);
-                  if (nowPage > 1) {
-                    const newPage = (nowPage - 1).toString();
-                    setReportQueryString((cur) => ({ ...cur, page: newPage }));
-                  }
-                }}
-              >
-                뒤
-              </button>
-              <span>
-                {reportPages.currentPage}/{reportPages.totalPages}
-              </span>
-              <button
-                className="h-full w-10 rounded-2xl border bg-white"
-                onClick={() => {
-                  const nowPage = Number(reportQueryString.page);
-                  const totalPage = Number(reportPages.totalPages);
-                  if (nowPage < totalPage) {
-                    const newPage = (nowPage + 1).toString();
-                    console.log(newPage);
-                    setReportQueryString((cur) => ({ ...cur, page: newPage }));
-                  }
-                }}
-              >
-                앞
-              </button>
-            </div>
-          </div>
+          <PagenationNavigation
+            totalPage={Number(reportPages.totalPages)}
+            buttonLength={3}
+            handlePageNumberButtonClick={handleNowPage}
+          />
         </section>
         {detailModalOpen && (
           <ReportDetailModal selectedReport={selectedReport} closeEvent={setDetailModalOpen} />

src/pages/Admin/components/PagenationNavigation.tsx

@@ -0,0 +1,93 @@
+import { useState } from 'react';
+import { twMerge } from 'tailwind-merge';
+
+interface PagenationNavigation {
+  totalPage: number;
+  buttonLength: number;
+  handlePageNumberButtonClick: (page: string) => void;
+}
+export default function PagenationNavigation({
+  totalPage,
+  buttonLength,
+  handlePageNumberButtonClick,
+}: PagenationNavigation) {
+  const totalSection = Math.ceil(totalPage / buttonLength) - 1;
+  const [nowSection, setNowSection] = useState<number>(0);
+  const [nowPageNumberAt, setNowPageNumberAt] = useState(1);
+
+  // 네비게이션 시작점, 끝점
+  const navigationRange = {
+    start: nowSection * buttonLength + 1,
+    end: nowSection * buttonLength + buttonLength,
+  };
+
+  // 페이지 버튼 배열
+  const pageNumberButtonArray = Array.from(
+    { length: navigationRange.end - navigationRange.start + 1 },
+    (_, index) => navigationRange.start + index,
+  );
+
+  // 페이지 버튼 클릭시 해당 번호값이 파라미터에 담김
+  const handlePageButtonClick = (page: number) => {
+    const pageString = page.toString();
+    handlePageNumberButtonClick(pageString);
+    setNowPageNumberAt(page);
+  };
+
+  const handlePrevButtonClick = () => {
+    if (nowSection > 0) {
+      const prev = (nowSection - 1) * buttonLength + buttonLength;
+      setNowSection((cur) => cur - 1);
+      handlePageButtonClick(prev);
+    }
+  };
+
+  const handleNextButtonClick = () => {
+    if (nowSection < totalSection) {
+      const next = (nowSection + 1) * buttonLength + 1;
+      setNowSection((cur) => cur + 1);
+      handlePageButtonClick(next);
+    }
+  };
+
+  const buttonStyle = 'border bg-white px-2 py-1 disabled:bg-gray-20';
+
+  return (
+    <div className="mt-5 flex h-10 w-full items-center justify-center">
+      <div className="flex items-center">
+        <button
+          className={twMerge(buttonStyle)}
+          disabled={nowSection <= 0}
+          onClick={() => {
+            handlePrevButtonClick();
+          }}
+        >
+          prev
+        </button>
+        {pageNumberButtonArray.map((num) => {
+          if (totalPage < num) return null;
+          return (
+            <button
+              key={num}
+              className={twMerge(buttonStyle, nowPageNumberAt === num && 'bg-accent-3')}
+              onClick={() => {
+                handlePageButtonClick(num);
+              }}
+            >
+              {num}
+            </button>
+          );
+        })}
+        <button
+          className={twMerge(buttonStyle)}
+          disabled={nowSection >= totalSection}
+          onClick={() => {
+            handleNextButtonClick();
+          }}
+        >
+          next
+        </button>
+      </div>
+    </div>
+  );
+}