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

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

.cursor/rules/ai-developer-collaboration-rules.mdc

@@ -278,4 +278,117 @@ const hiddenColumns = new Set([
 
 ---
 
+## 11. 화면관리 시스템 위젯 개발 가이드
+
+### 위젯 크기 설정의 핵심 원칙
+
+화면관리 시스템에서 위젯을 개발할 때, **크기 제어는 상위 컨테이너(`RealtimePreviewDynamic`)가 담당**합니다.
+
+#### ✅ 올바른 크기 설정 패턴
+
+```tsx
+// 위젯 컴포넌트 내부
+export function YourWidget({ component }: YourWidgetProps) {
+  return (
+    <div
+      className="flex h-full w-full items-center justify-between gap-2"
+      style={{
+        padding: component.style?.padding || "0.75rem",
+        backgroundColor: component.style?.backgroundColor,
+        // ❌ width, height, minHeight 등 크기 관련 속성은 제거!
+      }}
+    >
+      {/* 위젯 내용 */}
+    </div>
+  );
+}
+```
+
+#### ❌ 잘못된 크기 설정 패턴
+
+```tsx
+// 이렇게 하면 안 됩니다!
+<div
+  style={{
+    width: component.style?.width || "100%",    // ❌ 상위에서 이미 제어함
+    height: component.style?.height || "80px",  // ❌ 상위에서 이미 제어함
+    minHeight: "80px",                           // ❌ 내부 컨텐츠가 줄어듦
+  }}
+>
+```
+
+### 이유
+
+1. **`RealtimePreviewDynamic`**이 `baseStyle`로 이미 크기를 제어:
+
+   ```tsx
+   const baseStyle = {
+     left: `${position.x}px`,
+     top: `${position.y}px`,
+     width: getWidth(), // size.width 사용
+     height: getHeight(), // size.height 사용
+   };
+   ```
+
+2. 위젯 내부에서 크기를 다시 설정하면:
+   - 중복 설정으로 인한 충돌
+   - 내부 컨텐츠가 설정한 크기보다 작게 표시됨
+   - 편집기에서 설정한 크기와 실제 렌더링 크기 불일치
+
+### 위젯이 관리해야 할 스타일
+
+위젯 컴포넌트는 **위젯 고유의 스타일**만 관리합니다:
+
+- ✅ `padding`: 내부 여백
+- ✅ `backgroundColor`: 배경색
+- ✅ `border`, `borderRadius`: 테두리
+- ✅ `gap`: 자식 요소 간격
+- ✅ `flexDirection`, `alignItems`: 레이아웃 방향
+
+### 위젯 등록 시 defaultSize
+
+```tsx
+ComponentRegistry.registerComponent({
+  id: "your-widget",
+  name: "위젯 이름",
+  category: "utility",
+  defaultSize: { width: 1200, height: 80 }, // 픽셀 단위 (필수)
+  component: YourWidget,
+  defaultProps: {
+    style: {
+      padding: "0.75rem",
+      // width, height는 defaultSize로 제어되므로 여기 불필요
+    },
+  },
+});
+```
+
+### 레이아웃 구조
+
+```tsx
+// 전체 높이를 차지하고 내부 요소를 정렬
+<div className="flex h-full w-full items-center justify-between gap-2">
+  {/* 왼쪽 컨텐츠 */}
+  <div className="flex items-center gap-3">{/* ... */}</div>
+
+  {/* 오른쪽 버튼들 */}
+  <div className="flex items-center gap-2 flex-shrink-0">
+    {/* flex-shrink-0으로 버튼이 줄어들지 않도록 보장 */}
+  </div>
+</div>
+```
+
+### 체크리스트
+
+위젯 개발 시 다음을 확인하세요:
+
+- [ ] 위젯 루트 요소에 `h-full w-full` 클래스 사용
+- [ ] `width`, `height`, `minHeight` 인라인 스타일 **제거**
+- [ ] `padding`, `backgroundColor` 등 위젯 고유 스타일만 관리
+- [ ] `defaultSize`에 적절한 기본 크기 설정
+- [ ] 양끝 정렬이 필요하면 `justify-between` 사용
+- [ ] 줄어들면 안 되는 요소에 `flex-shrink-0` 적용
+
+---
+
 **이 규칙을 지키지 않으면 사용자에게 "확인 안하지?"라는 말을 듣게 됩니다!**