File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
type PaginationProps = {
totalItems: number;
totalPages: number;
currentPage: number;
size: number;
onPageChange: (page: number) => void;
};
export function Pagination({
totalItems,
totalPages,
currentPage,
size = 10,
onPageChange,
}: PaginationProps) {
if (totalItems === 0) {
return null;
}
const startPage =
Math.floor((currentPage - 1) / size)
* size + 1;
const endPage =
Math.min(startPage + size - 1, totalPages);
const pages = Array.from(
{length: endPage - startPage + 1},
(_, idx) => startPage + idx
);
return (
<div className="page">
<button
className="btn_page_first"
aria-label="첫 페이지"
onClick={() => onPageChange(1)}
disabled={currentPage === 1}
>
<i></i>
</button>
<button
className="btn_page_prev"
aria-label="이전 페이지"
onClick={() =>
onPageChange(
Math.max(startPage - size, 1)
)
}
disabled={startPage === 1}
>
<i></i>
</button>
{pages.map(page => (
<button
key={page}
className={page === currentPage ? 'on' : ''}
onClick={() => onPageChange(page)}
disabled={page === currentPage}
>
{page}
</button>
))}
<button
className="btn_page_next"
aria-label="다음 페이지"
onClick={() =>
onPageChange(
Math.min(
startPage + size,
totalPages
)
)
}
disabled={endPage >= totalPages}
>
<i></i>
</button>
<button
className="btn_page_last"
aria-label="마지막 페이지"
onClick={() => onPageChange(totalPages)}
disabled={currentPage === totalPages}
>
<i></i>
</button>
</div>
);
}