From 417d77729dcea4c22dbcfd2f963b7253cae65031 Mon Sep 17 00:00:00 2001
From: leeheejin <imleesinok@gmail.com>
Date: Fri, 5 Dec 2025 16:44:58 +0900
Subject: [PATCH] =?UTF-8?q?=EC=9D=BC=EB=8B=A8=20=EC=9B=94=EC=9A=94?=
 =?UTF-8?q?=EC=9D=BC=EC=97=90=20=EC=83=81=EC=9D=98=ED=95=B4=EC=95=BC?=
 =?UTF-8?q?=ED=95=B4=EC=84=9C=20=EC=97=AC=EA=B8=B0=EC=97=90=EB=8B=A4?=
 =?UTF-8?q?=EB=A7=8C=20=EC=BB=A4=EB=B0=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../table-list/TableListComponent.tsx         | 3204 ++++++++++++++++-
 1 file changed, 3059 insertions(+), 145 deletions(-)

diff --git a/frontend/lib/registry/components/table-list/TableListComponent.tsx b/frontend/lib/registry/components/table-list/TableListComponent.tsx
index 4f78ed23..ca2125e2 100644
--- a/frontend/lib/registry/components/table-list/TableListComponent.tsx
+++ b/frontend/lib/registry/components/table-list/TableListComponent.tsx
@@ -22,7 +22,18 @@ import {
   X,
   Layers,
   ChevronDown,
+  Filter,
+  Check,
+  Download,
+  FileSpreadsheet,
+  Copy,
+  ClipboardCopy,
+  Edit,
+  CheckSquare,
+  Trash2,
 } from "lucide-react";
+import * as XLSX from "xlsx";
+import { FileText, ChevronRightIcon } from "lucide-react";
 import { Checkbox } from "@/components/ui/checkbox";
 import { cn } from "@/lib/utils";
 import { toast } from "sonner";
@@ -62,6 +73,7 @@ interface GroupedData {
   groupValues: Record<string, any>;
   items: any[];
   count: number;
+  summary?: Record<string, { sum: number; avg: number; count: number }>; // 🆕 그룹별 소계
 }
 
 // ========================================
@@ -125,6 +137,35 @@ const debouncedApiCall = <T extends any[], R>(key: string, fn: (...args: T) => P
   };
 };
 
+// ========================================
+// Filter Builder 인터페이스
+// ========================================
+
+interface FilterCondition {
+  id: string;
+  column: string;
+  operator: 
+    | "equals" 
+    | "notEquals" 
+    | "contains" 
+    | "notContains" 
+    | "startsWith" 
+    | "endsWith" 
+    | "greaterThan" 
+    | "lessThan" 
+    | "greaterOrEqual" 
+    | "lessOrEqual" 
+    | "isEmpty" 
+    | "isNotEmpty";
+  value: string;
+}
+
+interface FilterGroup {
+  id: string;
+  logic: "AND" | "OR";
+  conditions: FilterCondition[];
+}
+
 // ========================================
 // Props 인터페이스
 // ========================================
@@ -328,28 +369,153 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
     }
   }, [columnVisibility, tableConfig.selectedTable, currentUserId]);
 
+  // 🆕 columnOrder를 visibleColumns 이전에 정의 (visibleColumns에서 사용)
+  const [columnOrder, setColumnOrder] = useState<string[]>([]);
+
+  // 🆕 visibleColumns를 상단에서 정의 (다른 useCallback/useMemo에서 사용하기 위해)
+  const visibleColumns = useMemo(() => {
+    let cols = (tableConfig.columns || []).filter((col) => col.visible !== false);
+
+    // columnVisibility가 있으면 가시성 적용
+    if (columnVisibility.length > 0) {
+      cols = cols.filter((col) => {
+        const visibilityConfig = columnVisibility.find((cv) => cv.columnName === col.columnName);
+        return visibilityConfig ? visibilityConfig.visible : true;
+      });
+    }
+
+    // 체크박스 컬럼 (나중에 위치 결정)
+    // 기본값: enabled가 undefined면 true로 처리
+    let checkboxCol: ColumnConfig | null = null;
+    if (tableConfig.checkbox?.enabled ?? true) {
+      checkboxCol = {
+        columnName: "__checkbox__",
+        displayName: "",
+        webType: "checkbox",
+        visible: true,
+        sortable: false,
+        filterable: false,
+        width: 40,
+      };
+    }
+
+    // columnOrder가 있으면 해당 순서로 정렬
+    if (columnOrder.length > 0) {
+      const orderMap = new Map(columnOrder.map((name, idx) => [name, idx]));
+      cols = [...cols].sort((a, b) => {
+        const aIdx = orderMap.get(a.columnName) ?? 9999;
+        const bIdx = orderMap.get(b.columnName) ?? 9999;
+        return aIdx - bIdx;
+      });
+    }
+
+    // 체크박스 위치 결정
+    if (checkboxCol) {
+      const checkboxPosition = tableConfig.checkbox?.position || "left";
+      if (checkboxPosition === "left") {
+        return [checkboxCol, ...cols];
+      } else {
+        return [...cols, checkboxCol];
+      }
+    }
+
+    return cols;
+  }, [tableConfig.columns, tableConfig.checkbox, columnVisibility, columnOrder]);
+
   const [data, setData] = useState<Record<string, any>[]>([]);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
   
-  // 🆕 분할 패널에서 우측에 이미 추가된 항목 필터링 (좌측 테이블에만 적용)
+  // 🆕 컬럼 헤더 필터 상태 (상단에서 선언)
+  const [headerFilters, setHeaderFilters] = useState<Record<string, Set<string>>>({}); 
+  const [openFilterColumn, setOpenFilterColumn] = useState<string | null>(null);
+
+  // 🆕 Filter Builder (고급 필터) 관련 상태 - filteredData보다 먼저 정의해야 함
+  const [filterGroups, setFilterGroups] = useState<FilterGroup[]>([]);
+  
+  // 🆕 분할 패널에서 우측에 이미 추가된 항목 필터링 (좌측 테이블에만 적용) + 헤더 필터
   const filteredData = useMemo(() => {
-    // 분할 패널 좌측에 있고, 우측에 추가된 항목이 있는 경우에만 필터링
+    let result = data;
+    
+    // 1. 분할 패널 좌측에 있고, 우측에 추가된 항목이 있는 경우 필터링
     if (splitPanelPosition === "left" && splitPanelContext?.addedItemIds && splitPanelContext.addedItemIds.size > 0) {
       const addedIds = splitPanelContext.addedItemIds;
-      const filtered = data.filter((row) => {
+      result = result.filter((row) => {
         const rowId = String(row.id || row.po_item_id || row.item_id || "");
         return !addedIds.has(rowId);
       });
-      console.log("🔍 [TableList] 우측 추가 항목 필터링:", {
-        originalCount: data.length,
-        filteredCount: filtered.length,
-        addedIdsCount: addedIds.size,
-      });
-      return filtered;
     }
-    return data;
-  }, [data, splitPanelPosition, splitPanelContext?.addedItemIds]);
+    
+    // 2. 헤더 필터 적용 (joinColumnMapping 사용 안 함 - 직접 컬럼명 사용)
+    if (Object.keys(headerFilters).length > 0) {
+      result = result.filter((row) => {
+        return Object.entries(headerFilters).every(([columnName, values]) => {
+          if (values.size === 0) return true;
+          
+          // 여러 가능한 컬럼명 시도
+          const cellValue = row[columnName] ?? row[columnName.toLowerCase()] ?? row[columnName.toUpperCase()];
+          const cellStr = cellValue !== null && cellValue !== undefined ? String(cellValue) : "";
+          
+          return values.has(cellStr);
+        });
+      });
+    }
+
+    // 3. 🆕 Filter Builder 적용
+    if (filterGroups.length > 0) {
+      result = result.filter((row) => {
+        return filterGroups.every((group) => {
+          const validConditions = group.conditions.filter(
+            (c) => c.column && (c.operator === "isEmpty" || c.operator === "isNotEmpty" || c.value)
+          );
+          if (validConditions.length === 0) return true;
+
+          const evaluateCondition = (value: any, condition: typeof group.conditions[0]): boolean => {
+            const strValue = value !== null && value !== undefined ? String(value).toLowerCase() : "";
+            const condValue = condition.value.toLowerCase();
+
+            switch (condition.operator) {
+              case "equals":
+                return strValue === condValue;
+              case "notEquals":
+                return strValue !== condValue;
+              case "contains":
+                return strValue.includes(condValue);
+              case "notContains":
+                return !strValue.includes(condValue);
+              case "startsWith":
+                return strValue.startsWith(condValue);
+              case "endsWith":
+                return strValue.endsWith(condValue);
+              case "greaterThan":
+                return parseFloat(strValue) > parseFloat(condValue);
+              case "lessThan":
+                return parseFloat(strValue) < parseFloat(condValue);
+              case "greaterOrEqual":
+                return parseFloat(strValue) >= parseFloat(condValue);
+              case "lessOrEqual":
+                return parseFloat(strValue) <= parseFloat(condValue);
+              case "isEmpty":
+                return strValue === "" || value === null || value === undefined;
+              case "isNotEmpty":
+                return strValue !== "" && value !== null && value !== undefined;
+              default:
+                return true;
+            }
+          };
+
+          if (group.logic === "AND") {
+            return validConditions.every((cond) => evaluateCondition(row[cond.column], cond));
+          } else {
+            return validConditions.some((cond) => evaluateCondition(row[cond.column], cond));
+          }
+        });
+      });
+    }
+    
+    return result;
+  }, [data, splitPanelPosition, splitPanelContext?.addedItemIds, headerFilters, filterGroups]);
+
   const [currentPage, setCurrentPage] = useState(1);
   const [totalPages, setTotalPages] = useState(0);
   const [totalItems, setTotalItems] = useState(0);
@@ -373,7 +539,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
   const [selectedRows, setSelectedRows] = useState<Set<string>>(new Set());
   const [columnWidths, setColumnWidths] = useState<Record<string, number>>({});
   const [refreshTrigger, setRefreshTrigger] = useState(0);
-  const [columnOrder, setColumnOrder] = useState<string[]>([]);
+  // columnOrder는 상단에서 정의됨 (visibleColumns보다 먼저 필요)
   const columnRefs = useRef<Record<string, HTMLTableCellElement | null>>({});
   const [isAllSelected, setIsAllSelected] = useState(false);
   const hasInitializedWidths = useRef(false);
@@ -383,16 +549,117 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
   const [isFilterSettingOpen, setIsFilterSettingOpen] = useState(false);
   const [visibleFilterColumns, setVisibleFilterColumns] = useState<Set<string>>(new Set());
 
+  // 🆕 키보드 네비게이션 관련 상태
+  const [focusedCell, setFocusedCell] = useState<{ rowIndex: number; colIndex: number } | null>(null);
+  const tableContainerRef = useRef<HTMLDivElement>(null);
+
+  // 🆕 인라인 셀 편집 관련 상태
+  const [editingCell, setEditingCell] = useState<{ 
+    rowIndex: number; 
+    colIndex: number; 
+    columnName: string;
+    originalValue: any;
+  } | null>(null);
+  const [editingValue, setEditingValue] = useState<string>("");
+  const editInputRef = useRef<HTMLInputElement>(null);
+
+  // 🆕 배치 편집 관련 상태
+  const [editMode, setEditMode] = useState<"immediate" | "batch">("immediate"); // 편집 모드
+  const [pendingChanges, setPendingChanges] = useState<Map<string, { 
+    rowIndex: number;
+    columnName: string;
+    originalValue: any;
+    newValue: any;
+    primaryKeyValue: any;
+  }>>(new Map()); // key: `${rowIndex}-${columnName}`
+  const [localEditedData, setLocalEditedData] = useState<Record<number, Record<string, any>>>({}); // 로컬 수정 데이터
+
+  // 🆕 유효성 검사 관련 상태
+  const [validationErrors, setValidationErrors] = useState<Map<string, string>>(new Map()); // key: `${rowIndex}-${columnName}`
+
+  // 🆕 유효성 검사 규칙 타입
+  type ValidationRule = {
+    required?: boolean;
+    min?: number;
+    max?: number;
+    minLength?: number;
+    maxLength?: number;
+    pattern?: RegExp;
+    customMessage?: string;
+    validate?: (value: any, row: any) => string | null; // 커스텀 검증 함수 (에러 메시지 또는 null)
+  };
+
+  // 🆕 Cascading Lookups 관련 상태
+  const [cascadingOptions, setCascadingOptions] = useState<Record<string, { value: string; label: string }[]>>({});
+  const [loadingCascading, setLoadingCascading] = useState<Record<string, boolean>>({});
+
+  // 🆕 Multi-Level Headers (Column Bands) 타입
+  type ColumnBand = {
+    caption: string;
+    columns: string[]; // 포함될 컬럼명 배열
+  };
+
   // 그룹 설정 관련 상태
   const [groupByColumns, setGroupByColumns] = useState<string[]>([]);
   const [collapsedGroups, setCollapsedGroups] = useState<Set<string>>(new Set());
 
+  // 🆕 Master-Detail 관련 상태
+  const [expandedRows, setExpandedRows] = useState<Set<string>>(new Set()); // 확장된 행 키 목록
+  const [detailData, setDetailData] = useState<Record<string, any[]>>({}); // 상세 데이터 캐시
+
+  // 🆕 Drag & Drop 재정렬 관련 상태
+  const [draggedRowIndex, setDraggedRowIndex] = useState<number | null>(null);
+  const [dropTargetIndex, setDropTargetIndex] = useState<number | null>(null);
+  const [isDragEnabled, setIsDragEnabled] = useState<boolean>((tableConfig as any).enableRowDrag ?? false);
+
+  // 🆕 Virtual Scrolling 관련 상태
+  const [isVirtualScrollEnabled] = useState<boolean>((tableConfig as any).virtualScroll ?? false);
+  const [scrollTop, setScrollTop] = useState(0);
+  const ROW_HEIGHT = 40; // 각 행의 높이 (픽셀)
+  const OVERSCAN = 5; // 버퍼로 추가 렌더링할 행 수
+  const scrollContainerRef = useRef<HTMLDivElement>(null);
+
+  // 🆕 Column Reordering 관련 상태
+  const [draggedColumnIndex, setDraggedColumnIndex] = useState<number | null>(null);
+  const [dropTargetColumnIndex, setDropTargetColumnIndex] = useState<number | null>(null);
+  const [isColumnDragEnabled] = useState<boolean>((tableConfig as any).enableColumnDrag ?? true);
+
+  // 🆕 State Persistence: 통합 상태 키
+  const tableStateKey = useMemo(() => {
+    if (!tableConfig.selectedTable) return null;
+    return `tableState_${tableConfig.selectedTable}`;
+  }, [tableConfig.selectedTable]);
+
+  // 🆕 Real-Time Updates 관련 상태
+  const [isRealTimeEnabled] = useState<boolean>((tableConfig as any).realTimeUpdates ?? false);
+  const [wsConnectionStatus, setWsConnectionStatus] = useState<"connecting" | "connected" | "disconnected">("disconnected");
+  const wsRef = useRef<WebSocket | null>(null);
+  const reconnectTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+
+  // 🆕 Context Menu 관련 상태
+  const [contextMenu, setContextMenu] = useState<{
+    x: number;
+    y: number;
+    rowIndex: number;
+    colIndex: number;
+    row: any;
+  } | null>(null);
+
   // 사용자 옵션 모달 관련 상태
   const [isTableOptionsOpen, setIsTableOptionsOpen] = useState(false);
   const [showGridLines, setShowGridLines] = useState(true);
   const [viewMode, setViewMode] = useState<"table" | "card" | "grouped-card">("table");
   const [frozenColumns, setFrozenColumns] = useState<string[]>([]);
 
