집계 위젯 필터링 기능 추가: AggregationWidgetComponent와 AggregationWidgetConfigPanel에서 필터 조건을 적용하여 데이터를 필터링할 수 있는 기능을 구현하였습니다. 필터 조건 추가, 수정, 삭제 기능을 포함하여 다양한 데이터 소스에서 필터링을 지원하도록 개선하였습니다. 또한, 필터 연산자 및 값 소스 타입에 대한 라벨을 추가하여 사용자 경험을 향상시켰습니다.

frontend/lib/registry/components/v2-aggregation-widget/AggregationWidgetConfigPanel.tsx

@@ -14,9 +14,10 @@ import {
 } from "@/components/ui/select";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";
-import { Plus, Trash2, GripVertical, Database, Table2, ChevronsUpDown, Check } from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+import { Plus, Trash2, GripVertical, Database, Table2, ChevronsUpDown, Check, Filter, Link2, MousePointer } from "lucide-react";
 import { cn } from "@/lib/utils";
-import { AggregationWidgetConfig, AggregationItem, AggregationType } from "./types";
+import { AggregationWidgetConfig, AggregationItem, AggregationType, DataSourceType, FilterCondition, FilterOperator, FilterValueSourceType } from "./types";
 import { tableManagementApi } from "@/lib/api/tableManagement";
 import { tableTypeApi } from "@/lib/api/screen";
 
@@ -24,15 +25,40 @@ interface AggregationWidgetConfigPanelProps {
   config: AggregationWidgetConfig;
   onChange: (config: Partial<AggregationWidgetConfig>) => void;
   screenTableName?: string;
+  // 화면 내 컴포넌트 목록 (컴포넌트 연결용)
+  screenComponents?: Array<{ id: string; componentType: string; label?: string }>;
 }
 
 /**
  * 집계 위젯 설정 패널
  */
