feat: implement pagination settings in split panel layout

- Added pagination configuration options for both left and right panels in the SplitPanelLayoutComponent, allowing for server-side data retrieval in pages.
- Introduced a new PaginationConfig interface to manage pagination settings, including page size.
- Enhanced data loading functions to support pagination, improving data management and user experience.

Made-with: Cursor

frontend/components/v2/config-panels/V2SplitPanelLayoutConfigPanel.tsx

@@ -82,9 +82,10 @@ import {
   arrayMove,
 } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
-import type {
-  SplitPanelLayoutConfig,
-  AdditionalTabConfig,
+import {
+  MAX_LOAD_ALL_SIZE,
+  type SplitPanelLayoutConfig,
+  type AdditionalTabConfig,
 } from "@/lib/registry/components/v2-split-panel-layout/types";
 import type { TableInfo, ColumnInfo } from "@/types/screen";
 
@@ -1158,6 +1159,41 @@ export const V2SplitPanelLayoutConfigPanel: React.FC<
                   updateLeftPanel({ showItemAddButton: checked })
                 }
               />
+              <SwitchRow
+                label="페이징 처리"
+                description="서버 페이지 단위 조회 (필터/정렬/계층 비활성화)"
+                checked={config.leftPanel?.pagination?.enabled ?? false}
+                onCheckedChange={(checked) =>
+                  updateLeftPanel({
+                    pagination: {
+                      ...config.leftPanel?.pagination,
+                      enabled: checked,
+                      pageSize: config.leftPanel?.pagination?.pageSize ?? 20,
+                    },
+                  })
+                }
+              />
+              {config.leftPanel?.pagination?.enabled && (
+                <div className="ml-4 space-y-1">
+                  <Label className="text-[10px]">페이지 크기</Label>
+                  <Input
+                    type="number"
+                    min={1}
+                    max={MAX_LOAD_ALL_SIZE}
+                    value={config.leftPanel?.pagination?.pageSize ?? 20}
+                    onChange={(e) =>
+                      updateLeftPanel({
+                        pagination: {
+                          ...config.leftPanel?.pagination,
+                          enabled: true,
+                          pageSize: Math.min(MAX_LOAD_ALL_SIZE, Math.max(1, Number(e.target.value) || 20)),
+                        },
+                      })
+                    }
+                    className="h-7 w-24 text-xs"
+                  />
+                </div>
+              )}
             </div>
 
             {/* 좌측 패널 컬럼 설정 (접이식) */}
@@ -1564,6 +1600,41 @@ export const V2SplitPanelLayoutConfigPanel: React.FC<
                   updateRightPanel({ showDelete: checked })
                 }
               />
+              <SwitchRow
+                label="페이징 처리"
+                description="서버 페이지 단위 조회 (탭 포함 적용)"
+                checked={config.rightPanel?.pagination?.enabled ?? false}
+                onCheckedChange={(checked) =>
+                  updateRightPanel({
+                    pagination: {
+                      ...config.rightPanel?.pagination,
+                      enabled: checked,
+                      pageSize: config.rightPanel?.pagination?.pageSize ?? 20,
+                    },
+                  })
+                }
+              />
+              {config.rightPanel?.pagination?.enabled && (
+                <div className="ml-4 space-y-1">
+                  <Label className="text-[10px]">페이지 크기</Label>
+                  <Input
+                    type="number"
+                    min={1}
+                    max={MAX_LOAD_ALL_SIZE}
+                    value={config.rightPanel?.pagination?.pageSize ?? 20}
+                    onChange={(e) =>
+                      updateRightPanel({
+                        pagination: {
+                          ...config.rightPanel?.pagination,
+                          enabled: true,
+                          pageSize: Math.min(MAX_LOAD_ALL_SIZE, Math.max(1, Number(e.target.value) || 20)),
+                        },
+                      })
+                    }
+                    className="h-7 w-24 text-xs"
+                  />
+                </div>
+              )}
             </div>
 
             {/* 우측 패널 컬럼 설정 (접이식) */}