90 lines
2.2 KiB
TypeScript
90 lines
2.2 KiB
TypeScript
// apps/cs/src/common/components/ui/pagination.tsx
|
|
import { Button } from "../button";
|
|
|
|
interface PaginationProps {
|
|
currentPage: number;
|
|
totalPages: number;
|
|
onPageChange: (page: number) => void;
|
|
}
|
|
|
|
function Pagination({ currentPage, totalPages, onPageChange }: PaginationProps) {
|
|
// 표시할 페이지 번호 범위 계산
|
|
const getPageRange = () => {
|
|
const range: number[] = [];
|
|
const maxButtons = 5; // 한 번에 보여줄 최대 페이지 버튼 수
|
|
const halfMaxButtons = Math.floor(maxButtons / 2);
|
|
|
|
let startPage = Math.max(currentPage - halfMaxButtons, 1);
|
|
let endPage = Math.min(startPage + maxButtons - 1, totalPages);
|
|
|
|
if (endPage - startPage + 1 < maxButtons) {
|
|
startPage = Math.max(endPage - maxButtons + 1, 1);
|
|
}
|
|
|
|
for (let i = startPage; i <= endPage; i++) {
|
|
range.push(i);
|
|
}
|
|
|
|
return range;
|
|
};
|
|
|
|
if (totalPages <= 1) return null;
|
|
|
|
return (
|
|
<div className="flex items-center gap-1">
|
|
{/* 첫 페이지 버튼 */}
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() => onPageChange(1)}
|
|
disabled={currentPage === 1}
|
|
>
|
|
{"<<"}
|
|
</Button>
|
|
|
|
{/* 이전 페이지 버튼 */}
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() => onPageChange(currentPage - 1)}
|
|
disabled={currentPage === 1}
|
|
>
|
|
{"<"}
|
|
</Button>
|
|
|
|
{/* 페이지 번호 버튼들 */}
|
|
{getPageRange().map((pageNum) => (
|
|
<Button
|
|
key={pageNum}
|
|
variant={currentPage === pageNum ? "default" : "outline"}
|
|
size="sm"
|
|
onClick={() => onPageChange(pageNum)}
|
|
>
|
|
{pageNum}
|
|
</Button>
|
|
))}
|
|
|
|
{/* 다음 페이지 버튼 */}
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() => onPageChange(currentPage + 1)}
|
|
disabled={currentPage === totalPages}
|
|
>
|
|
{">"}
|
|
</Button>
|
|
|
|
{/* 마지막 페이지 버튼 */}
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() => onPageChange(totalPages)}
|
|
disabled={currentPage === totalPages}
|
|
>
|
|
{">>"}
|
|
</Button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export { Pagination }; |