+  // 🆕 Search Panel (통합 검색) 관련 상태
+  const [globalSearchTerm, setGlobalSearchTerm] = useState("");
+  const [isSearchPanelOpen, setIsSearchPanelOpen] = useState(false);
+  const [searchHighlights, setSearchHighlights] = useState<Set<string>>(new Set()); // "rowIndex-colIndex" 형식
+
+  // 🆕 Filter Builder (고급 필터) 관련 상태 추가
+  const [isFilterBuilderOpen, setIsFilterBuilderOpen] = useState(false);
+  const [activeFilterCount, setActiveFilterCount] = useState(0);
+
   // 🆕 연결된 필터 처리 (셀렉트박스 등 다른 컴포넌트 값으로 필터링)
   useEffect(() => {
     const linkedFilters = tableConfig.linkedFilters;
@@ -796,9 +1063,10 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
 
           // 전역 저장소에 데이터 저장
           if (tableConfig.selectedTable) {
-            // 컬럼 라벨 매핑 생성
+            // 컬럼 라벨 매핑 생성 (tableConfig.columns 사용 - visibleColumns는 아직 정의되지 않음)
+            const cols = (tableConfig.columns || []).filter((col) => col.visible !== false);
             const labels: Record<string, string> = {};
-            visibleColumns.forEach((col) => {
+            cols.forEach((col) => {
               labels[col.columnName] = columnLabels[col.columnName] || col.columnName;
             });
 
@@ -811,7 +1079,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
               {
                 filterConditions: Object.keys(searchValues).length > 0 ? searchValues : undefined,
                 searchTerm: searchTerm || undefined,
-                visibleColumns: visibleColumns.map((col) => col.columnName),
+                visibleColumns: cols.map((col) => col.columnName),
                 columnLabels: labels,
                 currentPage: currentPage,
                 pageSize: localPageSize,
@@ -1284,21 +1552,23 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
       setError(null);
       
       // 🎯 Store에 필터 조건 저장 (엑셀 다운로드용)
+      // tableConfig.columns 사용 (visibleColumns는 이 시점에서 아직 정의되지 않을 수 있음)
+      const cols = (tableConfig.columns || []).filter((col) => col.visible !== false);
       const labels: Record<string, string> = {};
-      visibleColumns.forEach((col) => {
+      cols.forEach((col) => {
         labels[col.columnName] = columnLabels[col.columnName] || col.columnName;
       });
       
       tableDisplayStore.setTableData(
         tableConfig.selectedTable,
         response.data || [],
-        visibleColumns.map((col) => col.columnName),
+        cols.map((col) => col.columnName),
         sortBy,
         sortOrder,
         {
           filterConditions: filters,
           searchTerm: search,
-          visibleColumns: visibleColumns.map((col) => col.columnName),
+          visibleColumns: cols.map((col) => col.columnName),
           columnLabels: labels,
           currentPage: page,
           pageSize: pageSize,
@@ -1418,9 +1688,11 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
       });
 
       // 2단계: 정렬된 데이터를 컬럼 순서대로 재정렬
+      // tableConfig.columns 사용 (visibleColumns는 이 시점에서 아직 정의되지 않을 수 있음)
+      const cols = (tableConfig.columns || []).filter((col) => col.visible !== false);
       const reorderedData = sortedData.map((row: any) => {
         const reordered: any = {};
-        visibleColumns.forEach((col) => {
+        cols.forEach((col) => {
           if (col.columnName in row) {
             reordered[col.columnName] = row[col.columnName];
           }
@@ -1456,12 +1728,12 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
       // 전역 저장소에 정렬된 데이터 저장
       if (tableConfig.selectedTable) {
         const cleanColumnOrder = (
-          columnOrder.length > 0 ? columnOrder : visibleColumns.map((c) => c.columnName)
+          columnOrder.length > 0 ? columnOrder : cols.map((c) => c.columnName)
         ).filter((col) => col !== "__checkbox__");
         
         // 컬럼 라벨 정보도 함께 저장
         const labels: Record<string, string> = {};
-        visibleColumns.forEach((col) => {
+        cols.forEach((col) => {
           labels[col.columnName] = columnLabels[col.columnName] || col.columnName;
         });
         
@@ -1474,7 +1746,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
           {
             filterConditions: Object.keys(searchValues).length > 0 ? searchValues : undefined,
             searchTerm: searchTerm || undefined,
-            visibleColumns: visibleColumns.map((col) => col.columnName),
+            visibleColumns: cols.map((col) => col.columnName),
             columnLabels: labels,
             currentPage: currentPage,
             pageSize: localPageSize,
@@ -1648,6 +1920,1495 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
     console.log("행 클릭:", { row, index, isSelected: !isCurrentlySelected });
   };
 
+  // 🆕 셀 클릭 핸들러 (포커스 설정)
+  const handleCellClick = (rowIndex: number, colIndex: number, e: React.MouseEvent) => {
+    e.stopPropagation();
+    setFocusedCell({ rowIndex, colIndex });
+    // 테이블 컨테이너에 포커스 설정 (키보드 이벤트 수신용)
+    tableContainerRef.current?.focus();
+  };
+
+  // 🆕 셀 더블클릭 핸들러 (편집 모드 진입) - visibleColumns 정의 후 사용
+  const handleCellDoubleClick = useCallback((rowIndex: number, colIndex: number, columnName: string, value: any) => {
+    // 체크박스 컬럼은 편집 불가
+    if (columnName === "__checkbox__") return;
+
+    setEditingCell({ rowIndex, colIndex, columnName, originalValue: value });
+    setEditingValue(value !== null && value !== undefined ? String(value) : "");
+    setFocusedCell({ rowIndex, colIndex });
+  }, []);
+
+  // 🆕 편집 모드 진입 placeholder (실제 구현은 visibleColumns 정의 후)
+  const startEditingRef = useRef<() => void>(() => {});
+
+  // 🆕 각 컬럼의 고유값 목록 계산
+  const columnUniqueValues = useMemo(() => {
+    const result: Record<string, string[]> = {};
+    
+    if (data.length === 0) return result;
+
+    (tableConfig.columns || []).forEach((column: { columnName: string }) => {
+      if (column.columnName === "__checkbox__") return;
+      
+      const mappedColumnName = joinColumnMapping[column.columnName] || column.columnName;
+      const values = new Set<string>();
+      
+      data.forEach((row) => {
+        const val = row[mappedColumnName];
+        if (val !== null && val !== undefined && val !== "") {
+          values.add(String(val));
+        }
+      });
+      
+      result[column.columnName] = Array.from(values).sort();
+    });
+    
+    return result;
+  }, [data, tableConfig.columns, joinColumnMapping]);
+
+  // 🆕 헤더 필터 토글
+  const toggleHeaderFilter = useCallback((columnName: string, value: string) => {
+    setHeaderFilters((prev) => {
+      const current = prev[columnName] || new Set<string>();
+      const newSet = new Set(current);
+      
+      if (newSet.has(value)) {
+        newSet.delete(value);
+      } else {
+        newSet.add(value);
+      }
+      
+      return { ...prev, [columnName]: newSet };
+    });
+  }, []);
+
+  // 🆕 헤더 필터 초기화
+  const clearHeaderFilter = useCallback((columnName: string) => {
+    setHeaderFilters((prev) => {
+      const newFilters = { ...prev };
+      delete newFilters[columnName];
+      return newFilters;
+    });
+    setOpenFilterColumn(null);
+  }, []);
+
+  // 🆕 모든 헤더 필터 초기화
+  const clearAllHeaderFilters = useCallback(() => {
+    setHeaderFilters({});
+    setOpenFilterColumn(null);
+  }, []);
+
+  // 🆕 데이터 요약 (Total Summaries) 설정
+  // 형식: { columnName: { type: 'sum' | 'avg' | 'count' | 'min' | 'max', label?: string } }
+  const summaryConfig = useMemo(() => {
+    const config: Record<string, { type: string; label?: string }> = {};
+    
+    // tableConfig에서 summary 설정 읽기
+    if (tableConfig.summaries) {
+      tableConfig.summaries.forEach((summary: { columnName: string; type: string; label?: string }) => {
+        config[summary.columnName] = { type: summary.type, label: summary.label };
+      });
+    }
+    
+    return config;
+  }, [tableConfig.summaries]);
+
+  // 🆕 요약 데이터 계산
+  const summaryData = useMemo(() => {
+    if (Object.keys(summaryConfig).length === 0 || data.length === 0) {
+      return null;
+    }
+
+    const result: Record<string, { value: number | string; label: string }> = {};
+
+    Object.entries(summaryConfig).forEach(([columnName, config]) => {
+      const values = data
+        .map((row) => {
+          const mappedColumnName = joinColumnMapping[columnName] || columnName;
+          const val = row[mappedColumnName];
+          return typeof val === "number" ? val : parseFloat(val);
+        })
+        .filter((v) => !isNaN(v));
+
+      let value: number | string = 0;
+      let label = config.label || "";
+
+      switch (config.type) {
+        case "sum":
+          value = values.reduce((acc, v) => acc + v, 0);
+          label = label || "합계";
+          break;
+        case "avg":
+          value = values.length > 0 ? values.reduce((acc, v) => acc + v, 0) / values.length : 0;
+          label = label || "평균";
+          break;
+        case "count":
+          value = data.length;
+          label = label || "개수";
+          break;
+        case "min":
+          value = values.length > 0 ? Math.min(...values) : 0;
+          label = label || "최소";
+          break;
+        case "max":
+          value = values.length > 0 ? Math.max(...values) : 0;
+          label = label || "최대";
+          break;
+        default:
+          value = 0;
+      }
+
+      result[columnName] = { value, label };
+    });
+
+    return result;
+  }, [data, summaryConfig, joinColumnMapping]);
+
+  // 🆕 편집 취소
+  const cancelEditing = useCallback(() => {
+    setEditingCell(null);
+    setEditingValue("");
+    tableContainerRef.current?.focus();
+  }, []);
+
+  // 🆕 편집 저장 (즉시 저장 또는 배치 저장)
+  const saveEditing = useCallback(async () => {
+    if (!editingCell) return;
+
+    const { rowIndex, columnName, originalValue } = editingCell;
+    const newValue = editingValue;
+
+    // 값이 변경되지 않았으면 그냥 닫기
+    if (String(originalValue ?? "") === newValue) {
+      setCellValidationError(rowIndex, columnName, null); // 에러 초기화
+      cancelEditing();
+      return;
+    }
+
+    // 현재 행 데이터 가져오기
+    const row = data[rowIndex];
+    if (!row || !tableConfig.selectedTable) {
+      cancelEditing();
+      return;
+    }
+
+    // 🆕 유효성 검사 실행
+    const validationError = validateValue(newValue === "" ? null : newValue, columnName, row);
+    if (validationError) {
+      setCellValidationError(rowIndex, columnName, validationError);
+      toast.error(validationError);
+      // 편집 상태 유지 (에러 수정 가능하도록)
+      return;
+    }
+    // 유효성 통과 시 에러 초기화
+    setCellValidationError(rowIndex, columnName, null);
+
+    // 기본 키 필드 찾기 (id 또는 첫 번째 컬럼)
+    const primaryKeyField = tableConfig.primaryKey || "id";
+    const primaryKeyValue = row[primaryKeyField];
+
+    if (primaryKeyValue === undefined || primaryKeyValue === null) {
+      console.error("기본 키 값을 찾을 수 없습니다:", primaryKeyField);
+      cancelEditing();
+      return;
+    }
+
+    // 🆕 배치 모드: 변경사항을 pending에 저장
+    if (editMode === "batch") {
+      const changeKey = `${rowIndex}-${columnName}`;
+      setPendingChanges((prev) => {
+        const newMap = new Map(prev);
+        newMap.set(changeKey, {
+          rowIndex,
+          columnName,
+          originalValue,
+          newValue: newValue === "" ? null : newValue,
+          primaryKeyValue,
+        });
+        return newMap;
+      });
+
+      // 로컬 수정 데이터 업데이트 (화면 표시용)
+      setLocalEditedData((prev) => ({
+        ...prev,
+        [rowIndex]: {
+          ...(prev[rowIndex] || {}),
+          [columnName]: newValue === "" ? null : newValue,
+        },
+      }));
+
+      console.log("📝 배치 편집 추가:", { columnName, newValue, pendingCount: pendingChanges.size + 1 });
+      cancelEditing();
+      return;
+    }
+
+    // 🆕 즉시 모드: 바로 저장
+    try {
+      const { apiClient } = await import("@/lib/api/client");
+
+      await apiClient.put(`/dynamic-form/update-field`, {
+        tableName: tableConfig.selectedTable,
+        keyField: primaryKeyField,
+        keyValue: primaryKeyValue,
+        updateField: columnName,
+        updateValue: newValue === "" ? null : newValue,
+      });
+
+      // 데이터 새로고침 트리거
+      setRefreshTrigger((prev) => prev + 1);
+
+      console.log("✅ 셀 편집 저장 완료:", { columnName, newValue });
+    } catch (error) {
+      console.error("❌ 셀 편집 저장 실패:", error);
+    }
+
+    cancelEditing();
+  }, [editingCell, editingValue, data, tableConfig.selectedTable, tableConfig.primaryKey, cancelEditing, editMode, pendingChanges.size]);
+
+  // 🆕 배치 저장: 모든 변경사항 한번에 저장
+  const saveBatchChanges = useCallback(async () => {
+    if (pendingChanges.size === 0) {
+      toast.info("저장할 변경사항이 없습니다.");
+      return;
+    }
+
+    try {
+      const { apiClient } = await import("@/lib/api/client");
+      const primaryKeyField = tableConfig.primaryKey || "id";
+
+      // 모든 변경사항 저장
+      const savePromises = Array.from(pendingChanges.values()).map((change) =>
+        apiClient.put(`/dynamic-form/update-field`, {
+          tableName: tableConfig.selectedTable,
+          keyField: primaryKeyField,
+          keyValue: change.primaryKeyValue,
+          updateField: change.columnName,
+          updateValue: change.newValue,
+        })
+      );
+
+      await Promise.all(savePromises);
+
+      // 상태 초기화
+      setPendingChanges(new Map());
+      setLocalEditedData({});
+      setRefreshTrigger((prev) => prev + 1);
+
+      toast.success(`${pendingChanges.size}개의 변경사항이 저장되었습니다.`);
+      console.log("✅ 배치 저장 완료:", pendingChanges.size, "개");
+    } catch (error) {
+      console.error("❌ 배치 저장 실패:", error);
+      toast.error("저장 중 오류가 발생했습니다.");
+    }
+  }, [pendingChanges, tableConfig.selectedTable, tableConfig.primaryKey]);
+
+  // 🆕 배치 취소: 모든 변경사항 롤백
+  const cancelBatchChanges = useCallback(() => {
+    if (pendingChanges.size === 0) return;
+
+    setPendingChanges(new Map());
+    setLocalEditedData({});
+    toast.info("변경사항이 취소되었습니다.");
+    console.log("🔄 배치 편집 취소");
+  }, [pendingChanges.size]);
+
+  // 🆕 특정 셀이 수정되었는지 확인
+  const isCellModified = useCallback((rowIndex: number, columnName: string) => {
+    return pendingChanges.has(`${rowIndex}-${columnName}`);
+  }, [pendingChanges]);
+
+  // 🆕 수정된 셀 값 가져오기 (로컬 수정 데이터 우선)
+  const getDisplayValue = useCallback((row: any, rowIndex: number, columnName: string) => {
+    const localValue = localEditedData[rowIndex]?.[columnName];
+    if (localValue !== undefined) {
+      return localValue;
+    }
+    return row[columnName];
+  }, [localEditedData]);
+
+  // 🆕 유효성 검사 함수
+  const validateValue = useCallback((
+    value: any, 
+    columnName: string, 
+    row: any
+  ): string | null => {
+    // tableConfig.validation에서 컬럼별 규칙 가져오기
+    const rules = (tableConfig as any).validation?.[columnName] as ValidationRule | undefined;
+    if (!rules) return null;
+
+    const strValue = value !== null && value !== undefined ? String(value) : "";
+    const numValue = parseFloat(strValue);
+
+    // 필수 검사
+    if (rules.required && (!strValue || strValue.trim() === "")) {
+      return rules.customMessage || "필수 입력 항목입니다.";
+    }
+
+    // 값이 비어있으면 다른 검사 스킵 (required가 아닌 경우)
+    if (!strValue || strValue.trim() === "") return null;
+
+    // 최소값 검사
+    if (rules.min !== undefined && !isNaN(numValue) && numValue < rules.min) {
+      return rules.customMessage || `최소값은 ${rules.min}입니다.`;
+    }
+
+    // 최대값 검사
+    if (rules.max !== undefined && !isNaN(numValue) && numValue > rules.max) {
+      return rules.customMessage || `최대값은 ${rules.max}입니다.`;
+    }
+
+    // 최소 길이 검사
+    if (rules.minLength !== undefined && strValue.length < rules.minLength) {
+      return rules.customMessage || `최소 ${rules.minLength}자 이상 입력해주세요.`;
+    }
+
+    // 최대 길이 검사
+    if (rules.maxLength !== undefined && strValue.length > rules.maxLength) {
+      return rules.customMessage || `최대 ${rules.maxLength}자까지 입력 가능합니다.`;
+    }
+
+    // 패턴 검사
+    if (rules.pattern && !rules.pattern.test(strValue)) {
+      return rules.customMessage || "입력 형식이 올바르지 않습니다.";
+    }
+
+    // 커스텀 검증
+    if (rules.validate) {
+      const customError = rules.validate(value, row);
+      if (customError) return customError;
+    }
+
+    return null;
+  }, [tableConfig]);
+
+  // 🆕 셀 유효성 에러 여부 확인
+  const getCellValidationError = useCallback((rowIndex: number, columnName: string): string | null => {
+    return validationErrors.get(`${rowIndex}-${columnName}`) || null;
+  }, [validationErrors]);
+
+  // 🆕 유효성 검사 에러 설정
+  const setCellValidationError = useCallback((rowIndex: number, columnName: string, error: string | null) => {
+    setValidationErrors((prev) => {
+      const newMap = new Map(prev);
+      const key = `${rowIndex}-${columnName}`;
+      if (error) {
+        newMap.set(key, error);
+      } else {
+        newMap.delete(key);
+      }
+      return newMap;
+    });
+  }, []);
+
+  // 🆕 모든 유효성 에러 초기화
+  const clearAllValidationErrors = useCallback(() => {
+    setValidationErrors(new Map());
+  }, []);
+
+  // 🆕 Excel 내보내기 함수
+  const exportToExcel = useCallback((exportAll: boolean = true) => {
+    try {
+      // 내보낼 데이터 선택 (선택된 행만 또는 전체)
+      let exportData: any[];
+      if (exportAll) {
+        exportData = filteredData;
+      } else {
+        // 선택된 행만 내보내기
+        exportData = filteredData.filter((row, index) => {
+          const rowKey = getRowKey(row, index);
+          return selectedRows.has(rowKey);
+        });
+      }
+
+      if (exportData.length === 0) {
+        toast.error(exportAll ? "내보낼 데이터가 없습니다." : "선택된 행이 없습니다.");
+        return;
+      }
+
+      // 컬럼 정보 가져오기 (체크박스 제외)
+      const exportColumns = visibleColumns.filter((col) => col.columnName !== "__checkbox__");
+      
+      // 헤더 행 생성
+      const headers = exportColumns.map((col) => columnLabels[col.columnName] || col.columnName);
+      
+      // 데이터 행 생성
+      const rows = exportData.map((row) => {
+        return exportColumns.map((col) => {
+          const mappedColumnName = joinColumnMapping[col.columnName] || col.columnName;
+          const value = row[mappedColumnName];
+          
+          // 카테고리 매핑된 값 처리
+          if (categoryMappings[col.columnName] && value !== null && value !== undefined) {
+            const mapping = categoryMappings[col.columnName][String(value)];
+            if (mapping) {
+              return mapping.label;
+            }
+          }
+          
+          // null/undefined 처리
+          if (value === null || value === undefined) {
+            return "";
+          }
+          
+          return value;
+        });
+      });
+
+      // 워크시트 생성
+      const wsData = [headers, ...rows];
+      const ws = XLSX.utils.aoa_to_sheet(wsData);
+
+      // 컬럼 너비 자동 조정
+      const colWidths = exportColumns.map((col, idx) => {
+        const headerLength = headers[idx]?.length || 10;
+        const maxDataLength = Math.max(
+          ...rows.map((row) => String(row[idx] ?? "").length)
+        );
+        return { wch: Math.min(Math.max(headerLength, maxDataLength) + 2, 50) };
+      });
+      ws["!cols"] = colWidths;
+
+      // 워크북 생성
+      const wb = XLSX.utils.book_new();
+      XLSX.utils.book_append_sheet(wb, ws, tableLabel || "데이터");
+
+      // 파일명 생성
+      const fileName = `${tableLabel || tableConfig.selectedTable || "export"}_${new Date().toISOString().split("T")[0]}.xlsx`;
+
+      // 파일 다운로드
+      XLSX.writeFile(wb, fileName);
+
+      toast.success(`${exportData.length}개 행이 Excel로 내보내기 되었습니다.`);
+      console.log("✅ Excel 내보내기 완료:", fileName);
+    } catch (error) {
+      console.error("❌ Excel 내보내기 실패:", error);
+      toast.error("Excel 내보내기 중 오류가 발생했습니다.");
+    }
+  }, [filteredData, selectedRows, visibleColumns, columnLabels, joinColumnMapping, categoryMappings, tableLabel, tableConfig.selectedTable, getRowKey]);
+
+  // 🆕 행 확장/축소 토글
+  const toggleRowExpand = useCallback(async (rowKey: string, row: any) => {
+    setExpandedRows((prev) => {
+      const newSet = new Set(prev);
+      if (newSet.has(rowKey)) {
+        newSet.delete(rowKey);
+      } else {
+        newSet.add(rowKey);
+        // 상세 데이터 로딩 (아직 없는 경우)
+        if (!detailData[rowKey] && (tableConfig as any).masterDetail?.detailTable) {
+          loadDetailData(rowKey, row);
+        }
+      }
+      return newSet;
+    });
+  }, [detailData, tableConfig]);
+
+  // 🆕 상세 데이터 로딩
+  const loadDetailData = useCallback(async (rowKey: string, row: any) => {
+    const masterDetailConfig = (tableConfig as any).masterDetail;
+    if (!masterDetailConfig?.detailTable) return;
+
+    try {
+      const { apiClient } = await import("@/lib/api/client");
+      
+      // masterKey 값 가져오기
+      const masterKeyField = masterDetailConfig.masterKey || "id";
+      const masterKeyValue = row[masterKeyField];
+      
+      // 상세 테이블에서 데이터 조회
+      const response = await apiClient.post(`/table-management/tables/${masterDetailConfig.detailTable}/data`, {
+        page: 1,
+        size: 100,
+        search: {
+          [masterDetailConfig.detailKey || masterKeyField]: masterKeyValue,
+        },
+        autoFilter: true,
+      });
+
+      const details = response.data?.data?.data || [];
+      
+      setDetailData((prev) => ({
+        ...prev,
+        [rowKey]: details,
+      }));
+      
+      console.log("✅ 상세 데이터 로딩 완료:", { rowKey, count: details.length });
+    } catch (error) {
+      console.error("❌ 상세 데이터 로딩 실패:", error);
+      setDetailData((prev) => ({
+        ...prev,
+        [rowKey]: [],
+      }));
+    }
+  }, [tableConfig]);
+
+  // 🆕 모든 행 확장/축소
+  const expandAllRows = useCallback(() => {
+    if (expandedRows.size === filteredData.length) {
+      // 모두 축소
+      setExpandedRows(new Set());
+    } else {
+      // 모두 확장
+      const allKeys = new Set(filteredData.map((row, index) => getRowKey(row, index)));
+      setExpandedRows(allKeys);
+    }
+  }, [expandedRows.size, filteredData, getRowKey]);
+
+  // 🆕 Multi-Level Headers: Band 정보 계산
+  const columnBandsInfo = useMemo(() => {
+    const bands = (tableConfig as any).columnBands as ColumnBand[] | undefined;
+    if (!bands || bands.length === 0) return null;
+
+    // 각 band의 시작 인덱스와 colspan 계산
+    const bandInfo = bands.map((band) => {
+      const visibleBandColumns = band.columns.filter((colName) =>
+        visibleColumns.some((vc) => vc.columnName === colName)
+      );
+      
+      const startIndex = visibleColumns.findIndex(
+        (vc) => visibleBandColumns.includes(vc.columnName)
+      );
+
+      return {
+        caption: band.caption,
+        columns: visibleBandColumns,
+        colSpan: visibleBandColumns.length,
+        startIndex,
+      };
+    }).filter((b) => b.colSpan > 0);
+
+    // Band에 포함되지 않은 컬럼 찾기
+    const bandedColumns = new Set(bands.flatMap((b) => b.columns));
+    const unbandedColumns = visibleColumns
+      .map((vc, idx) => ({ columnName: vc.columnName, index: idx }))
+      .filter((c) => !bandedColumns.has(c.columnName));
+
+    return {
+      bands: bandInfo,
+      unbandedColumns,
+      hasBands: bandInfo.length > 0,
+    };
+  }, [tableConfig, visibleColumns]);
+
+  // 🆕 Cascading Lookups: 연계 드롭다운 옵션 로딩
+  const loadCascadingOptions = useCallback(async (
+    columnName: string,
+    parentColumnName: string,
+    parentValue: any
+  ) => {
+    const cascadingConfig = (tableConfig as any).cascadingLookups?.[columnName];
+    if (!cascadingConfig) return;
+
+    const cacheKey = `${columnName}_${parentValue}`;
+    
+    // 이미 로딩 중이면 스킵
+    if (loadingCascading[cacheKey]) return;
+    
+    // 이미 캐시된 데이터가 있으면 스킵
+    if (cascadingOptions[cacheKey]) return;
+
+    setLoadingCascading((prev) => ({ ...prev, [cacheKey]: true }));
+
+    try {
+      const { apiClient } = await import("@/lib/api/client");
+      
+      // API에서 연계 옵션 로딩
+      const response = await apiClient.post(`/table-management/tables/${cascadingConfig.sourceTable}/data`, {
+        page: 1,
+        size: 1000,
+        search: {
+          [cascadingConfig.parentKeyField || parentColumnName]: parentValue,
+        },
+        autoFilter: true,
+      });
+
+      const items = response.data?.data?.data || [];
+      const options = items.map((item: any) => ({
+        value: item[cascadingConfig.valueField || "id"],
+        label: item[cascadingConfig.labelField || "name"],
+      }));
+
+      setCascadingOptions((prev) => ({
+        ...prev,
+        [cacheKey]: options,
+      }));
+
+      console.log("✅ Cascading options 로딩 완료:", { columnName, parentValue, count: options.length });
+    } catch (error) {
+      console.error("❌ Cascading options 로딩 실패:", error);
+      setCascadingOptions((prev) => ({
+        ...prev,
+        [cacheKey]: [],
+      }));
+    } finally {
+      setLoadingCascading((prev) => ({ ...prev, [cacheKey]: false }));
+    }
+  }, [tableConfig, cascadingOptions, loadingCascading]);
+
+  // 🆕 Cascading Lookups: 특정 컬럼의 옵션 가져오기
+  const getCascadingOptions = useCallback((columnName: string, row: any): { value: string; label: string }[] => {
+    const cascadingConfig = (tableConfig as any).cascadingLookups?.[columnName];
+    if (!cascadingConfig) return [];
+
+    const parentValue = row[cascadingConfig.parentColumn];
+    if (parentValue === undefined || parentValue === null) return [];
+
+    const cacheKey = `${columnName}_${parentValue}`;
+    return cascadingOptions[cacheKey] || [];
+  }, [tableConfig, cascadingOptions]);
+
+  // 🆕 Virtual Scrolling: 보이는 행 범위 계산
+  const virtualScrollInfo = useMemo(() => {
+    if (!isVirtualScrollEnabled || filteredData.length === 0) {
+      return {
+        startIndex: 0,
+        endIndex: filteredData.length,
+        visibleData: filteredData,
+        topSpacerHeight: 0,
+        bottomSpacerHeight: 0,
+        totalHeight: filteredData.length * ROW_HEIGHT,
+      };
+    }
+
+    const containerHeight = scrollContainerRef.current?.clientHeight || 600;
+    const totalRows = filteredData.length;
+    const totalHeight = totalRows * ROW_HEIGHT;
+
+    // 현재 보이는 행 범위 계산
+    const startIndex = Math.max(0, Math.floor(scrollTop / ROW_HEIGHT) - OVERSCAN);
+    const visibleRowCount = Math.ceil(containerHeight / ROW_HEIGHT) + OVERSCAN * 2;
+    const endIndex = Math.min(totalRows, startIndex + visibleRowCount);
+
+    return {
+      startIndex,
+      endIndex,
+      visibleData: filteredData.slice(startIndex, endIndex),
+      topSpacerHeight: startIndex * ROW_HEIGHT,
+      bottomSpacerHeight: (totalRows - endIndex) * ROW_HEIGHT,
+      totalHeight,
+    };
+  }, [isVirtualScrollEnabled, filteredData, scrollTop, ROW_HEIGHT, OVERSCAN]);
+
+  // 🆕 Virtual Scrolling: 스크롤 핸들러
+  const handleVirtualScroll = useCallback((e: React.UIEvent<HTMLDivElement>) => {
+    if (!isVirtualScrollEnabled) return;
+    setScrollTop(e.currentTarget.scrollTop);
+  }, [isVirtualScrollEnabled]);
+
+  // 🆕 State Persistence: 통합 상태 저장
+  const saveTableState = useCallback(() => {
+    if (!tableStateKey) return;
+
+    const state = {
+      columnWidths,
+      columnOrder,
+      sortColumn,
+      sortDirection,
+      groupByColumns,
+      frozenColumns,
+      showGridLines,
+      headerFilters: Object.fromEntries(
+        Object.entries(headerFilters).map(([key, set]) => [key, Array.from(set as Set<string>)])
+      ),
+      pageSize: localPageSize,
+      timestamp: Date.now(),
+    };
+
+    try {
+      localStorage.setItem(tableStateKey, JSON.stringify(state));
+      console.log("✅ 테이블 상태 저장:", tableStateKey);
+    } catch (error) {
+      console.error("❌ 테이블 상태 저장 실패:", error);
+    }
+  }, [tableStateKey, columnWidths, columnOrder, sortColumn, sortDirection, groupByColumns, frozenColumns, showGridLines, headerFilters, localPageSize]);
+
+  // 🆕 State Persistence: 통합 상태 복원
+  const loadTableState = useCallback(() => {
+    if (!tableStateKey) return;
+
+    try {
+      const saved = localStorage.getItem(tableStateKey);
+      if (!saved) return;
+
+      const state = JSON.parse(saved);
+      
+      if (state.columnWidths) setColumnWidths(state.columnWidths);
+      if (state.columnOrder) setColumnOrder(state.columnOrder);
+      if (state.sortColumn !== undefined) setSortColumn(state.sortColumn);
+      if (state.sortDirection) setSortDirection(state.sortDirection);
+      if (state.groupByColumns) setGroupByColumns(state.groupByColumns);
+      if (state.frozenColumns) setFrozenColumns(state.frozenColumns);
+      if (state.showGridLines !== undefined) setShowGridLines(state.showGridLines);
+      if (state.headerFilters) {
+        const filters: Record<string, Set<string>> = {};
+        Object.entries(state.headerFilters).forEach(([key, values]) => {
+          filters[key] = new Set(values as string[]);
+        });
+        setHeaderFilters(filters);
+      }
+
+      console.log("✅ 테이블 상태 복원:", tableStateKey);
+    } catch (error) {
+      console.error("❌ 테이블 상태 복원 실패:", error);
+    }
+  }, [tableStateKey]);
+
+  // 🆕 State Persistence: 상태 초기화
+  const resetTableState = useCallback(() => {
+    if (!tableStateKey) return;
+
+    try {
+      localStorage.removeItem(tableStateKey);
+      setColumnWidths({});
+      setColumnOrder([]);
+      setSortColumn(null);
+      setSortDirection("asc");
+      setGroupByColumns([]);
+      setFrozenColumns([]);
+      setShowGridLines(true);
+      setHeaderFilters({});
+      toast.success("테이블 설정이 초기화되었습니다.");
+      console.log("✅ 테이블 상태 초기화:", tableStateKey);
+    } catch (error) {
+      console.error("❌ 테이블 상태 초기화 실패:", error);
+    }
+  }, [tableStateKey]);
+
+  // 🆕 State Persistence: 컴포넌트 마운트 시 상태 복원
+  useEffect(() => {
+    loadTableState();
+  }, [tableStateKey]); // loadTableState는 의존성에서 제외 (무한 루프 방지)
+
+  // 🆕 Real-Time Updates: WebSocket 연결
+  const connectWebSocket = useCallback(() => {
+    if (!isRealTimeEnabled || !tableConfig.selectedTable) return;
+
+    const wsUrl = (tableConfig as any).wsUrl || 
+      `${window.location.protocol === "https:" ? "wss:" : "ws:"}//${window.location.host}/ws/table/${tableConfig.selectedTable}`;
+
+    try {
+      setWsConnectionStatus("connecting");
+      wsRef.current = new WebSocket(wsUrl);
+
+      wsRef.current.onopen = () => {
+        setWsConnectionStatus("connected");
+        console.log("✅ WebSocket 연결됨:", tableConfig.selectedTable);
+      };
+
+      wsRef.current.onmessage = (event) => {
+        try {
+          const message = JSON.parse(event.data);
+          console.log("📨 WebSocket 메시지 수신:", message);
+
+          switch (message.type) {
+            case "insert":
+              // 새 데이터 추가
+              setRefreshTrigger((prev) => prev + 1);
+              toast.info("새 데이터가 추가되었습니다.");
+              break;
+            case "update":
+              // 데이터 업데이트
+              setRefreshTrigger((prev) => prev + 1);
+              toast.info("데이터가 업데이트되었습니다.");
+              break;
+            case "delete":
+              // 데이터 삭제
+              setRefreshTrigger((prev) => prev + 1);
+              toast.info("데이터가 삭제되었습니다.");
+              break;
+            case "refresh":
+              // 전체 새로고침
+              setRefreshTrigger((prev) => prev + 1);
+              break;
+            default:
+              console.log("알 수 없는 메시지 타입:", message.type);
+          }
+        } catch (error) {
+          console.error("WebSocket 메시지 파싱 오류:", error);
+        }
+      };
+
+      wsRef.current.onclose = () => {
+        setWsConnectionStatus("disconnected");
+        console.log("🔌 WebSocket 연결 종료");
+        
+        // 자동 재연결 (5초 후)
+        if (isRealTimeEnabled) {
+          reconnectTimeoutRef.current = setTimeout(() => {
+            console.log("🔄 WebSocket 재연결 시도...");
+            connectWebSocket();
+          }, 5000);
+        }
+      };
+
+      wsRef.current.onerror = (error) => {
+        console.error("❌ WebSocket 오류:", error);
+        setWsConnectionStatus("disconnected");
+      };
+    } catch (error) {
+      console.error("WebSocket 연결 실패:", error);
+      setWsConnectionStatus("disconnected");
+    }
+  }, [isRealTimeEnabled, tableConfig.selectedTable]);
+
+  // 🆕 Real-Time Updates: 연결 관리
+  useEffect(() => {
+    if (isRealTimeEnabled) {
+      connectWebSocket();
+    }
+
+    return () => {
+      // 정리
+      if (reconnectTimeoutRef.current) {
+        clearTimeout(reconnectTimeoutRef.current);
+      }
+      if (wsRef.current) {
+        wsRef.current.close();
+        wsRef.current = null;
+      }
+    };
+  }, [isRealTimeEnabled, tableConfig.selectedTable]);
+
+  // 🆕 State Persistence: 상태 변경 시 자동 저장 (디바운스)
+  useEffect(() => {
+    const timeoutId = setTimeout(() => {
+      saveTableState();
+    }, 1000); // 1초 후 저장 (디바운스)
+
+    return () => clearTimeout(timeoutId);
+  }, [columnWidths, columnOrder, sortColumn, sortDirection, groupByColumns, frozenColumns, showGridLines, headerFilters]);
+
+  // 🆕 Clipboard: 선택된 데이터 복사
+  const handleCopy = useCallback(async () => {
+    try {
+      // 선택된 행 데이터 가져오기
+      let copyData: any[];
+      
+      if (selectedRows.size > 0) {
+        // 선택된 행만
+        copyData = filteredData.filter((row, index) => {
+          const rowKey = getRowKey(row, index);
+          return selectedRows.has(rowKey);
+        });
+      } else if (focusedCell) {
+        // 포커스된 셀만
+        const row = filteredData[focusedCell.rowIndex];
+        if (row) {
+          const column = visibleColumns[focusedCell.colIndex];
+          const value = row[column?.columnName];
+          await navigator.clipboard.writeText(String(value ?? ""));
+          toast.success("셀 복사됨");
+          return;
+        }
+        return;
+      } else {
+        toast.info("복사할 데이터를 선택해주세요.");
+        return;
+      }
+
+      // TSV 형식으로 변환 (탭으로 구분)
+      const exportColumns = visibleColumns.filter((c) => c.columnName !== "__checkbox__");
+      const headers = exportColumns.map((c) => columnLabels[c.columnName] || c.columnName);
+      const rows = copyData.map((row) =>
+        exportColumns.map((c) => {
+          const value = row[c.columnName];
+          return value !== null && value !== undefined ? String(value).replace(/\t/g, " ").replace(/\n/g, " ") : "";
+        }).join("\t")
+      );
+
+      const tsvContent = [headers.join("\t"), ...rows].join("\n");
+      await navigator.clipboard.writeText(tsvContent);
+      
+      toast.success(`${copyData.length}행 복사됨`);
+      console.log("✅ 클립보드 복사:", copyData.length, "행");
+    } catch (error) {
+      console.error("❌ 클립보드 복사 실패:", error);
+      toast.error("복사 실패");
+    }
+  }, [selectedRows, filteredData, focusedCell, visibleColumns, columnLabels, getRowKey]);
+
+  // 🆕 전체 행 선택
+  const handleSelectAllRows = useCallback(() => {
+    if (selectedRows.size === filteredData.length) {
+      // 전체 해제
+      setSelectedRows(new Set());
+      setIsAllSelected(false);
+    } else {
+      // 전체 선택
+      const allKeys = new Set(filteredData.map((row, index) => getRowKey(row, index)));
+      setSelectedRows(allKeys);
+      setIsAllSelected(true);
+    }
+  }, [selectedRows.size, filteredData, getRowKey]);
+
+  // 🆕 Context Menu: 열기
+  const handleContextMenu = useCallback((e: React.MouseEvent, rowIndex: number, colIndex: number, row: any) => {
+    e.preventDefault();
+    setContextMenu({
+      x: e.clientX,
+      y: e.clientY,
+      rowIndex,
+      colIndex,
+      row,
+    });
+  }, []);
+
+  // 🆕 Context Menu: 닫기
+  const closeContextMenu = useCallback(() => {
+    setContextMenu(null);
+  }, []);
+
+  // 🆕 Context Menu: 외부 클릭 시 닫기
+  useEffect(() => {
+    if (contextMenu) {
+      const handleClick = () => closeContextMenu();
+      document.addEventListener("click", handleClick);
+      return () => document.removeEventListener("click", handleClick);
+    }
+  }, [contextMenu, closeContextMenu]);
+
+  // 🆕 Search Panel: 통합 검색 실행
+  const executeGlobalSearch = useCallback((term: string) => {
+    if (!term.trim()) {
+      setSearchHighlights(new Set());
+      return;
+    }
+
+    const lowerTerm = term.toLowerCase();
+    const highlights = new Set<string>();
+
+    filteredData.forEach((row, rowIndex) => {
+      visibleColumns.forEach((col, colIndex) => {
+        const value = row[col.columnName];
+        if (value !== null && value !== undefined) {
+          const strValue = String(value).toLowerCase();
+          if (strValue.includes(lowerTerm)) {
+            highlights.add(`${rowIndex}-${colIndex}`);
+          }
+        }
+      });
+    });
+
+    setSearchHighlights(highlights);
+    
+    // 첫 번째 검색 결과로 포커스 이동
+    if (highlights.size > 0) {
+      const firstHighlight = Array.from(highlights)[0];
+      const [rowIdx, colIdx] = firstHighlight.split("-").map(Number);
+      setFocusedCell({ rowIndex: rowIdx, colIndex: colIdx });
+      toast.success(`${highlights.size}개 검색 결과`);
+    } else {
+      toast.info("검색 결과가 없습니다");
+    }
+  }, [filteredData, visibleColumns]);
+
+  // 🆕 Search Panel: 다음 검색 결과로 이동
+  const goToNextSearchResult = useCallback(() => {
+    if (searchHighlights.size === 0) return;
+
+    const highlightArray = Array.from(searchHighlights).sort((a, b) => {
+      const [aRow, aCol] = a.split("-").map(Number);
+      const [bRow, bCol] = b.split("-").map(Number);
+      if (aRow !== bRow) return aRow - bRow;
+      return aCol - bCol;
+    });
+
+    if (!focusedCell) {
+      const [rowIdx, colIdx] = highlightArray[0].split("-").map(Number);
+      setFocusedCell({ rowIndex: rowIdx, colIndex: colIdx });
+      return;
+    }
+
+    const currentKey = `${focusedCell.rowIndex}-${focusedCell.colIndex}`;
+    const currentIndex = highlightArray.indexOf(currentKey);
+    const nextIndex = (currentIndex + 1) % highlightArray.length;
+    const [rowIdx, colIdx] = highlightArray[nextIndex].split("-").map(Number);
+    setFocusedCell({ rowIndex: rowIdx, colIndex: colIdx });
+  }, [searchHighlights, focusedCell]);
+
+  // 🆕 Search Panel: 이전 검색 결과로 이동
+  const goToPrevSearchResult = useCallback(() => {
+    if (searchHighlights.size === 0) return;
+
+    const highlightArray = Array.from(searchHighlights).sort((a, b) => {
+      const [aRow, aCol] = a.split("-").map(Number);
+      const [bRow, bCol] = b.split("-").map(Number);
+      if (aRow !== bRow) return aRow - bRow;
+      return aCol - bCol;
+    });
+
+    if (!focusedCell) {
+      const lastIdx = highlightArray.length - 1;
+      const [rowIdx, colIdx] = highlightArray[lastIdx].split("-").map(Number);
+      setFocusedCell({ rowIndex: rowIdx, colIndex: colIdx });
+      return;
+    }
+
+    const currentKey = `${focusedCell.rowIndex}-${focusedCell.colIndex}`;
+    const currentIndex = highlightArray.indexOf(currentKey);
+    const prevIndex = currentIndex <= 0 ? highlightArray.length - 1 : currentIndex - 1;
+    const [rowIdx, colIdx] = highlightArray[prevIndex].split("-").map(Number);
+    setFocusedCell({ rowIndex: rowIdx, colIndex: colIdx });
+  }, [searchHighlights, focusedCell]);
+
+  // 🆕 Search Panel: 검색 초기화
+  const clearGlobalSearch = useCallback(() => {
+    setGlobalSearchTerm("");
+    setSearchHighlights(new Set());
+    setIsSearchPanelOpen(false);
+  }, []);
+
+  // 🆕 Filter Builder: 조건 추가
+  const addFilterCondition = useCallback((groupId: string, defaultColumn?: string) => {
+    setFilterGroups((prev) =>
+      prev.map((group) =>
+        group.id === groupId
+          ? {
+              ...group,
+              conditions: [
+                ...group.conditions,
+                {
+                  id: `cond-${Date.now()}`,
+                  column: defaultColumn || "",
+                  operator: "contains" as const,
+                  value: "",
+                },
+              ],
+            }
+          : group
+      )
+    );
+  }, []);
+
+  // 🆕 Filter Builder: 조건 삭제
+  const removeFilterCondition = useCallback((groupId: string, conditionId: string) => {
+    setFilterGroups((prev) =>
+      prev.map((group) =>
+        group.id === groupId
+          ? {
+              ...group,
+              conditions: group.conditions.filter((c) => c.id !== conditionId),
+            }
+          : group
+      )
+    );
+  }, []);
+
+  // 🆕 Filter Builder: 조건 업데이트
+  const updateFilterCondition = useCallback(
+    (groupId: string, conditionId: string, field: keyof FilterCondition, value: string) => {
+      setFilterGroups((prev) =>
+        prev.map((group) =>
+          group.id === groupId
+            ? {
+                ...group,
+                conditions: group.conditions.map((c) =>
+                  c.id === conditionId ? { ...c, [field]: value } : c
+                ),
+              }
+            : group
+        )
+      );
+    },
+    []
+  );
+
+  // 🆕 Filter Builder: 그룹 추가
+  const addFilterGroup = useCallback((defaultColumn?: string) => {
+    setFilterGroups((prev) => [
+      ...prev,
+      {
+        id: `group-${Date.now()}`,
+        logic: "AND" as const,
+        conditions: [
+          {
+            id: `cond-${Date.now()}`,
+            column: defaultColumn || "",
+            operator: "contains" as const,
+            value: "",
+          },
+        ],
+      },
+    ]);
+  }, []);
+
+  // 🆕 Filter Builder: 그룹 삭제
+  const removeFilterGroup = useCallback((groupId: string) => {
+    setFilterGroups((prev) => prev.filter((g) => g.id !== groupId));
+  }, []);
+
+  // 🆕 Filter Builder: 그룹 로직 변경
+  const updateGroupLogic = useCallback((groupId: string, logic: "AND" | "OR") => {
+    setFilterGroups((prev) =>
+      prev.map((group) => (group.id === groupId ? { ...group, logic } : group))
+    );
+  }, []);
+
+  // 🆕 Filter Builder: 필터 적용
+  const applyFilterBuilder = useCallback(() => {
+    // 유효한 조건 개수 계산
+    let validConditions = 0;
+    filterGroups.forEach((group) => {
+      group.conditions.forEach((cond) => {
+        if (cond.column && (cond.operator === "isEmpty" || cond.operator === "isNotEmpty" || cond.value)) {
+          validConditions++;
+        }
+      });
+    });
+    setActiveFilterCount(validConditions);
+    setIsFilterBuilderOpen(false);
+    toast.success(`${validConditions}개 필터 조건 적용됨`);
+  }, [filterGroups]);
+
+  // 🆕 Filter Builder: 필터 초기화
+  const clearFilterBuilder = useCallback(() => {
+    setFilterGroups([]);
+    setActiveFilterCount(0);
+    toast.info("필터 초기화됨");
+  }, []);
+
+  // 🆕 Filter Builder: 조건 평가 함수
+  const evaluateCondition = useCallback((value: any, condition: FilterCondition): boolean => {
+    const strValue = value !== null && value !== undefined ? String(value).toLowerCase() : "";
+    const condValue = condition.value.toLowerCase();
+
+    switch (condition.operator) {
+      case "equals":
+        return strValue === condValue;
+      case "notEquals":
+        return strValue !== condValue;
+      case "contains":
+        return strValue.includes(condValue);
+      case "notContains":
+        return !strValue.includes(condValue);
+      case "startsWith":
+        return strValue.startsWith(condValue);
+      case "endsWith":
+        return strValue.endsWith(condValue);
+      case "greaterThan":
+        return parseFloat(strValue) > parseFloat(condValue);
+      case "lessThan":
+        return parseFloat(strValue) < parseFloat(condValue);
+      case "greaterOrEqual":
+        return parseFloat(strValue) >= parseFloat(condValue);
+      case "lessOrEqual":
+        return parseFloat(strValue) <= parseFloat(condValue);
+      case "isEmpty":
+        return strValue === "" || value === null || value === undefined;
+      case "isNotEmpty":
+        return strValue !== "" && value !== null && value !== undefined;
+      default:
+        return true;
+    }
+  }, []);
+
+  // 🆕 Filter Builder: 행이 필터 조건을 만족하는지 확인
+  const rowPassesFilterBuilder = useCallback(
+    (row: any): boolean => {
+      if (filterGroups.length === 0) return true;
+
+      // 모든 그룹이 AND로 연결됨 (그룹 간)
+      return filterGroups.every((group) => {
+        const validConditions = group.conditions.filter(
+          (c) => c.column && (c.operator === "isEmpty" || c.operator === "isNotEmpty" || c.value)
+        );
+        if (validConditions.length === 0) return true;
+
+        if (group.logic === "AND") {
+          return validConditions.every((cond) => evaluateCondition(row[cond.column], cond));
+        } else {
+          return validConditions.some((cond) => evaluateCondition(row[cond.column], cond));
+        }
+      });
+    },
+    [filterGroups, evaluateCondition]
+  );
+
+  // 🆕 컬럼 드래그 시작
+  const handleColumnDragStart = useCallback((e: React.DragEvent<HTMLTableCellElement>, index: number) => {
+    if (!isColumnDragEnabled) return;
+    
+    setDraggedColumnIndex(index);
+    e.dataTransfer.effectAllowed = "move";
+    e.dataTransfer.setData("text/plain", `col-${index}`);
+  }, [isColumnDragEnabled]);
+
+  // 🆕 컬럼 드래그 오버
+  const handleColumnDragOver = useCallback((e: React.DragEvent<HTMLTableCellElement>, index: number) => {
+    if (!isColumnDragEnabled || draggedColumnIndex === null) return;
+    
+    e.preventDefault();
+    e.dataTransfer.dropEffect = "move";
+    
+    if (index !== draggedColumnIndex) {
+      setDropTargetColumnIndex(index);
+    }
+  }, [isColumnDragEnabled, draggedColumnIndex]);
+
+  // 🆕 컬럼 드래그 종료
+  const handleColumnDragEnd = useCallback(() => {
+    setDraggedColumnIndex(null);
+    setDropTargetColumnIndex(null);
+  }, []);
+
+  // 🆕 컬럼 드롭
+  const handleColumnDrop = useCallback((e: React.DragEvent<HTMLTableCellElement>, targetIndex: number) => {
+    e.preventDefault();
+    
+    if (!isColumnDragEnabled || draggedColumnIndex === null || draggedColumnIndex === targetIndex) {
+      handleColumnDragEnd();
+      return;
+    }
+
+    // 컬럼 순서 변경
+    const newOrder = [...(columnOrder.length > 0 ? columnOrder : visibleColumns.map((c) => c.columnName))];
+    const [movedColumn] = newOrder.splice(draggedColumnIndex, 1);
+    newOrder.splice(targetIndex, 0, movedColumn);
+    
+    setColumnOrder(newOrder);
+    toast.info("컬럼 순서가 변경되었습니다.");
+    console.log("✅ 컬럼 순서 변경:", { from: draggedColumnIndex, to: targetIndex });
+
+    handleColumnDragEnd();
+  }, [isColumnDragEnabled, draggedColumnIndex, columnOrder, visibleColumns, handleColumnDragEnd]);
+
+  // 🆕 행 드래그 시작
+  const handleRowDragStart = useCallback((e: React.DragEvent<HTMLTableRowElement>, index: number) => {
+    if (!isDragEnabled) return;
+    
+    setDraggedRowIndex(index);
+    e.dataTransfer.effectAllowed = "move";
+    e.dataTransfer.setData("text/plain", String(index));
+    
+    // 드래그 이미지 설정 (반투명)
+    const dragImage = e.currentTarget.cloneNode(true) as HTMLElement;
+    dragImage.style.opacity = "0.5";
+    dragImage.style.position = "absolute";
+    dragImage.style.top = "-1000px";
+    document.body.appendChild(dragImage);
+    e.dataTransfer.setDragImage(dragImage, 0, 0);
+    setTimeout(() => document.body.removeChild(dragImage), 0);
+  }, [isDragEnabled]);
+
+  // 🆕 행 드래그 오버
+  const handleRowDragOver = useCallback((e: React.DragEvent<HTMLTableRowElement>, index: number) => {
+    if (!isDragEnabled || draggedRowIndex === null) return;
+    
+    e.preventDefault();
+    e.dataTransfer.dropEffect = "move";
+    
+    if (index !== draggedRowIndex) {
+      setDropTargetIndex(index);
+    }
+  }, [isDragEnabled, draggedRowIndex]);
+
+  // 🆕 행 드래그 종료
+  const handleRowDragEnd = useCallback(() => {
+    setDraggedRowIndex(null);
+    setDropTargetIndex(null);
+  }, []);
+
+  // 🆕 행 드롭
+  const handleRowDrop = useCallback(async (e: React.DragEvent<HTMLTableRowElement>, targetIndex: number) => {
+    e.preventDefault();
+    
+    if (!isDragEnabled || draggedRowIndex === null || draggedRowIndex === targetIndex) {
+      handleRowDragEnd();
+      return;
+    }
+
+    try {
+      // 로컬 데이터 재정렬
+      const newData = [...filteredData];
+      const [movedRow] = newData.splice(draggedRowIndex, 1);
+      newData.splice(targetIndex, 0, movedRow);
+
+      // 서버에 순서 저장 (order_index 필드가 있는 경우)
+      const orderField = (tableConfig as any).orderField || "order_index";
+      const hasOrderField = newData[0] && orderField in newData[0];
+      
+      if (hasOrderField && tableConfig.selectedTable) {
+        const { apiClient } = await import("@/lib/api/client");
+        const primaryKeyField = tableConfig.primaryKey || "id";
+        
+        // 영향받는 행들의 순서 업데이트
+        const updates = newData.map((row, idx) => ({
+          tableName: tableConfig.selectedTable,
+          keyField: primaryKeyField,
+          keyValue: row[primaryKeyField],
+          updateField: orderField,
+          updateValue: idx + 1,
+        }));
+
+        // 배치 업데이트
+        await Promise.all(
+          updates.map((update) =>
+            apiClient.put(`/dynamic-form/update-field`, update)
+          )
+        );
+
+        toast.success("순서가 변경되었습니다.");
+        setRefreshTrigger((prev) => prev + 1);
+      } else {
+        // 로컬에서만 순서 변경 (저장 안함)
+        toast.info("순서가 변경되었습니다. (로컬만)");
+      }
+
+      console.log("✅ 행 순서 변경:", { from: draggedRowIndex, to: targetIndex });
+    } catch (error) {
+      console.error("❌ 행 순서 변경 실패:", error);
+      toast.error("순서 변경 중 오류가 발생했습니다.");
+    }
+
+    handleRowDragEnd();
+  }, [isDragEnabled, draggedRowIndex, filteredData, tableConfig, handleRowDragEnd]);
+
+  // 🆕 PDF 내보내기 (인쇄용 HTML 생성)
+  const exportToPdf = useCallback((exportAll: boolean = true) => {
+    try {
+      // 내보낼 데이터 선택
+      let exportData: any[];
+      if (exportAll) {
+        exportData = filteredData;
+      } else {
+        exportData = filteredData.filter((row, index) => {
+          const rowKey = getRowKey(row, index);
+          return selectedRows.has(rowKey);
+        });
+      }
+
+      if (exportData.length === 0) {
+        toast.error(exportAll ? "내보낼 데이터가 없습니다." : "선택된 행이 없습니다.");
+        return;
+      }
+
+      // 컬럼 정보 가져오기 (체크박스 제외)
+      const exportColumns = visibleColumns.filter((col) => col.columnName !== "__checkbox__");
+      
+      // 인쇄용 HTML 생성
+      const printContent = `
+        <!DOCTYPE html>
+        <html>
+        <head>
+          <meta charset="utf-8">
+          <title>${tableLabel || tableConfig.selectedTable || "데이터"}</title>
+          <style>
+            * { margin: 0; padding: 0; box-sizing: border-box; }
+            body { font-family: 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif; padding: 20px; }
+            h1 { font-size: 18px; margin-bottom: 10px; text-align: center; }
+            .info { font-size: 12px; color: #666; margin-bottom: 20px; text-align: center; }
+            table { width: 100%; border-collapse: collapse; font-size: 11px; }
+            th, td { border: 1px solid #ddd; padding: 6px 8px; text-align: left; }
+            th { background-color: #f5f5f5; font-weight: 600; }
+            tr:nth-child(even) { background-color: #fafafa; }
+            .number { text-align: right; }
+            @media print {
+              body { padding: 0; }
+              table { page-break-inside: auto; }
+              tr { page-break-inside: avoid; page-break-after: auto; }
+            }
+          </style>
+        </head>
+        <body>
+          <h1>${tableLabel || tableConfig.selectedTable || "데이터 목록"}</h1>
+          <div class="info">
+            출력일: ${new Date().toLocaleDateString("ko-KR")} | 
+            총 ${exportData.length}건
+          </div>
+          <table>
+            <thead>
+              <tr>
+                ${exportColumns.map((col) => `<th>${columnLabels[col.columnName] || col.columnName}</th>`).join("")}
+              </tr>
+            </thead>
+            <tbody>
+              ${exportData.map((row) => `
+                <tr>
+                  ${exportColumns.map((col) => {
+                    const mappedColumnName = joinColumnMapping[col.columnName] || col.columnName;
+                    let value = row[mappedColumnName];
+                    
+                    // 카테고리 매핑
+                    if (categoryMappings[col.columnName] && value !== null && value !== undefined) {
+                      const mapping = categoryMappings[col.columnName][String(value)];
+                      if (mapping) value = mapping.label;
+                    }
+                    
+                    const meta = columnMeta[col.columnName];
+                    const inputType = meta?.inputType || (col as any).inputType;
+                    const isNumeric = inputType === "number" || inputType === "decimal";
+                    
+                    return `<td class="${isNumeric ? "number" : ""}">${value ?? ""}</td>`;
+                  }).join("")}
+                </tr>
+              `).join("")}
+            </tbody>
+          </table>
+        </body>
+        </html>
+      `;
+
+      // 새 창에서 인쇄
+      const printWindow = window.open("", "_blank");
+      if (printWindow) {
+        printWindow.document.write(printContent);
+        printWindow.document.close();
+        printWindow.onload = () => {
+          printWindow.print();
+        };
+        toast.success("인쇄 창이 열렸습니다.");
+      } else {
+        toast.error("팝업이 차단되었습니다. 팝업을 허용해주세요.");
+      }
+    } catch (error) {
+      console.error("❌ PDF 내보내기 실패:", error);
+      toast.error("PDF 내보내기 중 오류가 발생했습니다.");
+    }
+  }, [filteredData, selectedRows, visibleColumns, columnLabels, joinColumnMapping, categoryMappings, columnMeta, tableLabel, tableConfig.selectedTable, getRowKey]);
+
+  // 🆕 편집 중 키보드 핸들러 (간단 버전 - Tab 이동은 visibleColumns 정의 후 처리)
+  const handleEditKeyDown = useCallback((e: React.KeyboardEvent<HTMLInputElement>) => {
+    switch (e.key) {
+      case "Enter":
+        e.preventDefault();
+        saveEditing();
+        break;
+      case "Escape":
+        e.preventDefault();
+        cancelEditing();
+        break;
+      case "Tab":
+        e.preventDefault();
+        saveEditing();
+        // Tab 이동은 편집 저장 후 테이블 키보드 핸들러에서 처리
+        break;
+    }
+  }, [saveEditing, cancelEditing]);
+
+  // 🆕 편집 입력 필드가 나타나면 자동 포커스
+  useEffect(() => {
+    if (editingCell && editInputRef.current) {
+      editInputRef.current.focus();
+      // select()는 input 요소에서만 사용 가능 (select 요소에서는 사용 불가)
+      if (typeof editInputRef.current.select === "function") {
+        editInputRef.current.select();
+      }
+    }
+  }, [editingCell]);
+
+  // 🆕 포커스된 셀로 스크롤
+  useEffect(() => {
+    if (focusedCell && tableContainerRef.current) {
+      const focusedCellElement = tableContainerRef.current.querySelector(
+        `[data-row="${focusedCell.rowIndex}"][data-col="${focusedCell.colIndex}"]`
+      ) as HTMLElement;
+      
+      if (focusedCellElement) {
+        focusedCellElement.scrollIntoView({ block: "nearest", inline: "nearest" });
+      }
+    }
+  }, [focusedCell]);
+
   // 컬럼 드래그앤드롭 기능 제거됨 (테이블 옵션 모달에서 컬럼 순서 변경 가능)
 
   const handleClick = (e: React.MouseEvent) => {
@@ -1656,62 +3417,9 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
   };
 
   // ========================================
-  // 컬럼 관련
+  // 컬럼 관련 (visibleColumns는 상단에서 정의됨)
   // ========================================
 
-  const visibleColumns = useMemo(() => {
-    let cols = (tableConfig.columns || []).filter((col) => col.visible !== false);
-
-    // columnVisibility가 있으면 가시성 적용
-    if (columnVisibility.length > 0) {
-      cols = cols.filter((col) => {
-        const visibilityConfig = columnVisibility.find((cv) => cv.columnName === col.columnName);
-        return visibilityConfig ? visibilityConfig.visible : true;
-      });
-    }
-
-    // 체크박스 컬럼 (나중에 위치 결정)
-    // 기본값: enabled가 undefined면 true로 처리
-    let checkboxCol: ColumnConfig | null = null;
-    if (tableConfig.checkbox?.enabled ?? true) {
-      checkboxCol = {
-        columnName: "__checkbox__",
-        displayName: "",
-        visible: true,
-        sortable: false,
-        searchable: false,
-        width: 50,
-        align: "center",
-        order: -1,
-      };
-    }
-
-    // columnOrder 상태가 있으면 그 순서대로 정렬 (체크박스 제외)
-    if (columnOrder.length > 0) {
-      const orderedCols = columnOrder
-        .map((colName) => cols.find((c) => c.columnName === colName))
-        .filter(Boolean) as ColumnConfig[];
-
-      // columnOrder에 없는 새로운 컬럼들 추가
-      const remainingCols = cols.filter((c) => !columnOrder.includes(c.columnName));
-
-      cols = [...orderedCols, ...remainingCols];
-    } else {
-      cols = cols.sort((a, b) => (a.order || 0) - (b.order || 0));
-    }
-
-    // 체크박스를 맨 앞 또는 맨 뒤에 추가
-    if (checkboxCol) {
-      if (tableConfig.checkbox?.position === "right") {
-        cols = [...cols, checkboxCol];
-      } else {
-        cols = [checkboxCol, ...cols];
-      }
-    }
-
-    return cols;
-  }, [tableConfig.columns, tableConfig.checkbox, columnOrder, columnVisibility]);
-
   // 🆕 visibleColumns가 변경될 때마다 현재 컬럼 순서를 부모에게 전달
   const lastColumnOrderRef = useRef<string>("");
 
@@ -1782,6 +3490,231 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
     );
   }, [visibleColumns.length, visibleColumns.map((c) => c.columnName).join(",")]); // 의존성 단순화
 
+  // 🆕 키보드 네비게이션 핸들러 (visibleColumns 정의 후에 배치)
+  const handleTableKeyDown = useCallback((e: React.KeyboardEvent<HTMLDivElement>) => {
+    // 편집 중일 때는 테이블 키보드 핸들러 무시 (편집 입력에서 처리)
+    if (editingCell) return;
+    
+    if (!focusedCell || data.length === 0) return;
+
+    const { rowIndex, colIndex } = focusedCell;
+    const maxRowIndex = data.length - 1;
+    const maxColIndex = visibleColumns.length - 1;
+
+    switch (e.key) {
+      case "ArrowUp":
+        e.preventDefault();
+        if (rowIndex > 0) {
+          setFocusedCell({ rowIndex: rowIndex - 1, colIndex });
+        }
+        break;
+      case "ArrowDown":
+        e.preventDefault();
+        if (rowIndex < maxRowIndex) {
+          setFocusedCell({ rowIndex: rowIndex + 1, colIndex });
+        }
+        break;
+      case "ArrowLeft":
+        e.preventDefault();
+        if (colIndex > 0) {
+          setFocusedCell({ rowIndex, colIndex: colIndex - 1 });
+        }
+        break;
+      case "ArrowRight":
+        e.preventDefault();
+        if (colIndex < maxColIndex) {
+          setFocusedCell({ rowIndex, colIndex: colIndex + 1 });
+        }
+        break;
+      case "Enter":
+        e.preventDefault();
+        // 현재 행 선택/해제
+        const enterRow = data[rowIndex];
+        if (enterRow) {
+          const rowKey = getRowKey(enterRow, rowIndex);
+          const isCurrentlySelected = selectedRows.has(rowKey);
+          handleRowSelection(rowKey, !isCurrentlySelected);
+        }
+        break;
+      case " ": // Space
+        e.preventDefault();
+        // 체크박스 토글
+        const spaceRow = data[rowIndex];
+        if (spaceRow) {
+          const currentRowKey = getRowKey(spaceRow, rowIndex);
+          const isChecked = selectedRows.has(currentRowKey);
+          handleRowSelection(currentRowKey, !isChecked);
+        }
+        break;
+      case "F2":
+        // 🆕 F2: 편집 모드 진입
+        e.preventDefault();
+        {
+          const col = visibleColumns[colIndex];
+          if (col && col.columnName !== "__checkbox__") {
+            const row = data[rowIndex];
+            const mappedCol = joinColumnMapping[col.columnName] || col.columnName;
+            const val = row?.[mappedCol];
+            setEditingCell({ 
+              rowIndex, 
+              colIndex, 
+              columnName: col.columnName,
+              originalValue: val 
+            });
+            setEditingValue(val !== null && val !== undefined ? String(val) : "");
+          }
+        }
+        break;
+      case "b":
+      case "B":
+        // 🆕 Ctrl+B: 배치 편집 모드 토글
+        if (e.ctrlKey) {
+          e.preventDefault();
+          setEditMode((prev) => {
+            const newMode = prev === "immediate" ? "batch" : "immediate";
+            if (newMode === "immediate" && pendingChanges.size > 0) {
+              // 즉시 모드로 전환 시 저장되지 않은 변경사항 경고
+              const confirmDiscard = window.confirm(
+                `저장되지 않은 ${pendingChanges.size}개의 변경사항이 있습니다. 취소하시겠습니까?`
+              );
+              if (confirmDiscard) {
+                setPendingChanges(new Map());
+                setLocalEditedData({});
+                toast.info("배치 편집 모드 종료");
+                return "immediate";
+              }
+              return "batch";
+            }
+            toast.info(newMode === "batch" ? "배치 편집 모드 시작 (Ctrl+B로 종료)" : "즉시 저장 모드");
+            return newMode;
+          });
+        }
+        break;
+      case "s":
+      case "S":
+        // 🆕 Ctrl+S: 배치 저장
+        if (e.ctrlKey && editMode === "batch") {
+          e.preventDefault();
+          saveBatchChanges();
+        }
+        break;
+      case "c":
+      case "C":
+        // 🆕 Ctrl+C: 선택된 행/셀 복사
+        if (e.ctrlKey) {
+          e.preventDefault();
+          handleCopy();
+        }
+        break;
+      case "v":
+      case "V":
+        // 🆕 Ctrl+V: 붙여넣기 (편집 중인 경우만)
+        if (e.ctrlKey && editingCell) {
+          // 기본 동작 허용 (input에서 처리)
+        }
+        break;
+      case "a":
+      case "A":
+        // 🆕 Ctrl+A: 전체 선택
+        if (e.ctrlKey) {
+          e.preventDefault();
+          handleSelectAllRows();
+        }
+        break;
+      case "f":
+      case "F":
+        // 🆕 Ctrl+F: 통합 검색 패널 열기
+        if (e.ctrlKey) {
+          e.preventDefault();
+          setIsSearchPanelOpen(true);
+        }
+        break;
+      case "F3":
+        // 🆕 F3: 다음 검색 결과 / Shift+F3: 이전 검색 결과
+        e.preventDefault();
+        if (e.shiftKey) {
+          goToPrevSearchResult();
+        } else {
+          goToNextSearchResult();
+        }
+        break;
+      case "Home":
+        e.preventDefault();
+        if (e.ctrlKey) {
+          // Ctrl+Home: 첫 번째 셀로
+          setFocusedCell({ rowIndex: 0, colIndex: 0 });
+        } else {
+          // Home: 현재 행의 첫 번째 셀로
+          setFocusedCell({ rowIndex, colIndex: 0 });
+        }
+        break;
+      case "End":
+        e.preventDefault();
+        if (e.ctrlKey) {
+          // Ctrl+End: 마지막 셀로
+          setFocusedCell({ rowIndex: maxRowIndex, colIndex: maxColIndex });
+        } else {
+          // End: 현재 행의 마지막 셀로
+          setFocusedCell({ rowIndex, colIndex: maxColIndex });
+        }
+        break;
+      case "PageUp":
+        e.preventDefault();
+        // 10행 위로
+        setFocusedCell({ rowIndex: Math.max(0, rowIndex - 10), colIndex });
+        break;
+      case "PageDown":
+        e.preventDefault();
+        // 10행 아래로
+        setFocusedCell({ rowIndex: Math.min(maxRowIndex, rowIndex + 10), colIndex });
+        break;
+      case "Escape":
+        e.preventDefault();
+        // 포커스 해제
+        setFocusedCell(null);
+        break;
+      case "Tab":
+        e.preventDefault();
+        if (e.shiftKey) {
+          // Shift+Tab: 이전 셀
+          if (colIndex > 0) {
+            setFocusedCell({ rowIndex, colIndex: colIndex - 1 });
+          } else if (rowIndex > 0) {
+            setFocusedCell({ rowIndex: rowIndex - 1, colIndex: maxColIndex });
+          }
+        } else {
+          // Tab: 다음 셀
+          if (colIndex < maxColIndex) {
+            setFocusedCell({ rowIndex, colIndex: colIndex + 1 });
+          } else if (rowIndex < maxRowIndex) {
+            setFocusedCell({ rowIndex: rowIndex + 1, colIndex: 0 });
+          }
+        }
+        break;
+      default:
+        // 🆕 직접 타이핑으로 편집 모드 진입 (영문자, 숫자, 한글 등)
+        if (e.key.length === 1 && !e.ctrlKey && !e.altKey && !e.metaKey) {
+          const column = visibleColumns[colIndex];
+          if (column && column.columnName !== "__checkbox__") {
+            e.preventDefault();
+            // 편집 시작 (현재 키를 초기값으로)
+            const row = data[rowIndex];
+            const mappedColumnName = joinColumnMapping[column.columnName] || column.columnName;
+            const value = row?.[mappedColumnName];
+            
+            setEditingCell({ 
+              rowIndex, 
+              colIndex, 
+              columnName: column.columnName,
+              originalValue: value 
+            });
+            setEditingValue(e.key); // 입력한 키로 시작
+          }
+        }
+        break;
+    }
+  }, [editingCell, focusedCell, data, visibleColumns, joinColumnMapping, selectedRows, getRowKey, handleRowSelection]);
+
   const getColumnWidth = (column: ColumnConfig) => {
     if (column.columnName === "__checkbox__") return 50;
     if (column.width) return column.width;
@@ -2264,14 +4197,42 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
         groupValues[col] = items[0]?.[col];
       });
 
+      // 🆕 그룹별 소계 계산
+      const groupSummary: Record<string, { sum: number; avg: number; count: number }> = {};
+      
+      // 숫자형 컬럼에 대해 소계 계산
+      (tableConfig.columns || []).forEach((col: { columnName: string }) => {
+        if (col.columnName === "__checkbox__") return;
+        
+        const colMeta = columnMeta?.[col.columnName];
+        const inputType = colMeta?.inputType;
+        const isNumeric = inputType === "number" || inputType === "decimal";
+        
+        if (isNumeric) {
+          const values = items
+            .map((item) => parseFloat(item[col.columnName]))
+            .filter((v) => !isNaN(v));
+          
+          if (values.length > 0) {
+            const sum = values.reduce((a, b) => a + b, 0);
+            groupSummary[col.columnName] = {
+              sum,
+              avg: sum / values.length,
+              count: values.length,
+            };
+          }
+        }
+      });
+
       return {
         groupKey,
         groupValues,
         items,
         count: items.length,
+        summary: groupSummary, // 🆕 그룹별 소계
       };
     });
-  }, [data, groupByColumns, columnLabels, columnMeta]);
+  }, [data, groupByColumns, columnLabels, columnMeta, tableConfig.columns]);
 
   // 저장된 그룹 설정 불러오기
   useEffect(() => {
@@ -2485,19 +4446,81 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
           </Button>
         </div>
 
-        {/* 우측 새로고침 버튼 */}
-        <Button
-          variant="ghost"
-          size="sm"
-          onClick={handleRefresh}
-          disabled={loading}
-          className="absolute right-2 h-8 w-8 p-0 sm:right-6 sm:h-9 sm:w-auto sm:px-3"
-        >
-          <RefreshCw className={cn("h-3 w-3", loading && "animate-spin")} />
-        </Button>
+        {/* 우측 버튼 그룹 */}
+        <div className="absolute right-2 flex items-center gap-1 sm:right-6">
+          {/* 🆕 내보내기 버튼 (Excel/PDF) */}
+          <Popover>
+            <PopoverTrigger asChild>
+              <Button
+                variant="ghost"
+                size="sm"
+                className="h-8 w-8 p-0 sm:h-9 sm:w-auto sm:px-3"
+                title="내보내기"
+              >
+                <Download className="h-3 w-3" />
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent className="w-56 p-2" align="end">
+              <div className="flex flex-col gap-1">
+                <div className="text-muted-foreground px-2 py-1 text-xs font-medium">Excel</div>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="justify-start text-xs"
+                  onClick={() => exportToExcel(true)}
+                >
+                  <FileSpreadsheet className="mr-2 h-3 w-3 text-green-600" />
+                  전체 Excel 내보내기
+                </Button>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="justify-start text-xs"
+                  onClick={() => exportToExcel(false)}
+                  disabled={selectedRows.size === 0}
+                >
+                  <FileSpreadsheet className="mr-2 h-3 w-3 text-green-600" />
+                  선택 항목만 ({selectedRows.size}개)
+                </Button>
+                <div className="border-border my-1 border-t" />
+                <div className="text-muted-foreground px-2 py-1 text-xs font-medium">PDF/인쇄</div>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="justify-start text-xs"
+                  onClick={() => exportToPdf(true)}
+                >
+                  <FileText className="mr-2 h-3 w-3 text-red-600" />
+                  전체 PDF 내보내기
+                </Button>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="justify-start text-xs"
+                  onClick={() => exportToPdf(false)}
+                  disabled={selectedRows.size === 0}
+                >
+                  <FileText className="mr-2 h-3 w-3 text-red-600" />
+                  선택 항목만 ({selectedRows.size}개)
+                </Button>
+              </div>
+            </PopoverContent>
+          </Popover>
+
+          {/* 새로고침 버튼 */}
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={handleRefresh}
+            disabled={loading}
+            className="h-8 w-8 p-0 sm:h-9 sm:w-auto sm:px-3"
+          >
+            <RefreshCw className={cn("h-3 w-3", loading && "animate-spin")} />
+          </Button>
+        </div>
       </div>
     );
-  }, [tableConfig.pagination, isDesignMode, currentPage, totalPages, totalItems, loading]);
+  }, [tableConfig.pagination, isDesignMode, currentPage, totalPages, totalItems, loading, selectedRows.size, exportToExcel, exportToPdf]);
 
   // ========================================
   // 렌더링
@@ -2597,6 +4620,236 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
       <div {...domProps}>
         {/* 필터 헤더는 TableSearchWidget으로 이동 */}
 
+        {/* 🆕 DevExpress 스타일 기능 툴바 */}
+        <div className="border-border bg-muted/20 flex flex-wrap items-center gap-1 border-b px-2 py-1.5 sm:gap-2 sm:px-4 sm:py-2">
+          {/* 편집 모드 토글 */}
+          <div className="flex items-center gap-1 border-r border-border pr-2">
+            <Button
+              variant={editMode === "batch" ? "default" : "ghost"}
+              size="sm"
+              onClick={() => setEditMode(editMode === "batch" ? "immediate" : "batch")}
+              className="h-7 text-xs"
+              title="배치 편집 모드 (Ctrl+B)"
+            >
+              <Edit className="mr-1 h-3 w-3" />
+              {editMode === "batch" ? "배치 모드" : "즉시 저장"}
+            </Button>
+          </div>
+
+          {/* 내보내기 버튼들 */}
+          <div className="flex items-center gap-1 border-r border-border pr-2">
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => exportToExcel(true)}
+              className="h-7 text-xs"
+              title="Excel 내보내기"
+            >
+              <FileSpreadsheet className="mr-1 h-3 w-3 text-green-600" />
+              Excel
+            </Button>
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => exportToPdf(true)}
+              className="h-7 text-xs"
+              title="PDF 내보내기"
+            >
+              <FileText className="mr-1 h-3 w-3 text-red-600" />
+              PDF
+            </Button>
+          </div>
+
+          {/* 복사 버튼 */}
+          <div className="flex items-center gap-1 border-r border-border pr-2">
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={handleCopy}
+              disabled={selectedRows.size === 0 && !focusedCell}
+              className="h-7 text-xs"
+              title="복사 (Ctrl+C)"
+            >
+              <Copy className="mr-1 h-3 w-3" />
+              복사
+            </Button>
+          </div>
+
+          {/* 선택 정보 */}
+          {selectedRows.size > 0 && (
+            <div className="flex items-center gap-1 border-r border-border pr-2">
+              <span className="bg-primary/10 text-primary rounded px-2 py-0.5 text-xs">
+                {selectedRows.size}개 선택됨
+              </span>
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => setSelectedRows(new Set())}
+                className="h-6 w-6 p-0"
+                title="선택 해제"
+              >
+                <X className="h-3 w-3" />
+              </Button>
+            </div>
+          )}
+
+          {/* 🆕 통합 검색 패널 */}
+          <div className="flex items-center gap-1 border-r border-border pr-2">
+            {isSearchPanelOpen ? (
+              <div className="flex items-center gap-1">
+                <input
+                  type="text"
+                  value={globalSearchTerm}
+                  onChange={(e) => setGlobalSearchTerm(e.target.value)}
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter") {
+                      executeGlobalSearch(globalSearchTerm);
+                    } else if (e.key === "Escape") {
+                      clearGlobalSearch();
+                    } else if (e.key === "F3" || (e.key === "g" && (e.ctrlKey || e.metaKey))) {
+                      e.preventDefault();
+                      if (e.shiftKey) {
+                        goToPrevSearchResult();
+                      } else {
+                        goToNextSearchResult();
+                      }
+                    }
+                  }}
+                  placeholder="검색어 입력... (Enter)"
+                  className="border-input bg-background h-7 w-32 rounded border px-2 text-xs focus:outline-none focus:ring-1 focus:ring-primary sm:w-48"
+                  autoFocus
+                />
+                {searchHighlights.size > 0 && (
+                  <span className="text-muted-foreground text-xs">
+                    {searchHighlights.size}개
+                  </span>
+                )}
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={goToPrevSearchResult}
+                  disabled={searchHighlights.size === 0}
+                  className="h-6 w-6 p-0"
+                  title="이전 (Shift+F3)"
+                >
+                  <ChevronLeft className="h-3 w-3" />
+                </Button>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={goToNextSearchResult}
+                  disabled={searchHighlights.size === 0}
+                  className="h-6 w-6 p-0"
+                  title="다음 (F3)"
+                >
+                  <ChevronRight className="h-3 w-3" />
+                </Button>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={clearGlobalSearch}
+                  className="h-6 w-6 p-0"
+                  title="닫기 (Esc)"
+                >
+                  <X className="h-3 w-3" />
+                </Button>
+              </div>
+            ) : (
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => setIsSearchPanelOpen(true)}
+                className="h-7 text-xs"
+                title="통합 검색 (Ctrl+F)"
+              >
+                <Filter className="mr-1 h-3 w-3" />
+                검색
+              </Button>
+            )}
+          </div>
+
+          {/* 🆕 Filter Builder (고급 필터) 버튼 */}
+          <div className="flex items-center gap-1 border-r border-border pr-2">
+            <Button
+              variant={activeFilterCount > 0 ? "default" : "ghost"}
+              size="sm"
+              onClick={() => setIsFilterBuilderOpen(true)}
+              className="h-7 text-xs"
+              title="고급 필터"
+            >
+              <Layers className="mr-1 h-3 w-3" />
+              필터
+              {activeFilterCount > 0 && (
+                <span className="ml-1 rounded-full bg-white/20 px-1.5 text-[10px]">
+                  {activeFilterCount}
+                </span>
+              )}
+            </Button>
+            {activeFilterCount > 0 && (
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={clearFilterBuilder}
+                className="h-6 w-6 p-0"
+                title="필터 초기화"
+              >
+                <X className="h-3 w-3" />
+              </Button>
+            )}
+          </div>
+
+          {/* 새로고침 */}
+          <div className="ml-auto flex items-center gap-1">
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={handleRefresh}
+              disabled={loading}
+              className="h-7 text-xs"
+              title="새로고침"
+            >
+              <RefreshCw className={cn("mr-1 h-3 w-3", loading && "animate-spin")} />
+              새로고침
+            </Button>
+          </div>
+        </div>
+
+        {/* 🆕 배치 편집 툴바 */}
+        {(editMode === "batch" || pendingChanges.size > 0) && (
+          <div className="border-border bg-amber-50 dark:bg-amber-950/30 flex items-center justify-between border-b px-4 py-2 sm:px-6">
+            <div className="flex items-center gap-3 text-xs sm:text-sm">
+              <span className="bg-amber-100 dark:bg-amber-900/50 text-amber-700 dark:text-amber-300 rounded px-2 py-1 font-medium">
+                배치 편집 모드
+              </span>
+              {pendingChanges.size > 0 && (
+                <span className="text-amber-600 dark:text-amber-400">
+                  {pendingChanges.size}개 변경사항
+                </span>
+              )}
+            </div>
+            <div className="flex items-center gap-2">
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={cancelBatchChanges}
+                disabled={pendingChanges.size === 0}
+                className="h-7 text-xs"
+              >
+                취소
+              </Button>
+              <Button
+                variant="default"
+                size="sm"
+                onClick={saveBatchChanges}
+                disabled={pendingChanges.size === 0}
+                className="h-7 text-xs"
+              >
+                저장 ({pendingChanges.size})
+              </Button>
+            </div>
+          </div>
+        )}
+
         {/* 그룹 표시 배지 */}
         {groupByColumns.length > 0 && (
           <div className="border-border bg-muted/30 border-b px-4 py-2 sm:px-6">
@@ -2623,17 +4876,23 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
           </div>
         )}
 
