106 lines
3.7 KiB
TypeScript
106 lines
3.7 KiB
TypeScript
"use client";
|
|
|
|
/**
|
|
* @common/components DataTable 내부 Pagination과 동일 마크업/클래스 (복제).
|
|
* 공용 패키지 수정 없이 LogHistory 전용으로 둠.
|
|
*/
|
|
import {
|
|
ChevronLeftIcon,
|
|
ChevronRightIcon,
|
|
DoubleArrowLeftIcon,
|
|
DoubleArrowRightIcon,
|
|
} from "@radix-ui/react-icons";
|
|
|
|
import { Button, cn } from "@common/components";
|
|
|
|
export type LogHistoryTablePaginationProps = {
|
|
/** 총 페이지 수 (TanStack table.getPageCount()와 동일) */
|
|
pageCount: number;
|
|
/** 0부터 시작하는 현재 페이지 인덱스 */
|
|
pageIndex: number;
|
|
onPageIndexChange: (pageIndex: number) => void;
|
|
};
|
|
|
|
export function LogHistoryTablePagination({
|
|
pageCount,
|
|
pageIndex: currentPage,
|
|
onPageIndexChange,
|
|
}: LogHistoryTablePaginationProps) {
|
|
const maxVisiblePages = 10;
|
|
|
|
let startPage = Math.max(0, currentPage - maxVisiblePages / 2);
|
|
const endPage = Math.min(pageCount, startPage + maxVisiblePages);
|
|
|
|
if (endPage - startPage < maxVisiblePages) {
|
|
startPage = Math.max(0, endPage - maxVisiblePages);
|
|
}
|
|
|
|
const pageNumbers = Array(endPage - startPage)
|
|
.fill(0)
|
|
.map((_, i) => startPage + i);
|
|
|
|
const canPrevious = currentPage > 0;
|
|
const canNext = pageCount > 0 && currentPage < pageCount - 1;
|
|
|
|
return (
|
|
<div className="mt-[24px] flex items-center justify-center space-x-2">
|
|
<Button
|
|
variant="ghost"
|
|
color="white"
|
|
className="hidden size-10 p-0 lg:flex"
|
|
onClick={() => onPageIndexChange(0)}
|
|
disabled={!canPrevious}
|
|
>
|
|
<span className="sr-only">첫 페이지로</span>
|
|
<DoubleArrowLeftIcon className="size-4" />
|
|
</Button>
|
|
<Button
|
|
variant="ghost"
|
|
color="white"
|
|
className="size-10 p-0"
|
|
onClick={() => onPageIndexChange(currentPage - 1)}
|
|
disabled={!canPrevious}
|
|
>
|
|
<span className="sr-only">이전 페이지로</span>
|
|
<ChevronLeftIcon className="size-4" />
|
|
</Button>
|
|
<div className="flex items-center justify-center text-sm font-medium">
|
|
{pageNumbers.map((pageNumber) => (
|
|
<Button
|
|
key={pageNumber}
|
|
variant="ghost"
|
|
className={cn(
|
|
"inline-block h-10 min-w-10 !bg-transparent p-1 text-foreground hover:!bg-accent",
|
|
currentPage === pageNumber &&
|
|
"!bg-primary !font-bold !text-primary-foreground hover:!bg-primary",
|
|
)}
|
|
onClick={() => onPageIndexChange(pageNumber)}
|
|
>
|
|
{pageNumber + 1}
|
|
</Button>
|
|
))}
|
|
</div>
|
|
<Button
|
|
variant="ghost"
|
|
color="white"
|
|
className="size-10 p-0"
|
|
onClick={() => onPageIndexChange(currentPage + 1)}
|
|
disabled={!canNext}
|
|
>
|
|
<span className="sr-only">다음 페이지로</span>
|
|
<ChevronRightIcon className="size-4" />
|
|
</Button>
|
|
<Button
|
|
variant="ghost"
|
|
color="white"
|
|
className="hidden size-10 p-0 lg:flex"
|
|
onClick={() => onPageIndexChange(Math.max(0, pageCount - 1))}
|
|
disabled={!canNext}
|
|
>
|
|
<span className="sr-only">마지막 페이지로</span>
|
|
<DoubleArrowRightIcon className="size-4" />
|
|
</Button>
|
|
</div>
|
|
);
|
|
}
|