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

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

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>
+  );
+};
+