-        {/* 테이블 컨테이너 */}
+        {/* 테이블 컨테이너 - 키보드 네비게이션 지원 */}
         <div
-          className="flex flex-1 flex-col"
+          ref={tableContainerRef}
+          className="flex flex-1 flex-col focus:outline-none"
           style={{ 
             width: "100%",
             height: "100%",
             overflow: "hidden",
           }}
+          tabIndex={0}
+          onKeyDown={handleTableKeyDown}
+          role="grid"
+          aria-label="데이터 테이블"
         >
           {/* 스크롤 영역 */}
           <div
+            ref={scrollContainerRef}
             className="bg-background flex-1"
             style={{ 
               position: "relative",
@@ -2641,6 +4900,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
               height: "100%",
               overflow: "auto",
             }}
+            onScroll={handleVirtualScroll}
           >
             {/* 테이블 */}
             <table
@@ -2661,6 +4921,52 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                   backgroundColor: "hsl(var(--background))",
                 }}
               >
+                {/* 🆕 Multi-Level Headers (Column Bands) */}
+                {columnBandsInfo?.hasBands && (
+                  <tr
+                    className="border-primary/10 bg-muted/70 h-8 border-b sm:h-10"
+                    style={{ backgroundColor: "hsl(var(--muted) / 0.7)" }}
+                  >
+                    {visibleColumns.map((column, colIdx) => {
+                      // 이 컬럼이 속한 band 찾기
+                      const band = columnBandsInfo.bands.find(
+                        (b) => b.columns.includes(column.columnName) && b.startIndex === colIdx
+                      );
+                      
+                      // band의 첫 번째 컬럼인 경우에만 렌더링
+                      if (band) {
+                        return (
+                          <th
+                            key={`band-${column.columnName}`}
+                            colSpan={band.colSpan}
+                            className="border-r border-primary/10 px-2 py-1 text-center text-xs font-semibold sm:px-4 sm:text-sm"
+                          >
+                            {band.caption}
+                          </th>
+                        );
+                      }
+                      
+                      // band에 속하지 않은 컬럼 (개별 표시)
+                      const isInAnyBand = columnBandsInfo.bands.some(
+                        (b) => b.columns.includes(column.columnName)
+                      );
+                      if (!isInAnyBand) {
+                        return (
+                          <th
+                            key={`noband-${column.columnName}`}
+                            rowSpan={2}
+                            className="border-r border-primary/10 px-2 py-1 text-center text-xs font-semibold sm:px-4 sm:text-sm"
+                          >
+                            {columnLabels[column.columnName] || column.columnName}
+                          </th>
+                        );
+                      }
+                      
+                      // band의 중간 컬럼은 렌더링하지 않음
+                      return null;
+                    })}
+                  </tr>
+                )}
                 <tr
                   className="border-primary/20 bg-muted h-10 border-b-2 sm:h-12"
                   style={{
@@ -2682,6 +4988,10 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                       }
                     }
 
