From aab9084f1b6d42dd4e62361086ccbd9cc021f9ff Mon Sep 17 00:00:00 2001
From: yoosangwook <yoo32767@gmail.com>
Date: Thu, 17 Oct 2024 09:54:15 +0900
Subject: [PATCH] refactor: modify QPagination
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 그룹 변경 이벤트 수정
- 외부 함수 주입 추가
---
 src/components/Playground.jsx                  |  3 +++
 .../common/pagination/QPagination.jsx          | 18 ++++++++++++------
 src/hooks/usePagination.js                     |  2 +-
 3 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/src/components/Playground.jsx b/src/components/Playground.jsx
index a882bdd9..6393158d 100644
--- a/src/components/Playground.jsx
+++ b/src/components/Playground.jsx
@@ -137,6 +137,9 @@ export default function Playground() {
     pageSize: 10,
     pagePerBlock: 10,
     totalCount: 501,
+    handleChangePage: (page) => {
+      console.log('page', page)
+    },
   }
 
   return (
diff --git a/src/components/common/pagination/QPagination.jsx b/src/components/common/pagination/QPagination.jsx
index 4175036b..54a61541 100644
--- a/src/components/common/pagination/QPagination.jsx
+++ b/src/components/common/pagination/QPagination.jsx
@@ -1,36 +1,42 @@
 import usePagination from '@/hooks/usePagination'
 
 export default function QPagination(props) {
-  const { currentPage, pageRange, changePage, totalPages } = usePagination(props)
+  const { handleChangePage, pagePerBlock = 10 } = props
+  const { currentPage, changePage, pageGroup, totalPages, pages, startPage, endPage, pageRange } = usePagination(props)
+
+  const handlePage = (page) => {
+    handleChangePage(page)
+    changePage(page)
+  }
 
   return (
     <ol className="pagination">
       <li className="page-item first">
-        <button onClick={() => changePage(1)}></button>
+        <button onClick={() => handlePage(1)}></button>
       </li>
       <li className="page-item prev">
         <button
           onClick={() => {
             if (currentPage === 1) return
-            changePage(currentPage - 1)
+            handlePage(Math.max(1, (pageGroup - 2) * pagePerBlock + 1))
           }}
         ></button>
       </li>
       {pageRange.map((page) => (
         <li className={page === currentPage ? `page-item on` : `page-item`} key={page}>
-          <button onClick={() => changePage(page)}>{page}</button>
+          <button onClick={() => handlePage(page)}>{page}</button>
         </li>
       ))}
       <li className="page-item next">
         <button
           onClick={() => {
             if (currentPage === totalPages) return
-            changePage(currentPage + 1)
+            handlePage(Math.max(1, pageGroup * pagePerBlock + 1))
           }}
         ></button>
       </li>
       <li className="page-item last">
-        <button onClick={() => changePage(totalPages)}></button>
+        <button onClick={() => handlePage(totalPages)}></button>
       </li>
     </ol>
   )
diff --git a/src/hooks/usePagination.js b/src/hooks/usePagination.js
index 818275e1..4fc3a959 100644
--- a/src/hooks/usePagination.js
+++ b/src/hooks/usePagination.js
@@ -24,7 +24,7 @@ const usePagination = ({ pageNo = 1, pageSize = 10, pagePerBlock = 10, totalCoun
     return i + startPage
   })
 
-  return { currentPage, pageRange, changePage, totalPages }
+  return { currentPage, changePage, pageGroup, totalPages, pages, startPage, endPage, pageRange }
 }
 
 export default usePagination