From 2b747a103017fd16032939d1f34b43985e8d0451 Mon Sep 17 00:00:00 2001
From: kjs <kjs@wace.me>
Date: Thu, 11 Dec 2025 11:37:40 +0900
Subject: [PATCH] =?UTF-8?q?=EC=86=8C=EC=8A=A4=ED=95=84=EB=93=9C=20?=
 =?UTF-8?q?=EB=AA=BB=EC=B0=BE=EB=8A=94=20=EB=B2=84=EA=B7=B8=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/services/nodeFlowExecutionService.ts  |   47 +-
 .../SplitPanelLayoutComponent.tsx             |  412 ++-
 .../SplitPanelLayoutConfigPanel.tsx           | 2570 ++++++++++-------
 .../components/split-panel-layout/types.ts    |   21 +-
 4 files changed, 1806 insertions(+), 1244 deletions(-)

diff --git a/backend-node/src/services/nodeFlowExecutionService.ts b/backend-node/src/services/nodeFlowExecutionService.ts
index a7333af4..461cd8d2 100644
--- a/backend-node/src/services/nodeFlowExecutionService.ts
+++ b/backend-node/src/services/nodeFlowExecutionService.ts
@@ -1646,7 +1646,18 @@ export class NodeFlowExecutionService {
         // WHERE 조건 생성
         const whereClauses: string[] = [];
         whereConditions?.forEach((condition: any) => {
-          const condValue = data[condition.field];
+          // 🔥 수정: sourceField가 있으면 소스 데이터에서 값을 가져옴
+          let condValue: any;
+          if (condition.sourceField) {
+            condValue = data[condition.sourceField];
+          } else if (
+            condition.staticValue !== undefined &&
+            condition.staticValue !== ""
+          ) {
+            condValue = condition.staticValue;
+          } else {
+            condValue = data[condition.field];
+          }
 
           if (condition.operator === "IS NULL") {
             whereClauses.push(`${condition.field} IS NULL`);
@@ -1987,7 +1998,18 @@ export class NodeFlowExecutionService {
 
         // WHERE 조건 생성
         whereConditions?.forEach((condition: any) => {
-          const condValue = data[condition.field];
+          // 🔥 수정: sourceField가 있으면 소스 데이터에서 값을 가져옴
+          let condValue: any;
+          if (condition.sourceField) {
+            condValue = data[condition.sourceField];
+          } else if (
+            condition.staticValue !== undefined &&
+            condition.staticValue !== ""
+          ) {
+            condValue = condition.staticValue;
+          } else {
+            condValue = data[condition.field];
+          }
 
           if (condition.operator === "IS NULL") {
             whereClauses.push(`${condition.field} IS NULL`);
@@ -2889,7 +2911,26 @@ export class NodeFlowExecutionService {
 
     const values: any[] = [];
     const clauses = conditions.map((condition, index) => {
-      const value = data ? data[condition.field] : condition.value;
+      // 🔥 수정: sourceField가 있으면 소스 데이터에서 값을 가져오고,
+      // 없으면 staticValue 또는 기존 field 사용
+      let value: any;
+      if (data) {
+        if (condition.sourceField) {
+          // sourceField가 있으면 소스 데이터에서 해당 필드의 값을 가져옴
+          value = data[condition.sourceField];
+        } else if (
+          condition.staticValue !== undefined &&
+          condition.staticValue !== ""
+        ) {
+          // staticValue가 있으면 사용
+          value = condition.staticValue;
+        } else {
+          // 둘 다 없으면 기존 방식 (field로 값 조회)
+          value = data[condition.field];
+        }
+      } else {
+        value = condition.value;
+      }
       values.push(value);
 
       // 연산자를 SQL 문법으로 변환
diff --git a/frontend/lib/registry/components/split-panel-layout/SplitPanelLayoutComponent.tsx b/frontend/lib/registry/components/split-panel-layout/SplitPanelLayoutComponent.tsx
index ac44eded..ba911c3c 100644
--- a/frontend/lib/registry/components/split-panel-layout/SplitPanelLayoutComponent.tsx
+++ b/frontend/lib/registry/components/split-panel-layout/SplitPanelLayoutComponent.tsx
@@ -60,15 +60,15 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
   const resizable = componentConfig.resizable ?? true;
   const minLeftWidth = componentConfig.minLeftWidth || 200;
   const minRightWidth = componentConfig.minRightWidth || 300;
-  
+
   // 필드 표시 유틸리티 (하드코딩 제거, 동적으로 작동)
   const shouldShowField = (fieldName: string): boolean => {
     const lower = fieldName.toLowerCase();
-    
+
     // 기본 제외: id, 비밀번호, 토큰, 회사코드
     if (lower === "id" || lower === "company_code" || lower === "company_name") return false;
     if (lower.includes("password") || lower.includes("token")) return false;
-    
+
     // 나머지는 모두 표시!
     return true;
   };
@@ -284,26 +284,102 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
     }));
   }, [leftData, leftGrouping]);
 
-  // 셀 값 포맷팅 함수 (카테고리 타입 처리)
+  // 날짜 포맷팅 헬퍼 함수
+  const formatDateValue = useCallback((value: any, dateFormat: string): string => {
+    if (!value) return "-";
+    const date = new Date(value);
+    if (isNaN(date.getTime())) return String(value);
+
+    if (dateFormat === "relative") {
+      // 상대 시간 (예: 3일 전, 2시간 전)
+      const now = new Date();
+      const diffMs = now.getTime() - date.getTime();
+      const diffSec = Math.floor(diffMs / 1000);
+      const diffMin = Math.floor(diffSec / 60);
+      const diffHour = Math.floor(diffMin / 60);
+      const diffDay = Math.floor(diffHour / 24);
+      const diffMonth = Math.floor(diffDay / 30);
+      const diffYear = Math.floor(diffMonth / 12);
+
+      if (diffYear > 0) return `${diffYear}년 전`;
+      if (diffMonth > 0) return `${diffMonth}개월 전`;
+      if (diffDay > 0) return `${diffDay}일 전`;
+      if (diffHour > 0) return `${diffHour}시간 전`;
+      if (diffMin > 0) return `${diffMin}분 전`;
+      return "방금 전";
+    }
+
+    // 포맷 문자열 치환
+    return dateFormat
+      .replace("YYYY", String(date.getFullYear()))
+      .replace("MM", String(date.getMonth() + 1).padStart(2, "0"))
+      .replace("DD", String(date.getDate()).padStart(2, "0"))
+      .replace("HH", String(date.getHours()).padStart(2, "0"))
+      .replace("mm", String(date.getMinutes()).padStart(2, "0"))
+      .replace("ss", String(date.getSeconds()).padStart(2, "0"));
+  }, []);
+
+  // 숫자 포맷팅 헬퍼 함수
+  const formatNumberValue = useCallback((value: any, format: any): string => {
+    if (value === null || value === undefined || value === "") return "-";
+    const num = typeof value === "number" ? value : parseFloat(String(value));
+    if (isNaN(num)) return String(value);
+
+    const options: Intl.NumberFormatOptions = {
+      minimumFractionDigits: format?.decimalPlaces ?? 0,
+      maximumFractionDigits: format?.decimalPlaces ?? 10,
+      useGrouping: format?.thousandSeparator ?? false,
+    };
+
+    let result = num.toLocaleString("ko-KR", options);
+    if (format?.prefix) result = format.prefix + result;
+    if (format?.suffix) result = result + format.suffix;
+    return result;
+  }, []);
+
+  // 셀 값 포맷팅 함수 (카테고리 타입 처리 + 날짜/숫자 포맷)
   const formatCellValue = useCallback(
     (
       columnName: string,
       value: any,
       categoryMappings: Record<string, Record<string, { label: string; color?: string }>>,
+      format?: {
+        type?: "number" | "currency" | "date" | "text";
+        thousandSeparator?: boolean;
+        decimalPlaces?: number;
+        prefix?: string;
+        suffix?: string;
+        dateFormat?: string;
+      },
     ) => {
       if (value === null || value === undefined) return "-";
 
+      // 🆕 날짜 포맷 적용
+      if (format?.type === "date" || format?.dateFormat) {
+        return formatDateValue(value, format?.dateFormat || "YYYY-MM-DD");
+      }
+
+      // 🆕 숫자 포맷 적용
+      if (
+        format?.type === "number" ||
+        format?.type === "currency" ||
+        format?.thousandSeparator ||
+        format?.decimalPlaces !== undefined
+      ) {
+        return formatNumberValue(value, format);
+      }
+
       // 🆕 카테고리 매핑 찾기 (여러 키 형태 시도)
       // 1. 전체 컬럼명 (예: "item_info.material")
       // 2. 컬럼명만 (예: "material")
       let mapping = categoryMappings[columnName];
-      
+
       if (!mapping && columnName.includes(".")) {
         // 조인된 컬럼의 경우 컬럼명만으로 다시 시도
         const simpleColumnName = columnName.split(".").pop() || columnName;
         mapping = categoryMappings[simpleColumnName];
       }
-      
+
       if (mapping && mapping[String(value)]) {
         const categoryData = mapping[String(value)];
         const displayLabel = categoryData.label || String(value);
@@ -323,10 +399,28 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
         );
       }
 
+      // 🆕 자동 날짜 감지 (ISO 8601 형식 또는 Date 객체)
+      if (typeof value === "string" && value.match(/^\d{4}-\d{2}-\d{2}(T|\s)/)) {
+        return formatDateValue(value, "YYYY-MM-DD");
+      }
+
+      // 🆕 자동 숫자 감지 (숫자 또는 숫자 문자열) - 소수점 있으면 정수로 변환
+      if (typeof value === "number") {
+        // 숫자인 경우 정수로 표시 (소수점 제거)
+        return Number.isInteger(value) ? String(value) : String(Math.round(value * 100) / 100);
+      }
+      if (typeof value === "string" && /^-?\d+\.?\d*$/.test(value.trim())) {
+        // 숫자 문자열인 경우 (예: "5.00" → "5")
+        const num = parseFloat(value);
+        if (!isNaN(num)) {
+          return Number.isInteger(num) ? String(num) : String(Math.round(num * 100) / 100);
+        }
+      }
+
       // 일반 값
       return String(value);
     },
-    [],
+    [formatDateValue, formatNumberValue],
   );
 
   // 좌측 데이터 로드
@@ -392,7 +486,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
         if (relationshipType === "detail") {
           // 상세 모드: 동일 테이블의 상세 정보 (🆕 엔티티 조인 활성화)
           const primaryKey = leftItem.id || leftItem.ID || Object.values(leftItem)[0];
-          
+
           // 🆕 엔티티 조인 API 사용
           const { entityJoinApi } = await import("@/lib/api/entityJoin");
           const result = await entityJoinApi.getTableDataWithJoins(rightTableName, {
@@ -400,29 +494,81 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
             enableEntityJoin: true, // 엔티티 조인 활성화
             size: 1,
           });
-          
+
           const detail = result.items && result.items.length > 0 ? result.items[0] : null;
           setRightData(detail);
         } else if (relationshipType === "join") {
           // 조인 모드: 다른 테이블의 관련 데이터 (여러 개)
-          const leftColumn = componentConfig.rightPanel?.relation?.leftColumn;
-          const rightColumn = componentConfig.rightPanel?.relation?.foreignKey;
+          const keys = componentConfig.rightPanel?.relation?.keys;
           const leftTable = componentConfig.leftPanel?.tableName;
 
-          if (leftColumn && rightColumn && leftTable) {
-            const leftValue = leftItem[leftColumn];
-            const joinedData = await dataApi.getJoinedData(
-              leftTable,
-              rightTableName,
-              leftColumn,
-              rightColumn,
-              leftValue,
-              componentConfig.rightPanel?.dataFilter, // 🆕 데이터 필터 전달
-              true, // 🆕 Entity 조인 활성화
-              componentConfig.rightPanel?.columns, // 🆕 표시 컬럼 전달 (item_info.item_name 등)
-              componentConfig.rightPanel?.deduplication, // 🆕 중복 제거 설정 전달
-            );
-            setRightData(joinedData || []); // 모든 관련 레코드 (배열)
+          // 🆕 복합키 지원
+          if (keys && keys.length > 0 && leftTable) {
+            // 복합키: 여러 조건으로 필터링
+            const { entityJoinApi } = await import("@/lib/api/entityJoin");
+
+            // 복합키 조건 생성
+            const searchConditions: Record<string, any> = {};
+            keys.forEach((key) => {
+              if (key.leftColumn && key.rightColumn && leftItem[key.leftColumn] !== undefined) {
+                searchConditions[key.rightColumn] = leftItem[key.leftColumn];
+              }
+            });
+
+            console.log("🔗 [분할패널] 복합키 조건:", searchConditions);
+
+            // 엔티티 조인 API로 데이터 조회
+            const result = await entityJoinApi.getTableDataWithJoins(rightTableName, {
+              search: searchConditions,
+              enableEntityJoin: true,
+              size: 1000,
+            });
+
+            console.log("🔗 [분할패널] 복합키 조회 결과:", result);
+
+            // 추가 dataFilter 적용
+            let filteredData = result.data || [];
+            const dataFilter = componentConfig.rightPanel?.dataFilter;
+            if (dataFilter?.enabled && dataFilter.conditions?.length > 0) {
+              filteredData = filteredData.filter((item: any) => {
+                return dataFilter.conditions.every((cond: any) => {
+                  const value = item[cond.column];
+                  const condValue = cond.value;
+                  switch (cond.operator) {
+                    case "equals":
+                      return value === condValue;
+                    case "notEquals":
+                      return value !== condValue;
+                    case "contains":
+                      return String(value).includes(String(condValue));
+                    default:
+                      return true;
+                  }
+                });
+              });
+            }
+
+            setRightData(filteredData);
+          } else {
+            // 단일키 (하위 호환성)
+            const leftColumn = componentConfig.rightPanel?.relation?.leftColumn;
+            const rightColumn = componentConfig.rightPanel?.relation?.foreignKey;
+
+            if (leftColumn && rightColumn && leftTable) {
+              const leftValue = leftItem[leftColumn];
+              const joinedData = await dataApi.getJoinedData(
+                leftTable,
+                rightTableName,
+                leftColumn,
+                rightColumn,
+                leftValue,
+                componentConfig.rightPanel?.dataFilter, // 🆕 데이터 필터 전달
+                true, // 🆕 Entity 조인 활성화
+                componentConfig.rightPanel?.columns, // 🆕 표시 컬럼 전달 (item_info.item_name 등)
+                componentConfig.rightPanel?.deduplication, // 🆕 중복 제거 설정 전달
+              );
+              setRightData(joinedData || []); // 모든 관련 레코드 (배열)
+            }
           }
         }
       } catch (error) {
@@ -711,7 +857,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
         // 🆕 우측 패널 컬럼 설정에서 조인된 테이블 추출
         const rightColumns = componentConfig.rightPanel?.columns || [];
         const tablesToLoad = new Set<string>([rightTableName]);
-        
+
         // 컬럼명에서 테이블명 추출 (예: "item_info.material" -> "item_info")
         rightColumns.forEach((col: any) => {
           const colName = col.name || col.columnName;
@@ -744,15 +890,15 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                       color: item.color,
                     };
                   });
-                  
+
                   // 조인된 테이블의 경우 "테이블명.컬럼명" 형태로 저장
                   const mappingKey = tableName === rightTableName ? columnName : `${tableName}.${columnName}`;
                   mappings[mappingKey] = valueMap;
-                  
+
                   // 🆕 컬럼명만으로도 접근할 수 있도록 추가 저장 (모든 테이블)
                   // 기존 매핑이 있으면 병합, 없으면 새로 생성
                   mappings[columnName] = { ...(mappings[columnName] || {}), ...valueMap };
-                  
+
                   console.log(`✅ 우측 카테고리 매핑 로드 [${mappingKey}]:`, valueMap);
                   console.log(`✅ 우측 카테고리 매핑 (컬럼명만) [${columnName}]:`, mappings[columnName]);
                 }
@@ -818,15 +964,15 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
       // 🆕 우측 패널 수정 버튼 설정 확인
       if (panel === "right" && componentConfig.rightPanel?.editButton?.mode === "modal") {
         const modalScreenId = componentConfig.rightPanel?.editButton?.modalScreenId;
-        
+
         if (modalScreenId) {
           // 커스텀 모달 화면 열기
           const rightTableName = componentConfig.rightPanel?.tableName || "";
-          
+
           // Primary Key 찾기 (우선순위: id > ID > 첫 번째 필드)
           let primaryKeyName = "id";
           let primaryKeyValue: any;
-          
+
           if (item.id !== undefined && item.id !== null) {
             primaryKeyName = "id";
             primaryKeyValue = item.id;
@@ -839,29 +985,29 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
             primaryKeyName = firstKey;
             primaryKeyValue = item[firstKey];
           }
-          
-          console.log(`✅ 수정 모달 열기:`, {
+
+          console.log("✅ 수정 모달 열기:", {
             tableName: rightTableName,
             primaryKeyName,
             primaryKeyValue,
             screenId: modalScreenId,
             fullItem: item,
           });
-          
+
           // modalDataStore에도 저장 (호환성 유지)
           import("@/stores/modalDataStore").then(({ useModalDataStore }) => {
             useModalDataStore.getState().setData(rightTableName, [item]);
           });
-          
+
           // 🆕 groupByColumns 추출
           const groupByColumns = componentConfig.rightPanel?.editButton?.groupByColumns || [];
-          
+
           console.log("🔧 [SplitPanel] 수정 버튼 클릭 - groupByColumns 확인:", {
             groupByColumns,
             editButtonConfig: componentConfig.rightPanel?.editButton,
             hasGroupByColumns: groupByColumns.length > 0,
           });
-          
+
           // ScreenModal 열기 이벤트 발생 (URL 파라미터로 ID + groupByColumns 전달)
           window.dispatchEvent(
             new CustomEvent("openScreenModal", {
@@ -878,18 +1024,18 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
               },
             }),
           );
-          
+
           console.log("✅ [SplitPanel] openScreenModal 이벤트 발생:", {
             screenId: modalScreenId,
             editId: primaryKeyValue,
             tableName: rightTableName,
             groupByColumns: groupByColumns.length > 0 ? JSON.stringify(groupByColumns) : "없음",
           });
-          
+
           return;
         }
       }
-      
+
       // 기존 자동 편집 모드 (인라인 편집 모달)
       setEditModalPanel(panel);
       setEditModalItem(item);
@@ -1026,7 +1172,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
 
     try {
       console.log("🗑️ 데이터 삭제:", { tableName, primaryKey });
-      
+
       // 🔍 중복 제거 설정 디버깅
       console.log("🔍 중복 제거 디버깅:", {
         panel: deleteModalPanel,
@@ -1041,25 +1187,25 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
       if (deleteModalPanel === "right" && componentConfig.rightPanel?.dataFilter?.deduplication?.enabled) {
         const deduplication = componentConfig.rightPanel.dataFilter.deduplication;
         const groupByColumn = deduplication.groupByColumn;
-        
+
         if (groupByColumn && deleteModalItem[groupByColumn]) {
           const groupValue = deleteModalItem[groupByColumn];
           console.log(`🔗 중복 제거 활성화: ${groupByColumn} = ${groupValue} 기준으로 모든 레코드 삭제`);
-          
+
           // groupByColumn 값으로 필터링하여 삭제
           const filterConditions: Record<string, any> = {
             [groupByColumn]: groupValue,
           };
-          
+
           // 좌측 패널의 선택된 항목 정보도 포함 (customer_id 등)
           if (selectedLeftItem && componentConfig.rightPanel?.mode === "join") {
             const leftColumn = componentConfig.rightPanel.join.leftColumn;
             const rightColumn = componentConfig.rightPanel.join.rightColumn;
             filterConditions[rightColumn] = selectedLeftItem[leftColumn];
           }
-          
+
           console.log("🗑️ 그룹 삭제 조건:", filterConditions);
-          
+
           // 그룹 삭제 API 호출
           result = await dataApi.deleteGroupRecords(tableName, filterConditions);
         } else {
@@ -1527,6 +1673,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                                 leftColumnLabels[colName] || (typeof col === "object" ? col.label : null) || colName,
                               width: typeof col === "object" ? col.width : 150,
                               align: (typeof col === "object" ? col.align : "left") as "left" | "center" | "right",
+                              format: typeof col === "object" ? col.format : undefined, // 🆕 포맷 설정 포함
                             };
                           })
                         : Object.keys(filteredData[0] || {})
@@ -1537,6 +1684,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                               label: leftColumnLabels[key] || key,
                               width: 150,
                               align: "left" as const,
+                              format: undefined, // 🆕 기본값
                             }));
 
                     // 🔧 그룹화된 데이터 렌더링
@@ -1587,7 +1735,12 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                                             className="px-3 py-2 text-sm whitespace-nowrap text-gray-900"
                                             style={{ textAlign: col.align || "left" }}
                                           >
-                                            {formatCellValue(col.name, item[col.name], leftCategoryMappings)}
+                                            {formatCellValue(
+                                              col.name,
+                                              item[col.name],
+                                              leftCategoryMappings,
+                                              col.format,
+                                            )}
                                           </td>
                                         ))}
                                       </tr>
@@ -1643,7 +1796,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                                       className="px-3 py-2 text-sm whitespace-nowrap text-gray-900"
                                       style={{ textAlign: col.align || "left" }}
                                     >
-                                      {formatCellValue(col.name, item[col.name], leftCategoryMappings)}
+                                      {formatCellValue(col.name, item[col.name], leftCategoryMappings, col.format)}
                                     </td>
                                   ))}
                                 </tr>