+                    // 🆕 Column Reordering 상태
+                    const isColumnDragging = draggedColumnIndex === columnIndex;
+                    const isColumnDropTarget = dropTargetColumnIndex === columnIndex;
+                    
                     return (
                       <th
                         key={column.columnName}
@@ -2693,6 +5003,10 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                             column.columnName !== "__checkbox__" &&
                             "hover:bg-muted/70 cursor-pointer transition-colors",
                           isFrozen && "sticky z-60 shadow-[2px_0_4px_rgba(0,0,0,0.1)]",
+                          // 🆕 Column Reordering 스타일
+                          isColumnDragEnabled && column.columnName !== "__checkbox__" && "cursor-grab active:cursor-grabbing",
+                          isColumnDragging && "opacity-50 bg-primary/20",
+                          isColumnDropTarget && "border-l-4 border-l-primary",
                         )}
                         style={{
                           textAlign: column.columnName === "__checkbox__" ? "center" : "center",
@@ -2708,6 +5022,12 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                           backgroundColor: "hsl(var(--muted))",
                           ...(isFrozen && { left: `${leftPosition}px` }),
                         }}
+                        // 🆕 Column Reordering 이벤트
+                        draggable={isColumnDragEnabled && column.columnName !== "__checkbox__"}
+                        onDragStart={(e) => handleColumnDragStart(e, columnIndex)}
+                        onDragOver={(e) => handleColumnDragOver(e, columnIndex)}
+                        onDragEnd={handleColumnDragEnd}
+                        onDrop={(e) => handleColumnDrop(e, columnIndex)}
                         onClick={() => {
                           if (isResizing.current) return;
                           if (column.sortable !== false && column.columnName !== "__checkbox__") {
@@ -2718,11 +5038,81 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                         {column.columnName === "__checkbox__" ? (
                           renderCheckboxHeader()
                         ) : (
-                          <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
+                          <div style={{ display: "flex", alignItems: "center", gap: "4px", justifyContent: "center" }}>
                             <span>{columnLabels[column.columnName] || column.displayName}</span>
                             {column.sortable !== false && sortColumn === column.columnName && (
                               <span>{sortDirection === "asc" ? "↑" : "↓"}</span>
                             )}
+                            {/* 🆕 헤더 필터 버튼 */}
+                            {tableConfig.headerFilter !== false && columnUniqueValues[column.columnName]?.length > 0 && (
+                              <Popover 
+                                open={openFilterColumn === column.columnName} 
+                                onOpenChange={(open) => setOpenFilterColumn(open ? column.columnName : null)}
+                              >
+                                <PopoverTrigger asChild>
+                                  <button
+                                    onClick={(e) => {
+                                      e.stopPropagation();
+                                      setOpenFilterColumn(openFilterColumn === column.columnName ? null : column.columnName);
+                                    }}
+                                    className={cn(
+                                      "ml-1 p-0.5 rounded hover:bg-primary/20 transition-colors",
+                                      headerFilters[column.columnName]?.size > 0 && "text-primary bg-primary/10"
+                                    )}
+                                    title="필터"
+                                  >
+                                    <Filter className="h-3 w-3" />
+                                  </button>
+                                </PopoverTrigger>
+                                <PopoverContent 
+                                  className="w-48 p-2" 
+                                  align="start"
+                                  onClick={(e) => e.stopPropagation()}
+                                >
+                                  <div className="space-y-2">
+                                    <div className="flex items-center justify-between border-b pb-2">
+                                      <span className="text-xs font-medium">필터: {columnLabels[column.columnName] || column.displayName}</span>
+                                      {headerFilters[column.columnName]?.size > 0 && (
+                                        <button
+                                          onClick={() => clearHeaderFilter(column.columnName)}
+                                          className="text-xs text-destructive hover:underline"
+                                        >
+                                          초기화
+                                        </button>
+                                      )}
+                                    </div>
+                                    <div className="max-h-48 overflow-y-auto space-y-1">
+                                      {columnUniqueValues[column.columnName]?.slice(0, 50).map((val) => {
+                                        const isSelected = headerFilters[column.columnName]?.has(val);
+                                        return (
+                                          <div
+                                            key={val}
+                                            className={cn(
+                                              "flex items-center gap-2 px-2 py-1 rounded cursor-pointer text-xs hover:bg-muted",
+                                              isSelected && "bg-primary/10"
+                                            )}
+                                            onClick={() => toggleHeaderFilter(column.columnName, val)}
+                                          >
+                                            <div className={cn(
+                                              "w-4 h-4 rounded border flex items-center justify-center",
+                                              isSelected ? "bg-primary border-primary" : "border-input"
+                                            )}>
+                                              {isSelected && <Check className="h-3 w-3 text-primary-foreground" />}
+                                            </div>
+                                            <span className="truncate">{val || "(빈 값)"}</span>
+                                          </div>
+                                        );
+                                      })}
+                                      {(columnUniqueValues[column.columnName]?.length || 0) > 50 && (
+                                        <div className="text-xs text-muted-foreground px-2 py-1">
+                                          ...외 {(columnUniqueValues[column.columnName]?.length || 0) - 50}개
+                                        </div>
+                                      )}
+                                    </div>
+                                  </div>
+                                </PopoverContent>
+                              </Popover>
+                            )}
                           </div>
                         )}
                         {/* 리사이즈 핸들 (체크박스 제외) */}
@@ -2926,71 +5316,317 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                               })}
                             </tr>
                           ))}
