qcast-front/src/hooks/usePagination.js
yoosangwook 4eb2497139 fix: 페이징 단위 넘기기 버튼 오류 수정
- 다음 단위 없는데도 넘어가는 현상 수정
2024-10-24 17:57:38 +09:00

44 lines
1.6 KiB
JavaScript

import { useEffect, 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)
}
useEffect(() => {
setCurrentPage(pageNo)
}, [pageNo])
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
})
// console.log('pageRange', pageRange)
// console.log('startPage', startPage)
// console.log('endPage', endPage)
// console.log('totalPages', totalPages)
// console.log('pageGroup', pageGroup)
// console.log('pagePerBlock', pagePerBlock)
// console.log('currentPage', currentPage)
// console.log('pageNo', pageNo)
return { currentPage, changePage, pageGroup, totalPages, pages, startPage, endPage, pageRange }
}
export default usePagination