diff --git a/frontend/components/unified/UnifiedList.tsx b/frontend/components/unified/UnifiedList.tsx index de6f740f..4de69fd3 100644 --- a/frontend/components/unified/UnifiedList.tsx +++ b/frontend/components/unified/UnifiedList.tsx @@ -83,11 +83,11 @@ export const UnifiedList = forwardRef((props, maxColumnWidth: 300, }, pagination: { - enabled: config.pageable !== false, - pageSize: config.pageSize || 20, + enabled: config.pagination !== false, + pageSize: config.pageSize || 10, position: "bottom" as const, - showPageSize: true, - pageSizeOptions: [10, 20, 50, 100], + showPageSize: true, // 사용자가 실제 화면에서 페이지 크기 변경 가능 + pageSizeOptions: [5, 10, 20, 50, 100], }, filter: { enabled: config.searchable !== false, @@ -118,8 +118,7 @@ export const UnifiedList = forwardRef((props, tableName, tableColumns, config.viewMode, - config.pageable, - config.searchable, + config.pagination, config.pageSize, config.cardConfig, onRowSelect, diff --git a/frontend/components/unified/config-panels/UnifiedListConfigPanel.tsx b/frontend/components/unified/config-panels/UnifiedListConfigPanel.tsx index f2fd24fd..7325a3f1 100644 --- a/frontend/components/unified/config-panels/UnifiedListConfigPanel.tsx +++ b/frontend/components/unified/config-panels/UnifiedListConfigPanel.tsx @@ -420,61 +420,22 @@ export const UnifiedListConfigPanel: React.FC = ({ - {/* 기능 옵션 */} + {/* 페이지네이션 설정 */}
- - -
- updateConfig("sortable", checked)} - /> - -
-
updateConfig("pagination", checked)} /> -
-
- updateConfig("searchable", checked)} - /> - -
- -
- updateConfig("editable", checked)} - /> - -
-
- - {/* 페이지 크기 */} - {config.pagination !== false && ( - <> - + {config.pagination !== false && (
- +
- - )} + )} + ); }; diff --git a/frontend/lib/registry/components/table-list/TableListComponent.tsx b/frontend/lib/registry/components/table-list/TableListComponent.tsx index ffaacfc3..0e03f279 100644 --- a/frontend/lib/registry/components/table-list/TableListComponent.tsx +++ b/frontend/lib/registry/components/table-list/TableListComponent.tsx @@ -5060,8 +5060,44 @@ export const TableListComponent: React.FC = ({ const paginationJSX = useMemo(() => { if (!tableConfig.pagination?.enabled || isDesignMode) return null; + // 페이지 크기 변경 핸들러 + const handlePageSizeChange = (newSize: number) => { + setLocalPageSize(newSize); + setCurrentPage(1); // 페이지 크기 변경 시 첫 페이지로 이동 + if (onConfigChange) { + onConfigChange({ + ...tableConfig, + pagination: { ...tableConfig.pagination, pageSize: newSize, currentPage: 1 }, + }); + } + }; + + const pageSizeOptions = tableConfig.pagination?.pageSizeOptions || [5, 10, 20, 50, 100]; + return (
+ {/* 좌측: 페이지 크기 입력 */} +
+ 표시: + { + const value = Math.min(10000, Math.max(1, Number(e.target.value) || 1)); + handlePageSizeChange(value); + }} + onBlur={(e) => { + // 포커스 잃을 때 유효 범위로 조정 + const value = Math.min(10000, Math.max(1, Number(e.target.value) || 10)); + handlePageSizeChange(value); + }} + className="border-input bg-background focus:ring-ring h-7 w-14 rounded-md border px-2 text-center text-xs focus:ring-1 focus:outline-none sm:h-8 sm:w-16" + /> + +
+ {/* 중앙 페이지네이션 컨트롤 */}