+                        {/* 🆕 그룹별 소계 행 */}
+                        {!isCollapsed && group.summary && Object.keys(group.summary).length > 0 && (
+                          <tr className="bg-muted/30 border-b-2 border-primary/20">
+                            {visibleColumns.map((column, colIndex) => {
+                              const summary = group.summary?.[column.columnName];
+                              const meta = columnMeta[column.columnName];
+                              const inputType = meta?.inputType || (column as any).inputType;
+                              const isNumeric = inputType === "number" || inputType === "decimal";
+                              
+                              if (colIndex === 0 && column.columnName === "__checkbox__") {
+                                return (
+                                  <td key={column.columnName} className="px-2 py-1 sm:px-4">
+                                    <span className="text-muted-foreground text-xs font-medium">소계</span>
+                                  </td>
+                                );
+                              }
+                              
+                              if (colIndex === 0 && column.columnName !== "__checkbox__") {
+                                return (
+                                  <td key={column.columnName} className="px-2 py-1 sm:px-4">
+                                    <span className="text-muted-foreground text-xs font-medium">소계 ({group.count}건)</span>
+                                  </td>
+                                );
+                              }
+                              
+                              if (summary) {
+                                return (
+                                  <td
+                                    key={column.columnName}
+                                    className="px-2 py-1 text-xs font-semibold sm:px-4"
+                                    style={{ textAlign: isNumeric ? "right" : "left" }}
+                                  >
+                                    {summary.sum.toLocaleString()}
+                                  </td>
+                                );
+                              }
+                              
+                              return <td key={column.columnName} className="px-2 py-1 sm:px-4" />;
+                            })}
+                          </tr>
+                        )}
                       </React.Fragment>
                     );
                   })
                 ) : (
-                  // 일반 렌더링 (그룹 없음)
-                  filteredData.map((row, index) => (
-                    <tr
-                      key={index}
-                      className={cn(
-                        "bg-background hover:bg-muted/50 cursor-pointer border-b transition-colors",
-                      )}
-                      onClick={(e) => handleRowClick(row, index, e)}
-                    >
-                      {visibleColumns.map((column, colIndex) => {
-                        const mappedColumnName = joinColumnMapping[column.columnName] || column.columnName;
-                        const cellValue = row[mappedColumnName];
+                  // 일반 렌더링 (그룹 없음) - 키보드 네비게이션 지원
+                  <>
+                    {/* 🆕 Virtual Scrolling: Top Spacer */}
+                    {isVirtualScrollEnabled && virtualScrollInfo.topSpacerHeight > 0 && (
+                      <tr style={{ height: `${virtualScrollInfo.topSpacerHeight}px` }}>
+                        <td colSpan={visibleColumns.length} />
+                      </tr>
+                    )}
+                    {/* 데이터 행 렌더링 */}
+                    {(isVirtualScrollEnabled ? virtualScrollInfo.visibleData : filteredData).map((row, idx) => {
+                      // Virtual Scrolling에서는 실제 인덱스 계산
+                      const index = isVirtualScrollEnabled ? virtualScrollInfo.startIndex + idx : idx;
+                      const rowKey = getRowKey(row, index);
+                      const isRowSelected = selectedRows.has(rowKey);
+                      const isRowFocused = focusedCell?.rowIndex === index;
+                    
+                    // 🆕 Drag & Drop 상태
+                    const isDragging = draggedRowIndex === index;
+                    const isDropTarget = dropTargetIndex === index;
+                    
+                    return (
+                      <tr
+                        key={index}
+                        className={cn(
+                          "bg-background hover:bg-muted/50 cursor-pointer border-b transition-colors",
+                          isRowSelected && "bg-primary/10 hover:bg-primary/15",
+                          isRowFocused && "ring-1 ring-primary/50 ring-inset",
+                          // 🆕 Drag & Drop 스타일
+                          isDragEnabled && "cursor-grab active:cursor-grabbing",
+                          isDragging && "opacity-50 bg-muted",
+                          isDropTarget && "border-t-2 border-t-primary",
+                        )}
+                        onClick={(e) => handleRowClick(row, index, e)}
+                        role="row"
+                        aria-selected={isRowSelected}
+                        // 🆕 Drag & Drop 이벤트
+                        draggable={isDragEnabled}
+                        onDragStart={(e) => handleRowDragStart(e, index)}
+                        onDragOver={(e) => handleRowDragOver(e, index)}
+                        onDragEnd={handleRowDragEnd}
+                        onDrop={(e) => handleRowDrop(e, index)}
+                      >
+                        {visibleColumns.map((column, colIndex) => {
+                          const mappedColumnName = joinColumnMapping[column.columnName] || column.columnName;
+                          // 🆕 배치 편집: 로컬 수정 데이터 우선 표시
+                          const cellValue = editMode === "batch" 
+                            ? getDisplayValue(row, index, mappedColumnName) 
+                            : row[mappedColumnName];
 
-                        const meta = columnMeta[column.columnName];
-                        const inputType = meta?.inputType || column.inputType;
-                        const isNumeric = inputType === "number" || inputType === "decimal";
+                          const meta = columnMeta[column.columnName];
+                          const inputType = meta?.inputType || column.inputType;
+                          const isNumeric = inputType === "number" || inputType === "decimal";
 
-                        const isFrozen = frozenColumns.includes(column.columnName);
-                        const frozenIndex = frozenColumns.indexOf(column.columnName);
+                          const isFrozen = frozenColumns.includes(column.columnName);
+                          const frozenIndex = frozenColumns.indexOf(column.columnName);
+                          
+                          // 셀 포커스 상태
+                          const isCellFocused = focusedCell?.rowIndex === index && focusedCell?.colIndex === colIndex;
+                          
+                          // 🆕 배치 편집: 수정된 셀 여부
+                          const isModified = isCellModified(index, mappedColumnName);
+                          
+                          // 🆕 유효성 검사 에러
+                          const cellValidationError = getCellValidationError(index, mappedColumnName);
+                          
+                          // 🆕 검색 하이라이트 여부
+                          const isSearchHighlighted = searchHighlights.has(`${index}-${colIndex}`);
 
-                        // 틀고정된 컬럼의 left 위치 계산
-                        let leftPosition = 0;
-                        if (isFrozen && frozenIndex > 0) {
-                          for (let i = 0; i < frozenIndex; i++) {
-                            const frozenCol = frozenColumns[i];
-                            const frozenColWidth = columnWidths[frozenCol] || 150;
-                            leftPosition += frozenColWidth;
+                          // 틀고정된 컬럼의 left 위치 계산
+                          let leftPosition = 0;
+                          if (isFrozen && frozenIndex > 0) {
+                            for (let i = 0; i < frozenIndex; i++) {
+                              const frozenCol = frozenColumns[i];
+                              const frozenColWidth = columnWidths[frozenCol] || 150;
+                              leftPosition += frozenColWidth;
+                            }
                           }
-                        }
 
-                        return (
-                          <td
-                            key={column.columnName}
-                            className={cn(
-                              "text-foreground overflow-hidden text-xs text-ellipsis whitespace-nowrap font-normal sm:text-sm",
-                              column.columnName === "__checkbox__" ? "px-0 py-1" : "px-2 py-1 sm:px-4 sm:py-1.5",
-                              isFrozen && "bg-background sticky z-10 shadow-[2px_0_4px_rgba(0,0,0,0.05)]",
-                            )}
-                            style={{
-                              textAlign:
-                                column.columnName === "__checkbox__"
-                                  ? "center"
-                                  : isNumeric
-                                    ? "right"
-                                    : column.align || "left",
-                              width: column.columnName === "__checkbox__" ? "48px" : `${100 / visibleColumns.length}%`,
-                              minWidth: column.columnName === "__checkbox__" ? "48px" : undefined,
-                              maxWidth: column.columnName === "__checkbox__" ? "48px" : undefined,
-                              ...(isFrozen && { left: `${leftPosition}px` }),
-                            }}
-                          >
-                            {column.columnName === "__checkbox__"
-                              ? renderCheckboxCell(row, index)
-                              : formatCellValue(cellValue, column, row)}
-                          </td>
-                        );
-                      })}
-                    </tr>
-                  ))
+                          return (
+                            <td
+                              key={column.columnName}
+                              data-row={index}
+                              data-col={colIndex}
+                              className={cn(
+                                "text-foreground overflow-hidden text-xs text-ellipsis whitespace-nowrap font-normal sm:text-sm",
+                                column.columnName === "__checkbox__" ? "px-0 py-1" : "px-2 py-1 sm:px-4 sm:py-1.5",
+                                isFrozen && "bg-background sticky z-10 shadow-[2px_0_4px_rgba(0,0,0,0.05)]",
+                                // 🆕 포커스된 셀 스타일
+                                isCellFocused && !editingCell && "ring-2 ring-primary ring-inset bg-primary/5",
+                                // 🆕 편집 중인 셀 스타일
+                                editingCell?.rowIndex === index && editingCell?.colIndex === colIndex && "p-0",
+                                // 🆕 배치 편집: 수정된 셀 스타일 (노란 배경)
+                                isModified && !cellValidationError && "bg-amber-100 dark:bg-amber-900/40",
+                                // 🆕 유효성 에러: 빨간 테두리 및 배경
+                                cellValidationError && "bg-red-50 dark:bg-red-950/40 ring-2 ring-red-500 ring-inset",
+                                // 🆕 검색 하이라이트 스타일 (노란 배경)
+                                isSearchHighlighted && !isCellFocused && "bg-yellow-200 dark:bg-yellow-700/50",
+                              )}
+                              // 🆕 유효성 에러 툴팁
+                              title={cellValidationError || undefined}
+                              style={{
+                                textAlign:
+                                  column.columnName === "__checkbox__"
+                                    ? "center"
+                                    : isNumeric
+                                      ? "right"
+                                      : column.align || "left",
+                                width: column.columnName === "__checkbox__" ? "48px" : `${100 / visibleColumns.length}%`,
+                                minWidth: column.columnName === "__checkbox__" ? "48px" : undefined,
+                                maxWidth: column.columnName === "__checkbox__" ? "48px" : undefined,
+                                ...(isFrozen && { left: `${leftPosition}px` }),
+                              }}
+                              onClick={(e) => handleCellClick(index, colIndex, e)}
+                              onDoubleClick={() => handleCellDoubleClick(index, colIndex, column.columnName, cellValue)}
+                              onContextMenu={(e) => handleContextMenu(e, index, colIndex, row)}
+                              role="gridcell"
+                              tabIndex={isCellFocused ? 0 : -1}
+                            >
+                              {/* 🆕 인라인 편집 모드 */}
+                              {editingCell?.rowIndex === index && editingCell?.colIndex === colIndex ? (
+                                // 🆕 Cascading Lookups: 드롭다운 또는 일반 입력
+                                (() => {
+                                  const cascadingConfig = (tableConfig as any).cascadingLookups?.[column.columnName];
+                                  const options = cascadingConfig ? getCascadingOptions(column.columnName, row) : [];
+                                  
+                                  // 부모 값이 변경되면 옵션 로딩
+                                  if (cascadingConfig && options.length === 0) {
+                                    const parentValue = row[cascadingConfig.parentColumn];
+                                    if (parentValue !== undefined && parentValue !== null) {
+                                      loadCascadingOptions(column.columnName, cascadingConfig.parentColumn, parentValue);
+                                    }
+                                  }
+                                  
+                                  // 카테고리/코드 타입이거나 Cascading Lookup인 경우 드롭다운
+                                  const colMeta = columnMeta[column.columnName];
+                                  const isCategoryType = colMeta?.inputType === "category" || colMeta?.inputType === "code";
+                                  const hasCategoryOptions = categoryMappings[column.columnName] && Object.keys(categoryMappings[column.columnName]).length > 0;
+                                  
+                                  if (cascadingConfig || (isCategoryType && hasCategoryOptions)) {
+                                    const selectOptions = cascadingConfig 
+                                      ? options 
+                                      : Object.entries(categoryMappings[column.columnName] || {}).map(([value, info]) => ({
+                                          value,
+                                          label: info.label,
+                                        }));
+                                    
+                                    return (
+                                      <select
+                                        ref={editInputRef as any}
+                                        value={editingValue}
+                                        onChange={(e) => setEditingValue(e.target.value)}
+                                        onKeyDown={handleEditKeyDown}
+                                        onBlur={saveEditing}
+                                        className="w-full h-full px-2 py-1 sm:px-4 sm:py-1.5 text-xs sm:text-sm border-2 border-primary bg-background focus:outline-none"
+                                        autoFocus
+                                      >
+                                        <option value="">선택하세요</option>
+                                        {selectOptions.map((opt) => (
+                                          <option key={opt.value} value={opt.value}>
+                                            {opt.label}
+                                          </option>
+                                        ))}
+                                      </select>
+                                    );
+                                  }
+                                  
+                                  // 일반 입력 필드
+                                  return (
+                                    <input
+                                      ref={editInputRef}
+                                      type={isNumeric ? "number" : "text"}
+                                      value={editingValue}
+                                      onChange={(e) => setEditingValue(e.target.value)}
+                                      onKeyDown={handleEditKeyDown}
+                                      onBlur={saveEditing}
+                                      className="w-full h-full px-2 py-1 sm:px-4 sm:py-1.5 text-xs sm:text-sm border-2 border-primary bg-background focus:outline-none"
+                                      style={{
+                                        textAlign: isNumeric ? "right" : column.align || "left",
+                                      }}
+                                    />
+                                  );
+                                })()
+                              ) : column.columnName === "__checkbox__" ? (
+                                renderCheckboxCell(row, index)
+                              ) : (
+                                formatCellValue(cellValue, column, row)
+                              )}
+                            </td>
+                          );
+                        })}
+                      </tr>
+                    );
+                  })}
+                    {/* 🆕 Virtual Scrolling: Bottom Spacer */}
+                    {isVirtualScrollEnabled && virtualScrollInfo.bottomSpacerHeight > 0 && (
+                      <tr style={{ height: `${virtualScrollInfo.bottomSpacerHeight}px` }}>
+                        <td colSpan={visibleColumns.length} />
+                      </tr>
+                    )}
+                  </>
                 )}
               </tbody>
