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

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

Co-Authored-By: Claude <noreply@anthropic.com>

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,
+      }}
     />
   );
 }

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">
-          <div className="flex items-center gap-2">
+          <Button
-            <Button
+            variant="outline"
-              variant="outline"
+            size="sm"
-              size="sm"
+            onClick={() => pagination.onPageChange(pagination.currentPage - 1)}
-              onClick={() => pagination.onPageChange(pagination.currentPage - 1)}
+            disabled={pagination.currentPage === 1}
-              disabled={pagination.currentPage === 1}
+          >
-            >
+            이전
-              이전
+          </Button>
-            </Button>
+          <div className="flex items-center gap-1">
-            <div className="flex items-center gap-1">
+            {Array.from({ length: pagination.totalPages }, (_, i) => i + 1).map((page) => {
-              {Array.from({ length: pagination.totalPages }, (_, i) => i + 1).map((page) => {
+              // 현재 페이지 근처만 표시
-                // 현재 페이지 근처만 표시
+              if (
-                if (
+                page === 1 ||
-                  page === 1 ||
+                page === pagination.totalPages ||
-                  page === pagination.totalPages ||
+                (page >= pagination.currentPage - 2 && page <= pagination.currentPage + 2)
-                  (page >= pagination.currentPage - 2 && page <= pagination.currentPage + 2)
+              ) {
-                ) {
+                return (
-                  return (
+                  <Button
-                    <Button
+                    key={page}
-                      key={page}
+                    variant={page === pagination.currentPage ? "default" : "outline"}
-                      variant={page === pagination.currentPage ? "default" : "outline"}
+                    size="sm"
-                      size="sm"
+                    onClick={() => pagination.onPageChange(page)}
-                      onClick={() => pagination.onPageChange(page)}
+                    className="min-w-[36px]"
-                      className="min-w-[36px]"
+                  >
-                    >
+                    {page}
-                      {page}
+                  </Button>
-                    </Button>
+                );
-                  );
+              } else if (
-                } else if (
+                page === pagination.currentPage - 3 ||
-                  page === pagination.currentPage - 3 ||
+                page === pagination.currentPage + 3
-                  page === pagination.currentPage + 3
+              ) {
-                ) {
+                return <span key={page} className="px-2">...</span>;
-                  return <span key={page} className="px-2">...</span>;
+              }
-                }
+              return null;
-                return null;
+            })}
-              })}
-            </div>
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={() => pagination.onPageChange(pagination.currentPage + 1)}
-              disabled={pagination.currentPage === pagination.totalPages}
-            >
-              다음
-            </Button>
           </div>
-        )}
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => pagination.onPageChange(pagination.currentPage + 1)}
+            disabled={pagination.currentPage === pagination.totalPages}
+          >
+            다음
+          </Button>
+        </div>
       </div>
 
       {/* 일괄 삭제 확인 다이얼로그 */}