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` 적용
+
+---
+
 **이 규칙을 지키지 않으면 사용자에게 "확인 안하지?"라는 말을 듣게 됩니다!**

frontend/app/(main)/screens/[screenId]/page.tsx

@@ -18,6 +18,7 @@ import { DynamicComponentRenderer } from "@/lib/registry/DynamicComponentRendere
 import { ScreenPreviewProvider } from "@/contexts/ScreenPreviewContext";
 import { useAuth } from "@/hooks/useAuth"; // 🆕 사용자 정보
 import { useResponsive } from "@/lib/hooks/useResponsive"; // 🆕 반응형 감지
+import { TableOptionsProvider } from "@/contexts/TableOptionsContext"; // 🆕 테이블 옵션
 
 export default function ScreenViewPage() {
   const params = useParams();
@@ -298,16 +299,17 @@ export default function ScreenViewPage() {
 
   return (
     <ScreenPreviewProvider isPreviewMode={false}>
-      <div ref={containerRef} className="bg-background flex h-full w-full items-center justify-center overflow-hidden">
+      <TableOptionsProvider>
-        {/* 레이아웃 준비 중 로딩 표시 */}
+        <div ref={containerRef} className="bg-background flex h-full w-full items-center justify-center overflow-hidden">
-        {!layoutReady && (
+            {/* 레이아웃 준비 중 로딩 표시 */}
-          <div className="from-muted to-muted/50 flex h-full w-full items-center justify-center bg-gradient-to-br">
+            {!layoutReady && (
-            <div className="border-border bg-background rounded-xl border p-8 text-center shadow-lg">
+              <div className="from-muted to-muted/50 flex h-full w-full items-center justify-center bg-gradient-to-br">
-              <Loader2 className="text-primary mx-auto h-8 w-8 animate-spin" />
+                <div className="border-border bg-background rounded-xl border p-8 text-center shadow-lg">
-              <p className="text-foreground mt-4 text-sm font-medium">화면 준비 중...</p>
+                  <Loader2 className="text-primary mx-auto h-8 w-8 animate-spin" />
-            </div>
+                  <p className="text-foreground mt-4 text-sm font-medium">화면 준비 중...</p>
-          </div>
+                </div>
-        )}
+              </div>
+            )}
 
         {/* 절대 위치 기반 렌더링 (화면관리와 동일한 방식) */}
         {layoutReady && layout && layout.components.length > 0 ? (
@@ -679,33 +681,34 @@ export default function ScreenViewPage() {
           </div>
         )}
 
-        {/* 편집 모달 */}
+            {/* 편집 모달 */}
-        <EditModal
+            <EditModal
-          isOpen={editModalOpen}
+              isOpen={editModalOpen}
-          onClose={() => {
+              onClose={() => {
-            setEditModalOpen(false);
+                setEditModalOpen(false);
-            setEditModalConfig({});
+                setEditModalConfig({});
-          }}
+              }}
-          screenId={editModalConfig.screenId}
+              screenId={editModalConfig.screenId}
-          modalSize={editModalConfig.modalSize}
+              modalSize={editModalConfig.modalSize}
-          editData={editModalConfig.editData}
+              editData={editModalConfig.editData}
-          onSave={editModalConfig.onSave}
+              onSave={editModalConfig.onSave}
-          modalTitle={editModalConfig.modalTitle}
+              modalTitle={editModalConfig.modalTitle}
-          modalDescription={editModalConfig.modalDescription}
+              modalDescription={editModalConfig.modalDescription}
-          onDataChange={(changedFormData) => {
+              onDataChange={(changedFormData) => {
-            console.log("📝 EditModal에서 데이터 변경 수신:", changedFormData);
+                console.log("📝 EditModal에서 데이터 변경 수신:", changedFormData);
-            // 변경된 데이터를 메인 폼에 반영
+                // 변경된 데이터를 메인 폼에 반영
-            setFormData((prev) => {
+                setFormData((prev) => {
-              const updatedFormData = {
+                  const updatedFormData = {
-                ...prev,
+                    ...prev,
-                ...changedFormData, // 변경된 필드들만 업데이트
+                    ...changedFormData, // 변경된 필드들만 업데이트
-              };
+                  };
-              console.log("📊 메인 폼 데이터 업데이트:", updatedFormData);
+                  console.log("📊 메인 폼 데이터 업데이트:", updatedFormData);
-              return updatedFormData;
+                  return updatedFormData;
-            });
+                });
-          }}
+              }}
-        />
+            />
-      </div>
+        </div>
+      </TableOptionsProvider>
     </ScreenPreviewProvider>
   );
 }

frontend/components/screen/InteractiveDataTable.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useState, useEffect, useCallback } from "react";
+import React, { useState, useEffect, useCallback, useRef } from "react";
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
 import { Checkbox } from "@/components/ui/checkbox";
@@ -52,6 +52,8 @@ import { FileUpload } from "@/components/screen/widgets/FileUpload";
 import { AdvancedSearchFilters } from "./filters/AdvancedSearchFilters";
 import { SaveModal } from "./SaveModal";
 import { useScreenPreview } from "@/contexts/ScreenPreviewContext";
+import { useTableOptions } from "@/contexts/TableOptionsContext";
+import { TableFilter, ColumnVisibility } from "@/types/table-options";
 
 // 파일 데이터 타입 정의 (AttachedFileInfo와 호환)
 interface FileInfo {
@@ -102,6 +104,8 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
 }) => {
   const { isPreviewMode } = useScreenPreview(); // 프리뷰 모드 확인
   const { user } = useAuth(); // 사용자 정보 가져오기
+  const { registerTable, unregisterTable } = useTableOptions(); // Context 훅
+  
   const [data, setData] = useState<Record<string, any>[]>([]);
   const [loading, setLoading] = useState(false);
   const [searchValues, setSearchValues] = useState<Record<string, any>>({});
@@ -113,6 +117,11 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
   const hasInitializedWidthsRef = useRef(false);
   const columnRefs = useRef<Record<string, HTMLTableCellElement | null>>({});
   const isResizingRef = useRef(false);
+  
+  // TableOptions 상태
+  const [filters, setFilters] = useState<TableFilter[]>([]);
+  const [grouping, setGrouping] = useState<string[]>([]);
+  const [columnVisibility, setColumnVisibility] = useState<ColumnVisibility[]>([]);
 
   // SaveModal 상태 (등록/수정 통합)
   const [showSaveModal, setShowSaveModal] = useState(false);
@@ -147,6 +156,33 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
   // 카테고리 값 매핑 캐시 (컬럼명 -> {코드 -> {라벨, 색상}})
   const [categoryMappings, setCategoryMappings] = useState<Record<string, Record<string, { label: string; color?: string }>>>({});
 
+  // 테이블 등록 (Context에 등록)
+  const tableId = `datatable-${component.id}`;
+  
+  useEffect(() => {
+    if (!component.tableName || !component.columns) return;
+    
+    registerTable({
+      tableId,
+      label: component.title || "데이터 테이블",
+      tableName: component.tableName,
+      columns: component.columns.map((col) => ({
+        columnName: col.field,
+        columnLabel: col.label,
+        inputType: col.inputType || "text",
+        visible: col.visible !== false,
+        width: col.width || 150,
+        sortable: col.sortable,
+        filterable: col.filterable !== false,
+      })),
+      onFilterChange: setFilters,
+      onGroupChange: setGrouping,
+      onColumnVisibilityChange: setColumnVisibility,
+    });
+
+    return () => unregisterTable(tableId);
+  }, [component.id, component.tableName, component.columns, component.title]);
+
   // 공통코드 옵션 가져오기
   const loadCodeOptions = useCallback(
     async (categoryCode: string) => {

frontend/components/screen/InteractiveScreenViewer.tsx

@@ -46,6 +46,8 @@ import { isFileComponent } from "@/lib/utils/componentTypeUtils";
 import { buildGridClasses } from "@/lib/constants/columnSpans";
 import { cn } from "@/lib/utils";
 import { useScreenPreview } from "@/contexts/ScreenPreviewContext";
+import { TableOptionsProvider } from "@/contexts/TableOptionsContext";
+import { TableOptionsToolbar } from "./table-options/TableOptionsToolbar";
 
 interface InteractiveScreenViewerProps {
   component: ComponentData;
@@ -1885,8 +1887,13 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
     : component;
 
   return (
-    <>
+    <TableOptionsProvider>
-      <div className="h-full" style={{ width: '100%', height: '100%' }}>
+      <div className="flex h-full flex-col">
+        {/* 테이블 옵션 툴바 */}
+        <TableOptionsToolbar />
+        
+        {/* 메인 컨텐츠 */}
+        <div className="h-full flex-1" style={{ width: '100%' }}>
           {/* 라벨이 있는 경우 표시 (데이터 테이블 제외) */}
           {shouldShowLabel && (
             <label className="mb-2 block text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
@@ -1897,6 +1904,7 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
 
         {/* 실제 위젯 - 상위에서 라벨을 렌더링했으므로 자식은 라벨 숨김 */}
         <div className="h-full" style={{ width: '100%', height: '100%' }}>{renderInteractiveWidget(componentForRendering)}</div>
+        </div>
       </div>
 
       {/* 개선된 검증 패널 (선택적 표시) */}
@@ -1986,6 +1994,6 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
           </div>
         </DialogContent>
       </Dialog>
-    </>
+    </TableOptionsProvider>
   );
 };

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>
 
       {/* 도움말 */}

frontend/components/screen/table-options/ColumnVisibilityPanel.tsx

@@ -0,0 +1,202 @@
+import React, { useState, useEffect } from "react";
+import { useTableOptions } from "@/contexts/TableOptionsContext";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { GripVertical, Eye, EyeOff } from "lucide-react";
+import { ColumnVisibility } from "@/types/table-options";
+
+interface Props {
+  tableId: string;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+export const ColumnVisibilityPanel: React.FC<Props> = ({
+  tableId,
+  open,
+  onOpenChange,
+}) => {
+  const { getTable } = useTableOptions();
+  const table = getTable(tableId);
+
+  const [localColumns, setLocalColumns] = useState<ColumnVisibility[]>([]);
+
+  // 테이블 정보 로드
+  useEffect(() => {
+    if (table) {
+      setLocalColumns(
+        table.columns.map((col) => ({
+          columnName: col.columnName,
+          visible: col.visible,
+          width: col.width,
+          order: 0,
+        }))
+      );
+    }
+  }, [table]);
+
+  const handleVisibilityChange = (columnName: string, visible: boolean) => {
+    setLocalColumns((prev) =>
+      prev.map((col) =>
+        col.columnName === columnName ? { ...col, visible } : col
+      )
+    );
+  };
+
+  const handleWidthChange = (columnName: string, width: number) => {
+    setLocalColumns((prev) =>
+      prev.map((col) =>
+        col.columnName === columnName ? { ...col, width } : col
+      )
+    );
+  };
+
+  const handleApply = () => {
+    table?.onColumnVisibilityChange(localColumns);
+    onOpenChange(false);
+  };
+
+  const handleReset = () => {
+    if (table) {
+      setLocalColumns(
+        table.columns.map((col) => ({
+          columnName: col.columnName,
+          visible: true,
+          width: 150,
+          order: 0,
+        }))
+      );
+    }
+  };
+
+  const visibleCount = localColumns.filter((col) => col.visible).length;
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-[95vw] sm:max-w-2xl">
+        <DialogHeader>
+          <DialogTitle className="text-base sm:text-lg">
+            테이블 옵션
+          </DialogTitle>
+          <DialogDescription className="text-xs sm:text-sm">
+            컬럼 표시/숨기기, 순서 변경, 너비 등을 설정할 수 있습니다. 모든
+            테두리를 드래그하여 크기를 조정할 수 있습니다.
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-3 sm:space-y-4">
+          {/* 상태 표시 */}
+          <div className="flex items-center justify-between rounded-lg border bg-muted/50 p-3">
+            <div className="text-xs text-muted-foreground sm:text-sm">
+              {visibleCount}/{localColumns.length}개 컬럼 표시 중
+            </div>
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={handleReset}
+              className="h-7 text-xs"
+            >
+              초기화
+            </Button>
+          </div>
+
+          {/* 컬럼 리스트 */}
+          <ScrollArea className="h-[300px] sm:h-[400px]">
+            <div className="space-y-2 pr-4">
+              {localColumns.map((col) => {
+                const columnMeta = table?.columns.find(
+                  (c) => c.columnName === col.columnName
+                );
+                return (
+                  <div
+                    key={col.columnName}
+                    className="flex items-center gap-3 rounded-lg border bg-background p-3 transition-colors hover:bg-muted/50"
+                  >
+                    {/* 드래그 핸들 */}
+                    <GripVertical className="h-4 w-4 shrink-0 text-muted-foreground" />
+
+                    {/* 체크박스 */}
+                    <Checkbox
+                      checked={col.visible}
+                      onCheckedChange={(checked) =>
+                        handleVisibilityChange(
+                          col.columnName,
+                          checked as boolean
+                        )
+                      }
+                    />
+
+                    {/* 가시성 아이콘 */}
+                    {col.visible ? (
+                      <Eye className="h-4 w-4 shrink-0 text-primary" />
+                    ) : (
+                      <EyeOff className="h-4 w-4 shrink-0 text-muted-foreground" />
+                    )}
+
+                    {/* 컬럼명 */}
+                    <div className="flex-1">
+                      <div className="text-xs font-medium sm:text-sm">
+                        {columnMeta?.columnLabel}
+                      </div>
+                      <div className="text-[10px] text-muted-foreground sm:text-xs">
+                        {col.columnName}
+                      </div>
+                    </div>
+
+                    {/* 너비 설정 */}
+                    <div className="flex items-center gap-2">
+                      <Label className="text-xs text-muted-foreground">
+                        너비:
+                      </Label>
+                      <Input
+                        type="number"
+                        value={col.width || 150}
+                        onChange={(e) =>
+                          handleWidthChange(
+                            col.columnName,
+                            parseInt(e.target.value) || 150
+                          )
+                        }
+                        className="h-7 w-16 text-xs sm:h-8 sm:w-20 sm:text-sm"
+                        min={50}
+                        max={500}
+                      />
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          </ScrollArea>
+        </div>
+
+        <DialogFooter className="gap-2 sm:gap-0">
+          <Button
+            variant="outline"
+            onClick={() => onOpenChange(false)}
+            className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
+          >
+            취소
+          </Button>
+          <Button
+            onClick={handleApply}
+            className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
+          >
+            저장
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};
+

frontend/components/screen/table-options/FilterPanel.tsx

@@ -0,0 +1,223 @@
+import React, { useState } from "react";
+import { useTableOptions } from "@/contexts/TableOptionsContext";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Plus, X } from "lucide-react";
+import { TableFilter } from "@/types/table-options";
+
+interface Props {
+  tableId: string;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+export const FilterPanel: React.FC<Props> = ({
+  tableId,
+  open,
+  onOpenChange,
+}) => {
+  const { getTable } = useTableOptions();
+  const table = getTable(tableId);
+
+  const [activeFilters, setActiveFilters] = useState<TableFilter[]>([]);
+
+  const addFilter = () => {
+    setActiveFilters([
+      ...activeFilters,
+      { columnName: "", operator: "contains", value: "" },
+    ]);
+  };
+
+  const removeFilter = (index: number) => {
+    setActiveFilters(activeFilters.filter((_, i) => i !== index));
+  };
+
+  const updateFilter = (
+    index: number,
+    field: keyof TableFilter,
+    value: any
+  ) => {
+    setActiveFilters(
+      activeFilters.map((filter, i) =>
+        i === index ? { ...filter, [field]: value } : filter
+      )
+    );
+  };
+
+  const applyFilters = () => {
+    // 빈 필터 제거
+    const validFilters = activeFilters.filter(
+      (f) => f.columnName && f.value !== ""
+    );
+    table?.onFilterChange(validFilters);
+    onOpenChange(false);
+  };
+
+  const clearFilters = () => {
+    setActiveFilters([]);
+    table?.onFilterChange([]);
+  };
+
+  const operatorLabels: Record<string, string> = {
+    equals: "같음",
+    contains: "포함",
+    startsWith: "시작",
+    endsWith: "끝",
+    gt: "보다 큼",
+    lt: "보다 작음",
+    gte: "이상",
+    lte: "이하",
+    notEquals: "같지 않음",
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-[95vw] sm:max-w-2xl">
+        <DialogHeader>
+          <DialogTitle className="text-base sm:text-lg">
+            검색 필터 설정
+          </DialogTitle>
+          <DialogDescription className="text-xs sm:text-sm">
+            검색 필터로 사용할 컬럼을 선택하세요. 선택한 컬럼의 검색 입력 필드가
+            표시됩니다.
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-3 sm:space-y-4">
+          {/* 전체 선택/해제 */}
+          <div className="flex items-center justify-between">
+            <div className="text-xs text-muted-foreground sm:text-sm">
+              총 {activeFilters.length}개의 검색 필터가 표시됩니다
+            </div>
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={clearFilters}
+              className="h-7 text-xs"
+            >
+              초기화
+            </Button>
+          </div>
+
+          {/* 필터 리스트 */}
+          <ScrollArea className="h-[300px] sm:h-[400px]">
+            <div className="space-y-3 pr-4">
+              {activeFilters.map((filter, index) => (
+                <div
+                  key={index}
+                  className="flex flex-col gap-2 rounded-lg border bg-background p-3 sm:flex-row sm:items-center"
+                >
+                  {/* 컬럼 선택 */}
+                  <Select
+                    value={filter.columnName}
+                    onValueChange={(val) =>
+                      updateFilter(index, "columnName", val)
+                    }
+                  >
+                    <SelectTrigger className="h-8 text-xs sm:h-9 sm:w-40 sm:text-sm">
+                      <SelectValue placeholder="컬럼 선택" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {table?.columns
+                        .filter((col) => col.filterable !== false)
+                        .map((col) => (
+                          <SelectItem
+                            key={col.columnName}
+                            value={col.columnName}
+                          >
+                            {col.columnLabel}
+                          </SelectItem>
+                        ))}
+                    </SelectContent>
+                  </Select>
+
+                  {/* 연산자 선택 */}
+                  <Select
+                    value={filter.operator}
+                    onValueChange={(val) =>
+                      updateFilter(index, "operator", val)
+                    }
+                  >
+                    <SelectTrigger className="h-8 text-xs sm:h-9 sm:w-32 sm:text-sm">
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {Object.entries(operatorLabels).map(([value, label]) => (
+                        <SelectItem key={value} value={value}>
+                          {label}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+
+                  {/* 값 입력 */}
+                  <Input
+                    value={filter.value as string}
+                    onChange={(e) =>
+                      updateFilter(index, "value", e.target.value)
+                    }
+                    placeholder="값 입력"
+                    className="h-8 flex-1 text-xs sm:h-9 sm:text-sm"
+                  />
+
+                  {/* 삭제 버튼 */}
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    onClick={() => removeFilter(index)}
+                    className="h-8 w-8 shrink-0 sm:h-9 sm:w-9"
+                  >
+                    <X className="h-4 w-4" />
+                  </Button>
+                </div>
+              ))}
+            </div>
+          </ScrollArea>
+
+          {/* 필터 추가 버튼 */}
+          <Button
+            variant="outline"
+            onClick={addFilter}
+            className="h-8 w-full text-xs sm:h-9 sm:text-sm"
+          >
+            <Plus className="mr-2 h-4 w-4" />
+            필터 추가
+          </Button>
+        </div>
+
+        <DialogFooter className="gap-2 sm:gap-0">
+          <Button
+            variant="outline"
+            onClick={() => onOpenChange(false)}
+            className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
+          >
+            취소
+          </Button>
+          <Button
+            onClick={applyFilters}
+            className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
+          >
+            저장
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};
+

frontend/components/screen/table-options/GroupingPanel.tsx

@@ -0,0 +1,159 @@
+import React, { useState } from "react";
+import { useTableOptions } from "@/contexts/TableOptionsContext";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { ArrowRight } from "lucide-react";
+
+interface Props {
+  tableId: string;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+export const GroupingPanel: React.FC<Props> = ({
+  tableId,
+  open,
+  onOpenChange,
+}) => {
+  const { getTable } = useTableOptions();
+  const table = getTable(tableId);
+
+  const [selectedColumns, setSelectedColumns] = useState<string[]>([]);
+
+  const toggleColumn = (columnName: string) => {
+    if (selectedColumns.includes(columnName)) {
+      setSelectedColumns(selectedColumns.filter((c) => c !== columnName));
+    } else {
+      setSelectedColumns([...selectedColumns, columnName]);
+    }
+  };
+
+  const applyGrouping = () => {
+    table?.onGroupChange(selectedColumns);
+    onOpenChange(false);
+  };
+
+  const clearGrouping = () => {
+    setSelectedColumns([]);
+    table?.onGroupChange([]);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-[95vw] sm:max-w-xl">
+        <DialogHeader>
+          <DialogTitle className="text-base sm:text-lg">그룹 설정</DialogTitle>
+          <DialogDescription className="text-xs sm:text-sm">
+            데이터를 그룹화할 컬럼을 선택하세요
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-3 sm:space-y-4">
+          {/* 상태 표시 */}
+          <div className="flex items-center justify-between rounded-lg border bg-muted/50 p-3">
+            <div className="text-xs text-muted-foreground sm:text-sm">
+              {selectedColumns.length}개 컬럼으로 그룹화
+            </div>
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={clearGrouping}
+              className="h-7 text-xs"
+            >
+              초기화
+            </Button>
+          </div>
+
+          {/* 컬럼 리스트 */}
+          <ScrollArea className="h-[250px] sm:h-[300px]">
+            <div className="space-y-2 pr-4">
+              {table?.columns.map((col) => {
+                const isSelected = selectedColumns.includes(col.columnName);
+                const order = selectedColumns.indexOf(col.columnName) + 1;
+
+                return (
+                  <div
+                    key={col.columnName}
+                    className="flex items-center gap-3 rounded-lg border bg-background p-3 transition-colors hover:bg-muted/50"
+                  >
+                    <Checkbox
+                      checked={isSelected}
+                      onCheckedChange={() => toggleColumn(col.columnName)}
+                    />
+
+                    <div className="flex-1">
+                      <div className="text-xs font-medium sm:text-sm">
+                        {col.columnLabel}
+                      </div>
+                      <div className="text-[10px] text-muted-foreground sm:text-xs">
+                        {col.columnName}
+                      </div>
+                    </div>
+
+                    {isSelected && (
+                      <div className="flex items-center gap-1 rounded-full bg-primary px-2 py-0.5 text-xs text-primary-foreground">
+                        {order}번째
+                      </div>
+                    )}
+                  </div>
+                );
+              })}
+            </div>
+          </ScrollArea>
+
+          {/* 그룹 순서 미리보기 */}
+          {selectedColumns.length > 0 && (
+            <div className="rounded-lg border bg-muted/30 p-3">
+              <div className="mb-2 text-xs font-medium sm:text-sm">
+                그룹화 순서
+              </div>
+              <div className="flex flex-wrap items-center gap-2 text-xs sm:text-sm">
+                {selectedColumns.map((colName, index) => {
+                  const col = table?.columns.find(
+                    (c) => c.columnName === colName
+                  );
+                  return (
+                    <React.Fragment key={colName}>
+                      <div className="rounded bg-primary/10 px-2 py-1 font-medium">
+                        {col?.columnLabel}
+                      </div>
+                      {index < selectedColumns.length - 1 && (
+                        <ArrowRight className="h-3 w-3 text-muted-foreground" />
+                      )}
+                    </React.Fragment>
+                  );
+                })}
+              </div>
+            </div>
+          )}
+        </div>
+
+        <DialogFooter className="gap-2 sm:gap-0">
+          <Button
+            variant="outline"
+            onClick={() => onOpenChange(false)}
+            className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
+          >
+            취소
+          </Button>
+          <Button
+            onClick={applyGrouping}
+            className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
+          >
+            저장
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};
+

frontend/components/screen/table-options/TableOptionsToolbar.tsx

@@ -0,0 +1,126 @@
+import React, { useState } from "react";
+import { useTableOptions } from "@/contexts/TableOptionsContext";
+import { Button } from "@/components/ui/button";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Settings, Filter, Layers } from "lucide-react";
+import { ColumnVisibilityPanel } from "./ColumnVisibilityPanel";
+import { FilterPanel } from "./FilterPanel";
+import { GroupingPanel } from "./GroupingPanel";
+
+export const TableOptionsToolbar: React.FC = () => {
+  const { registeredTables, selectedTableId, setSelectedTableId } =
+    useTableOptions();
+
+  const [columnPanelOpen, setColumnPanelOpen] = useState(false);
+  const [filterPanelOpen, setFilterPanelOpen] = useState(false);
+  const [groupPanelOpen, setGroupPanelOpen] = useState(false);
+
+  const tableList = Array.from(registeredTables.values());
+  const selectedTable = selectedTableId
+    ? registeredTables.get(selectedTableId)
+    : null;
+
+  // 테이블이 없으면 표시하지 않음
+  if (tableList.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className="flex items-center gap-2 border-b bg-background p-2">
+      {/* 테이블 선택 (2개 이상일 때만 표시) */}
+      {tableList.length > 1 && (
+        <Select
+          value={selectedTableId || ""}
+          onValueChange={setSelectedTableId}
+        >
+          <SelectTrigger className="h-8 w-48 text-xs sm:h-9 sm:w-64 sm:text-sm">
+            <SelectValue placeholder="테이블 선택" />
+          </SelectTrigger>
+          <SelectContent>
+            {tableList.map((table) => (
+              <SelectItem key={table.tableId} value={table.tableId}>
+                {table.label}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      )}
+
+      {/* 테이블이 1개일 때는 이름만 표시 */}
+      {tableList.length === 1 && (
+        <div className="text-xs font-medium sm:text-sm">
+          {tableList[0].label}
+        </div>
+      )}
+
+      {/* 컬럼 수 표시 */}
+      <div className="text-xs text-muted-foreground sm:text-sm">
+        전체 {selectedTable?.columns.length || 0}개
+      </div>
+
+      <div className="flex-1" />
+
+      {/* 옵션 버튼들 */}
+      <Button
+        variant="outline"
+        size="sm"
+        onClick={() => setColumnPanelOpen(true)}
+        className="h-8 text-xs sm:h-9 sm:text-sm"
+        disabled={!selectedTableId}
+      >
+        <Settings className="mr-2 h-4 w-4" />
+        테이블 옵션
+      </Button>
+
+      <Button
+        variant="outline"
+        size="sm"
+        onClick={() => setFilterPanelOpen(true)}
+        className="h-8 text-xs sm:h-9 sm:text-sm"
+        disabled={!selectedTableId}
+      >
+        <Filter className="mr-2 h-4 w-4" />
+        필터 설정
+      </Button>
+
+      <Button
+        variant="outline"
+        size="sm"
+        onClick={() => setGroupPanelOpen(true)}
+        className="h-8 text-xs sm:h-9 sm:text-sm"
+        disabled={!selectedTableId}
+      >
+        <Layers className="mr-2 h-4 w-4" />
+        그룹 설정
+      </Button>
+
+      {/* 패널들 */}
+      {selectedTableId && (
+        <>
+          <ColumnVisibilityPanel
+            tableId={selectedTableId}
+            open={columnPanelOpen}
+            onOpenChange={setColumnPanelOpen}
+          />
+          <FilterPanel
+            tableId={selectedTableId}
+            open={filterPanelOpen}
+            onOpenChange={setFilterPanelOpen}
+          />
+          <GroupingPanel
+            tableId={selectedTableId}
+            open={groupPanelOpen}
+            onOpenChange={setGroupPanelOpen}
+          />
+        </>
+      )}
+    </div>
+  );
+};
+

frontend/components/screen/widgets/FlowWidget.tsx

@@ -39,6 +39,8 @@ import { Label } from "@/components/ui/label";
 import { Input } from "@/components/ui/input";
 import { useScreenPreview } from "@/contexts/ScreenPreviewContext";
 import { useAuth } from "@/hooks/useAuth";
+import { useTableOptions } from "@/contexts/TableOptionsContext";
+import { TableFilter, ColumnVisibility } from "@/types/table-options";
 
 // 그룹화된 데이터 인터페이스
 interface GroupedData {
@@ -65,6 +67,12 @@ export function FlowWidget({
 }: FlowWidgetProps) {
   const { isPreviewMode } = useScreenPreview(); // 프리뷰 모드 확인
   const { user } = useAuth(); // 사용자 정보 가져오기
+  const { registerTable, unregisterTable } = useTableOptions(); // Context 훅
+
+  // TableOptions 상태
+  const [filters, setFilters] = useState<TableFilter[]>([]);
+  const [grouping, setGrouping] = useState<string[]>([]);
+  const [columnVisibility, setColumnVisibility] = useState<ColumnVisibility[]>([]);
 
   // 숫자 포맷팅 함수
   const formatValue = (value: any): string => {
@@ -301,6 +309,36 @@ export function FlowWidget({
     toast.success("그룹이 해제되었습니다");
   }, [groupSettingKey]);
 
+  // 테이블 등록 (선택된 스텝이 있을 때)
+  useEffect(() => {
+    if (!selectedStepId || !stepDataColumns || stepDataColumns.length === 0) {
+      return;
+    }
+
+    const tableId = `flow-widget-${component.id}-step-${selectedStepId}`;
+    const currentStep = steps.find((s) => s.id === selectedStepId);
+
+    registerTable({
+      tableId,
+      label: `${flowName || "플로우"} - ${currentStep?.name || "스텝"}`,
+      tableName: "flow_step_data",
+      columns: stepDataColumns.map((col) => ({
+        columnName: col,
+        columnLabel: columnLabels[col] || col,
+        inputType: "text",
+        visible: true,
+        width: 150,
+        sortable: true,
+        filterable: true,
+      })),
+      onFilterChange: setFilters,
+      onGroupChange: setGrouping,
+      onColumnVisibilityChange: setColumnVisibility,
+    });
+
+    return () => unregisterTable(tableId);
+  }, [selectedStepId, stepDataColumns, columnLabels, flowName, steps, component.id]);
+
   // 🆕 데이터 그룹화
   const groupedData = useMemo((): GroupedData[] => {
     const dataToGroup = filteredData.length > 0 ? filteredData : stepData;

frontend/contexts/TableOptionsContext.tsx

@@ -0,0 +1,107 @@
+import React, {
+  createContext,
+  useContext,
+  useState,
+  useCallback,
+  ReactNode,
+} from "react";
+import {
+  TableRegistration,
+  TableOptionsContextValue,
+} from "@/types/table-options";
+
+const TableOptionsContext = createContext<TableOptionsContextValue | undefined>(
+  undefined
+);
+
+export const TableOptionsProvider: React.FC<{ children: ReactNode }> = ({
+  children,
+}) => {
+  const [registeredTables, setRegisteredTables] = useState<
+    Map<string, TableRegistration>
+  >(new Map());
+  const [selectedTableId, setSelectedTableId] = useState<string | null>(null);
+
+  /**
+   * 테이블 등록
+   */
+  const registerTable = useCallback((registration: TableRegistration) => {
+    setRegisteredTables((prev) => {
+      const newMap = new Map(prev);
+      newMap.set(registration.tableId, registration);
+
+      // 첫 번째 테이블이면 자동 선택
+      if (newMap.size === 1) {
+        setSelectedTableId(registration.tableId);
+      }
+
+      return newMap;
+    });
+
+    console.log(
+      `[TableOptions] 테이블 등록: ${registration.label} (${registration.tableId})`
+    );
+  }, []);
+
+  /**
+   * 테이블 등록 해제
+   */
+  const unregisterTable = useCallback(
+    (tableId: string) => {
+      setRegisteredTables((prev) => {
+        const newMap = new Map(prev);
+        const removed = newMap.delete(tableId);
+
+        if (removed) {
+          console.log(`[TableOptions] 테이블 해제: ${tableId}`);
+
+          // 선택된 테이블이 제거되면 첫 번째 테이블 선택
+          if (selectedTableId === tableId) {
+            const firstTableId = newMap.keys().next().value;
+            setSelectedTableId(firstTableId || null);
+          }
+        }
+
+        return newMap;
+      });
+    },
+    [selectedTableId]
+  );
+
+  /**
+   * 특정 테이블 조회
+   */
+  const getTable = useCallback(
+    (tableId: string) => {
+      return registeredTables.get(tableId);
+    },
+    [registeredTables]
+  );
+
+  return (
+    <TableOptionsContext.Provider
+      value={{
+        registeredTables,
+        registerTable,
+        unregisterTable,
+        getTable,
+        selectedTableId,
+        setSelectedTableId,
+      }}
+    >
+      {children}
+    </TableOptionsContext.Provider>
+  );
+};
+
+/**
+ * Context Hook
+ */
+export const useTableOptions = () => {
+  const context = useContext(TableOptionsContext);
+  if (!context) {
+    throw new Error("useTableOptions must be used within TableOptionsProvider");
+  }
+  return context;
+};
+

frontend/lib/registry/components/index.ts

@@ -42,6 +42,7 @@ import "./repeater-field-group/RepeaterFieldGroupRenderer";
 import "./flow-widget/FlowWidgetRenderer";
 import "./numbering-rule/NumberingRuleRenderer";
 import "./category-manager/CategoryManagerRenderer";
+import "./table-search-widget"; // 🆕 테이블 검색 필터 위젯
 
 /**
  * 컴포넌트 초기화 함수

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 () => {

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

@@ -45,6 +45,8 @@ import { AdvancedSearchFilters } from "@/components/screen/filters/AdvancedSearc
 import { SingleTableWithSticky } from "./SingleTableWithSticky";
 import { CardModeRenderer } from "./CardModeRenderer";
 import { TableOptionsModal } from "@/components/common/TableOptionsModal";
+import { useTableOptions } from "@/contexts/TableOptionsContext";
+import { TableFilter, ColumnVisibility } from "@/types/table-options";
 
 // ========================================
 // 인터페이스
@@ -243,6 +245,12 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
   // 상태 관리
   // ========================================
 
+  // TableOptions Context
+  const { registerTable, unregisterTable } = useTableOptions();
+  const [filters, setFilters] = useState<TableFilter[]>([]);
+  const [grouping, setGrouping] = useState<string[]>([]);
+  const [columnVisibility, setColumnVisibility] = useState<ColumnVisibility[]>([]);
+
   const [data, setData] = useState<Record<string, any>[]>([]);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
@@ -288,6 +296,43 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
   const [viewMode, setViewMode] = useState<"table" | "card" | "grouped-card">("table");
   const [frozenColumns, setFrozenColumns] = useState<string[]>([]);
 
+  // 테이블 등록 (Context에 등록)
+  const tableId = `table-list-${component.id}`;
+  
+  useEffect(() => {
+    if (!tableConfig.selectedTable || !displayColumns || displayColumns.length === 0) {
+      return;
+    }
+
+    registerTable({
+      tableId,
+      label: tableLabel || tableConfig.selectedTable,
+      tableName: tableConfig.selectedTable,
+      columns: displayColumns.map((col) => ({
+        columnName: col.field,
+        columnLabel: columnLabels[col.field] || col.label || col.field,
+        inputType: columnMeta[col.field]?.inputType || "text",
+        visible: col.visible !== false,
+        width: columnWidths[col.field] || col.width || 150,
+        sortable: col.sortable !== false,
+        filterable: col.filterable !== false,
+      })),
+      onFilterChange: setFilters,
+      onGroupChange: setGrouping,
+      onColumnVisibilityChange: setColumnVisibility,
+    });
+
+    return () => unregisterTable(tableId);
+  }, [
+    component.id,
+    tableConfig.selectedTable,
+    displayColumns,
+    columnLabels,
+    columnMeta,
+    columnWidths,
+    tableLabel,
+  ]);
+
   // 🆕 초기 로드 시 localStorage에서 컬럼 순서 불러오기
   useEffect(() => {
     if (!tableConfig.selectedTable || !userId) return;

frontend/lib/registry/components/table-search-widget/TableSearchWidget.tsx

@@ -0,0 +1,151 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+import { Button } from "@/components/ui/button";
+import { Settings, Filter, Layers } from "lucide-react";
+import { useTableOptions } from "@/contexts/TableOptionsContext";
+import { ColumnVisibilityPanel } from "@/components/screen/table-options/ColumnVisibilityPanel";
+import { FilterPanel } from "@/components/screen/table-options/FilterPanel";
+import { GroupingPanel } from "@/components/screen/table-options/GroupingPanel";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+
+interface TableSearchWidgetProps {
+  component: {
+    id: string;
+    title?: string;
+    style?: {
+      width?: string;
+      height?: string;
+      padding?: string;
+      backgroundColor?: string;
+    };
+    componentConfig?: {
+      autoSelectFirstTable?: boolean; // 첫 번째 테이블 자동 선택 여부
+      showTableSelector?: boolean; // 테이블 선택 드롭다운 표시 여부
+    };
+  };
+}
+
+export function TableSearchWidget({ component }: TableSearchWidgetProps) {
+  const { registeredTables, selectedTableId, setSelectedTableId } = useTableOptions();
+  const [columnVisibilityOpen, setColumnVisibilityOpen] = useState(false);
+  const [filterOpen, setFilterOpen] = useState(false);
+  const [groupingOpen, setGroupingOpen] = useState(false);
+
+  const autoSelectFirstTable = component.componentConfig?.autoSelectFirstTable ?? true;
+  const showTableSelector = component.componentConfig?.showTableSelector ?? true;
+
+  // Map을 배열로 변환
+  const tableList = Array.from(registeredTables.values());
+
+  // 첫 번째 테이블 자동 선택
+  useEffect(() => {
+    const tables = Array.from(registeredTables.values());
+    if (autoSelectFirstTable && tables.length > 0 && !selectedTableId) {
+      setSelectedTableId(tables[0].tableId);
+    }
+  }, [registeredTables, selectedTableId, autoSelectFirstTable, setSelectedTableId]);
+
+  const hasMultipleTables = tableList.length > 1;
+
+  return (
+    <div
+      className="flex h-full w-full items-center justify-between gap-2 border-b bg-card"
+      style={{
+        padding: component.style?.padding || "0.75rem",
+        backgroundColor: component.style?.backgroundColor,
+      }}
+    >
+      {/* 왼쪽: 제목 + 테이블 정보 */}
+      <div className="flex items-center gap-3">
+        {/* 제목 */}
+        {component.title && (
+          <div className="text-sm font-medium text-foreground">
+            {component.title}
+          </div>
+        )}
+
+        {/* 테이블 선택 드롭다운 (여러 테이블이 있고, showTableSelector가 true일 때만) */}
+        {showTableSelector && hasMultipleTables && (
+          <Select value={selectedTableId || ""} onValueChange={setSelectedTableId}>
+            <SelectTrigger className="h-8 w-[200px] text-xs sm:h-9 sm:text-sm">
+              <SelectValue placeholder="테이블 선택" />
+            </SelectTrigger>
+            <SelectContent>
+              {tableList.map((table) => (
+                <SelectItem key={table.tableId} value={table.tableId} className="text-xs sm:text-sm">
+                  {table.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        )}
+
+        {/* 테이블이 하나만 있을 때는 라벨만 표시 */}
+        {!hasMultipleTables && tableList.length === 1 && (
+          <div className="text-xs text-muted-foreground sm:text-sm">
+            {tableList[0].label}
+          </div>
+        )}
+
+        {/* 테이블이 없을 때 */}
+        {tableList.length === 0 && (
+          <div className="text-xs text-muted-foreground sm:text-sm">
+            화면에 테이블 컴포넌트를 추가하면 자동으로 감지됩니다
+          </div>
+        )}
+      </div>
+
+      {/* 오른쪽: 버튼들 */}
+      <div className="flex items-center gap-2 flex-shrink-0">
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() => setColumnVisibilityOpen(true)}
+          disabled={!selectedTableId}
+          className="h-8 text-xs sm:h-9 sm:text-sm"
+        >
+          <Settings className="mr-1 h-3 w-3 sm:h-4 sm:w-4" />
+          테이블 옵션
+        </Button>
+
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() => setFilterOpen(true)}
+          disabled={!selectedTableId}
+          className="h-8 text-xs sm:h-9 sm:text-sm"
+        >
+          <Filter className="mr-1 h-3 w-3 sm:h-4 sm:w-4" />
+          필터 설정
+        </Button>
+
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() => setGroupingOpen(true)}
+          disabled={!selectedTableId}
+          className="h-8 text-xs sm:h-9 sm:text-sm"
+        >
+          <Layers className="mr-1 h-3 w-3 sm:h-4 sm:w-4" />
+          그룹 설정
+        </Button>
+      </div>
+
+      {/* 패널들 */}
+      <ColumnVisibilityPanel
+        isOpen={columnVisibilityOpen}
+        onClose={() => setColumnVisibilityOpen(false)}
+      />
+      <FilterPanel isOpen={filterOpen} onClose={() => setFilterOpen(false)} />
+      <GroupingPanel isOpen={groupingOpen} onClose={() => setGroupingOpen(false)} />
+    </div>
+  );
+}
+

frontend/lib/registry/components/table-search-widget/TableSearchWidgetConfigPanel.tsx

@@ -0,0 +1,78 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+import { Label } from "@/components/ui/label";
+import { Checkbox } from "@/components/ui/checkbox";
+
+interface TableSearchWidgetConfigPanelProps {
+  component: any;
+  onUpdateProperty: (property: string, value: any) => void;
+}
+
+export function TableSearchWidgetConfigPanel({
+  component,
+  onUpdateProperty,
+}: TableSearchWidgetConfigPanelProps) {
+  const [localAutoSelect, setLocalAutoSelect] = useState(
+    component.componentConfig?.autoSelectFirstTable ?? true
+  );
+  const [localShowSelector, setLocalShowSelector] = useState(
+    component.componentConfig?.showTableSelector ?? true
+  );
+
+  useEffect(() => {
+    setLocalAutoSelect(component.componentConfig?.autoSelectFirstTable ?? true);
+    setLocalShowSelector(component.componentConfig?.showTableSelector ?? true);
+  }, [component.componentConfig]);
+
+  return (
+    <div className="space-y-4">
+      <div className="space-y-2">
+        <h3 className="text-sm font-semibold">검색 필터 위젯 설정</h3>
+        <p className="text-xs text-muted-foreground">
+          이 위젯은 화면 내의 테이블들을 자동으로 감지하여 검색, 필터, 그룹 기능을 제공합니다.
+        </p>
+      </div>
+
+      {/* 첫 번째 테이블 자동 선택 */}
+      <div className="flex items-center space-x-2">
+        <Checkbox
+          id="autoSelectFirstTable"
+          checked={localAutoSelect}
+          onCheckedChange={(checked) => {
+            setLocalAutoSelect(checked as boolean);
+            onUpdateProperty("componentConfig.autoSelectFirstTable", checked);
+          }}
+        />
+        <Label htmlFor="autoSelectFirstTable" className="text-xs sm:text-sm cursor-pointer">
+          첫 번째 테이블 자동 선택
+        </Label>
+      </div>
+
+      {/* 테이블 선택 드롭다운 표시 */}
+      <div className="flex items-center space-x-2">
+        <Checkbox
+          id="showTableSelector"
+          checked={localShowSelector}
+          onCheckedChange={(checked) => {
+            setLocalShowSelector(checked as boolean);
+            onUpdateProperty("componentConfig.showTableSelector", checked);
+          }}
+        />
+        <Label htmlFor="showTableSelector" className="text-xs sm:text-sm cursor-pointer">
+          테이블 선택 드롭다운 표시 (여러 테이블이 있을 때)
+        </Label>
+      </div>
+
+      <div className="rounded-md bg-muted p-3 text-xs">
+        <p className="font-medium mb-1">참고사항:</p>
+        <ul className="list-disc list-inside space-y-1 text-muted-foreground">
+          <li>테이블 리스트, 분할 패널, 플로우 위젯이 자동 감지됩니다</li>
+          <li>여러 테이블이 있으면 드롭다운에서 선택할 수 있습니다</li>
+          <li>선택한 테이블의 컬럼 정보가 자동으로 로드됩니다</li>
+        </ul>
+      </div>
+    </div>
+  );
+}
+

frontend/lib/registry/components/table-search-widget/TableSearchWidgetRenderer.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+import { TableSearchWidget } from "./TableSearchWidget";
+
+export class TableSearchWidgetRenderer {
+  static render(component: any) {
+    return <TableSearchWidget component={component} />;
+  }
+}
+

frontend/lib/registry/components/table-search-widget/index.tsx

@@ -0,0 +1,41 @@
+"use client";
+
+import { ComponentRegistry } from "../../ComponentRegistry";
+import { TableSearchWidget } from "./TableSearchWidget";
+import { TableSearchWidgetRenderer } from "./TableSearchWidgetRenderer";
+import { TableSearchWidgetConfigPanel } from "./TableSearchWidgetConfigPanel";
+
+// 검색 필터 위젯 등록
+ComponentRegistry.registerComponent({
+  id: "table-search-widget",
+  name: "검색 필터",
+  nameEng: "Table Search Widget",
+  category: "utility", // 유틸리티 컴포넌트로 분류
+  description: "화면 내 테이블을 자동 감지하여 검색, 필터, 그룹 기능을 제공하는 위젯",
+  icon: "Search",
+  tags: ["table", "search", "filter", "group", "search-widget"],
+  webType: "custom",
+  defaultSize: { width: 1920, height: 80 }, // 픽셀 단위: 전체 너비 × 80px 높이
+  component: TableSearchWidget,
+  defaultProps: {
+    title: "테이블 검색",
+    style: {
+      width: "100%",
+      height: "80px",
+      padding: "0.75rem",
+    },
+    componentConfig: {
+      autoSelectFirstTable: true,
+      showTableSelector: true,
+    },
+  },
+  renderer: TableSearchWidgetRenderer.render,
+  configPanel: TableSearchWidgetConfigPanel,
+  version: "1.0.0",
+  author: "WACE",
+});
+
+export { TableSearchWidget } from "./TableSearchWidget";
+export { TableSearchWidgetRenderer } from "./TableSearchWidgetRenderer";
+export { TableSearchWidgetConfigPanel } from "./TableSearchWidgetConfigPanel";
+

frontend/types/table-options.ts

@@ -0,0 +1,73 @@
+/**
+ * 테이블 옵션 관련 타입 정의
+ */
+
+/**
+ * 테이블 필터 조건
+ */
+export interface TableFilter {
+  columnName: string;
+  operator:
+    | "equals"
+    | "contains"
+    | "startsWith"
+    | "endsWith"
+    | "gt"
+    | "lt"
+    | "gte"
+    | "lte"
+    | "notEquals";
+  value: string | number | boolean;
+}
+
+/**
+ * 컬럼 표시 설정
+ */
+export interface ColumnVisibility {
+  columnName: string;
+  visible: boolean;
+  width?: number;
+  order?: number;
+  fixed?: boolean; // 좌측 고정 여부
+}
+
+/**
+ * 테이블 컬럼 정보
+ */
+export interface TableColumn {
+  columnName: string;
+  columnLabel: string;
+  inputType: string;
+  visible: boolean;
+  width: number;
+  sortable?: boolean;
+  filterable?: boolean;
+}
+
+/**
+ * 테이블 등록 정보
+ */
+export interface TableRegistration {
+  tableId: string; // 고유 ID (예: "table-list-123")
+  label: string; // 사용자에게 보이는 이름 (예: "품목 관리")
+  tableName: string; // 실제 DB 테이블명 (예: "item_info")
+  columns: TableColumn[];
+
+  // 콜백 함수들
+  onFilterChange: (filters: TableFilter[]) => void;
+  onGroupChange: (groups: string[]) => void;
+  onColumnVisibilityChange: (columns: ColumnVisibility[]) => void;
+}
+
+/**
+ * Context 값 타입
+ */
+export interface TableOptionsContextValue {
+  registeredTables: Map<string, TableRegistration>;
+  registerTable: (registration: TableRegistration) => void;
+  unregisterTable: (tableId: string) => void;
+  getTable: (tableId: string) => TableRegistration | undefined;
+  selectedTableId: string | null;
+  setSelectedTableId: (tableId: string | null) => void;
+}
+