+
+              {/* 🆕 데이터 요약 (Total Summaries) */}
+              {summaryData && Object.keys(summaryData).length > 0 && (
+                <tfoot className="bg-muted/80 sticky bottom-0 z-10 border-t-2 border-primary/20">
+                  <tr>
+                    {visibleColumns.map((column, colIndex) => {
+                      const summary = summaryData[column.columnName];
+                      const columnWidth = columnWidths[column.columnName];
+                      const isFrozen = frozenColumns.includes(column.columnName);
+                      const frozenIndex = frozenColumns.indexOf(column.columnName);
+
+                      // 틀고정된 컬럼의 left 위치 계산
+                      let leftPosition = 0;
+                      if (isFrozen && frozenIndex > 0) {
+                        for (let i = 0; i < frozenIndex; i++) {
+                          const frozenCol = frozenColumns[i];
+                          const frozenColWidth = columnWidths[frozenCol] || 150;
+                          leftPosition += frozenColWidth;
+                        }
+                      }
+
+                      const meta = columnMeta[column.columnName];
+                      const inputType = meta?.inputType || (column as any).inputType;
+                      const isNumeric = inputType === "number" || inputType === "decimal";
+
+                      return (
+                        <td
+                          key={column.columnName}
+                          className={cn(
+                            "text-foreground text-xs font-semibold sm:text-sm",
+                            column.columnName === "__checkbox__" ? "px-0 py-2" : "px-2 py-2 sm:px-4",
+                            isFrozen && "bg-muted/80 sticky z-10 shadow-[2px_0_4px_rgba(0,0,0,0.05)]",
+                          )}
+                          style={{
+                            textAlign: isNumeric ? "right" : column.align || "left",
+                            width:
+                              column.columnName === "__checkbox__"
+                                ? "48px"
+                                : columnWidth
+                                  ? `${columnWidth}px`
+                                  : undefined,
+                            ...(isFrozen && { left: `${leftPosition}px` }),
+                          }}
+                        >
+                          {summary ? (
+                            <div className="flex flex-col">
+                              <span className="text-muted-foreground text-[10px] sm:text-xs">{summary.label}</span>
+                              <span className="text-primary font-bold">
+                                {typeof summary.value === "number"
+                                  ? summary.value.toLocaleString("ko-KR", {
+                                      maximumFractionDigits: 2,
+                                    })
+                                  : summary.value}
+                              </span>
+                            </div>
+                          ) : colIndex === 0 ? (
+                            <span className="text-muted-foreground text-xs">요약</span>
+                          ) : null}
+                        </td>
+                      );
+                    })}
+                  </tr>
+                </tfoot>
+              )}
             </table>
           </div>
         </div>