+// 연산자 라벨
+const OPERATOR_LABELS: Record<FilterOperator, string> = {
+  eq: "같음 (=)",
+  neq: "같지 않음 (!=)",
+  gt: "보다 큼 (>)",
+  gte: "크거나 같음 (>=)",
+  lt: "보다 작음 (<)",
+  lte: "작거나 같음 (<=)",
+  like: "포함",
+  in: "목록에 포함",
+  isNull: "NULL",
+  isNotNull: "NOT NULL",
+};
+
+// 값 소스 타입 라벨
+const VALUE_SOURCE_LABELS: Record<FilterValueSourceType, string> = {
+  static: "고정 값",
+  formField: "폼 필드",
+  selection: "선택된 행",
+  urlParam: "URL 파라미터",
+};
+
 export function AggregationWidgetConfigPanel({
   config,
   onChange,
   screenTableName,
+  screenComponents = [],
 }: AggregationWidgetConfigPanelProps) {
   const [columns, setColumns] = useState<Array<{ columnName: string; label?: string; dataType?: string; inputType?: string; webType?: string }>>([]);
   const [loadingColumns, setLoadingColumns] = useState(false);
@@ -40,6 +66,9 @@ export function AggregationWidgetConfigPanel({
   const [loadingTables, setLoadingTables] = useState(false);
   const [tableComboboxOpen, setTableComboboxOpen] = useState(false);
 
+  // 데이터 소스 타입 (기본값: table)
+  const dataSourceType = config.dataSourceType || "table";
+
   // 실제 사용할 테이블 이름 계산
   const targetTableName = useMemo(() => {
     if (config.useCustomTable && config.customTableName) {
@@ -156,116 +185,449 @@ export function AggregationWidgetConfigPanel({
     );
   });
 
+  // 필터 추가
+  const addFilter = () => {
+    const newFilter: FilterCondition = {
+      id: `filter-${Date.now()}`,
+      columnName: "",
+      operator: "eq",
+      valueSourceType: "static",
+      staticValue: "",
+      enabled: true,
+    };
+    onChange({
+      filters: [...(config.filters || []), newFilter],
+    });
+  };
+
+  // 필터 삭제
+  const removeFilter = (id: string) => {
+    onChange({
+      filters: (config.filters || []).filter((f) => f.id !== id),
+    });
+  };
+
+  // 필터 업데이트
+  const updateFilter = (id: string, updates: Partial<FilterCondition>) => {
+    onChange({
+      filters: (config.filters || []).map((f) =>
+        f.id === id ? { ...f, ...updates } : f
+      ),
+    });
+  };
+
+  // 연결 가능한 컴포넌트 (리피터, 테이블리스트)
+  const linkableComponents = screenComponents.filter(
+    (c) => c.componentType === "v2-unified-repeater" || 
+           c.componentType === "v2-table-list" ||
+           c.componentType === "unified-repeater" ||
+           c.componentType === "table-list"
+  );
+
   return (
     <div className="space-y-4">
       <div className="text-sm font-medium">집계 위젯 설정</div>
 
-      {/* 테이블 설정 (컴포넌트 개발 가이드 준수) */}
+      {/* 데이터 소스 타입 선택 */}
       <div className="space-y-3">
         <div>
-          <h3 className="text-sm font-semibold">데이터 소스 테이블</h3>
-          <p className="text-muted-foreground text-[10px]">집계할 데이터의 테이블을 선택합니다</p>
+          <h3 className="text-sm font-semibold">데이터 소스</h3>
+          <p className="text-muted-foreground text-[10px]">집계할 데이터를 가져올 방식을 선택합니다</p>
         </div>
         <hr className="border-border" />
 
-        {/* 현재 선택된 테이블 표시 (카드 형태) */}
-        <div className="flex items-center gap-2 rounded-md border bg-slate-50 p-2">
-          <Database className="h-4 w-4 text-blue-500" />
-          <div className="flex-1">
-            <div className="text-xs font-medium">
-              {config.customTableName || config.tableName || screenTableName || "테이블 미선택"}
-            </div>
-            <div className="text-[10px] text-muted-foreground">
-              {config.useCustomTable ? "커스텀 테이블" : "화면 기본 테이블"}
-            </div>
-          </div>
+        <div className="grid grid-cols-3 gap-2">
+          <Button
+            variant={dataSourceType === "table" ? "default" : "outline"}
+            size="sm"
+            className="h-auto flex-col gap-1 py-2 text-xs"
+            onClick={() => onChange({ dataSourceType: "table" })}
+          >
+            <Database className="h-4 w-4" />
+            <span>테이블</span>
+          </Button>
+          <Button
+            variant={dataSourceType === "component" ? "default" : "outline"}
+            size="sm"
+            className="h-auto flex-col gap-1 py-2 text-xs"
+            onClick={() => onChange({ dataSourceType: "component" })}
+          >
+            <Link2 className="h-4 w-4" />
+            <span>컴포넌트</span>
+          </Button>
+          <Button
+            variant={dataSourceType === "selection" ? "default" : "outline"}
+            size="sm"
+            className="h-auto flex-col gap-1 py-2 text-xs"
+            onClick={() => onChange({ dataSourceType: "selection" })}
+          >
+            <MousePointer className="h-4 w-4" />
+            <span>선택 데이터</span>
+          </Button>
         </div>
 
-        {/* 테이블 선택 Combobox */}
-        <Popover open={tableComboboxOpen} onOpenChange={setTableComboboxOpen}>
-          <PopoverTrigger asChild>
-            <Button
-              variant="outline"
-              role="combobox"
-              aria-expanded={tableComboboxOpen}
-              className="h-8 w-full justify-between text-xs"
-              disabled={loadingTables}
+        {/* 테이블 선택 (table 타입일 때) */}
+        {dataSourceType === "table" && (
+          <div className="space-y-2 mt-3">
+            <Label className="text-xs">데이터 테이블</Label>
+            
+            {/* 현재 선택된 테이블 표시 */}
+            <div className="flex items-center gap-2 rounded-md border bg-slate-50 p-2">
+              <Database className="h-4 w-4 text-blue-500" />
+              <div className="flex-1">
+                <div className="text-xs font-medium">
+                  {config.customTableName || config.tableName || screenTableName || "테이블 미선택"}
+                </div>
+                <div className="text-[10px] text-muted-foreground">
+                  {config.useCustomTable ? "커스텀 테이블" : "화면 기본 테이블"}
+                </div>
+              </div>
+            </div>
+
+            {/* 테이블 선택 Combobox */}
+            <Popover open={tableComboboxOpen} onOpenChange={setTableComboboxOpen}>
+              <PopoverTrigger asChild>
+                <Button
+                  variant="outline"
+                  role="combobox"
+                  aria-expanded={tableComboboxOpen}
+                  className="h-8 w-full justify-between text-xs"
+                  disabled={loadingTables}
+                >
+                  테이블 변경...
+                  <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                </Button>
+              </PopoverTrigger>
+              <PopoverContent className="w-full p-0" align="start">
+                <Command>
+                  <CommandInput placeholder="테이블 검색..." className="h-8 text-xs" />
+                  <CommandList>
+                    <CommandEmpty className="py-2 text-xs">테이블을 찾을 수 없습니다</CommandEmpty>
+
+                    {/* 그룹 1: 화면 기본 테이블 */}
+                    {screenTableName && (
+                      <CommandGroup heading="기본 (화면 테이블)">
+                        <CommandItem
+                          key={`default-${screenTableName}`}
+                          value={screenTableName}
+                          onSelect={() => {
+                            onChange({
+                              useCustomTable: false,
+                              customTableName: undefined,
+                              tableName: screenTableName,
+                              items: [],
+                              filters: [],
+                            });
+                            setTableComboboxOpen(false);
+                          }}
+                          className="text-xs cursor-pointer"
+                        >
+                          <Check
+                            className={cn(
+                              "mr-2 h-3 w-3",
+                              !config.useCustomTable ? "opacity-100" : "opacity-0"
+                            )}
+                          />
+                          <Database className="mr-2 h-3 w-3 text-blue-500" />
+                          {screenTableName}
+                        </CommandItem>
+                      </CommandGroup>
+                    )}
+
+                    {/* 그룹 2: 전체 테이블 */}
+                    <CommandGroup heading="전체 테이블">
+                      {availableTables
+                        .filter((table) => table.tableName !== screenTableName)
+                        .map((table) => (
+                          <CommandItem
+                            key={table.tableName}
+                            value={`${table.tableName} ${table.displayName || ""}`}
+                            onSelect={() => {
+                              onChange({
+                                useCustomTable: true,
+                                customTableName: table.tableName,
+                                tableName: table.tableName,
+                                items: [],
+                                filters: [],
+                              });
+                              setTableComboboxOpen(false);
+                            }}
+                            className="text-xs cursor-pointer"
+                          >
+                            <Check
+                              className={cn(
+                                "mr-2 h-3 w-3",
+                                config.customTableName === table.tableName ? "opacity-100" : "opacity-0"
+                              )}
+                            />
+                            <Table2 className="mr-2 h-3 w-3 text-slate-400" />
+                            {table.displayName || table.tableName}
+                          </CommandItem>
+                        ))}
+                    </CommandGroup>
+                  </CommandList>
+                </Command>
+              </PopoverContent>
+            </Popover>
+          </div>
+        )}
+
+        {/* 컴포넌트 연결 (component 타입일 때) */}
+        {dataSourceType === "component" && (
+          <div className="space-y-2 mt-3">
+            <Label className="text-xs">연결할 컴포넌트</Label>
+            <Select
+              value={config.dataSourceComponentId || ""}
+              onValueChange={(value) => onChange({ dataSourceComponentId: value })}
             >
-              테이블 변경...
-              <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
-            </Button>
-          </PopoverTrigger>
-          <PopoverContent className="w-full p-0" align="start">
-            <Command>
-              <CommandInput placeholder="테이블 검색..." className="h-8 text-xs" />
-              <CommandList>
-                <CommandEmpty className="py-2 text-xs">테이블을 찾을 수 없습니다</CommandEmpty>
-
-                {/* 그룹 1: 화면 기본 테이블 */}
-                {screenTableName && (
-                  <CommandGroup heading="기본 (화면 테이블)">
-                    <CommandItem
-                      key={`default-${screenTableName}`}
-                      value={screenTableName}
-                      onSelect={() => {
-                        onChange({
-                          useCustomTable: false,
-                          customTableName: undefined,
-                          tableName: screenTableName,
-                          items: [], // 테이블 변경 시 집계 항목 초기화
-                        });
-                        setTableComboboxOpen(false);
-                      }}
-                      className="text-xs cursor-pointer"
-                    >
-                      <Check
-                        className={cn(
-                          "mr-2 h-3 w-3",
-                          !config.useCustomTable ? "opacity-100" : "opacity-0"
-                        )}
-                      />
-                      <Database className="mr-2 h-3 w-3 text-blue-500" />
-                      {screenTableName}
-                    </CommandItem>
-                  </CommandGroup>
+              <SelectTrigger className="h-8 text-xs">
+                <SelectValue placeholder="컴포넌트 선택..." />
+              </SelectTrigger>
+              <SelectContent>
+                {linkableComponents.length === 0 ? (
+                  <div className="p-2 text-xs text-muted-foreground text-center">
+                    연결 가능한 컴포넌트가 없습니다<br/>
+                    <span className="text-[10px]">(리피터 또는 테이블리스트 필요)</span>
+                  </div>
+                ) : (
+                  linkableComponents.map((comp) => (
+                    <SelectItem key={comp.id} value={comp.id}>
+                      {comp.label || comp.id} ({comp.componentType})
+                    </SelectItem>
+                  ))
                 )}
+              </SelectContent>
+            </Select>
+            <p className="text-[10px] text-muted-foreground">
+              리피터 또는 테이블리스트의 데이터를 집계합니다
+            </p>
+          </div>
+        )}
 
-                {/* 그룹 2: 전체 테이블 */}
-                <CommandGroup heading="전체 테이블">
-                  {availableTables
-                    .filter((table) => table.tableName !== screenTableName)
-                    .map((table) => (
-                      <CommandItem
-                        key={table.tableName}
-                        value={`${table.tableName} ${table.displayName || ""}`}
-                        onSelect={() => {
-                          onChange({
-                            useCustomTable: true,
-                            customTableName: table.tableName,
-                            tableName: table.tableName,
-                            items: [], // 테이블 변경 시 집계 항목 초기화
-                          });
-                          setTableComboboxOpen(false);
-                        }}
-                        className="text-xs cursor-pointer"
-                      >
-                        <Check
-                          className={cn(
-                            "mr-2 h-3 w-3",
-                            config.customTableName === table.tableName ? "opacity-100" : "opacity-0"
-                          )}
-                        />
-                        <Table2 className="mr-2 h-3 w-3 text-slate-400" />
-                        {table.displayName || table.tableName}
-                      </CommandItem>
-                    ))}
-                </CommandGroup>
-              </CommandList>
-            </Command>
-          </PopoverContent>
-        </Popover>
+        {/* 선택 데이터 설명 (selection 타입일 때) */}
+        {dataSourceType === "selection" && (
+          <div className="space-y-2 mt-3">
+            <div className="rounded-md border bg-blue-50 p-3 text-xs text-blue-700">
+              <p className="font-medium mb-1">선택된 행 집계</p>
+              <p className="text-[10px]">
+                화면에서 사용자가 선택(체크)한 행들만 집계합니다.
+                테이블리스트나 리피터에서 선택된 데이터가 자동으로 집계됩니다.
+              </p>
+            </div>
+            
+            {/* 테이블 선택 (어느 테이블의 선택 데이터인지) */}
+            <Label className="text-xs">대상 테이블</Label>
+            <div className="flex items-center gap-2 rounded-md border bg-slate-50 p-2">
+              <Database className="h-4 w-4 text-blue-500" />
+              <div className="flex-1">
+                <div className="text-xs font-medium">
+                  {config.customTableName || config.tableName || screenTableName || "테이블 미선택"}
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
       </div>
 
+      {/* 필터 조건 (table 또는 selection 타입일 때) */}
+      {(dataSourceType === "table" || dataSourceType === "selection") && (
+        <div className="space-y-3">
+          <div className="flex items-center justify-between">
+            <div>
+              <h3 className="text-sm font-semibold flex items-center gap-1">
+                <Filter className="h-3 w-3" />
+                필터 조건
+              </h3>
+              <p className="text-muted-foreground text-[10px]">집계 대상을 필터링합니다</p>
+            </div>
+            <Button variant="outline" size="sm" onClick={addFilter} className="h-7 text-xs">
+              <Plus className="mr-1 h-3 w-3" />
+              필터 추가
+            </Button>
+          </div>
+          <hr className="border-border" />
+
+          {/* 필터 결합 방식 */}
+          {(config.filters || []).length > 1 && (
+            <div className="flex items-center gap-2">
+              <Label className="text-xs">조건 결합:</Label>
+              <Select
+                value={config.filterLogic || "AND"}
+                onValueChange={(value) => onChange({ filterLogic: value as "AND" | "OR" })}
+              >
+                <SelectTrigger className="h-7 w-24 text-xs">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="AND">AND (모두 만족)</SelectItem>
+                  <SelectItem value="OR">OR (하나만 만족)</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+          )}
+
+          {/* 필터 목록 */}
+          {(config.filters || []).length === 0 ? (
+            <div className="rounded-md border border-dashed p-4 text-center text-xs text-muted-foreground">
+              필터 조건이 없습니다. 전체 데이터를 집계합니다.
+            </div>
+          ) : (
+            <div className="space-y-2">
+              {(config.filters || []).map((filter, index) => (
+                <div
+                  key={filter.id}
+                  className={cn(
+                    "rounded-md border p-3 space-y-2",
+                    filter.enabled ? "bg-slate-50" : "bg-slate-100 opacity-60"
+                  )}
+                >
+                  <div className="flex items-center justify-between">
+                    <div className="flex items-center gap-2">
+                      <Checkbox
+                        checked={filter.enabled}
+                        onCheckedChange={(checked) => updateFilter(filter.id, { enabled: checked as boolean })}
+                      />
+                      <span className="text-xs font-medium">필터 {index + 1}</span>
+                      {filter.columnName && (
+                        <Badge variant="secondary" className="text-[10px]">
+                          {filter.columnName}
+                        </Badge>
+                      )}
+                    </div>
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => removeFilter(filter.id)}
+                      className="h-6 w-6 p-0 text-destructive"
+                    >
+                      <Trash2 className="h-3 w-3" />
+                    </Button>
+                  </div>
+
+                  <div className="grid grid-cols-2 gap-2">
+                    {/* 컬럼 선택 */}
+                    <div className="space-y-1">
+                      <Label className="text-[10px]">컬럼</Label>
+                      <Select
+                        value={filter.columnName}
+                        onValueChange={(value) => updateFilter(filter.id, { columnName: value })}
+                        disabled={loadingColumns}
+                      >
+                        <SelectTrigger className="h-7 text-xs">
+                          <SelectValue placeholder="컬럼 선택" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {columns.map((col) => (
+                            <SelectItem key={col.columnName} value={col.columnName}>
+                              {col.label || col.columnName}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    </div>
+
+                    {/* 연산자 선택 */}
+                    <div className="space-y-1">
+                      <Label className="text-[10px]">연산자</Label>
+                      <Select
+                        value={filter.operator}
+                        onValueChange={(value) => updateFilter(filter.id, { operator: value as FilterOperator })}
+                      >
+                        <SelectTrigger className="h-7 text-xs">
+                          <SelectValue />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {Object.entries(OPERATOR_LABELS).map(([key, label]) => (
+                            <SelectItem key={key} value={key}>
+                              {label}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    </div>
+
+                    {/* 값 소스 타입 */}
+                    {filter.operator !== "isNull" && filter.operator !== "isNotNull" && (
+                      <>
+                        <div className="space-y-1">
+                          <Label className="text-[10px]">값 소스</Label>
+                          <Select
+                            value={filter.valueSourceType}
+                            onValueChange={(value) => updateFilter(filter.id, { valueSourceType: value as FilterValueSourceType })}
+                          >
+                            <SelectTrigger className="h-7 text-xs">
+                              <SelectValue />
+                            </SelectTrigger>
+                            <SelectContent>
+                              {Object.entries(VALUE_SOURCE_LABELS).map(([key, label]) => (
+                                <SelectItem key={key} value={key}>
+                                  {label}
+                                </SelectItem>
+                              ))}
+                            </SelectContent>
+                          </Select>
+                        </div>
+
+                        {/* 값 입력 (소스 타입에 따라) */}
+                        <div className="space-y-1">
+                          <Label className="text-[10px]">
+                            {filter.valueSourceType === "static" && "값"}
+                            {filter.valueSourceType === "formField" && "폼 필드명"}
+                            {filter.valueSourceType === "selection" && "소스 컬럼"}
+                            {filter.valueSourceType === "urlParam" && "파라미터명"}
+                          </Label>
+                          {filter.valueSourceType === "static" && (
+                            <Input
+                              value={String(filter.staticValue || "")}
+                              onChange={(e) => updateFilter(filter.id, { staticValue: e.target.value })}
+                              placeholder="값 입력"
+                              className="h-7 text-xs"
+                            />
+                          )}
+                          {filter.valueSourceType === "formField" && (
+                            <Input
+                              value={filter.formFieldName || ""}
+                              onChange={(e) => updateFilter(filter.id, { formFieldName: e.target.value })}
+                              placeholder="필드명 입력"
+                              className="h-7 text-xs"
+                            />
+                          )}
+                          {filter.valueSourceType === "selection" && (
+                            <Select
+                              value={filter.sourceColumnName || ""}
+                              onValueChange={(value) => updateFilter(filter.id, { sourceColumnName: value })}
+                            >
+                              <SelectTrigger className="h-7 text-xs">
+                                <SelectValue placeholder="컬럼 선택" />
+                              </SelectTrigger>
+                              <SelectContent>
+                                {columns.map((col) => (
+                                  <SelectItem key={col.columnName} value={col.columnName}>
+                                    {col.label || col.columnName}
+                                  </SelectItem>
+                                ))}
+                              </SelectContent>
+                            </Select>
+                          )}
+                          {filter.valueSourceType === "urlParam" && (
+                            <Input
+                              value={filter.urlParamName || ""}
+                              onChange={(e) => updateFilter(filter.id, { urlParamName: e.target.value })}
+                              placeholder="파라미터명"
+                              className="h-7 text-xs"
+                            />
+                          )}
+                        </div>
+                      </>
+                    )}
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      )}
+
       {/* 레이아웃 설정 */}
       <div className="space-y-3">
         <div>