@@ -1747,7 +1900,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                       } else {
                         // 설정된 컬럼이 없으면 자동으로 첫 2개 필드 표시
                         const keys = Object.keys(item).filter(
-                          (k) => k !== "id" && k !== "ID" && k !== "children" && k !== "level" && shouldShowField(k)
+                          (k) => k !== "id" && k !== "ID" && k !== "children" && k !== "level" && shouldShowField(k),
                         );
                         displayFields = keys.slice(0, 2).map((key) => ({
                           label: leftColumnLabels[key] || key,
@@ -1960,6 +2113,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                         ? displayColumns.map((col) => ({
                             ...col,
                             label: rightColumnLabels[col.name] || col.label || col.name,
+                            format: col.format, // 🆕 포맷 설정 유지
                           }))
                         : Object.keys(filteredData[0] || {})
                             .filter((key) => shouldShowField(key))
@@ -1969,6 +2123,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                               label: rightColumnLabels[key] || key,
                               width: 150,
                               align: "left" as const,
+                              format: undefined, // 🆕 기본값
                             }));
 
                     return (
@@ -2014,7 +2169,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                                         className="px-3 py-2 text-sm whitespace-nowrap text-gray-900"
                                         style={{ textAlign: col.align || "left" }}
                                       >
-                                        {formatCellValue(col.name, item[col.name], rightCategoryMappings)}
+                                        {formatCellValue(col.name, item[col.name], rightCategoryMappings, col.format)}
                                       </td>
                                     ))}
                                     {!isDesignMode && (
@@ -2022,7 +2177,9 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                                         <div className="flex justify-end gap-1">
                                           {(componentConfig.rightPanel?.editButton?.enabled ?? true) && (
                                             <Button
-                                              variant={componentConfig.rightPanel?.editButton?.buttonVariant || "outline"}
+                                              variant={
+                                                componentConfig.rightPanel?.editButton?.buttonVariant || "outline"
+                                              }
                                               size="sm"
                                               onClick={(e) => {
                                                 e.stopPropagation();
@@ -2030,20 +2187,22 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                                               }}
                                               className="h-7"
                                             >
-                                              <Pencil className="h-3 w-3 mr-1" />
+                                              <Pencil className="mr-1 h-3 w-3" />
                                               {componentConfig.rightPanel?.editButton?.buttonLabel || "수정"}
                                             </Button>
                                           )}
-                                          <button
-                                            onClick={(e) => {
-                                              e.stopPropagation();
-                                              handleDeleteClick("right", item);
-                                            }}
-                                            className="rounded p-1 transition-colors hover:bg-red-100"
-                                            title="삭제"
-                                          >
-                                            <Trash2 className="h-4 w-4 text-red-600" />
-                                          </button>
+                                          {(componentConfig.rightPanel?.deleteButton?.enabled ?? true) && (
+                                            <button
+                                              onClick={(e) => {
+                                                e.stopPropagation();
+                                                handleDeleteClick("right", item);
+                                              }}
+                                              className="rounded p-1 transition-colors hover:bg-red-100"
+                                              title={componentConfig.rightPanel?.deleteButton?.buttonLabel || "삭제"}
+                                            >
+                                              <Trash2 className="h-4 w-4 text-red-600" />
+                                            </button>
+                                          )}
                                         </div>
                                       </td>
                                     )}
