테이블 페이지 네이션 입력

frontend/components/unified/UnifiedList.tsx

@@ -83,11 +83,11 @@ export const UnifiedList = forwardRef<HTMLDivElement, UnifiedListProps>((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<HTMLDivElement, UnifiedListProps>((props,
       tableName,
       tableColumns,
       config.viewMode,
-      config.pageable,
-      config.searchable,
+      config.pagination,
       config.pageSize,
       config.cardConfig,
       onRowSelect,

frontend/components/unified/config-panels/UnifiedListConfigPanel.tsx

@@ -420,61 +420,22 @@ export const UnifiedListConfigPanel: React.FC<UnifiedListConfigPanelProps> = ({
 
       <Separator />
 
-      {/* 기능 옵션 */}
+      {/* 페이지네이션 설정 */}
       <div className="space-y-3">
-        <Label className="text-xs font-medium">기능 옵션</Label>
-
-        <div className="flex items-center space-x-2">
-          <Checkbox
-            id="sortable"
-            checked={config.sortable !== false}
-            onCheckedChange={(checked) => updateConfig("sortable", checked)}
-          />
-          <label htmlFor="sortable" className="text-xs">
-            정렬 기능
-          </label>
-        </div>
-
         <div className="flex items-center space-x-2">
           <Checkbox
             id="pagination"
             checked={config.pagination !== false}
             onCheckedChange={(checked) => updateConfig("pagination", checked)}
           />
-          <label htmlFor="pagination" className="text-xs">
+          <label htmlFor="pagination" className="text-xs font-medium">
             페이지네이션
           </label>
         </div>
 
-        <div className="flex items-center space-x-2">
-          <Checkbox
-            id="searchable"
-            checked={config.searchable || false}
-            onCheckedChange={(checked) => updateConfig("searchable", checked)}
-          />
-          <label htmlFor="searchable" className="text-xs">
-            검색 기능
-          </label>
-        </div>
-
-        <div className="flex items-center space-x-2">
-          <Checkbox
-            id="editable"
-            checked={config.editable || false}
-            onCheckedChange={(checked) => updateConfig("editable", checked)}
-          />
-          <label htmlFor="editable" className="text-xs">
-            인라인 편집
-          </label>
-        </div>
-      </div>
-
-      {/* 페이지 크기 */}
-      {config.pagination !== false && (
-        <>
-          <Separator />
+        {config.pagination !== false && (
           <div className="space-y-2">
-            <Label className="text-xs font-medium">페이지당 행 수</Label>
+            <Label className="text-xs">페이지당 행 수</Label>
             <Select
               value={String(config.pageSize || 10)}
               onValueChange={(value) => updateConfig("pageSize", Number(value))}
@@ -491,8 +452,8 @@ export const UnifiedListConfigPanel: React.FC<UnifiedListConfigPanelProps> = ({
               </SelectContent>
             </Select>
           </div>
-        </>
-      )}
+        )}
+      </div>
     </div>
   );
 };

frontend/lib/registry/components/table-list/TableListComponent.tsx

@@ -5060,8 +5060,44 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
   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 (
       <div className="border-border bg-background relative flex h-14 w-full flex-shrink-0 items-center justify-center border-t-2 px-4 sm:h-[60px] sm:px-6">
+        {/* 좌측: 페이지 크기 입력 */}
+        <div className="absolute left-2 flex items-center gap-1 sm:left-6 sm:gap-2">
+          <span className="text-muted-foreground hidden text-xs sm:inline">표시:</span>
+          <input
+            type="number"
+            min={1}
+            max={10000}
+            value={localPageSize}
+            onChange={(e) => {
+              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"
+          />
+          <span className="text-muted-foreground text-xs">개</span>
+        </div>
+
         {/* 중앙 페이지네이션 컨트롤 */}
         <div className="flex items-center gap-2 sm:gap-4">
           <Button
@@ -5179,6 +5215,9 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
     selectedRows.size,
     exportToExcel,
     exportToPdf,
+    localPageSize,
+    onConfigChange,
+    tableConfig,
   ]);
 
   // ========================================