From e48b4df1c65cfbf388c7fa8d9874b6ce1a366841 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9C=A0=EB=B3=91=EC=B2=A0?= <zomking@gmail.com>
Date: Thu, 22 Jan 2026 23:17:02 +0900
Subject: [PATCH] =?UTF-8?q?fix(WEB):=20=ED=8E=98=EC=9D=B4=EC=A7=80?=
 =?UTF-8?q?=EB=84=A4=EC=9D=B4=EC=85=98=20=EA=B0=9C=EC=84=A0=20=EB=B0=8F=20?=
 =?UTF-8?q?=EA=B1=B0=EB=9E=98=EC=B2=98=EA=B4=80=EB=A6=AC=20=ED=8E=98?=
 =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../client-management-sales-admin/page.tsx    | 15 +++
 .../templates/IntegratedListTemplateV2.tsx    | 94 +++++++++----------
 2 files changed, 61 insertions(+), 48 deletions(-)

diff --git a/src/app/[locale]/(protected)/sales/client-management-sales-admin/page.tsx b/src/app/[locale]/(protected)/sales/client-management-sales-admin/page.tsx
index 3ded7d50..41476952 100644
--- a/src/app/[locale]/(protected)/sales/client-management-sales-admin/page.tsx
+++ b/src/app/[locale]/(protected)/sales/client-management-sales-admin/page.tsx
@@ -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,
+      }}
     />
   );
 }
\ No newline at end of file
diff --git a/src/components/templates/IntegratedListTemplateV2.tsx b/src/components/templates/IntegratedListTemplateV2.tsx
index d6881080..74cb922c 100644
--- a/src/components/templates/IntegratedListTemplateV2.tsx
+++ b/src/components/templates/IntegratedListTemplateV2.tsx
@@ -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>
 
       {/* 일괄 삭제 확인 다이얼로그 */}