kjs
/
ERP-node
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

페이지네이션 반응형 적용

This commit is contained in:
hyeonsu 2025-08-27 11:33:27 +09:00
parent 4d8c646759
commit 7ce94574a7
1 changed files with 22 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
frontend/components/common/Pagination.tsx
View File

@ -118,9 +118,9 @@ export function Pagination({
// 항상 페이지네이션을 표시 (1페이지일 때도 표시)
return (
<div className={cn("flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between", className)}>
<div className={cn("flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between", className)}>
{/* 페이지 정보 */}
<div className="text-muted-foreground text-sm">
<div className="text-muted-foreground text-center text-sm lg:text-left">
<span className="font-medium">{startItem.toLocaleString()}</span>
{" - "}
<span className="font-medium">{endItem.toLocaleString()}</span>
@ -129,10 +129,10 @@ export function Pagination({
</div>
{/* 페이지네이션 컨트롤 */}
<div className="flex flex-col gap-4 sm:flex-row sm:items-center">
<div className="flex flex-col items-center gap-4 lg:flex-row">
{/* 페이지 크기 선택 */}
{showPageSizeSelector && onPageSizeChange && (
<div className="flex items-center gap-2">
<div className="flex items-center justify-center gap-2">
<span className="text-muted-foreground text-sm">페이지당</span>
<Select value={itemsPerPage.toString()} onValueChange={handlePageSizeChange}>
<SelectTrigger className="w-20">
@ -151,42 +151,44 @@ export function Pagination({
)}
{/* 페이지 버튼들 */}
<div className="flex items-center gap-1">
<div className="flex items-center justify-center gap-1">
{/* 첫 페이지로 */}
<Button
variant="outline"
variant="ghost"
size="sm"
onClick={() => handlePageChange(1)}
disabled={currentPage === 1}
className="h-9 w-9 p-0"
className="h-8 w-8 p-0 lg:h-9 lg:w-9"
title="첫 페이지"
>
<ChevronsLeft className="h-4 w-4" />
<ChevronsLeft className="h-3 w-3 lg:h-4 lg:w-4" />
</Button>
{/* 이전 페이지 */}
<Button
variant="outline"
variant="ghost"
size="sm"
onClick={() => handlePageChange(currentPage - 1)}
disabled={currentPage === 1}
className="h-9 w-9 p-0"
className="h-8 w-8 p-0 lg:h-9 lg:w-9"
title="이전 페이지"
>
<ChevronLeft className="h-4 w-4" />
<ChevronLeft className="h-3 w-3 lg:h-4 lg:w-4" />
</Button>
{/* 페이지 번호들 */}
{pageNumbers.map((page, index) => (
<div key={index}>
{page === "..." ? (
<span className="text-muted-foreground flex h-9 w-9 items-center justify-center text-sm">...</span>
<span className="text-muted-foreground flex h-8 w-8 items-center justify-center text-sm lg:h-9 lg:w-9">
...
</span>
) : (
<Button
variant={page === currentPage ? "default" : "outline"}
variant={page === currentPage ? "default" : "ghost"}
size="sm"
onClick={() => handlePageChange(page as number)}
className="h-9 w-9 p-0"
className="h-8 w-8 p-0 lg:h-9 lg:w-9"
>
{page}
</Button>
@ -196,26 +198,26 @@ export function Pagination({
{/* 다음 페이지 */}
<Button
variant="outline"
variant="ghost"
size="sm"
onClick={() => handlePageChange(currentPage + 1)}
disabled={currentPage === totalPages}
className="h-9 w-9 p-0"
className="h-8 w-8 p-0 lg:h-9 lg:w-9"
title="다음 페이지"
>
<ChevronRight className="h-4 w-4" />
<ChevronRight className="h-3 w-3 lg:h-4 lg:w-4" />
</Button>
{/* 마지막 페이지로 */}
<Button
variant="outline"
variant="ghost"
size="sm"
onClick={() => handlePageChange(totalPages)}
disabled={currentPage === totalPages}
className="h-9 w-9 p-0"
className="h-8 w-8 p-0 lg:h-9 lg:w-9"
title="마지막 페이지"
>
<ChevronsRight className="h-4 w-4" />
<ChevronsRight className="h-3 w-3 lg:h-4 lg:w-4" />
</Button>
</div>
</div>