feat: 선택(select) 타입 필터 동적 옵션 로드 기능 추가

- TableRegistration에 getColumnUniqueValues 콜백 함수 추가
- TableListComponent에서 현재 데이터의 고유 값 추출 함수 구현
- TableSearchWidget에서 select 타입 필터의 옵션을 자동으로 로드
- 테이블 데이터가 변경되면 필터 옵션도 자동 업데이트
- 데이터 건수 표시 기능도 함께 수정 (등록 순서 문제 해결)

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

@@ -2,11 +2,13 @@
 
 import React, { useState, useEffect } from "react";
 import { Button } from "@/components/ui/button";
-import { Settings, Filter, Layers } from "lucide-react";
+import { Input } from "@/components/ui/input";
+import { Settings, Filter, Layers, Search } 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 { TableFilter } from "@/types/table-options";
 import {
   Select,
   SelectContent,
@@ -33,16 +35,23 @@ interface TableSearchWidgetProps {
 }
 
 export function TableSearchWidget({ component }: TableSearchWidgetProps) {
-  const { registeredTables, selectedTableId, setSelectedTableId } = useTableOptions();
+  const { registeredTables, selectedTableId, setSelectedTableId, getTable } = useTableOptions();
   const [columnVisibilityOpen, setColumnVisibilityOpen] = useState(false);
   const [filterOpen, setFilterOpen] = useState(false);
   const [groupingOpen, setGroupingOpen] = useState(false);
+  
+  // 활성화된 필터 목록
+  const [activeFilters, setActiveFilters] = useState<TableFilter[]>([]);
+  const [filterValues, setFilterValues] = useState<Record<string, string>>({});
+  // select 타입 필터의 옵션들
+  const [selectOptions, setSelectOptions] = useState<Record<string, Array<{ label: string; value: string }>>>({});
 
   const autoSelectFirstTable = component.componentConfig?.autoSelectFirstTable ?? true;
   const showTableSelector = component.componentConfig?.showTableSelector ?? true;
 
   // Map을 배열로 변환
   const tableList = Array.from(registeredTables.values());
+  const currentTable = selectedTableId ? getTable(selectedTableId) : undefined;
 
   // 첫 번째 테이블 자동 선택
   useEffect(() => {
@@ -53,58 +62,211 @@ export function TableSearchWidget({ component }: TableSearchWidgetProps) {
     }
   }, [registeredTables, selectedTableId, autoSelectFirstTable, setSelectedTableId]);
 
+  // 현재 테이블의 저장된 필터 불러오기 및 select 옵션 로드
+  useEffect(() => {
+    if (currentTable?.tableName) {
+      const storageKey = `table_filters_${currentTable.tableName}`;
+      const savedFilters = localStorage.getItem(storageKey);
+      
+      if (savedFilters) {
+        try {
+          const parsed = JSON.parse(savedFilters) as Array<{
+            columnName: string;
+            columnLabel: string;
+            inputType: string;
+            enabled: boolean;
+            filterType: "text" | "number" | "date" | "select";
+          }>;
+          
+          // enabled된 필터들만 activeFilters로 설정
+          const activeFiltersList: TableFilter[] = parsed
+            .filter((f) => f.enabled)
+            .map((f) => ({
+              columnName: f.columnName,
+              operator: "contains",
+              value: "",
+              filterType: f.filterType,
+            }));
+          
+          setActiveFilters(activeFiltersList);
+          
+          // select 타입 필터들의 옵션 로드
+          const loadSelectOptions = async () => {
+            const newOptions: Record<string, Array<{ label: string; value: string }>> = {};
+            
+            for (const filter of activeFiltersList) {
+              if (filter.filterType === "select" && currentTable.getColumnUniqueValues) {
+                try {
+                  const options = await currentTable.getColumnUniqueValues(filter.columnName);
+                  newOptions[filter.columnName] = options;
+                  console.log("✅ [TableSearchWidget] select 옵션 로드:", {
+                    columnName: filter.columnName,
+                    optionCount: options.length,
+                  });
+                } catch (error) {
+                  console.error("select 옵션 로드 실패:", filter.columnName, error);
+                }
+              }
+            }
+            
+            setSelectOptions(newOptions);
+          };
+          
+          loadSelectOptions();
+        } catch (error) {
+          console.error("저장된 필터 불러오기 실패:", error);
+        }
+      }
+    }
+  }, [currentTable?.tableName, currentTable?.getColumnUniqueValues]);
+
+  // 디버깅: 현재 테이블 정보 로깅
+  useEffect(() => {
+    if (currentTable) {
+      console.log("🔍 [TableSearchWidget] 현재 테이블 정보:", {
+        selectedTableId,
+        tableId: currentTable.tableId,
+        tableName: currentTable.tableName,
+        label: currentTable.label,
+        dataCount: currentTable.dataCount,
+        hasDataCount: currentTable.dataCount !== undefined,
+      });
+    } else {
+      console.log("🔍 [TableSearchWidget] 테이블 없음:", { selectedTableId });
+    }
+  }, [selectedTableId, currentTable?.dataCount]);
+
   const hasMultipleTables = tableList.length > 1;
 
+  // 필터 값 변경 핸들러
+  const handleFilterChange = (columnName: string, value: string) => {
+    setFilterValues((prev) => ({
+      ...prev,
+      [columnName]: value,
+    }));
+  };
+
+  // 검색 실행
+  const handleSearch = () => {
+    // 빈 값이 아닌 필터만 적용
+    const filtersWithValues = activeFilters.map((filter) => ({
+      ...filter,
+      value: filterValues[filter.columnName] || "",
+    })).filter((f) => f.value !== "");
+
+    currentTable?.onFilterChange(filtersWithValues);
+  };
+
+  // 필터 입력 필드 렌더링
+  const renderFilterInput = (filter: TableFilter) => {
+    const column = currentTable?.columns.find((c) => c.columnName === filter.columnName);
+    const value = filterValues[filter.columnName] || "";
+
+    switch (filter.filterType) {
+      case "date":
+        return (
+          <Input
+            type="date"
+            value={value}
+            onChange={(e) => handleFilterChange(filter.columnName, e.target.value)}
+            className="h-8 text-xs sm:h-9 sm:text-sm"
+            placeholder={column?.columnLabel}
+          />
+        );
+
+      case "number":
+        return (
+          <Input
+            type="number"
+            value={value}
+            onChange={(e) => handleFilterChange(filter.columnName, e.target.value)}
+            className="h-8 text-xs sm:h-9 sm:text-sm"
+            placeholder={column?.columnLabel}
+          />
+        );
+
+      case "select": {
+        const options = selectOptions[filter.columnName] || [];
+        return (
+          <Select
+            value={value}
+            onValueChange={(val) => handleFilterChange(filter.columnName, val)}
+          >
+            <SelectTrigger className="h-8 text-xs sm:h-9 sm:text-sm">
+              <SelectValue placeholder={column?.columnLabel} />
+            </SelectTrigger>
+            <SelectContent>
+              {options.length === 0 ? (
+                <SelectItem value="" disabled>
+                  옵션 없음
+                </SelectItem>
+              ) : (
+                options.map((option) => (
+                  <SelectItem key={option.value} value={option.value}>
+                    {option.label}
+                  </SelectItem>
+                ))
+              )}
+            </SelectContent>
+          </Select>
+        );
+      }
+
+      default: // text
+        return (
+          <Input
+            type="text"
+            value={value}
+            onChange={(e) => handleFilterChange(filter.columnName, e.target.value)}
+            className="h-8 text-xs sm:h-9 sm:text-sm"
+            placeholder={column?.columnLabel}
+          />
+        );
+    }
+  };
+
   return (
     <div
-      className="flex h-full w-full items-center justify-between gap-2 border-b bg-card"
+      className="flex h-full w-full items-center 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>
-        )}
+      {/* 필터 입력 필드들 */}
+      {activeFilters.length > 0 && (
+        <div className="flex flex-1 items-center gap-2 overflow-x-auto">
+          {activeFilters.map((filter) => (
+            <div key={filter.columnName} className="min-w-[150px]">
+              {renderFilterInput(filter)}
+            </div>
+          ))}
+          
+          {/* 검색 버튼 */}
+          <Button
+            variant="default"
+            size="sm"
+            onClick={handleSearch}
+            className="h-8 shrink-0 text-xs sm:h-9 sm:text-sm"
+          >
+            <Search className="mr-1 h-3 w-3 sm:h-4 sm:w-4" />
+            검색
+          </Button>
+        </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>
-        )}
+      {/* 필터가 없을 때는 빈 공간 */}
+      {activeFilters.length === 0 && <div className="flex-1" />}
 
-        {/* 테이블이 하나만 있을 때는 라벨만 표시 */}
-        {!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">
+        {/* 데이터 건수 표시 */}
+        {currentTable?.dataCount !== undefined && (
+          <div className="rounded-md bg-muted px-3 py-1.5 text-xs font-medium text-muted-foreground sm:text-sm">
+            {currentTable.dataCount.toLocaleString()}건
+          </div>
+        )}
+
         <Button
           variant="outline"
           size="sm"
@@ -153,7 +315,11 @@ export function TableSearchWidget({ component }: TableSearchWidgetProps) {
         isOpen={columnVisibilityOpen}
         onClose={() => setColumnVisibilityOpen(false)}
       />
-      <FilterPanel isOpen={filterOpen} onClose={() => setFilterOpen(false)} />
+      <FilterPanel 
+        isOpen={filterOpen} 
+        onClose={() => setFilterOpen(false)}
+        onFiltersApplied={(filters) => setActiveFilters(filters)}
+      />
       <GroupingPanel isOpen={groupingOpen} onClose={() => setGroupingOpen(false)} />
     </div>
   );