feat: 테이블 검색 필터 위젯 구현 완료

- TableOptionsContext 기반 테이블 자동 감지 시스템 구현
- 독립 위젯으로 드래그앤드롭 배치 가능
- 3가지 기능: 컬럼 가시성, 필터 설정, 그룹 설정
- FlowWidget, TableList, SplitPanel 등 모든 테이블 컴포넌트 지원
- 유틸리티 카테고리에 등록 (1920×80px)
- 위젯 크기 제어 가이드 룰 파일에 추가

frontend/lib/registry/components/split-panel-layout/SplitPanelLayoutComponent.tsx

@@ -12,6 +12,8 @@ import { useToast } from "@/hooks/use-toast";
 import { tableTypeApi } from "@/lib/api/screen";
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription } from "@/components/ui/dialog";
 import { Label } from "@/components/ui/label";
+import { useTableOptions } from "@/contexts/TableOptionsContext";
+import { TableFilter, ColumnVisibility } from "@/types/table-options";
 
 export interface SplitPanelLayoutComponentProps extends ComponentRendererProps {
   // 추가 props
@@ -37,6 +39,15 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
   const minLeftWidth = componentConfig.minLeftWidth || 200;
   const minRightWidth = componentConfig.minRightWidth || 300;
 
+  // TableOptions Context
+  const { registerTable, unregisterTable } = useTableOptions();
+  const [leftFilters, setLeftFilters] = useState<TableFilter[]>([]);
+  const [leftGrouping, setLeftGrouping] = useState<string[]>([]);
+  const [leftColumnVisibility, setLeftColumnVisibility] = useState<ColumnVisibility[]>([]);
+  const [rightFilters, setRightFilters] = useState<TableFilter[]>([]);
+  const [rightGrouping, setRightGrouping] = useState<string[]>([]);
+  const [rightColumnVisibility, setRightColumnVisibility] = useState<ColumnVisibility[]>([]);
+
   // 데이터 상태
   const [leftData, setLeftData] = useState<any[]>([]);
   const [rightData, setRightData] = useState<any[] | any>(null); // 조인 모드는 배열, 상세 모드는 객체
@@ -272,6 +283,68 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
     [rightTableColumns],
   );
 
+  // 좌측 테이블 등록 (Context에 등록)
+  useEffect(() => {
+    const leftTableName = componentConfig.leftPanel?.tableName;
+    if (!leftTableName || isDesignMode) return;
+
+    const leftTableId = `split-panel-left-${component.id}`;
+    const leftColumns = componentConfig.leftPanel?.displayColumns || [];
+
+    if (leftColumns.length > 0) {
+      registerTable({
+        tableId: leftTableId,
+        label: `${component.title || "분할 패널"} (좌측)`,
+        tableName: leftTableName,
+        columns: leftColumns.map((col: string) => ({
+          columnName: col,
+          columnLabel: leftColumnLabels[col] || col,
+          inputType: "text",
+          visible: true,
+          width: 150,
+          sortable: true,
+          filterable: true,
+        })),
+        onFilterChange: setLeftFilters,
+        onGroupChange: setLeftGrouping,
+        onColumnVisibilityChange: setLeftColumnVisibility,
+      });
+
+      return () => unregisterTable(leftTableId);
+    }
+  }, [component.id, componentConfig.leftPanel?.tableName, componentConfig.leftPanel?.displayColumns, leftColumnLabels, component.title, isDesignMode]);
+
+  // 우측 테이블 등록 (Context에 등록)
+  useEffect(() => {
+    const rightTableName = componentConfig.rightPanel?.tableName;
+    if (!rightTableName || isDesignMode) return;
+
+    const rightTableId = `split-panel-right-${component.id}`;
+    const rightColumns = rightTableColumns.map((col: any) => col.columnName || col.column_name).filter(Boolean);
+
+    if (rightColumns.length > 0) {
+      registerTable({
+        tableId: rightTableId,
+        label: `${component.title || "분할 패널"} (우측)`,
+        tableName: rightTableName,
+        columns: rightColumns.map((col: string) => ({
+          columnName: col,
+          columnLabel: rightColumnLabels[col] || col,
+          inputType: "text",
+          visible: true,
+          width: 150,
+          sortable: true,
+          filterable: true,
+        })),
+        onFilterChange: setRightFilters,
+        onGroupChange: setRightGrouping,
+        onColumnVisibilityChange: setRightColumnVisibility,
+      });
+
+      return () => unregisterTable(rightTableId);
+    }
+  }, [component.id, componentConfig.rightPanel?.tableName, rightTableColumns, rightColumnLabels, component.title, isDesignMode]);
+
   // 좌측 테이블 컬럼 라벨 로드
   useEffect(() => {
     const loadLeftColumnLabels = async () => {