diff --git a/frontend/components/v2/config-panels/V2AggregationWidgetConfigPanel.tsx b/frontend/components/v2/config-panels/V2AggregationWidgetConfigPanel.tsx
index 0c3e073d..ace13f60 100644
--- a/frontend/components/v2/config-panels/V2AggregationWidgetConfigPanel.tsx
+++ b/frontend/components/v2/config-panels/V2AggregationWidgetConfigPanel.tsx
@@ -2,14 +2,197 @@
 
 /**
  * V2AggregationWidget 설정 패널
- * 기존 AggregationWidgetConfigPanel의 모든 로직(테이블/컬럼 Combobox, 집계 항목 관리,
- * 필터 조건, 데이터 소스 선택, 스타일 설정 등)을 유지하면서
- * componentConfigChanged 이벤트를 추가하여 실시간 업데이트 지원
+ * 토스식 단계별 UX: 데이터 소스(카드) -> 테이블/컴포넌트 선택 -> 집계 항목 -> 필터(접힘) -> 레이아웃(접힘) -> 스타일(접힘)
+ * 기존 AggregationWidgetConfigPanel의 모든 기능을 자체 UI로 완전 구현
  */
 
-import React from "react";
-import { AggregationWidgetConfigPanel } from "@/lib/registry/components/v2-aggregation-widget/AggregationWidgetConfigPanel";
-import type { AggregationWidgetConfig } from "@/lib/registry/components/v2-aggregation-widget/types";
+import React, { useState, useEffect, useCallback, useMemo } from "react";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Switch } from "@/components/ui/switch";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";
+import { Separator } from "@/components/ui/separator";
+import {
+  Database,
+  Link2,
+  MousePointer,
+  Table2,
+  Check,
+  ChevronsUpDown,
+  Plus,
+  Trash2,
+  Calculator,
+  Filter,
+  LayoutGrid,
+  Paintbrush,
+  ChevronDown,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import { tableManagementApi } from "@/lib/api/tableManagement";
+import { tableTypeApi } from "@/lib/api/screen";
+import { getCategoryValues } from "@/lib/api/tableCategoryValue";
+import type {
+  AggregationWidgetConfig,
+  AggregationItem,
+  AggregationType,
+  DataSourceType,
+  FilterCondition,
+  FilterOperator,
+  FilterValueSourceType,
+} from "@/lib/registry/components/v2-aggregation-widget/types";
+
+// ─── 상수 ───
+
+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 파라미터",
+};
+
+const SOURCE_CARDS = [
+  { value: "table" as DataSourceType, icon: Database, title: "테이블", description: "DB에서 직접 조회" },
+  { value: "component" as DataSourceType, icon: Link2, title: "컴포넌트", description: "다른 컴포넌트 연결" },
+  { value: "selection" as DataSourceType, icon: MousePointer, title: "선택 데이터", description: "사용자 선택 행" },
+] as const;
+
+const AGGREGATION_TYPE_OPTIONS = [
+  { value: "sum", label: "합계 (SUM)" },
+  { value: "avg", label: "평균 (AVG)" },
+  { value: "count", label: "개수 (COUNT)" },
+  { value: "max", label: "최대 (MAX)" },
+  { value: "min", label: "최소 (MIN)" },
+] as const;
+
+const FORMAT_OPTIONS = [
+  { value: "number", label: "숫자" },
+  { value: "currency", label: "통화" },
+  { value: "percent", label: "퍼센트" },
+] as const;
+
+// ─── 공통 서브 컴포넌트 ───
+
+function SectionHeader({ icon: Icon, title, description }: {
+  icon: React.ComponentType<{ className?: string }>;
+  title: string;
+  description?: string;
+}) {
+  return (
+    <div className="space-y-1">
+      <div className="flex items-center gap-2">
+        <Icon className="h-4 w-4 text-muted-foreground" />
+        <h3 className="text-sm font-semibold">{title}</h3>
+      </div>
+      {description && <p className="text-muted-foreground text-[10px]">{description}</p>}
+    </div>
+  );
+}
+
+function SwitchRow({ label, description, checked, onCheckedChange }: {
+  label: string;
+  description?: string;
+  checked: boolean;
+  onCheckedChange: (checked: boolean) => void;
+}) {
+  return (
+    <div className="flex items-center justify-between py-1">
+      <div className="space-y-0.5">
+        <p className="text-sm">{label}</p>
+        {description && <p className="text-[11px] text-muted-foreground">{description}</p>}
+      </div>
+      <Switch checked={checked} onCheckedChange={onCheckedChange} />
+    </div>
+  );
+}
+
+function LabeledRow({ label, children }: {
+  label: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="flex items-center justify-between py-1">
+      <p className="text-xs text-muted-foreground">{label}</p>
+      {children}
+    </div>
+  );
+}
+
+// ─── 카테고리 값 콤보박스 ───
+
+function CategoryValueCombobox({
+  value,
+  options,
+  onChange,
+  placeholder = "값 선택",
+}: {
+  value: string;
+  options: Array<{ value: string; label: string }>;
+  onChange: (value: string) => void;
+  placeholder?: string;
+}) {
+  const [open, setOpen] = useState(false);
+  const selectedOption = options.find((opt) => opt.value === value);
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button variant="outline" role="combobox" aria-expanded={open} className="h-7 w-full justify-between text-xs font-normal">
+          <span className="truncate">{selectedOption ? selectedOption.label : placeholder}</span>
+          <ChevronsUpDown className="ml-1 h-3 w-3 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-[200px] p-0" align="start">
+        <Command>
+          <CommandInput placeholder="검색..." className="h-8 text-xs" />
+          <CommandList>
+            <CommandEmpty className="py-2 text-center text-xs">결과 없음</CommandEmpty>
+            <CommandGroup>
+              {options.map((opt, index) => (
+                <CommandItem
+                  key={`${opt.value}-${index}`}
+                  value={`${opt.label} ${opt.value}`}
+                  onSelect={() => { onChange(opt.value); setOpen(false); }}
+                  className="cursor-pointer text-xs"
+                >
+                  <Check className={cn("mr-2 h-3 w-3", value === opt.value ? "opacity-100" : "opacity-0")} />
+                  {opt.label}
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+// ─── 메인 컴포넌트 ───
+
+interface ColumnInfo {
+  columnName: string;
+  label?: string;
+  dataType?: string;
+  inputType?: string;
+  webType?: string;
+  categoryCode?: string;
+}
 
 interface V2AggregationWidgetConfigPanelProps {
   config: AggregationWidgetConfig;
@@ -28,11 +211,11 @@ export const V2AggregationWidgetConfigPanel: React.FC<V2AggregationWidgetConfigP
   config,
   onChange,
   screenTableName,
-  screenComponents,
+  screenComponents = [],
 }) => {
-  const handleChange = (newConfig: Partial<AggregationWidgetConfig>) => {
+  // componentConfigChanged 이벤트 발행 래퍼
+  const handleChange = useCallback((newConfig: Partial<AggregationWidgetConfig>) => {
     onChange(newConfig);
-
     if (typeof window !== "undefined") {
       window.dispatchEvent(
         new CustomEvent("componentConfigChanged", {
@@ -40,15 +223,957 @@ export const V2AggregationWidgetConfigPanel: React.FC<V2AggregationWidgetConfigP
         })
       );
     }
-  };
+  }, [onChange, config]);
 
+  // ─── 상태 ───
+  const [columns, setColumns] = useState<ColumnInfo[]>([]);
+  const [loadingColumns, setLoadingColumns] = useState(false);
+  const [availableTables, setAvailableTables] = useState<Array<{ tableName: string; displayName?: string }>>([]);
+  const [loadingTables, setLoadingTables] = useState(false);
+  const [tableComboboxOpen, setTableComboboxOpen] = useState(false);
+  const [categoryOptionsCache, setCategoryOptionsCache] = useState<Record<string, Array<{ value: string; label: string }>>>({});
+  const [sourceComponentColumnsCache, setSourceComponentColumnsCache] = useState<Record<string, Array<{ columnName: string; label?: string }>>>({});
+
+  // Collapsible 상태
+  const [filterOpen, setFilterOpen] = useState(false);
+  const [layoutOpen, setLayoutOpen] = useState(false);
+  const [styleOpen, setStyleOpen] = useState(false);
+
+  const dataSourceType = config.dataSourceType || "table";
+
+  // 실제 사용할 테이블 이름
+  const targetTableName = useMemo(() => {
+    if (config.useCustomTable && config.customTableName) return config.customTableName;
+    return config.tableName || screenTableName;
+  }, [config.useCustomTable, config.customTableName, config.tableName, screenTableName]);
+
+  // 연결 가능한 컴포넌트 (리피터, 테이블리스트)
+  const selectableComponents = useMemo(() => {
+    return screenComponents.filter((comp) =>
+      comp.componentType === "table-list" ||
+      comp.componentType === "v2-table-list" ||
+      comp.componentType === "v2-repeater" ||
+      comp.componentType === "repeat-container" ||
+      comp.componentType === "v2-repeat-container"
+    );
+  }, [screenComponents]);
+
+  // 폼 필드 컴포넌트
+  const formFieldComponents = useMemo(() => {
+    const excludeTypes = [
+      "aggregation", "widget", "button", "label", "display", "table-list",
+      "repeat", "container", "layout", "section", "card", "tabs", "modal",
+      "flow", "rack", "map", "chart", "image", "file", "media",
+    ];
+    return screenComponents
+      .filter((comp) => {
+        const type = comp.componentType?.toLowerCase() || "";
+        if (excludeTypes.some((ex) => type.includes(ex))) return false;
+        const isInput = type.includes("input") || type.includes("select") || type.includes("date") ||
+          type.includes("checkbox") || type.includes("radio") || type.includes("textarea") ||
+          type.includes("number") || type === "v2-input" || type === "v2-select" ||
+          type === "v2-date" || type === "v2-hierarchy";
+        return isInput || !!comp.columnName;
+      })
+      .map((comp) => ({
+        id: comp.id,
+        label: comp.label || comp.columnName || comp.id,
+        columnName: comp.columnName || comp.id,
+        componentType: comp.componentType,
+      }));
+  }, [screenComponents]);
+
+  // 숫자형 컬럼만
+  const numericColumns = useMemo(() => {
+    return columns.filter((col) => {
+      const inputType = (col.inputType || col.webType || "").toLowerCase();
+      return inputType === "number" || inputType === "decimal" || inputType === "integer" ||
+        inputType === "float" || inputType === "currency" || inputType === "percent";
+    });
+  }, [columns]);
+
+  // ─── 테이블 목록 로드 ───
+  useEffect(() => {
+    const fetchTables = async () => {
+      setLoadingTables(true);
+      try {
+        const response = await tableTypeApi.getTables();
+        setAvailableTables(
+          response.map((table: any) => ({
+            tableName: table.tableName,
+            displayName: table.displayName || table.tableName,
+          }))
+        );
+      } catch (err) {
+        console.error("테이블 목록 가져오기 실패:", err);
+      } finally {
+        setLoadingTables(false);
+      }
+    };
+    fetchTables();
+  }, []);
+
+  // 화면 테이블명 자동 설정
+  useEffect(() => {
+    if (screenTableName && !config.tableName && !config.customTableName) {
+      handleChange({ tableName: screenTableName });
+    }
+  }, [screenTableName, config.tableName, config.customTableName, handleChange]);
+
+  // ─── 컬럼 로드 ───
+  useEffect(() => {
+    const loadColumns = async () => {
+      if (!targetTableName) { setColumns([]); return; }
+      setLoadingColumns(true);
+      try {
+        const result = await tableManagementApi.getColumnList(targetTableName);
+        if (result.success && result.data?.columns) {
+          const mapped = result.data.columns.map((col: any) => ({
+            columnName: col.columnName || col.column_name,
+            label: col.displayName || col.columnLabel || col.column_label || col.label || col.columnName || col.column_name,
+            dataType: col.dataType || col.data_type,
+            inputType: col.inputType || col.input_type,
+            webType: col.webType || col.web_type,
+            categoryCode: col.categoryCode || col.category_code,
+          }));
+          setColumns(mapped);
+          const categoryCols = mapped.filter(
+            (c: ColumnInfo) => c.inputType === "category" || c.webType === "category"
+          );
+          if (categoryCols.length > 0) loadCategoryOptions(categoryCols);
+        } else {
+          setColumns([]);
+        }
+      } catch (err) {
+        console.error("컬럼 로드 실패:", err);
+        setColumns([]);
+      } finally {
+        setLoadingColumns(false);
+      }
+    };
+    loadColumns();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [targetTableName]);
+
+  // 소스 컴포넌트 컬럼 로드
+  const loadSourceComponentColumns = useCallback(async (componentId: string) => {
+    if (sourceComponentColumnsCache[componentId]) return;
+    const sourceComp = screenComponents.find((c) => c.id === componentId);
+    if (!sourceComp?.tableName) return;
+    try {
+      const response = await tableManagementApi.getColumnList(sourceComp.tableName);
+      const rawCols = response.data?.columns || (Array.isArray(response.data) ? response.data : []);
+      const cols = rawCols.map((col: any) => ({
+        columnName: col.column_name || col.columnName,
+        label: col.column_label || col.columnLabel || col.display_name || col.column_name || col.columnName,
+      }));
+      setSourceComponentColumnsCache((prev) => ({ ...prev, [componentId]: cols }));
+    } catch (err) {
+      console.error("소스 컴포넌트 컬럼 로드 실패:", err);
+    }
+  }, [sourceComponentColumnsCache, screenComponents]);
+
+  // 기존 필터의 소스 컴포넌트 컬럼 미리 로드
+  useEffect(() => {
+    (config.filters || []).forEach((filter) => {
+      if (filter.valueSourceType === "selection" && filter.sourceComponentId) {
+        loadSourceComponentColumns(filter.sourceComponentId);
+      }
+    });
+  }, [config.filters, loadSourceComponentColumns]);
+
+  // 카테고리 옵션 로드
+  const loadCategoryOptions = useCallback(async (categoryCols: Array<{ columnName: string; categoryCode?: string }>) => {
+    if (!targetTableName) return;
+    const newCache: Record<string, Array<{ value: string; label: string }>> = { ...categoryOptionsCache };
+    for (const col of categoryCols) {
+      const cacheKey = `${targetTableName}_${col.columnName}`;
+      if (newCache[cacheKey]) continue;
+      try {
+        const result = await getCategoryValues(targetTableName, col.columnName, false);
+        if (result.success && "data" in result && Array.isArray(result.data)) {
+          const seenCodes = new Set<string>();
+          const uniqueOptions: Array<{ value: string; label: string }> = [];
+          for (const item of result.data) {
+            const itemAny = item as any;
+            const code = item.valueCode || itemAny.code || itemAny.value || itemAny.id;
+            if (!seenCodes.has(code)) {
+              seenCodes.add(code);
+              uniqueOptions.push({
+                value: code,
+                label: item.valueLabel || itemAny.valueName || itemAny.name || itemAny.label || itemAny.displayName || code,
+              });
+            }
+          }
+          newCache[cacheKey] = uniqueOptions;
+        } else {
+          newCache[cacheKey] = [];
+        }
+      } catch {
+        newCache[cacheKey] = [];
+      }
+    }
+    setCategoryOptionsCache(newCache);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [targetTableName]);
+
+  const getCategoryOptionsForColumn = useCallback((columnName: string) => {
+    if (!targetTableName) return [];
+    return categoryOptionsCache[`${targetTableName}_${columnName}`] || [];
+  }, [targetTableName, categoryOptionsCache]);
+
+  const isCategoryColumn = useCallback((columnName: string) => {
+    const col = columns.find((c) => c.columnName === columnName);
+    return col?.inputType === "category" || col?.webType === "category";
+  }, [columns]);
+
+  // ─── 집계 항목 CRUD ───
+  const addItem = useCallback(() => {
+    const newItem: AggregationItem = {
+      id: `agg-${Date.now()}`,
+      columnName: "",
+      columnLabel: "",
+      type: "sum",
+      format: "number",
+      decimalPlaces: 0,
+    };
+    handleChange({ items: [...(config.items || []), newItem] });
+  }, [config.items, handleChange]);
+
+  const removeItem = useCallback((id: string) => {
+    handleChange({ items: (config.items || []).filter((item) => item.id !== id) });
+  }, [config.items, handleChange]);
+
+  const updateItem = useCallback((id: string, updates: Partial<AggregationItem>) => {
+    handleChange({
+      items: (config.items || []).map((item) => (item.id === id ? { ...item, ...updates } : item)),
+    });
+  }, [config.items, handleChange]);
+
+  // ─── 필터 CRUD ───
+  const addFilter = useCallback(() => {
+    const newFilter: FilterCondition = {
+      id: `filter-${Date.now()}`,
+      columnName: "",
+      operator: "eq",
+      valueSourceType: "static",
+      staticValue: "",
+      enabled: true,
+    };
+    handleChange({ filters: [...(config.filters || []), newFilter] });
+  }, [config.filters, handleChange]);
+
+  const removeFilter = useCallback((id: string) => {
+    handleChange({ filters: (config.filters || []).filter((f) => f.id !== id) });
+  }, [config.filters, handleChange]);
+
+  const updateFilter = useCallback((id: string, updates: Partial<FilterCondition>) => {
+    handleChange({
+      filters: (config.filters || []).map((f) => (f.id === id ? { ...f, ...updates } : f)),
+    });
+  }, [config.filters, handleChange]);
+
+  // ─── 테이블 변경 핸들러 ───
+  const handleTableSelect = useCallback((tableName: string, isCustom: boolean) => {
+    handleChange({
+      useCustomTable: isCustom,
+      customTableName: isCustom ? tableName : undefined,
+      tableName,
+      items: [],
+      filters: [],
+    });
+    setTableComboboxOpen(false);
+  }, [handleChange]);
+
+  const needsValue = (op: string) => op !== "isNull" && op !== "isNotNull";
+
+  // ─── 렌더링 ───
   return (
-    <AggregationWidgetConfigPanel
-      config={config}
-      onChange={handleChange}
-      screenTableName={screenTableName}
-      screenComponents={screenComponents}
-    />
+    <div className="space-y-4">
+      {/* ═══════════════════════════════════════ */}
+      {/* 1단계: 데이터 소스 (카드 선택)           */}
+      {/* ═══════════════════════════════════════ */}
+      <div className="space-y-3">
+        <SectionHeader icon={Database} title="데이터 소스" description="집계할 데이터를 가져올 방식을 선택하세요" />
+        <Separator />
+
+        <div className="grid grid-cols-3 gap-2">
+          {SOURCE_CARDS.map((card) => {
+            const Icon = card.icon;
+            const isSelected = dataSourceType === card.value;
+            return (
+              <button
+                key={card.value}
+                type="button"
+                onClick={() => {
+                  const updates: Partial<AggregationWidgetConfig> = { dataSourceType: card.value };
+                  if (card.value === "component" || card.value === "selection") {
+                    updates.tableName = screenTableName || config.tableName;
+                    updates.useCustomTable = false;
+                  }
+                  handleChange(updates);
+                }}
+                className={cn(
+                  "flex min-h-[70px] flex-col items-center justify-center rounded-lg border p-2.5 text-center transition-all",
+                  isSelected
+                    ? "border-primary bg-primary/5 ring-1 ring-primary/20"
+                    : "border-border hover:border-primary/50 hover:bg-muted/50"
+                )}
+              >
+                <Icon className="mb-1 h-4 w-4 text-primary" />
+                <span className="text-xs font-medium leading-tight">{card.title}</span>
+                <span className="mt-0.5 text-[10px] leading-tight text-muted-foreground">{card.description}</span>
+              </button>
+            );
+          })}
+        </div>
+
+        {/* ─── table 모드: 테이블 선택 ─── */}
+        {dataSourceType === "table" && (
+          <div className="space-y-2">
+            {/* 현재 선택된 테이블 */}
+            <div className="flex items-center gap-2 rounded-md border bg-muted/30 p-2">
+              <Database className="h-4 w-4 text-primary" />
+              <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>
+
+            <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}
+                >
+                  {loadingTables ? "로딩 중..." : "테이블 변경..."}
+                  <ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
+                </Button>
+              </PopoverTrigger>
+              <PopoverContent className="p-0" style={{ width: "var(--radix-popover-trigger-width)" }} align="start">
+                <Command>
+                  <CommandInput placeholder="테이블 검색..." className="text-xs" />
+                  <CommandList>
+                    <CommandEmpty className="text-xs">테이블을 찾을 수 없습니다</CommandEmpty>
+                    {screenTableName && (
+                      <CommandGroup heading="기본 (화면 테이블)">
+                        <CommandItem
+                          value={screenTableName}
+                          onSelect={() => handleTableSelect(screenTableName, false)}
+                          className="cursor-pointer text-xs"
+                        >
+                          <Check className={cn("mr-2 h-3 w-3", !config.useCustomTable ? "opacity-100" : "opacity-0")} />
+                          <Database className="mr-2 h-3 w-3 text-primary" />
+                          {screenTableName}
+                        </CommandItem>
+                      </CommandGroup>
+                    )}
+                    <CommandGroup heading="전체 테이블">
+                      {availableTables
+                        .filter((t) => t.tableName !== screenTableName)
+                        .map((table) => (
+                          <CommandItem
+                            key={table.tableName}
+                            value={`${table.tableName} ${table.displayName || ""}`}
+                            onSelect={() => handleTableSelect(table.tableName, true)}
+                            className="cursor-pointer text-xs"
+                          >
+                            <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-muted-foreground" />
+                            {table.displayName || table.tableName}
+                          </CommandItem>
+                        ))}
+                    </CommandGroup>
+                  </CommandList>
+                </Command>
+              </PopoverContent>
+            </Popover>
+          </div>
+        )}
+
+        {/* ─── component 모드: 컴포넌트 연결 ─── */}
+        {dataSourceType === "component" && (
+          <div className="space-y-2">
+            <span className="text-xs font-medium">연결할 컴포넌트</span>
+            <Select
+              value={config.dataSourceComponentId || ""}
+              onValueChange={(value) => handleChange({ dataSourceComponentId: value })}
+            >
+              <SelectTrigger className="h-8 text-xs">
+                <SelectValue placeholder="컴포넌트 선택..." />
+              </SelectTrigger>
+              <SelectContent>
+                {selectableComponents.length === 0 ? (
+                  <div className="p-2 text-center text-xs text-muted-foreground">
+                    연결 가능한 컴포넌트가 없습니다
+                    <br /><span className="text-[10px]">(리피터 또는 테이블리스트 필요)</span>
+                  </div>
+                ) : (
+                  selectableComponents.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>
+        )}
+
+        {/* ─── selection 모드: 안내 ─── */}
+        {dataSourceType === "selection" && (
+          <div className="space-y-2">
+            <div className="rounded-md border bg-primary/5 p-3 text-xs">
+              <p className="mb-1 font-medium text-primary">선택된 행 집계</p>
+              <p className="text-[10px] text-muted-foreground">
+                화면에서 사용자가 선택(체크)한 행들만 집계합니다.
+              </p>
+            </div>
+            <div className="flex items-center gap-2 rounded-md border bg-muted/30 p-2">
+              <Database className="h-4 w-4 text-primary" />
+              <span className="text-xs font-medium">
+                {config.customTableName || config.tableName || screenTableName || "테이블 미선택"}
+              </span>
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* ═══════════════════════════════════════ */}
+      {/* 2단계: 집계 항목                         */}
+      {/* ═══════════════════════════════════════ */}
+      <div className="space-y-3">
+        <div className="flex items-center justify-between">
+          <SectionHeader icon={Calculator} title="집계 항목" description="집계할 컬럼과 연산을 설정하세요" />
+          <Button type="button" variant="outline" size="sm" onClick={addItem} className="h-6 shrink-0 px-2 text-xs">
+            <Plus className="mr-1 h-3 w-3" />
+            추가
+          </Button>
+        </div>
+        <Separator />
+
+        {(config.items || []).length === 0 ? (
+          <div className="rounded-lg border-2 border-dashed py-6 text-center">
+            <Calculator className="mx-auto mb-2 h-8 w-8 text-muted-foreground opacity-30" />
+            <p className="text-sm text-muted-foreground">아직 집계 항목이 없어요</p>
+            <p className="text-xs text-muted-foreground">위의 추가 버튼으로 항목을 만들어보세요</p>
+          </div>
+        ) : (
+          <div className="space-y-2">
+            {(config.items || []).map((item, index) => (
+              <div key={item.id} className="space-y-2 rounded-md border p-2.5">
+                <div className="flex items-center justify-between">
+                  <span className="text-xs font-medium">항목 {index + 1}</span>
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => removeItem(item.id)}
+                    className="h-5 w-5 p-0 text-muted-foreground hover:text-destructive"
+                  >
+                    <Trash2 className="h-3 w-3" />
+                  </Button>
+                </div>
+
+                <div className="grid grid-cols-2 gap-2">
+                  {/* 컬럼 */}
+                  <div className="space-y-1">
+                    <span className="text-[10px] text-muted-foreground">컬럼</span>
+                    <Select
+                      value={item.columnName}
+                      onValueChange={(value) => {
+                        const col = columns.find((c) => c.columnName === value);
+                        updateItem(item.id, { columnName: value, columnLabel: col?.label || value });
+                      }}
+                      disabled={loadingColumns || columns.length === 0}
+                    >
+                      <SelectTrigger className="h-7 text-xs">
+                        <SelectValue placeholder={loadingColumns ? "로딩 중..." : columns.length === 0 ? "테이블을 선택하세요" : "컬럼 선택"} />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {(item.type === "count" ? columns : numericColumns).length === 0 ? (
+                          <div className="p-2 text-center text-xs text-muted-foreground">
+                            {item.type === "count" ? "컬럼이 없습니다" : "숫자형 컬럼이 없습니다"}
+                          </div>
+                        ) : (
+                          (item.type === "count" ? columns : numericColumns).map((col) => (
+                            <SelectItem key={col.columnName} value={col.columnName}>
+                              {col.label || col.columnName}
+                            </SelectItem>
+                          ))
+                        )}
+                      </SelectContent>
+                    </Select>
+                  </div>
+
+                  {/* 집계 타입 */}
+                  <div className="space-y-1">
+                    <span className="text-[10px] text-muted-foreground">집계 타입</span>
+                    <Select
+                      value={item.type}
+                      onValueChange={(value) => updateItem(item.id, { type: value as AggregationType })}
+                    >
+                      <SelectTrigger className="h-7 text-xs">
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {AGGREGATION_TYPE_OPTIONS.map((opt) => (
+                          <SelectItem key={opt.value} value={opt.value}>{opt.label}</SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+
+                  {/* 표시 라벨 */}
+                  <div className="space-y-1">
+                    <span className="text-[10px] text-muted-foreground">표시 라벨</span>
+                    <Input
+                      value={item.columnLabel || ""}
+                      onChange={(e) => updateItem(item.id, { columnLabel: e.target.value })}
+                      placeholder="표시될 라벨"
+                      className="h-7 text-xs"
+                    />
+                  </div>
+
+                  {/* 표시 형식 */}
+                  <div className="space-y-1">
+                    <span className="text-[10px] text-muted-foreground">표시 형식</span>
+                    <Select
+                      value={item.format || "number"}
+                      onValueChange={(value) => updateItem(item.id, { format: value as "number" | "currency" | "percent" })}
+                    >
+                      <SelectTrigger className="h-7 text-xs">
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {FORMAT_OPTIONS.map((opt) => (
+                          <SelectItem key={opt.value} value={opt.value}>{opt.label}</SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+
+                  {/* 접두사 */}
+                  <div className="space-y-1">
+                    <span className="text-[10px] text-muted-foreground">접두사</span>
+                    <Input
+                      value={item.prefix || ""}
+                      onChange={(e) => updateItem(item.id, { prefix: e.target.value })}
+                      placeholder="예: ₩"
+                      className="h-7 text-xs"
+                    />
+                  </div>
+
+                  {/* 접미사 */}
+                  <div className="space-y-1">
+                    <span className="text-[10px] text-muted-foreground">접미사</span>
+                    <Input
+                      value={item.suffix || ""}
+                      onChange={(e) => updateItem(item.id, { suffix: e.target.value })}
+                      placeholder="예: 원, 개"
+                      className="h-7 text-xs"
+                    />
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+
+      {/* ═══════════════════════════════════════ */}
+      {/* 3단계: 필터 조건 (접힘)                  */}
+      {/* ═══════════════════════════════════════ */}
+      {(dataSourceType === "table" || dataSourceType === "selection") && (
+        <Collapsible open={filterOpen} onOpenChange={setFilterOpen}>
+          <CollapsibleTrigger asChild>
+            <button
+              type="button"
+              className="flex w-full items-center justify-between rounded-lg border bg-muted/30 px-4 py-2.5 text-left transition-colors hover:bg-muted/50"
+            >
+              <div className="flex items-center gap-2">
+                <Filter className="h-4 w-4 text-muted-foreground" />
+                <span className="text-sm font-medium">필터 조건</span>
+                {(config.filters || []).length > 0 && (
+                  <span className="rounded-full bg-primary/10 px-1.5 py-0.5 text-[10px] font-medium text-primary">
+                    {(config.filters || []).length}
+                  </span>
+                )}
+              </div>
+              <ChevronDown className={cn("h-4 w-4 text-muted-foreground transition-transform duration-200", filterOpen && "rotate-180")} />
+            </button>
+          </CollapsibleTrigger>
+          <CollapsibleContent>
+            <div className="space-y-3 rounded-b-lg border border-t-0 p-4">
+              <div className="flex items-center justify-between">
+                <p className="text-[10px] text-muted-foreground">집계 대상을 필터링합니다</p>
+                <Button type="button" variant="outline" size="sm" onClick={addFilter} className="h-6 px-2 text-xs">
+                  <Plus className="mr-1 h-3 w-3" />
+                  추가
+                </Button>
+              </div>
+
+              {/* 필터 결합 방식 */}
+              {(config.filters || []).length > 1 && (
+                <LabeledRow label="조건 결합">
+                  <Select
+                    value={config.filterLogic || "AND"}
+                    onValueChange={(value) => handleChange({ filterLogic: value as "AND" | "OR" })}
+                  >
+                    <SelectTrigger className="h-7 w-[140px] text-xs">
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="AND">AND (모두 만족)</SelectItem>
+                      <SelectItem value="OR">OR (하나만 만족)</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </LabeledRow>
+              )}
+
+              {(config.filters || []).length === 0 ? (
+                <div className="rounded-lg border-2 border-dashed py-4 text-center">
+                  <Filter className="mx-auto mb-1 h-6 w-6 text-muted-foreground opacity-30" />
+                  <p className="text-xs text-muted-foreground">필터 없음 - 전체 데이터를 집계합니다</p>
+                </div>
+              ) : (
+                <div className="space-y-2">
+                  {(config.filters || []).map((filter, index) => (
+                    <div
+                      key={filter.id}
+                      className={cn("space-y-2 rounded-md border p-3", !filter.enabled && "opacity-50")}
+                    >
+                      <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 })}
+                            className="h-3.5 w-3.5"
+                          />
+                          <span className="text-xs font-medium">필터 {index + 1}</span>
+                        </div>
+                        <Button
+                          type="button"
+                          variant="ghost"
+                          size="sm"
+                          onClick={() => removeFilter(filter.id)}
+                          className="h-5 w-5 p-0 text-destructive hover:text-destructive"
+                        >
+                          <Trash2 className="h-3 w-3" />
+                        </Button>
+                      </div>
+
+                      <div className="grid grid-cols-2 gap-2">
+                        {/* 컬럼 */}
+                        <div className="space-y-1">
+                          <span className="text-[10px] text-muted-foreground">컬럼</span>
+                          <Select
+                            value={filter.columnName}
+                            onValueChange={(value) => {
+                              updateFilter(filter.id, { columnName: value, staticValue: "" });
+                              const col = columns.find((c) => c.columnName === value);
+                              if (col && (col.inputType === "category" || col.webType === "category")) {
+                                loadCategoryOptions([col]);
+                              }
+                            }}
+                            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">
+                          <span className="text-[10px] text-muted-foreground">연산자</span>
+                          <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>
+
+                        {/* 값 소스 타입 + 값 입력 */}
+                        {needsValue(filter.operator) && (
+                          <>
+                            <div className="space-y-1">
+                              <span className="text-[10px] text-muted-foreground">값 소스</span>
+                              <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">
+                              <span className="text-[10px] text-muted-foreground">
+                                {filter.valueSourceType === "static" && "값"}
+                                {filter.valueSourceType === "formField" && "폼 필드명"}
+                                {filter.valueSourceType === "selection" && "소스 컬럼"}
+                                {filter.valueSourceType === "urlParam" && "파라미터명"}
+                              </span>
+
+                              {filter.valueSourceType === "static" && (
+                                isCategoryColumn(filter.columnName) ? (
+                                  <CategoryValueCombobox
+                                    value={String(filter.staticValue || "")}
+                                    options={getCategoryOptionsForColumn(filter.columnName)}
+                                    onChange={(value) => updateFilter(filter.id, { staticValue: value })}
+                                    placeholder="값 선택"
+                                  />
+                                ) : (
+                                  <Input
+                                    value={String(filter.staticValue || "")}
+                                    onChange={(e) => updateFilter(filter.id, { staticValue: e.target.value })}
+                                    placeholder="값 입력"
+                                    className="h-7 text-xs"
+                                  />
+                                )
+                              )}
+
+                              {filter.valueSourceType === "formField" && (
+                                formFieldComponents.length > 0 ? (
+                                  <Select
+                                    value={filter.formFieldName || ""}
+                                    onValueChange={(value) => updateFilter(filter.id, { formFieldName: value })}
+                                  >
+                                    <SelectTrigger className="h-7 text-xs">
+                                      <SelectValue placeholder="폼 필드 선택" />
+                                    </SelectTrigger>
+                                    <SelectContent>
+                                      {formFieldComponents.map((field) => (
+                                        <SelectItem key={field.id} value={field.columnName}>
+                                          {field.label}
+                                        </SelectItem>
+                                      ))}
+                                    </SelectContent>
+                                  </Select>
+                                ) : (
+                                  <div className="flex h-7 items-center rounded-md border bg-muted/50 px-2 text-xs text-muted-foreground">
+                                    배치된 입력 필드가 없습니다
+                                  </div>
+                                )
+                              )}
+
+                              {filter.valueSourceType === "urlParam" && (
+                                <Input
+                                  value={filter.urlParamName || ""}
+                                  onChange={(e) => updateFilter(filter.id, { urlParamName: e.target.value })}
+                                  placeholder="파라미터명"
+                                  className="h-7 text-xs"
+                                />
+                              )}
+                            </div>
+
+                            {/* selection 모드: 소스 컴포넌트 + 소스 컬럼 (2행 사용) */}
+                            {filter.valueSourceType === "selection" && (
+                              <>
+                                <div className="space-y-1">
+                                  <span className="text-[10px] text-muted-foreground">소스 컴포넌트</span>
+                                  <Select
+                                    value={filter.sourceComponentId || ""}
+                                    onValueChange={(value) => {
+                                      updateFilter(filter.id, { sourceComponentId: value, sourceColumnName: "" });
+                                      if (value) loadSourceComponentColumns(value);
+                                    }}
+                                  >
+                                    <SelectTrigger className="h-7 text-xs">
+                                      <SelectValue placeholder="컴포넌트 선택" />
+                                    </SelectTrigger>
+                                    <SelectContent>
+                                      {selectableComponents.map((comp) => (
+                                        <SelectItem key={comp.id} value={comp.id}>
+                                          {comp.label || comp.id} ({comp.tableName || "테이블 미설정"})
+                                        </SelectItem>
+                                      ))}
+                                    </SelectContent>
+                                  </Select>
+                                </div>
+                                {filter.sourceComponentId && (
+                                  <div className="space-y-1">
+                                    <span className="text-[10px] text-muted-foreground">소스 컬럼</span>
+                                    <Select
+                                      value={filter.sourceColumnName || ""}
+                                      onValueChange={(value) => updateFilter(filter.id, { sourceColumnName: value })}
+                                    >
+                                      <SelectTrigger className="h-7 text-xs">
+                                        <SelectValue placeholder="컬럼 선택" />
+                                      </SelectTrigger>
+                                      <SelectContent>
+                                        {(sourceComponentColumnsCache[filter.sourceComponentId] || []).map((col) => (
+                                          <SelectItem key={col.columnName} value={col.columnName}>
+                                            {col.label || col.columnName}
+                                          </SelectItem>
+                                        ))}
+                                      </SelectContent>
+                                    </Select>
+                                  </div>
+                                )}
+                              </>
+                            )}
+                          </>
+                        )}
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </div>
+          </CollapsibleContent>
+        </Collapsible>
+      )}
+
+      {/* ═══════════════════════════════════════ */}
+      {/* 4단계: 레이아웃 설정 (접힘)               */}
+      {/* ═══════════════════════════════════════ */}
+      <Collapsible open={layoutOpen} onOpenChange={setLayoutOpen}>
+        <CollapsibleTrigger asChild>
+          <button
+            type="button"
+            className="flex w-full items-center justify-between rounded-lg border bg-muted/30 px-4 py-2.5 text-left transition-colors hover:bg-muted/50"
+          >
+            <div className="flex items-center gap-2">
+              <LayoutGrid className="h-4 w-4 text-muted-foreground" />
+              <span className="text-sm font-medium">레이아웃</span>
+            </div>
+            <ChevronDown className={cn("h-4 w-4 text-muted-foreground transition-transform duration-200", layoutOpen && "rotate-180")} />
+          </button>
+        </CollapsibleTrigger>
+        <CollapsibleContent>
+          <div className="space-y-3 rounded-b-lg border border-t-0 p-4">
+            <LabeledRow label="배치 방향">
+              <Select
+                value={config.layout || "horizontal"}
+                onValueChange={(value) => handleChange({ layout: value as "horizontal" | "vertical" })}
+              >
+                <SelectTrigger className="h-7 w-[120px] text-xs">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="horizontal">가로 배치</SelectItem>
+                  <SelectItem value="vertical">세로 배치</SelectItem>
+                </SelectContent>
+              </Select>
+            </LabeledRow>
+
+            <LabeledRow label="항목 간격">
+              <Input
+                value={config.gap || "16px"}
+                onChange={(e) => handleChange({ gap: e.target.value })}
+                placeholder="16px"
+                className="h-7 w-[100px] text-xs"
+              />
+            </LabeledRow>
+
+            <SwitchRow
+              label="라벨 표시"
+              description="각 항목의 라벨을 표시합니다"
+              checked={config.showLabels ?? true}
+              onCheckedChange={(checked) => handleChange({ showLabels: checked })}
+            />
+
+            <SwitchRow
+              label="아이콘 표시"
+              description="집계 타입 아이콘을 표시합니다"
+              checked={config.showIcons ?? true}
+              onCheckedChange={(checked) => handleChange({ showIcons: checked })}
+            />
+          </div>
+        </CollapsibleContent>
+      </Collapsible>
+
+      {/* ═══════════════════════════════════════ */}
+      {/* 5단계: 스타일 설정 (접힘)                 */}
+      {/* ═══════════════════════════════════════ */}
+      <Collapsible open={styleOpen} onOpenChange={setStyleOpen}>
+        <CollapsibleTrigger asChild>
+          <button
+            type="button"
+            className="flex w-full items-center justify-between rounded-lg border bg-muted/30 px-4 py-2.5 text-left transition-colors hover:bg-muted/50"
+          >
+            <div className="flex items-center gap-2">
+              <Paintbrush className="h-4 w-4 text-muted-foreground" />
+              <span className="text-sm font-medium">스타일</span>
+            </div>
+            <ChevronDown className={cn("h-4 w-4 text-muted-foreground transition-transform duration-200", styleOpen && "rotate-180")} />
+          </button>
+        </CollapsibleTrigger>
+        <CollapsibleContent>
+          <div className="space-y-3 rounded-b-lg border border-t-0 p-4">
+            <div className="grid grid-cols-2 gap-2">
+              <div className="space-y-1">
+                <span className="text-[10px] text-muted-foreground">배경색</span>
+                <Input
+                  type="color"
+                  value={config.backgroundColor || "#f8fafc"}
+                  onChange={(e) => handleChange({ backgroundColor: e.target.value })}
+                  className="h-8"
+                />
+              </div>
+              <div className="space-y-1">
+                <span className="text-[10px] text-muted-foreground">모서리 둥글기</span>
+                <Input
+                  value={config.borderRadius || "6px"}
+                  onChange={(e) => handleChange({ borderRadius: e.target.value })}
+                  placeholder="6px"
+                  className="h-7 text-xs"
+                />
+              </div>
+              <div className="space-y-1">
+                <span className="text-[10px] text-muted-foreground">라벨 색상</span>
+                <Input
+                  type="color"
+                  value={config.labelColor || "#64748b"}
+                  onChange={(e) => handleChange({ labelColor: e.target.value })}
+                  className="h-8"
+                />
+              </div>
+              <div className="space-y-1">
+                <span className="text-[10px] text-muted-foreground">값 색상</span>
+                <Input
+                  type="color"
+                  value={config.valueColor || "#0f172a"}
+                  onChange={(e) => handleChange({ valueColor: e.target.value })}
+                  className="h-8"
+                />
+              </div>
+            </div>
+          </div>
+        </CollapsibleContent>
+      </Collapsible>
+    </div>
   );
 };