@@ -3079,6 +5715,284 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
         </DialogContent>
       </Dialog>
 
+      {/* 🆕 Context Menu (우클릭 메뉴) */}
+      {contextMenu && (
+        <div
+          className="bg-popover text-popover-foreground fixed z-[9999] min-w-[160px] rounded-md border shadow-md"
+          style={{
+            left: contextMenu.x,
+            top: contextMenu.y,
+          }}
+          onClick={(e) => e.stopPropagation()}
+        >
+          <div className="p-1">
+            {/* 셀 복사 */}
+            <button
+              className="hover:bg-accent hover:text-accent-foreground flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-sm"
+              onClick={() => {
+                const col = visibleColumns[contextMenu.colIndex];
+                if (col) {
+                  const value = contextMenu.row[col.columnName];
+                  navigator.clipboard.writeText(String(value ?? ""));
+                  toast.success("셀 값이 복사되었습니다");
+                }
+                closeContextMenu();
+              }}
+            >
+              <Copy className="h-4 w-4" />
+              셀 복사
+            </button>
+
+            {/* 행 복사 */}
+            <button
+              className="hover:bg-accent hover:text-accent-foreground flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-sm"
+              onClick={() => {
+                const rowData = visibleColumns
+                  .map((col) => String(contextMenu.row[col.columnName] ?? ""))
+                  .join("\t");
+                navigator.clipboard.writeText(rowData);
+                toast.success("행 데이터가 복사되었습니다");
+                closeContextMenu();
+              }}
+            >
+              <ClipboardCopy className="h-4 w-4" />
+              행 복사
+            </button>
+
+            <div className="bg-border my-1 h-px" />
+
+            {/* 셀 편집 */}
+            <button
+              className="hover:bg-accent hover:text-accent-foreground flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-sm"
+              onClick={() => {
+                const col = visibleColumns[contextMenu.colIndex];
+                if (col) {
+                  setEditingCell({
+                    rowIndex: contextMenu.rowIndex,
+                    colIndex: contextMenu.colIndex,
+                    columnName: col.columnName,
+                    originalValue: contextMenu.row[col.columnName],
+                  });
+                  setEditingValue(String(contextMenu.row[col.columnName] ?? ""));
+                }
+                closeContextMenu();
+              }}
+            >
+              <Edit className="h-4 w-4" />
+              셀 편집
+            </button>
+
+            {/* 행 선택/해제 */}
+            <button
+              className="hover:bg-accent hover:text-accent-foreground flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-sm"
+              onClick={() => {
+                const rowKey = getRowKey(contextMenu.row, contextMenu.rowIndex);
+                setSelectedRows((prev) => {
+                  const next = new Set(prev);
+                  if (next.has(rowKey)) {
+                    next.delete(rowKey);
+                  } else {
+                    next.add(rowKey);
+                  }
+                  return next;
+                });
+                closeContextMenu();
+              }}
+            >
+              <CheckSquare className="h-4 w-4" />
+              {selectedRows.has(getRowKey(contextMenu.row, contextMenu.rowIndex)) ? "선택 해제" : "행 선택"}
+            </button>
+
+            <div className="bg-border my-1 h-px" />
+
+            {/* 행 삭제 */}
+            <button
+              className="hover:bg-destructive hover:text-destructive-foreground flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-sm text-red-600"
+              onClick={async () => {
+                if (confirm("이 행을 삭제하시겠습니까?")) {
+                  try {
+                    const rowId = contextMenu.row.id || contextMenu.row.uuid;
+                    if (!rowId) {
+                      toast.error("삭제할 행의 ID를 찾을 수 없습니다");
+                      closeContextMenu();
+                      return;
+                    }
+                    const tableName = tableConfig.selectedTable;
+                    if (!tableName) {
+                      toast.error("테이블명을 찾을 수 없습니다");
+                      closeContextMenu();
+                      return;
+                    }
+                    await tableTypeApi.deleteTableData(tableName, { ids: [String(rowId)] });
+                    toast.success("행이 삭제되었습니다");
+                    handleRefresh();
+                  } catch (error) {
+                    console.error("삭제 오류:", error);
+                    toast.error("삭제 중 오류가 발생했습니다");
+                  }
+                }
+                closeContextMenu();
+              }}
+            >
+              <Trash2 className="h-4 w-4" />
+              행 삭제
+            </button>
+          </div>
+        </div>
+      )}
+
+      {/* 🆕 Filter Builder 모달 */}
+      <Dialog open={isFilterBuilderOpen} onOpenChange={setIsFilterBuilderOpen}>
+        <DialogContent className="max-w-[95vw] sm:max-w-[700px]">
+          <DialogHeader>
+            <DialogTitle className="text-base sm:text-lg">고급 필터</DialogTitle>
+            <DialogDescription className="text-xs sm:text-sm">
+              여러 조건을 조합하여 데이터를 필터링합니다.
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="max-h-[60vh] space-y-4 overflow-y-auto">
+            {filterGroups.length === 0 ? (
+              <div className="text-muted-foreground py-8 text-center text-sm">
+                필터 조건이 없습니다. 아래 버튼을 클릭하여 조건을 추가하세요.
+              </div>
+            ) : (
+              filterGroups.map((group, groupIndex) => (
+                <div key={group.id} className="rounded-lg border p-4">
+                  <div className="mb-3 flex items-center justify-between">
+                    <div className="flex items-center gap-2">
+                      <span className="text-muted-foreground text-xs">조건 그룹 {groupIndex + 1}</span>
+                      <select
+                        value={group.logic}
+                        onChange={(e) => updateGroupLogic(group.id, e.target.value as "AND" | "OR")}
+                        className="border-input bg-background h-7 rounded border px-2 text-xs"
+                      >
+                        <option value="AND">AND (모두 만족)</option>
+                        <option value="OR">OR (하나라도 만족)</option>
+                      </select>
+                    </div>
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => removeFilterGroup(group.id)}
+                      className="h-6 w-6 p-0 text-red-500 hover:text-red-700"
+                    >
+                      <X className="h-4 w-4" />
+                    </Button>
+                  </div>
+
+                  <div className="space-y-2">
+                    {group.conditions.map((condition) => (
+                      <div key={condition.id} className="flex items-center gap-2">
+                        {/* 컬럼 선택 */}
+                        <select
+                          value={condition.column}
+                          onChange={(e) => updateFilterCondition(group.id, condition.id, "column", e.target.value)}
+                          className="border-input bg-background h-8 w-32 rounded border px-2 text-xs sm:w-40"
+                        >
+                          {visibleColumns
+                            .filter((c) => c.columnName !== "__checkbox__")
+                            .map((col) => (
+                              <option key={col.columnName} value={col.columnName}>
+                                {columnLabels[col.columnName] || col.displayName || col.columnName}
+                              </option>
+                            ))}
+                        </select>
+
+                        {/* 연산자 선택 */}
+                        <select
+                          value={condition.operator}
+                          onChange={(e) => updateFilterCondition(group.id, condition.id, "operator", e.target.value)}
+                          className="border-input bg-background h-8 w-28 rounded border px-2 text-xs sm:w-36"
+                        >
+                          <option value="contains">포함</option>
+                          <option value="notContains">포함하지 않음</option>
+                          <option value="equals">같음</option>
+                          <option value="notEquals">같지 않음</option>
+                          <option value="startsWith">시작</option>
+                          <option value="endsWith">끝</option>
+                          <option value="greaterThan">보다 큼</option>
+                          <option value="lessThan">보다 작음</option>
+                          <option value="greaterOrEqual">이상</option>
+                          <option value="lessOrEqual">이하</option>
+                          <option value="isEmpty">비어있음</option>
+                          <option value="isNotEmpty">비어있지 않음</option>
+                        </select>
+
+                        {/* 값 입력 (isEmpty/isNotEmpty가 아닌 경우만) */}
+                        {condition.operator !== "isEmpty" && condition.operator !== "isNotEmpty" && (
+                          <input
+                            type="text"
+                            value={condition.value}
+                            onChange={(e) => updateFilterCondition(group.id, condition.id, "value", e.target.value)}
+                            placeholder="값 입력"
+                            className="border-input bg-background h-8 flex-1 rounded border px-2 text-xs"
+                          />
+                        )}
+
+                        {/* 조건 삭제 */}
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          onClick={() => removeFilterCondition(group.id, condition.id)}
+                          className="h-6 w-6 p-0 text-red-500 hover:text-red-700"
+                          disabled={group.conditions.length === 1}
+                        >
+                          <X className="h-3 w-3" />
+                        </Button>
+                      </div>
+                    ))}
+                  </div>
+
+                  {/* 조건 추가 버튼 */}
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => addFilterCondition(group.id, visibleColumns[0]?.columnName)}
+                    className="mt-2 h-7 text-xs"
+                  >
+                    + 조건 추가
+                  </Button>
+                </div>
+              ))
+            )}
+
+            {/* 그룹 추가 버튼 */}
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => addFilterGroup(visibleColumns[0]?.columnName)}
+              className="w-full"
+            >
+              + 필터 그룹 추가
+            </Button>
+          </div>
+
+          <DialogFooter className="gap-2 sm:gap-0">
+            <Button
+              variant="outline"
+              onClick={clearFilterBuilder}
+              className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
+            >
+              초기화
+            </Button>
+            <Button
+              variant="outline"
+              onClick={() => setIsFilterBuilderOpen(false)}
+              className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
+            >
+              취소
+            </Button>
+            <Button
+              onClick={applyFilterBuilder}
+              className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
+            >
+              적용
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
       {/* 테이블 옵션 모달 */}
       <TableOptionsModal
         isOpen={isTableOptionsOpen}