@@ -2083,26 +2242,28 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                             .map((col) => {
                               // 🆕 엔티티 조인 컬럼 처리 (예: item_info.item_number → item_number 또는 item_id_name)
                               let value = item[col.name];
-                              if (value === undefined && col.name.includes('.')) {
-                                const columnName = col.name.split('.').pop();
+                              if (value === undefined && col.name.includes(".")) {
+                                const columnName = col.name.split(".").pop();
                                 // 1차: 컬럼명 그대로 (예: item_number)
-                                value = item[columnName || ''];
+                                value = item[columnName || ""];
                                 // 2차: item_info.item_number → item_id_name 또는 item_id_item_number 형식 확인
                                 if (value === undefined) {
-                                  const parts = col.name.split('.');
+                                  const parts = col.name.split(".");
                                   if (parts.length === 2) {
                                     const refTable = parts[0]; // item_info
                                     const refColumn = parts[1]; // item_number 또는 item_name
                                     // FK 컬럼명 추론: item_info → item_id
-                                    const fkColumn = refTable.replace('_info', '').replace('_mng', '') + '_id';
-                                    
+                                    const fkColumn = refTable.replace("_info", "").replace("_mng", "") + "_id";
+
                                     // 백엔드에서 반환하는 별칭 패턴:
                                     // 1) item_id_name (기본 referenceColumn)
                                     // 2) item_id_item_name (추가 컬럼)
-                                    if (refColumn === refTable.replace('_info', '').replace('_mng', '') + '_number' ||
-                                        refColumn === refTable.replace('_info', '').replace('_mng', '') + '_code') {
+                                    if (
+                                      refColumn === refTable.replace("_info", "").replace("_mng", "") + "_number" ||
+                                      refColumn === refTable.replace("_info", "").replace("_mng", "") + "_code"
+                                    ) {
                                       // 기본 참조 컬럼 (item_number, customer_code 등)
-                                      const aliasKey = fkColumn + '_name';
+                                      const aliasKey = fkColumn + "_name";
                                       value = item[aliasKey];
                                     } else {
                                       // 추가 컬럼 (item_name, customer_name 등)
@@ -2120,26 +2281,28 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                             .map((col) => {
                               // 🆕 엔티티 조인 컬럼 처리
                               let value = item[col.name];
-                              if (value === undefined && col.name.includes('.')) {
-                                const columnName = col.name.split('.').pop();
+                              if (value === undefined && col.name.includes(".")) {
+                                const columnName = col.name.split(".").pop();
                                 // 1차: 컬럼명 그대로
-                                value = item[columnName || ''];
+                                value = item[columnName || ""];
                                 // 2차: {fk_column}_name 또는 {fk_column}_{ref_column} 형식 확인
                                 if (value === undefined) {
-                                  const parts = col.name.split('.');
+                                  const parts = col.name.split(".");
                                   if (parts.length === 2) {
                                     const refTable = parts[0]; // item_info
                                     const refColumn = parts[1]; // item_number 또는 item_name
                                     // FK 컬럼명 추론: item_info → item_id
-                                    const fkColumn = refTable.replace('_info', '').replace('_mng', '') + '_id';
-                                    
+                                    const fkColumn = refTable.replace("_info", "").replace("_mng", "") + "_id";
+
                                     // 백엔드에서 반환하는 별칭 패턴:
                                     // 1) item_id_name (기본 referenceColumn)
                                     // 2) item_id_item_name (추가 컬럼)
-                                    if (refColumn === refTable.replace('_info', '').replace('_mng', '') + '_number' ||
-                                        refColumn === refTable.replace('_info', '').replace('_mng', '') + '_code') {
+                                    if (
+                                      refColumn === refTable.replace("_info", "").replace("_mng", "") + "_number" ||
+                                      refColumn === refTable.replace("_info", "").replace("_mng", "") + "_code"
+                                    ) {
                                       // 기본 참조 컬럼
-                                      const aliasKey = fkColumn + '_name';
+                                      const aliasKey = fkColumn + "_name";
                                       value = item[aliasKey];
                                     } else {
                                       // 추가 컬럼
@@ -2158,11 +2321,11 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                           firstValues = Object.entries(item)
                             .filter(([key]) => !key.toLowerCase().includes("id"))
                             .slice(0, summaryCount)
-                            .map(([key, value]) => [key, value, ''] as [string, any, string]);
+                            .map(([key, value]) => [key, value, ""] as [string, any, string]);
 
                           allValues = Object.entries(item)
                             .filter(([key, value]) => value !== null && value !== undefined && value !== "")
-                            .map(([key, value]) => [key, value, ''] as [string, any, string]);
+                            .map(([key, value]) => [key, value, ""] as [string, any, string]);
                         }
 
                         return (
@@ -2180,30 +2343,15 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                                   <div className="flex flex-wrap items-center gap-x-4 gap-y-2">
                                     {firstValues.map(([key, value, label], idx) => {
                                       // 포맷 설정 및 볼드 설정 찾기
-                                      const colConfig = rightColumns?.find(c => c.name === key);
+                                      const colConfig = rightColumns?.find((c) => c.name === key);
                                       const format = colConfig?.format;
                                       const boldValue = colConfig?.bold ?? false;
-                                      
-                                      // 🆕 카테고리 매핑 적용
-                                      const formattedValue = formatCellValue(key, value, rightCategoryMappings);
-                                      
-                                      // 숫자 포맷 적용 (카테고리가 아닌 경우만)
-                                      let displayValue: React.ReactNode = formattedValue;
-                                      if (typeof formattedValue === 'string' && value !== null && value !== undefined && value !== "" && format) {
-                                        const numValue = typeof value === 'number' ? value : parseFloat(String(value));
-                                        if (!isNaN(numValue)) {
-                                          displayValue = numValue.toLocaleString('ko-KR', {
-                                            minimumFractionDigits: format.decimalPlaces ?? 0,
-                                            maximumFractionDigits: format.decimalPlaces ?? 10,
-                                            useGrouping: format.thousandSeparator ?? false,
-                                          });
-                                          if (format.prefix) displayValue = format.prefix + displayValue;
-                                          if (format.suffix) displayValue = displayValue + format.suffix;
-                                        }
-                                      }
-                                      
+
+                                      // 🆕 포맷 적용 (날짜/숫자/카테고리)
+                                      const displayValue = formatCellValue(key, value, rightCategoryMappings, format);
+
                                       const showLabel = componentConfig.rightPanel?.summaryShowLabel ?? true;
-                                      
+
                                       return (
                                         <div key={key} className="flex items-baseline gap-1">
                                           {showLabel && (
@@ -2211,8 +2359,8 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                                               {label || getColumnLabel(key)}:
                                             </span>
                                           )}
-                                          <span 
-                                            className={`text-foreground text-sm ${boldValue ? 'font-semibold' : ''}`}
+                                          <span
+                                            className={`text-foreground text-sm ${boldValue ? "font-semibold" : ""}`}
                                           >
                                             {displayValue}
                                           </span>
@@ -2233,19 +2381,19 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                                       }}
                                       className="h-7"
                                     >
-                                      <Pencil className="h-3 w-3 mr-1" />
+                                      <Pencil className="mr-1 h-3 w-3" />
                                       {componentConfig.rightPanel?.editButton?.buttonLabel || "수정"}
                                     </Button>
                                   )}
                                   {/* 삭제 버튼 */}
-                                  {!isDesignMode && (
+                                  {!isDesignMode && (componentConfig.rightPanel?.deleteButton?.enabled ?? true) && (
                                     <button
                                       onClick={(e) => {
                                         e.stopPropagation();
                                         handleDeleteClick("right", item);
                                       }}
                                       className="rounded p-1 transition-colors hover:bg-red-100"
-                                      title="삭제"
+                                      title={componentConfig.rightPanel?.deleteButton?.buttonLabel || "삭제"}
                                     >
                                       <Trash2 className="h-4 w-4 text-red-600" />
                                     </button>
@@ -2274,27 +2422,12 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                                     <tbody className="divide-border divide-y">
                                       {allValues.map(([key, value, label]) => {
                                         // 포맷 설정 찾기
-                                        const colConfig = rightColumns?.find(c => c.name === key);
+                                        const colConfig = rightColumns?.find((c) => c.name === key);
                                         const format = colConfig?.format;
-                                        
-                                        // 🆕 카테고리 매핑 적용
-                                        const formattedValue = formatCellValue(key, value, rightCategoryMappings);
-                                        
-                                        // 숫자 포맷 적용 (카테고리가 아닌 경우만)
-                                        let displayValue: React.ReactNode = formattedValue;
-                                        if (typeof formattedValue === 'string' && value !== null && value !== undefined && value !== "" && format) {
-                                          const numValue = typeof value === 'number' ? value : parseFloat(String(value));
-                                          if (!isNaN(numValue)) {
-                                            displayValue = numValue.toLocaleString('ko-KR', {
-                                              minimumFractionDigits: format.decimalPlaces ?? 0,
-                                              maximumFractionDigits: format.decimalPlaces ?? 10,
-                                              useGrouping: format.thousandSeparator ?? false,
-                                            });
-                                            if (format.prefix) displayValue = format.prefix + displayValue;
-                                            if (format.suffix) displayValue = displayValue + format.suffix;
-                                          }
-                                        }
-                                        
+
+                                        // 🆕 포맷 적용 (날짜/숫자/카테고리)
+                                        const displayValue = formatCellValue(key, value, rightCategoryMappings, format);
+
                                         return (
                                           <tr key={key} className="hover:bg-muted">
                                             <td className="text-muted-foreground px-3 py-2 font-medium whitespace-nowrap">
@@ -2310,8 +2443,8 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                               </div>
                             )}
                           </div>
-                          );
-                        })}
+                        );
+                      })}
                     </div>
                   ) : (
                     <div className="text-muted-foreground py-8 text-center text-sm">
@@ -2336,21 +2469,24 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                     console.log("🔍 [디버깅] 상세 모드 표시 로직:");
                     console.log("  📋 rightData 전체:", rightData);
                     console.log("  📋 rightData keys:", Object.keys(rightData));
-                    console.log("  ⚙️ 설정된 컬럼:", rightColumns.map((c) => `${c.name} (${c.label})`));
-                    
+                    console.log(
+                      "  ⚙️ 설정된 컬럼:",
+                      rightColumns.map((c) => `${c.name} (${c.label})`),
+                    );
+
                     // 설정된 컬럼만 표시
                     displayEntries = rightColumns
                       .map((col) => {
                         // 🆕 엔티티 조인 컬럼 처리 (예: item_info.item_name → item_name)
                         let value = rightData[col.name];
                         console.log(`  🔎 컬럼 "${col.name}": 직접 접근 = ${value}`);
-                        
-                        if (value === undefined && col.name.includes('.')) {
-                          const columnName = col.name.split('.').pop();
-                          value = rightData[columnName || ''];
+
+                        if (value === undefined && col.name.includes(".")) {
+                          const columnName = col.name.split(".").pop();
+                          value = rightData[columnName || ""];
                           console.log(`    → 변환 후 "${columnName}" 접근 = ${value}`);
                         }
-                        
+
                         return [col.name, value, col.label] as [string, any, string];
                       })
                       .filter(([key, value]) => {
diff --git a/frontend/lib/registry/components/split-panel-layout/SplitPanelLayoutConfigPanel.tsx b/frontend/lib/registry/components/split-panel-layout/SplitPanelLayoutConfigPanel.tsx
index 387ef85f..bbb115e0 100644
--- a/frontend/lib/registry/components/split-panel-layout/SplitPanelLayoutConfigPanel.tsx
+++ b/frontend/lib/registry/components/split-panel-layout/SplitPanelLayoutConfigPanel.tsx
@@ -71,9 +71,7 @@ const GroupByColumnsSelector: React.FC<{
   if (!tableName) {
     return (
       <div className="rounded-md border border-dashed p-3">
-        <p className="text-xs text-muted-foreground text-center">
-          먼저 우측 패널의 테이블을 선택하세요
-        </p>
+        <p className="text-muted-foreground text-center text-xs">먼저 우측 패널의 테이블을 선택하세요</p>
       </div>
     );
   }
@@ -83,14 +81,14 @@ const GroupByColumnsSelector: React.FC<{
       <Label className="text-xs">그룹핑 기준 컬럼</Label>
       {loading ? (
         <div className="rounded-md border p-3">
-          <p className="text-xs text-muted-foreground text-center">로딩 중...</p>
+          <p className="text-muted-foreground text-center text-xs">로딩 중...</p>
         </div>
       ) : columns.length === 0 ? (
         <div className="rounded-md border border-dashed p-3">
-          <p className="text-xs text-muted-foreground text-center">컬럼을 찾을 수 없습니다</p>
+          <p className="text-muted-foreground text-center text-xs">컬럼을 찾을 수 없습니다</p>
         </div>
       ) : (
-        <div className="space-y-1 rounded-md border p-3 max-h-[200px] overflow-y-auto">
+        <div className="max-h-[200px] space-y-1 overflow-y-auto rounded-md border p-3">
           {columns.map((col) => (
             <div key={col.columnName} className="flex items-center gap-2">
               <Checkbox
@@ -98,10 +96,7 @@ const GroupByColumnsSelector: React.FC<{
                 checked={selectedColumns.includes(col.columnName)}
                 onCheckedChange={() => toggleColumn(col.columnName)}
               />
-              <label
-                htmlFor={`groupby-${col.columnName}`}
-                className="text-xs cursor-pointer flex-1"
-              >
+              <label htmlFor={`groupby-${col.columnName}`} className="flex-1 cursor-pointer text-xs">
                 {col.columnLabel || col.columnName}
                 <span className="text-muted-foreground ml-1">({col.columnName})</span>
               </label>
@@ -109,7 +104,7 @@ const GroupByColumnsSelector: React.FC<{
           ))}
         </div>
       )}
-      <p className="text-[10px] text-muted-foreground mt-1">
+      <p className="text-muted-foreground mt-1 text-[10px]">
         선택된 컬럼: {selectedColumns.length > 0 ? selectedColumns.join(", ") : "없음"}
         <br />
         같은 값을 가진 모든 레코드를 함께 불러옵니다
@@ -135,7 +130,9 @@ const ScreenSelector: React.FC<{
       try {
         const { screenApi } = await import("@/lib/api/screen");
         const response = await screenApi.getScreens({ page: 1, size: 1000 });
-        setScreens(response.data.map((s) => ({ screenId: s.screenId, screenName: s.screenName, screenCode: s.screenCode })));
+        setScreens(
+          response.data.map((s) => ({ screenId: s.screenId, screenName: s.screenName, screenCode: s.screenCode })),
+        );
       } catch (error) {
         console.error("화면 목록 로드 실패:", error);
       } finally {
@@ -161,11 +158,11 @@ const ScreenSelector: React.FC<{
           <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
         </Button>
       </PopoverTrigger>
-      <PopoverContent className="p-0 w-[400px]" align="start">
+      <PopoverContent className="w-[400px] p-0" align="start">
         <Command>
           <CommandInput placeholder="화면 검색..." className="text-xs" />
           <CommandList>
-            <CommandEmpty className="text-xs py-6 text-center">화면을 찾을 수 없습니다.</CommandEmpty>
+            <CommandEmpty className="py-6 text-center text-xs">화면을 찾을 수 없습니다.</CommandEmpty>
             <CommandGroup className="max-h-[300px] overflow-auto">
               {screens.map((screen) => (
                 <CommandItem
@@ -177,12 +174,10 @@ const ScreenSelector: React.FC<{
                   }}
                   className="text-xs"
                 >
-                  <Check
-                    className={cn("mr-2 h-4 w-4", value === screen.screenId ? "opacity-100" : "opacity-0")}
-                  />
+                  <Check className={cn("mr-2 h-4 w-4", value === screen.screenId ? "opacity-100" : "opacity-0")} />
                   <div className="flex flex-col">
                     <span className="font-medium">{screen.screenName}</span>
-                    <span className="text-[10px] text-muted-foreground">{screen.screenCode}</span>
+                    <span className="text-muted-foreground text-[10px]">{screen.screenCode}</span>
                   </div>
                 </CommandItem>
               ))}
@@ -213,7 +208,7 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
   // 엔티티 참조 테이블 컬럼
   type EntityRefTable = { tableName: string; columns: ColumnInfo[] };
   const [entityReferenceTables, setEntityReferenceTables] = useState<Record<string, EntityRefTable[]>>({});
-  
+
   // 🆕 입력 필드용 로컬 상태
   const [isUserEditing, setIsUserEditing] = useState(false);
   const [localTitles, setLocalTitles] = useState({
@@ -223,7 +218,7 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
 
   // 관계 타입
   const relationshipType = config.rightPanel?.relation?.type || "detail";
-  
+
   // config 변경 시 로컬 타이틀 동기화 (사용자가 입력 중이 아닐 때만)
   useEffect(() => {
     if (!isUserEditing) {
@@ -273,7 +268,7 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
     if (leftTableName && loadedTableColumns[leftTableName] && config.leftPanel?.showAdd) {
       const currentAddModalColumns = config.leftPanel?.addModalColumns || [];
       const updatedColumns = ensurePrimaryKeysInAddModal(leftTableName, currentAddModalColumns);
-      
+
       // PK가 추가되었으면 업데이트
       if (updatedColumns.length !== currentAddModalColumns.length) {
         console.log(`🔄 좌측 패널: PK 컬럼 자동 추가 (${leftTableName})`);
@@ -289,17 +284,17 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
     if (leftTableName && loadedTableColumns[leftTableName] && config.leftPanel?.showItemAddButton) {
       const currentAddModalColumns = config.leftPanel?.itemAddConfig?.addModalColumns || [];
       const updatedColumns = ensurePrimaryKeysInAddModal(leftTableName, currentAddModalColumns);
-      
+
       // PK가 추가되었으면 업데이트
       if (updatedColumns.length !== currentAddModalColumns.length) {
         console.log(`🔄 좌측 패널 하위 항목 추가: PK 컬럼 자동 추가 (${leftTableName})`);
-        updateLeftPanel({ 
+        updateLeftPanel({
           itemAddConfig: {
             ...config.leftPanel?.itemAddConfig,
             addModalColumns: updatedColumns,
             parentColumn: config.leftPanel?.itemAddConfig?.parentColumn || "",
             sourceColumn: config.leftPanel?.itemAddConfig?.sourceColumn || "",
-          } 
+          },
         });
       }
     }
@@ -312,7 +307,7 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
     if (rightTableName && loadedTableColumns[rightTableName] && config.rightPanel?.showAdd) {
       const currentAddModalColumns = config.rightPanel?.addModalColumns || [];
       const updatedColumns = ensurePrimaryKeysInAddModal(rightTableName, currentAddModalColumns);
-      
+
       // PK가 추가되었으면 업데이트
       if (updatedColumns.length !== currentAddModalColumns.length) {
         console.log(`🔄 우측 패널: PK 컬럼 자동 추가 (${rightTableName})`);
@@ -356,7 +351,7 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
 
       console.log(`✅ 테이블 ${tableName} 컬럼 ${columns.length}개 로드됨:`, columns);
       setLoadedTableColumns((prev) => ({ ...prev, [tableName]: columns }));
-      
+
       // 🆕 엔티티 타입 컬럼의 참조 테이블 컬럼도 로드
       await loadEntityReferenceColumns(tableName, columns);
     } catch (error) {
@@ -366,30 +361,31 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
       setLoadingColumns((prev) => ({ ...prev, [tableName]: false }));
     }
   };
-  
+
   // 🆕 엔티티 참조 테이블의 컬럼 로드
   const loadEntityReferenceColumns = async (sourceTableName: string, columns: ColumnInfo[]) => {
     const entityColumns = columns.filter(
-      col => (col.input_type === 'entity' || col.webType === 'entity') && col.referenceTable
+      (col) => (col.input_type === "entity" || col.webType === "entity") && col.referenceTable,
     );
-    
+
     if (entityColumns.length === 0) {
       return;
     }
-    
-    console.log(`🔗 테이블 ${sourceTableName}의 엔티티 참조 ${entityColumns.length}개 발견:`,
-      entityColumns.map(c => `${c.columnName} -> ${c.referenceTable}`)
+
+    console.log(
+      `🔗 테이블 ${sourceTableName}의 엔티티 참조 ${entityColumns.length}개 발견:`,
+      entityColumns.map((c) => `${c.columnName} -> ${c.referenceTable}`),
     );
-    
-    const referenceTableData: Array<{tableName: string, columns: ColumnInfo[]}> = [];
-    
+
+    const referenceTableData: Array<{ tableName: string; columns: ColumnInfo[] }> = [];
+
     // 각 참조 테이블의 컬럼 로드
     for (const entityCol of entityColumns) {
       const refTableName = entityCol.referenceTable!;
-      
+
       // 이미 로드했으면 스킵
-      if (referenceTableData.some(t => t.tableName === refTableName)) continue;
-      
+      if (referenceTableData.some((t) => t.tableName === refTableName)) continue;
+
       try {
         const refColumnsResponse = await tableTypeApi.getColumns(refTableName);
         const refColumns: ColumnInfo[] = (refColumnsResponse || []).map((col: any) => ({
@@ -399,24 +395,24 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
           dataType: col.dataType || col.data_type || col.dbType,
           input_type: col.inputType || col.input_type,
         }));
-        
+
         referenceTableData.push({ tableName: refTableName, columns: refColumns });
         console.log(`  ✅ 참조 테이블 ${refTableName} 컬럼 ${refColumns.length}개 로드됨`);
       } catch (error) {
         console.error(`  ❌ 참조 테이블 ${refTableName} 컬럼 로드 실패:`, error);
       }
     }
-    
+
     // 참조 테이블 정보 저장
-    setEntityReferenceTables(prev => ({
+    setEntityReferenceTables((prev) => ({
       ...prev,
-      [sourceTableName]: referenceTableData
+      [sourceTableName]: referenceTableData,
     }));
-    
+
     console.log(`✅ [엔티티 참조] ${sourceTableName}의 참조 테이블 저장 완료:`, {
       sourceTableName,
       referenceTableCount: referenceTableData.length,
-      referenceTables: referenceTableData.map(t => `${t.tableName}(${t.columns.length}개)`),
+      referenceTables: referenceTableData.map((t) => `${t.tableName}(${t.columns.length}개)`),
     });
   };
 
@@ -450,7 +446,7 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
   // PK 컬럼을 추가 모달에 자동으로 포함시키는 함수
   const ensurePrimaryKeysInAddModal = (
     tableName: string,
-    existingColumns: Array<{ name: string; label: string; required?: boolean }> = []
+    existingColumns: Array<{ name: string; label: string; required?: boolean }> = [],
   ) => {
     const tableColumns = loadedTableColumns[tableName];
     if (!tableColumns) {
@@ -460,10 +456,13 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
 
     // PK 컬럼 찾기
     const pkColumns = tableColumns.filter((col) => col.isPrimaryKey);
-    console.log(`🔑 테이블 ${tableName}의 PK 컬럼:`, pkColumns.map(c => c.columnName));
+    console.log(
+      `🔑 테이블 ${tableName}의 PK 컬럼:`,
+      pkColumns.map((c) => c.columnName),
+    );
 
     // 자동으로 처리되는 컬럼 (백엔드에서 자동 추가)
-    const autoHandledColumns = ['company_code', 'company_name'];
+    const autoHandledColumns = ["company_code", "company_name"];
 
     // 기존 컬럼 이름 목록
     const existingColumnNames = existingColumns.map((col) => col.name);
@@ -479,7 +478,10 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
       }));
 
     if (pkColumnsToAdd.length > 0) {
-      console.log(`✅ PK 컬럼 ${pkColumnsToAdd.length}개 자동 추가:`, pkColumnsToAdd.map(c => c.name));
+      console.log(
+        `✅ PK 컬럼 ${pkColumnsToAdd.length}개 자동 추가:`,
+        pkColumnsToAdd.map((c) => c.name),
+      );
     }
 
     return [...pkColumnsToAdd, ...existingColumns];
@@ -505,7 +507,7 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
 
   // 좌측 테이블명
   const leftTableName = config.leftPanel?.tableName || screenTableName || "";
-  
+
   // 좌측 테이블 컬럼 (로드된 컬럼 사용)
   const leftTableColumns = useMemo(() => {
     return leftTableName ? loadedTableColumns[leftTableName] || [] : [];
@@ -513,7 +515,7 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
 
   // 우측 테이블명
   const rightTableName = config.rightPanel?.tableName || "";
-  
+
   // 우측 테이블 컬럼 (로드된 컬럼 사용)
   const rightTableColumns = useMemo(() => {
     return rightTableName ? loadedTableColumns[rightTableName] || [] : [];
@@ -581,7 +583,7 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
       </div>
 
       {/* 좌측 패널 설정 */}
-      <div className="space-y-4 border-t pt-4 mt-4">
+      <div className="mt-4 space-y-4 border-t pt-4">
         <h3 className="text-sm font-semibold">좌측 패널 설정 (마스터)</h3>
 
         <div className="space-y-2">
@@ -590,7 +592,7 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
             value={localTitles.left}
             onChange={(e) => {
               setIsUserEditing(true);
-              setLocalTitles(prev => ({ ...prev, left: e.target.value }));
+              setLocalTitles((prev) => ({ ...prev, left: e.target.value }));
             }}
             onBlur={() => {
               setIsUserEditing(false);
@@ -671,16 +673,10 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
             {/* 현재 항목의 값을 가져올 컬럼 (sourceColumn) */}
             <div>
               <Label className="text-xs">현재 항목 ID 컬럼</Label>
-              <p className="mb-2 text-[10px] text-gray-500">
-                선택된 항목의 어떤 컬럼 값을 사용할지 (예: dept_code)
-              </p>
+              <p className="mb-2 text-[10px] text-gray-500">선택된 항목의 어떤 컬럼 값을 사용할지 (예: dept_code)</p>
               <Popover>
                 <PopoverTrigger asChild>
-                  <Button
-                    variant="outline"
-                    role="combobox"
-                    className="h-8 w-full justify-between text-xs"
-                  >
+                  <Button variant="outline" role="combobox" className="h-8 w-full justify-between text-xs">
                     {config.leftPanel?.itemAddConfig?.sourceColumn || "컬럼 선택"}
                     <ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
                   </Button>
@@ -691,34 +687,34 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
                     <CommandEmpty className="text-xs">컬럼을 찾을 수 없습니다.</CommandEmpty>
                     <CommandGroup className="max-h-[200px] overflow-auto">
                       {leftTableColumns
-                        .filter((column) => !['company_code', 'company_name'].includes(column.columnName))
+                        .filter((column) => !["company_code", "company_name"].includes(column.columnName))
                         .map((column) => (
-                        <CommandItem
-                          key={column.columnName}
-                          value={column.columnName}
-                          onSelect={(value) => {
-                            updateLeftPanel({ 
-                              itemAddConfig: {
-                                ...config.leftPanel?.itemAddConfig,
-                                sourceColumn: value,
-                                parentColumn: config.leftPanel?.itemAddConfig?.parentColumn || "",
-                              } 
-                            });
-                          }}
-                          className="text-xs"
-                        >
-                          <Check
-                            className={cn(
-                              "mr-2 h-3 w-3",
-                              config.leftPanel?.itemAddConfig?.sourceColumn === column.columnName ? "opacity-100" : "opacity-0"
-                            )}
-                          />
-                          {column.columnLabel || column.columnName}
-                          <span className="ml-2 text-[10px] text-gray-500">
-                            ({column.columnName})
-                          </span>
-                        </CommandItem>
-                      ))}
+                          <CommandItem
+                            key={column.columnName}
+                            value={column.columnName}
+                            onSelect={(value) => {
+                              updateLeftPanel({
+                                itemAddConfig: {
+                                  ...config.leftPanel?.itemAddConfig,
+                                  sourceColumn: value,
+                                  parentColumn: config.leftPanel?.itemAddConfig?.parentColumn || "",
+                                },
+                              });
+                            }}
+                            className="text-xs"
+                          >
+                            <Check
+                              className={cn(
+                                "mr-2 h-3 w-3",
+                                config.leftPanel?.itemAddConfig?.sourceColumn === column.columnName
+                                  ? "opacity-100"
+                                  : "opacity-0",
+                              )}
+                            />
+                            {column.columnLabel || column.columnName}
+                            <span className="ml-2 text-[10px] text-gray-500">({column.columnName})</span>
+                          </CommandItem>
+                        ))}
                     </CommandGroup>
                   </Command>
                 </PopoverContent>
@@ -733,11 +729,7 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
               </p>
               <Popover>
                 <PopoverTrigger asChild>
-                  <Button
-                    variant="outline"
-                    role="combobox"
-                    className="h-8 w-full justify-between text-xs"
-                  >
+                  <Button variant="outline" role="combobox" className="h-8 w-full justify-between text-xs">
                     {config.leftPanel?.itemAddConfig?.parentColumn || "컬럼 선택"}
                     <ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
                   </Button>
@@ -748,34 +740,34 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
                     <CommandEmpty className="text-xs">컬럼을 찾을 수 없습니다.</CommandEmpty>
                     <CommandGroup className="max-h-[200px] overflow-auto">
                       {leftTableColumns
-                        .filter((column) => !['company_code', 'company_name'].includes(column.columnName))
+                        .filter((column) => !["company_code", "company_name"].includes(column.columnName))
                         .map((column) => (
-                        <CommandItem
-                          key={column.columnName}
-                          value={column.columnName}
-                          onSelect={(value) => {
-                            updateLeftPanel({ 
-                              itemAddConfig: {
-                                ...config.leftPanel?.itemAddConfig,
-                                parentColumn: value,
-                                sourceColumn: config.leftPanel?.itemAddConfig?.sourceColumn || "",
-                              } 
-                            });
-                          }}
-                          className="text-xs"
-                        >
-                          <Check
-                            className={cn(
-                              "mr-2 h-3 w-3",
-                              config.leftPanel?.itemAddConfig?.parentColumn === column.columnName ? "opacity-100" : "opacity-0"
-                            )}
-                          />
-                          {column.columnLabel || column.columnName}
-                          <span className="ml-2 text-[10px] text-gray-500">
-                            ({column.columnName})
-                          </span>
-                        </CommandItem>
-                      ))}
+                          <CommandItem
+                            key={column.columnName}
+                            value={column.columnName}
+                            onSelect={(value) => {
+                              updateLeftPanel({
+                                itemAddConfig: {
+                                  ...config.leftPanel?.itemAddConfig,
+                                  parentColumn: value,
+                                  sourceColumn: config.leftPanel?.itemAddConfig?.sourceColumn || "",
+                                },
+                              });
+                            }}
+                            className="text-xs"
+                          >
+                            <Check
+                              className={cn(
+                                "mr-2 h-3 w-3",
+                                config.leftPanel?.itemAddConfig?.parentColumn === column.columnName
+                                  ? "opacity-100"
+                                  : "opacity-0",
+                              )}
+                            />
+                            {column.columnLabel || column.columnName}
+                            <span className="ml-2 text-[10px] text-gray-500">({column.columnName})</span>
+                          </CommandItem>
+                        ))}
                     </CommandGroup>
                   </Command>
                 </PopoverContent>
@@ -791,17 +783,14 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
                   variant="outline"
                   onClick={() => {
                     const currentColumns = config.leftPanel?.itemAddConfig?.addModalColumns || [];
-                    const newColumns = [
-                      ...currentColumns,
-                      { name: "", label: "", required: false },
-                    ];
-                    updateLeftPanel({ 
+                    const newColumns = [...currentColumns, { name: "", label: "", required: false }];
+                    updateLeftPanel({
                       itemAddConfig: {
                         ...config.leftPanel?.itemAddConfig,
                         addModalColumns: newColumns,
                         parentColumn: config.leftPanel?.itemAddConfig?.parentColumn || "",
                         sourceColumn: config.leftPanel?.itemAddConfig?.sourceColumn || "",
-                      } 
+                      },
                     });
                   }}
                   className="h-6 text-[10px]"
@@ -810,9 +799,7 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
                   컬럼 추가
                 </Button>
               </div>
-              <p className="text-[10px] text-gray-600">
-                하위 항목 추가 시 입력받을 필드를 선택하세요
-              </p>
+              <p className="text-[10px] text-gray-600">하위 항목 추가 시 입력받을 필드를 선택하세요</p>
 
               <div className="space-y-2">
                 {(config.leftPanel?.itemAddConfig?.addModalColumns || []).length === 0 ? (
@@ -821,7 +808,7 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
                   </div>
                 ) : (
                   (config.leftPanel?.itemAddConfig?.addModalColumns || []).map((col, index) => {
-                    const column = leftTableColumns.find(c => c.columnName === col.name);
+                    const column = leftTableColumns.find((c) => c.columnName === col.name);
                     const isPK = column?.isPrimaryKey || false;
 
                     return (
@@ -829,7 +816,7 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
                         key={index}
                         className={cn(
                           "flex items-center gap-2 rounded-md border p-2",
-                          isPK ? "border-yellow-300 bg-yellow-50" : "bg-white"
+                          isPK ? "border-yellow-300 bg-yellow-50" : "bg-white",
                         )}
                       >
                         {isPK && (
@@ -856,41 +843,41 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
                                 <CommandEmpty className="text-xs">컬럼을 찾을 수 없습니다.</CommandEmpty>
                                 <CommandGroup className="max-h-[200px] overflow-auto">
                                   {leftTableColumns
-                                    .filter((column) => !['company_code', 'company_name'].includes(column.columnName))
+                                    .filter((column) => !["company_code", "company_name"].includes(column.columnName))
                                     .map((column) => (
-                                    <CommandItem
-                                      key={column.columnName}
-                                      value={column.columnName}
-                                      onSelect={(value) => {
-                                        const newColumns = [...(config.leftPanel?.itemAddConfig?.addModalColumns || [])];
-                                        newColumns[index] = {
-                                          ...newColumns[index],
-                                          name: value,
-                                          label: column.columnLabel || value,
-                                        };
-                                        updateLeftPanel({ 
-                                          itemAddConfig: {
-                                            ...config.leftPanel?.itemAddConfig,
-                                            addModalColumns: newColumns,
-                                            parentColumn: config.leftPanel?.itemAddConfig?.parentColumn || "",
-                                            sourceColumn: config.leftPanel?.itemAddConfig?.sourceColumn || "",
-                                          } 
-                                        });
-                                      }}
-                                      className="text-xs"
-                                    >
-                                      <Check
-                                        className={cn(
-                                          "mr-2 h-3 w-3",
-                                          col.name === column.columnName ? "opacity-100" : "opacity-0"
-                                        )}
-                                      />
-                                      {column.columnLabel || column.columnName}
-                                      <span className="ml-2 text-[10px] text-gray-500">
-                                        ({column.columnName})
-                                      </span>
-                                    </CommandItem>
-                                  ))}
+                                      <CommandItem
+                                        key={column.columnName}
+                                        value={column.columnName}
+                                        onSelect={(value) => {
+                                          const newColumns = [
+                                            ...(config.leftPanel?.itemAddConfig?.addModalColumns || []),
+                                          ];
+                                          newColumns[index] = {
+                                            ...newColumns[index],
+                                            name: value,
+                                            label: column.columnLabel || value,
+                                          };
+                                          updateLeftPanel({
+                                            itemAddConfig: {
+                                              ...config.leftPanel?.itemAddConfig,
+                                              addModalColumns: newColumns,
+                                              parentColumn: config.leftPanel?.itemAddConfig?.parentColumn || "",
+                                              sourceColumn: config.leftPanel?.itemAddConfig?.sourceColumn || "",
+                                            },
+                                          });
+                                        }}
+                                        className="text-xs"
+                                      >
+                                        <Check
+                                          className={cn(
+                                            "mr-2 h-3 w-3",
+                                            col.name === column.columnName ? "opacity-100" : "opacity-0",
+                                          )}
+                                        />
+                                        {column.columnLabel || column.columnName}
+                                        <span className="ml-2 text-[10px] text-gray-500">({column.columnName})</span>
+                                      </CommandItem>
+                                    ))}
                                 </CommandGroup>
                               </Command>
                             </PopoverContent>
@@ -908,13 +895,13 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
                                   ...newColumns[index],
                                   required: e.target.checked,
                                 };
-                                updateLeftPanel({ 
+                                updateLeftPanel({
                                   itemAddConfig: {
                                     ...config.leftPanel?.itemAddConfig,
                                     addModalColumns: newColumns,
                                     parentColumn: config.leftPanel?.itemAddConfig?.parentColumn || "",
                                     sourceColumn: config.leftPanel?.itemAddConfig?.sourceColumn || "",
-                                  } 
+                                  },
                                 });
                               }}
                               className="h-3 w-3"
@@ -928,15 +915,15 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
                           disabled={isPK}
                           onClick={() => {
                             const newColumns = (config.leftPanel?.itemAddConfig?.addModalColumns || []).filter(
-                              (_, i) => i !== index
+                              (_, i) => i !== index,
                             );
-                            updateLeftPanel({ 
+                            updateLeftPanel({
                               itemAddConfig: {
                                 ...config.leftPanel?.itemAddConfig,
                                 addModalColumns: newColumns,
                                 parentColumn: config.leftPanel?.itemAddConfig?.parentColumn || "",
                                 sourceColumn: config.leftPanel?.itemAddConfig?.sourceColumn || "",
-                              } 
+                              },
                             });
                           }}
                           className="h-7 w-7 p-0"
@@ -962,10 +949,7 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
               variant="outline"
               onClick={() => {
                 const currentColumns = config.leftPanel?.columns || [];
-                const newColumns = [
-                  ...currentColumns,
-                  { name: "", label: "", width: 100 },
-                ];
+                const newColumns = [...currentColumns, { name: "", label: "", width: 100 }];
                 updateLeftPanel({ columns: newColumns });
               }}
               className="h-7 text-xs"
@@ -984,227 +968,342 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
             {(config.leftPanel?.columns || []).length === 0 ? (
               <div className="rounded-md border border-dashed border-gray-300 bg-white p-3 text-center">
                 <p className="text-xs text-gray-500">설정된 컬럼이 없습니다</p>
-                <p className="mt-1 text-[10px] text-gray-400">
-                  컬럼을 추가하지 않으면 모든 컬럼이 표시됩니다
-                </p>
+                <p className="mt-1 text-[10px] text-gray-400">컬럼을 추가하지 않으면 모든 컬럼이 표시됩니다</p>
               </div>
             ) : (
               (config.leftPanel?.columns || []).map((col, index) => {
                 const isTableMode = config.leftPanel?.displayMode === "table";
-                
+
                 return (
-                <div
-                  key={index}
-                  className="space-y-2 rounded-md border bg-white p-2"
-                >
-                  <div className="flex items-center gap-2">
-                    {/* 순서 변경 버튼 */}
-                    <div className="flex flex-col gap-0.5">
-                      <Button
-                        size="sm"
-                        variant="ghost"
-                        onClick={() => {
-                          if (index === 0) return;
-                          const newColumns = [...(config.leftPanel?.columns || [])];
-                          [newColumns[index - 1], newColumns[index]] = [newColumns[index], newColumns[index - 1]];
-                          updateLeftPanel({ columns: newColumns });
-                        }}
-                        disabled={index === 0}
-                        className="h-4 w-6 p-0"
-                        title="위로 이동"
-                      >
-                        <ArrowUp className="h-3 w-3" />
-                      </Button>
-                      <Button
-                        size="sm"
-                        variant="ghost"
-                        onClick={() => {
-                          const columns = config.leftPanel?.columns || [];
-                          if (index === columns.length - 1) return;
-                          const newColumns = [...columns];
-                          [newColumns[index], newColumns[index + 1]] = [newColumns[index + 1], newColumns[index]];
-                          updateLeftPanel({ columns: newColumns });
-                        }}
-                        disabled={index === (config.leftPanel?.columns || []).length - 1}
-                        className="h-4 w-6 p-0"
-                        title="아래로 이동"
-                      >
-                        <ArrowDown className="h-3 w-3" />
-                      </Button>
-                    </div>
-                    
-                    <div className="flex-1">
-                      <Popover>
-                        <PopoverTrigger asChild>
-                          <Button
-                            variant="outline"
-                            role="combobox"
-                            className="h-8 w-full justify-between text-xs"
-                          >
-                            {col.label || col.name || "컬럼 선택"}
-                            <ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
-                          </Button>
-                        </PopoverTrigger>
-                        <PopoverContent className="w-full p-0">
-                          <Command>
-                            <CommandInput placeholder="컬럼 검색..." className="text-xs" />
-                            <CommandEmpty className="text-xs">컬럼을 찾을 수 없습니다.</CommandEmpty>
-                            <div className="max-h-[300px] overflow-auto">
-                              {/* 기본 테이블 컬럼 */}
-                              <CommandGroup heading={leftTableName ? `📋 ${leftTableName} 컬럼` : "📋 기본 컬럼"}>
-                                {leftTableColumns.map((column) => (
-                                  <CommandItem
-                                    key={column.columnName}
-                                    value={column.columnName}
-                                    onSelect={(value) => {
-                                      const newColumns = [...(config.leftPanel?.columns || [])];
-                                      newColumns[index] = {
-                                        ...newColumns[index],
-                                        name: value,
-                                        label: column.columnLabel || value,
-                                      };
-                                      updateLeftPanel({ columns: newColumns });
-                                      // Popover 닫기
-                                      document.body.click();
-                                    }}
-                                    className="text-xs"
-                                  >
-                                    <Check
-                                      className={cn(
-                                        "mr-2 h-3 w-3",
-                                        col.name === column.columnName ? "opacity-100" : "opacity-0"
-                                      )}
-                                    />
-                                    {column.columnLabel || column.columnName}
-                                    <span className="ml-2 text-[10px] text-gray-500">
-                                      ({column.columnName})
-                                    </span>
-                                  </CommandItem>
-                                ))}
-                              </CommandGroup>
-                              
-                              {/* 🆕 엔티티 참조 테이블 컬럼 */}
-                              {leftTableName && entityReferenceTables[leftTableName]?.map((refTable) => (
-                                <CommandGroup key={refTable.tableName} heading={`🔗 ${refTable.tableName} (엔티티)`}>
-                                  {refTable.columns.map((column) => {
-                                    const fullColumnName = `${refTable.tableName}.${column.columnName}`;
-                                    return (
-                                      <CommandItem
-                                        key={fullColumnName}
-                                        value={fullColumnName}
-                                        onSelect={(value) => {
-                                          const newColumns = [...(config.leftPanel?.columns || [])];
-                                          newColumns[index] = {
-                                            ...newColumns[index],
-                                            name: value,
-                                            label: column.columnLabel || column.columnName,
-                                          };
-                                          updateLeftPanel({ columns: newColumns });
-                                          // Popover 닫기
-                                          document.body.click();
-                                        }}
-                                        className="text-xs pl-6"
-                                      >
-                                        <Check
-                                          className={cn(
-                                            "mr-2 h-3 w-3",
-                                            col.name === fullColumnName ? "opacity-100" : "opacity-0"
-                                          )}
-                                        />
-                                        {column.columnLabel || column.columnName}
-                                        <span className="ml-2 text-[10px] text-gray-500">
-                                          ({column.columnName})
-                                        </span>
-                                      </CommandItem>
-                                    );
-                                  })}
-                                </CommandGroup>
-                              ))}
-                            </div>
-                          </Command>
-                        </PopoverContent>
-                      </Popover>
-                    </div>
-                    <Button
-                      size="sm"
-                      variant="ghost"
-                      onClick={() => {
-                        const newColumns = (config.leftPanel?.columns || []).filter(
-                          (_, i) => i !== index
-                        );
-                        updateLeftPanel({ columns: newColumns });
-                      }}
-                      className="h-8 w-8 p-0"
-                    >
-                      <X className="h-3 w-3" />
-                    </Button>
-                  </div>
-                  
-                  {/* 테이블 모드 전용 옵션 */}
-                  {isTableMode && (
-                    <div className="grid grid-cols-3 gap-2 pt-1">
-                      <div className="space-y-1">
-                        <Label className="text-[10px] text-gray-600">너비 (px)</Label>
-                        <Input
-                          type="number"
-                          min="50"
-                          value={col.width || 100}
-                          onChange={(e) => {
+                  <div key={index} className="space-y-2 rounded-md border bg-white p-2">
+                    <div className="flex items-center gap-2">
+                      {/* 순서 변경 버튼 */}
+                      <div className="flex flex-col gap-0.5">
+                        <Button
+                          size="sm"
+                          variant="ghost"
+                          onClick={() => {
+                            if (index === 0) return;
                             const newColumns = [...(config.leftPanel?.columns || [])];
-                            newColumns[index] = {
-                              ...newColumns[index],
-                              width: parseInt(e.target.value) || 100,
-                            };
-                            updateLeftPanel({ columns: newColumns });
-                          }}
-                          className="h-7 text-xs"
-                        />
-                      </div>
-                      <div className="space-y-1">
-                        <Label className="text-[10px] text-gray-600">정렬</Label>
-                        <Select
-                          value={col.align || "left"}
-                          onValueChange={(value: "left" | "center" | "right") => {
-                            const newColumns = [...(config.leftPanel?.columns || [])];
-                            newColumns[index] = {
-                              ...newColumns[index],
-                              align: value,
-                            };
+                            [newColumns[index - 1], newColumns[index]] = [newColumns[index], newColumns[index - 1]];
                             updateLeftPanel({ columns: newColumns });
                           }}
+                          disabled={index === 0}
+                          className="h-4 w-6 p-0"
+                          title="위로 이동"
                         >
-                          <SelectTrigger className="h-7 text-xs">
-                            <SelectValue />
-                          </SelectTrigger>
-                          <SelectContent>
-                            <SelectItem value="left">왼쪽</SelectItem>
-                            <SelectItem value="center">가운데</SelectItem>
-                            <SelectItem value="right">오른쪽</SelectItem>
-                          </SelectContent>
-                        </Select>
+                          <ArrowUp className="h-3 w-3" />
+                        </Button>
+                        <Button
+                          size="sm"
+                          variant="ghost"
+                          onClick={() => {
+                            const columns = config.leftPanel?.columns || [];
+                            if (index === columns.length - 1) return;
+                            const newColumns = [...columns];
+                            [newColumns[index], newColumns[index + 1]] = [newColumns[index + 1], newColumns[index]];
+                            updateLeftPanel({ columns: newColumns });
+                          }}
+                          disabled={index === (config.leftPanel?.columns || []).length - 1}
+                          className="h-4 w-6 p-0"
+                          title="아래로 이동"
+                        >
+                          <ArrowDown className="h-3 w-3" />
+                        </Button>
                       </div>
-                      <div className="flex items-end">
-                        <label className="flex h-7 items-center gap-1 text-[10px] cursor-pointer">
-                          <input
-                            type="checkbox"
-                            checked={col.sortable ?? false}
+
+                      <div className="flex-1">
+                        <Popover>
+                          <PopoverTrigger asChild>
+                            <Button variant="outline" role="combobox" className="h-8 w-full justify-between text-xs">
+                              {col.label || col.name || "컬럼 선택"}
+                              <ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
+                            </Button>
+                          </PopoverTrigger>
+                          <PopoverContent className="w-full p-0">
+                            <Command>
+                              <CommandInput placeholder="컬럼 검색..." className="text-xs" />
+                              <CommandEmpty className="text-xs">컬럼을 찾을 수 없습니다.</CommandEmpty>
+                              <div className="max-h-[300px] overflow-auto">
+                                {/* 기본 테이블 컬럼 */}
+                                <CommandGroup heading={leftTableName ? `📋 ${leftTableName} 컬럼` : "📋 기본 컬럼"}>
+                                  {leftTableColumns.map((column) => (
+                                    <CommandItem
+                                      key={column.columnName}
+                                      value={column.columnName}
+                                      onSelect={(value) => {
+                                        const newColumns = [...(config.leftPanel?.columns || [])];
+                                        newColumns[index] = {
+                                          ...newColumns[index],
+                                          name: value,
+                                          label: column.columnLabel || value,
+                                        };
+                                        updateLeftPanel({ columns: newColumns });
+                                        // Popover 닫기
+                                        document.body.click();
+                                      }}
+                                      className="text-xs"
+                                    >
+                                      <Check
+                                        className={cn(
+                                          "mr-2 h-3 w-3",
+                                          col.name === column.columnName ? "opacity-100" : "opacity-0",
+                                        )}
+                                      />
+                                      {column.columnLabel || column.columnName}
+                                      <span className="ml-2 text-[10px] text-gray-500">({column.columnName})</span>
+                                    </CommandItem>
+                                  ))}
+                                </CommandGroup>
+
+                                {/* 🆕 엔티티 참조 테이블 컬럼 */}
+                                {leftTableName &&
+                                  entityReferenceTables[leftTableName]?.map((refTable) => (
+                                    <CommandGroup
+                                      key={refTable.tableName}
+                                      heading={`🔗 ${refTable.tableName} (엔티티)`}
+                                    >
+                                      {refTable.columns.map((column) => {
+                                        const fullColumnName = `${refTable.tableName}.${column.columnName}`;
+                                        return (
+                                          <CommandItem
+                                            key={fullColumnName}
+                                            value={fullColumnName}
+                                            onSelect={(value) => {
+                                              const newColumns = [...(config.leftPanel?.columns || [])];
+                                              newColumns[index] = {
+                                                ...newColumns[index],
+                                                name: value,
+                                                label: column.columnLabel || column.columnName,
+                                              };
+                                              updateLeftPanel({ columns: newColumns });
+                                              // Popover 닫기
+                                              document.body.click();
+                                            }}
+                                            className="pl-6 text-xs"
+                                          >
+                                            <Check
+                                              className={cn(
+                                                "mr-2 h-3 w-3",
+                                                col.name === fullColumnName ? "opacity-100" : "opacity-0",
+                                              )}
+                                            />
+                                            {column.columnLabel || column.columnName}
+                                            <span className="ml-2 text-[10px] text-gray-500">
+                                              ({column.columnName})
+                                            </span>
+                                          </CommandItem>
+                                        );
+                                      })}
+                                    </CommandGroup>
+                                  ))}
+                              </div>
+                            </Command>
+                          </PopoverContent>
+                        </Popover>
+                      </div>
+                      <Button
+                        size="sm"
+                        variant="ghost"
+                        onClick={() => {
+                          const newColumns = (config.leftPanel?.columns || []).filter((_, i) => i !== index);
+                          updateLeftPanel({ columns: newColumns });
+                        }}
+                        className="h-8 w-8 p-0"
+                      >
+                        <X className="h-3 w-3" />
+                      </Button>
+                    </div>
+
+                    {/* 테이블 모드 전용 옵션 */}
+                    {isTableMode && (
+                      <div className="grid grid-cols-3 gap-2 pt-1">
+                        <div className="space-y-1">
+                          <Label className="text-[10px] text-gray-600">너비 (px)</Label>
+                          <Input
+                            type="number"
+                            min="50"
+                            value={col.width || 100}
                             onChange={(e) => {
                               const newColumns = [...(config.leftPanel?.columns || [])];
                               newColumns[index] = {
                                 ...newColumns[index],
-                                sortable: e.target.checked,
+                                width: parseInt(e.target.value) || 100,
                               };
                               updateLeftPanel({ columns: newColumns });
                             }}
-                            className="h-3 w-3"
+                            className="h-7 text-xs"
                           />
-                          정렬가능
-                        </label>
+                        </div>
+                        <div className="space-y-1">
+                          <Label className="text-[10px] text-gray-600">정렬</Label>
+                          <Select
+                            value={col.align || "left"}
+                            onValueChange={(value: "left" | "center" | "right") => {
+                              const newColumns = [...(config.leftPanel?.columns || [])];
+                              newColumns[index] = {
+                                ...newColumns[index],
+                                align: value,
+                              };
+                              updateLeftPanel({ columns: newColumns });
+                            }}
+                          >
+                            <SelectTrigger className="h-7 text-xs">
+                              <SelectValue />
+                            </SelectTrigger>
+                            <SelectContent>
+                              <SelectItem value="left">왼쪽</SelectItem>
+                              <SelectItem value="center">가운데</SelectItem>
+                              <SelectItem value="right">오른쪽</SelectItem>
+                            </SelectContent>
+                          </Select>
+                        </div>
+                        <div className="flex items-end">
+                          <label className="flex h-7 cursor-pointer items-center gap-1 text-[10px]">
+                            <input
+                              type="checkbox"
+                              checked={col.sortable ?? false}
+                              onChange={(e) => {
+                                const newColumns = [...(config.leftPanel?.columns || [])];
+                                newColumns[index] = {
+                                  ...newColumns[index],
+                                  sortable: e.target.checked,
+                                };
+                                updateLeftPanel({ columns: newColumns });
+                              }}
+                              className="h-3 w-3"
+                            />
+                            정렬가능
+                          </label>
+                        </div>
                       </div>
-                    </div>
-                  )}
-                </div>
-              );
+                    )}
+
+                    {/* 🆕 날짜 타입 포맷 설정 (좌측) */}
+                    {(() => {
+                      const column = leftTableColumns.find((c) => c.columnName === col.name);
+                      const dbDateTypes = [
+                        "date",
+                        "timestamp",
+                        "timestamptz",
+                        "timestamp with time zone",
+                        "timestamp without time zone",
+                        "time",
+                        "timetz",
+                      ];
+                      const inputDateTypes = ["date", "datetime", "time"];
+
+                      const isDate =
+                        column &&
+                        (dbDateTypes.includes(column.dataType?.toLowerCase() || "") ||
+                          inputDateTypes.includes(column.input_type?.toLowerCase() || "") ||
+                          inputDateTypes.includes(column.webType?.toLowerCase() || ""));
+                      if (!isDate) return null;
+                      return (
+                        <div className="space-y-2 border-t pt-2">
+                          <Label className="text-[10px] text-gray-600">날짜 포맷</Label>
+                          <Select
+                            value={col.format?.dateFormat || "YYYY-MM-DD"}
+                            onValueChange={(value) => {
+                              const newColumns = [...(config.leftPanel?.columns || [])];
+                              newColumns[index] = {
+                                ...newColumns[index],
+                                format: { ...newColumns[index].format, type: "date", dateFormat: value },
+                              };
+                              updateLeftPanel({ columns: newColumns });
+                            }}
+                          >
+                            <SelectTrigger className="h-7 text-xs">
+                              <SelectValue placeholder="날짜 형식" />
+                            </SelectTrigger>
+                            <SelectContent>
+                              <SelectItem value="YYYY-MM-DD">2024-01-15</SelectItem>
+                              <SelectItem value="YYYY.MM.DD">2024.01.15</SelectItem>
+                              <SelectItem value="YYYY/MM/DD">2024/01/15</SelectItem>
+                              <SelectItem value="YYYY-MM-DD HH:mm">2024-01-15 14:30</SelectItem>
+                              <SelectItem value="relative">상대 시간</SelectItem>
+                            </SelectContent>
+                          </Select>
+                        </div>
+                      );
+                    })()}
+
+                    {/* 🆕 숫자 타입 포맷 설정 (좌측) */}
+                    {(() => {
+                      const column = leftTableColumns.find((c) => c.columnName === col.name);
+                      const dbNumericTypes = [
+                        "numeric",
+                        "decimal",
+                        "integer",
+                        "bigint",
+                        "double precision",
+                        "real",
+                        "smallint",
+                        "int4",
+                        "int8",
+                        "float4",
+                        "float8",
+                      ];
+                      const inputNumericTypes = ["number", "decimal", "currency", "integer"];
+
+                      const isNumeric =
+                        column &&
+                        (dbNumericTypes.includes(column.dataType?.toLowerCase() || "") ||
+                          inputNumericTypes.includes(column.input_type?.toLowerCase() || "") ||
+                          inputNumericTypes.includes(column.webType?.toLowerCase() || ""));
+                      if (!isNumeric) return null;
+                      return (
+                        <div className="space-y-2 border-t pt-2">
+                          <Label className="text-[10px] text-gray-600">숫자 포맷</Label>
+                          <div className="grid grid-cols-2 gap-2">
+                            <label className="flex cursor-pointer items-center gap-1 text-[10px]">
+                              <input
+                                type="checkbox"
+                                checked={col.format?.thousandSeparator ?? false}
+                                onChange={(e) => {
+                                  const newColumns = [...(config.leftPanel?.columns || [])];
+                                  newColumns[index] = {
+                                    ...newColumns[index],
+                                    format: {
+                                      ...newColumns[index].format,
+                                      type: "number",
+                                      thousandSeparator: e.target.checked,
+                                    },
+                                  };
+                                  updateLeftPanel({ columns: newColumns });
+                                }}
+                                className="h-3 w-3"
+                              />
+                              천 단위 (,)
+                            </label>
+                            <div className="flex items-center gap-1">
+                              <Label className="text-[10px]">소수점:</Label>
+                              <Input
+                                type="number"
+                                min="0"
+                                max="10"
+                                value={col.format?.decimalPlaces ?? ""}
+                                onChange={(e) => {
+                                  const newColumns = [...(config.leftPanel?.columns || [])];
+                                  newColumns[index] = {
+                                    ...newColumns[index],
+                                    format: {
+                                      ...newColumns[index].format,
+                                      type: "number",
+                                      decimalPlaces: e.target.value ? parseInt(e.target.value) : undefined,
+                                    },
+                                  };
+                                  updateLeftPanel({ columns: newColumns });
+                                }}
+                                className="h-6 w-12 text-xs"
+                              />
+                            </div>
+                          </div>
+                        </div>
+                      );
+                    })()}
+                  </div>
+                );
               })
             )}
           </div>
@@ -1220,10 +1319,7 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
                 variant="outline"
                 onClick={() => {
                   const currentColumns = config.leftPanel?.addModalColumns || [];
-                  const newColumns = [
-                    ...currentColumns,
-                    { name: "", label: "", required: false },
-                  ];
+                  const newColumns = [...currentColumns, { name: "", label: "", required: false }];
                   updateLeftPanel({ addModalColumns: newColumns });
                 }}
                 className="h-7 text-xs"
@@ -1232,9 +1328,7 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
                 컬럼 추가
               </Button>
             </div>
-            <p className="text-xs text-gray-600">
-              추가 버튼 클릭 시 모달에 표시될 입력 필드를 선택하세요
-            </p>
+            <p className="text-xs text-gray-600">추가 버튼 클릭 시 모달에 표시될 입력 필드를 선택하세요</p>
 
             <div className="space-y-2">
               {(config.leftPanel?.addModalColumns || []).length === 0 ? (
@@ -1244,110 +1338,106 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
               ) : (
                 (config.leftPanel?.addModalColumns || []).map((col, index) => {
                   // 현재 컬럼이 PK인지 확인
-                  const column = leftTableColumns.find(c => c.columnName === col.name);
+                  const column = leftTableColumns.find((c) => c.columnName === col.name);
                   const isPK = column?.isPrimaryKey || false;
-                  
+
                   return (
-                  <div
-                    key={index}
-                    className={cn(
-                      "flex items-center gap-2 rounded-md border p-2",
-                      isPK ? "bg-yellow-50 border-yellow-300" : "bg-white"
-                    )}
-                  >
-                    {isPK && (
-                      <span className="text-[10px] font-semibold text-yellow-700 px-1.5 py-0.5 bg-yellow-200 rounded">
-                        PK
-                      </span>
-                    )}
-                    <div className="flex-1">
-                      <Popover>
-                        <PopoverTrigger asChild>
-                          <Button
-                            variant="outline"
-                            role="combobox"
-                            disabled={isPK}
-                            className="h-8 w-full justify-between text-xs"
-                          >
-                            {col.name || "컬럼 선택"}
-                            <ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
-                          </Button>
-                        </PopoverTrigger>
-                        <PopoverContent className="w-full p-0">
-                          <Command>
-                            <CommandInput placeholder="컬럼 검색..." className="text-xs" />
-                            <CommandEmpty className="text-xs">컬럼을 찾을 수 없습니다.</CommandEmpty>
-                            <CommandGroup className="max-h-[200px] overflow-auto">
-                              {leftTableColumns
-                                .filter((column) => !['company_code', 'company_name'].includes(column.columnName))
-                                .map((column) => (
-                                <CommandItem
-                                  key={column.columnName}
-                                  value={column.columnName}
-                                  onSelect={(value) => {
-                                    const newColumns = [...(config.leftPanel?.addModalColumns || [])];
-                                    newColumns[index] = {
-                                      ...newColumns[index],
-                                      name: value,
-                                      label: column.columnLabel || value,
-                                    };
-                                    updateLeftPanel({ addModalColumns: newColumns });
-                                  }}
-                                  className="text-xs"
-                                >
-                                  <Check
-                                    className={cn(
-                                      "mr-2 h-3 w-3",
-                                      col.name === column.columnName ? "opacity-100" : "opacity-0"
-                                    )}
-                                  />
-                                  {column.columnLabel || column.columnName}
-                                  <span className="ml-2 text-[10px] text-gray-500">
-                                    ({column.columnName})
-                                  </span>
-                                </CommandItem>
-                              ))}
-                            </CommandGroup>
-                          </Command>
-                        </PopoverContent>
-                      </Popover>
-                    </div>
-                    <div className="flex items-center gap-1">
-                      <label className="flex items-center gap-1 text-xs text-gray-600 cursor-pointer">
-                        <input
-                          type="checkbox"
-                          checked={col.required ?? false}
-                          disabled={isPK}
-                          onChange={(e) => {
-                            const newColumns = [...(config.leftPanel?.addModalColumns || [])];
-                            newColumns[index] = {
-                              ...newColumns[index],
-                              required: e.target.checked,
-                            };
-                            updateLeftPanel({ addModalColumns: newColumns });
-                          }}
-                          className="h-3 w-3"
-                        />
-                        필수
-                      </label>
-                    </div>
-                    <Button
-                      size="sm"
-                      variant="ghost"
-                      disabled={isPK}
-                      onClick={() => {
-                        const newColumns = (config.leftPanel?.addModalColumns || []).filter(
-                          (_, i) => i !== index
-                        );
-                        updateLeftPanel({ addModalColumns: newColumns });
-                      }}
-                      className="h-8 w-8 p-0"
-                      title={isPK ? "PK 컬럼은 삭제할 수 없습니다" : ""}
+                    <div
+                      key={index}
+                      className={cn(
+                        "flex items-center gap-2 rounded-md border p-2",
+                        isPK ? "border-yellow-300 bg-yellow-50" : "bg-white",
+                      )}
                     >
-                      <X className="h-3 w-3" />
-                    </Button>
-                  </div>
-                );
+                      {isPK && (
+                        <span className="rounded bg-yellow-200 px-1.5 py-0.5 text-[10px] font-semibold text-yellow-700">
+                          PK
+                        </span>
+                      )}
+                      <div className="flex-1">
+                        <Popover>
+                          <PopoverTrigger asChild>
+                            <Button
+                              variant="outline"
+                              role="combobox"
+                              disabled={isPK}
+                              className="h-8 w-full justify-between text-xs"
+                            >
+                              {col.name || "컬럼 선택"}
+                              <ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
+                            </Button>
+                          </PopoverTrigger>
+                          <PopoverContent className="w-full p-0">
+                            <Command>
+                              <CommandInput placeholder="컬럼 검색..." className="text-xs" />
+                              <CommandEmpty className="text-xs">컬럼을 찾을 수 없습니다.</CommandEmpty>
+                              <CommandGroup className="max-h-[200px] overflow-auto">
+                                {leftTableColumns
+                                  .filter((column) => !["company_code", "company_name"].includes(column.columnName))
+                                  .map((column) => (
+                                    <CommandItem
+                                      key={column.columnName}
+                                      value={column.columnName}
+                                      onSelect={(value) => {
+                                        const newColumns = [...(config.leftPanel?.addModalColumns || [])];
+                                        newColumns[index] = {
+                                          ...newColumns[index],
+                                          name: value,
+                                          label: column.columnLabel || value,
+                                        };
+                                        updateLeftPanel({ addModalColumns: newColumns });
+                                      }}
+                                      className="text-xs"
+                                    >
+                                      <Check
+                                        className={cn(
+                                          "mr-2 h-3 w-3",
+                                          col.name === column.columnName ? "opacity-100" : "opacity-0",
+                                        )}
+                                      />
+                                      {column.columnLabel || column.columnName}
+                                      <span className="ml-2 text-[10px] text-gray-500">({column.columnName})</span>
+                                    </CommandItem>
+                                  ))}
+                              </CommandGroup>
+                            </Command>
+                          </PopoverContent>
+                        </Popover>
+                      </div>
+                      <div className="flex items-center gap-1">
+                        <label className="flex cursor-pointer items-center gap-1 text-xs text-gray-600">
+                          <input
+                            type="checkbox"
+                            checked={col.required ?? false}
+                            disabled={isPK}
+                            onChange={(e) => {
+                              const newColumns = [...(config.leftPanel?.addModalColumns || [])];
+                              newColumns[index] = {
+                                ...newColumns[index],
+                                required: e.target.checked,
+                              };
+                              updateLeftPanel({ addModalColumns: newColumns });
+                            }}
+                            className="h-3 w-3"
+                          />
+                          필수
+                        </label>
+                      </div>
+                      <Button
+                        size="sm"
+                        variant="ghost"
+                        disabled={isPK}
+                        onClick={() => {
+                          const newColumns = (config.leftPanel?.addModalColumns || []).filter((_, i) => i !== index);
+                          updateLeftPanel({ addModalColumns: newColumns });
+                        }}
+                        className="h-8 w-8 p-0"
+                        title={isPK ? "PK 컬럼은 삭제할 수 없습니다" : ""}
+                      >
+                        <X className="h-3 w-3" />
+                      </Button>
+                    </div>
+                  );
                 })
               )}
             </div>
@@ -1356,27 +1446,28 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
       </div>
 
       {/* 좌측 패널 데이터 필터링 */}
-      <div className="space-y-4 border-t pt-4 mt-4">
+      <div className="mt-4 space-y-4 border-t pt-4">
         <h3 className="text-sm font-semibold">좌측 패널 데이터 필터링</h3>
-        <p className="text-xs text-muted-foreground">
-          특정 컬럼 값으로 좌측 패널 데이터를 필터링합니다
-        </p>
-              <DataFilterConfigPanel
-                tableName={config.leftPanel?.tableName || screenTableName}
-                columns={leftTableColumns.map((col) => ({
-                  columnName: col.columnName,
-                  columnLabel: col.columnLabel || col.columnName,
-                  dataType: col.dataType || "text",
-                  input_type: (col as any).input_type,
-                } as any))}
-                config={config.leftPanel?.dataFilter}
-                onConfigChange={(dataFilter) => updateLeftPanel({ dataFilter })}
-                menuObjid={menuObjid} // 🆕 메뉴 OBJID 전달
-              />
+        <p className="text-muted-foreground text-xs">특정 컬럼 값으로 좌측 패널 데이터를 필터링합니다</p>
+        <DataFilterConfigPanel
+          tableName={config.leftPanel?.tableName || screenTableName}
+          columns={leftTableColumns.map(
+            (col) =>
+              ({
+                columnName: col.columnName,
+                columnLabel: col.columnLabel || col.columnName,
+                dataType: col.dataType || "text",
+                input_type: (col as any).input_type,
+              }) as any,
+          )}
+          config={config.leftPanel?.dataFilter}
+          onConfigChange={(dataFilter) => updateLeftPanel({ dataFilter })}
+          menuObjid={menuObjid} // 🆕 메뉴 OBJID 전달
+        />
       </div>
 
       {/* 우측 패널 설정 */}
-      <div className="space-y-4 border-t pt-4 mt-4">
+      <div className="mt-4 space-y-4 border-t pt-4">
         <h3 className="text-sm font-semibold">우측 패널 설정 ({relationshipType === "detail" ? "상세" : "조인"})</h3>
 
         <div className="space-y-2">
@@ -1385,7 +1476,7 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
             value={localTitles.right}
             onChange={(e) => {
               setIsUserEditing(true);
-              setLocalTitles(prev => ({ ...prev, right: e.target.value }));
+              setLocalTitles((prev) => ({ ...prev, right: e.target.value }));
             }}
             onBlur={() => {
               setIsUserEditing(false);
@@ -1484,7 +1575,7 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
         {(config.rightPanel?.displayMode || "list") === "list" && (
           <div className="space-y-3 rounded-lg border border-gray-200 bg-gray-50 p-3">
             <Label className="text-sm font-semibold">요약 표시 설정</Label>
-            
+
             <div className="space-y-2">
               <Label className="text-xs">표시할 컬럼 개수</Label>
               <Input
@@ -1498,9 +1589,7 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
                 }}
                 className="bg-white"
               />
-              <p className="text-xs text-gray-500">
-                접기 전에 표시할 컬럼 개수 (기본: 3개)
-              </p>
+              <p className="text-xs text-gray-500">접기 전에 표시할 컬럼 개수 (기본: 3개)</p>
             </div>
 
             <div className="flex items-center justify-between space-x-2">
@@ -1521,110 +1610,232 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
         {/* 컬럼 매핑 - 조인 모드에서만 표시 */}
         {relationshipType !== "detail" && (
           <div className="space-y-3 rounded-lg border border-gray-200 bg-gray-50 p-3">
-            <Label className="text-sm font-semibold">컬럼 매핑 (외래키 관계)</Label>
-            <p className="text-xs text-gray-600">좌측 테이블의 컬럼을 우측 테이블의 컬럼과 연결합니다</p>
+            <div className="flex items-center justify-between">
+              <div>
+                <Label className="text-sm font-semibold">컬럼 매핑 (외래키 관계)</Label>
+                <p className="text-xs text-gray-600">좌측 테이블의 컬럼을 우측 테이블의 컬럼과 연결합니다</p>
+              </div>
+              <Button
+                size="sm"
+                variant="ghost"
+                className="h-6 text-xs"
+                onClick={() => {
+                  const currentKeys = config.rightPanel?.relation?.keys || [];
+                  // 단일키에서 복합키로 전환 시 기존 값 유지
+                  if (
+                    currentKeys.length === 0 &&
+                    config.rightPanel?.relation?.leftColumn &&
+                    config.rightPanel?.relation?.foreignKey
+                  ) {
+                    updateRightPanel({
+                      relation: {
+                        ...config.rightPanel?.relation,
+                        keys: [
+                          {
+                            leftColumn: config.rightPanel.relation.leftColumn,
+                            rightColumn: config.rightPanel.relation.foreignKey,
+                          },
+                          { leftColumn: "", rightColumn: "" },
+                        ],
+                      },
+                    });
+                  } else {
+                    updateRightPanel({
+                      relation: {
+                        ...config.rightPanel?.relation,
+                        keys: [...currentKeys, { leftColumn: "", rightColumn: "" }],
+                      },
+                    });
+                  }
+                }}
+              >
+                <Plus className="mr-1 h-3 w-3" />
+                조인 키 추가
+              </Button>
+            </div>
 
-            <div className="space-y-2">
-              <Label className="text-xs">좌측 컬럼</Label>
-              <Popover open={leftColumnOpen} onOpenChange={setLeftColumnOpen}>
-                <PopoverTrigger asChild>
-                  <Button
-                    variant="outline"
-                    role="combobox"
-                    aria-expanded={leftColumnOpen}
-                    className="w-full justify-between"
-                    disabled={!config.leftPanel?.tableName}
-                  >
-                    {config.rightPanel?.relation?.leftColumn || "좌측 컬럼 선택"}
-                    <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
-                  </Button>
-                </PopoverTrigger>
-                <PopoverContent className="w-full p-0">
-                  <Command>
-                    <CommandInput placeholder="컬럼 검색..." />
-                    <CommandEmpty>컬럼을 찾을 수 없습니다.</CommandEmpty>
-                    <CommandGroup className="max-h-[200px] overflow-auto">
-                      {leftTableColumns.map((column) => (
-                        <CommandItem
-                          key={column.columnName}
-                          value={column.columnName}
-                          onSelect={(value) => {
+            <p className="text-[10px] text-blue-600">복합키: 여러 컬럼으로 조인 (예: item_code + lot_number)</p>
+
+            {/* 복합키가 설정된 경우 */}
+            {(config.rightPanel?.relation?.keys || []).length > 0 ? (
+              <>
+                {(config.rightPanel?.relation?.keys || []).map((key, index) => (
+                  <div key={index} className="space-y-2 rounded-md border bg-white p-3">
+                    <div className="flex items-center justify-between">
+                      <span className="text-xs font-medium">조인 키 {index + 1}</span>
+                      <Button
+                        size="sm"
+                        variant="ghost"
+                        className="text-destructive h-6 w-6 p-0"
+                        onClick={() => {
+                          const newKeys = (config.rightPanel?.relation?.keys || []).filter((_, i) => i !== index);
+                          updateRightPanel({
+                            relation: { ...config.rightPanel?.relation, keys: newKeys },
+                          });
+                        }}
+                      >
+                        <X className="h-3 w-3" />
+                      </Button>
+                    </div>
+                    <div className="grid grid-cols-2 gap-2">
+                      <div>
+                        <Label className="text-xs">좌측 컬럼</Label>
+                        <Select
+                          value={key.leftColumn || ""}
+                          onValueChange={(value) => {
+                            const newKeys = [...(config.rightPanel?.relation?.keys || [])];
+                            newKeys[index] = { ...newKeys[index], leftColumn: value };
                             updateRightPanel({
-                              relation: { ...config.rightPanel?.relation, leftColumn: value },
+                              relation: { ...config.rightPanel?.relation, keys: newKeys },
                             });
-                            setLeftColumnOpen(false);
                           }}
                         >
-                          <Check
-                            className={cn(
-                              "mr-2 h-4 w-4",
-                              config.rightPanel?.relation?.leftColumn === column.columnName
-                                ? "opacity-100"
-                                : "opacity-0",
-                            )}
-                          />
-                          {column.columnName}
-                          <span className="ml-2 text-xs text-gray-500">({column.columnLabel || ""})</span>
-                        </CommandItem>
-                      ))}
-                    </CommandGroup>
-                  </Command>
-                </PopoverContent>
-              </Popover>
-            </div>
-
-            <div className="flex items-center justify-center">
-              <ArrowRight className="h-4 w-4 text-gray-400" />
-            </div>
-
-            <div className="space-y-2">
-              <Label className="text-xs">우측 컬럼 (외래키)</Label>
-              <Popover open={rightColumnOpen} onOpenChange={setRightColumnOpen}>
-                <PopoverTrigger asChild>
-                  <Button
-                    variant="outline"
-                    role="combobox"
-                    aria-expanded={rightColumnOpen}
-                    className="w-full justify-between"
-                    disabled={!config.rightPanel?.tableName}
-                  >
-                    {config.rightPanel?.relation?.foreignKey || "우측 컬럼 선택"}
-                    <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
-                  </Button>
-                </PopoverTrigger>
-                <PopoverContent className="w-full p-0">
-                  <Command>
-                    <CommandInput placeholder="컬럼 검색..." />
-                    <CommandEmpty>컬럼을 찾을 수 없습니다.</CommandEmpty>
-                    <CommandGroup className="max-h-[200px] overflow-auto">
-                      {rightTableColumns.map((column) => (
-                        <CommandItem
-                          key={column.columnName}
-                          value={column.columnName}
-                          onSelect={(value) => {
+                          <SelectTrigger className="h-8 text-xs">
+                            <SelectValue placeholder="좌측 컬럼" />
+                          </SelectTrigger>
+                          <SelectContent>
+                            {leftTableColumns.map((column) => (
+                              <SelectItem key={column.columnName} value={column.columnName}>
+                                {column.columnName}
+                              </SelectItem>
+                            ))}
+                          </SelectContent>
+                        </Select>
+                      </div>
+                      <div>
+                        <Label className="text-xs">우측 컬럼</Label>
+                        <Select
+                          value={key.rightColumn || ""}
+                          onValueChange={(value) => {
+                            const newKeys = [...(config.rightPanel?.relation?.keys || [])];
+                            newKeys[index] = { ...newKeys[index], rightColumn: value };
                             updateRightPanel({
-                              relation: { ...config.rightPanel?.relation, foreignKey: value },
+                              relation: { ...config.rightPanel?.relation, keys: newKeys },
                             });
-                            setRightColumnOpen(false);
                           }}
                         >
-                          <Check
-                            className={cn(
-                              "mr-2 h-4 w-4",
-                              config.rightPanel?.relation?.foreignKey === column.columnName
-                                ? "opacity-100"
-                                : "opacity-0",
-                            )}
-                          />
-                          {column.columnName}
-                          <span className="ml-2 text-xs text-gray-500">({column.columnLabel || ""})</span>
-                        </CommandItem>
-                      ))}
-                    </CommandGroup>
-                  </Command>
-                </PopoverContent>
-              </Popover>
-            </div>
+                          <SelectTrigger className="h-8 text-xs">
+                            <SelectValue placeholder="우측 컬럼" />
+                          </SelectTrigger>
+                          <SelectContent>
+                            {rightTableColumns.map((column) => (
+                              <SelectItem key={column.columnName} value={column.columnName}>
+                                {column.columnName}
+                              </SelectItem>
+                            ))}
+                          </SelectContent>
+                        </Select>
+                      </div>
+                    </div>
+                  </div>
+                ))}
+              </>
+            ) : (
+              /* 단일키 (하위 호환성) */
+              <>
+                <div className="space-y-2">
+                  <Label className="text-xs">좌측 컬럼</Label>
+                  <Popover open={leftColumnOpen} onOpenChange={setLeftColumnOpen}>
+                    <PopoverTrigger asChild>
+                      <Button
+                        variant="outline"
+                        role="combobox"
+                        aria-expanded={leftColumnOpen}
+                        className="w-full justify-between"
+                        disabled={!config.leftPanel?.tableName}
+                      >
+                        {config.rightPanel?.relation?.leftColumn || "좌측 컬럼 선택"}
+                        <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                      </Button>
+                    </PopoverTrigger>
+                    <PopoverContent className="w-full p-0">
+                      <Command>
+                        <CommandInput placeholder="컬럼 검색..." />
+                        <CommandEmpty>컬럼을 찾을 수 없습니다.</CommandEmpty>
+                        <CommandGroup className="max-h-[200px] overflow-auto">
+                          {leftTableColumns.map((column) => (
+                            <CommandItem
+                              key={column.columnName}
+                              value={column.columnName}
+                              onSelect={(value) => {
+                                updateRightPanel({
+                                  relation: { ...config.rightPanel?.relation, leftColumn: value },
+                                });
+                                setLeftColumnOpen(false);
+                              }}
+                            >
+                              <Check
+                                className={cn(
+                                  "mr-2 h-4 w-4",
+                                  config.rightPanel?.relation?.leftColumn === column.columnName
+                                    ? "opacity-100"
+                                    : "opacity-0",
+                                )}
+                              />
+                              {column.columnName}
+                              <span className="ml-2 text-xs text-gray-500">({column.columnLabel || ""})</span>
+                            </CommandItem>
+                          ))}
+                        </CommandGroup>
+                      </Command>
+                    </PopoverContent>
+                  </Popover>
+                </div>
+
+                <div className="flex items-center justify-center">
+                  <ArrowRight className="h-4 w-4 text-gray-400" />
+                </div>
+
+                <div className="space-y-2">
+                  <Label className="text-xs">우측 컬럼 (외래키)</Label>
+                  <Popover open={rightColumnOpen} onOpenChange={setRightColumnOpen}>
+                    <PopoverTrigger asChild>
+                      <Button
+                        variant="outline"
+                        role="combobox"
+                        aria-expanded={rightColumnOpen}
+                        className="w-full justify-between"
+                        disabled={!config.rightPanel?.tableName}
+                      >
+                        {config.rightPanel?.relation?.foreignKey || "우측 컬럼 선택"}
+                        <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                      </Button>
+                    </PopoverTrigger>
+                    <PopoverContent className="w-full p-0">
+                      <Command>
+                        <CommandInput placeholder="컬럼 검색..." />
+                        <CommandEmpty>컬럼을 찾을 수 없습니다.</CommandEmpty>
+                        <CommandGroup className="max-h-[200px] overflow-auto">
+                          {rightTableColumns.map((column) => (
+                            <CommandItem
+                              key={column.columnName}
+                              value={column.columnName}
+                              onSelect={(value) => {
+                                updateRightPanel({
+                                  relation: { ...config.rightPanel?.relation, foreignKey: value },
+                                });
+                                setRightColumnOpen(false);
+                              }}
+                            >
+                              <Check
+                                className={cn(
+                                  "mr-2 h-4 w-4",
+                                  config.rightPanel?.relation?.foreignKey === column.columnName
+                                    ? "opacity-100"
+                                    : "opacity-0",
+                                )}
+                              />
+                              {column.columnName}
+                              <span className="ml-2 text-xs text-gray-500">({column.columnLabel || ""})</span>
+                            </CommandItem>
+                          ))}
+                        </CommandGroup>
+                      </Command>
+                    </PopoverContent>
+                  </Popover>
+                </div>
+              </>
+            )}
           </div>
         )}
 
@@ -1653,10 +1864,7 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
               variant="outline"
               onClick={() => {
                 const currentColumns = config.rightPanel?.columns || [];
-                const newColumns = [
-                  ...currentColumns,
-                  { name: "", label: "", width: 100 },
-                ];
+                const newColumns = [...currentColumns, { name: "", label: "", width: 100 }];
                 updateRightPanel({ columns: newColumns });
               }}
               className="h-7 text-xs"
@@ -1675,371 +1883,461 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
             {(config.rightPanel?.columns || []).length === 0 ? (
               <div className="rounded-md border border-dashed border-gray-300 bg-white p-3 text-center">
                 <p className="text-xs text-gray-500">설정된 컬럼이 없습니다</p>
-                <p className="mt-1 text-[10px] text-gray-400">
-                  컬럼을 추가하지 않으면 모든 컬럼이 표시됩니다
-                </p>
+                <p className="mt-1 text-[10px] text-gray-400">컬럼을 추가하지 않으면 모든 컬럼이 표시됩니다</p>
               </div>
             ) : (
               (config.rightPanel?.columns || []).map((col, index) => {
                 const isTableMode = config.rightPanel?.displayMode === "table";
-                
+
                 return (
-                <div
-                  key={index}
-                  className="space-y-2 rounded-md border bg-white p-2"
-                >
-                  <div className="flex items-center gap-2">
-                    {/* 순서 변경 버튼 */}
-                    <div className="flex flex-col gap-0.5">
-                      <Button
-                        size="sm"
-                        variant="ghost"
-                        onClick={() => {
-                          if (index === 0) return;
-                          const newColumns = [...(config.rightPanel?.columns || [])];
-                          [newColumns[index - 1], newColumns[index]] = [newColumns[index], newColumns[index - 1]];
-                          updateRightPanel({ columns: newColumns });
-                        }}
-                        disabled={index === 0}
-                        className="h-4 w-6 p-0"
-                        title="위로 이동"
-                      >
-                        <ArrowUp className="h-3 w-3" />
-                      </Button>
-                      <Button
-                        size="sm"
-                        variant="ghost"
-                        onClick={() => {
-                          const columns = config.rightPanel?.columns || [];
-                          if (index === columns.length - 1) return;
-                          const newColumns = [...columns];
-                          [newColumns[index], newColumns[index + 1]] = [newColumns[index + 1], newColumns[index]];
-                          updateRightPanel({ columns: newColumns });
-                        }}
-                        disabled={index === (config.rightPanel?.columns || []).length - 1}
-                        className="h-4 w-6 p-0"
-                        title="아래로 이동"
-                      >
-                        <ArrowDown className="h-3 w-3" />
-                      </Button>
-                    </div>
-                    
-                    <div className="flex-1">
-                      <Popover>
-                        <PopoverTrigger asChild>
-                          <Button
-                            variant="outline"
-                            role="combobox"
-                            className="h-8 w-full justify-between text-xs"
-                          >
-                            {col.label || col.name || "컬럼 선택"}
-                            <ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
-                          </Button>
-                        </PopoverTrigger>
-                        <PopoverContent className="w-full p-0">
-                          <Command>
-                            <CommandInput placeholder="컬럼 검색..." className="text-xs" />
-                            <CommandEmpty className="text-xs">컬럼을 찾을 수 없습니다.</CommandEmpty>
-                            <div className="max-h-[300px] overflow-auto">
-                              {/* 기본 테이블 컬럼 */}
-                              <CommandGroup heading={rightTableName ? `📋 ${rightTableName} 컬럼` : "📋 기본 컬럼"}>
-                                {rightTableColumns.map((column) => (
-                                  <CommandItem
-                                    key={column.columnName}
-                                    value={column.columnName}
-                                    onSelect={(value) => {
-                                      const newColumns = [...(config.rightPanel?.columns || [])];
-                                      newColumns[index] = {
-                                        ...newColumns[index],
-                                        name: value,
-                                        label: column.columnLabel || value,
-                                      };
-                                      updateRightPanel({ columns: newColumns });
-                                      // Popover 닫기
-                                      document.body.click();
-                                    }}
-                                    className="text-xs"
-                                  >
-                                    <Check
-                                      className={cn(
-                                        "mr-2 h-3 w-3",
-                                        col.name === column.columnName ? "opacity-100" : "opacity-0"
-                                      )}
-                                    />
-                                    {column.columnLabel || column.columnName}
-                                    <span className="ml-2 text-[10px] text-gray-500">
-                                      ({column.columnName})
-                                    </span>
-                                  </CommandItem>
-                                ))}
-                              </CommandGroup>
-                              
-                              {/* 🆕 엔티티 참조 테이블 컬럼 */}
-                              {rightTableName && entityReferenceTables[rightTableName]?.map((refTable) => (
-                                <CommandGroup key={refTable.tableName} heading={`🔗 ${refTable.tableName} (엔티티)`}>
-                                  {refTable.columns.map((column) => {
-                                    const fullColumnName = `${refTable.tableName}.${column.columnName}`;
-                                    return (
-                                      <CommandItem
-                                        key={fullColumnName}
-                                        value={fullColumnName}
-                                        onSelect={(value) => {
-                                          const newColumns = [...(config.rightPanel?.columns || [])];
-                                          newColumns[index] = {
-                                            ...newColumns[index],
-                                            name: value,
-                                            label: column.columnLabel || column.columnName,
-                                          };
-                                          updateRightPanel({ columns: newColumns });
-                                          // Popover 닫기
-                                          document.body.click();
-                                        }}
-                                        className="text-xs pl-6"
-                                      >
-                                        <Check
-                                          className={cn(
-                                            "mr-2 h-3 w-3",
-                                            col.name === fullColumnName ? "opacity-100" : "opacity-0"
-                                          )}
-                                        />
-                                        {column.columnLabel || column.columnName}
-                                        <span className="ml-2 text-[10px] text-gray-500">
-                                          ({column.columnName})
-                                        </span>
-                                      </CommandItem>
-                                    );
-                                  })}
-                                </CommandGroup>
-                              ))}
-                            </div>
-                          </Command>
-                        </PopoverContent>
-                      </Popover>
-                    </div>
-                    <Button
-                      size="sm"
-                      variant="ghost"
-                      onClick={() => {
-                        const newColumns = (config.rightPanel?.columns || []).filter(
-                          (_, i) => i !== index
-                        );
-                        updateRightPanel({ columns: newColumns });
-                      }}
-                      className="h-8 w-8 p-0"
-                    >
-                      <X className="h-3 w-3" />
-                    </Button>
-                  </div>
-                  
-                  {/* 테이블 모드 전용 옵션 */}
-                  {isTableMode && (
-                    <div className="grid grid-cols-3 gap-2 pt-1">
-                      <div className="space-y-1">
-                        <Label className="text-[10px] text-gray-600">너비 (px)</Label>
-                        <Input
-                          type="number"
-                          min="50"
-                          value={col.width || 100}
-                          onChange={(e) => {
+                  <div key={index} className="space-y-2 rounded-md border bg-white p-2">
+                    <div className="flex items-center gap-2">
+                      {/* 순서 변경 버튼 */}
+                      <div className="flex flex-col gap-0.5">
+                        <Button
+                          size="sm"
+                          variant="ghost"
+                          onClick={() => {
+                            if (index === 0) return;
                             const newColumns = [...(config.rightPanel?.columns || [])];
-                            newColumns[index] = {
-                              ...newColumns[index],
-                              width: parseInt(e.target.value) || 100,
-                            };
-                            updateRightPanel({ columns: newColumns });
-                          }}
-                          className="h-7 text-xs"
-                        />
-                      </div>
-                      <div className="space-y-1">
-                        <Label className="text-[10px] text-gray-600">정렬</Label>
-                        <Select
-                          value={col.align || "left"}
-                          onValueChange={(value: "left" | "center" | "right") => {
-                            const newColumns = [...(config.rightPanel?.columns || [])];
-                            newColumns[index] = {
-                              ...newColumns[index],
-                              align: value,
-                            };
+                            [newColumns[index - 1], newColumns[index]] = [newColumns[index], newColumns[index - 1]];
                             updateRightPanel({ columns: newColumns });
                           }}
+                          disabled={index === 0}
+                          className="h-4 w-6 p-0"
+                          title="위로 이동"
                         >
-                          <SelectTrigger className="h-7 text-xs">
-                            <SelectValue />
-                          </SelectTrigger>
-                          <SelectContent>
-                            <SelectItem value="left">왼쪽</SelectItem>
-                            <SelectItem value="center">가운데</SelectItem>
-                            <SelectItem value="right">오른쪽</SelectItem>
-                          </SelectContent>
-                        </Select>
+                          <ArrowUp className="h-3 w-3" />
+                        </Button>
+                        <Button
+                          size="sm"
+                          variant="ghost"
+                          onClick={() => {
+                            const columns = config.rightPanel?.columns || [];
+                            if (index === columns.length - 1) return;
+                            const newColumns = [...columns];
+                            [newColumns[index], newColumns[index + 1]] = [newColumns[index + 1], newColumns[index]];
+                            updateRightPanel({ columns: newColumns });
+                          }}
+                          disabled={index === (config.rightPanel?.columns || []).length - 1}
+                          className="h-4 w-6 p-0"
+                          title="아래로 이동"
+                        >
+                          <ArrowDown className="h-3 w-3" />
+                        </Button>
                       </div>
-                      <div className="flex items-end">
-                        <label className="flex h-7 items-center gap-1 text-[10px] cursor-pointer">
-                          <input
-                            type="checkbox"
-                            checked={col.sortable ?? false}
+
+                      <div className="flex-1">
+                        <Popover>
+                          <PopoverTrigger asChild>
+                            <Button variant="outline" role="combobox" className="h-8 w-full justify-between text-xs">
+                              {col.label || col.name || "컬럼 선택"}
+                              <ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
+                            </Button>
+                          </PopoverTrigger>
+                          <PopoverContent className="w-full p-0">
+                            <Command>
+                              <CommandInput placeholder="컬럼 검색..." className="text-xs" />
+                              <CommandEmpty className="text-xs">컬럼을 찾을 수 없습니다.</CommandEmpty>
+                              <div className="max-h-[300px] overflow-auto">
+                                {/* 기본 테이블 컬럼 */}
+                                <CommandGroup heading={rightTableName ? `📋 ${rightTableName} 컬럼` : "📋 기본 컬럼"}>
+                                  {rightTableColumns.map((column) => (
+                                    <CommandItem
+                                      key={column.columnName}
+                                      value={column.columnName}
+                                      onSelect={(value) => {
+                                        const newColumns = [...(config.rightPanel?.columns || [])];
+                                        newColumns[index] = {
+                                          ...newColumns[index],
+                                          name: value,
+                                          label: column.columnLabel || value,
+                                        };
+                                        updateRightPanel({ columns: newColumns });
+                                        // Popover 닫기
+                                        document.body.click();
+                                      }}
+                                      className="text-xs"
+                                    >
+                                      <Check
+                                        className={cn(
+                                          "mr-2 h-3 w-3",
+                                          col.name === column.columnName ? "opacity-100" : "opacity-0",
+                                        )}
+                                      />
+                                      {column.columnLabel || column.columnName}
+                                      <span className="ml-2 text-[10px] text-gray-500">({column.columnName})</span>
+                                    </CommandItem>
+                                  ))}
+                                </CommandGroup>
+
+                                {/* 🆕 엔티티 참조 테이블 컬럼 */}
+                                {rightTableName &&
+                                  entityReferenceTables[rightTableName]?.map((refTable) => (
+                                    <CommandGroup
+                                      key={refTable.tableName}
+                                      heading={`🔗 ${refTable.tableName} (엔티티)`}
+                                    >
+                                      {refTable.columns.map((column) => {
+                                        const fullColumnName = `${refTable.tableName}.${column.columnName}`;
+                                        return (
+                                          <CommandItem
+                                            key={fullColumnName}
+                                            value={fullColumnName}
+                                            onSelect={(value) => {
+                                              const newColumns = [...(config.rightPanel?.columns || [])];
+                                              newColumns[index] = {
+                                                ...newColumns[index],
+                                                name: value,
+                                                label: column.columnLabel || column.columnName,
+                                              };
+                                              updateRightPanel({ columns: newColumns });
+                                              // Popover 닫기
+                                              document.body.click();
+                                            }}
+                                            className="pl-6 text-xs"
+                                          >
+                                            <Check
+                                              className={cn(
+                                                "mr-2 h-3 w-3",
+                                                col.name === fullColumnName ? "opacity-100" : "opacity-0",
+                                              )}
+                                            />
+                                            {column.columnLabel || column.columnName}
+                                            <span className="ml-2 text-[10px] text-gray-500">
+                                              ({column.columnName})
+                                            </span>
+                                          </CommandItem>
+                                        );
+                                      })}
+                                    </CommandGroup>
+                                  ))}
+                              </div>
+                            </Command>
+                          </PopoverContent>
+                        </Popover>
+                      </div>
+                      <Button
+                        size="sm"
+                        variant="ghost"
+                        onClick={() => {
+                          const newColumns = (config.rightPanel?.columns || []).filter((_, i) => i !== index);
+                          updateRightPanel({ columns: newColumns });
+                        }}
+                        className="h-8 w-8 p-0"
+                      >
+                        <X className="h-3 w-3" />
+                      </Button>
+                    </div>
+
+                    {/* 테이블 모드 전용 옵션 */}
+                    {isTableMode && (
+                      <div className="grid grid-cols-3 gap-2 pt-1">
+                        <div className="space-y-1">
+                          <Label className="text-[10px] text-gray-600">너비 (px)</Label>
+                          <Input
+                            type="number"
+                            min="50"
+                            value={col.width || 100}
                             onChange={(e) => {
                               const newColumns = [...(config.rightPanel?.columns || [])];
                               newColumns[index] = {
                                 ...newColumns[index],
-                                sortable: e.target.checked,
+                                width: parseInt(e.target.value) || 100,
                               };
                               updateRightPanel({ columns: newColumns });
                             }}
-                            className="h-3 w-3"
+                            className="h-7 text-xs"
                           />
-                          정렬가능
-                        </label>
-                      </div>
-                    </div>
-                  )}
-                  
-                  {/* LIST 모드: 볼드 설정 */}
-                  {!isTableMode && (
-                    <div className="space-y-2 border-t pt-2">
-                      <Label className="text-[10px] text-gray-600">요약 표시 옵션</Label>
-                      <label className="flex items-center gap-1.5 text-[10px] cursor-pointer">
-                        <input
-                          type="checkbox"
-                          checked={col.bold ?? false}
-                          onChange={(e) => {
-                            const newColumns = [...(config.rightPanel?.columns || [])];
-                            newColumns[index] = { ...newColumns[index], bold: e.target.checked };
-                            updateRightPanel({ columns: newColumns });
-                          }}
-                          className="h-3 w-3"
-                        />
-                        값 굵게 표시
-                      </label>
-                    </div>
-                  )}
-                  
-                  {/* 🆕 숫자 타입 포맷 설정 */}
-                  {(() => {
-                    // 컬럼 타입 확인
-                    const column = rightTableColumns.find(c => c.columnName === col.name);
-                    const isNumeric = column && ['numeric', 'decimal', 'integer', 'bigint', 'double precision', 'real'].includes(column.dataType?.toLowerCase() || '');
-                    
-                    if (!isNumeric) return null;
-                    
-                    return (
-                      <div className="space-y-2 border-t pt-2">
-                        <Label className="text-[10px] text-gray-600">숫자 포맷 설정</Label>
-                        
-                        <div className="grid grid-cols-2 gap-2">
-                          {/* 천 단위 구분자 */}
-                          <label className="flex items-center gap-1.5 text-[10px] cursor-pointer">
+                        </div>
+                        <div className="space-y-1">
+                          <Label className="text-[10px] text-gray-600">정렬</Label>
+                          <Select
+                            value={col.align || "left"}
+                            onValueChange={(value: "left" | "center" | "right") => {
+                              const newColumns = [...(config.rightPanel?.columns || [])];
+                              newColumns[index] = {
+                                ...newColumns[index],
+                                align: value,
+                              };
+                              updateRightPanel({ columns: newColumns });
+                            }}
+                          >
+                            <SelectTrigger className="h-7 text-xs">
+                              <SelectValue />
+                            </SelectTrigger>
+                            <SelectContent>
+                              <SelectItem value="left">왼쪽</SelectItem>
+                              <SelectItem value="center">가운데</SelectItem>
+                              <SelectItem value="right">오른쪽</SelectItem>
+                            </SelectContent>
+                          </Select>
+                        </div>
+                        <div className="flex items-end">
+                          <label className="flex h-7 cursor-pointer items-center gap-1 text-[10px]">
                             <input
                               type="checkbox"
-                              checked={col.format?.thousandSeparator ?? false}
+                              checked={col.sortable ?? false}
                               onChange={(e) => {
                                 const newColumns = [...(config.rightPanel?.columns || [])];
                                 newColumns[index] = {
                                   ...newColumns[index],
-                                  format: {
-                                    ...newColumns[index].format,
-                                    thousandSeparator: e.target.checked,
-                                  },
+                                  sortable: e.target.checked,
                                 };
                                 updateRightPanel({ columns: newColumns });
                               }}
                               className="h-3 w-3"
                             />
-                            천 단위 구분자 (,)
+                            정렬가능
                           </label>
-                          
-                          {/* 소수점 자릿수 */}
-                          <div className="space-y-1">
-                            <Label className="text-[10px] text-gray-600">소수점</Label>
-                            <Input
-                              type="number"
-                              min="0"
-                              max="10"
-                              placeholder="0"
-                              value={col.format?.decimalPlaces ?? ''}
-                              onChange={(e) => {
-                                const newColumns = [...(config.rightPanel?.columns || [])];
-                                newColumns[index] = {
-                                  ...newColumns[index],
-                                  format: {
-                                    ...newColumns[index].format,
-                                    decimalPlaces: e.target.value ? parseInt(e.target.value) : undefined,
-                                  },
-                                };
-                                updateRightPanel({ columns: newColumns });
-                              }}
-                              className="h-7 text-xs"
-                            />
-                          </div>
                         </div>
-                        
-                        <div className="grid grid-cols-2 gap-2">
-                          {/* 접두사 */}
-                          <div className="space-y-1">
-                            <Label className="text-[10px] text-gray-600">접두사</Label>
-                            <Input
-                              type="text"
-                              placeholder="₩, $, 등"
-                              value={col.format?.prefix ?? ''}
-                              onChange={(e) => {
-                                const newColumns = [...(config.rightPanel?.columns || [])];
-                                newColumns[index] = {
-                                  ...newColumns[index],
-                                  format: {
-                                    ...newColumns[index].format,
-                                    prefix: e.target.value || undefined,
-                                  },
-                                };
-                                updateRightPanel({ columns: newColumns });
-                              }}
-                              className="h-7 text-xs"
-                            />
-                          </div>
-                          
-                          {/* 접미사 */}
-                          <div className="space-y-1">
-                            <Label className="text-[10px] text-gray-600">접미사</Label>
-                            <Input
-                              type="text"
-                              placeholder="원, 개, 등"
-                              value={col.format?.suffix ?? ''}
-                              onChange={(e) => {
-                                const newColumns = [...(config.rightPanel?.columns || [])];
-                                newColumns[index] = {
-                                  ...newColumns[index],
-                                  format: {
-                                    ...newColumns[index].format,
-                                    suffix: e.target.value || undefined,
-                                  },
-                                };
-                                updateRightPanel({ columns: newColumns });
-                              }}
-                              className="h-7 text-xs"
-                            />
-                          </div>
-                        </div>
-                        
-                        {/* 미리보기 */}
-                        {(col.format?.thousandSeparator || col.format?.prefix || col.format?.suffix || col.format?.decimalPlaces !== undefined) && (
+                      </div>
+                    )}
+
+                    {/* LIST 모드: 볼드 설정 */}
+                    {!isTableMode && (
+                      <div className="space-y-2 border-t pt-2">
+                        <Label className="text-[10px] text-gray-600">요약 표시 옵션</Label>
+                        <label className="flex cursor-pointer items-center gap-1.5 text-[10px]">
+                          <input
+                            type="checkbox"
+                            checked={col.bold ?? false}
+                            onChange={(e) => {
+                              const newColumns = [...(config.rightPanel?.columns || [])];
+                              newColumns[index] = { ...newColumns[index], bold: e.target.checked };
+                              updateRightPanel({ columns: newColumns });
+                            }}
+                            className="h-3 w-3"
+                          />
+                          값 굵게 표시
+                        </label>
+                      </div>
+                    )}
+
+                    {/* 🆕 날짜 타입 포맷 설정 */}
+                    {(() => {
+                      // 컬럼 타입 확인 (DB 타입 + 입력 타입 모두 체크)
+                      const column = rightTableColumns.find((c) => c.columnName === col.name);
+                      const dbDateTypes = [
+                        "date",
+                        "timestamp",
+                        "timestamptz",
+                        "timestamp with time zone",
+                        "timestamp without time zone",
+                        "time",
+                        "timetz",
+                      ];
+                      const inputDateTypes = ["date", "datetime", "time"];
+
+                      const isDate =
+                        column &&
+                        (dbDateTypes.includes(column.dataType?.toLowerCase() || "") ||
+                          inputDateTypes.includes(column.input_type?.toLowerCase() || "") ||
+                          inputDateTypes.includes(column.webType?.toLowerCase() || ""));
+
+                      if (!isDate) return null;
+
+                      return (
+                        <div className="space-y-2 border-t pt-2">
+                          <Label className="text-[10px] text-gray-600">날짜 포맷 설정</Label>
+                          <Select
+                            value={col.format?.dateFormat || "YYYY-MM-DD"}
+                            onValueChange={(value) => {
+                              const newColumns = [...(config.rightPanel?.columns || [])];
+                              newColumns[index] = {
+                                ...newColumns[index],
+                                format: {
+                                  ...newColumns[index].format,
+                                  type: "date",
+                                  dateFormat: value,
+                                },
+                              };
+                              updateRightPanel({ columns: newColumns });
+                            }}
+                          >
+                            <SelectTrigger className="h-8 text-xs">
+                              <SelectValue placeholder="날짜 형식 선택" />
+                            </SelectTrigger>
+                            <SelectContent>
+                              <SelectItem value="YYYY-MM-DD">2024-01-15 (YYYY-MM-DD)</SelectItem>
+                              <SelectItem value="YYYY.MM.DD">2024.01.15 (YYYY.MM.DD)</SelectItem>
+                              <SelectItem value="YYYY/MM/DD">2024/01/15 (YYYY/MM/DD)</SelectItem>
+                              <SelectItem value="MM-DD-YYYY">01-15-2024 (MM-DD-YYYY)</SelectItem>
+                              <SelectItem value="DD-MM-YYYY">15-01-2024 (DD-MM-YYYY)</SelectItem>
+                              <SelectItem value="YYYY-MM-DD HH:mm">2024-01-15 14:30 (날짜+시간)</SelectItem>
+                              <SelectItem value="YYYY-MM-DD HH:mm:ss">2024-01-15 14:30:45 (날짜+시간+초)</SelectItem>
+                              <SelectItem value="relative">상대 시간 (3일 전)</SelectItem>
+                            </SelectContent>
+                          </Select>
+                          {/* 미리보기 */}
                           <div className="rounded bg-gray-100 p-2">
-                            <p className="text-[10px] text-gray-600 mb-1">미리보기:</p>
+                            <p className="mb-1 text-[10px] text-gray-600">미리보기:</p>
                             <p className="text-xs font-medium">
-                              {col.format?.prefix || ''}
-                              {(1234567.89).toLocaleString('ko-KR', {
-                                minimumFractionDigits: col.format?.decimalPlaces ?? 0,
-                                maximumFractionDigits: col.format?.decimalPlaces ?? 10,
-                                useGrouping: col.format?.thousandSeparator ?? false,
-                              })}
-                              {col.format?.suffix || ''}
+                              {(() => {
+                                const now = new Date();
+                                const format = col.format?.dateFormat || "YYYY-MM-DD";
+                                if (format === "relative") return "3일 전";
+                                return format
+                                  .replace("YYYY", String(now.getFullYear()))
+                                  .replace("MM", String(now.getMonth() + 1).padStart(2, "0"))
+                                  .replace("DD", String(now.getDate()).padStart(2, "0"))
+                                  .replace("HH", String(now.getHours()).padStart(2, "0"))
+                                  .replace("mm", String(now.getMinutes()).padStart(2, "0"))
+                                  .replace("ss", String(now.getSeconds()).padStart(2, "0"));
+                              })()}
                             </p>
                           </div>
-                        )}
-                      </div>
-                    );
-                  })()}
-                </div>
-              );
+                        </div>
+                      );
+                    })()}
+
+                    {/* 🆕 숫자 타입 포맷 설정 */}
+                    {(() => {
+                      // 컬럼 타입 확인 (DB 타입 + 입력 타입 모두 체크)
+                      const column = rightTableColumns.find((c) => c.columnName === col.name);
+                      const dbNumericTypes = [
+                        "numeric",
+                        "decimal",
+                        "integer",
+                        "bigint",
+                        "double precision",
+                        "real",
+                        "smallint",
+                        "int4",
+                        "int8",
+                        "float4",
+                        "float8",
+                      ];
+                      const inputNumericTypes = ["number", "decimal", "currency", "integer"];
+
+                      const isNumeric =
+                        column &&
+                        (dbNumericTypes.includes(column.dataType?.toLowerCase() || "") ||
+                          inputNumericTypes.includes(column.input_type?.toLowerCase() || "") ||
+                          inputNumericTypes.includes(column.webType?.toLowerCase() || ""));
+
+                      if (!isNumeric) return null;
+
+                      return (
+                        <div className="space-y-2 border-t pt-2">
+                          <Label className="text-[10px] text-gray-600">숫자 포맷 설정</Label>
+
+                          <div className="grid grid-cols-2 gap-2">
+                            {/* 천 단위 구분자 */}
+                            <label className="flex cursor-pointer items-center gap-1.5 text-[10px]">
+                              <input
+                                type="checkbox"
+                                checked={col.format?.thousandSeparator ?? false}
+                                onChange={(e) => {
+                                  const newColumns = [...(config.rightPanel?.columns || [])];
+                                  newColumns[index] = {
+                                    ...newColumns[index],
+                                    format: {
+                                      ...newColumns[index].format,
+                                      thousandSeparator: e.target.checked,
+                                    },
+                                  };
+                                  updateRightPanel({ columns: newColumns });
+                                }}
+                                className="h-3 w-3"
+                              />
+                              천 단위 구분자 (,)
+                            </label>
+
+                            {/* 소수점 자릿수 */}
+                            <div className="space-y-1">
+                              <Label className="text-[10px] text-gray-600">소수점</Label>
+                              <Input
+                                type="number"
+                                min="0"
+                                max="10"
+                                placeholder="0"
+                                value={col.format?.decimalPlaces ?? ""}
+                                onChange={(e) => {
+                                  const newColumns = [...(config.rightPanel?.columns || [])];
+                                  newColumns[index] = {
+                                    ...newColumns[index],
+                                    format: {
+                                      ...newColumns[index].format,
+                                      decimalPlaces: e.target.value ? parseInt(e.target.value) : undefined,
+                                    },
+                                  };
+                                  updateRightPanel({ columns: newColumns });
+                                }}
+                                className="h-7 text-xs"
+                              />
+                            </div>
+                          </div>
+
+                          <div className="grid grid-cols-2 gap-2">
+                            {/* 접두사 */}
+                            <div className="space-y-1">
+                              <Label className="text-[10px] text-gray-600">접두사</Label>
+                              <Input
+                                type="text"
+                                placeholder="₩, $, 등"
+                                value={col.format?.prefix ?? ""}
+                                onChange={(e) => {
+                                  const newColumns = [...(config.rightPanel?.columns || [])];
+                                  newColumns[index] = {
+                                    ...newColumns[index],
+                                    format: {
+                                      ...newColumns[index].format,
+                                      prefix: e.target.value || undefined,
+                                    },
+                                  };
+                                  updateRightPanel({ columns: newColumns });
+                                }}
+                                className="h-7 text-xs"
+                              />
+                            </div>
+
+                            {/* 접미사 */}
+                            <div className="space-y-1">
+                              <Label className="text-[10px] text-gray-600">접미사</Label>
+                              <Input
+                                type="text"
+                                placeholder="원, 개, 등"
+                                value={col.format?.suffix ?? ""}
+                                onChange={(e) => {
+                                  const newColumns = [...(config.rightPanel?.columns || [])];
+                                  newColumns[index] = {
+                                    ...newColumns[index],
+                                    format: {
+                                      ...newColumns[index].format,
+                                      suffix: e.target.value || undefined,
+                                    },
+                                  };
+                                  updateRightPanel({ columns: newColumns });
+                                }}
+                                className="h-7 text-xs"
+                              />
+                            </div>
+                          </div>
+
+                          {/* 미리보기 */}
+                          {(col.format?.thousandSeparator ||
+                            col.format?.prefix ||
+                            col.format?.suffix ||
+                            col.format?.decimalPlaces !== undefined) && (
+                            <div className="rounded bg-gray-100 p-2">
+                              <p className="mb-1 text-[10px] text-gray-600">미리보기:</p>
+                              <p className="text-xs font-medium">
+                                {col.format?.prefix || ""}
+                                {(1234567.89).toLocaleString("ko-KR", {
+                                  minimumFractionDigits: col.format?.decimalPlaces ?? 0,
+                                  maximumFractionDigits: col.format?.decimalPlaces ?? 10,
+                                  useGrouping: col.format?.thousandSeparator ?? false,
+                                })}
+                                {col.format?.suffix || ""}
+                              </p>
+                            </div>
+                          )}
+                        </div>
+                      );
+                    })()}
+                  </div>
+                );
               })
             )}
           </div>
@@ -2055,10 +2353,7 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
                 variant="outline"
                 onClick={() => {
                   const currentColumns = config.rightPanel?.addModalColumns || [];
-                  const newColumns = [
-                    ...currentColumns,
-                    { name: "", label: "", required: false },
-                  ];
+                  const newColumns = [...currentColumns, { name: "", label: "", required: false }];
                   updateRightPanel({ addModalColumns: newColumns });
                 }}
                 className="h-7 text-xs"
@@ -2068,9 +2363,7 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
                 컬럼 추가
               </Button>
             </div>
-            <p className="text-xs text-gray-600">
-              추가 버튼 클릭 시 모달에 표시될 입력 필드를 선택하세요
-            </p>
+            <p className="text-xs text-gray-600">추가 버튼 클릭 시 모달에 표시될 입력 필드를 선택하세요</p>
 
             <div className="space-y-2">
               {(config.rightPanel?.addModalColumns || []).length === 0 ? (
@@ -2080,120 +2373,114 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
               ) : (
                 (config.rightPanel?.addModalColumns || []).map((col, index) => {
                   // 현재 컬럼이 PK인지 확인
-                  const column = rightTableColumns.find(c => c.columnName === col.name);
+                  const column = rightTableColumns.find((c) => c.columnName === col.name);
                   const isPK = column?.isPrimaryKey || false;
-                  
+
                   return (
-                  <div
-                    key={index}
-                    className={cn(
-                      "flex items-center gap-2 rounded-md border p-2",
-                      isPK ? "bg-yellow-50 border-yellow-300" : "bg-white"
-                    )}
-                  >
-                    {isPK && (
-                      <span className="text-[10px] font-semibold text-yellow-700 px-1.5 py-0.5 bg-yellow-200 rounded">
-                        PK
-                      </span>
-                    )}
-                    <div className="flex-1">
-                      <Popover>
-                        <PopoverTrigger asChild>
-                          <Button
-                            variant="outline"
-                            role="combobox"
-                            disabled={isPK}
-                            className="h-8 w-full justify-between text-xs"
-                          >
-                            {col.name || "컬럼 선택"}
-                            <ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
-                          </Button>
-                        </PopoverTrigger>
-                        <PopoverContent className="w-full p-0">
-                          <Command>
-                            <CommandInput placeholder="컬럼 검색..." className="text-xs" />
-                            <CommandEmpty className="text-xs">컬럼을 찾을 수 없습니다.</CommandEmpty>
-                            <CommandGroup className="max-h-[200px] overflow-auto">
-                              {rightTableColumns
-                                .filter((column) => !['company_code', 'company_name'].includes(column.columnName))
-                                .map((column) => (
-                                <CommandItem
-                                  key={column.columnName}
-                                  value={column.columnName}
-                                  onSelect={(value) => {
-                                    const newColumns = [...(config.rightPanel?.addModalColumns || [])];
-                                    newColumns[index] = {
-                                      ...newColumns[index],
-                                      name: value,
-                                      label: column.columnLabel || value,
-                                    };
-                                    updateRightPanel({ addModalColumns: newColumns });
-                                  }}
-                                  className="text-xs"
-                                >
-                                  <Check
-                                    className={cn(
-                                      "mr-2 h-3 w-3",
-                                      col.name === column.columnName ? "opacity-100" : "opacity-0"
-                                    )}
-                                  />
-                                  {column.columnLabel || column.columnName}
-                                  <span className="ml-2 text-[10px] text-gray-500">
-                                    ({column.columnName})
-                                  </span>
-                                </CommandItem>
-                              ))}
-                            </CommandGroup>
-                          </Command>
-                        </PopoverContent>
-                      </Popover>
-                    </div>
-                    <div className="flex items-center gap-1">
-                      <label className="flex items-center gap-1 text-xs text-gray-600 cursor-pointer">
-                        <input
-                          type="checkbox"
-                          checked={col.required ?? false}
-                          disabled={isPK}
-                          onChange={(e) => {
-                            const newColumns = [...(config.rightPanel?.addModalColumns || [])];
-                            newColumns[index] = {
-                              ...newColumns[index],
-                              required: e.target.checked,
-                            };
-                            updateRightPanel({ addModalColumns: newColumns });
-                          }}
-                          className="h-3 w-3"
-                        />
-                        필수
-                      </label>
-                    </div>
-                    <Button
-                      size="sm"
-                      variant="ghost"
-                      disabled={isPK}
-                      onClick={() => {
-                        const newColumns = (config.rightPanel?.addModalColumns || []).filter(
-                          (_, i) => i !== index
-                        );
-                        updateRightPanel({ addModalColumns: newColumns });
-                      }}
-                      className="h-8 w-8 p-0"
-                      title={isPK ? "PK 컬럼은 삭제할 수 없습니다" : ""}
+                    <div
+                      key={index}
+                      className={cn(
+                        "flex items-center gap-2 rounded-md border p-2",
+                        isPK ? "border-yellow-300 bg-yellow-50" : "bg-white",
+                      )}
                     >
-                      <X className="h-3 w-3" />
-                    </Button>
-                  </div>
-                );
+                      {isPK && (
+                        <span className="rounded bg-yellow-200 px-1.5 py-0.5 text-[10px] font-semibold text-yellow-700">
+                          PK
+                        </span>
+                      )}
+                      <div className="flex-1">
+                        <Popover>
+                          <PopoverTrigger asChild>
+                            <Button
+                              variant="outline"
+                              role="combobox"
+                              disabled={isPK}
+                              className="h-8 w-full justify-between text-xs"
+                            >
+                              {col.name || "컬럼 선택"}
+                              <ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
+                            </Button>
+                          </PopoverTrigger>
+                          <PopoverContent className="w-full p-0">
+                            <Command>
+                              <CommandInput placeholder="컬럼 검색..." className="text-xs" />
+                              <CommandEmpty className="text-xs">컬럼을 찾을 수 없습니다.</CommandEmpty>
+                              <CommandGroup className="max-h-[200px] overflow-auto">
+                                {rightTableColumns
+                                  .filter((column) => !["company_code", "company_name"].includes(column.columnName))
+                                  .map((column) => (
+                                    <CommandItem
+                                      key={column.columnName}
+                                      value={column.columnName}
+                                      onSelect={(value) => {
+                                        const newColumns = [...(config.rightPanel?.addModalColumns || [])];
+                                        newColumns[index] = {
+                                          ...newColumns[index],
+                                          name: value,
+                                          label: column.columnLabel || value,
+                                        };
+                                        updateRightPanel({ addModalColumns: newColumns });
+                                      }}
+                                      className="text-xs"
+                                    >
+                                      <Check
+                                        className={cn(
+                                          "mr-2 h-3 w-3",
+                                          col.name === column.columnName ? "opacity-100" : "opacity-0",
+                                        )}
+                                      />
+                                      {column.columnLabel || column.columnName}
+                                      <span className="ml-2 text-[10px] text-gray-500">({column.columnName})</span>
+                                    </CommandItem>
+                                  ))}
+                              </CommandGroup>
+                            </Command>
+                          </PopoverContent>
+                        </Popover>
+                      </div>
+                      <div className="flex items-center gap-1">
+                        <label className="flex cursor-pointer items-center gap-1 text-xs text-gray-600">
+                          <input
+                            type="checkbox"
+                            checked={col.required ?? false}
+                            disabled={isPK}
+                            onChange={(e) => {
+                              const newColumns = [...(config.rightPanel?.addModalColumns || [])];
+                              newColumns[index] = {
+                                ...newColumns[index],
+                                required: e.target.checked,
+                              };
+                              updateRightPanel({ addModalColumns: newColumns });
+                            }}
+                            className="h-3 w-3"
+                          />
+                          필수
+                        </label>
+                      </div>
+                      <Button
+                        size="sm"
+                        variant="ghost"
+                        disabled={isPK}
+                        onClick={() => {
+                          const newColumns = (config.rightPanel?.addModalColumns || []).filter((_, i) => i !== index);
+                          updateRightPanel({ addModalColumns: newColumns });
+                        }}
+                        className="h-8 w-8 p-0"
+                        title={isPK ? "PK 컬럼은 삭제할 수 없습니다" : ""}
+                      >
+                        <X className="h-3 w-3" />
+                      </Button>
+                    </div>
+                  );
                 })
               )}
             </div>
 
             {/* 중계 테이블 설정 */}
-            <div className="space-y-3 rounded-lg border border-orange-200 bg-orange-50 p-3 mt-3">
+            <div className="mt-3 space-y-3 rounded-lg border border-orange-200 bg-orange-50 p-3">
               <Label className="text-sm font-semibold">중계 테이블 설정 (N:M 관계)</Label>
-              <p className="text-xs text-gray-600">
-                중계 테이블을 사용하여 다대다 관계를 구현합니다
-              </p>
+              <p className="text-xs text-gray-600">중계 테이블을 사용하여 다대다 관계를 구현합니다</p>
 
               <div>
                 <Label className="text-xs text-gray-700">실제 저장할 테이블</Label>
@@ -2211,9 +2498,7 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
                   placeholder="예: user_dept"
                   className="mt-1 h-8 text-xs"
                 />
-                <p className="mt-1 text-[10px] text-gray-500">
-                  데이터가 실제로 저장될 중계 테이블명
-                </p>
+                <p className="mt-1 text-[10px] text-gray-500">데이터가 실제로 저장될 중계 테이블명</p>
               </div>
 
               <div>
@@ -2232,9 +2517,7 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
                   placeholder="예: dept_code"
                   className="mt-1 h-8 text-xs"
                 />
-                <p className="mt-1 text-[10px] text-gray-500">
-                  좌측 패널에서 선택한 항목의 어떤 컬럼값을 가져올지
-                </p>
+                <p className="mt-1 text-[10px] text-gray-500">좌측 패널에서 선택한 항목의 어떤 컬럼값을 가져올지</p>
               </div>
 
               <div>
@@ -2253,9 +2536,7 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
                   placeholder="예: dept_code"
                   className="mt-1 h-8 text-xs"
                 />
-                <p className="mt-1 text-[10px] text-gray-500">
-                  중계 테이블의 어떤 컬럼에 좌측값을 저장할지
-                </p>
+                <p className="mt-1 text-[10px] text-gray-500">중계 테이블의 어떤 컬럼에 좌측값을 저장할지</p>
               </div>
 
               <div>
@@ -2277,11 +2558,9 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
                     }
                   }}
                   placeholder='{ "is_primary": false }'
-                  className="mt-1 h-20 w-full rounded-md border border-input bg-white px-3 py-2 text-xs font-mono"
+                  className="border-input mt-1 h-20 w-full rounded-md border bg-white px-3 py-2 font-mono text-xs"
                 />
-                <p className="mt-1 text-[10px] text-gray-500">
-                  자동으로 채워질 컬럼과 기본값 (예: is_primary: false)
-                </p>
+                <p className="mt-1 text-[10px] text-gray-500">자동으로 채워질 컬럼과 기본값 (예: is_primary: false)</p>
               </div>
             </div>
           </div>
@@ -2289,33 +2568,32 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
       </div>
 
       {/* 우측 패널 데이터 필터링 */}
-      <div className="space-y-4 border-t pt-4 mt-4">
+      <div className="mt-4 space-y-4 border-t pt-4">
         <h3 className="text-sm font-semibold">우측 패널 데이터 필터링</h3>
-        <p className="text-xs text-muted-foreground">
-          특정 컬럼 값으로 우측 패널 데이터를 필터링합니다
-        </p>
-              <DataFilterConfigPanel
-                tableName={config.rightPanel?.tableName}
-                columns={rightTableColumns.map((col) => ({
-                  columnName: col.columnName,
-                  columnLabel: col.columnLabel || col.columnName,
-                  dataType: col.dataType || "text",
-                  input_type: (col as any).input_type,
-                } as any))}
-                config={config.rightPanel?.dataFilter}
-                onConfigChange={(dataFilter) => updateRightPanel({ dataFilter })}
-                menuObjid={menuObjid} // 🆕 메뉴 OBJID 전달
-              />
+        <p className="text-muted-foreground text-xs">특정 컬럼 값으로 우측 패널 데이터를 필터링합니다</p>
+        <DataFilterConfigPanel
+          tableName={config.rightPanel?.tableName}
+          columns={rightTableColumns.map(
+            (col) =>
+              ({
+                columnName: col.columnName,
+                columnLabel: col.columnLabel || col.columnName,
+                dataType: col.dataType || "text",
+                input_type: (col as any).input_type,
+              }) as any,
+          )}
+          config={config.rightPanel?.dataFilter}
+          onConfigChange={(dataFilter) => updateRightPanel({ dataFilter })}
+          menuObjid={menuObjid} // 🆕 메뉴 OBJID 전달
+        />
       </div>
 
       {/* 우측 패널 중복 제거 */}
-      <div className="space-y-4 border-t pt-4 mt-4">
+      <div className="mt-4 space-y-4 border-t pt-4">
         <div className="flex items-center justify-between">
           <div>
             <h3 className="text-sm font-semibold">중복 데이터 제거</h3>
-            <p className="text-xs text-muted-foreground">
-              같은 값을 가진 데이터를 하나로 통합하여 표시
-            </p>
+            <p className="text-muted-foreground text-xs">같은 값을 가진 데이터를 하나로 통합하여 표시</p>
           </div>
           <Switch
             checked={config.rightPanel?.deduplication?.enabled ?? false}
@@ -2337,7 +2615,7 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
         </div>
 
         {config.rightPanel?.deduplication?.enabled && (
-          <div className="space-y-3 pl-4 border-l-2">
+          <div className="space-y-3 border-l-2 pl-4">
             {/* 중복 제거 기준 컬럼 */}
             <div>
               <Label className="text-xs">중복 제거 기준 컬럼</Label>
@@ -2360,7 +2638,7 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
                   ))}
                 </SelectContent>
               </Select>
-              <p className="text-[10px] text-muted-foreground mt-1">
+              <p className="text-muted-foreground mt-1 text-[10px]">
                 이 컬럼의 값이 같은 데이터들 중 하나만 표시합니다
               </p>
             </div>
@@ -2386,11 +2664,15 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
                   <SelectItem value="base_price">기준단가로 설정된 데이터</SelectItem>
                 </SelectContent>
               </Select>
-              <p className="text-[10px] text-muted-foreground mt-1">
-                {config.rightPanel?.deduplication?.keepStrategy === "latest" && "가장 최근에 추가된 데이터를 표시합니다"}
-                {config.rightPanel?.deduplication?.keepStrategy === "earliest" && "가장 먼저 추가된 데이터를 표시합니다"}
-                {config.rightPanel?.deduplication?.keepStrategy === "current_date" && "오늘 날짜 기준으로 유효한 기간의 데이터를 표시합니다"}
-                {config.rightPanel?.deduplication?.keepStrategy === "base_price" && "기준단가(base_price)로 체크된 데이터를 표시합니다"}
+              <p className="text-muted-foreground mt-1 text-[10px]">
+                {config.rightPanel?.deduplication?.keepStrategy === "latest" &&
+                  "가장 최근에 추가된 데이터를 표시합니다"}
+                {config.rightPanel?.deduplication?.keepStrategy === "earliest" &&
+                  "가장 먼저 추가된 데이터를 표시합니다"}
+                {config.rightPanel?.deduplication?.keepStrategy === "current_date" &&
+                  "오늘 날짜 기준으로 유효한 기간의 데이터를 표시합니다"}
+                {config.rightPanel?.deduplication?.keepStrategy === "base_price" &&
+                  "기준단가(base_price)로 체크된 데이터를 표시합니다"}
               </p>
             </div>
 
@@ -2412,7 +2694,10 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
                   </SelectTrigger>
                   <SelectContent>
                     {rightTableColumns
-                      .filter(col => col.dataType === 'date' || col.dataType === 'timestamp' || col.columnName.includes('date'))
+                      .filter(
+                        (col) =>
+                          col.dataType === "date" || col.dataType === "timestamp" || col.columnName.includes("date"),
+                      )
                       .map((col) => (
                         <SelectItem key={col.columnName} value={col.columnName}>
                           {col.columnLabel || col.columnName}
@@ -2420,7 +2705,7 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
                       ))}
                   </SelectContent>
                 </Select>
-                <p className="text-[10px] text-muted-foreground mt-1">
+                <p className="text-muted-foreground mt-1 text-[10px]">
                   이 컬럼의 값으로 최신/최초를 판단합니다 (보통 날짜 컬럼)
                 </p>
               </div>
@@ -2430,13 +2715,11 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
       </div>
 
       {/* 🆕 우측 패널 수정 버튼 설정 */}
-      <div className="space-y-4 border-t pt-4 mt-4">
+      <div className="mt-4 space-y-4 border-t pt-4">
         <div className="flex items-center justify-between">
           <div>
             <h3 className="text-sm font-semibold">수정 버튼 설정</h3>
-            <p className="text-xs text-muted-foreground">
-              우측 리스트의 수정 버튼 동작 방식 설정
-            </p>
+            <p className="text-muted-foreground text-xs">우측 리스트의 수정 버튼 동작 방식 설정</p>
           </div>
           <Switch
             checked={config.rightPanel?.editButton?.enabled ?? true}
@@ -2454,7 +2737,7 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
         </div>
 
         {(config.rightPanel?.editButton?.enabled ?? true) && (
-          <div className="space-y-3 pl-4 border-l-2">
+          <div className="space-y-3 border-l-2 pl-4">
             {/* 수정 모드 */}
             <div>
               <Label className="text-xs">수정 모드</Label>
@@ -2478,7 +2761,7 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
                   <SelectItem value="modal">커스텀 모달 화면</SelectItem>
                 </SelectContent>
               </Select>
-              <p className="text-[10px] text-muted-foreground mt-1">
+              <p className="text-muted-foreground mt-1 text-[10px]">
                 {config.rightPanel?.editButton?.mode === "modal"
                   ? "지정한 화면을 모달로 열어 데이터를 수정합니다"
                   : "현재 위치에서 직접 데이터를 수정합니다"}
@@ -2500,9 +2783,7 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
                     })
                   }
                 />
-                <p className="text-[10px] text-muted-foreground mt-1">
-                  수정 버튼 클릭 시 열릴 화면을 선택하세요
-                </p>
+                <p className="text-muted-foreground mt-1 text-[10px]">수정 버튼 클릭 시 열릴 화면을 선택하세요</p>
               </div>
             )}
 
@@ -2574,9 +2855,100 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
         )}
       </div>
 
-      {/* 레이아웃 설정 */}
-      <div className="space-y-4 border-t pt-4 mt-4">
+      {/* 🆕 우측 패널 삭제 버튼 설정 */}
+      <div className="space-y-3 rounded-lg border border-red-200 bg-red-50 p-3">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <h3 className="text-sm font-semibold">삭제 버튼 설정</h3>
+          </div>
+          <Switch
+            checked={config.rightPanel?.deleteButton?.enabled ?? true}
+            onCheckedChange={(checked) => {
+              updateRightPanel({
+                deleteButton: {
+                  enabled: checked,
+                  buttonLabel: config.rightPanel?.deleteButton?.buttonLabel,
+                  buttonVariant: config.rightPanel?.deleteButton?.buttonVariant,
+                },
+              });
+            }}
+          />
+        </div>
 
+        {(config.rightPanel?.deleteButton?.enabled ?? true) && (
+          <div className="space-y-3">
+            <div className="grid grid-cols-2 gap-3">
+              {/* 버튼 라벨 */}
+              <div className="space-y-1">
+                <Label className="text-xs">버튼 라벨</Label>
+                <Input
+                  value={config.rightPanel?.deleteButton?.buttonLabel || ""}
+                  placeholder="삭제"
+                  onChange={(e) => {
+                    updateRightPanel({
+                      deleteButton: {
+                        ...config.rightPanel?.deleteButton!,
+                        buttonLabel: e.target.value || undefined,
+                        enabled: config.rightPanel?.deleteButton?.enabled ?? true,
+                      },
+                    });
+                  }}
+                  className="h-8 text-xs"
+                />
+              </div>
+
+              {/* 버튼 스타일 */}
+              <div className="space-y-1">
+                <Label className="text-xs">버튼 스타일</Label>
+                <Select
+                  value={config.rightPanel?.deleteButton?.buttonVariant || "ghost"}
+                  onValueChange={(value: "default" | "outline" | "ghost" | "destructive") => {
+                    updateRightPanel({
+                      deleteButton: {
+                        ...config.rightPanel?.deleteButton!,
+                        buttonVariant: value,
+                        enabled: config.rightPanel?.deleteButton?.enabled ?? true,
+                      },
+                    });
+                  }}
+                >
+                  <SelectTrigger className="h-8 text-xs">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="ghost">Ghost (기본)</SelectItem>
+                    <SelectItem value="outline">Outline</SelectItem>
+                    <SelectItem value="default">Default</SelectItem>
+                    <SelectItem value="destructive">Destructive (빨강)</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+            </div>
+
+            {/* 삭제 확인 메시지 */}
+            <div className="space-y-1">
+              <Label className="text-xs">삭제 확인 메시지</Label>
+              <Input
+                value={config.rightPanel?.deleteButton?.confirmMessage || ""}
+                placeholder="정말 삭제하시겠습니까?"
+                onChange={(e) => {
+                  updateRightPanel({
+                    deleteButton: {
+                      ...config.rightPanel?.deleteButton!,
+                      confirmMessage: e.target.value || undefined,
+                      enabled: config.rightPanel?.deleteButton?.enabled ?? true,
+                    },
+                  });
+                }}
+                className="h-8 text-xs"
+              />
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* 레이아웃 설정 */}
+      <div className="mt-4 space-y-4 border-t pt-4">
         <div className="space-y-2">
           <Label>좌측 패널 너비: {config.splitRatio || 30}%</Label>
           <Slider
diff --git a/frontend/lib/registry/components/split-panel-layout/types.ts b/frontend/lib/registry/components/split-panel-layout/types.ts
index e5471566..3fdc3792 100644
--- a/frontend/lib/registry/components/split-panel-layout/types.ts
+++ b/frontend/lib/registry/components/split-panel-layout/types.ts
@@ -104,10 +104,15 @@ export interface SplitPanelLayoutConfig {
 
     // 좌측 선택 항목과의 관계 설정
     relation?: {
-      type: "join" | "detail"; // 관계 타입
-      leftColumn?: string; // 좌측 테이블의 연결 컬럼
-      rightColumn?: string; // 우측 테이블의 연결 컬럼 (join용)
+      type?: "join" | "detail"; // 관계 타입 (optional - 하위 호환성)
+      leftColumn?: string; // 좌측 테이블의 연결 컬럼 (단일키 - 하위 호환성)
+      rightColumn?: string; // 우측 테이블의 연결 컬럼 (단일키 - 하위 호환성)
       foreignKey?: string; // 우측 테이블의 외래키 컬럼명
+      // 🆕 복합키 지원 (여러 컬럼으로 조인)
+      keys?: Array<{
+        leftColumn: string; // 좌측 테이블의 조인 컬럼
+        rightColumn: string; // 우측 테이블의 조인 컬럼
+      }>;
     };
 
     // 우측 패널 추가 시 중계 테이블 설정 (N:M 관계)
@@ -117,7 +122,7 @@ export interface SplitPanelLayoutConfig {
       leftPanelColumn?: string; // 좌측 패널의 어떤 컬럼값을 가져올지
       targetColumn?: string; // targetTable의 어떤 컬럼에 넣을지
     };
-    
+
     // 테이블 모드 설정
     tableConfig?: {
       showCheckbox?: boolean; // 체크박스 표시 여부
@@ -150,6 +155,14 @@ export interface SplitPanelLayoutConfig {
       buttonVariant?: "default" | "outline" | "ghost"; // 버튼 스타일 (기본: "outline")
       groupByColumns?: string[]; // 🆕 그룹핑 기준 컬럼들 (예: ["customer_id", "item_id"])
     };
+
+    // 🆕 삭제 버튼 설정
+    deleteButton?: {
+      enabled: boolean; // 삭제 버튼 표시 여부 (기본: true)
+      buttonLabel?: string; // 버튼 라벨 (기본: "삭제")
+      buttonVariant?: "default" | "outline" | "ghost" | "destructive"; // 버튼 스타일 (기본: "ghost")
+      confirmMessage?: string; // 삭제 확인 메시지
+    };
   };
 
   // 레이아웃 설정