refactor: modify QPagination

- 그룹 변경 이벤트 수정
- 외부 함수 주입 추가

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 (

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>
   )

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