"use client";

import React, { useState, useEffect, useMemo } from "react";
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Label } from "@/components/ui/label";
import { Badge } from "@/components/ui/badge";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { Loader2, Save, X, Layers, Table as TableIcon, Plus, Trash2, RotateCcw, Pencil } from "lucide-react";
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from "@/components/ui/alert-dialog";
import {
  RepeatScreenModalProps,
  CardData,
  CardColumnConfig,
  GroupedCardData,
  CardRowData,
  AggregationConfig,
  TableColumnConfig,
  CardContentRowConfig,
  AggregationDisplayConfig,
  FooterConfig,
  FooterButtonConfig,
  TableDataSourceConfig,
  TableCrudConfig,
} from "./types";
import { ComponentRendererProps } from "@/types/component";
import { cn } from "@/lib/utils";
import { apiClient } from "@/lib/api/client";

export interface RepeatScreenModalComponentProps extends ComponentRendererProps {
  config?: RepeatScreenModalProps;
  groupedData?: Record<string, any>[]; // EditModal에서 전달하는 그룹 데이터
}

export function RepeatScreenModalComponent({
  component,
  isDesignMode = false,
  formData,
  onFormDataChange,
  config,
  className,
  groupedData: propsGroupedData, // EditModal에서 전달받는 그룹 데이터
  ...props
}: RepeatScreenModalComponentProps) {
  // props에서도 groupedData를 추출 (DynamicWebTypeRenderer에서 전달될 수 있음)
  const groupedData = propsGroupedData || (props as any).groupedData;
  const componentConfig = {
    ...config,
    ...component?.config,
  };

  // 설정 값 추출
  const dataSource = componentConfig?.dataSource;
  const saveMode = componentConfig?.saveMode || "all";
  const cardSpacing = componentConfig?.cardSpacing || "24px";
  const showCardBorder = componentConfig?.showCardBorder ?? true;
  const showCardTitle = componentConfig?.showCardTitle ?? true;
  const cardTitle = componentConfig?.cardTitle || "카드 {index}";
  const grouping = componentConfig?.grouping;
  
  // 🆕 v3: 자유 레이아웃
  const contentRows = componentConfig?.contentRows || [];
  
  // 🆕 v3.1: Footer 설정
  const footerConfig = componentConfig?.footerConfig;
  
  // (레거시 호환)
  const cardLayout = componentConfig?.cardLayout || [];
  const cardMode = componentConfig?.cardMode || "simple";
  const tableLayout = componentConfig?.tableLayout;

  // 상태
  const [rawData, setRawData] = useState<any[]>([]); // 원본 데이터
  const [cardsData, setCardsData] = useState<CardData[]>([]); // simple 모드용
  const [groupedCardsData, setGroupedCardsData] = useState<GroupedCardData[]>([]); // withTable 모드용
  const [isLoading, setIsLoading] = useState(false);
  const [loadError, setLoadError] = useState<string | null>(null);
  const [isSaving, setIsSaving] = useState(false);
  
  // 🆕 v3.1: 외부 테이블 데이터 (테이블 행별로 관리)
  const [externalTableData, setExternalTableData] = useState<Record<string, any[]>>({});
  // 🆕 v3.1: 삭제 확인 다이얼로그
  const [deleteConfirmOpen, setDeleteConfirmOpen] = useState(false);
  const [pendingDeleteInfo, setPendingDeleteInfo] = useState<{
    cardId: string;
    rowId: string;
    contentRowId: string;
  } | null>(null);

  // 🆕 v3.9: beforeFormSave 이벤트 핸들러 - ButtonPrimary 저장 시 externalTableData를 formData에 병합
  useEffect(() => {
    const handleBeforeFormSave = (event: Event) => {
      if (!(event instanceof CustomEvent) || !event.detail?.formData) return;

      console.log("[RepeatScreenModal] beforeFormSave 이벤트 수신");

      // 외부 테이블 데이터에서 dirty 행만 추출하여 저장 데이터 준비
      const saveDataByTable: Record<string, any[]> = {};

      for (const [key, rows] of Object.entries(externalTableData)) {
        // contentRow 찾기
        const contentRow = contentRows.find((r) => key.includes(r.id));
        if (!contentRow?.tableDataSource?.enabled) continue;

        const targetTable = contentRow.tableCrud?.targetTable || contentRow.tableDataSource.sourceTable;
        
        // dirty 행만 필터링 (삭제된 행 제외)
        const dirtyRows = rows.filter((row) => row._isDirty && !row._isDeleted);
        
        if (dirtyRows.length === 0) continue;

        // 저장할 필드만 추출
        const editableFields = (contentRow.tableColumns || [])
          .filter((col) => col.editable)
          .map((col) => col.field);
        
        const joinKeys = (contentRow.tableDataSource.joinConditions || [])
          .map((cond) => cond.sourceKey);

        const allowedFields = [...new Set([...editableFields, ...joinKeys])];

        if (!saveDataByTable[targetTable]) {
          saveDataByTable[targetTable] = [];
        }

        for (const row of dirtyRows) {
          const saveData: Record<string, any> = {};
          
          // 허용된 필드만 포함
          for (const field of allowedFields) {
            if (row[field] !== undefined) {
              saveData[field] = row[field];
            }
          }
          
          // _isNew 플래그 유지
          saveData._isNew = row._isNew;
          saveData._targetTable = targetTable;
          
          // 기존 레코드의 경우 id 포함
          if (!row._isNew && row._originalData?.id) {
            saveData.id = row._originalData.id;
          }

          saveDataByTable[targetTable].push(saveData);
        }
      }

      // formData에 테이블별 저장 데이터 추가
      for (const [tableName, rows] of Object.entries(saveDataByTable)) {
        const fieldKey = `_repeatScreenModal_${tableName}`;
        event.detail.formData[fieldKey] = rows;
        console.log(`[RepeatScreenModal] beforeFormSave - ${tableName} 저장 데이터:`, rows);
      }

      // 🆕 v3.9: 집계 저장 설정 정보도 formData에 추가
      if (grouping?.aggregations && groupedCardsData.length > 0) {
        const aggregationSaveConfigs: Array<{
          resultField: string;
          aggregatedValue: number;
          targetTable: string;
          targetColumn: string;
          joinKey: { sourceField: string; targetField: string };
          sourceValue: any; // 조인 키 값
        }> = [];

        for (const card of groupedCardsData) {
          for (const agg of grouping.aggregations) {
            if (agg.saveConfig?.enabled) {
              const { saveConfig, resultField } = agg;
              const { targetTable, targetColumn, joinKey } = saveConfig;

              if (!targetTable || !targetColumn || !joinKey?.sourceField || !joinKey?.targetField) {
                continue;
              }

              const aggregatedValue = card._aggregations?.[resultField] ?? 0;
              const sourceValue = card._representativeData?.[joinKey.sourceField];

              if (sourceValue !== undefined) {
                aggregationSaveConfigs.push({
                  resultField,
                  aggregatedValue,
                  targetTable,
                  targetColumn,
                  joinKey,
                  sourceValue,
                });
              }
            }
          }
        }

        if (aggregationSaveConfigs.length > 0) {
          event.detail.formData._repeatScreenModal_aggregations = aggregationSaveConfigs;
          console.log("[RepeatScreenModal] beforeFormSave - 집계 저장 설정:", aggregationSaveConfigs);
        }
      }
    };

    window.addEventListener("beforeFormSave", handleBeforeFormSave as EventListener);
    return () => {
      window.removeEventListener("beforeFormSave", handleBeforeFormSave as EventListener);
    };
  }, [externalTableData, contentRows, grouping, groupedCardsData]);

  // 초기 데이터 로드
  useEffect(() => {
    const loadInitialData = async () => {
      console.log("[RepeatScreenModal] 데이터 로드 시작");
      console.log("[RepeatScreenModal] groupedData (from EditModal):", groupedData);
      console.log("[RepeatScreenModal] formData:", formData);
      console.log("[RepeatScreenModal] dataSource:", dataSource);

      setIsLoading(true);
      setLoadError(null);

      try {
        let loadedData: any[] = [];

        // 🆕 우선순위 1: EditModal에서 전달받은 groupedData 사용
        if (groupedData && groupedData.length > 0) {
          console.log("[RepeatScreenModal] groupedData 사용:", groupedData.length, "건");
          loadedData = groupedData;
        }
        // 우선순위 2: API 호출
        else if (dataSource && dataSource.sourceTable) {
          // 필터 조건 생성
          const filters: Record<string, any> = {};

          // formData에서 선택된 행 ID 가져오기
          let selectedIds: any[] = [];
          
          if (formData) {
            // 1. 명시적으로 설정된 filterField 확인
            if (dataSource.filterField) {
              const filterValue = formData[dataSource.filterField];
              if (filterValue) {
                selectedIds = Array.isArray(filterValue) ? filterValue : [filterValue];
              }
            }
            
            // 2. 일반적인 선택 필드 확인 (fallback)
            if (selectedIds.length === 0) {
              const commonFields = ['selectedRows', 'selectedIds', 'checkedRows', 'checkedIds', 'ids'];
              for (const field of commonFields) {
                if (formData[field]) {
                  const value = formData[field];
                  selectedIds = Array.isArray(value) ? value : [value];
                  console.log(`[RepeatScreenModal] ${field}에서 선택된 ID 발견:`, selectedIds);
                  break;
                }
              }
            }
            
            // 3. formData에 id가 있으면 단일 행
            if (selectedIds.length === 0 && formData.id) {
              selectedIds = [formData.id];
              console.log("[RepeatScreenModal] formData.id 사용:", selectedIds);
            }
          }

          console.log("[RepeatScreenModal] 최종 선택된 ID:", selectedIds);

          // 선택된 ID가 있으면 필터 적용
          if (selectedIds.length > 0) {
            filters.id = selectedIds;
          } else {
            console.warn("[RepeatScreenModal] 선택된 데이터가 없습니다.");
            setRawData([]);
            setCardsData([]);
            setGroupedCardsData([]);
            setIsLoading(false);
            return;
          }

          console.log("[RepeatScreenModal] API 필터:", filters);

          // API 호출
          const response = await apiClient.post(`/table-management/tables/${dataSource.sourceTable}/data`, {
            search: filters,
            page: 1,
            size: 1000,
          });

          if (response.data.success && response.data.data?.data) {
            loadedData = response.data.data.data;
          }
        } else {
          console.log("[RepeatScreenModal] 데이터 소스 없음");
          setRawData([]);
          setCardsData([]);
          setGroupedCardsData([]);
          setIsLoading(false);
          return;
        }

        console.log("[RepeatScreenModal] 로드된 데이터:", loadedData.length, "건");

        if (loadedData.length === 0) {
          setRawData([]);
          setCardsData([]);
          setGroupedCardsData([]);
          setIsLoading(false);
          return;
        }

        setRawData(loadedData);

        // 🆕 v3: contentRows가 있으면 새로운 방식 사용
        const useNewLayout = contentRows && contentRows.length > 0;
        
        // 그룹핑 모드 확인 (groupByField가 없어도 enabled면 그룹핑 모드로 처리)
        const useGrouping = grouping?.enabled;
        
        if (useGrouping) {
          // 그룹핑 모드
          const grouped = processGroupedData(loadedData, grouping);
          setGroupedCardsData(grouped);
        } else {
          // 단순 모드: 각 행이 하나의 카드
          const initialCards: CardData[] = await Promise.all(
            loadedData.map(async (row: any, index: number) => ({
              _cardId: `card-${index}-${Date.now()}`,
              _originalData: { ...row },
              _isDirty: false,
              ...(await loadCardData(row)),
            }))
          );
          setCardsData(initialCards);
        }
      } catch (error: any) {
        console.error("데이터 로드 실패:", error);
        setLoadError(error.message || "데이터 로드 중 오류가 발생했습니다.");
      } finally {
        setIsLoading(false);
      }
    };

    loadInitialData();
  }, [dataSource, formData, groupedData, contentRows, grouping?.enabled, grouping?.groupByField]);

  // 🆕 v3.1: 외부 테이블 데이터 로드
  useEffect(() => {
    const loadExternalTableData = async () => {
      // contentRows에서 외부 테이블 데이터 소스가 있는 table 타입 행 찾기
      const tableRowsWithExternalSource = contentRows.filter(
        (row) => row.type === "table" && row.tableDataSource?.enabled
      );

      if (tableRowsWithExternalSource.length === 0) return;
      if (groupedCardsData.length === 0 && cardsData.length === 0) return;

      const newExternalData: Record<string, any[]> = {};

      for (const contentRow of tableRowsWithExternalSource) {
        const dataSourceConfig = contentRow.tableDataSource!;
        const cards = groupedCardsData.length > 0 ? groupedCardsData : cardsData;

        for (const card of cards) {
          const cardId = card._cardId;
          const representativeData = (card as GroupedCardData)._representativeData || card;

          try {
            // 조인 조건 생성
            const filters: Record<string, any> = {};
            for (const condition of dataSourceConfig.joinConditions) {
              const refValue = representativeData[condition.referenceKey];
              if (refValue !== undefined && refValue !== null) {
                filters[condition.sourceKey] = refValue;
              }
            }

            if (Object.keys(filters).length === 0) {
              console.warn(`[RepeatScreenModal] 조인 조건이 없습니다: ${contentRow.id}`);
              continue;
            }

            // API 호출 - 메인 테이블 데이터
            const response = await apiClient.post(
              `/table-management/tables/${dataSourceConfig.sourceTable}/data`,
              {
                search: filters,
                page: 1,
                size: dataSourceConfig.limit || 100,
                sort: dataSourceConfig.orderBy
                  ? {
                      column: dataSourceConfig.orderBy.column,
                      direction: dataSourceConfig.orderBy.direction,
                    }
                  : undefined,
              }
            );

            if (response.data.success && response.data.data?.data) {
              let tableData = response.data.data.data;
              
              console.log(`[RepeatScreenModal] 소스 테이블 데이터 로드 완료:`, {
                sourceTable: dataSourceConfig.sourceTable,
                rowCount: tableData.length,
                sampleRow: tableData[0] ? Object.keys(tableData[0]) : [],
                firstRowData: tableData[0],
                // 디버그: plan_date 필드 확인
                plan_date_value: tableData[0]?.plan_date,
              });

              // 🆕 v3.3: 추가 조인 테이블 데이터 로드 및 병합
              if (dataSourceConfig.additionalJoins && dataSourceConfig.additionalJoins.length > 0) {
                console.log(`[RepeatScreenModal] 조인 설정:`, dataSourceConfig.additionalJoins);
                tableData = await loadAndMergeJoinData(tableData, dataSourceConfig.additionalJoins);
                console.log(`[RepeatScreenModal] 조인 후 데이터:`, {
                  rowCount: tableData.length,
                  sampleRow: tableData[0] ? Object.keys(tableData[0]) : [],
                  firstRowData: tableData[0],
                });
              }

              // 🆕 v3.4: 필터 조건 적용
              if (dataSourceConfig.filterConfig?.enabled) {
                const { filterField, filterType, referenceField, referenceSource } = dataSourceConfig.filterConfig;
                
                // 비교 값 가져오기
                let referenceValue: any;
                if (referenceSource === "formData") {
                  referenceValue = formData?.[referenceField];
                } else {
                  // representativeData
                  referenceValue = representativeData[referenceField];
                }

                if (referenceValue !== undefined && referenceValue !== null) {
                  tableData = tableData.filter((row: any) => {
                    const rowValue = row[filterField];
                    if (filterType === "equals") {
                      return rowValue === referenceValue;
                    } else {
                      // notEquals
                      return rowValue !== referenceValue;
                    }
                  });
                  
                  console.log(`[RepeatScreenModal] 필터 적용: ${filterField} ${filterType} ${referenceValue}, 결과: ${tableData.length}건`);
                }
              }

              const key = `${cardId}-${contentRow.id}`;
              newExternalData[key] = tableData.map((row: any, idx: number) => ({
                _rowId: `ext-row-${cardId}-${contentRow.id}-${idx}-${Date.now()}`,
                _originalData: { ...row },
                _isDirty: false,
                _isNew: false,
                _isEditing: false, // 🆕 v3.8: 로드된 데이터는 읽기 전용
                _isDeleted: false,
                ...row,
              }));
              
              // 디버그: 저장된 외부 테이블 데이터 확인
              console.log(`[RepeatScreenModal] 외부 테이블 데이터 저장:`, {
                key,
                rowCount: newExternalData[key].length,
                firstRow: newExternalData[key][0],
                plan_date_in_firstRow: newExternalData[key][0]?.plan_date,
              });
            }
          } catch (error) {
            console.error(`[RepeatScreenModal] 외부 테이블 데이터 로드 실패:`, error);
          }
        }
      }

      setExternalTableData((prev) => {
        // 이전 데이터와 동일하면 업데이트하지 않음 (무한 루프 방지)
        const prevKeys = Object.keys(prev).sort().join(",");
        const newKeys = Object.keys(newExternalData).sort().join(",");
        if (prevKeys === newKeys) {
          // 키가 같으면 데이터 내용 비교
          const isSame = Object.keys(newExternalData).every(
            (key) => JSON.stringify(prev[key]) === JSON.stringify(newExternalData[key])
          );
          if (isSame) return prev;
        }
        
        // 🆕 v3.2: 외부 테이블 데이터 로드 후 집계 재계산
        // 비동기적으로 처리하여 무한 루프 방지
        setTimeout(() => {
          recalculateAggregationsWithExternalData(newExternalData);
        }, 0);
        
        return newExternalData;
      });
    };

    loadExternalTableData();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [contentRows, groupedCardsData.length, cardsData.length]);

  // 🆕 v3.3: 추가 조인 테이블 데이터 로드 및 병합
  const loadAndMergeJoinData = async (
    mainData: any[],
    additionalJoins: { id: string; joinTable: string; joinType: string; sourceKey: string; targetKey: string }[]
  ): Promise<any[]> => {
    if (mainData.length === 0) return mainData;

    // 각 조인 테이블별로 필요한 키 값들 수집
    for (const joinConfig of additionalJoins) {
      if (!joinConfig.joinTable || !joinConfig.sourceKey || !joinConfig.targetKey) continue;

      // 메인 데이터에서 조인 키 값들 추출
      const joinKeyValues = [...new Set(mainData.map((row) => row[joinConfig.sourceKey]).filter(Boolean))];
      
      if (joinKeyValues.length === 0) continue;

      try {
        // 조인 테이블 데이터 조회
        const joinResponse = await apiClient.post(
          `/table-management/tables/${joinConfig.joinTable}/data`,
          {
            search: { [joinConfig.targetKey]: joinKeyValues },
            page: 1,
            size: 1000, // 충분히 큰 값
          }
        );

        if (joinResponse.data.success && joinResponse.data.data?.data) {
          const joinData = joinResponse.data.data.data;
          
          // 조인 데이터를 맵으로 변환 (빠른 조회를 위해)
          const joinDataMap = new Map<any, any>();
          for (const joinRow of joinData) {
            joinDataMap.set(joinRow[joinConfig.targetKey], joinRow);
          }

          // 메인 데이터에 조인 데이터 병합
          mainData = mainData.map((row) => {
            const joinKey = row[joinConfig.sourceKey];
            const joinRow = joinDataMap.get(joinKey);
            
            if (joinRow) {
              // 조인 테이블의 컬럼들을 메인 데이터에 추가 (접두사 없이)
              const mergedRow = { ...row };
              for (const [key, value] of Object.entries(joinRow)) {
                // 이미 존재하는 키가 아닌 경우에만 추가 (메인 테이블 우선)
                if (!(key in mergedRow)) {
                  mergedRow[key] = value;
                } else {
                  // 충돌하는 경우 조인 테이블명을 접두사로 사용
                  mergedRow[`${joinConfig.joinTable}_${key}`] = value;
                }
              }
              return mergedRow;
            }
            return row;
          });
        }
      } catch (error) {
        console.error(`[RepeatScreenModal] 조인 테이블 데이터 로드 실패 (${joinConfig.joinTable}):`, error);
      }
    }

    return mainData;
  };

  // 🆕 v3.2: 외부 테이블 데이터가 로드된 후 집계 재계산
  const recalculateAggregationsWithExternalData = (extData: Record<string, any[]>) => {
    if (!grouping?.aggregations || grouping.aggregations.length === 0) return;
    if (groupedCardsData.length === 0) return;

    // 외부 테이블 집계 또는 formula가 있는지 확인
    const hasExternalAggregation = grouping.aggregations.some((agg) => {
      const sourceType = agg.sourceType || "column";
      if (sourceType === "formula") return true; // formula는 외부 테이블 참조 가능
      if (sourceType === "column") {
        const sourceTable = agg.sourceTable || dataSource?.sourceTable;
        return sourceTable && sourceTable !== dataSource?.sourceTable;
      }
      return false;
    });

    if (!hasExternalAggregation) return;

    // contentRows에서 외부 테이블 데이터 소스가 있는 table 타입 행 찾기
    const tableRowWithExternalSource = contentRows.find(
      (row) => row.type === "table" && row.tableDataSource?.enabled
    );

    if (!tableRowWithExternalSource) return;

    // 각 카드의 집계 재계산
    const updatedCards = groupedCardsData.map((card) => {
      const key = `${card._cardId}-${tableRowWithExternalSource.id}`;
      // 🆕 v3.7: 삭제된 행은 집계에서 제외
      const externalRows = (extData[key] || []).filter((row) => !row._isDeleted);

      // 집계 재계산
      const newAggregations: Record<string, number> = {};
      
      grouping.aggregations!.forEach((agg) => {
        const sourceType = agg.sourceType || "column";
        
        if (sourceType === "column") {
          const sourceTable = agg.sourceTable || dataSource?.sourceTable;
          const isExternalTable = sourceTable && sourceTable !== dataSource?.sourceTable;
          
          if (isExternalTable) {
            // 외부 테이블 집계
            newAggregations[agg.resultField] = calculateColumnAggregation(
              externalRows, 
              agg.sourceField || "", 
              agg.type || "sum"
            );
          } else {
            // 기본 테이블 집계 (기존 값 유지)
            newAggregations[agg.resultField] = card._aggregations[agg.resultField] || 
              calculateColumnAggregation(card._rows, agg.sourceField || "", agg.type || "sum");
          }
        } else if (sourceType === "formula" && agg.formula) {
          // 가상 집계 (연산식) - 외부 테이블 데이터 포함하여 재계산
          newAggregations[agg.resultField] = evaluateFormulaWithContext(
            agg.formula,
            card._representativeData,
            card._rows,
            externalRows,
            newAggregations // 이전 집계 결과 참조
          );
        }
      });

      return {
        ...card,
        _aggregations: newAggregations,
      };
    });

    // 변경된 경우에만 업데이트 (무한 루프 방지)
    setGroupedCardsData((prev) => {
      const hasChanges = updatedCards.some((card, idx) => {
        const prevCard = prev[idx];
        if (!prevCard) return true;
        return JSON.stringify(card._aggregations) !== JSON.stringify(prevCard._aggregations);
      });
      return hasChanges ? updatedCards : prev;
    });
  };

  // 🆕 v3.1: 외부 테이블 행 추가
  const handleAddExternalRow = (cardId: string, contentRowId: string, contentRow: CardContentRowConfig) => {
    const key = `${cardId}-${contentRowId}`;
    const card = groupedCardsData.find((c) => c._cardId === cardId) || cardsData.find((c) => c._cardId === cardId);
    const representativeData = (card as GroupedCardData)?._representativeData || card || {};

    // 기본값 생성
    const newRowData: Record<string, any> = {
      _rowId: `new-row-${Date.now()}`,
      _originalData: {},
      _isDirty: true,
      _isNew: true,
    };

    // 🆕 v3.5: 카드 대표 데이터에서 조인 테이블 컬럼 값 자동 채우기
    // tableColumns에서 정의된 필드들 중 representativeData에 있는 값을 자동으로 채움
    if (contentRow.tableColumns) {
      for (const col of contentRow.tableColumns) {
        // representativeData에 해당 필드가 있으면 자동으로 채움
        if (representativeData[col.field] !== undefined && representativeData[col.field] !== null) {
          newRowData[col.field] = representativeData[col.field];
        }
      }
    }

    // 🆕 v3.5: 조인 조건의 키 값도 자동으로 채움 (예: sales_order_id)
    if (contentRow.tableDataSource?.joinConditions) {
      for (const condition of contentRow.tableDataSource.joinConditions) {
        // sourceKey는 소스 테이블(예: shipment_plan)의 컬럼
        // referenceKey는 카드 대표 데이터의 컬럼 (예: id)
        const refValue = representativeData[condition.referenceKey];
        if (refValue !== undefined && refValue !== null) {
          newRowData[condition.sourceKey] = refValue;
        }
      }
    }

    // newRowDefaults 적용 (사용자 정의 기본값이 우선)
    if (contentRow.tableCrud?.newRowDefaults) {
      for (const [field, template] of Object.entries(contentRow.tableCrud.newRowDefaults)) {
        // {fieldName} 형식의 템플릿 치환
        let value = template;
        const matches = template.match(/\{(\w+)\}/g);
        if (matches) {
          for (const match of matches) {
            const fieldName = match.slice(1, -1);
            value = value.replace(match, String(representativeData[fieldName] || ""));
          }
        }
        newRowData[field] = value;
      }
    }

    console.log("[RepeatScreenModal] 새 행 추가:", {
      cardId,
      contentRowId,
      representativeData,
      newRowData,
    });

    setExternalTableData((prev) => {
      const newData = {
        ...prev,
        [key]: [...(prev[key] || []), newRowData],
      };
      
      // 🆕 v3.5: 새 행 추가 시 집계 재계산
      setTimeout(() => {
        recalculateAggregationsWithExternalData(newData);
      }, 0);
      
      return newData;
    });
  };

  // 🆕 v3.6: 테이블 영역 저장 기능
  const saveTableAreaData = async (cardId: string, contentRowId: string, contentRow: CardContentRowConfig) => {
    const key = `${cardId}-${contentRowId}`;
    const rows = externalTableData[key] || [];
    
    console.log("[RepeatScreenModal] saveTableAreaData 시작:", {
      key,
      rowsCount: rows.length,
      contentRowId,
      tableDataSource: contentRow?.tableDataSource,
      tableCrud: contentRow?.tableCrud,
    });
    
    if (!contentRow?.tableDataSource?.enabled) {
      console.warn("[RepeatScreenModal] 외부 테이블 데이터 소스가 설정되지 않음");
      return { success: false, message: "데이터 소스가 설정되지 않았습니다." };
    }

    const targetTable = contentRow.tableCrud?.targetTable || contentRow.tableDataSource.sourceTable;
    const dirtyRows = rows.filter((row) => row._isDirty);

    console.log("[RepeatScreenModal] 저장 대상:", {
      targetTable,
      dirtyRowsCount: dirtyRows.length,
      dirtyRows: dirtyRows.map(r => ({ _isNew: r._isNew, _isDirty: r._isDirty, data: r })),
    });

    if (dirtyRows.length === 0) {
      return { success: true, message: "저장할 변경사항이 없습니다.", savedCount: 0 };
    }

    const savePromises: Promise<any>[] = [];
    const savedIds: number[] = [];

    // 🆕 v3.6: editable한 컬럼 + 조인 키만 추출 (읽기 전용 컬럼은 제외)
    const allowedFields = new Set<string>();
    
    // tableColumns에서 editable: true인 필드만 추가 (읽기 전용 컬럼 제외)
    if (contentRow.tableColumns) {
      contentRow.tableColumns.forEach((col) => {
        // editable이 명시적으로 true이거나, editable이 undefined가 아니고 false가 아닌 경우
        // 또는 inputType이 있는 경우 (입력 가능한 컬럼)
        if (col.field && (col.editable === true || col.inputType)) {
          allowedFields.add(col.field);
        }
      });
    }
    
    // 조인 조건의 sourceKey 추가 (예: sales_order_id) - 이건 항상 필요
    if (contentRow.tableDataSource?.joinConditions) {
      contentRow.tableDataSource.joinConditions.forEach((cond) => {
        if (cond.sourceKey) allowedFields.add(cond.sourceKey);
      });
    }
    
    console.log("[RepeatScreenModal] 저장 허용 필드 (editable + 조인키):", Array.from(allowedFields));
    console.log("[RepeatScreenModal] tableColumns 정보:", contentRow.tableColumns?.map(c => ({ 
      field: c.field, 
      editable: c.editable, 
      inputType: c.inputType 
    })));

    // 삭제할 행 (기존 데이터 중 _isDeleted가 true인 것)
    const deletedRows = dirtyRows.filter((row) => row._isDeleted && row._originalData?.id);
    // 저장할 행 (삭제되지 않은 것)
    const rowsToSave = dirtyRows.filter((row) => !row._isDeleted);

    console.log("[RepeatScreenModal] 삭제 대상:", deletedRows.length, "건");
    console.log("[RepeatScreenModal] 저장 대상:", rowsToSave.length, "건");

    // 🆕 v3.7: 삭제 처리 (배열 형태로 body에 전달)
    for (const row of deletedRows) {
      const deleteId = row._originalData.id;
      console.log(`[RepeatScreenModal] DELETE 요청: /table-management/tables/${targetTable}/delete`, [{ id: deleteId }]);
      savePromises.push(
        apiClient.request({
          method: "DELETE",
          url: `/table-management/tables/${targetTable}/delete`,
          data: [{ id: deleteId }],
        }).then((res) => {
          console.log("[RepeatScreenModal] DELETE 응답:", res.data);
          return { type: "delete", id: deleteId };
        }).catch((err) => {
          console.error("[RepeatScreenModal] DELETE 실패:", err.response?.data || err.message);
          throw err;
        })
      );
    }

    for (const row of rowsToSave) {
      const { _rowId, _originalData, _isDirty, _isNew, _isDeleted, ...allData } = row;
      
      // 허용된 필드만 필터링
      const dataToSave: Record<string, any> = {};
      for (const field of allowedFields) {
        if (allData[field] !== undefined) {
          dataToSave[field] = allData[field];
        }
      }

      console.log("[RepeatScreenModal] 저장할 데이터:", {
        _isNew,
        _originalData,
        allData,
        dataToSave,
      });

      if (_isNew) {
        // INSERT - /add 엔드포인트 사용
        console.log(`[RepeatScreenModal] INSERT 요청: /table-management/tables/${targetTable}/add`, dataToSave);
        savePromises.push(
          apiClient.post(`/table-management/tables/${targetTable}/add`, dataToSave).then((res) => {
            console.log("[RepeatScreenModal] INSERT 응답:", res.data);
            if (res.data?.data?.id) {
              savedIds.push(res.data.data.id);
            }
            return res;
          }).catch((err) => {
            console.error("[RepeatScreenModal] INSERT 실패:", err.response?.data || err.message);
            throw err;
          })
        );
      } else if (_originalData?.id) {
        // UPDATE - /edit 엔드포인트 사용 (originalData와 updatedData 형식)
        const updatePayload = {
          originalData: _originalData,
          updatedData: { ...dataToSave, id: _originalData.id },
        };
        console.log(`[RepeatScreenModal] UPDATE 요청: /table-management/tables/${targetTable}/edit`, updatePayload);
        savePromises.push(
          apiClient.put(`/table-management/tables/${targetTable}/edit`, updatePayload).then((res) => {
            console.log("[RepeatScreenModal] UPDATE 응답:", res.data);
            savedIds.push(_originalData.id);
            return res;
          }).catch((err) => {
            console.error("[RepeatScreenModal] UPDATE 실패:", err.response?.data || err.message);
            throw err;
          })
        );
      }
    }

    try {
      await Promise.all(savePromises);

      // 저장 후: 삭제된 행은 제거, 나머지는 dirty/editing 플래그 초기화
      setExternalTableData((prev) => {
        const updated = { ...prev };
        if (updated[key]) {
          // 삭제된 행은 완전히 제거
          updated[key] = updated[key]
            .filter((row) => !row._isDeleted)
            .map((row) => ({
              ...row,
              _isDirty: false,
              _isNew: false,
              _isEditing: false, // 🆕 v3.8: 수정 모드 해제
              _originalData: { ...row, _rowId: undefined, _originalData: undefined, _isDirty: undefined, _isNew: undefined, _isDeleted: undefined, _isEditing: undefined },
            }));
        }
        return updated;
      });

      const savedCount = rowsToSave.length;
      const deletedCount = deletedRows.length;
      const message = deletedCount > 0 
        ? `${savedCount}건 저장, ${deletedCount}건 삭제 완료`
        : `${savedCount}건 저장 완료`;

      return { success: true, message, savedCount, deletedCount, savedIds };
    } catch (error: any) {
      console.error("[RepeatScreenModal] 테이블 영역 저장 실패:", error);
      return { success: false, message: error.message || "저장 중 오류가 발생했습니다." };
    }
  };

  // 🆕 v3.6: 테이블 영역 저장 핸들러
  const handleTableAreaSave = async (cardId: string, contentRowId: string, contentRow: CardContentRowConfig) => {
    setIsSaving(true);
    try {
      const result = await saveTableAreaData(cardId, contentRowId, contentRow);
      if (result.success) {
        console.log("[RepeatScreenModal] 테이블 영역 저장 성공:", result);
        
        // 🆕 v3.9: 집계 저장 설정이 있는 경우 연관 테이블 동기화
        const card = groupedCardsData.find((c) => c._cardId === cardId);
        if (card && grouping?.aggregations) {
          await saveAggregationsToRelatedTables(card, contentRowId);
        }
      } else {
        console.error("[RepeatScreenModal] 테이블 영역 저장 실패:", result.message);
      }
    } finally {
      setIsSaving(false);
    }
  };

  // 🆕 v3.9: 집계 결과를 연관 테이블에 저장
  const saveAggregationsToRelatedTables = async (card: GroupedCardData, contentRowId: string) => {
    if (!grouping?.aggregations) return;

    const savePromises: Promise<any>[] = [];

    for (const agg of grouping.aggregations) {
      const saveConfig = agg.saveConfig;
      
      // 저장 설정이 없거나 비활성화된 경우 스킵
      if (!saveConfig?.enabled) continue;
      
      // 자동 저장이 아닌 경우, 레이아웃에 연결되어 있는지 확인 필요
      // (현재는 자동 저장과 동일하게 처리 - 추후 레이아웃 연결 체크 추가 가능)
      
      // 집계 결과 값 가져오기
      const aggregatedValue = card._aggregations[agg.resultField];
      
      if (aggregatedValue === undefined) {
        console.warn(`[RepeatScreenModal] 집계 결과 없음: ${agg.resultField}`);
        continue;
      }

      // 조인 키로 대상 레코드 식별
      const sourceKeyValue = card._representativeData[saveConfig.joinKey.sourceField];
      
      if (!sourceKeyValue) {
        console.warn(`[RepeatScreenModal] 조인 키 값 없음: ${saveConfig.joinKey.sourceField}`);
        continue;
      }

      console.log(`[RepeatScreenModal] 집계 저장 시작:`, {
        aggregation: agg.resultField,
        value: aggregatedValue,
        targetTable: saveConfig.targetTable,
        targetColumn: saveConfig.targetColumn,
        joinKey: `${saveConfig.joinKey.sourceField}=${sourceKeyValue} -> ${saveConfig.joinKey.targetField}`,
      });

      // UPDATE API 호출
      const updatePayload = {
        originalData: { [saveConfig.joinKey.targetField]: sourceKeyValue },
        updatedData: { 
          [saveConfig.targetColumn]: aggregatedValue,
          [saveConfig.joinKey.targetField]: sourceKeyValue,
        },
      };

      savePromises.push(
        apiClient.put(`/table-management/tables/${saveConfig.targetTable}/edit`, updatePayload)
          .then((res) => {
            console.log(`[RepeatScreenModal] 집계 저장 성공: ${agg.resultField} -> ${saveConfig.targetTable}.${saveConfig.targetColumn}`);
            return res;
          })
          .catch((err) => {
            console.error(`[RepeatScreenModal] 집계 저장 실패: ${agg.resultField}`, err.response?.data || err.message);
            throw err;
          })
      );
    }

    if (savePromises.length > 0) {
      try {
        await Promise.all(savePromises);
        console.log(`[RepeatScreenModal] 모든 집계 저장 완료: ${savePromises.length}건`);
      } catch (error) {
        console.error("[RepeatScreenModal] 일부 집계 저장 실패:", error);
      }
    }
  };

  // 🆕 v3.1: 외부 테이블 행 삭제 요청
  const handleDeleteExternalRowRequest = (cardId: string, rowId: string, contentRowId: string, contentRow: CardContentRowConfig) => {
    if (contentRow.tableCrud?.deleteConfirm?.enabled !== false) {
      // 삭제 확인 팝업 표시
      setPendingDeleteInfo({ cardId, rowId, contentRowId });
      setDeleteConfirmOpen(true);
    } else {
      // 바로 삭제
      handleDeleteExternalRow(cardId, rowId, contentRowId);
    }
  };

  // 🆕 v3.1: 외부 테이블 행 삭제 실행 (소프트 삭제 - _isDeleted 플래그 설정)
  const handleDeleteExternalRow = (cardId: string, rowId: string, contentRowId: string) => {
    const key = `${cardId}-${contentRowId}`;
    setExternalTableData((prev) => {
      const newData = {
        ...prev,
        [key]: (prev[key] || []).map((row) =>
          row._rowId === rowId
            ? { ...row, _isDeleted: true, _isDirty: true }
            : row
        ),
      };
      
      // 🆕 v3.5: 행 삭제 시 집계 재계산 (삭제된 행 제외)
      setTimeout(() => {
        recalculateAggregationsWithExternalData(newData);
      }, 0);
      
      return newData;
    });
    setDeleteConfirmOpen(false);
    setPendingDeleteInfo(null);
  };

  // 🆕 v3.7: 삭제 취소 (소프트 삭제 복원)
  const handleRestoreExternalRow = (cardId: string, rowId: string, contentRowId: string) => {
    const key = `${cardId}-${contentRowId}`;
    setExternalTableData((prev) => {
      const newData = {
        ...prev,
        [key]: (prev[key] || []).map((row) =>
          row._rowId === rowId
            ? { ...row, _isDeleted: false, _isDirty: true }
            : row
        ),
      };
      
      setTimeout(() => {
        recalculateAggregationsWithExternalData(newData);
      }, 0);
      
      return newData;
    });
  };

  // 🆕 v3.8: 수정 모드 전환
  const handleEditExternalRow = (cardId: string, rowId: string, contentRowId: string) => {
    const key = `${cardId}-${contentRowId}`;
    setExternalTableData((prev) => ({
      ...prev,
      [key]: (prev[key] || []).map((row) =>
        row._rowId === rowId
          ? { ...row, _isEditing: true }
          : row
      ),
    }));
  };

  // 🆕 v3.8: 수정 취소
  const handleCancelEditExternalRow = (cardId: string, rowId: string, contentRowId: string) => {
    const key = `${cardId}-${contentRowId}`;
    setExternalTableData((prev) => ({
      ...prev,
      [key]: (prev[key] || []).map((row) =>
        row._rowId === rowId
          ? { 
              ...row._originalData, 
              _rowId: row._rowId, 
              _originalData: row._originalData,
              _isEditing: false, 
              _isDirty: false,
              _isNew: false,
              _isDeleted: false,
            }
          : row
      ),
    }));
  };

  // 🆕 v3.1: 외부 테이블 행 데이터 변경
  const handleExternalRowDataChange = (cardId: string, contentRowId: string, rowId: string, field: string, value: any) => {
    const key = `${cardId}-${contentRowId}`;
    
    // 데이터 업데이트
    setExternalTableData((prev) => {
      const newData = {
        ...prev,
        [key]: (prev[key] || []).map((row) =>
          row._rowId === rowId ? { ...row, [field]: value, _isDirty: true } : row
        ),
      };
      
      // 🆕 v3.5: 데이터 변경 시 집계 실시간 재계산
      // setTimeout으로 비동기 처리하여 상태 업데이트 후 재계산
      setTimeout(() => {
        recalculateAggregationsWithExternalData(newData);
      }, 0);
      
      return newData;
    });
  };

  // 그룹화된 데이터 처리
  const processGroupedData = (data: any[], groupingConfig: typeof grouping): GroupedCardData[] => {
    if (!groupingConfig?.enabled) {
      return [];
    }

    const groupByField = groupingConfig.groupByField;
    const groupMap = new Map<string, any[]>();

    // groupByField가 없으면 각 행을 개별 그룹으로 처리
    if (!groupByField) {
      // 각 행이 하나의 카드 (그룹)
      data.forEach((row, index) => {
        const groupKey = `row-${index}`;
        groupMap.set(groupKey, [row]);
      });
    } else {
      // 그룹별로 데이터 분류
      data.forEach((row) => {
        const groupKey = String(row[groupByField] || "");
        if (!groupMap.has(groupKey)) {
          groupMap.set(groupKey, []);
        }
        groupMap.get(groupKey)!.push(row);
      });
    }

    // GroupedCardData 생성
    const result: GroupedCardData[] = [];
    let cardIndex = 0;

    groupMap.forEach((rows, groupKey) => {
      // 행 데이터 생성
      const cardRows: CardRowData[] = rows.map((row, idx) => ({
        _rowId: `row-${cardIndex}-${idx}-${Date.now()}`,
        _originalData: { ...row },
        _isDirty: false,
        ...row,
      }));

      const representativeData = rows[0] || {};

      // 🆕 v3.2: 집계 계산 (순서대로 - 이전 집계 결과 참조 가능)
      // 1단계: 기본 테이블 컬럼 집계만 (외부 테이블 데이터는 아직 없음)
      const aggregations: Record<string, number> = {};
      if (groupingConfig.aggregations) {
        groupingConfig.aggregations.forEach((agg) => {
          const sourceType = agg.sourceType || "column";
          
          if (sourceType === "column") {
            // 컬럼 집계 (기본 테이블만 - 외부 테이블은 나중에 처리)
            const sourceTable = agg.sourceTable || dataSource?.sourceTable;
            const isExternalTable = sourceTable && sourceTable !== dataSource?.sourceTable;
            
            if (!isExternalTable) {
              // 기본 테이블 집계
              aggregations[agg.resultField] = calculateColumnAggregation(
                rows, 
                agg.sourceField || "", 
                agg.type || "sum"
              );
            } else {
              // 외부 테이블 집계는 나중에 계산 (placeholder)
              aggregations[agg.resultField] = 0;
            }
          } else if (sourceType === "formula") {
            // 가상 집계 (연산식) - 외부 테이블 없이 먼저 계산 시도
            // 외부 테이블 데이터가 필요한 경우 나중에 재계산됨
            if (agg.formula) {
              aggregations[agg.resultField] = evaluateFormulaWithContext(
                agg.formula,
                representativeData,
                rows,
                [], // 외부 테이블 데이터 없음
                aggregations // 이전 집계 결과 참조
              );
            } else {
              aggregations[agg.resultField] = 0;
            }
          }
        });
      }

      // 안정적인 _cardId 생성 (Date.now() 대신 groupKey 사용)
      // groupKey가 없으면 대표 데이터의 id 사용
      const stableId = groupKey || representativeData.id || cardIndex;
      result.push({
        _cardId: `grouped-card-${cardIndex}-${stableId}`,
        _groupKey: groupKey,
        _groupField: groupByField || "",
        _aggregations: aggregations,
        _rows: cardRows,
        _representativeData: representativeData,
      });

      cardIndex++;
    });

    return result;
  };

  // 집계 계산 (컬럼 집계용)
  const calculateColumnAggregation = (
    rows: any[], 
    sourceField: string, 
    type: "sum" | "count" | "avg" | "min" | "max"
  ): number => {
    const values = rows.map((row) => Number(row[sourceField]) || 0);

    switch (type) {
      case "sum":
        return values.reduce((a, b) => a + b, 0);
      case "count":
        return values.length;
      case "avg":
        return values.length > 0 ? values.reduce((a, b) => a + b, 0) / values.length : 0;
      case "min":
        return values.length > 0 ? Math.min(...values) : 0;
      case "max":
        return values.length > 0 ? Math.max(...values) : 0;
      default:
        return 0;
    }
  };

  // 🆕 v3.2: 집계 계산 (다중 테이블 및 formula 지원)
  const calculateAggregation = (
    agg: AggregationConfig,
    cardRows: any[], // 기본 테이블 행들
    externalRows: any[], // 외부 테이블 행들
    previousAggregations: Record<string, number>, // 이전 집계 결과들
    representativeData: Record<string, any> // 카드 대표 데이터
  ): number => {
    const sourceType = agg.sourceType || "column";

    if (sourceType === "column") {
      // 컬럼 집계
      const sourceTable = agg.sourceTable || dataSource?.sourceTable;
      const isExternalTable = sourceTable && sourceTable !== dataSource?.sourceTable;
      
      // 외부 테이블인 경우 externalRows 사용, 아니면 cardRows 사용
      const targetRows = isExternalTable ? externalRows : cardRows;
      
      return calculateColumnAggregation(
        targetRows, 
        agg.sourceField || "", 
        agg.type || "sum"
      );
    } else if (sourceType === "formula") {
      // 가상 집계 (연산식)
      if (!agg.formula) return 0;
      
      return evaluateFormulaWithContext(
        agg.formula,
        representativeData,
        cardRows,
        externalRows,
        previousAggregations
      );
    }

    return 0;
  };

  // 🆕 v3.1: 집계 표시값 계산 (formula, external 등 지원)
  const calculateAggregationDisplayValue = (
    aggField: AggregationDisplayConfig,
    card: GroupedCardData
  ): number | string => {
    const sourceType = aggField.sourceType || "aggregation";

    switch (sourceType) {
      case "aggregation":
        // 기존 집계 결과 참조
        return card._aggregations?.[aggField.aggregationResultField || ""] || 0;

      case "formula":
        // 컬럼 간 연산
        if (!aggField.formula) return 0;
        return evaluateFormula(aggField.formula, card._representativeData, card._rows);

      case "external":
        // 외부 테이블 값 (별도 로드 필요 - 현재는 placeholder)
        // TODO: 외부 테이블 값 로드 구현
        return 0;

      case "externalFormula":
        // 외부 테이블 + 연산 (별도 로드 필요 - 현재는 placeholder)
        // TODO: 외부 테이블 값 로드 후 연산 구현
        return 0;

      default:
        return 0;
    }
  };

  // 🆕 v3.2: 연산식 평가 (다중 테이블, 이전 집계 결과 참조 지원)
  const evaluateFormulaWithContext = (
    formula: string,
    representativeData: Record<string, any>,
    cardRows: any[], // 기본 테이블 행들
    externalRows: any[], // 외부 테이블 행들
    previousAggregations: Record<string, number> // 이전 집계 결과들
  ): number => {
    try {
      let expression = formula;

      // 1. 외부 테이블 집계 함수 처리: SUM_EXT({field}), COUNT_EXT({field}) 등
      const extAggFunctions = ["SUM_EXT", "COUNT_EXT", "AVG_EXT", "MIN_EXT", "MAX_EXT"];
      for (const fn of extAggFunctions) {
        const regex = new RegExp(`${fn}\\(\\{(\\w+)\\}\\)`, "g");
        expression = expression.replace(regex, (match, fieldName) => {
          if (!externalRows || externalRows.length === 0) return "0";
          const values = externalRows.map((row) => Number(row[fieldName]) || 0);
          const baseFn = fn.replace("_EXT", "");
          switch (baseFn) {
            case "SUM":
              return String(values.reduce((a, b) => a + b, 0));
            case "COUNT":
              return String(values.length);
            case "AVG":
              return String(values.length > 0 ? values.reduce((a, b) => a + b, 0) / values.length : 0);
            case "MIN":
              return String(values.length > 0 ? Math.min(...values) : 0);
            case "MAX":
              return String(values.length > 0 ? Math.max(...values) : 0);
            default:
              return "0";
          }
        });
      }

      // 2. 기본 테이블 집계 함수 처리: SUM({field}), COUNT({field}) 등
      const aggFunctions = ["SUM", "COUNT", "AVG", "MIN", "MAX"];
      for (const fn of aggFunctions) {
        // SUM_EXT는 이미 처리했으므로 제외
        const regex = new RegExp(`(?<!_)${fn}\\(\\{(\\w+)\\}\\)`, "g");
        expression = expression.replace(regex, (match, fieldName) => {
          if (!cardRows || cardRows.length === 0) return "0";
          const values = cardRows.map((row) => Number(row[fieldName]) || 0);
          switch (fn) {
            case "SUM":
              return String(values.reduce((a, b) => a + b, 0));
            case "COUNT":
              return String(values.length);
            case "AVG":
              return String(values.length > 0 ? values.reduce((a, b) => a + b, 0) / values.length : 0);
            case "MIN":
              return String(values.length > 0 ? Math.min(...values) : 0);
            case "MAX":
              return String(values.length > 0 ? Math.max(...values) : 0);
            default:
              return "0";
          }
        });
      }

      // 3. 단순 필드 참조 치환 (이전 집계 결과 또는 대표 데이터)
      const fieldRegex = /\{(\w+)\}/g;
      expression = expression.replace(fieldRegex, (match, fieldName) => {
        // 먼저 이전 집계 결과에서 찾기
        if (previousAggregations && fieldName in previousAggregations) {
          return String(previousAggregations[fieldName]);
        }
        // 대표 데이터에서 값 가져오기
        const value = representativeData[fieldName];
        return String(Number(value) || 0);
      });

      // 4. 안전한 수식 평가 (사칙연산만 허용)
      // 허용 문자: 숫자, 소수점, 사칙연산, 괄호, 공백
      if (!/^[\d\s+\-*/().]+$/.test(expression)) {
        console.warn("[RepeatScreenModal] 허용되지 않는 연산식:", expression);
        return 0;
      }

      // eval 대신 Function 사용 (더 안전)
      const result = new Function(`return ${expression}`)();
      return Number(result) || 0;
    } catch (error) {
      console.error("[RepeatScreenModal] 연산식 평가 실패:", formula, error);
      return 0;
    }
  };

  // 레거시 호환: 기존 evaluateFormula 유지
  const evaluateFormula = (
    formula: string,
    representativeData: Record<string, any>,
    rows?: any[]
  ): number => {
    return evaluateFormulaWithContext(formula, representativeData, rows || [], [], {});
  };

  // 카드 데이터 로드 (소스 설정에 따라)
  const loadCardData = async (originalData: any): Promise<Record<string, any>> => {
    const cardData: Record<string, any> = {};

    // 🆕 v3: contentRows 사용
    if (contentRows && contentRows.length > 0) {
      for (const contentRow of contentRows) {
        // 헤더/필드 타입의 컬럼 처리
        if ((contentRow.type === "header" || contentRow.type === "fields") && contentRow.columns) {
          for (const col of contentRow.columns) {
            if (col.sourceConfig) {
              if (col.sourceConfig.type === "direct") {
                cardData[col.field] = originalData[col.sourceConfig.sourceColumn || col.field];
              } else if (col.sourceConfig.type === "join" && col.sourceConfig.joinTable) {
                cardData[col.field] = null; // 조인은 나중에 일괄 처리
              } else if (col.sourceConfig.type === "manual") {
                cardData[col.field] = null;
              }
            } else {
              // sourceConfig가 없으면 원본 데이터에서 직접 가져옴
              cardData[col.field] = originalData[col.field];
            }
          }
        }
        
        // 테이블 타입의 컬럼 처리
        if (contentRow.type === "table" && contentRow.tableColumns) {
          for (const col of contentRow.tableColumns) {
            cardData[col.field] = originalData[col.field];
          }
        }
      }
    } else {
      // 레거시: cardLayout 사용
      for (const row of cardLayout) {
        for (const col of row.columns) {
          if (col.sourceConfig) {
            if (col.sourceConfig.type === "direct") {
              cardData[col.field] = originalData[col.sourceConfig.sourceColumn || col.field];
            } else if (col.sourceConfig.type === "join" && col.sourceConfig.joinTable) {
              cardData[col.field] = null; // 조인은 나중에 일괄 처리
            } else if (col.sourceConfig.type === "manual") {
              cardData[col.field] = null;
            }
          } else {
            cardData[col.field] = originalData[col.field];
          }
        }
      }
    }

    return cardData;
  };

  // Simple 모드: 카드 데이터 변경
  const handleCardDataChange = (cardId: string, field: string, value: any) => {
    setCardsData((prev) =>
      prev.map((card) => (card._cardId === cardId ? { ...card, [field]: value, _isDirty: true } : card))
    );
  };

  // WithTable 모드: 행 데이터 변경
  const handleRowDataChange = (cardId: string, rowId: string, field: string, value: any) => {
    setGroupedCardsData((prev) =>
      prev.map((card) => {
        if (card._cardId !== cardId) return card;

        const updatedRows = card._rows.map((row) =>
          row._rowId === rowId ? { ...row, [field]: value, _isDirty: true } : row
        );

        // 집계값 재계산
        const newAggregations: Record<string, number> = {};
        if (grouping?.aggregations) {
          grouping.aggregations.forEach((agg) => {
            newAggregations[agg.resultField] = calculateAggregation(updatedRows, agg);
          });
        }

        return {
          ...card,
          _rows: updatedRows,
          _aggregations: newAggregations,
        };
      })
    );
  };

  // 카드 제목 생성
  const getCardTitle = (data: Record<string, any>, index: number): string => {
    let title = cardTitle;
    title = title.replace("{index}", String(index + 1));

    const matches = title.match(/\{(\w+)\}/g);
    if (matches) {
      matches.forEach((match) => {
        const field = match.slice(1, -1);
        const value = data[field] || "";
        title = title.replace(match, String(value));
      });
    }

    return title;
  };

  // 전체 저장
  const handleSaveAll = async () => {
    setIsSaving(true);

    try {
      // 기존 데이터 저장
      if (cardMode === "withTable") {
        await saveGroupedData();
      } else {
        await saveSimpleData();
      }

      // 🆕 v3.1: 외부 테이블 데이터 저장
      await saveExternalTableData();

      alert("저장되었습니다.");
    } catch (error: any) {
      console.error("저장 실패:", error);
      alert(`저장 중 오류가 발생했습니다: ${error.message}`);
    } finally {
      setIsSaving(false);
    }
  };

  // 🆕 v3.1: 외부 테이블 데이터 저장
  const saveExternalTableData = async () => {
    const savePromises: Promise<void>[] = [];

    for (const [key, rows] of Object.entries(externalTableData)) {
      // key 형식: cardId-contentRowId
      const [cardId, contentRowId] = key.split("-").slice(0, 2);
      const contentRow = contentRows.find((r) => r.id === contentRowId || key.includes(r.id));
      
      if (!contentRow?.tableDataSource?.enabled) continue;

      const targetTable = contentRow.tableCrud?.targetTable || contentRow.tableDataSource.sourceTable;
      const dirtyRows = rows.filter((row) => row._isDirty);

      for (const row of dirtyRows) {
        const { _rowId, _originalData, _isDirty, _isNew, ...dataToSave } = row;

        if (_isNew) {
          // INSERT
          savePromises.push(
            apiClient.post(`/table-management/tables/${targetTable}/data`, dataToSave).then(() => {})
          );
        } else if (_originalData?.id) {
          // UPDATE
          savePromises.push(
            apiClient.put(`/table-management/tables/${targetTable}/data/${_originalData.id}`, dataToSave).then(() => {})
          );
        }
      }
    }

    await Promise.all(savePromises);

    // 저장 후 dirty 플래그 초기화
    setExternalTableData((prev) => {
      const updated: Record<string, any[]> = {};
      for (const [key, rows] of Object.entries(prev)) {
        updated[key] = rows.map((row) => ({
          ...row,
          _isDirty: false,
          _isNew: false,
          _originalData: { ...row, _rowId: undefined, _originalData: undefined, _isDirty: undefined, _isNew: undefined },
        }));
      }
      return updated;
    });
  };

  // 🆕 v3.1: Footer 버튼 클릭 핸들러
  const handleFooterButtonClick = async (btn: FooterButtonConfig) => {
    switch (btn.action) {
      case "save":
        await handleSaveAll();
        break;
      case "cancel":
      case "close":
        // 모달 닫기 이벤트 발생
        window.dispatchEvent(new CustomEvent("closeScreenModal"));
        break;
      case "reset":
        // 데이터 초기화
        if (confirm("변경 사항을 모두 취소하시겠습니까?")) {
          // 외부 테이블 데이터 초기화
          setExternalTableData({});
          // 기존 데이터 재로드
          setCardsData([]);
          setGroupedCardsData([]);
        }
        break;
      case "custom":
        // 커스텀 액션 이벤트 발생
        if (btn.customAction) {
          window.dispatchEvent(
            new CustomEvent("repeatScreenModalCustomAction", {
              detail: {
                actionType: btn.customAction.type,
                config: btn.customAction.config,
                componentId: component?.id,
              },
            })
          );
        }
        break;
    }
  };

  // Simple 모드 저장
  const saveSimpleData = async () => {
    const dirtyCards = cardsData.filter((card) => card._isDirty);

    if (dirtyCards.length === 0) {
      alert("변경된 데이터가 없습니다.");
      return;
    }

    const groupedData: Record<string, any[]> = {};

    for (const card of dirtyCards) {
      for (const row of cardLayout) {
        for (const col of row.columns) {
          if (col.targetConfig && col.targetConfig.saveEnabled !== false) {
            const targetTable = col.targetConfig.targetTable;
            const targetColumn = col.targetConfig.targetColumn;
            const value = card[col.field];

            if (!groupedData[targetTable]) {
              groupedData[targetTable] = [];
            }

            let existingRow = groupedData[targetTable].find((r) => r._cardId === card._cardId);

            if (!existingRow) {
              existingRow = {
                _cardId: card._cardId,
                _originalData: card._originalData,
              };
              groupedData[targetTable].push(existingRow);
            }

            existingRow[targetColumn] = value;
          }
        }
      }
    }

    await saveToTables(groupedData);

    setCardsData((prev) => prev.map((card) => ({ ...card, _isDirty: false })));
  };

  // WithTable 모드 저장
  const saveGroupedData = async () => {
    const dirtyCards = groupedCardsData.filter((card) => card._rows.some((row) => row._isDirty));

    if (dirtyCards.length === 0) {
      alert("변경된 데이터가 없습니다.");
      return;
    }

    const groupedData: Record<string, any[]> = {};

    for (const card of dirtyCards) {
      const dirtyRows = card._rows.filter((row) => row._isDirty);

      for (const row of dirtyRows) {
        // 테이블 컬럼에서 저장 대상 추출
        if (tableLayout?.tableColumns) {
          for (const col of tableLayout.tableColumns) {
            if (col.editable && col.targetConfig && col.targetConfig.saveEnabled !== false) {
              const targetTable = col.targetConfig.targetTable;
              const targetColumn = col.targetConfig.targetColumn;
              const value = row[col.field];

              if (!groupedData[targetTable]) {
                groupedData[targetTable] = [];
              }

              let existingRow = groupedData[targetTable].find((r) => r._rowId === row._rowId);

              if (!existingRow) {
                existingRow = {
                  _rowId: row._rowId,
                  _originalData: row._originalData,
                };
                groupedData[targetTable].push(existingRow);
              }

              existingRow[targetColumn] = value;
            }
          }
        }
      }
    }

    await saveToTables(groupedData);

    setGroupedCardsData((prev) =>
      prev.map((card) => ({
        ...card,
        _rows: card._rows.map((row) => ({ ...row, _isDirty: false })),
      }))
    );
  };

  // 테이블별 저장
  const saveToTables = async (groupedData: Record<string, any[]>) => {
    const savePromises = Object.entries(groupedData).map(async ([tableName, rows]) => {
      return Promise.all(
        rows.map(async (row) => {
          const { _cardId, _rowId, _originalData, ...dataToSave } = row;
          const id = _originalData?.id;

          if (id) {
            await apiClient.put(`/table-management/tables/${tableName}/data/${id}`, dataToSave);
          } else {
            await apiClient.post(`/table-management/tables/${tableName}/data`, dataToSave);
          }
        })
      );
    });

    await Promise.all(savePromises);
  };

  // 수정 여부 확인
  const hasDirtyData = useMemo(() => {
    // 기존 데이터 수정 여부
    let hasBaseDirty = false;
    if (cardMode === "withTable") {
      hasBaseDirty = groupedCardsData.some((card) => card._rows.some((row) => row._isDirty));
    } else {
      hasBaseDirty = cardsData.some((c) => c._isDirty);
    }

    // 🆕 v3.1: 외부 테이블 데이터 수정 여부
    const hasExternalDirty = Object.values(externalTableData).some((rows) =>
      rows.some((row) => row._isDirty)
    );

    return hasBaseDirty || hasExternalDirty;
  }, [cardMode, cardsData, groupedCardsData, externalTableData]);

  // 디자인 모드 렌더링
  if (isDesignMode) {
    // 행 타입별 개수 계산
    const rowTypeCounts = {
      header: contentRows.filter((r) => r.type === "header").length,
      aggregation: contentRows.filter((r) => r.type === "aggregation").length,
      table: contentRows.filter((r) => r.type === "table").length,
      fields: contentRows.filter((r) => r.type === "fields").length,
    };

    return (
      <div
        className={cn(
          "w-full h-full min-h-[400px] border-2 border-dashed border-primary/50 rounded-lg p-8 bg-gradient-to-br from-primary/5 to-primary/10",
          className
        )}
      >
        <div className="flex flex-col items-center justify-center h-full space-y-6">
          {/* 아이콘 */}
          <div className="w-20 h-20 rounded-full bg-primary/10 flex items-center justify-center">
            <Layers className="w-10 h-10 text-primary" />
          </div>

          {/* 제목 */}
          <div className="text-center space-y-2">
            <div className="text-xl font-bold text-primary">Repeat Screen Modal</div>
            <div className="text-base font-semibold text-foreground">반복 화면 모달</div>
            <Badge variant="secondary">v3 자유 레이아웃</Badge>
          </div>

          {/* 행 구성 정보 */}
          <div className="flex flex-wrap gap-2 justify-center">
            {contentRows.length > 0 ? (
              <>
                {rowTypeCounts.header > 0 && (
                  <Badge className="bg-purple-100 text-purple-700 dark:bg-purple-900 dark:text-purple-300">
                    헤더 {rowTypeCounts.header}개
                  </Badge>
                )}
                {rowTypeCounts.aggregation > 0 && (
                  <Badge className="bg-orange-100 text-orange-700 dark:bg-orange-900 dark:text-orange-300">
                    집계 {rowTypeCounts.aggregation}개
                  </Badge>
                )}
                {rowTypeCounts.table > 0 && (
                  <Badge className="bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-300">
                    테이블 {rowTypeCounts.table}개
                  </Badge>
                )}
                {rowTypeCounts.fields > 0 && (
                  <Badge className="bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-300">
                    필드 {rowTypeCounts.fields}개
                  </Badge>
                )}
              </>
            ) : (
              <Badge variant="outline">행 없음</Badge>
            )}
          </div>

          {/* 통계 정보 */}
          <div className="flex gap-6 text-center">
            <div className="space-y-1">
              <div className="text-2xl font-bold text-primary">{contentRows.length}</div>
              <div className="text-xs text-muted-foreground">행 (Rows)</div>
            </div>
            <div className="w-px bg-border" />
            <div className="space-y-1">
              <div className="text-2xl font-bold text-primary">{grouping?.aggregations?.length || 0}</div>
              <div className="text-xs text-muted-foreground">집계 설정</div>
            </div>
            <div className="w-px bg-border" />
            <div className="space-y-1">
              <div className="text-2xl font-bold text-primary">{dataSource?.sourceTable ? 1 : 0}</div>
              <div className="text-xs text-muted-foreground">데이터 소스</div>
            </div>
          </div>

          {/* 데이터 소스 정보 */}
          {dataSource?.sourceTable && (
            <div className="text-xs bg-green-100 dark:bg-green-900 px-3 py-2 rounded-md">
              소스 테이블: <strong>{dataSource.sourceTable}</strong>
              {dataSource.filterField && <span className="ml-2">(필터: {dataSource.filterField})</span>}
            </div>
          )}

          {/* 그룹핑 정보 */}
          {grouping?.enabled && (
            <div className="text-xs bg-purple-100 dark:bg-purple-900 px-3 py-2 rounded-md">
              그룹핑: <strong>{grouping.groupByField}</strong>
            </div>
          )}

          {/* 카드 제목 정보 */}
          {showCardTitle && cardTitle && (
            <div className="text-xs bg-muted px-3 py-2 rounded-md">
              카드 제목: <strong>{cardTitle}</strong>
            </div>
          )}

          {/* 설정 안내 */}
          <div className="text-xs text-muted-foreground bg-muted/50 px-4 py-2 rounded-md border">
            오른쪽 패널에서 행을 추가하고 타입(헤더/집계/테이블/필드)을 선택하세요
          </div>
        </div>
      </div>
    );
  }

  // 로딩 상태
  if (isLoading) {
    return (
      <div className="flex items-center justify-center p-12">
        <Loader2 className="h-8 w-8 animate-spin text-primary" />
        <span className="ml-3 text-sm text-muted-foreground">데이터를 불러오는 중...</span>
      </div>
    );
  }

  // 오류 상태
  if (loadError) {
    return (
      <div className="p-6 border border-destructive/50 rounded-lg bg-destructive/5">
        <div className="flex items-center gap-2 text-destructive mb-2">
          <X className="h-5 w-5" />
          <span className="font-semibold">데이터 로드 실패</span>
        </div>
        <p className="text-sm text-muted-foreground">{loadError}</p>
      </div>
    );
  }

  // 🆕 v3: 자유 레이아웃 렌더링 (contentRows 사용)
  const useNewLayout = contentRows && contentRows.length > 0;
  const useGrouping = grouping?.enabled;

  // 그룹핑 모드 렌더링
  if (useGrouping) {
    return (
      <div className={cn("space-y-6 overflow-x-auto", className)}>
        <div className="space-y-4 min-w-[800px]" style={{ gap: cardSpacing }}>
          {groupedCardsData.map((card, cardIndex) => (
            <Card
              key={card._cardId}
              className={cn(
                "transition-shadow",
                showCardBorder && "border-2",
                card._rows.some((r) => r._isDirty) && "border-primary shadow-lg"
              )}
            >
              {/* 카드 제목 (선택사항) */}
              {showCardTitle && (
                <CardHeader className="pb-3">
                  <CardTitle className="text-lg flex items-center justify-between">
                    <span>{getCardTitle(card._representativeData, cardIndex)}</span>
                    {card._rows.some((r) => r._isDirty) && (
                      <Badge variant="outline" className="text-xs text-primary">
                        수정됨
                      </Badge>
                    )}
                  </CardTitle>
                </CardHeader>
              )}
              <CardContent className="space-y-4">
                {/* 🆕 v3: contentRows 기반 렌더링 */}
                {useNewLayout ? (
                  contentRows.map((contentRow, rowIndex) => (
                    <div key={contentRow.id || `crow-${rowIndex}`}>
                      {contentRow.type === "table" && contentRow.tableDataSource?.enabled ? (
                        // 🆕 v3.1: 외부 테이블 데이터 소스 사용
                        <div className="border rounded-lg overflow-hidden">
                          {/* 테이블 헤더 영역: 제목 + 버튼들 */}
                          {(contentRow.tableTitle || contentRow.tableCrud?.allowSave || contentRow.tableCrud?.allowCreate) && (
                            <div className="px-4 py-2 bg-muted/30 border-b text-sm font-medium flex items-center justify-between">
                              <span>{contentRow.tableTitle || ""}</span>
                              <div className="flex items-center gap-2">
                                {/* 저장 버튼 - allowSave가 true일 때만 표시 */}
                                {contentRow.tableCrud?.allowSave && (
                                  <Button
                                    variant="default"
                                    size="sm"
                                    onClick={() => handleTableAreaSave(card._cardId, contentRow.id, contentRow)}
                                    disabled={isSaving || !(externalTableData[`${card._cardId}-${contentRow.id}`] || []).some((r: any) => r._isDirty)}
                                    className="h-7 text-xs gap-1"
                                  >
                                    {isSaving ? (
                                      <Loader2 className="h-3 w-3 animate-spin" />
                                    ) : (
                                      <Save className="h-3 w-3" />
                                    )}
                                    {contentRow.tableCrud?.saveButtonLabel || "저장"}
                                  </Button>
                                )}
                                {/* 추가 버튼 */}
                                {contentRow.tableCrud?.allowCreate && (
                                  <Button
                                    variant="outline"
                                    size="sm"
                                    onClick={() => handleAddExternalRow(card._cardId, contentRow.id, contentRow)}
                                    className="h-7 text-xs gap-1"
                                  >
                                    <Plus className="h-3 w-3" />
                                    추가
                                  </Button>
                                )}
                              </div>
                            </div>
                          )}
                          <Table>
                            {contentRow.showTableHeader !== false && (
                              <TableHeader>
                                <TableRow className="bg-muted/50">
                                  {(contentRow.tableColumns || []).map((col) => (
                                    <TableHead
                                      key={col.id}
                                      style={{ width: col.width }}
                                      className={cn("text-xs", col.align && `text-${col.align}`)}
                                    >
                                      {col.label}
                                    </TableHead>
                                  ))}
                                  {(contentRow.tableCrud?.allowUpdate || contentRow.tableCrud?.allowDelete) && (
                                    <TableHead className="w-[80px] text-center text-xs">작업</TableHead>
                                  )}
                                </TableRow>
                              </TableHeader>
                            )}
                            <TableBody>
                              {(externalTableData[`${card._cardId}-${contentRow.id}`] || []).length === 0 ? (
                                <TableRow>
                                  <TableCell
                                    colSpan={(contentRow.tableColumns?.length || 0) + (contentRow.tableCrud?.allowDelete ? 1 : 0)}
                                    className="text-center py-8 text-muted-foreground"
                                  >
                                    데이터가 없습니다.
                                  </TableCell>
                                </TableRow>
                              ) : (
                                (externalTableData[`${card._cardId}-${contentRow.id}`] || []).map((row) => (
                                  <TableRow
                                    key={row._rowId}
                                    className={cn(
                                      row._isDirty && "bg-primary/5", 
                                      row._isNew && "bg-green-50 dark:bg-green-950",
                                      row._isDeleted && "bg-destructive/10 opacity-60"
                                    )}
                                  >
                                    {(contentRow.tableColumns || []).map((col) => (
                                      <TableCell
                                        key={`${row._rowId}-${col.id}`}
                                        className={cn(
                                          "text-sm", 
                                          col.align && `text-${col.align}`,
                                          row._isDeleted && "line-through text-muted-foreground"
                                        )}
                                      >
                                        {renderTableCell(
                                          col, 
                                          row, 
                                          (value) => handleExternalRowDataChange(card._cardId, contentRow.id, row._rowId, col.field, value),
                                          row._isNew || row._isEditing // 신규 행이거나 수정 모드일 때만 편집 가능
                                        )}
                                      </TableCell>
                                    ))}
                                    {(contentRow.tableCrud?.allowUpdate || contentRow.tableCrud?.allowDelete) && (
                                      <TableCell className="text-center">
                                        <div className="flex items-center justify-center gap-1">
                                          {/* 수정 버튼: 저장된 행(isNew가 아닌)이고 편집 모드가 아닐 때만 표시 */}
                                          {contentRow.tableCrud?.allowUpdate && !row._isNew && !row._isEditing && !row._isDeleted && (
                                            <Button
                                              variant="ghost"
                                              size="sm"
                                              onClick={() => handleEditExternalRow(card._cardId, row._rowId, contentRow.id)}
                                              className="h-7 w-7 p-0 text-blue-600 hover:text-blue-700 hover:bg-blue-50"
                                              title="수정"
                                            >
                                              <Pencil className="h-4 w-4" />
                                            </Button>
                                          )}
                                          {/* 수정 취소 버튼: 편집 모드일 때만 표시 */}
                                          {row._isEditing && !row._isNew && (
                                            <Button
                                              variant="ghost"
                                              size="sm"
                                              onClick={() => handleCancelEditExternalRow(card._cardId, row._rowId, contentRow.id)}
                                              className="h-7 w-7 p-0 text-muted-foreground hover:text-foreground hover:bg-muted"
                                              title="수정 취소"
                                            >
                                              <X className="h-4 w-4" />
                                            </Button>
                                          )}
                                          {/* 삭제/복원 버튼 */}
                                          {contentRow.tableCrud?.allowDelete && (
                                            row._isDeleted ? (
                                              <Button
                                                variant="ghost"
                                                size="sm"
                                                onClick={() => handleRestoreExternalRow(card._cardId, row._rowId, contentRow.id)}
                                                className="h-7 w-7 p-0 text-primary hover:text-primary hover:bg-primary/10"
                                                title="삭제 취소"
                                              >
                                                <RotateCcw className="h-4 w-4" />
                                              </Button>
                                            ) : (
                                              <Button
                                                variant="ghost"
                                                size="sm"
                                                onClick={() => handleDeleteExternalRowRequest(card._cardId, row._rowId, contentRow.id, contentRow)}
                                                className="h-7 w-7 p-0 text-destructive hover:text-destructive hover:bg-destructive/10"
                                                title="삭제"
                                              >
                                                <Trash2 className="h-4 w-4" />
                                              </Button>
                                            )
                                          )}
                                        </div>
                                      </TableCell>
                                    )}
                                  </TableRow>
                                ))
                              )}
                            </TableBody>
                          </Table>
                        </div>
                      ) : (
                        // 기존 renderContentRow 사용
                        renderContentRow(contentRow, card, grouping?.aggregations || [], handleRowDataChange)
                      )}
                    </div>
                  ))
                ) : (
                  // 레거시: tableLayout 사용
                  <>
                    {tableLayout?.headerRows && tableLayout.headerRows.length > 0 && (
                      <div className="space-y-3 p-4 bg-muted/30 rounded-lg">
                        {tableLayout.headerRows.map((row, rowIndex) => (
                          <div
                            key={row.id || `hrow-${rowIndex}`}
                            className={cn(
                              "grid gap-4",
                              row.layout === "vertical" ? "grid-cols-1" : "grid-flow-col auto-cols-fr",
                              row.backgroundColor && getBackgroundClass(row.backgroundColor),
                              row.rounded && "rounded-lg",
                              row.padding && `p-${row.padding}`
                            )}
                            style={{ gap: row.gap || "16px" }}
                          >
                            {row.columns.map((col, colIndex) => (
                              <div key={col.id || `hcol-${colIndex}`} style={{ width: col.width }}>
                                {renderHeaderColumn(col, card, grouping?.aggregations || [])}
                              </div>
                            ))}
                          </div>
                        ))}
                      </div>
                    )}

                    {tableLayout?.tableColumns && tableLayout.tableColumns.length > 0 && (
                      <div className="border rounded-lg overflow-hidden">
                        <Table>
                          <TableHeader>
                            <TableRow className="bg-muted/50">
                              {tableLayout.tableColumns.map((col) => (
                                <TableHead
                                  key={col.id}
                                  style={{ width: col.width }}
                                  className={cn("text-xs", col.align && `text-${col.align}`)}
                                >
                                  {col.label}
                                </TableHead>
                              ))}
                            </TableRow>
                          </TableHeader>
                          <TableBody>
                            {card._rows.map((row) => (
                              <TableRow key={row._rowId} className={cn(row._isDirty && "bg-primary/5")}>
                                {tableLayout.tableColumns.map((col) => (
                                  <TableCell
                                    key={`${row._rowId}-${col.id}`}
                                    className={cn("text-sm", col.align && `text-${col.align}`)}
                                  >
                                    {renderTableCell(
                                      col, 
                                      row, 
                                      (value) => handleRowDataChange(card._cardId, row._rowId, col.field, value),
                                      row._isNew || row._isEditing
                                    )}
                                  </TableCell>
                                ))}
                              </TableRow>
                            ))}
                          </TableBody>
                        </Table>
                      </div>
                    )}
                  </>
                )}
              </CardContent>
            </Card>
          ))}
        </div>

        {/* 🆕 v3.1: Footer 버튼 영역 */}
        {footerConfig?.enabled && footerConfig.buttons && footerConfig.buttons.length > 0 ? (
          <div
            className={cn(
              "flex gap-2 pt-4",
              footerConfig.position === "sticky" && "sticky bottom-0 bg-background py-4 border-t",
              footerConfig.alignment === "left" && "justify-start",
              footerConfig.alignment === "center" && "justify-center",
              footerConfig.alignment === "right" && "justify-end",
              !footerConfig.alignment && "justify-end"
            )}
          >
            {footerConfig.buttons.map((btn) => (
              <Button
                key={btn.id}
                variant={btn.variant || "default"}
                disabled={btn.disabled || (btn.action === "save" && (isSaving || !hasDirtyData))}
                onClick={() => handleFooterButtonClick(btn)}
                className="gap-2"
              >
                {btn.action === "save" && isSaving ? (
                  <Loader2 className="h-4 w-4 animate-spin" />
                ) : btn.icon === "save" ? (
                  <Save className="h-4 w-4" />
                ) : btn.icon === "x" ? (
                  <X className="h-4 w-4" />
                ) : btn.icon === "reset" ? (
                  <RotateCcw className="h-4 w-4" />
                ) : null}
                {btn.label}
              </Button>
            ))}
          </div>
        ) : null}

        {/* 데이터 없음 */}
        {groupedCardsData.length === 0 && !isLoading && (
          <div className="text-center py-12 text-muted-foreground">표시할 데이터가 없습니다.</div>
        )}

        {/* 🆕 v3.1: 삭제 확인 다이얼로그 */}
        <AlertDialog open={deleteConfirmOpen} onOpenChange={setDeleteConfirmOpen}>
          <AlertDialogContent>
            <AlertDialogHeader>
              <AlertDialogTitle>삭제 확인</AlertDialogTitle>
              <AlertDialogDescription>
                이 행을 삭제하시겠습니까? 이 작업은 되돌릴 수 없습니다.
              </AlertDialogDescription>
            </AlertDialogHeader>
            <AlertDialogFooter>
              <AlertDialogCancel>취소</AlertDialogCancel>
              <AlertDialogAction
                onClick={() => {
                  if (pendingDeleteInfo) {
                    handleDeleteExternalRow(
                      pendingDeleteInfo.cardId,
                      pendingDeleteInfo.rowId,
                      pendingDeleteInfo.contentRowId
                    );
                  }
                }}
                className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
              >
                삭제
              </AlertDialogAction>
            </AlertDialogFooter>
          </AlertDialogContent>
        </AlertDialog>
      </div>
    );
  }

  // 단순 모드 렌더링 (그룹핑 없음)
  return (
    <div className={cn("space-y-6 overflow-x-auto", className)}>
      <div className="space-y-4 min-w-[600px]" style={{ gap: cardSpacing }}>
        {cardsData.map((card, cardIndex) => (
          <Card
            key={card._cardId}
            className={cn("transition-shadow", showCardBorder && "border-2", card._isDirty && "border-primary shadow-lg")}
          >
            {/* 카드 제목 (선택사항) */}
            {showCardTitle && (
              <CardHeader className="pb-3">
                <CardTitle className="text-lg flex items-center justify-between">
                  <span>{getCardTitle(card, cardIndex)}</span>
                  {card._isDirty && <span className="text-xs text-primary font-normal">(수정됨)</span>}
                </CardTitle>
              </CardHeader>
            )}
            <CardContent className="space-y-4">
              {/* 🆕 v3: contentRows 기반 렌더링 */}
              {useNewLayout ? (
                contentRows.map((contentRow, rowIndex) => (
                  <div key={contentRow.id || `crow-${rowIndex}`}>
                    {renderSimpleContentRow(contentRow, card, (value, field) =>
                      handleCardDataChange(card._cardId, field, value)
                    )}
                  </div>
                ))
              ) : (
                // 레거시: cardLayout 사용
                cardLayout.map((row, rowIndex) => (
                  <div
                    key={row.id || `row-${rowIndex}`}
                    className={cn(
                      "grid gap-4",
                      row.layout === "vertical" ? "grid-cols-1" : "grid-flow-col auto-cols-fr"
                    )}
                    style={{ gap: row.gap || "16px" }}
                  >
                    {row.columns.map((col, colIndex) => (
                      <div key={col.id || `col-${colIndex}`} style={{ width: col.width }}>
                        {renderColumn(col, card, (value) => handleCardDataChange(card._cardId, col.field, value))}
                      </div>
                    ))}
                  </div>
                ))
              )}
            </CardContent>
          </Card>
        ))}
      </div>

      {/* 🆕 v3.1: Footer 버튼 영역 */}
      {footerConfig?.enabled && footerConfig.buttons && footerConfig.buttons.length > 0 ? (
        <div
          className={cn(
            "flex gap-2 pt-4",
            footerConfig.position === "sticky" && "sticky bottom-0 bg-background py-4 border-t",
            footerConfig.alignment === "left" && "justify-start",
            footerConfig.alignment === "center" && "justify-center",
            footerConfig.alignment === "right" && "justify-end",
            !footerConfig.alignment && "justify-end"
          )}
        >
          {footerConfig.buttons.map((btn) => (
            <Button
              key={btn.id}
              variant={btn.variant || "default"}
              disabled={btn.disabled || (btn.action === "save" && (isSaving || !hasDirtyData))}
              onClick={() => handleFooterButtonClick(btn)}
              className="gap-2"
            >
              {btn.action === "save" && isSaving ? (
                <Loader2 className="h-4 w-4 animate-spin" />
              ) : btn.icon === "save" ? (
                <Save className="h-4 w-4" />
              ) : btn.icon === "x" ? (
                <X className="h-4 w-4" />
              ) : btn.icon === "reset" ? (
                <RotateCcw className="h-4 w-4" />
              ) : null}
              {btn.label}
            </Button>
          ))}
        </div>
      ) : null}

      {/* 데이터 없음 */}
      {cardsData.length === 0 && !isLoading && (
        <div className="text-center py-12 text-muted-foreground">표시할 데이터가 없습니다.</div>
      )}
    </div>
  );
}

// 🆕 v3: contentRow 렌더링 (그룹핑 모드)
function renderContentRow(
  contentRow: CardContentRowConfig,
  card: GroupedCardData,
  aggregations: AggregationConfig[],
  onRowDataChange: (cardId: string, rowId: string, field: string, value: any) => void
) {
  switch (contentRow.type) {
    case "header":
    case "fields":
      // contentRow에서 직접 columns 가져오기 (v3 구조)
      const headerColumns = contentRow.columns || [];
      
      if (headerColumns.length === 0) {
        return (
          <div className="p-4 bg-muted/30 rounded-lg text-sm text-muted-foreground">
            헤더 컬럼이 설정되지 않았습니다.
          </div>
        );
      }
      
      return (
        <div
          className={cn(
            "grid gap-4",
            contentRow.layout === "vertical" ? "grid-cols-1" : "grid-flow-col auto-cols-fr",
            contentRow.backgroundColor && getBackgroundClass(contentRow.backgroundColor),
            contentRow.padding && `p-${contentRow.padding}`,
            "rounded-lg"
          )}
          style={{ gap: contentRow.gap || "16px" }}
        >
          {headerColumns.map((col, colIndex) => (
            <div key={col.id || `col-${colIndex}`} style={{ width: col.width }}>
              {renderHeaderColumn(col, card, aggregations)}
            </div>
          ))}
        </div>
      );

    case "aggregation":
      // contentRow에서 직접 aggregationFields 가져오기 (v3 구조)
      const aggFields = contentRow.aggregationFields || [];
      
      if (aggFields.length === 0) {
        return (
          <div className="p-4 bg-orange-50 dark:bg-orange-950 rounded-lg text-sm text-orange-600 dark:text-orange-400">
            집계 필드가 설정되지 않았습니다. (레이아웃 탭에서 집계 필드를 추가하세요)
          </div>
        );
      }
      
      return (
        <div
          className={cn(
            contentRow.aggregationLayout === "vertical"
              ? "flex flex-col gap-3"
              : "flex flex-wrap gap-4"
          )}
        >
          {aggFields.map((aggField, fieldIndex) => {
            // 집계 결과에서 값 가져오기 (aggregationResultField 사용)
            const value = card._aggregations?.[aggField.aggregationResultField] || 0;
            return (
              <div
                key={fieldIndex}
                className={cn(
                  "p-3 rounded-lg flex-1 min-w-[120px]",
                  aggField.backgroundColor ? getBackgroundClass(aggField.backgroundColor) : "bg-muted/50"
                )}
              >
                <div className="text-xs text-muted-foreground">{aggField.label || aggField.aggregationResultField}</div>
                <div
                  className={cn(
                    "font-bold",
                    aggField.fontSize ? `text-${aggField.fontSize}` : "text-lg",
                    aggField.textColor && `text-${aggField.textColor}`
                  )}
                >
                  {typeof value === "number" ? value.toLocaleString() : value || "-"}
                </div>
              </div>
            );
          })}
        </div>
      );

    case "table":
      // contentRow에서 직접 tableColumns 가져오기 (v3 구조)
      const tableColumns = contentRow.tableColumns || [];
      
      if (tableColumns.length === 0) {
        return (
          <div className="p-4 bg-blue-50 dark:bg-blue-950 rounded-lg text-sm text-blue-600 dark:text-blue-400">
            테이블 컬럼이 설정되지 않았습니다. (레이아웃 탭에서 테이블 컬럼을 추가하세요)
          </div>
        );
      }
      
      return (
        <div className="border rounded-lg overflow-hidden">
          {contentRow.tableTitle && (
            <div className="px-4 py-2 bg-muted/30 border-b text-sm font-medium">
              {contentRow.tableTitle}
            </div>
          )}
          <Table>
            {contentRow.showTableHeader !== false && (
              <TableHeader>
                <TableRow className="bg-muted/50">
                  {tableColumns.map((col) => (
                    <TableHead
                      key={col.id}
                      style={{ width: col.width }}
                      className={cn("text-xs", col.align && `text-${col.align}`)}
                    >
                      {col.label}
                    </TableHead>
                  ))}
                </TableRow>
              </TableHeader>
            )}
            <TableBody>
              {card._rows.map((row) => (
                <TableRow key={row._rowId} className={cn(row._isDirty && "bg-primary/5")}>
                  {tableColumns.map((col) => (
                    <TableCell
                      key={`${row._rowId}-${col.id}`}
                      className={cn("text-sm", col.align && `text-${col.align}`)}
                    >
                      {renderTableCell(
                        col, 
                        row, 
                        (value) => onRowDataChange(card._cardId, row._rowId, col.field, value),
                        row._isNew || row._isEditing
                      )}
                    </TableCell>
                  ))}
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </div>
      );

    default:
      return null;
  }
}

// 🆕 v3: contentRow 렌더링 (단순 모드)
function renderSimpleContentRow(
  contentRow: CardContentRowConfig,
  card: CardData,
  onChange: (value: any, field: string) => void
) {
  switch (contentRow.type) {
    case "header":
    case "fields":
      return (
        <div
          className={cn(
            "grid gap-4",
            contentRow.layout === "vertical" ? "grid-cols-1" : "grid-flow-col auto-cols-fr",
            contentRow.backgroundColor && getBackgroundClass(contentRow.backgroundColor),
            contentRow.padding && `p-${contentRow.padding}`,
            "rounded-lg"
          )}
          style={{ gap: contentRow.gap || "16px" }}
        >
          {(contentRow.columns || []).map((col, colIndex) => (
            <div key={col.id || `col-${colIndex}`} style={{ width: col.width }}>
              {renderColumn(col, card, (value) => onChange(value, col.field))}
            </div>
          ))}
        </div>
      );

    case "aggregation":
      // 단순 모드에서도 집계 표시 (단일 카드 기준)
      // contentRow에서 직접 aggregationFields 가져오기 (v3 구조)
      const aggFields = contentRow.aggregationFields || [];
      
      if (aggFields.length === 0) {
        return (
          <div className="p-4 bg-orange-50 dark:bg-orange-950 rounded-lg text-sm text-orange-600 dark:text-orange-400">
            집계 필드가 설정되지 않았습니다.
          </div>
        );
      }
      
      return (
        <div
          className={cn(
            contentRow.aggregationLayout === "vertical"
              ? "flex flex-col gap-3"
              : "flex flex-wrap gap-4"
          )}
        >
          {aggFields.map((aggField, fieldIndex) => {
            // 단순 모드에서는 카드 데이터에서 직접 값을 가져옴 (aggregationResultField 사용)
            const value = card[aggField.aggregationResultField] || card._originalData?.[aggField.aggregationResultField];
            return (
              <div
                key={fieldIndex}
                className={cn(
                  "p-3 rounded-lg flex-1 min-w-[120px]",
                  aggField.backgroundColor ? getBackgroundClass(aggField.backgroundColor) : "bg-muted/50"
                )}
              >
                <div className="text-xs text-muted-foreground">{aggField.label || aggField.aggregationResultField}</div>
                <div
                  className={cn(
                    "font-bold",
                    aggField.fontSize ? `text-${aggField.fontSize}` : "text-lg",
                    aggField.textColor && `text-${aggField.textColor}`
                  )}
                >
                  {typeof value === "number" ? value.toLocaleString() : value || "-"}
                </div>
              </div>
            );
          })}
        </div>
      );

    case "table":
      // 단순 모드에서도 테이블 표시 (단일 행)
      // contentRow에서 직접 tableColumns 가져오기 (v3 구조)
      const tableColumns = contentRow.tableColumns || [];
      
      if (tableColumns.length === 0) {
        return (
          <div className="p-4 bg-blue-50 dark:bg-blue-950 rounded-lg text-sm text-blue-600 dark:text-blue-400">
            테이블 컬럼이 설정되지 않았습니다.
          </div>
        );
      }
      
      return (
        <div className="border rounded-lg overflow-hidden">
          {contentRow.tableTitle && (
            <div className="px-4 py-2 bg-muted/30 border-b text-sm font-medium">
              {contentRow.tableTitle}
            </div>
          )}
          <Table>
            {contentRow.showTableHeader !== false && (
              <TableHeader>
                <TableRow className="bg-muted/50">
                  {tableColumns.map((col) => (
                    <TableHead
                      key={col.id}
                      style={{ width: col.width }}
                      className={cn("text-xs", col.align && `text-${col.align}`)}
                    >
                      {col.label}
                    </TableHead>
                  ))}
                </TableRow>
              </TableHeader>
            )}
            <TableBody>
              {/* 단순 모드: 카드 자체가 하나의 행 */}
              <TableRow className={cn(card._isDirty && "bg-primary/5")}>
                {tableColumns.map((col) => (
                  <TableCell
                    key={`${card._cardId}-${col.id}`}
                    className={cn("text-sm", col.align && `text-${col.align}`)}
                  >
                    {renderSimpleTableCell(col, card, (value) => onChange(value, col.field))}
                  </TableCell>
                ))}
              </TableRow>
            </TableBody>
          </Table>
        </div>
      );

    default:
      return null;
  }
}

// 단순 모드 테이블 셀 렌더링
function renderSimpleTableCell(
  col: TableColumnConfig,
  card: CardData,
  onChange: (value: any) => void
) {
  const value = card[col.field] || card._originalData?.[col.field];

  if (!col.editable) {
    // 읽기 전용
    if (col.type === "number") {
      return typeof value === "number" ? value.toLocaleString() : value || "-";
    }
    return value || "-";
  }

  // 편집 가능
  switch (col.type) {
    case "number":
      return (
        <Input
          type="number"
          value={value || ""}
          onChange={(e) => onChange(parseFloat(e.target.value) || 0)}
          className="h-8 text-sm"
        />
      );
    case "date":
      return (
        <Input
          type="date"
          value={value || ""}
          onChange={(e) => onChange(e.target.value)}
          className="h-8 text-sm"
        />
      );
    case "select":
      return (
        <Select value={value || ""} onValueChange={onChange}>
          <SelectTrigger className="h-8 text-sm">
            <SelectValue placeholder="선택" />
          </SelectTrigger>
          <SelectContent>
            {(col.selectOptions || []).map((opt) => (
              <SelectItem key={opt.value} value={opt.value}>
                {opt.label}
              </SelectItem>
            ))}
          </SelectContent>
        </Select>
      );
    default:
      return (
        <Input
          type="text"
          value={value || ""}
          onChange={(e) => onChange(e.target.value)}
          className="h-8 text-sm"
        />
      );
  }
}

// 배경색 클래스 변환
function getBackgroundClass(color: string): string {
  const colorMap: Record<string, string> = {
    blue: "bg-blue-50 dark:bg-blue-950",
    green: "bg-green-50 dark:bg-green-950",
    purple: "bg-purple-50 dark:bg-purple-950",
    orange: "bg-orange-50 dark:bg-orange-950",
  };
  return colorMap[color] || "";
}

// 헤더 컬럼 렌더링 (집계값 포함)
function renderHeaderColumn(
  col: CardColumnConfig,
  card: GroupedCardData,
  aggregations: AggregationConfig[]
) {
  let value: any;

  // 집계값 타입이면 집계 결과에서 가져옴
  if (col.type === "aggregation" && col.aggregationField) {
    value = card._aggregations[col.aggregationField];
    const aggConfig = aggregations.find((a) => a.resultField === col.aggregationField);

    return (
      <div className="space-y-1">
        <Label className="text-xs font-medium text-muted-foreground">{col.label}</Label>
        <div
          className={cn(
            "text-lg font-bold",
            col.textColor && `text-${col.textColor}`,
            col.fontSize && `text-${col.fontSize}`
          )}
        >
          {typeof value === "number" ? value.toLocaleString() : value || "-"}
          {aggConfig && <span className="text-xs font-normal text-muted-foreground ml-1">({aggConfig.type})</span>}
        </div>
      </div>
    );
  }

  // 일반 필드는 대표 데이터에서 가져옴
  value = card._representativeData[col.field];

  return (
    <div className="space-y-1">
      <Label className="text-xs font-medium text-muted-foreground">{col.label}</Label>
      <div
        className={cn(
          "text-sm",
          col.fontWeight && `font-${col.fontWeight}`,
          col.fontSize && `text-${col.fontSize}`
        )}
      >
        {value || "-"}
      </div>
    </div>
  );
}

// 테이블 셀 렌더링
// 🆕 v3.8: isRowEditable 파라미터 추가 - 행이 편집 가능한 상태인지 (신규 행이거나 수정 모드)
function renderTableCell(col: TableColumnConfig, row: CardRowData, onChange: (value: any) => void, isRowEditable?: boolean) {
  const value = row[col.field];

  // Badge 타입
  if (col.type === "badge") {
    const badgeColor = col.badgeColorMap?.[value] || col.badgeVariant || "default";
    return <Badge variant={badgeColor as any}>{value || "-"}</Badge>;
  }

  // 🆕 v3.8: 행 수준 편집 가능 여부 체크
  // isRowEditable이 false이면 컬럼 설정과 관계없이 읽기 전용
  const canEdit = col.editable && (isRowEditable !== false);

  // 읽기 전용
  if (!canEdit) {
    if (col.type === "number") {
      return <span>{typeof value === "number" ? value.toLocaleString() : value || "-"}</span>;
    }
    if (col.type === "date") {
      // ISO 8601 형식을 표시용으로 변환
      const displayDate = value ? (typeof value === 'string' && value.includes('T') ? value.split('T')[0] : value) : "-";
      return <span>{displayDate}</span>;
    }
    return <span>{value || "-"}</span>;
  }

  // 편집 가능
  switch (col.type) {
    case "text":
      return (
        <Input
          value={value || ""}
          onChange={(e) => onChange(e.target.value)}
          className="h-8 text-sm"
        />
      );
    case "number":
      return (
        <Input
          type="number"
          value={value || ""}
          onChange={(e) => onChange(Number(e.target.value) || 0)}
          className="h-8 text-sm text-right"
        />
      );
    case "date":
      // ISO 8601 형식('2025-12-02T00:00:00.000Z')을 'YYYY-MM-DD' 형식으로 변환
      const dateValue = value ? (typeof value === 'string' && value.includes('T') ? value.split('T')[0] : value) : "";
      return (
        <Input
          type="date"
          value={dateValue}
          onChange={(e) => onChange(e.target.value)}
          className="h-8 text-sm"
        />
      );
    default:
      return <span>{value || "-"}</span>;
  }
}

// 컬럼 렌더링 함수 (Simple 모드)
function renderColumn(col: CardColumnConfig, card: CardData, onChange: (value: any) => void) {
  const value = card[col.field];
  const isReadOnly = !col.editable;

  return (
    <div className="space-y-1.5">
      <Label className="text-xs font-medium">
        {col.label}
        {col.required && <span className="text-destructive ml-1">*</span>}
      </Label>

      {isReadOnly && (
        <div className="text-sm text-muted-foreground bg-muted px-3 py-2 rounded-md min-h-[40px] flex items-center">
          {value || "-"}
        </div>
      )}

      {!isReadOnly && (
        <>
          {col.type === "text" && (
            <Input
              value={value || ""}
              onChange={(e) => onChange(e.target.value)}
              placeholder={col.placeholder}
              className="h-10 text-sm"
            />
          )}

          {col.type === "number" && (
            <Input
              type="number"
              value={value || ""}
              onChange={(e) => onChange(e.target.value)}
              placeholder={col.placeholder}
              className="h-10 text-sm"
            />
          )}

          {col.type === "date" && (
            <Input
              type="date"
              value={value ? (typeof value === 'string' && value.includes('T') ? value.split('T')[0] : value) : ""}
              onChange={(e) => onChange(e.target.value)}
              className="h-10 text-sm"
            />
          )}

          {col.type === "select" && (
            <Select value={value || ""} onValueChange={onChange}>
              <SelectTrigger className="h-10 text-sm">
                <SelectValue placeholder={col.placeholder || "선택하세요"} />
              </SelectTrigger>
              <SelectContent>
                {col.selectOptions?.map((option) => (
                  <SelectItem key={option.value} value={option.value}>
                    {option.label}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          )}

          {col.type === "textarea" && (
            <Textarea
              value={value || ""}
              onChange={(e) => onChange(e.target.value)}
              placeholder={col.placeholder}
              className="text-sm min-h-[80px]"
            />
          )}

          {col.type === "component" && col.componentType && (
            <div className="text-xs text-muted-foreground p-2 border rounded">
              컴포넌트: {col.componentType} (개발 중)
            </div>
          )}
        </>
      )}
    </div>
  );
}