feat: Add QPagination Component

src/components/Playground.jsx

@@ -20,6 +20,7 @@ import Image from 'next/image'
 
 import QInput from './common/input/Qinput'
 import QSelect from './common/select/QSelect'
+import QPagination from './common/pagination/QPagination'
 
 export default function Playground() {
   const [useCadFile, setUseCadFile] = useRecoilState(useCadFileState)
@@ -41,6 +42,7 @@ export default function Playground() {
   const [radioInput, setRadioInput] = useState('')
   const [checkboxInput, setCheckboxInput] = useState([])
   const [selectedValue, setSelectedValue] = useState('')
+
   useEffect(() => {
     console.log('textInput:', textInput)
   }, [textInput])
@@ -130,6 +132,13 @@ export default function Playground() {
     })
   }
 
+  const paginationProps = {
+    pageNo: 1,
+    pageSize: 10,
+    pagePerBlock: 10,
+    totalCount: 501,
+  }
+
   return (
     <>
       <div className="container mx-auto p-4 m-4 border">
@@ -290,6 +299,9 @@ export default function Playground() {
             Sweetalert - confirm
           </Button>
         </div>
+        <div className="my-2">
+          <QPagination {...paginationProps} />
+        </div>
       </div>
     </>
   )

src/components/common/pagination/QPagination.jsx

@@ -0,0 +1,37 @@
+import usePagination from '@/hooks/usePagination'
+
+export default function QPagination(props) {
+  const { currentPage, pageRange, changePage, totalPages } = usePagination(props)
+
+  return (
+    <ol className="pagination">
+      <li className="page-item first">
+        <button onClick={() => changePage(1)}></button>
+      </li>
+      <li className="page-item prev">
+        <button
+          onClick={() => {
+            if (currentPage === 1) return
+            changePage(currentPage - 1)
+          }}
+        ></button>
+      </li>
+      {pageRange.map((page) => (
+        <li className={page === currentPage ? `page-item on` : `page-item`} key={page}>
+          <button onClick={() => changePage(page)}>{page}</button>
+        </li>
+      ))}
+      <li className="page-item next">
+        <button
+          onClick={() => {
+            if (currentPage === totalPages) return
+            changePage(currentPage + 1)
+          }}
+        ></button>
+      </li>
+      <li className="page-item last">
+        <button onClick={() => changePage(totalPages)}></button>
+      </li>
+    </ol>
+  )
+}

src/hooks/usePagination.js

@@ -0,0 +1,30 @@
+import { useState } from 'react'
+
+/**
+ * 페이지네이션 훅
+ * @param {number} pageNo 현재 페이지 {optional}
+ * @param {number} pageSize 페이지당 아이템 수 {optional}
+ * @param {number} pagePerBlock 페이지 그룹 수 {optional}
+ * @param {number} totalCount 전체 아이템 수 {required}
+ * @returns
+ */
+const usePagination = ({ pageNo = 1, pageSize = 10, pagePerBlock = 10, totalCount = 0 }) => {
+  const [currentPage, setCurrentPage] = useState(pageNo)
+  const changePage = (page) => {
+    setCurrentPage(page)
+  }
+
+  const pageGroup = Math.floor((currentPage - 1) / pagePerBlock) + 1
+  const totalPages = Math.ceil(totalCount / pageSize)
+  const pages = Array.from({ length: totalPages }, (_, i) => i + 1)
+  const startPage = Math.max(1, (pageGroup - 1) * pagePerBlock + 1)
+  const endPage = Math.min(totalPages, pageGroup * pagePerBlock)
+  const pageRange = Array.from({ length: endPage !== totalPages ? pagePerBlock : endPage - startPage + 1 }, (_, i) => {
+    if (i + startPage > endPage) return
+    return i + startPage
+  })
+
+  return { currentPage, pageRange, changePage, totalPages }
+}
+
+export default usePagination