fix(WEB): 페이지네이션 개선 및 거래처관리 페이지 수정

- IntegratedListTemplateV2: 1페이지여도 페이지네이션 영역 항상 표시
- 거래처관리: externalPagination 추가로 서버 페이지네이션 정보 전달
- 거래처관리: handlePageChange Hooks 순서 에러 수정

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
유병철
2026-01-22 23:17:02 +09:00
parent 3b328204a2
commit e48b4df1c6
2 changed files with 61 additions and 48 deletions

View File

@@ -253,6 +253,12 @@ export default function CustomerAccountManagementPage() {
});
}, [currentPage, itemsPerPage, searchTerm, filterType, fetchClients, loadTotalStats]);
// 페이지 변경 핸들러 (Hooks 순서 보장을 위해 조건부 return 전에 정의)
const handlePageChange = useCallback((page: number) => {
setCurrentPage(page);
setSelectedItems(new Set()); // 페이지 변경 시 선택 초기화
}, []);
// 핸들러 - 페이지 기반 네비게이션
const handleAddNew = () => {
router.push("/sales/client-management-sales-admin/new");
@@ -611,6 +617,8 @@ export default function CustomerAccountManagementPage() {
itemsPerPage,
// 서버 사이드 페이지네이션 + 클라이언트 사이드 탭 필터링
// externalPagination으로 페이지네이션은 외부에서 제어
clientSideFiltering: true,
searchFilter: (item, searchValue) => {
@@ -695,6 +703,13 @@ export default function CustomerAccountManagementPage() {
config={clientManagementConfig}
initialData={clients}
initialTotalCount={pagination?.total || clients.length}
externalPagination={{
currentPage,
totalPages,
totalItems: pagination?.total || clients.length,
itemsPerPage,
onPageChange: handlePageChange,
}}
/>
);
}

View File

@@ -852,59 +852,57 @@ export function IntegratedListTemplateV2<T = any>({
</CardContent>
</Card>
{/* 페이지네이션 - 데스크톱에서만 표시 */}
{/* 페이지네이션 - 데스크톱에서만 표시 (1페이지여도 항상 표시) */}
<div className="hidden xl:flex items-center justify-between">
<div className="text-sm text-muted-foreground">
{pagination.totalItems} {pagination.totalItems > 0 ? startIndex + 1 : 0}-{Math.min(startIndex + pagination.itemsPerPage, pagination.totalItems)}
</div>
{pagination.totalPages > 1 && (
<div className="flex items-center gap-2">
<Button
variant="outline"
size="sm"
onClick={() => pagination.onPageChange(pagination.currentPage - 1)}
disabled={pagination.currentPage === 1}
>
</Button>
<div className="flex items-center gap-1">
{Array.from({ length: pagination.totalPages }, (_, i) => i + 1).map((page) => {
// 현재 페이지 근처만 표시
if (
page === 1 ||
page === pagination.totalPages ||
(page >= pagination.currentPage - 2 && page <= pagination.currentPage + 2)
) {
return (
<Button
key={page}
variant={page === pagination.currentPage ? "default" : "outline"}
size="sm"
onClick={() => pagination.onPageChange(page)}
className="min-w-[36px]"
>
{page}
</Button>
);
} else if (
page === pagination.currentPage - 3 ||
page === pagination.currentPage + 3
) {
return <span key={page} className="px-2">...</span>;
}
return null;
})}
</div>
<Button
variant="outline"
size="sm"
onClick={() => pagination.onPageChange(pagination.currentPage + 1)}
disabled={pagination.currentPage === pagination.totalPages}
>
</Button>
<div className="flex items-center gap-2">
<Button
variant="outline"
size="sm"
onClick={() => pagination.onPageChange(pagination.currentPage - 1)}
disabled={pagination.currentPage === 1}
>
</Button>
<div className="flex items-center gap-1">
{Array.from({ length: pagination.totalPages }, (_, i) => i + 1).map((page) => {
// 현재 페이지 근처만 표시
if (
page === 1 ||
page === pagination.totalPages ||
(page >= pagination.currentPage - 2 && page <= pagination.currentPage + 2)
) {
return (
<Button
key={page}
variant={page === pagination.currentPage ? "default" : "outline"}
size="sm"
onClick={() => pagination.onPageChange(page)}
className="min-w-[36px]"
>
{page}
</Button>
);
} else if (
page === pagination.currentPage - 3 ||
page === pagination.currentPage + 3
) {
return <span key={page} className="px-2">...</span>;
}
return null;
})}
</div>
)}
<Button
variant="outline"
size="sm"
onClick={() => pagination.onPageChange(pagination.currentPage + 1)}
disabled={pagination.currentPage === pagination.totalPages}
>
</Button>
</div>
</div>
{/* 일괄 삭제 확인 다이얼로그 */}