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

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

frontend/components/screen/panels/ComponentsPanel.tsx

@@ -6,7 +6,7 @@ import { Badge } from "@/components/ui/badge";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { ComponentRegistry } from "@/lib/registry/ComponentRegistry";
 import { ComponentDefinition, ComponentCategory } from "@/types/component";
-import { Search, Package, Grid, Layers, Palette, Zap, MousePointer, Edit3, BarChart3, Database } from "lucide-react";
+import { Search, Package, Grid, Layers, Palette, Zap, MousePointer, Edit3, BarChart3, Database, Wrench } from "lucide-react";
 import { TableInfo, ColumnInfo } from "@/types/screen";
 import TablesPanel from "./TablesPanel";
 
@@ -64,6 +64,7 @@ export function ComponentsPanel({
       action: allComponents.filter((c) => c.category === ComponentCategory.ACTION),
       display: allComponents.filter((c) => c.category === ComponentCategory.DISPLAY),
       layout: allComponents.filter((c) => c.category === ComponentCategory.LAYOUT),
+      utility: allComponents.filter((c) => c.category === ComponentCategory.UTILITY), // 🆕 유틸리티 카테고리 추가
     };
   }, [allComponents]);
 
@@ -184,7 +185,7 @@ export function ComponentsPanel({
 
       {/* 카테고리 탭 */}
       <Tabs defaultValue="input" className="flex min-h-0 flex-1 flex-col">
-        <TabsList className="mb-3 grid h-8 w-full flex-shrink-0 grid-cols-5 gap-1 p-1">
+        <TabsList className="mb-3 grid h-8 w-full flex-shrink-0 grid-cols-6 gap-1 p-1">
           <TabsTrigger
             value="tables"
             className="flex items-center justify-center gap-0.5 px-0 text-[10px]"
@@ -221,6 +222,14 @@ export function ComponentsPanel({
             <Layers className="h-3 w-3" />
             <span className="hidden">레이아웃</span>
           </TabsTrigger>
+          <TabsTrigger
+            value="utility"
+            className="flex items-center justify-center gap-0.5 px-0 text-[10px]"
+            title="유틸리티"
+          >
+            <Wrench className="h-3 w-3" />
+            <span className="hidden">유틸리티</span>
+          </TabsTrigger>
         </TabsList>
 
         {/* 테이블 탭 */}
@@ -271,6 +280,13 @@ export function ComponentsPanel({
             ? getFilteredComponents("layout").map(renderComponentCard)
             : renderEmptyState()}
         </TabsContent>
+
+        {/* 유틸리티 컴포넌트 */}
+        <TabsContent value="utility" className="mt-0 flex-1 space-y-2 overflow-y-auto">
+          {getFilteredComponents("utility").length > 0
+            ? getFilteredComponents("utility").map(renderComponentCard)
+            : renderEmptyState()}
+        </TabsContent>
       </Tabs>
 
       {/* 도움말 */}