diff --git a/.cursor/rules/multilang-component-guide.mdc b/.cursor/rules/multilang-component-guide.mdc
new file mode 100644
index 00000000..60bdc0ec
--- /dev/null
+++ b/.cursor/rules/multilang-component-guide.mdc
@@ -0,0 +1,559 @@
+# 다국어 지원 컴포넌트 개발 가이드
+
+새로운 화면 컴포넌트를 개발할 때 반드시 다국어 시스템을 고려해야 합니다.
+이 가이드는 컴포넌트가 다국어 자동 생성 및 매핑 시스템과 호환되도록 하는 방법을 설명합니다.
+
+---
+
+## 1. 타입 정의 시 다국어 필드 추가
+
+### 기본 원칙
+
+텍스트가 표시되는 **모든 속성**에 `langKeyId`와 `langKey` 필드를 함께 정의해야 합니다.
+
+### 단일 텍스트 속성
+
+```typescript
+interface MyComponentConfig {
+  // 기본 텍스트
+  title?: string;
+  // 다국어 키 (필수 추가)
+  titleLangKeyId?: number;
+  titleLangKey?: string;
+
+  // 라벨
+  label?: string;
+  labelLangKeyId?: number;
+  labelLangKey?: string;
+
+  // 플레이스홀더
+  placeholder?: string;
+  placeholderLangKeyId?: number;
+  placeholderLangKey?: string;
+}
+```
+
+### 배열/목록 속성 (컬럼, 탭 등)
+
+```typescript
+interface ColumnConfig {
+  name: string;
+  label: string;
+  // 다국어 키 (필수 추가)
+  langKeyId?: number;
+  langKey?: string;
+  // 기타 속성
+  width?: number;
+  align?: "left" | "center" | "right";
+}
+
+interface TabConfig {
+  id: string;
+  label: string;
+  // 다국어 키 (필수 추가)
+  langKeyId?: number;
+  langKey?: string;
+  // 탭 제목도 별도로
+  title?: string;
+  titleLangKeyId?: number;
+  titleLangKey?: string;
+}
+
+interface MyComponentConfig {
+  columns?: ColumnConfig[];
+  tabs?: TabConfig[];
+}
+```
+
+### 버튼 컴포넌트
+
+```typescript
+interface ButtonComponentConfig {
+  text?: string;
+  // 다국어 키 (필수 추가)
+  langKeyId?: number;
+  langKey?: string;
+}
+```
+
+### 실제 예시: 분할 패널
+
+```typescript
+interface SplitPanelLayoutConfig {
+  leftPanel?: {
+    title?: string;
+    langKeyId?: number; // 좌측 패널 제목 다국어
+    langKey?: string;
+    columns?: Array<{
+      name: string;
+      label: string;
+      langKeyId?: number; // 각 컬럼 다국어
+      langKey?: string;
+    }>;
+  };
+  rightPanel?: {
+    title?: string;
+    langKeyId?: number; // 우측 패널 제목 다국어
+    langKey?: string;
+    columns?: Array<{
+      name: string;
+      label: string;
+      langKeyId?: number;
+      langKey?: string;
+    }>;
+    additionalTabs?: Array<{
+      label: string;
+      langKeyId?: number; // 탭 라벨 다국어
+      langKey?: string;
+      title?: string;
+      titleLangKeyId?: number; // 탭 제목 다국어
+      titleLangKey?: string;
+      columns?: Array<{
+        name: string;
+        label: string;
+        langKeyId?: number;
+        langKey?: string;
+      }>;
+    }>;
+  };
+}
+```
+
+---
+
+## 2. 라벨 추출 로직 등록
+
+### 파일 위치
+
+`frontend/lib/utils/multilangLabelExtractor.ts`
+
+### `extractMultilangLabels` 함수에 추가
+
+새 컴포넌트의 라벨을 추출하는 로직을 추가해야 합니다.
+
+```typescript
+// 새 컴포넌트 타입 체크
+if (comp.componentType === "my-new-component") {
+  const config = comp.componentConfig as MyComponentConfig;
+
+  // 1. 제목 추출
+  if (config?.title) {
+    addLabel({
+      id: `${comp.id}_title`,
+      componentId: `${comp.id}_title`,
+      label: config.title,
+      type: "title",
+      parentType: "my-new-component",
+      parentLabel: config.title,
+      langKeyId: config.titleLangKeyId,
+      langKey: config.titleLangKey,
+    });
+  }
+
+  // 2. 컬럼 추출
+  if (config?.columns && Array.isArray(config.columns)) {
+    config.columns.forEach((col, index) => {
+      const colLabel = col.label || col.name;
+      addLabel({
+        id: `${comp.id}_col_${index}`,
+        componentId: `${comp.id}_col_${index}`,
+        label: colLabel,
+        type: "column",
+        parentType: "my-new-component",
+        parentLabel: config.title || "새 컴포넌트",
+        langKeyId: col.langKeyId,
+        langKey: col.langKey,
+      });
+    });
+  }
+
+  // 3. 버튼 텍스트 추출 (버튼 컴포넌트인 경우)
+  if (config?.text) {
+    addLabel({
+      id: `${comp.id}_button`,
+      componentId: `${comp.id}_button`,
+      label: config.text,
+      type: "button",
+      parentType: "my-new-component",
+      parentLabel: config.text,
+      langKeyId: config.langKeyId,
+      langKey: config.langKey,
+    });
+  }
+}
+```
+
+### 추출해야 할 라벨 타입
+
+| 타입          | 설명               | 예시                     |
+| ------------- | ------------------ | ------------------------ |
+| `title`       | 컴포넌트/패널 제목 | 분할패널 제목, 카드 제목 |
+| `label`       | 입력 필드 라벨     | 텍스트 입력 라벨         |
+| `button`      | 버튼 텍스트        | 저장, 취소, 삭제         |
+| `column`      | 테이블 컬럼 헤더   | 품목명, 수량, 금액       |
+| `tab`         | 탭 라벨            | 기본정보, 상세정보       |
+| `filter`      | 검색 필터 라벨     | 검색어, 기간             |
+| `placeholder` | 플레이스홀더       | "검색어를 입력하세요"    |
+| `action`      | 액션 버튼/링크     | 수정, 삭제, 상세보기     |
+
+---
+
+## 3. 매핑 적용 로직 등록
+
+### 파일 위치
+
+`frontend/lib/utils/multilangLabelExtractor.ts`
+
+### `applyMultilangMappings` 함수에 추가
+
+다국어 키가 선택되면 컴포넌트에 `langKeyId`와 `langKey`를 저장하는 로직을 추가합니다.
+
+```typescript
+// 새 컴포넌트 매핑 적용
+if (comp.componentType === "my-new-component") {
+  const config = comp.componentConfig as MyComponentConfig;
+
+  // 1. 제목 매핑
+  const titleMapping = mappingMap.get(`${comp.id}_title`);
+  if (titleMapping) {
+    updated.componentConfig = {
+      ...updated.componentConfig,
+      titleLangKeyId: titleMapping.keyId,
+      titleLangKey: titleMapping.langKey,
+    };
+  }
+
+  // 2. 컬럼 매핑
+  if (config?.columns && Array.isArray(config.columns)) {
+    const updatedColumns = config.columns.map((col, index) => {
+      const colMapping = mappingMap.get(`${comp.id}_col_${index}`);
+      if (colMapping) {
+        return {
+          ...col,
+          langKeyId: colMapping.keyId,
+          langKey: colMapping.langKey,
+        };
+      }
+      return col;
+    });
+    updated.componentConfig = {
+      ...updated.componentConfig,
+      columns: updatedColumns,
+    };
+  }
+
+  // 3. 버튼 매핑 (버튼 컴포넌트인 경우)
+  const buttonMapping = mappingMap.get(`${comp.id}_button`);
+  if (buttonMapping) {
+    updated.componentConfig = {
+      ...updated.componentConfig,
+      langKeyId: buttonMapping.keyId,
+      langKey: buttonMapping.langKey,
+    };
+  }
+}
+```
+
+### 주의사항
+
+- **객체 참조 유지**: 매핑 시 기존 `updated.componentConfig`를 기반으로 업데이트해야 합니다.
+- **중첩 구조**: 중첩된 객체(예: `leftPanel.columns`)는 상위 객체부터 순서대로 업데이트합니다.
+
+```typescript
+// 잘못된 방법 - 이전 업데이트 덮어쓰기
+updated.componentConfig = { ...config, langKeyId: mapping.keyId }; // ❌
+updated.componentConfig = { ...config, columns: updatedColumns }; // langKeyId 사라짐!
+
+// 올바른 방법 - 이전 업데이트 유지
+updated.componentConfig = {
+  ...updated.componentConfig,
+  langKeyId: mapping.keyId,
+}; // ✅
+updated.componentConfig = {
+  ...updated.componentConfig,
+  columns: updatedColumns,
+}; // ✅
+```
+
+---
+
+## 4. 번역 표시 로직 구현
+
+### 파일 위치
+
+새 컴포넌트 파일 (예: `frontend/lib/registry/components/my-component/MyComponent.tsx`)
+
+### Context 사용
+
+```typescript
+import { useScreenMultiLang } from "@/contexts/ScreenMultiLangContext";
+
+const MyComponent = ({ component }: Props) => {
+  const { getTranslatedText } = useScreenMultiLang();
+  const config = component.componentConfig;
+
+  // 제목 번역
+  const displayTitle = config?.titleLangKey
+    ? getTranslatedText(config.titleLangKey, config.title || "")
+    : config?.title || "";
+
+  // 컬럼 헤더 번역
+  const translatedColumns = config?.columns?.map((col) => ({
+    ...col,
+    displayLabel: col.langKey
+      ? getTranslatedText(col.langKey, col.label)
+      : col.label,
+  }));
+
+  // 버튼 텍스트 번역
+  const buttonText = config?.langKey
+    ? getTranslatedText(config.langKey, config.text || "")
+    : config?.text || "";
+
+  return (
+    <div>
+      <h2>{displayTitle}</h2>
+      <table>
+        <thead>
+          <tr>
+            {translatedColumns?.map((col, idx) => (
+              <th key={idx}>{col.displayLabel}</th>
+            ))}
+          </tr>
+        </thead>
+      </table>
+      <button>{buttonText}</button>
+    </div>
+  );
+};
+```
+
+### getTranslatedText 함수
+
+```typescript
+// 첫 번째 인자: langKey (다국어 키)
+// 두 번째 인자: fallback (키가 없거나 번역이 없을 때 기본값)
+const text = getTranslatedText(
+  "screen.company_1.Sales.OrderList.품목명",
+  "품목명"
+);
+```
+
+### 주의사항
+
+- `langKey`가 없으면 원본 텍스트를 표시합니다.
+- `useScreenMultiLang`은 반드시 `ScreenMultiLangProvider` 내부에서 사용해야 합니다.
+- 화면 페이지(`/screens/[screenId]/page.tsx`)에서 이미 Provider로 감싸져 있습니다.
+
+---
+
+## 5. ScreenMultiLangContext에 키 수집 로직 추가
+
+### 파일 위치
+
+`frontend/contexts/ScreenMultiLangContext.tsx`
+
+### `collectLangKeys` 함수에 추가
+
+번역을 미리 로드하기 위해 컴포넌트에서 사용하는 모든 `langKey`를 수집해야 합니다.
+
+```typescript
+const collectLangKeys = (comps: ComponentData[]): Set<string> => {
+  const keys = new Set<string>();
+
+  const processComponent = (comp: ComponentData) => {
+    const config = comp.componentConfig;
+
+    // 새 컴포넌트의 langKey 수집
+    if (comp.componentType === "my-new-component") {
+      // 제목
+      if (config?.titleLangKey) {
+        keys.add(config.titleLangKey);
+      }
+
+      // 컬럼
+      if (config?.columns && Array.isArray(config.columns)) {
+        config.columns.forEach((col: any) => {
+          if (col.langKey) {
+            keys.add(col.langKey);
+          }
+        });
+      }
+
+      // 버튼
+      if (config?.langKey) {
+        keys.add(config.langKey);
+      }
+    }
+
+    // 자식 컴포넌트 재귀 처리
+    if (comp.children && Array.isArray(comp.children)) {
+      comp.children.forEach(processComponent);
+    }
+  };
+
+  comps.forEach(processComponent);
+  return keys;
+};
+```
+
+---
+
+## 6. MultilangSettingsModal에 표시 로직 추가
+
+### 파일 위치
+
+`frontend/components/screen/modals/MultilangSettingsModal.tsx`
+
+### `extractLabelsFromComponents` 함수에 추가
+
+다국어 설정 모달에서 새 컴포넌트의 라벨이 표시되도록 합니다.
+
+```typescript
+// 새 컴포넌트 라벨 추출
+if (comp.componentType === "my-new-component") {
+  const config = comp.componentConfig as MyComponentConfig;
+
+  // 제목
+  if (config?.title) {
+    addLabel({
+      id: `${comp.id}_title`,
+      componentId: `${comp.id}_title`,
+      label: config.title,
+      type: "title",
+      parentType: "my-new-component",
+      parentLabel: config.title,
+      langKeyId: config.titleLangKeyId,
+      langKey: config.titleLangKey,
+    });
+  }
+
+  // 컬럼
+  if (config?.columns) {
+    config.columns.forEach((col, index) => {
+      // columnLabelMap에서 라벨 가져오기 (테이블 컬럼인 경우)
+      const tableName = config.tableName;
+      const displayLabel =
+        tableName && columnLabelMap[tableName]?.[col.name]
+          ? columnLabelMap[tableName][col.name]
+          : col.label || col.name;
+
+      addLabel({
+        id: `${comp.id}_col_${index}`,
+        componentId: `${comp.id}_col_${index}`,
+        label: displayLabel,
+        type: "column",
+        parentType: "my-new-component",
+        parentLabel: config.title || "새 컴포넌트",
+        langKeyId: col.langKeyId,
+        langKey: col.langKey,
+      });
+    });
+  }
+}
+```
+
+---
+
+## 7. 테이블명 추출 (테이블 사용 컴포넌트인 경우)
+
+### 파일 위치
+
+`frontend/lib/utils/multilangLabelExtractor.ts`
+
+### `extractTableNames` 함수에 추가
+
+컴포넌트가 테이블을 사용하는 경우, 테이블명을 추출해야 컬럼 라벨을 가져올 수 있습니다.
+
+```typescript
+const extractTableNames = (comps: ComponentData[]): Set<string> => {
+  const tableNames = new Set<string>();
+
+  const processComponent = (comp: ComponentData) => {
+    const config = comp.componentConfig;
+
+    // 새 컴포넌트의 테이블명 추출
+    if (comp.componentType === "my-new-component") {
+      if (config?.tableName) {
+        tableNames.add(config.tableName);
+      }
+      if (config?.selectedTable) {
+        tableNames.add(config.selectedTable);
+      }
+    }
+
+    // 자식 컴포넌트 재귀 처리
+    if (comp.children && Array.isArray(comp.children)) {
+      comp.children.forEach(processComponent);
+    }
+  };
+
+  comps.forEach(processComponent);
+  return tableNames;
+};
+```
+
+---
+
+## 8. 체크리스트
+
+새 컴포넌트 개발 시 다음 항목을 확인하세요:
+
+### 타입 정의
+
+- [ ] 모든 텍스트 속성에 `langKeyId`, `langKey` 필드 추가
+- [ ] 배열 속성(columns, tabs 등)의 각 항목에도 다국어 필드 추가
+
+### 라벨 추출 (multilangLabelExtractor.ts)
+
+- [ ] `extractMultilangLabels` 함수에 라벨 추출 로직 추가
+- [ ] `extractTableNames` 함수에 테이블명 추출 로직 추가 (해당되는 경우)
+
+### 매핑 적용 (multilangLabelExtractor.ts)
+
+- [ ] `applyMultilangMappings` 함수에 매핑 적용 로직 추가
+
+### 번역 표시 (컴포넌트 파일)
+
+- [ ] `useScreenMultiLang` 훅 사용
+- [ ] `getTranslatedText`로 텍스트 번역 적용
+
+### 키 수집 (ScreenMultiLangContext.tsx)
+
+- [ ] `collectLangKeys` 함수에 langKey 수집 로직 추가
+
+### 설정 모달 (MultilangSettingsModal.tsx)
+
+- [ ] `extractLabelsFromComponents`에 라벨 표시 로직 추가
+
+---
+
+## 9. 관련 파일 목록
+
+| 파일                                                           | 역할                    |
+| -------------------------------------------------------------- | ----------------------- |
+| `frontend/lib/utils/multilangLabelExtractor.ts`                | 라벨 추출 및 매핑 적용  |
+| `frontend/contexts/ScreenMultiLangContext.tsx`                 | 번역 Context 및 키 수집 |
+| `frontend/components/screen/modals/MultilangSettingsModal.tsx` | 다국어 설정 UI          |
+| `frontend/components/screen/ScreenDesigner.tsx`                | 다국어 생성 버튼 처리   |
+| `backend-node/src/services/multilangService.ts`                | 다국어 키 생성 서비스   |
+
+---
+
+## 10. 주의사항
+
+1. **componentId 형식 일관성**: 라벨 추출과 매핑 적용에서 동일한 ID 형식 사용
+
+   - 제목: `${comp.id}_title`
+   - 컬럼: `${comp.id}_col_${index}`
+   - 버튼: `${comp.id}_button`
+
+2. **중첩 구조 주의**: 분할패널처럼 중첩된 구조는 경로를 명확히 지정
+
+   - `${comp.id}_left_title`, `${comp.id}_right_col_${index}`
+
+3. **기존 값 보존**: 매핑 적용 시 `updated.componentConfig`를 기반으로 업데이트
+
+4. **라벨 타입 구분**: 입력 폼의 `label`과 다른 컴포넌트의 `label`을 구분하여 처리
+
+5. **테스트**: 다국어 생성 → 다국어 설정 → 언어 변경 순서로 테스트
diff --git a/.playwright-mcp/pivotgrid-demo.png b/.playwright-mcp/pivotgrid-demo.png
new file mode 100644
index 00000000..0fad6fa6
Binary files /dev/null and b/.playwright-mcp/pivotgrid-demo.png differ
diff --git a/.playwright-mcp/pivotgrid-table.png b/.playwright-mcp/pivotgrid-table.png
new file mode 100644
index 00000000..79041f47
Binary files /dev/null and b/.playwright-mcp/pivotgrid-table.png differ
diff --git a/.playwright-mcp/pop-page-initial.png b/.playwright-mcp/pop-page-initial.png
new file mode 100644
index 00000000..b14666b3
Binary files /dev/null and b/.playwright-mcp/pop-page-initial.png differ
diff --git a/backend-node/package-lock.json b/backend-node/package-lock.json
index d801ddbb..43b698d2 100644
--- a/backend-node/package-lock.json
+++ b/backend-node/package-lock.json
@@ -42,6 +42,7 @@
       },
       "devDependencies": {
         "@types/bcryptjs": "^2.4.6",
+        "@types/bwip-js": "^3.2.3",
         "@types/compression": "^1.7.5",
         "@types/cors": "^2.8.17",
         "@types/express": "^4.17.21",
@@ -3216,6 +3217,16 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/bwip-js": {
+      "version": "3.2.3",
+      "resolved": "https://registry.npmjs.org/@types/bwip-js/-/bwip-js-3.2.3.tgz",
+      "integrity": "sha512-kgL1GOW7n5FhlC5aXnckaEim0rz1cFM4t9/xUwuNXCIDnWLx8ruQ4JQkG6znq4GQFovNLhQy5JdgbDwJw4D/zg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
     "node_modules/@types/compression": {
       "version": "1.8.1",
       "resolved": "https://registry.npmjs.org/@types/compression/-/compression-1.8.1.tgz",
diff --git a/backend-node/package.json b/backend-node/package.json
index e9ce3729..b1bfa319 100644
--- a/backend-node/package.json
+++ b/backend-node/package.json
@@ -56,6 +56,7 @@
   },
   "devDependencies": {
     "@types/bcryptjs": "^2.4.6",
+    "@types/bwip-js": "^3.2.3",
     "@types/compression": "^1.7.5",
     "@types/cors": "^2.8.17",
     "@types/express": "^4.17.21",
diff --git a/backend-node/src/app.ts b/backend-node/src/app.ts
index 97564672..3e8f63f1 100644
--- a/backend-node/src/app.ts
+++ b/backend-node/src/app.ts
@@ -58,6 +58,7 @@ import riskAlertRoutes from "./routes/riskAlertRoutes"; // 리스크/알림 관
 import todoRoutes from "./routes/todoRoutes"; // To-Do 관리
 import bookingRoutes from "./routes/bookingRoutes"; // 예약 요청 관리
 import mapDataRoutes from "./routes/mapDataRoutes"; // 지도 데이터 관리
+import excelMappingRoutes from "./routes/excelMappingRoutes"; // 엑셀 매핑 템플릿
 import yardLayoutRoutes from "./routes/yardLayoutRoutes"; // 3D 필드
 //import materialRoutes from "./routes/materialRoutes"; // 자재 관리
 import digitalTwinRoutes from "./routes/digitalTwinRoutes"; // 디지털 트윈 (야드 관제)
@@ -222,6 +223,7 @@ app.use("/api/external-rest-api-connections", externalRestApiConnectionRoutes);
 app.use("/api/multi-connection", multiConnectionRoutes);
 app.use("/api/screen-files", screenFileRoutes);
 app.use("/api/batch-configs", batchRoutes);
+app.use("/api/excel-mapping", excelMappingRoutes); // 엑셀 매핑 템플릿
 app.use("/api/batch-management", batchManagementRoutes);
 app.use("/api/batch-execution-logs", batchExecutionLogRoutes);
 // app.use("/api/db-type-categories", dbTypeCategoryRoutes); // 파일이 존재하지 않음
diff --git a/backend-node/src/controllers/adminController.ts b/backend-node/src/controllers/adminController.ts
index 231a7cdc..ce7b9c7f 100644
--- a/backend-node/src/controllers/adminController.ts
+++ b/backend-node/src/controllers/adminController.ts
@@ -553,10 +553,24 @@ export const setUserLocale = async (
 
     const { locale } = req.body;
 
-    if (!locale || !["ko", "en", "ja", "zh"].includes(locale)) {
+    if (!locale) {
       res.status(400).json({
         success: false,
-        message: "유효하지 않은 로케일입니다. (ko, en, ja, zh 중 선택)",
+        message: "로케일이 필요합니다.",
+      });
+      return;
+    }
+
+    // language_master 테이블에서 유효한 언어 코드인지 확인
+    const validLang = await queryOne<{ lang_code: string }>(
+      "SELECT lang_code FROM language_master WHERE lang_code = $1 AND is_active = 'Y'",
+      [locale]
+    );
+
+    if (!validLang) {
+      res.status(400).json({
+        success: false,
+        message: `유효하지 않은 로케일입니다: ${locale}`,
       });
       return;
     }
@@ -1165,6 +1179,33 @@ export async function saveMenu(
 
     logger.info("메뉴 저장 성공", { savedMenu });
 
+    // 다국어 메뉴 카테고리 자동 생성
+    try {
+      const { MultiLangService } = await import("../services/multilangService");
+      const multilangService = new MultiLangService();
+      
+      // 회사명 조회
+      const companyInfo = await queryOne<{ company_name: string }>(
+        `SELECT company_name FROM company_mng WHERE company_code = $1`,
+        [companyCode]
+      );
+      const companyName = companyCode === "*" ? "공통" : (companyInfo?.company_name || companyCode);
+      
+      // 메뉴 경로 조회 및 카테고리 생성
+      const menuPath = await multilangService.getMenuPath(savedMenu.objid.toString());
+      await multilangService.ensureMenuCategory(companyCode, companyName, menuPath);
+      
+      logger.info("메뉴 다국어 카테고리 생성 완료", {
+        menuObjId: savedMenu.objid.toString(),
+        menuPath,
+      });
+    } catch (categoryError) {
+      logger.warn("메뉴 다국어 카테고리 생성 실패 (메뉴 저장은 성공)", {
+        menuObjId: savedMenu.objid.toString(),
+        error: categoryError,
+      });
+    }
+
     const response: ApiResponse<any> = {
       success: true,
       message: "메뉴가 성공적으로 저장되었습니다.",
@@ -2649,6 +2690,24 @@ export const createCompany = async (
         });
       }
 
+      // 다국어 카테고리 자동 생성
+      try {
+        const { MultiLangService } = await import("../services/multilangService");
+        const multilangService = new MultiLangService();
+        await multilangService.ensureCompanyCategory(
+          createdCompany.company_code,
+          createdCompany.company_name
+        );
+        logger.info("회사 다국어 카테고리 생성 완료", {
+          companyCode: createdCompany.company_code,
+        });
+      } catch (categoryError) {
+        logger.warn("회사 다국어 카테고리 생성 실패 (회사 등록은 성공)", {
+          companyCode: createdCompany.company_code,
+          error: categoryError,
+        });
+      }
+
       logger.info("회사 등록 성공", {
         companyCode: createdCompany.company_code,
         companyName: createdCompany.company_name,
@@ -3058,6 +3117,23 @@ export const updateProfile = async (
     }
 
     if (locale !== undefined) {
+      // language_master 테이블에서 유효한 언어 코드인지 확인
+      const validLang = await queryOne<{ lang_code: string }>(
+        "SELECT lang_code FROM language_master WHERE lang_code = $1 AND is_active = 'Y'",
+        [locale]
+      );
+
+      if (!validLang) {
+        res.status(400).json({
+          result: false,
+          error: {
+            code: "INVALID_LOCALE",
+            details: `유효하지 않은 로케일입니다: ${locale}`,
+          },
+        });
+        return;
+      }
+
       updateFields.push(`locale = $${paramIndex}`);
       updateValues.push(locale);
       paramIndex++;
diff --git a/backend-node/src/controllers/codeMergeController.ts b/backend-node/src/controllers/codeMergeController.ts
index 29abfa8e..74d9e893 100644
--- a/backend-node/src/controllers/codeMergeController.ts
+++ b/backend-node/src/controllers/codeMergeController.ts
@@ -282,3 +282,175 @@ export async function previewCodeMerge(
   }
 }
 
+/**
+ * 값 기반 코드 병합 - 모든 테이블의 모든 컬럼에서 해당 값을 찾아 변경
+ * 컬럼명에 상관없이 oldValue를 가진 모든 곳을 newValue로 변경
+ */
+export async function mergeCodeByValue(
+  req: AuthenticatedRequest,
+  res: Response
+): Promise<void> {
+  const { oldValue, newValue } = req.body;
+  const companyCode = req.user?.companyCode;
+
+  try {
+    // 입력값 검증
+    if (!oldValue || !newValue) {
+      res.status(400).json({
+        success: false,
+        message: "필수 필드가 누락되었습니다. (oldValue, newValue)",
+      });
+      return;
+    }
+
+    if (!companyCode) {
+      res.status(401).json({
+        success: false,
+        message: "인증 정보가 없습니다.",
+      });
+      return;
+    }
+
+    // 같은 값으로 병합 시도 방지
+    if (oldValue === newValue) {
+      res.status(400).json({
+        success: false,
+        message: "기존 값과 새 값이 동일합니다.",
+      });
+      return;
+    }
+
+    logger.info("값 기반 코드 병합 시작", {
+      oldValue,
+      newValue,
+      companyCode,
+      userId: req.user?.userId,
+    });
+
+    // PostgreSQL 함수 호출
+    const result = await pool.query(
+      "SELECT * FROM merge_code_by_value($1, $2, $3)",
+      [oldValue, newValue, companyCode]
+    );
+
+    // 결과 처리
+    const affectedData = Array.isArray(result) ? result : ((result as any).rows || []);
+    const totalRows = affectedData.reduce(
+      (sum: number, row: any) => sum + parseInt(row.out_rows_updated || 0),
+      0
+    );
+
+    logger.info("값 기반 코드 병합 완료", {
+      oldValue,
+      newValue,
+      affectedTablesCount: affectedData.length,
+      totalRowsUpdated: totalRows,
+    });
+
+    res.json({
+      success: true,
+      message: `코드 병합 완료: ${oldValue} → ${newValue}`,
+      data: {
+        oldValue,
+        newValue,
+        affectedData: affectedData.map((row: any) => ({
+          tableName: row.out_table_name,
+          columnName: row.out_column_name,
+          rowsUpdated: parseInt(row.out_rows_updated),
+        })),
+        totalRowsUpdated: totalRows,
+      },
+    });
+  } catch (error: any) {
+    logger.error("값 기반 코드 병합 실패:", {
+      error: error.message,
+      stack: error.stack,
+      oldValue,
+      newValue,
+    });
+
+    res.status(500).json({
+      success: false,
+      message: "코드 병합 중 오류가 발생했습니다.",
+      error: {
+        code: "CODE_MERGE_BY_VALUE_ERROR",
+        details: error.message,
+      },
+    });
+  }
+}
+
+/**
+ * 값 기반 코드 병합 미리보기
+ * 컬럼명에 상관없이 해당 값을 가진 모든 테이블/컬럼 조회
+ */
+export async function previewMergeCodeByValue(
+  req: AuthenticatedRequest,
+  res: Response
+): Promise<void> {
+  const { oldValue } = req.body;
+  const companyCode = req.user?.companyCode;
+
+  try {
+    if (!oldValue) {
+      res.status(400).json({
+        success: false,
+        message: "필수 필드가 누락되었습니다. (oldValue)",
+      });
+      return;
+    }
+
+    if (!companyCode) {
+      res.status(401).json({
+        success: false,
+        message: "인증 정보가 없습니다.",
+      });
+      return;
+    }
+
+    logger.info("값 기반 코드 병합 미리보기", { oldValue, companyCode });
+
+    // PostgreSQL 함수 호출
+    const result = await pool.query(
+      "SELECT * FROM preview_merge_code_by_value($1, $2)",
+      [oldValue, companyCode]
+    );
+
+    const preview = Array.isArray(result) ? result : ((result as any).rows || []);
+    const totalRows = preview.reduce(
+      (sum: number, row: any) => sum + parseInt(row.out_affected_rows || 0),
+      0
+    );
+
+    logger.info("값 기반 코드 병합 미리보기 완료", {
+      tablesCount: preview.length,
+      totalRows,
+    });
+
+    res.json({
+      success: true,
+      message: "코드 병합 미리보기 완료",
+      data: {
+        oldValue,
+        preview: preview.map((row: any) => ({
+          tableName: row.out_table_name,
+          columnName: row.out_column_name,
+          affectedRows: parseInt(row.out_affected_rows),
+        })),
+        totalAffectedRows: totalRows,
+      },
+    });
+  } catch (error: any) {
+    logger.error("값 기반 코드 병합 미리보기 실패:", error);
+
+    res.status(500).json({
+      success: false,
+      message: "코드 병합 미리보기 중 오류가 발생했습니다.",
+      error: {
+        code: "PREVIEW_BY_VALUE_ERROR",
+        details: error.message,
+      },
+    });
+  }
+}
+
diff --git a/backend-node/src/controllers/dynamicFormController.ts b/backend-node/src/controllers/dynamicFormController.ts
index 98606f51..48b55d18 100644
--- a/backend-node/src/controllers/dynamicFormController.ts
+++ b/backend-node/src/controllers/dynamicFormController.ts
@@ -231,7 +231,7 @@ export const deleteFormData = async (
   try {
     const { id } = req.params;
     const { companyCode, userId } = req.user as any;
-    const { tableName } = req.body;
+    const { tableName, screenId } = req.body;
 
     if (!tableName) {
       return res.status(400).json({
@@ -240,7 +240,16 @@ export const deleteFormData = async (
       });
     }
 
-    await dynamicFormService.deleteFormData(id, tableName, companyCode, userId); // userId 추가
+    // screenId를 숫자로 변환 (문자열로 전달될 수 있음)
+    const parsedScreenId = screenId ? parseInt(screenId, 10) : undefined;
+
+    await dynamicFormService.deleteFormData(
+      id,
+      tableName,
+      companyCode,
+      userId,
+      parsedScreenId // screenId 추가 (제어관리 실행용)
+    );
 
     res.json({
       success: true,
diff --git a/backend-node/src/controllers/entityJoinController.ts b/backend-node/src/controllers/entityJoinController.ts
index 4a541456..ab9bbc46 100644
--- a/backend-node/src/controllers/entityJoinController.ts
+++ b/backend-node/src/controllers/entityJoinController.ts
@@ -30,6 +30,7 @@ export class EntityJoinController {
         autoFilter, // 🔒 멀티테넌시 자동 필터
         dataFilter, // 🆕 데이터 필터 (JSON 문자열)
         excludeFilter, // 🆕 제외 필터 (JSON 문자열) - 다른 테이블에 이미 존재하는 데이터 제외
+        deduplication, // 🆕 중복 제거 설정 (JSON 문자열)
         userLang, // userLang은 별도로 분리하여 search에 포함되지 않도록 함
         ...otherParams
       } = req.query;
@@ -49,6 +50,9 @@ export class EntityJoinController {
           // search가 문자열인 경우 JSON 파싱
           searchConditions =
             typeof search === "string" ? JSON.parse(search) : search;
+          
+          // 🔍 디버그: 파싱된 검색 조건 로깅
+          logger.info(`🔍 파싱된 검색 조건:`, JSON.stringify(searchConditions, null, 2));
         } catch (error) {
           logger.warn("검색 조건 파싱 오류:", error);
           searchConditions = {};
@@ -151,6 +155,24 @@ export class EntityJoinController {
         }
       }
 
+      // 🆕 중복 제거 설정 처리
+      let parsedDeduplication: {
+        enabled: boolean;
+        groupByColumn: string;
+        keepStrategy: "latest" | "earliest" | "base_price" | "current_date";
+        sortColumn?: string;
+      } | undefined = undefined;
+      if (deduplication) {
+        try {
+          parsedDeduplication =
+            typeof deduplication === "string" ? JSON.parse(deduplication) : deduplication;
+          logger.info("중복 제거 설정 파싱 완료:", parsedDeduplication);
+        } catch (error) {
+          logger.warn("중복 제거 설정 파싱 오류:", error);
+          parsedDeduplication = undefined;
+        }
+      }
+
       const result = await tableManagementService.getTableDataWithEntityJoins(
         tableName,
         {
@@ -168,13 +190,26 @@ export class EntityJoinController {
           screenEntityConfigs: parsedScreenEntityConfigs,
           dataFilter: parsedDataFilter, // 🆕 데이터 필터 전달
           excludeFilter: parsedExcludeFilter, // 🆕 제외 필터 전달
+          deduplication: parsedDeduplication, // 🆕 중복 제거 설정 전달
         }
       );
 
+      // 🆕 중복 제거 처리 (결과 데이터에 적용)
+      let finalData = result;
+      if (parsedDeduplication?.enabled && parsedDeduplication.groupByColumn && Array.isArray(result.data)) {
+        logger.info(`🔄 중복 제거 시작: 기준 컬럼 = ${parsedDeduplication.groupByColumn}, 전략 = ${parsedDeduplication.keepStrategy}`);
+        const originalCount = result.data.length;
+        finalData = {
+          ...result,
+          data: this.deduplicateData(result.data, parsedDeduplication),
+        };
+        logger.info(`✅ 중복 제거 완료: ${originalCount}개 → ${finalData.data.length}개`);
+      }
+
       res.status(200).json({
         success: true,
         message: "Entity 조인 데이터 조회 성공",
-        data: result,
+        data: finalData,
       });
     } catch (error) {
       logger.error("Entity 조인 데이터 조회 실패", error);
@@ -549,6 +584,98 @@ export class EntityJoinController {
       });
     }
   }
+
+  /**
+   * 중복 데이터 제거 (메모리 내 처리)
+   */
+  private deduplicateData(
+    data: any[],
+    config: {
+      groupByColumn: string;
+      keepStrategy: "latest" | "earliest" | "base_price" | "current_date";
+      sortColumn?: string;
+    }
+  ): any[] {
+    if (!data || data.length === 0) return data;
+
+    // 그룹별로 데이터 분류
+    const groups: Record<string, any[]> = {};
+
+    for (const row of data) {
+      const groupKey = row[config.groupByColumn];
+      if (groupKey === undefined || groupKey === null) continue;
+
+      if (!groups[groupKey]) {
+        groups[groupKey] = [];
+      }
+      groups[groupKey].push(row);
+    }
+
+    // 각 그룹에서 하나의 행만 선택
+    const result: any[] = [];
+
+    for (const [groupKey, rows] of Object.entries(groups)) {
+      if (rows.length === 0) continue;
+
+      let selectedRow: any;
+
+      switch (config.keepStrategy) {
+        case "latest":
+          // 정렬 컬럼 기준 최신 (가장 큰 값)
+          if (config.sortColumn) {
+            rows.sort((a, b) => {
+              const aVal = a[config.sortColumn!];
+              const bVal = b[config.sortColumn!];
+              if (aVal === bVal) return 0;
+              if (aVal > bVal) return -1;
+              return 1;
+            });
+          }
+          selectedRow = rows[0];
+          break;
+
+        case "earliest":
+          // 정렬 컬럼 기준 최초 (가장 작은 값)
+          if (config.sortColumn) {
+            rows.sort((a, b) => {
+              const aVal = a[config.sortColumn!];
+              const bVal = b[config.sortColumn!];
+              if (aVal === bVal) return 0;
+              if (aVal < bVal) return -1;
+              return 1;
+            });
+          }
+          selectedRow = rows[0];
+          break;
+
+        case "base_price":
+          // base_price가 true인 행 선택
+          selectedRow = rows.find((r) => r.base_price === true || r.base_price === "true") || rows[0];
+          break;
+
+        case "current_date":
+          // 오늘 날짜 기준 유효 기간 내 행 선택
+          const today = new Date().toISOString().split("T")[0];
+          selectedRow = rows.find((r) => {
+            const startDate = r.start_date;
+            const endDate = r.end_date;
+            if (!startDate) return true;
+            if (startDate <= today && (!endDate || endDate >= today)) return true;
+            return false;
+          }) || rows[0];
+          break;
+
+        default:
+          selectedRow = rows[0];
+      }
+
+      if (selectedRow) {
+        result.push(selectedRow);
+      }
+    }
+
+    return result;
+  }
 }
 
 export const entityJoinController = new EntityJoinController();
diff --git a/backend-node/src/controllers/entitySearchController.ts b/backend-node/src/controllers/entitySearchController.ts
index 4d911c57..5f198c3f 100644
--- a/backend-node/src/controllers/entitySearchController.ts
+++ b/backend-node/src/controllers/entitySearchController.ts
@@ -107,14 +107,88 @@ export async function searchEntity(req: AuthenticatedRequest, res: Response) {
     }
 
     // 추가 필터 조건 (존재하는 컬럼만)
+    // 지원 연산자: =, !=, >, <, >=, <=, in, notIn, like
+    // 특수 키 형식: column__operator (예: division__in, name__like)
     const additionalFilter = JSON.parse(filterCondition as string);
     for (const [key, value] of Object.entries(additionalFilter)) {
-      if (existingColumns.has(key)) {
-        whereConditions.push(`${key} = $${paramIndex}`);
-        params.push(value);
-        paramIndex++;
-      } else {
-        logger.warn("엔티티 검색: 필터 조건에 존재하지 않는 컬럼 제외", { tableName, key });
+      // 특수 키 형식 파싱: column__operator
+      let columnName = key;
+      let operator = "=";
+      
+      if (key.includes("__")) {
+        const parts = key.split("__");
+        columnName = parts[0];
+        operator = parts[1] || "=";
+      }
+      
+      if (!existingColumns.has(columnName)) {
+        logger.warn("엔티티 검색: 필터 조건에 존재하지 않는 컬럼 제외", { tableName, key, columnName });
+        continue;
+      }
+      
+      // 연산자별 WHERE 조건 생성
+      switch (operator) {
+        case "=":
+          whereConditions.push(`"${columnName}" = $${paramIndex}`);
+          params.push(value);
+          paramIndex++;
+          break;
+        case "!=":
+          whereConditions.push(`"${columnName}" != $${paramIndex}`);
+          params.push(value);
+          paramIndex++;
+          break;
+        case ">":
+          whereConditions.push(`"${columnName}" > $${paramIndex}`);
+          params.push(value);
+          paramIndex++;
+          break;
+        case "<":
+          whereConditions.push(`"${columnName}" < $${paramIndex}`);
+          params.push(value);
+          paramIndex++;
+          break;
+        case ">=":
+          whereConditions.push(`"${columnName}" >= $${paramIndex}`);
+          params.push(value);
+          paramIndex++;
+          break;
+        case "<=":
+          whereConditions.push(`"${columnName}" <= $${paramIndex}`);
+          params.push(value);
+          paramIndex++;
+          break;
+        case "in":
+          // IN 연산자: 값이 배열이거나 쉼표로 구분된 문자열
+          const inValues = Array.isArray(value) ? value : String(value).split(",").map(v => v.trim());
+          if (inValues.length > 0) {
+            const placeholders = inValues.map((_, i) => `$${paramIndex + i}`).join(", ");
+            whereConditions.push(`"${columnName}" IN (${placeholders})`);
+            params.push(...inValues);
+            paramIndex += inValues.length;
+          }
+          break;
+        case "notIn":
+          // NOT IN 연산자
+          const notInValues = Array.isArray(value) ? value : String(value).split(",").map(v => v.trim());
+          if (notInValues.length > 0) {
+            const placeholders = notInValues.map((_, i) => `$${paramIndex + i}`).join(", ");
+            whereConditions.push(`"${columnName}" NOT IN (${placeholders})`);
+            params.push(...notInValues);
+            paramIndex += notInValues.length;
+          }
+          break;
+        case "like":
+          whereConditions.push(`"${columnName}"::text ILIKE $${paramIndex}`);
+          params.push(`%${value}%`);
+          paramIndex++;
+          break;
+        default:
+          // 알 수 없는 연산자는 등호로 처리
+          whereConditions.push(`"${columnName}" = $${paramIndex}`);
+          params.push(value);
+          paramIndex++;
+          break;
       }
     }
 
diff --git a/backend-node/src/controllers/excelMappingController.ts b/backend-node/src/controllers/excelMappingController.ts
new file mode 100644
index 00000000..e29d4fe2
--- /dev/null
+++ b/backend-node/src/controllers/excelMappingController.ts
@@ -0,0 +1,208 @@
+import { Response } from "express";
+import { AuthenticatedRequest } from "../middleware/authMiddleware";
+import excelMappingService from "../services/excelMappingService";
+import { logger } from "../utils/logger";
+
+/**
+ * 엑셀 컬럼 구조로 매핑 템플릿 조회
+ * POST /api/excel-mapping/find
+ */
+export async function findMappingByColumns(
+  req: AuthenticatedRequest,
+  res: Response
+): Promise<void> {
+  try {
+    const { tableName, excelColumns } = req.body;
+    const companyCode = req.user?.companyCode || "*";
+
+    if (!tableName || !excelColumns || !Array.isArray(excelColumns)) {
+      res.status(400).json({
+        success: false,
+        message: "tableName과 excelColumns(배열)가 필요합니다.",
+      });
+      return;
+    }
+
+    logger.info("엑셀 매핑 템플릿 조회 요청", {
+      tableName,
+      excelColumns,
+      companyCode,
+      userId: req.user?.userId,
+    });
+
+    const template = await excelMappingService.findMappingByColumns(
+      tableName,
+      excelColumns,
+      companyCode
+    );
+
+    if (template) {
+      res.json({
+        success: true,
+        data: template,
+        message: "기존 매핑 템플릿을 찾았습니다.",
+      });
+    } else {
+      res.json({
+        success: true,
+        data: null,
+        message: "일치하는 매핑 템플릿이 없습니다.",
+      });
+    }
+  } catch (error: any) {
+    logger.error("매핑 템플릿 조회 실패", { error: error.message });
+    res.status(500).json({
+      success: false,
+      message: "매핑 템플릿 조회 중 오류가 발생했습니다.",
+      error: error.message,
+    });
+  }
+}
+
+/**
+ * 매핑 템플릿 저장 (UPSERT)
+ * POST /api/excel-mapping/save
+ */
+export async function saveMappingTemplate(
+  req: AuthenticatedRequest,
+  res: Response
+): Promise<void> {
+  try {
+    const { tableName, excelColumns, columnMappings } = req.body;
+    const companyCode = req.user?.companyCode || "*";
+    const userId = req.user?.userId;
+
+    if (!tableName || !excelColumns || !columnMappings) {
+      res.status(400).json({
+        success: false,
+        message: "tableName, excelColumns, columnMappings가 필요합니다.",
+      });
+      return;
+    }
+
+    logger.info("엑셀 매핑 템플릿 저장 요청", {
+      tableName,
+      excelColumns,
+      columnMappings,
+      companyCode,
+      userId,
+    });
+
+    const template = await excelMappingService.saveMappingTemplate(
+      tableName,
+      excelColumns,
+      columnMappings,
+      companyCode,
+      userId
+    );
+
+    res.json({
+      success: true,
+      data: template,
+      message: "매핑 템플릿이 저장되었습니다.",
+    });
+  } catch (error: any) {
+    logger.error("매핑 템플릿 저장 실패", { error: error.message });
+    res.status(500).json({
+      success: false,
+      message: "매핑 템플릿 저장 중 오류가 발생했습니다.",
+      error: error.message,
+    });
+  }
+}
+
+/**
+ * 테이블의 매핑 템플릿 목록 조회
+ * GET /api/excel-mapping/list/:tableName
+ */
+export async function getMappingTemplates(
+  req: AuthenticatedRequest,
+  res: Response
+): Promise<void> {
+  try {
+    const { tableName } = req.params;
+    const companyCode = req.user?.companyCode || "*";
+
+    if (!tableName) {
+      res.status(400).json({
+        success: false,
+        message: "tableName이 필요합니다.",
+      });
+      return;
+    }
+
+    logger.info("매핑 템플릿 목록 조회 요청", {
+      tableName,
+      companyCode,
+    });
+
+    const templates = await excelMappingService.getMappingTemplates(
+      tableName,
+      companyCode
+    );
+
+    res.json({
+      success: true,
+      data: templates,
+    });
+  } catch (error: any) {
+    logger.error("매핑 템플릿 목록 조회 실패", { error: error.message });
+    res.status(500).json({
+      success: false,
+      message: "매핑 템플릿 목록 조회 중 오류가 발생했습니다.",
+      error: error.message,
+    });
+  }
+}
+
+/**
+ * 매핑 템플릿 삭제
+ * DELETE /api/excel-mapping/:id
+ */
+export async function deleteMappingTemplate(
+  req: AuthenticatedRequest,
+  res: Response
+): Promise<void> {
+  try {
+    const { id } = req.params;
+    const companyCode = req.user?.companyCode || "*";
+
+    if (!id) {
+      res.status(400).json({
+        success: false,
+        message: "id가 필요합니다.",
+      });
+      return;
+    }
+
+    logger.info("매핑 템플릿 삭제 요청", {
+      id,
+      companyCode,
+    });
+
+    const deleted = await excelMappingService.deleteMappingTemplate(
+      parseInt(id),
+      companyCode
+    );
+
+    if (deleted) {
+      res.json({
+        success: true,
+        message: "매핑 템플릿이 삭제되었습니다.",
+      });
+    } else {
+      res.status(404).json({
+        success: false,
+        message: "삭제할 매핑 템플릿을 찾을 수 없습니다.",
+      });
+    }
+  } catch (error: any) {
+    logger.error("매핑 템플릿 삭제 실패", { error: error.message });
+    res.status(500).json({
+      success: false,
+      message: "매핑 템플릿 삭제 중 오류가 발생했습니다.",
+      error: error.message,
+    });
+  }
+}
+
diff --git a/backend-node/src/controllers/multilangController.ts b/backend-node/src/controllers/multilangController.ts
index 14155f86..f14fc3b5 100644
--- a/backend-node/src/controllers/multilangController.ts
+++ b/backend-node/src/controllers/multilangController.ts
@@ -10,7 +10,10 @@ import {
   SaveLangTextsRequest,
   GetUserTextParams,
   BatchTranslationRequest,
+  GenerateKeyRequest,
+  CreateOverrideKeyRequest,
   ApiResponse,
+  LangCategory,
 } from "../types/multilang";
 
 /**
@@ -187,7 +190,7 @@ export const getLangKeys = async (
   res: Response
 ): Promise<void> => {
   try {
-    const { companyCode, menuCode, keyType, searchText } = req.query;
+    const { companyCode, menuCode, keyType, searchText, categoryId } = req.query;
     logger.info("다국어 키 목록 조회 요청", {
       query: req.query,
       user: req.user,
@@ -199,6 +202,7 @@ export const getLangKeys = async (
       menuCode: menuCode as string,
       keyType: keyType as string,
       searchText: searchText as string,
+      categoryId: categoryId ? parseInt(categoryId as string, 10) : undefined,
     });
 
     const response: ApiResponse<any[]> = {
@@ -630,6 +634,391 @@ export const deleteLanguage = async (
   }
 };
 
+// =====================================================
+// 카테고리 관련 API
+// =====================================================
+
+/**
+ * GET /api/multilang/categories
+ * 카테고리 목록 조회 API (트리 구조)
+ */
+export const getCategories = async (
+  req: AuthenticatedRequest,
+  res: Response
+): Promise<void> => {
+  try {
+    logger.info("카테고리 목록 조회 요청", { user: req.user });
+
+    const multiLangService = new MultiLangService();
+    const categories = await multiLangService.getCategories();
+
+    const response: ApiResponse<LangCategory[]> = {
+      success: true,
+      message: "카테고리 목록 조회 성공",
+      data: categories,
+    };
+
+    res.status(200).json(response);
+  } catch (error) {
+    logger.error("카테고리 목록 조회 실패:", error);
+    res.status(500).json({
+      success: false,
+      message: "카테고리 목록 조회 중 오류가 발생했습니다.",
+      error: {
+        code: "CATEGORY_LIST_ERROR",
+        details: error instanceof Error ? error.message : "Unknown error",
+      },
+    });
+  }
+};
+
+/**
+ * GET /api/multilang/categories/:categoryId
+ * 카테고리 상세 조회 API
+ */
+export const getCategoryById = async (
+  req: AuthenticatedRequest,
+  res: Response
+): Promise<void> => {
+  try {
+    const { categoryId } = req.params;
+    logger.info("카테고리 상세 조회 요청", { categoryId, user: req.user });
+
+    const multiLangService = new MultiLangService();
+    const category = await multiLangService.getCategoryById(parseInt(categoryId));
+
+    if (!category) {
+      res.status(404).json({
+        success: false,
+        message: "카테고리를 찾을 수 없습니다.",
+        error: {
+          code: "CATEGORY_NOT_FOUND",
+          details: `Category ID ${categoryId} not found`,
+        },
+      });
+      return;
+    }
+
+    const response: ApiResponse<LangCategory> = {
+      success: true,
+      message: "카테고리 상세 조회 성공",
+      data: category,
+    };
+
+    res.status(200).json(response);
+  } catch (error) {
+    logger.error("카테고리 상세 조회 실패:", error);
+    res.status(500).json({
+      success: false,
+      message: "카테고리 상세 조회 중 오류가 발생했습니다.",
+      error: {
+        code: "CATEGORY_DETAIL_ERROR",
+        details: error instanceof Error ? error.message : "Unknown error",
+      },
+    });
+  }
+};
+
+/**
+ * GET /api/multilang/categories/:categoryId/path
+ * 카테고리 경로 조회 API (부모 포함)
+ */
+export const getCategoryPath = async (
+  req: AuthenticatedRequest,
+  res: Response
+): Promise<void> => {
+  try {
+    const { categoryId } = req.params;
+    logger.info("카테고리 경로 조회 요청", { categoryId, user: req.user });
+
+    const multiLangService = new MultiLangService();
+    const path = await multiLangService.getCategoryPath(parseInt(categoryId));
+
+    const response: ApiResponse<LangCategory[]> = {
+      success: true,
+      message: "카테고리 경로 조회 성공",
+      data: path,
+    };
+
+    res.status(200).json(response);
+  } catch (error) {
+    logger.error("카테고리 경로 조회 실패:", error);
+    res.status(500).json({
+      success: false,
+      message: "카테고리 경로 조회 중 오류가 발생했습니다.",
+      error: {
+        code: "CATEGORY_PATH_ERROR",
+        details: error instanceof Error ? error.message : "Unknown error",
+      },
+    });
+  }
+};
+
+// =====================================================
+// 자동 생성 및 오버라이드 관련 API
+// =====================================================
+
+/**
+ * POST /api/multilang/keys/generate
+ * 키 자동 생성 API
+ */
+export const generateKey = async (
+  req: AuthenticatedRequest,
+  res: Response
+): Promise<void> => {
+  try {
+    const generateData: GenerateKeyRequest = req.body;
+    logger.info("키 자동 생성 요청", { generateData, user: req.user });
+
+    // 필수 입력값 검증
+    if (!generateData.companyCode || !generateData.categoryId || !generateData.keyMeaning) {
+      res.status(400).json({
+        success: false,
+        message: "회사 코드, 카테고리 ID, 키 의미는 필수입니다.",
+        error: {
+          code: "MISSING_REQUIRED_FIELDS",
+          details: "companyCode, categoryId, and keyMeaning are required",
+        },
+      });
+      return;
+    }
+
+    // 권한 검사: 공통 키(*)는 최고 관리자만 생성 가능
+    if (generateData.companyCode === "*" && req.user?.companyCode !== "*") {
+      res.status(403).json({
+        success: false,
+        message: "공통 키는 최고 관리자만 생성할 수 있습니다.",
+        error: {
+          code: "PERMISSION_DENIED",
+          details: "Only super admin can create common keys",
+        },
+      });
+      return;
+    }
+
+    // 회사 관리자는 자기 회사 키만 생성 가능
+    if (generateData.companyCode !== "*" && 
+        req.user?.companyCode !== "*" && 
+        generateData.companyCode !== req.user?.companyCode) {
+      res.status(403).json({
+        success: false,
+        message: "다른 회사의 키를 생성할 권한이 없습니다.",
+        error: {
+          code: "PERMISSION_DENIED",
+          details: "Cannot create keys for other companies",
+        },
+      });
+      return;
+    }
+
+    const multiLangService = new MultiLangService();
+    const keyId = await multiLangService.generateKey({
+      ...generateData,
+      createdBy: req.user?.userId || "system",
+    });
+
+    const response: ApiResponse<number> = {
+      success: true,
+      message: "키가 성공적으로 생성되었습니다.",
+      data: keyId,
+    };
+
+    res.status(201).json(response);
+  } catch (error) {
+    logger.error("키 자동 생성 실패:", error);
+    res.status(500).json({
+      success: false,
+      message: "키 자동 생성 중 오류가 발생했습니다.",
+      error: {
+        code: "KEY_GENERATE_ERROR",
+        details: error instanceof Error ? error.message : "Unknown error",
+      },
+    });
+  }
+};
+
+/**
+ * POST /api/multilang/keys/preview
+ * 키 미리보기 API
+ */
+export const previewKey = async (
+  req: AuthenticatedRequest,
+  res: Response
+): Promise<void> => {
+  try {
+    const { categoryId, keyMeaning, companyCode } = req.body;
+    logger.info("키 미리보기 요청", { categoryId, keyMeaning, companyCode, user: req.user });
+
+    if (!categoryId || !keyMeaning || !companyCode) {
+      res.status(400).json({
+        success: false,
+        message: "카테고리 ID, 키 의미, 회사 코드는 필수입니다.",
+        error: {
+          code: "MISSING_REQUIRED_FIELDS",
+          details: "categoryId, keyMeaning, and companyCode are required",
+        },
+      });
+      return;
+    }
+
+    const multiLangService = new MultiLangService();
+    const preview = await multiLangService.previewGeneratedKey(
+      parseInt(categoryId),
+      keyMeaning,
+      companyCode
+    );
+
+    const response: ApiResponse<{
+      langKey: string;
+      exists: boolean;
+      isOverride: boolean;
+      baseKeyId?: number;
+    }> = {
+      success: true,
+      message: "키 미리보기 성공",
+      data: preview,
+    };
+
+    res.status(200).json(response);
+  } catch (error) {
+    logger.error("키 미리보기 실패:", error);
+    res.status(500).json({
+      success: false,
+      message: "키 미리보기 중 오류가 발생했습니다.",
+      error: {
+        code: "KEY_PREVIEW_ERROR",
+        details: error instanceof Error ? error.message : "Unknown error",
+      },
+    });
+  }
+};
+
+/**
+ * POST /api/multilang/keys/override
+ * 오버라이드 키 생성 API
+ */
+export const createOverrideKey = async (
+  req: AuthenticatedRequest,
+  res: Response
+): Promise<void> => {
+  try {
+    const overrideData: CreateOverrideKeyRequest = req.body;
+    logger.info("오버라이드 키 생성 요청", { overrideData, user: req.user });
+
+    // 필수 입력값 검증
+    if (!overrideData.companyCode || !overrideData.baseKeyId) {
+      res.status(400).json({
+        success: false,
+        message: "회사 코드와 원본 키 ID는 필수입니다.",
+        error: {
+          code: "MISSING_REQUIRED_FIELDS",
+          details: "companyCode and baseKeyId are required",
+        },
+      });
+      return;
+    }
+
+    // 최고 관리자(*)는 오버라이드 키를 만들 수 없음 (이미 공통 키)
+    if (overrideData.companyCode === "*") {
+      res.status(400).json({
+        success: false,
+        message: "공통 키에 대한 오버라이드는 생성할 수 없습니다.",
+        error: {
+          code: "INVALID_OVERRIDE",
+          details: "Cannot create override for common keys",
+        },
+      });
+      return;
+    }
+
+    // 회사 관리자는 자기 회사 오버라이드만 생성 가능
+    if (req.user?.companyCode !== "*" && 
+        overrideData.companyCode !== req.user?.companyCode) {
+      res.status(403).json({
+        success: false,
+        message: "다른 회사의 오버라이드 키를 생성할 권한이 없습니다.",
+        error: {
+          code: "PERMISSION_DENIED",
+          details: "Cannot create override keys for other companies",
+        },
+      });
+      return;
+    }
+
+    const multiLangService = new MultiLangService();
+    const keyId = await multiLangService.createOverrideKey({
+      ...overrideData,
+      createdBy: req.user?.userId || "system",
+    });
+
+    const response: ApiResponse<number> = {
+      success: true,
+      message: "오버라이드 키가 성공적으로 생성되었습니다.",
+      data: keyId,
+    };
+
+    res.status(201).json(response);
+  } catch (error) {
+    logger.error("오버라이드 키 생성 실패:", error);
+    res.status(500).json({
+      success: false,
+      message: "오버라이드 키 생성 중 오류가 발생했습니다.",
+      error: {
+        code: "OVERRIDE_KEY_CREATE_ERROR",
+        details: error instanceof Error ? error.message : "Unknown error",
+      },
+    });
+  }
+};
+
+/**
+ * GET /api/multilang/keys/overrides/:companyCode
+ * 회사별 오버라이드 키 목록 조회 API
+ */
+export const getOverrideKeys = async (
+  req: AuthenticatedRequest,
+  res: Response
+): Promise<void> => {
+  try {
+    const { companyCode } = req.params;
+    logger.info("오버라이드 키 목록 조회 요청", { companyCode, user: req.user });
+
+    // 권한 검사: 최고 관리자 또는 해당 회사 관리자만 조회 가능
+    if (req.user?.companyCode !== "*" && companyCode !== req.user?.companyCode) {
+      res.status(403).json({
+        success: false,
+        message: "다른 회사의 오버라이드 키를 조회할 권한이 없습니다.",
+        error: {
+          code: "PERMISSION_DENIED",
+          details: "Cannot view override keys for other companies",
+        },
+      });
+      return;
+    }
+
+    const multiLangService = new MultiLangService();
+    const keys = await multiLangService.getOverrideKeys(companyCode);
+
+    const response: ApiResponse<any[]> = {
+      success: true,
+      message: "오버라이드 키 목록 조회 성공",
+      data: keys,
+    };
+
+    res.status(200).json(response);
+  } catch (error) {
+    logger.error("오버라이드 키 목록 조회 실패:", error);
+    res.status(500).json({
+      success: false,
+      message: "오버라이드 키 목록 조회 중 오류가 발생했습니다.",
+      error: {
+        code: "OVERRIDE_KEYS_LIST_ERROR",
+        details: error instanceof Error ? error.message : "Unknown error",
+      },
+    });
+  }
+};
+
 /**
  * POST /api/multilang/batch
  * 다국어 텍스트 배치 조회 API
@@ -710,3 +1099,86 @@ export const getBatchTranslations = async (
     });
   }
 };
+
+/**
+ * POST /api/multilang/screen-labels
+ * 화면 라벨 다국어 키 자동 생성 API
+ */
+export const generateScreenLabelKeys = async (
+  req: AuthenticatedRequest,
+  res: Response
+): Promise<void> => {
+  try {
+    const { screenId, menuObjId, labels } = req.body;
+
+    logger.info("화면 라벨 다국어 키 생성 요청", {
+      screenId,
+      menuObjId,
+      labelCount: labels?.length,
+      user: req.user,
+    });
+
+    // 필수 파라미터 검증
+    if (!screenId) {
+      res.status(400).json({
+        success: false,
+        message: "screenId는 필수입니다.",
+        error: { code: "MISSING_SCREEN_ID" },
+      });
+      return;
+    }
+
+    if (!labels || !Array.isArray(labels) || labels.length === 0) {
+      res.status(400).json({
+        success: false,
+        message: "labels 배열이 필요합니다.",
+        error: { code: "MISSING_LABELS" },
+      });
+      return;
+    }
+
+    // 화면의 회사 정보 조회 (사용자 회사가 아닌 화면 소속 회사 기준)
+    const { queryOne } = await import("../database/db");
+    const screenInfo = await queryOne<{ company_code: string }>(
+      `SELECT company_code FROM screen_definitions WHERE screen_id = $1`,
+      [screenId]
+    );
+    const companyCode = screenInfo?.company_code || req.user?.companyCode || "*";
+    
+    // 회사명 조회
+    const companyInfo = await queryOne<{ company_name: string }>(
+      `SELECT company_name FROM company_mng WHERE company_code = $1`,
+      [companyCode]
+    );
+    const companyName = companyCode === "*" ? "공통" : (companyInfo?.company_name || companyCode);
+    
+    logger.info("화면 소속 회사 정보", { screenId, companyCode, companyName });
+
+    const multiLangService = new MultiLangService();
+    const results = await multiLangService.generateScreenLabelKeys({
+      screenId: Number(screenId),
+      companyCode,
+      companyName,
+      menuObjId,
+      labels,
+    });
+
+    const response: ApiResponse<typeof results> = {
+      success: true,
+      message: `${results.length}개의 다국어 키가 생성되었습니다.`,
+      data: results,
+    };
+
+    res.status(200).json(response);
+  } catch (error) {
+    logger.error("화면 라벨 다국어 키 생성 실패:", error);
+    res.status(500).json({
+      success: false,
+      message: "화면 라벨 다국어 키 생성 중 오류가 발생했습니다.",
+      error: {
+        code: "SCREEN_LABEL_KEY_GENERATION_ERROR",
+        details: error instanceof Error ? error.message : "Unknown error",
+      },
+    });
+  }
+};
diff --git a/backend-node/src/controllers/numberingRuleController.ts b/backend-node/src/controllers/numberingRuleController.ts
index 031a1506..ab7114a5 100644
--- a/backend-node/src/controllers/numberingRuleController.ts
+++ b/backend-node/src/controllers/numberingRuleController.ts
@@ -217,11 +217,14 @@ router.post("/:ruleId/allocate", authenticateToken, async (req: AuthenticatedReq
   const companyCode = req.user!.companyCode;
   const { ruleId } = req.params;
 
+  logger.info("코드 할당 요청", { ruleId, companyCode });
+
   try {
     const allocatedCode = await numberingRuleService.allocateCode(ruleId, companyCode);
+    logger.info("코드 할당 성공", { ruleId, allocatedCode });
     return res.json({ success: true, data: { generatedCode: allocatedCode } });
   } catch (error: any) {
-    logger.error("코드 할당 실패", { error: error.message });
+    logger.error("코드 할당 실패", { ruleId, companyCode, error: error.message });
     return res.status(500).json({ success: false, error: error.message });
   }
 });
diff --git a/backend-node/src/controllers/screenGroupController.ts b/backend-node/src/controllers/screenGroupController.ts
index 569fe793..2d7bc0e1 100644
--- a/backend-node/src/controllers/screenGroupController.ts
+++ b/backend-node/src/controllers/screenGroupController.ts
@@ -1,18 +1,23 @@
 import { Request, Response } from "express";
 import { getPool } from "../database/db";
 import { logger } from "../utils/logger";
+import { MultiLangService } from "../services/multilangService";
+import { AuthenticatedRequest } from "../types/auth";
 
 // pool 인스턴스 가져오기
 const pool = getPool();
 
+// 다국어 서비스 인스턴스
+const multiLangService = new MultiLangService();
+
 // ============================================================
 // 화면 그룹 (screen_groups) CRUD
 // ============================================================
 
 // 화면 그룹 목록 조회
-export const getScreenGroups = async (req: Request, res: Response) => {
+export const getScreenGroups = async (req: AuthenticatedRequest, res: Response) => {
   try {
-    const companyCode = (req.user as any).companyCode;
+    const companyCode = req.user!.companyCode;
     const { page = 1, size = 20, searchTerm } = req.query;
     const offset = (parseInt(page as string) - 1) * parseInt(size as string);
 
@@ -84,10 +89,10 @@ export const getScreenGroups = async (req: Request, res: Response) => {
 };
 
 // 화면 그룹 상세 조회
-export const getScreenGroup = async (req: Request, res: Response) => {
+export const getScreenGroup = async (req: AuthenticatedRequest, res: Response) => {
   try {
     const { id } = req.params;
-    const companyCode = (req.user as any).companyCode;
+    const companyCode = req.user!.companyCode;
 
     let query = `
       SELECT sg.*,
@@ -130,10 +135,10 @@ export const getScreenGroup = async (req: Request, res: Response) => {
 };
 
 // 화면 그룹 생성
-export const createScreenGroup = async (req: Request, res: Response) => {
+export const createScreenGroup = async (req: AuthenticatedRequest, res: Response) => {
   try {
-    const userCompanyCode = (req.user as any).companyCode;
-    const userId = (req.user as any).userId;
+    const userCompanyCode = req.user!.companyCode;
+    const userId = req.user!.userId;
     const { group_name, group_code, main_table_name, description, icon, display_order, is_active, parent_group_id, target_company_code } = req.body;
 
     if (!group_name || !group_code) {
@@ -191,6 +196,47 @@ export const createScreenGroup = async (req: Request, res: Response) => {
     // 업데이트된 데이터 반환
     const updatedResult = await pool.query(`SELECT * FROM screen_groups WHERE id = $1`, [newGroupId]);
 
+    // 다국어 카테고리 자동 생성 (그룹 경로 기반)
+    try {
+      // 그룹 경로 조회 (상위 그룹 → 현재 그룹)
+      const groupPathResult = await pool.query(
+        `WITH RECURSIVE group_path AS (
+           SELECT id, parent_group_id, group_name, group_level, 1 as depth
+           FROM screen_groups
+           WHERE id = $1
+           UNION ALL
+           SELECT g.id, g.parent_group_id, g.group_name, g.group_level, gp.depth + 1
+           FROM screen_groups g
+           INNER JOIN group_path gp ON g.id = gp.parent_group_id
+           WHERE g.parent_group_id IS NOT NULL
+         )
+         SELECT group_name FROM group_path
+         ORDER BY depth DESC`,
+        [newGroupId]
+      );
+      
+      const groupPath = groupPathResult.rows.map((r: any) => r.group_name);
+      
+      // 회사 이름 조회
+      let companyName = "공통";
+      if (finalCompanyCode !== "*") {
+        const companyResult = await pool.query(
+          `SELECT company_name FROM company_mng WHERE company_code = $1`,
+          [finalCompanyCode]
+        );
+        if (companyResult.rows.length > 0) {
+          companyName = companyResult.rows[0].company_name;
+        }
+      }
+      
+      // 다국어 카테고리 생성
+      await multiLangService.ensureScreenGroupCategory(finalCompanyCode, companyName, groupPath);
+      logger.info("화면 그룹 다국어 카테고리 자동 생성 완료", { groupPath, companyCode: finalCompanyCode });
+    } catch (multilangError: any) {
+      // 다국어 카테고리 생성 실패해도 그룹 생성은 성공으로 처리
+      logger.warn("화면 그룹 다국어 카테고리 생성 실패 (무시하고 계속):", multilangError.message);
+    }
+
     logger.info("화면 그룹 생성", { userCompanyCode, finalCompanyCode, groupId: newGroupId, groupName: group_name, parentGroupId: parent_group_id });
 
     res.json({ success: true, data: updatedResult.rows[0], message: "화면 그룹이 생성되었습니다." });
@@ -204,10 +250,10 @@ export const createScreenGroup = async (req: Request, res: Response) => {
 };
 
 // 화면 그룹 수정
-export const updateScreenGroup = async (req: Request, res: Response) => {
+export const updateScreenGroup = async (req: AuthenticatedRequest, res: Response) => {
   try {
     const { id } = req.params;
-    const userCompanyCode = (req.user as any).companyCode;
+    const userCompanyCode = req.user!.companyCode;
     const { group_name, group_code, main_table_name, description, icon, display_order, is_active, parent_group_id, target_company_code } = req.body;
 
     // 회사 코드 결정: 최고 관리자가 특정 회사를 선택한 경우 해당 회사로, 아니면 현재 그룹의 회사 유지
@@ -293,10 +339,10 @@ export const updateScreenGroup = async (req: Request, res: Response) => {
 };
 
 // 화면 그룹 삭제
-export const deleteScreenGroup = async (req: Request, res: Response) => {
+export const deleteScreenGroup = async (req: AuthenticatedRequest, res: Response) => {
   try {
     const { id } = req.params;
-    const companyCode = (req.user as any).companyCode;
+    const companyCode = req.user!.companyCode;
 
     let query = `DELETE FROM screen_groups WHERE id = $1`;
     const params: any[] = [id];
@@ -329,10 +375,10 @@ export const deleteScreenGroup = async (req: Request, res: Response) => {
 // ============================================================
 
 // 그룹에 화면 추가
-export const addScreenToGroup = async (req: Request, res: Response) => {
+export const addScreenToGroup = async (req: AuthenticatedRequest, res: Response) => {
   try {
-    const companyCode = (req.user as any).companyCode;
-    const userId = (req.user as any).userId;
+    const companyCode = req.user!.companyCode;
+    const userId = req.user!.userId;
     const { group_id, screen_id, screen_role, display_order, is_default } = req.body;
 
     if (!group_id || !screen_id) {
@@ -369,10 +415,10 @@ export const addScreenToGroup = async (req: Request, res: Response) => {
 };
 
 // 그룹에서 화면 제거
-export const removeScreenFromGroup = async (req: Request, res: Response) => {
+export const removeScreenFromGroup = async (req: AuthenticatedRequest, res: Response) => {
   try {
     const { id } = req.params;
-    const companyCode = (req.user as any).companyCode;
+    const companyCode = req.user!.companyCode;
 
     let query = `DELETE FROM screen_group_screens WHERE id = $1`;
     const params: any[] = [id];
@@ -400,10 +446,10 @@ export const removeScreenFromGroup = async (req: Request, res: Response) => {
 };
 
 // 그룹 내 화면 순서/역할 수정
-export const updateScreenInGroup = async (req: Request, res: Response) => {
+export const updateScreenInGroup = async (req: AuthenticatedRequest, res: Response) => {
   try {
     const { id } = req.params;
-    const companyCode = (req.user as any).companyCode;
+    const companyCode = req.user!.companyCode;
     const { screen_role, display_order, is_default } = req.body;
 
     let query = `
@@ -439,9 +485,9 @@ export const updateScreenInGroup = async (req: Request, res: Response) => {
 // ============================================================
 
 // 화면 필드 조인 목록 조회
-export const getFieldJoins = async (req: Request, res: Response) => {
+export const getFieldJoins = async (req: AuthenticatedRequest, res: Response) => {
   try {
-    const companyCode = (req.user as any).companyCode;
+    const companyCode = req.user!.companyCode;
     const { screen_id } = req.query;
 
     let query = `
@@ -480,10 +526,10 @@ export const getFieldJoins = async (req: Request, res: Response) => {
 };
 
 // 화면 필드 조인 생성
-export const createFieldJoin = async (req: Request, res: Response) => {
+export const createFieldJoin = async (req: AuthenticatedRequest, res: Response) => {
   try {
-    const companyCode = (req.user as any).companyCode;
-    const userId = (req.user as any).userId;
+    const companyCode = req.user!.companyCode;
+    const userId = req.user!.userId;
     const { 
       screen_id, layout_id, component_id, field_name,
       save_table, save_column, join_table, join_column, display_column,
@@ -521,10 +567,10 @@ export const createFieldJoin = async (req: Request, res: Response) => {
 };
 
 // 화면 필드 조인 수정
-export const updateFieldJoin = async (req: Request, res: Response) => {
+export const updateFieldJoin = async (req: AuthenticatedRequest, res: Response) => {
   try {
     const { id } = req.params;
-    const companyCode = (req.user as any).companyCode;
+    const companyCode = req.user!.companyCode;
     const { 
       layout_id, component_id, field_name,
       save_table, save_column, join_table, join_column, display_column,
@@ -566,10 +612,10 @@ export const updateFieldJoin = async (req: Request, res: Response) => {
 };
 
 // 화면 필드 조인 삭제
-export const deleteFieldJoin = async (req: Request, res: Response) => {
+export const deleteFieldJoin = async (req: AuthenticatedRequest, res: Response) => {
   try {
     const { id } = req.params;
-    const companyCode = (req.user as any).companyCode;
+    const companyCode = req.user!.companyCode;
 
     let query = `DELETE FROM screen_field_joins WHERE id = $1`;
     const params: any[] = [id];
@@ -600,9 +646,9 @@ export const deleteFieldJoin = async (req: Request, res: Response) => {
 // ============================================================
 
 // 데이터 흐름 목록 조회
-export const getDataFlows = async (req: Request, res: Response) => {
+export const getDataFlows = async (req: AuthenticatedRequest, res: Response) => {
   try {
-    const companyCode = (req.user as any).companyCode;
+    const companyCode = req.user!.companyCode;
     const { group_id, source_screen_id } = req.query;
 
     let query = `
@@ -650,10 +696,10 @@ export const getDataFlows = async (req: Request, res: Response) => {
 };
 
 // 데이터 흐름 생성
-export const createDataFlow = async (req: Request, res: Response) => {
+export const createDataFlow = async (req: AuthenticatedRequest, res: Response) => {
   try {
-    const companyCode = (req.user as any).companyCode;
-    const userId = (req.user as any).userId;
+    const companyCode = req.user!.companyCode;
+    const userId = req.user!.userId;
     const { 
       group_id, source_screen_id, source_action, target_screen_id, target_action,
       data_mapping, flow_type, flow_label, condition_expression, is_active
@@ -689,10 +735,10 @@ export const createDataFlow = async (req: Request, res: Response) => {
 };
 
 // 데이터 흐름 수정
-export const updateDataFlow = async (req: Request, res: Response) => {
+export const updateDataFlow = async (req: AuthenticatedRequest, res: Response) => {
   try {
     const { id } = req.params;
-    const companyCode = (req.user as any).companyCode;
+    const companyCode = req.user!.companyCode;
     const { 
       group_id, source_screen_id, source_action, target_screen_id, target_action,
       data_mapping, flow_type, flow_label, condition_expression, is_active
@@ -732,10 +778,10 @@ export const updateDataFlow = async (req: Request, res: Response) => {
 };
 
 // 데이터 흐름 삭제
-export const deleteDataFlow = async (req: Request, res: Response) => {
+export const deleteDataFlow = async (req: AuthenticatedRequest, res: Response) => {
   try {
     const { id } = req.params;
-    const companyCode = (req.user as any).companyCode;
+    const companyCode = req.user!.companyCode;
 
     let query = `DELETE FROM screen_data_flows WHERE id = $1`;
     const params: any[] = [id];
@@ -766,9 +812,9 @@ export const deleteDataFlow = async (req: Request, res: Response) => {
 // ============================================================
 
 // 화면-테이블 관계 목록 조회
-export const getTableRelations = async (req: Request, res: Response) => {
+export const getTableRelations = async (req: AuthenticatedRequest, res: Response) => {
   try {
-    const companyCode = (req.user as any).companyCode;
+    const companyCode = req.user!.companyCode;
     const { screen_id, group_id } = req.query;
 
     let query = `
@@ -815,10 +861,10 @@ export const getTableRelations = async (req: Request, res: Response) => {
 };
 
 // 화면-테이블 관계 생성
-export const createTableRelation = async (req: Request, res: Response) => {
+export const createTableRelation = async (req: AuthenticatedRequest, res: Response) => {
   try {
-    const companyCode = (req.user as any).companyCode;
-    const userId = (req.user as any).userId;
+    const companyCode = req.user!.companyCode;
+    const userId = req.user!.userId;
     const { group_id, screen_id, table_name, relation_type, crud_operations, description, is_active } = req.body;
 
     if (!screen_id || !table_name) {
@@ -848,10 +894,10 @@ export const createTableRelation = async (req: Request, res: Response) => {
 };
 
 // 화면-테이블 관계 수정
-export const updateTableRelation = async (req: Request, res: Response) => {
+export const updateTableRelation = async (req: AuthenticatedRequest, res: Response) => {
   try {
     const { id } = req.params;
-    const companyCode = (req.user as any).companyCode;
+    const companyCode = req.user!.companyCode;
     const { group_id, table_name, relation_type, crud_operations, description, is_active } = req.body;
 
     let query = `
@@ -883,10 +929,10 @@ export const updateTableRelation = async (req: Request, res: Response) => {
 };
 
 // 화면-테이블 관계 삭제
-export const deleteTableRelation = async (req: Request, res: Response) => {
+export const deleteTableRelation = async (req: AuthenticatedRequest, res: Response) => {
   try {
     const { id } = req.params;
-    const companyCode = (req.user as any).companyCode;
+    const companyCode = req.user!.companyCode;
 
     let query = `DELETE FROM screen_table_relations WHERE id = $1`;
     const params: any[] = [id];
diff --git a/backend-node/src/controllers/tableManagementController.ts b/backend-node/src/controllers/tableManagementController.ts
index 5bbec536..e8c5a1bb 100644
--- a/backend-node/src/controllers/tableManagementController.ts
+++ b/backend-node/src/controllers/tableManagementController.ts
@@ -804,6 +804,12 @@ export async function getTableData(
       }
     }
 
+    // 🆕 최종 검색 조건 로그
+    logger.info(
+      `🔍 최종 검색 조건 (enhancedSearch):`,
+      JSON.stringify(enhancedSearch)
+    );
+
     // 데이터 조회
     const result = await tableManagementService.getTableData(tableName, {
       page: parseInt(page),
@@ -887,7 +893,10 @@ export async function addTableData(
     const companyCode = req.user?.companyCode;
     if (companyCode && !data.company_code) {
       // 테이블에 company_code 컬럼이 있는지 확인
-      const hasCompanyCodeColumn = await tableManagementService.hasColumn(tableName, "company_code");
+      const hasCompanyCodeColumn = await tableManagementService.hasColumn(
+        tableName,
+        "company_code"
+      );
       if (hasCompanyCodeColumn) {
         data.company_code = companyCode;
         logger.info(`멀티테넌시: company_code 자동 추가 - ${companyCode}`);
@@ -897,7 +906,10 @@ export async function addTableData(
     // 🆕 writer 컬럼 자동 추가 (테이블에 writer 컬럼이 있고 값이 없는 경우)
     const userId = req.user?.userId;
     if (userId && !data.writer) {
-      const hasWriterColumn = await tableManagementService.hasColumn(tableName, "writer");
+      const hasWriterColumn = await tableManagementService.hasColumn(
+        tableName,
+        "writer"
+      );
       if (hasWriterColumn) {
         data.writer = userId;
         logger.info(`writer 자동 추가 - ${userId}`);
@@ -905,13 +917,25 @@ export async function addTableData(
     }
 
     // 데이터 추가
-    await tableManagementService.addTableData(tableName, data);
+    const result = await tableManagementService.addTableData(tableName, data);
 
     logger.info(`테이블 데이터 추가 완료: ${tableName}`);
 
-    const response: ApiResponse<null> = {
+    // 무시된 컬럼이 있으면 경고 정보 포함
+    const response: ApiResponse<{
+      skippedColumns?: string[];
+      savedColumns?: string[];
+    }> = {
       success: true,
-      message: "테이블 데이터를 성공적으로 추가했습니다.",
+      message:
+        result.skippedColumns.length > 0
+          ? `테이블 데이터를 추가했습니다. (무시된 컬럼 ${result.skippedColumns.length}개: ${result.skippedColumns.join(", ")})`
+          : "테이블 데이터를 성공적으로 추가했습니다.",
+      data: {
+        skippedColumns:
+          result.skippedColumns.length > 0 ? result.skippedColumns : undefined,
+        savedColumns: result.savedColumns,
+      },
     };
 
     res.status(201).json(response);
@@ -1639,10 +1663,10 @@ export async function toggleLogTable(
 
 /**
  * 메뉴의 상위 메뉴들이 설정한 모든 카테고리 타입 컬럼 조회 (계층 구조 상속)
- * 
+ *
  * @route GET /api/table-management/menu/:menuObjid/category-columns
  * @description 현재 메뉴와 상위 메뉴들에서 설정한 category_column_mapping의 모든 카테고리 컬럼 조회
- * 
+ *
  * 예시:
  * - 2레벨 메뉴 "고객사관리"에서 discount_type, rounding_type 설정
  * - 3레벨 메뉴 "고객등록", "고객조회" 등에서도 동일하게 보임 (상속)
@@ -1655,7 +1679,10 @@ export async function getCategoryColumnsByMenu(
     const { menuObjid } = req.params;
     const companyCode = req.user?.companyCode;
 
-    logger.info("📥 메뉴별 카테고리 컬럼 조회 요청", { menuObjid, companyCode });
+    logger.info("📥 메뉴별 카테고리 컬럼 조회 요청", {
+      menuObjid,
+      companyCode,
+    });
 
     if (!menuObjid) {
       res.status(400).json({
@@ -1681,8 +1708,11 @@ export async function getCategoryColumnsByMenu(
 
     if (mappingTableExists) {
       // 🆕 category_column_mapping을 사용한 계층 구조 기반 조회
-      logger.info("🔍 category_column_mapping 기반 카테고리 컬럼 조회 (계층 구조 상속)", { menuObjid, companyCode });
-      
+      logger.info(
+        "🔍 category_column_mapping 기반 카테고리 컬럼 조회 (계층 구조 상속)",
+        { menuObjid, companyCode }
+      );
+
       // 현재 메뉴와 모든 상위 메뉴의 objid 조회 (재귀)
       const ancestorMenuQuery = `
         WITH RECURSIVE menu_hierarchy AS (
@@ -1704,17 +1734,21 @@ export async function getCategoryColumnsByMenu(
           ARRAY_AGG(menu_name_kor) as menu_names
         FROM menu_hierarchy
       `;
-      
-      const ancestorMenuResult = await pool.query(ancestorMenuQuery, [parseInt(menuObjid)]);
-      const ancestorMenuObjids = ancestorMenuResult.rows[0]?.menu_objids || [parseInt(menuObjid)];
+
+      const ancestorMenuResult = await pool.query(ancestorMenuQuery, [
+        parseInt(menuObjid),
+      ]);
+      const ancestorMenuObjids = ancestorMenuResult.rows[0]?.menu_objids || [
+        parseInt(menuObjid),
+      ];
       const ancestorMenuNames = ancestorMenuResult.rows[0]?.menu_names || [];
-      
-      logger.info("✅ 상위 메뉴 계층 조회 완료", { 
-        ancestorMenuObjids, 
+
+      logger.info("✅ 상위 메뉴 계층 조회 완료", {
+        ancestorMenuObjids,
         ancestorMenuNames,
-        hierarchyDepth: ancestorMenuObjids.length 
+        hierarchyDepth: ancestorMenuObjids.length,
       });
-      
+
       // 상위 메뉴들에 설정된 모든 카테고리 컬럼 조회 (테이블 필터링 제거)
       const columnsQuery = `
         SELECT DISTINCT
@@ -1744,20 +1778,31 @@ export async function getCategoryColumnsByMenu(
           AND ttc.input_type = 'category'
         ORDER BY ttc.table_name, ccm.logical_column_name
       `;
-      
-      columnsResult = await pool.query(columnsQuery, [companyCode, ancestorMenuObjids]);
-      logger.info("✅ category_column_mapping 기반 조회 완료 (계층 구조 상속)", { 
-        rowCount: columnsResult.rows.length,
-        columns: columnsResult.rows.map((r: any) => `${r.tableName}.${r.columnName}`)
-      });
+
+      columnsResult = await pool.query(columnsQuery, [
+        companyCode,
+        ancestorMenuObjids,
+      ]);
+      logger.info(
+        "✅ category_column_mapping 기반 조회 완료 (계층 구조 상속)",
+        {
+          rowCount: columnsResult.rows.length,
+          columns: columnsResult.rows.map(
+            (r: any) => `${r.tableName}.${r.columnName}`
+          ),
+        }
+      );
     } else {
       // 🔄 레거시 방식: 형제 메뉴들의 테이블에서 모든 카테고리 컬럼 조회
-      logger.info("🔍 레거시 방식: 형제 메뉴 테이블 기반 카테고리 컬럼 조회", { menuObjid, companyCode });
-      
+      logger.info("🔍 레거시 방식: 형제 메뉴 테이블 기반 카테고리 컬럼 조회", {
+        menuObjid,
+        companyCode,
+      });
+
       // 형제 메뉴 조회
       const { getSiblingMenuObjids } = await import("../services/menuService");
       const siblingObjids = await getSiblingMenuObjids(parseInt(menuObjid));
-      
+
       // 형제 메뉴들이 사용하는 테이블 조회
       const tablesQuery = `
         SELECT DISTINCT sd.table_name
@@ -1767,11 +1812,17 @@ export async function getCategoryColumnsByMenu(
           AND sma.company_code = $2
           AND sd.table_name IS NOT NULL
       `;
-      
-      const tablesResult = await pool.query(tablesQuery, [siblingObjids, companyCode]);
+
+      const tablesResult = await pool.query(tablesQuery, [
+        siblingObjids,
+        companyCode,
+      ]);
       const tableNames = tablesResult.rows.map((row: any) => row.table_name);
-      
-      logger.info("✅ 형제 메뉴 테이블 조회 완료", { tableNames, count: tableNames.length });
+
+      logger.info("✅ 형제 메뉴 테이블 조회 완료", {
+        tableNames,
+        count: tableNames.length,
+      });
 
       if (tableNames.length === 0) {
         res.json({
@@ -1781,7 +1832,7 @@ export async function getCategoryColumnsByMenu(
         });
         return;
       }
-      
+
       const columnsQuery = `
         SELECT 
           ttc.table_name AS "tableName",
@@ -1806,13 +1857,15 @@ export async function getCategoryColumnsByMenu(
           AND ttc.input_type = 'category'
         ORDER BY ttc.table_name, ttc.column_name
       `;
-      
+
       columnsResult = await pool.query(columnsQuery, [tableNames, companyCode]);
-      logger.info("✅ 레거시 방식 조회 완료", { rowCount: columnsResult.rows.length });
+      logger.info("✅ 레거시 방식 조회 완료", {
+        rowCount: columnsResult.rows.length,
+      });
     }
-    
-    logger.info("✅ 카테고리 컬럼 조회 완료", { 
-      columnCount: columnsResult.rows.length 
+
+    logger.info("✅ 카테고리 컬럼 조회 완료", {
+      columnCount: columnsResult.rows.length,
     });
 
     res.json({
@@ -1837,9 +1890,9 @@ export async function getCategoryColumnsByMenu(
 
 /**
  * 범용 다중 테이블 저장 API
- * 
+ *
  * 메인 테이블과 서브 테이블(들)에 트랜잭션으로 데이터를 저장합니다.
- * 
+ *
  * 요청 본문:
  * {
  *   mainTable: { tableName: string, primaryKeyColumn: string },
@@ -1909,23 +1962,29 @@ export async function multiTableSave(
     }
 
     let mainResult: any;
-    
+
     if (isUpdate && pkValue) {
       // UPDATE
       const updateColumns = Object.keys(mainData)
-        .filter(col => col !== pkColumn)
+        .filter((col) => col !== pkColumn)
         .map((col, idx) => `"${col}" = $${idx + 1}`)
         .join(", ");
       const updateValues = Object.keys(mainData)
-        .filter(col => col !== pkColumn)
-        .map(col => mainData[col]);
-      
+        .filter((col) => col !== pkColumn)
+        .map((col) => mainData[col]);
+
       // updated_at 컬럼 존재 여부 확인
-      const hasUpdatedAt = await client.query(`
+      const hasUpdatedAt = await client.query(
+        `
         SELECT 1 FROM information_schema.columns 
         WHERE table_name = $1 AND column_name = 'updated_at'
-      `, [mainTableName]);
-      const updatedAtClause = hasUpdatedAt.rowCount && hasUpdatedAt.rowCount > 0 ? ", updated_at = NOW()" : "";
+      `,
+        [mainTableName]
+      );
+      const updatedAtClause =
+        hasUpdatedAt.rowCount && hasUpdatedAt.rowCount > 0
+          ? ", updated_at = NOW()"
+          : "";
 
       const updateQuery = `
         UPDATE "${mainTableName}"
@@ -1934,29 +1993,43 @@ export async function multiTableSave(
         ${companyCode !== "*" ? `AND company_code = $${updateValues.length + 2}` : ""}
         RETURNING *
       `;
-      
-      const updateParams = companyCode !== "*" 
-        ? [...updateValues, pkValue, companyCode]
-        : [...updateValues, pkValue];
-      
-      logger.info("메인 테이블 UPDATE:", { query: updateQuery, paramsCount: updateParams.length });
+
+      const updateParams =
+        companyCode !== "*"
+          ? [...updateValues, pkValue, companyCode]
+          : [...updateValues, pkValue];
+
+      logger.info("메인 테이블 UPDATE:", {
+        query: updateQuery,
+        paramsCount: updateParams.length,
+      });
       mainResult = await client.query(updateQuery, updateParams);
     } else {
       // INSERT
-      const columns = Object.keys(mainData).map(col => `"${col}"`).join(", ");
-      const placeholders = Object.keys(mainData).map((_, idx) => `$${idx + 1}`).join(", ");
+      const columns = Object.keys(mainData)
+        .map((col) => `"${col}"`)
+        .join(", ");
+      const placeholders = Object.keys(mainData)
+        .map((_, idx) => `$${idx + 1}`)
+        .join(", ");
       const values = Object.values(mainData);
 
       // updated_at 컬럼 존재 여부 확인
-      const hasUpdatedAt = await client.query(`
+      const hasUpdatedAt = await client.query(
+        `
         SELECT 1 FROM information_schema.columns 
         WHERE table_name = $1 AND column_name = 'updated_at'
-      `, [mainTableName]);
-      const updatedAtClause = hasUpdatedAt.rowCount && hasUpdatedAt.rowCount > 0 ? ", updated_at = NOW()" : "";
+      `,
+        [mainTableName]
+      );
+      const updatedAtClause =
+        hasUpdatedAt.rowCount && hasUpdatedAt.rowCount > 0
+          ? ", updated_at = NOW()"
+          : "";
 
       const updateSetClause = Object.keys(mainData)
-        .filter(col => col !== pkColumn)
-        .map(col => `"${col}" = EXCLUDED."${col}"`)
+        .filter((col) => col !== pkColumn)
+        .map((col) => `"${col}" = EXCLUDED."${col}"`)
         .join(", ");
 
       const insertQuery = `
@@ -1967,7 +2040,10 @@ export async function multiTableSave(
         RETURNING *
       `;
 
-      logger.info("메인 테이블 INSERT/UPSERT:", { query: insertQuery, paramsCount: values.length });
+      logger.info("메인 테이블 INSERT/UPSERT:", {
+        query: insertQuery,
+        paramsCount: values.length,
+      });
       mainResult = await client.query(insertQuery, values);
     }
 
@@ -1986,12 +2062,15 @@ export async function multiTableSave(
       const { tableName, linkColumn, items, options } = subTableConfig;
 
       // saveMainAsFirst가 활성화된 경우, items가 비어있어도 메인 데이터를 서브 테이블에 저장해야 함
-      const hasSaveMainAsFirst = options?.saveMainAsFirst && 
-                                  options?.mainFieldMappings && 
-                                  options.mainFieldMappings.length > 0;
-      
+      const hasSaveMainAsFirst =
+        options?.saveMainAsFirst &&
+        options?.mainFieldMappings &&
+        options.mainFieldMappings.length > 0;
+
       if (!tableName || (!items?.length && !hasSaveMainAsFirst)) {
-        logger.info(`서브 테이블 ${tableName} 스킵: 데이터 없음 (saveMainAsFirst: ${hasSaveMainAsFirst})`);
+        logger.info(
+          `서브 테이블 ${tableName} 스킵: 데이터 없음 (saveMainAsFirst: ${hasSaveMainAsFirst})`
+        );
         continue;
       }
 
@@ -2004,15 +2083,20 @@ export async function multiTableSave(
 
       // 기존 데이터 삭제 옵션
       if (options?.deleteExistingBefore && linkColumn?.subColumn) {
-        const deleteQuery = options?.deleteOnlySubItems && options?.mainMarkerColumn
-          ? `DELETE FROM "${tableName}" WHERE "${linkColumn.subColumn}" = $1 AND "${options.mainMarkerColumn}" = $2`
-          : `DELETE FROM "${tableName}" WHERE "${linkColumn.subColumn}" = $1`;
-        
-        const deleteParams = options?.deleteOnlySubItems && options?.mainMarkerColumn
-          ? [savedPkValue, options.subMarkerValue ?? false]
-          : [savedPkValue];
+        const deleteQuery =
+          options?.deleteOnlySubItems && options?.mainMarkerColumn
+            ? `DELETE FROM "${tableName}" WHERE "${linkColumn.subColumn}" = $1 AND "${options.mainMarkerColumn}" = $2`
+            : `DELETE FROM "${tableName}" WHERE "${linkColumn.subColumn}" = $1`;
 
-        logger.info(`서브 테이블 ${tableName} 기존 데이터 삭제:`, { deleteQuery, deleteParams });
+        const deleteParams =
+          options?.deleteOnlySubItems && options?.mainMarkerColumn
+            ? [savedPkValue, options.subMarkerValue ?? false]
+            : [savedPkValue];
+
+        logger.info(`서브 테이블 ${tableName} 기존 데이터 삭제:`, {
+          deleteQuery,
+          deleteParams,
+        });
         await client.query(deleteQuery, deleteParams);
       }
 
@@ -2025,7 +2109,12 @@ export async function multiTableSave(
         linkColumn,
         mainDataKeys: Object.keys(mainData),
       });
-      if (options?.saveMainAsFirst && options?.mainFieldMappings && options.mainFieldMappings.length > 0 && linkColumn?.subColumn) {
+      if (
+        options?.saveMainAsFirst &&
+        options?.mainFieldMappings &&
+        options.mainFieldMappings.length > 0 &&
+        linkColumn?.subColumn
+      ) {
         const mainSubItem: Record<string, any> = {
           [linkColumn.subColumn]: savedPkValue,
         };
@@ -2039,7 +2128,8 @@ export async function multiTableSave(
 
         // 메인 마커 설정
         if (options.mainMarkerColumn) {
-          mainSubItem[options.mainMarkerColumn] = options.mainMarkerValue ?? true;
+          mainSubItem[options.mainMarkerColumn] =
+            options.mainMarkerValue ?? true;
         }
 
         // company_code 추가
@@ -2062,20 +2152,30 @@ export async function multiTableSave(
         if (companyCode !== "*") {
           checkParams.push(companyCode);
         }
-        
+
         const existingResult = await client.query(checkQuery, checkParams);
-        
+
         if (existingResult.rows.length > 0) {
           // UPDATE
           const updateColumns = Object.keys(mainSubItem)
-            .filter(col => col !== linkColumn.subColumn && col !== options.mainMarkerColumn && col !== "company_code")
+            .filter(
+              (col) =>
+                col !== linkColumn.subColumn &&
+                col !== options.mainMarkerColumn &&
+                col !== "company_code"
+            )
             .map((col, idx) => `"${col}" = $${idx + 1}`)
             .join(", ");
-          
+
           const updateValues = Object.keys(mainSubItem)
-            .filter(col => col !== linkColumn.subColumn && col !== options.mainMarkerColumn && col !== "company_code")
-            .map(col => mainSubItem[col]);
-          
+            .filter(
+              (col) =>
+                col !== linkColumn.subColumn &&
+                col !== options.mainMarkerColumn &&
+                col !== "company_code"
+            )
+            .map((col) => mainSubItem[col]);
+
           if (updateColumns) {
             const updateQuery = `
               UPDATE "${tableName}"
@@ -2094,14 +2194,26 @@ export async function multiTableSave(
             }
 
             const updateResult = await client.query(updateQuery, updateParams);
-            subTableResults.push({ tableName, type: "main", data: updateResult.rows[0] });
+            subTableResults.push({
+              tableName,
+              type: "main",
+              data: updateResult.rows[0],
+            });
           } else {
-            subTableResults.push({ tableName, type: "main", data: existingResult.rows[0] });
+            subTableResults.push({
+              tableName,
+              type: "main",
+              data: existingResult.rows[0],
+            });
           }
         } else {
           // INSERT
-          const mainSubColumns = Object.keys(mainSubItem).map(col => `"${col}"`).join(", ");
-          const mainSubPlaceholders = Object.keys(mainSubItem).map((_, idx) => `$${idx + 1}`).join(", ");
+          const mainSubColumns = Object.keys(mainSubItem)
+            .map((col) => `"${col}"`)
+            .join(", ");
+          const mainSubPlaceholders = Object.keys(mainSubItem)
+            .map((_, idx) => `$${idx + 1}`)
+            .join(", ");
           const mainSubValues = Object.values(mainSubItem);
 
           const insertQuery = `
@@ -2111,7 +2223,11 @@ export async function multiTableSave(
           `;
 
           const insertResult = await client.query(insertQuery, mainSubValues);
-          subTableResults.push({ tableName, type: "main", data: insertResult.rows[0] });
+          subTableResults.push({
+            tableName,
+            type: "main",
+            data: insertResult.rows[0],
+          });
         }
       }
 
@@ -2127,8 +2243,12 @@ export async function multiTableSave(
           item.company_code = companyCode;
         }
 
-        const subColumns = Object.keys(item).map(col => `"${col}"`).join(", ");
-        const subPlaceholders = Object.keys(item).map((_, idx) => `$${idx + 1}`).join(", ");
+        const subColumns = Object.keys(item)
+          .map((col) => `"${col}"`)
+          .join(", ");
+        const subPlaceholders = Object.keys(item)
+          .map((_, idx) => `$${idx + 1}`)
+          .join(", ");
         const subValues = Object.values(item);
 
         const subInsertQuery = `
@@ -2137,9 +2257,16 @@ export async function multiTableSave(
           RETURNING *
         `;
 
-        logger.info(`서브 테이블 ${tableName} 아이템 저장:`, { subInsertQuery, subValuesCount: subValues.length });
+        logger.info(`서브 테이블 ${tableName} 아이템 저장:`, {
+          subInsertQuery,
+          subValuesCount: subValues.length,
+        });
         const subResult = await client.query(subInsertQuery, subValues);
-        subTableResults.push({ tableName, type: "sub", data: subResult.rows[0] });
+        subTableResults.push({
+          tableName,
+          type: "sub",
+          data: subResult.rows[0],
+        });
       }
 
       logger.info(`서브 테이블 ${tableName} 저장 완료`);
@@ -2179,3 +2306,68 @@ export async function multiTableSave(
   }
 }
 
+/**
+ * 두 테이블 간의 엔티티 관계 자동 감지
+ * GET /api/table-management/tables/entity-relations?leftTable=xxx&rightTable=yyy
+ *
+ * column_labels에서 정의된 엔티티/카테고리 타입 설정을 기반으로
+ * 두 테이블 간의 외래키 관계를 자동으로 감지합니다.
+ */
+export async function getTableEntityRelations(
+  req: AuthenticatedRequest,
+  res: Response
+): Promise<void> {
+  try {
+    const { leftTable, rightTable } = req.query;
+
+    logger.info(
+      `=== 테이블 엔티티 관계 조회 시작: ${leftTable} <-> ${rightTable} ===`
+    );
+
+    if (!leftTable || !rightTable) {
+      const response: ApiResponse<null> = {
+        success: false,
+        message: "leftTable과 rightTable 파라미터가 필요합니다.",
+        error: {
+          code: "MISSING_PARAMETERS",
+          details: "leftTable과 rightTable 쿼리 파라미터가 필요합니다.",
+        },
+      };
+      res.status(400).json(response);
+      return;
+    }
+
+    const tableManagementService = new TableManagementService();
+    const relations = await tableManagementService.detectTableEntityRelations(
+      String(leftTable),
+      String(rightTable)
+    );
+
+    logger.info(`테이블 엔티티 관계 조회 완료: ${relations.length}개 발견`);
+
+    const response: ApiResponse<any> = {
+      success: true,
+      message: `${relations.length}개의 엔티티 관계를 발견했습니다.`,
+      data: {
+        leftTable: String(leftTable),
+        rightTable: String(rightTable),
+        relations,
+      },
+    };
+
+    res.status(200).json(response);
+  } catch (error) {
+    logger.error("테이블 엔티티 관계 조회 중 오류 발생:", error);
+
+    const response: ApiResponse<null> = {
+      success: false,
+      message: "테이블 엔티티 관계 조회 중 오류가 발생했습니다.",
+      error: {
+        code: "ENTITY_RELATIONS_ERROR",
+        details: error instanceof Error ? error.message : "Unknown error",
+      },
+    };
+
+    res.status(500).json(response);
+  }
+}
diff --git a/backend-node/src/routes/cascadingAutoFillRoutes.ts b/backend-node/src/routes/cascadingAutoFillRoutes.ts
index a5107448..acb0cbc7 100644
--- a/backend-node/src/routes/cascadingAutoFillRoutes.ts
+++ b/backend-node/src/routes/cascadingAutoFillRoutes.ts
@@ -55,3 +55,5 @@ export default router;
 
 
 
+
+
diff --git a/backend-node/src/routes/cascadingConditionRoutes.ts b/backend-node/src/routes/cascadingConditionRoutes.ts
index 22cd2d2b..96ab25be 100644
--- a/backend-node/src/routes/cascadingConditionRoutes.ts
+++ b/backend-node/src/routes/cascadingConditionRoutes.ts
@@ -51,3 +51,5 @@ export default router;
 
 
 
+
+
diff --git a/backend-node/src/routes/cascadingHierarchyRoutes.ts b/backend-node/src/routes/cascadingHierarchyRoutes.ts
index 79a1c6e8..f77019be 100644
--- a/backend-node/src/routes/cascadingHierarchyRoutes.ts
+++ b/backend-node/src/routes/cascadingHierarchyRoutes.ts
@@ -67,3 +67,5 @@ export default router;
 
 
 
+
+
diff --git a/backend-node/src/routes/cascadingMutualExclusionRoutes.ts b/backend-node/src/routes/cascadingMutualExclusionRoutes.ts
index 352a05b5..6e4094f1 100644
--- a/backend-node/src/routes/cascadingMutualExclusionRoutes.ts
+++ b/backend-node/src/routes/cascadingMutualExclusionRoutes.ts
@@ -55,3 +55,5 @@ export default router;
 
 
 
+
+
diff --git a/backend-node/src/routes/codeMergeRoutes.ts b/backend-node/src/routes/codeMergeRoutes.ts
index 78cbd3e1..2cb41923 100644
--- a/backend-node/src/routes/codeMergeRoutes.ts
+++ b/backend-node/src/routes/codeMergeRoutes.ts
@@ -3,6 +3,8 @@ import {
   mergeCodeAllTables,
   getTablesWithColumn,
   previewCodeMerge,
+  mergeCodeByValue,
+  previewMergeCodeByValue,
 } from "../controllers/codeMergeController";
 import { authenticateToken } from "../middleware/authMiddleware";
 
@@ -13,7 +15,7 @@ router.use(authenticateToken);
 
 /**
  * POST /api/code-merge/merge-all-tables
- * 코드 병합 실행 (모든 관련 테이블에 적용)
+ * 코드 병합 실행 (모든 관련 테이블에 적용 - 같은 컬럼명만)
  * Body: { columnName, oldValue, newValue }
  */
 router.post("/merge-all-tables", mergeCodeAllTables);
@@ -26,10 +28,24 @@ router.get("/tables-with-column/:columnName", getTablesWithColumn);
 
 /**
  * POST /api/code-merge/preview
- * 코드 병합 미리보기 (실제 실행 없이 영향받을 데이터 확인)
+ * 코드 병합 미리보기 (같은 컬럼명 기준)
  * Body: { columnName, oldValue }
  */
 router.post("/preview", previewCodeMerge);
 
+/**
+ * POST /api/code-merge/merge-by-value
+ * 값 기반 코드 병합 (모든 테이블의 모든 컬럼에서 해당 값을 찾아 변경)
+ * Body: { oldValue, newValue }
+ */
+router.post("/merge-by-value", mergeCodeByValue);
+
+/**
+ * POST /api/code-merge/preview-by-value
+ * 값 기반 코드 병합 미리보기 (컬럼명 상관없이 값으로 검색)
+ * Body: { oldValue }
+ */
+router.post("/preview-by-value", previewMergeCodeByValue);
+
 export default router;
 
diff --git a/backend-node/src/routes/dataRoutes.ts b/backend-node/src/routes/dataRoutes.ts
index f87aa5d6..574f1cf8 100644
--- a/backend-node/src/routes/dataRoutes.ts
+++ b/backend-node/src/routes/dataRoutes.ts
@@ -1,10 +1,262 @@
 import express from "express";
 import { dataService } from "../services/dataService";
+import { masterDetailExcelService } from "../services/masterDetailExcelService";
 import { authenticateToken } from "../middleware/authMiddleware";
 import { AuthenticatedRequest } from "../types/auth";
 
 const router = express.Router();
 
+// ================================
+// 마스터-디테일 엑셀 API
+// ================================
+
+/**
+ * 마스터-디테일 관계 정보 조회
+ * GET /api/data/master-detail/relation/:screenId
+ */
+router.get(
+  "/master-detail/relation/:screenId",
+  authenticateToken,
+  async (req: AuthenticatedRequest, res) => {
+    try {
+      const { screenId } = req.params;
+
+      if (!screenId || isNaN(parseInt(screenId))) {
+        return res.status(400).json({
+          success: false,
+          message: "유효한 screenId가 필요합니다.",
+        });
+      }
+
+      console.log(`🔍 마스터-디테일 관계 조회: screenId=${screenId}`);
+
+      const relation = await masterDetailExcelService.getMasterDetailRelation(
+        parseInt(screenId)
+      );
+
+      if (!relation) {
+        return res.json({
+          success: true,
+          data: null,
+          message: "마스터-디테일 구조가 아닙니다.",
+        });
+      }
+
+      console.log(`✅ 마스터-디테일 관계 발견:`, {
+        masterTable: relation.masterTable,
+        detailTable: relation.detailTable,
+        joinKey: relation.masterKeyColumn,
+      });
+
+      return res.json({
+        success: true,
+        data: relation,
+      });
+    } catch (error: any) {
+      console.error("마스터-디테일 관계 조회 오류:", error);
+      return res.status(500).json({
+        success: false,
+        message: "마스터-디테일 관계 조회 중 오류가 발생했습니다.",
+        error: error.message,
+      });
+    }
+  }
+);
+
+/**
+ * 마스터-디테일 엑셀 다운로드 데이터 조회
+ * POST /api/data/master-detail/download
+ */
+router.post(
+  "/master-detail/download",
+  authenticateToken,
+  async (req: AuthenticatedRequest, res) => {
+    try {
+      const { screenId, filters } = req.body;
+      const companyCode = req.user?.companyCode || "*";
+
+      if (!screenId) {
+        return res.status(400).json({
+          success: false,
+          message: "screenId가 필요합니다.",
+        });
+      }
+
+      console.log(`📥 마스터-디테일 엑셀 다운로드: screenId=${screenId}`);
+
+      // 1. 마스터-디테일 관계 조회
+      const relation = await masterDetailExcelService.getMasterDetailRelation(
+        parseInt(screenId)
+      );
+
+      if (!relation) {
+        return res.status(400).json({
+          success: false,
+          message: "마스터-디테일 구조가 아닙니다.",
+        });
+      }
+
+      // 2. JOIN 데이터 조회
+      const data = await masterDetailExcelService.getJoinedData(
+        relation,
+        companyCode,
+        filters
+      );
+
+      console.log(`✅ 마스터-디테일 데이터 조회 완료: ${data.data.length}행`);
+
+      return res.json({
+        success: true,
+        data,
+      });
+    } catch (error: any) {
+      console.error("마스터-디테일 다운로드 오류:", error);
+      return res.status(500).json({
+        success: false,
+        message: "마스터-디테일 다운로드 중 오류가 발생했습니다.",
+        error: error.message,
+      });
+    }
+  }
+);
+
+/**
+ * 마스터-디테일 엑셀 업로드
+ * POST /api/data/master-detail/upload
+ */
+router.post(
+  "/master-detail/upload",
+  authenticateToken,
+  async (req: AuthenticatedRequest, res) => {
+    try {
+      const { screenId, data } = req.body;
+      const companyCode = req.user?.companyCode || "*";
+      const userId = req.user?.userId;
+
+      if (!screenId || !data || !Array.isArray(data)) {
+        return res.status(400).json({
+          success: false,
+          message: "screenId와 data 배열이 필요합니다.",
+        });
+      }
+
+      console.log(`📤 마스터-디테일 엑셀 업로드: screenId=${screenId}, rows=${data.length}`);
+
+      // 1. 마스터-디테일 관계 조회
+      const relation = await masterDetailExcelService.getMasterDetailRelation(
+        parseInt(screenId)
+      );
+
+      if (!relation) {
+        return res.status(400).json({
+          success: false,
+          message: "마스터-디테일 구조가 아닙니다.",
+        });
+      }
+
+      // 2. 데이터 업로드
+      const result = await masterDetailExcelService.uploadJoinedData(
+        relation,
+        data,
+        companyCode,
+        userId
+      );
+
+      console.log(`✅ 마스터-디테일 업로드 완료:`, {
+        masterInserted: result.masterInserted,
+        masterUpdated: result.masterUpdated,
+        detailInserted: result.detailInserted,
+        errors: result.errors.length,
+      });
+
+      return res.json({
+        success: result.success,
+        data: result,
+        message: result.success
+          ? `마스터 ${result.masterInserted + result.masterUpdated}건, 디테일 ${result.detailInserted}건 처리되었습니다.`
+          : "업로드 중 오류가 발생했습니다.",
+      });
+    } catch (error: any) {
+      console.error("마스터-디테일 업로드 오류:", error);
+      return res.status(500).json({
+        success: false,
+        message: "마스터-디테일 업로드 중 오류가 발생했습니다.",
+        error: error.message,
+      });
+    }
+  }
+);
+
+/**
+ * 마스터-디테일 간단 모드 엑셀 업로드
+ * - 마스터 정보는 UI에서 선택
+ * - 디테일 정보만 엑셀에서 업로드
+ * - 채번 규칙을 통해 마스터 키 자동 생성
+ * 
+ * POST /api/data/master-detail/upload-simple
+ */
+router.post(
+  "/master-detail/upload-simple",
+  authenticateToken,
+  async (req: AuthenticatedRequest, res) => {
+    try {
+      const { screenId, detailData, masterFieldValues, numberingRuleId, afterUploadFlowId, afterUploadFlows } = req.body;
+      const companyCode = req.user?.companyCode || "*";
+      const userId = req.user?.userId || "system";
+
+      if (!screenId || !detailData || !Array.isArray(detailData)) {
+        return res.status(400).json({
+          success: false,
+          message: "screenId와 detailData 배열이 필요합니다.",
+        });
+      }
+
+      console.log(`📤 마스터-디테일 간단 모드 업로드: screenId=${screenId}, rows=${detailData.length}`);
+      console.log(`   마스터 필드 값:`, masterFieldValues);
+      console.log(`   채번 규칙 ID:`, numberingRuleId);
+      console.log(`   업로드 후 제어:`, afterUploadFlows?.length > 0 ? `${afterUploadFlows.length}개` : afterUploadFlowId || "없음");
+
+      // 업로드 실행
+      const result = await masterDetailExcelService.uploadSimple(
+        parseInt(screenId),
+        detailData,
+        masterFieldValues || {},
+        numberingRuleId,
+        companyCode,
+        userId,
+        afterUploadFlowId, // 업로드 후 제어 실행 (단일, 하위 호환성)
+        afterUploadFlows // 업로드 후 제어 실행 (다중)
+      );
+
+      console.log(`✅ 마스터-디테일 간단 모드 업로드 완료:`, {
+        masterInserted: result.masterInserted,
+        detailInserted: result.detailInserted,
+        generatedKey: result.generatedKey,
+        errors: result.errors.length,
+      });
+
+      return res.json({
+        success: result.success,
+        data: result,
+        message: result.success
+          ? `마스터 1건(${result.generatedKey}), 디테일 ${result.detailInserted}건 처리되었습니다.`
+          : "업로드 중 오류가 발생했습니다.",
+      });
+    } catch (error: any) {
+      console.error("마스터-디테일 간단 모드 업로드 오류:", error);
+      return res.status(500).json({
+        success: false,
+        message: "마스터-디테일 업로드 중 오류가 발생했습니다.",
+        error: error.message,
+      });
+    }
+  }
+);
+
+// ================================
+// 기존 데이터 API
+// ================================
+
 /**
  * 조인 데이터 조회 API (다른 라우트보다 먼저 정의)
  * GET /api/data/join?leftTable=...&rightTable=...&leftColumn=...&rightColumn=...&leftValue=...
@@ -698,6 +950,7 @@ router.post(
     try {
       const { tableName } = req.params;
       const filterConditions = req.body;
+      const userCompany = req.user?.companyCode;
 
       if (!/^[a-zA-Z_][a-zA-Z0-9_]*$/.test(tableName)) {
         return res.status(400).json({
@@ -706,11 +959,12 @@ router.post(
         });
       }
 
-      console.log(`🗑️ 그룹 삭제:`, { tableName, filterConditions });
+      console.log(`🗑️ 그룹 삭제:`, { tableName, filterConditions, userCompany });
 
       const result = await dataService.deleteGroupRecords(
         tableName,
-        filterConditions
+        filterConditions,
+        userCompany // 회사 코드 전달
       );
 
       if (!result.success) {
diff --git a/backend-node/src/routes/excelMappingRoutes.ts b/backend-node/src/routes/excelMappingRoutes.ts
new file mode 100644
index 00000000..cbcecc15
--- /dev/null
+++ b/backend-node/src/routes/excelMappingRoutes.ts
@@ -0,0 +1,25 @@
+import { Router } from "express";
+import { authenticateToken } from "../middleware/authMiddleware";
+import {
+  findMappingByColumns,
+  saveMappingTemplate,
+  getMappingTemplates,
+  deleteMappingTemplate,
+} from "../controllers/excelMappingController";
+
+const router = Router();
+
+// 엑셀 컬럼 구조로 매핑 템플릿 조회
+router.post("/find", authenticateToken, findMappingByColumns);
+
+// 매핑 템플릿 저장 (UPSERT)
+router.post("/save", authenticateToken, saveMappingTemplate);
+
+// 테이블의 매핑 템플릿 목록 조회
+router.get("/list/:tableName", authenticateToken, getMappingTemplates);
+
+// 매핑 템플릿 삭제
+router.delete("/:id", authenticateToken, deleteMappingTemplate);
+
+export default router;
+
diff --git a/backend-node/src/routes/multilangRoutes.ts b/backend-node/src/routes/multilangRoutes.ts
index 47137346..00ec04d6 100644
--- a/backend-node/src/routes/multilangRoutes.ts
+++ b/backend-node/src/routes/multilangRoutes.ts
@@ -21,6 +21,20 @@ import {
   getUserText,
   getLangText,
   getBatchTranslations,
+
+  // 카테고리 관리 API
+  getCategories,
+  getCategoryById,
+  getCategoryPath,
+
+  // 자동 생성 및 오버라이드 API
+  generateKey,
+  previewKey,
+  createOverrideKey,
+  getOverrideKeys,
+
+  // 화면 라벨 다국어 API
+  generateScreenLabelKeys,
 } from "../controllers/multilangController";
 
 const router = express.Router();
@@ -51,4 +65,18 @@ router.post("/keys/:keyId/texts", saveLangTexts); // 다국어 텍스트 저장/
 router.get("/user-text/:companyCode/:menuCode/:langKey", getUserText); // 사용자별 다국어 텍스트 조회
 router.get("/text/:companyCode/:langKey/:langCode", getLangText); // 특정 키의 다국어 텍스트 조회
 
+// 카테고리 관리 API
+router.get("/categories", getCategories); // 카테고리 트리 조회
+router.get("/categories/:categoryId", getCategoryById); // 카테고리 상세 조회
+router.get("/categories/:categoryId/path", getCategoryPath); // 카테고리 경로 조회
+
+// 자동 생성 및 오버라이드 API
+router.post("/keys/generate", generateKey); // 키 자동 생성
+router.post("/keys/preview", previewKey); // 키 미리보기
+router.post("/keys/override", createOverrideKey); // 오버라이드 키 생성
+router.get("/keys/overrides/:companyCode", getOverrideKeys); // 오버라이드 키 목록 조회
+
+// 화면 라벨 다국어 자동 생성 API
+router.post("/screen-labels", generateScreenLabelKeys); // 화면 라벨 다국어 키 자동 생성
+
 export default router;
diff --git a/backend-node/src/routes/tableManagementRoutes.ts b/backend-node/src/routes/tableManagementRoutes.ts
index d0716d59..fa7832ee 100644
--- a/backend-node/src/routes/tableManagementRoutes.ts
+++ b/backend-node/src/routes/tableManagementRoutes.ts
@@ -25,6 +25,7 @@ import {
   toggleLogTable,
   getCategoryColumnsByMenu, // 🆕 메뉴별 카테고리 컬럼 조회
   multiTableSave, // 🆕 범용 다중 테이블 저장
+  getTableEntityRelations, // 🆕 두 테이블 간 엔티티 관계 조회
 } from "../controllers/tableManagementController";
 
 const router = express.Router();
@@ -38,6 +39,15 @@ router.use(authenticateToken);
  */
 router.get("/tables", getTableList);
 
+/**
+ * 두 테이블 간 엔티티 관계 조회
+ * GET /api/table-management/tables/entity-relations?leftTable=xxx&rightTable=yyy
+ * 
+ * column_labels에서 정의된 엔티티/카테고리 타입 설정을 기반으로
+ * 두 테이블 간의 외래키 관계를 자동으로 감지합니다.
+ */
+router.get("/tables/entity-relations", getTableEntityRelations);
+
 /**
  * 테이블 컬럼 정보 조회
  * GET /api/table-management/tables/:tableName/columns
diff --git a/backend-node/src/services/adminService.ts b/backend-node/src/services/adminService.ts
index 1b9280db..95d8befa 100644
--- a/backend-node/src/services/adminService.ts
+++ b/backend-node/src/services/adminService.ts
@@ -65,6 +65,13 @@ export class AdminService {
           }
         );
 
+        // [임시 비활성화] 메뉴 권한 그룹 체크 - 모든 사용자에게 전체 메뉴 표시
+        // TODO: 권한 체크 다시 활성화 필요
+        logger.info(
+          `⚠️ [임시 비활성화] 권한 그룹 체크 스킵 - 사용자 ${userId}(${userType})에게 전체 메뉴 표시`
+        );
+
+        /* [원본 코드 - 권한 그룹 체크]
         if (userType === "COMPANY_ADMIN") {
           // 회사 관리자: 권한 그룹 기반 필터링 적용
           if (userRoleGroups.length > 0) {
@@ -141,6 +148,7 @@ export class AdminService {
             return [];
           }
         }
+        */
       } else if (
         menuType !== undefined &&
         userType === "SUPER_ADMIN" &&
@@ -412,6 +420,15 @@ export class AdminService {
       let queryParams: any[] = [userLang];
       let paramIndex = 2;
 
+      // [임시 비활성화] 메뉴 권한 그룹 체크 - 모든 사용자에게 전체 메뉴 표시
+      // TODO: 권한 체크 다시 활성화 필요
+      logger.info(
+        `⚠️ [임시 비활성화] getUserMenuList 권한 그룹 체크 스킵 - 사용자 ${userId}(${userType})에게 전체 메뉴 표시`
+      );
+      authFilter = "";
+      unionFilter = "";
+
+      /* [원본 코드 - getUserMenuList 권한 그룹 체크]
       if (userType === "SUPER_ADMIN") {
         // SUPER_ADMIN: 권한 그룹 체크 없이 해당 회사의 모든 메뉴 표시
         logger.info(`✅ 좌측 사이드바 (SUPER_ADMIN): 회사 ${userCompanyCode}의 모든 메뉴 표시`);
@@ -471,6 +488,7 @@ export class AdminService {
           return [];
         }
       }
+      */
 
       // 2. 회사별 필터링 조건 생성
       let companyFilter = "";
diff --git a/backend-node/src/services/dataService.ts b/backend-node/src/services/dataService.ts
index a1a494f2..75c57673 100644
--- a/backend-node/src/services/dataService.ts
+++ b/backend-node/src/services/dataService.ts
@@ -1189,6 +1189,13 @@ class DataService {
         [tableName]
       );
 
+      console.log(`🔍 테이블 ${tableName}의 Primary Key 조회 결과:`, {
+        pkColumns: pkResult.map((r) => r.attname),
+        pkCount: pkResult.length,
+        inputId: typeof id === "object" ? JSON.stringify(id).substring(0, 200) + "..." : id,
+        inputIdType: typeof id,
+      });
+
       let whereClauses: string[] = [];
       let params: any[] = [];
 
@@ -1216,17 +1223,31 @@ class DataService {
         params.push(typeof id === "object" ? id[pkColumn] : id);
       }
 
-      const queryText = `DELETE FROM "${tableName}" WHERE ${whereClauses.join(" AND ")}`;
+      const queryText = `DELETE FROM "${tableName}" WHERE ${whereClauses.join(" AND ")} RETURNING *`;
       console.log(`🗑️ 삭제 쿼리:`, queryText, params);
 
       const result = await query<any>(queryText, params);
 
+      // 삭제된 행이 없으면 실패 처리
+      if (result.length === 0) {
+        console.warn(
+          `⚠️ 레코드 삭제 실패: ${tableName}, 해당 조건에 맞는 레코드가 없습니다.`,
+          { whereClauses, params }
+        );
+        return {
+          success: false,
+          message: "삭제할 레코드를 찾을 수 없습니다. 이미 삭제되었거나 권한이 없습니다.",
+          error: "RECORD_NOT_FOUND",
+        };
+      }
+
       console.log(
         `✅ 레코드 삭제 완료: ${tableName}, 영향받은 행: ${result.length}`
       );
 
       return {
         success: true,
+        data: result[0], // 삭제된 레코드 정보 반환
       };
     } catch (error) {
       console.error(`레코드 삭제 오류 (${tableName}):`, error);
@@ -1240,10 +1261,14 @@ class DataService {
 
   /**
    * 조건에 맞는 모든 레코드 삭제 (그룹 삭제)
+   * @param tableName 테이블명
+   * @param filterConditions 삭제 조건
+   * @param userCompany 사용자 회사 코드 (멀티테넌시 필터링)
    */
   async deleteGroupRecords(
     tableName: string,
-    filterConditions: Record<string, any>
+    filterConditions: Record<string, any>,
+    userCompany?: string
   ): Promise<ServiceResponse<{ deleted: number }>> {
     try {
       const validation = await this.validateTableAccess(tableName);
@@ -1255,6 +1280,7 @@ class DataService {
       const whereValues: any[] = [];
       let paramIndex = 1;
 
+      // 사용자 필터 조건 추가
       for (const [key, value] of Object.entries(filterConditions)) {
         whereConditions.push(`"${key}" = $${paramIndex}`);
         whereValues.push(value);
@@ -1269,10 +1295,24 @@ class DataService {
         };
       }
 
+      // 🔒 멀티테넌시: company_code 필터링 (최고 관리자 제외)
+      const hasCompanyCode = await this.checkColumnExists(tableName, "company_code");
+      if (hasCompanyCode && userCompany && userCompany !== "*") {
+        whereConditions.push(`"company_code" = $${paramIndex}`);
+        whereValues.push(userCompany);
+        paramIndex++;
+        console.log(`🔒 멀티테넌시 필터 적용: company_code = ${userCompany}`);
+      }
+
       const whereClause = whereConditions.join(" AND ");
       const deleteQuery = `DELETE FROM "${tableName}" WHERE ${whereClause} RETURNING *`;
 
-      console.log(`🗑️ 그룹 삭제:`, { tableName, conditions: filterConditions });
+      console.log(`🗑️ 그룹 삭제:`, { 
+        tableName, 
+        conditions: filterConditions,
+        userCompany,
+        whereClause,
+      });
 
       const result = await pool.query(deleteQuery, whereValues);
 
diff --git a/backend-node/src/services/dynamicFormService.ts b/backend-node/src/services/dynamicFormService.ts
index 68c30252..89d96859 100644
--- a/backend-node/src/services/dynamicFormService.ts
+++ b/backend-node/src/services/dynamicFormService.ts
@@ -1,6 +1,7 @@
 import { query, queryOne, transaction, getPool } from "../database/db";
 import { EventTriggerService } from "./eventTriggerService";
 import { DataflowControlService } from "./dataflowControlService";
+import tableCategoryValueService from "./tableCategoryValueService";
 
 export interface FormDataResult {
   id: number;
@@ -427,6 +428,24 @@ export class DynamicFormService {
         dataToInsert,
       });
 
+      // 카테고리 타입 컬럼의 라벨 값을 코드 값으로 변환 (엑셀 업로드 등 지원)
+      console.log("🏷️ 카테고리 라벨→코드 변환 시작...");
+      const companyCodeForCategory = company_code || "*";
+      const { convertedData: categoryConvertedData, conversions } = 
+        await tableCategoryValueService.convertCategoryLabelsToCodesForData(
+          tableName,
+          companyCodeForCategory,
+          dataToInsert
+        );
+      
+      if (conversions.length > 0) {
+        console.log(`🏷️ 카테고리 라벨→코드 변환 완료: ${conversions.length}개`, conversions);
+        // 변환된 데이터로 교체
+        Object.assign(dataToInsert, categoryConvertedData);
+      } else {
+        console.log("🏷️ 카테고리 라벨→코드 변환 없음 (카테고리 컬럼 없거나 이미 코드 값)");
+      }
+
       // 테이블 컬럼 정보 조회하여 타입 변환 적용
       console.log("🔍 테이블 컬럼 정보 조회 중...");
       const columnInfo = await this.getTableColumnInfo(tableName);
@@ -1173,12 +1192,18 @@ export class DynamicFormService {
 
   /**
    * 폼 데이터 삭제 (실제 테이블에서 직접 삭제)
+   * @param id 삭제할 레코드 ID
+   * @param tableName 테이블명
+   * @param companyCode 회사 코드
+   * @param userId 사용자 ID
+   * @param screenId 화면 ID (제어관리 실행용, 선택사항)
    */
   async deleteFormData(
     id: string | number,
     tableName: string,
     companyCode?: string,
-    userId?: string
+    userId?: string,
+    screenId?: number
   ): Promise<void> {
     try {
       console.log("🗑️ 서비스: 실제 테이블에서 폼 데이터 삭제 시작:", {
@@ -1291,14 +1316,19 @@ export class DynamicFormService {
           const recordCompanyCode =
             deletedRecord?.company_code || companyCode || "*";
 
-          await this.executeDataflowControlIfConfigured(
-            0, // DELETE는 screenId를 알 수 없으므로 0으로 설정 (추후 개선 필요)
-            tableName,
-            deletedRecord,
-            "delete",
-            userId || "system",
-            recordCompanyCode
-          );
+          // screenId가 전달되지 않으면 제어관리를 실행하지 않음
+          if (screenId && screenId > 0) {
+            await this.executeDataflowControlIfConfigured(
+              screenId,
+              tableName,
+              deletedRecord,
+              "delete",
+              userId || "system",
+              recordCompanyCode
+            );
+          } else {
+            console.log("ℹ️ screenId가 전달되지 않아 제어관리를 건너뜁니다. (screenId:", screenId, ")");
+          }
         }
       } catch (controlError) {
         console.error("⚠️ 제어관리 실행 오류:", controlError);
@@ -1643,10 +1673,16 @@ export class DynamicFormService {
             !!properties?.webTypeConfig?.dataflowConfig?.flowControls,
         });
 
-        // 버튼 컴포넌트이고 저장 액션이며 제어관리가 활성화된 경우
+        // 버튼 컴포넌트이고 제어관리가 활성화된 경우
+        // triggerType에 맞는 액션 타입 매칭: insert/update -> save, delete -> delete
+        const buttonActionType = properties?.componentConfig?.action?.type;
+        const isMatchingAction =
+          (triggerType === "delete" && buttonActionType === "delete") ||
+          ((triggerType === "insert" || triggerType === "update") && buttonActionType === "save");
+        
         if (
           properties?.componentType === "button-primary" &&
-          properties?.componentConfig?.action?.type === "save" &&
+          isMatchingAction &&
           properties?.webTypeConfig?.enableDataflowControl === true
         ) {
           const dataflowConfig = properties?.webTypeConfig?.dataflowConfig;
diff --git a/backend-node/src/services/excelMappingService.ts b/backend-node/src/services/excelMappingService.ts
new file mode 100644
index 00000000..a63a027b
--- /dev/null
+++ b/backend-node/src/services/excelMappingService.ts
@@ -0,0 +1,283 @@
+import { getPool } from "../database/db";
+import { logger } from "../utils/logger";
+import crypto from "crypto";
+
+export interface ExcelMappingTemplate {
+  id?: number;
+  tableName: string;
+  excelColumns: string[];
+  excelColumnsHash: string;
+  columnMappings: Record<string, string | null>; // { "엑셀컬럼": "시스템컬럼" }
+  companyCode: string;
+  createdDate?: Date;
+  updatedDate?: Date;
+}
+
+class ExcelMappingService {
+  /**
+   * 엑셀 컬럼 목록으로 해시 생성
+   * 정렬 후 MD5 해시 생성하여 동일한 컬럼 구조 식별
+   */
+  generateColumnsHash(columns: string[]): string {
+    // 컬럼 목록을 정렬하여 순서와 무관하게 동일한 해시 생성
+    const sortedColumns = [...columns].sort();
+    const columnsString = sortedColumns.join("|");
+    return crypto.createHash("md5").update(columnsString).digest("hex");
+  }
+
+  /**
+   * 엑셀 컬럼 구조로 매핑 템플릿 조회
+   * 동일한 컬럼 구조가 있으면 기존 매핑 반환
+   */
+  async findMappingByColumns(
+    tableName: string,
+    excelColumns: string[],
+    companyCode: string
+  ): Promise<ExcelMappingTemplate | null> {
+    try {
+      const hash = this.generateColumnsHash(excelColumns);
+
+      logger.info("엑셀 매핑 템플릿 조회", {
+        tableName,
+        excelColumns,
+        hash,
+        companyCode,
+      });
+
+      const pool = getPool();
+
+      // 회사별 매핑 먼저 조회, 없으면 공통(*) 매핑 조회
+      let query: string;
+      let params: any[];
+
+      if (companyCode === "*") {
+        query = `
+          SELECT 
+            id,
+            table_name as "tableName",
+            excel_columns as "excelColumns",
+            excel_columns_hash as "excelColumnsHash",
+            column_mappings as "columnMappings",
+            company_code as "companyCode",
+            created_date as "createdDate",
+            updated_date as "updatedDate"
+          FROM excel_mapping_template
+          WHERE table_name = $1
+            AND excel_columns_hash = $2
+          ORDER BY updated_date DESC
+          LIMIT 1
+        `;
+        params = [tableName, hash];
+      } else {
+        query = `
+          SELECT 
+            id,
+            table_name as "tableName",
+            excel_columns as "excelColumns",
+            excel_columns_hash as "excelColumnsHash",
+            column_mappings as "columnMappings",
+            company_code as "companyCode",
+            created_date as "createdDate",
+            updated_date as "updatedDate"
+          FROM excel_mapping_template
+          WHERE table_name = $1
+            AND excel_columns_hash = $2
+            AND (company_code = $3 OR company_code = '*')
+          ORDER BY 
+            CASE WHEN company_code = $3 THEN 0 ELSE 1 END,
+            updated_date DESC
+          LIMIT 1
+        `;
+        params = [tableName, hash, companyCode];
+      }
+
+      const result = await pool.query(query, params);
+
+      if (result.rows.length > 0) {
+        logger.info("기존 매핑 템플릿 발견", {
+          id: result.rows[0].id,
+          tableName,
+        });
+        return result.rows[0];
+      }
+
+      logger.info("매핑 템플릿 없음 - 새 구조", { tableName, hash });
+      return null;
+    } catch (error: any) {
+      logger.error(`매핑 템플릿 조회 실패: ${error.message}`, { error });
+      throw error;
+    }
+  }
+
+  /**
+   * 매핑 템플릿 저장 (UPSERT)
+   * 동일한 테이블+컬럼구조+회사코드가 있으면 업데이트, 없으면 삽입
+   */
+  async saveMappingTemplate(
+    tableName: string,
+    excelColumns: string[],
+    columnMappings: Record<string, string | null>,
+    companyCode: string,
+    userId?: string
+  ): Promise<ExcelMappingTemplate> {
+    try {
+      const hash = this.generateColumnsHash(excelColumns);
+
+      logger.info("엑셀 매핑 템플릿 저장 (UPSERT)", {
+        tableName,
+        excelColumns,
+        hash,
+        columnMappings,
+        companyCode,
+      });
+
+      const pool = getPool();
+
+      const query = `
+        INSERT INTO excel_mapping_template (
+          table_name,
+          excel_columns,
+          excel_columns_hash,
+          column_mappings,
+          company_code,
+          created_date,
+          updated_date
+        ) VALUES ($1, $2, $3, $4, $5, NOW(), NOW())
+        ON CONFLICT (table_name, excel_columns_hash, company_code)
+        DO UPDATE SET
+          column_mappings = EXCLUDED.column_mappings,
+          updated_date = NOW()
+        RETURNING 
+          id,
+          table_name as "tableName",
+          excel_columns as "excelColumns",
+          excel_columns_hash as "excelColumnsHash",
+          column_mappings as "columnMappings",
+          company_code as "companyCode",
+          created_date as "createdDate",
+          updated_date as "updatedDate"
+      `;
+
+      const result = await pool.query(query, [
+        tableName,
+        excelColumns,
+        hash,
+        JSON.stringify(columnMappings),
+        companyCode,
+      ]);
+
+      logger.info("매핑 템플릿 저장 완료", {
+        id: result.rows[0].id,
+        tableName,
+        hash,
+      });
+
+      return result.rows[0];
+    } catch (error: any) {
+      logger.error(`매핑 템플릿 저장 실패: ${error.message}`, { error });
+      throw error;
+    }
+  }
+
+  /**
+   * 테이블의 모든 매핑 템플릿 조회
+   */
+  async getMappingTemplates(
+    tableName: string,
+    companyCode: string
+  ): Promise<ExcelMappingTemplate[]> {
+    try {
+      logger.info("테이블 매핑 템플릿 목록 조회", { tableName, companyCode });
+
+      const pool = getPool();
+
+      let query: string;
+      let params: any[];
+
+      if (companyCode === "*") {
+        query = `
+          SELECT 
+            id,
+            table_name as "tableName",
+            excel_columns as "excelColumns",
+            excel_columns_hash as "excelColumnsHash",
+            column_mappings as "columnMappings",
+            company_code as "companyCode",
+            created_date as "createdDate",
+            updated_date as "updatedDate"
+          FROM excel_mapping_template
+          WHERE table_name = $1
+          ORDER BY updated_date DESC
+        `;
+        params = [tableName];
+      } else {
+        query = `
+          SELECT 
+            id,
+            table_name as "tableName",
+            excel_columns as "excelColumns",
+            excel_columns_hash as "excelColumnsHash",
+            column_mappings as "columnMappings",
+            company_code as "companyCode",
+            created_date as "createdDate",
+            updated_date as "updatedDate"
+          FROM excel_mapping_template
+          WHERE table_name = $1
+            AND (company_code = $2 OR company_code = '*')
+          ORDER BY updated_date DESC
+        `;
+        params = [tableName, companyCode];
+      }
+
+      const result = await pool.query(query, params);
+
+      logger.info(`매핑 템플릿 ${result.rows.length}개 조회`, { tableName });
+
+      return result.rows;
+    } catch (error: any) {
+      logger.error(`매핑 템플릿 목록 조회 실패: ${error.message}`, { error });
+      throw error;
+    }
+  }
+
+  /**
+   * 매핑 템플릿 삭제
+   */
+  async deleteMappingTemplate(
+    id: number,
+    companyCode: string
+  ): Promise<boolean> {
+    try {
+      logger.info("매핑 템플릿 삭제", { id, companyCode });
+
+      const pool = getPool();
+
+      let query: string;
+      let params: any[];
+
+      if (companyCode === "*") {
+        query = `DELETE FROM excel_mapping_template WHERE id = $1`;
+        params = [id];
+      } else {
+        query = `DELETE FROM excel_mapping_template WHERE id = $1 AND company_code = $2`;
+        params = [id, companyCode];
+      }
+
+      const result = await pool.query(query, params);
+
+      if (result.rowCount && result.rowCount > 0) {
+        logger.info("매핑 템플릿 삭제 완료", { id });
+        return true;
+      }
+
+      logger.warn("삭제할 매핑 템플릿 없음", { id, companyCode });
+      return false;
+    } catch (error: any) {
+      logger.error(`매핑 템플릿 삭제 실패: ${error.message}`, { error });
+      throw error;
+    }
+  }
+}
+
+export default new ExcelMappingService();
+
diff --git a/backend-node/src/services/masterDetailExcelService.ts b/backend-node/src/services/masterDetailExcelService.ts
new file mode 100644
index 00000000..44cc42b1
--- /dev/null
+++ b/backend-node/src/services/masterDetailExcelService.ts
@@ -0,0 +1,908 @@
+/**
+ * 마스터-디테일 엑셀 처리 서비스
+ * 
+ * 분할 패널 화면의 마스터-디테일 구조를 자동 감지하고
+ * 엑셀 다운로드/업로드 시 JOIN 및 그룹화 처리를 수행합니다.
+ */
+
+import { query, queryOne, transaction, getPool } from "../database/db";
+import { logger } from "../utils/logger";
+
+// ================================
+// 인터페이스 정의
+// ================================
+
+/**
+ * 마스터-디테일 관계 정보
+ */
+export interface MasterDetailRelation {
+  masterTable: string;
+  detailTable: string;
+  masterKeyColumn: string;  // 마스터 테이블의 키 컬럼 (예: order_no)
+  detailFkColumn: string;   // 디테일 테이블의 FK 컬럼 (예: order_no)
+  masterColumns: ColumnInfo[];
+  detailColumns: ColumnInfo[];
+}
+
+/**
+ * 컬럼 정보
+ */
+export interface ColumnInfo {
+  name: string;
+  label: string;
+  inputType: string;
+  isFromMaster: boolean;
+}
+
+/**
+ * 분할 패널 설정
+ */
+export interface SplitPanelConfig {
+  leftPanel: {
+    tableName: string;
+    columns: Array<{ name: string; label: string; width?: number }>;
+  };
+  rightPanel: {
+    tableName: string;
+    columns: Array<{ name: string; label: string; width?: number }>;
+    relation?: {
+      type: string;
+      foreignKey?: string;
+      leftColumn?: string;
+      // 복합키 지원 (새로운 방식)
+      keys?: Array<{
+        leftColumn: string;
+        rightColumn: string;
+      }>;
+    };
+  };
+}
+
+/**
+ * 엑셀 다운로드 결과
+ */
+export interface ExcelDownloadData {
+  headers: string[];       // 컬럼 라벨들
+  columns: string[];       // 컬럼명들
+  data: Record<string, any>[];
+  masterColumns: string[]; // 마스터 컬럼 목록
+  detailColumns: string[]; // 디테일 컬럼 목록
+  joinKey: string;         // 조인 키
+}
+
+/**
+ * 엑셀 업로드 결과
+ */
+export interface ExcelUploadResult {
+  success: boolean;
+  masterInserted: number;
+  masterUpdated: number;
+  detailInserted: number;
+  detailDeleted: number;
+  errors: string[];
+}
+
+// ================================
+// 서비스 클래스
+// ================================
+
+class MasterDetailExcelService {
+  
+  /**
+   * 화면 ID로 분할 패널 설정 조회
+   */
+  async getSplitPanelConfig(screenId: number): Promise<SplitPanelConfig | null> {
+    try {
+      logger.info(`분할 패널 설정 조회: screenId=${screenId}`);
+
+      // screen_layouts에서 split-panel-layout 컴포넌트 찾기
+      const result = await queryOne<any>(
+        `SELECT properties->>'componentConfig' as config
+         FROM screen_layouts
+         WHERE screen_id = $1
+           AND component_type = 'component'
+           AND properties->>'componentType' = 'split-panel-layout'
+         LIMIT 1`,
+        [screenId]
+      );
+
+      if (!result || !result.config) {
+        logger.info(`분할 패널 없음: screenId=${screenId}`);
+        return null;
+      }
+
+      const config = typeof result.config === "string" 
+        ? JSON.parse(result.config) 
+        : result.config;
+
+      logger.info(`분할 패널 설정 발견:`, {
+        leftTable: config.leftPanel?.tableName,
+        rightTable: config.rightPanel?.tableName,
+        relation: config.rightPanel?.relation,
+      });
+
+      return {
+        leftPanel: config.leftPanel,
+        rightPanel: config.rightPanel,
+      };
+    } catch (error: any) {
+      logger.error(`분할 패널 설정 조회 실패: ${error.message}`);
+      return null;
+    }
+  }
+
+  /**
+   * column_labels에서 Entity 관계 정보 조회
+   * 디테일 테이블에서 마스터 테이블을 참조하는 컬럼 찾기
+   */
+  async getEntityRelation(
+    detailTable: string,
+    masterTable: string
+  ): Promise<{ detailFkColumn: string; masterKeyColumn: string } | null> {
+    try {
+      logger.info(`Entity 관계 조회: ${detailTable} -> ${masterTable}`);
+
+      const result = await queryOne<any>(
+        `SELECT column_name, reference_column
+         FROM column_labels
+         WHERE table_name = $1
+           AND input_type = 'entity'
+           AND reference_table = $2
+         LIMIT 1`,
+        [detailTable, masterTable]
+      );
+
+      if (!result) {
+        logger.warn(`Entity 관계 없음: ${detailTable} -> ${masterTable}`);
+        return null;
+      }
+
+      logger.info(`Entity 관계 발견: ${detailTable}.${result.column_name} -> ${masterTable}.${result.reference_column}`);
+
+      return {
+        detailFkColumn: result.column_name,
+        masterKeyColumn: result.reference_column,
+      };
+    } catch (error: any) {
+      logger.error(`Entity 관계 조회 실패: ${error.message}`);
+      return null;
+    }
+  }
+
+  /**
+   * 테이블의 컬럼 라벨 정보 조회
+   */
+  async getColumnLabels(tableName: string): Promise<Map<string, string>> {
+    try {
+      const result = await query<any>(
+        `SELECT column_name, column_label
+         FROM column_labels
+         WHERE table_name = $1`,
+        [tableName]
+      );
+
+      const labelMap = new Map<string, string>();
+      for (const row of result) {
+        labelMap.set(row.column_name, row.column_label || row.column_name);
+      }
+
+      return labelMap;
+    } catch (error: any) {
+      logger.error(`컬럼 라벨 조회 실패: ${error.message}`);
+      return new Map();
+    }
+  }
+
+  /**
+   * 마스터-디테일 관계 정보 조합
+   */
+  async getMasterDetailRelation(
+    screenId: number
+  ): Promise<MasterDetailRelation | null> {
+    try {
+      // 1. 분할 패널 설정 조회
+      const splitPanel = await this.getSplitPanelConfig(screenId);
+      if (!splitPanel) {
+        return null;
+      }
+
+      const masterTable = splitPanel.leftPanel.tableName;
+      const detailTable = splitPanel.rightPanel.tableName;
+
+      if (!masterTable || !detailTable) {
+        logger.warn("마스터 또는 디테일 테이블명 없음");
+        return null;
+      }
+
+      // 2. 분할 패널의 relation 정보가 있으면 우선 사용
+      // 🔥 keys 배열을 우선 사용 (새로운 복합키 지원 방식)
+      let masterKeyColumn: string | undefined;
+      let detailFkColumn: string | undefined;
+      
+      const relationKeys = splitPanel.rightPanel.relation?.keys;
+      if (relationKeys && relationKeys.length > 0) {
+        // keys 배열에서 첫 번째 키 사용
+        masterKeyColumn = relationKeys[0].leftColumn;
+        detailFkColumn = relationKeys[0].rightColumn;
+        logger.info(`keys 배열에서 관계 정보 사용: ${masterKeyColumn} -> ${detailFkColumn}`);
+      } else {
+        // 하위 호환성: 기존 leftColumn/foreignKey 사용
+        masterKeyColumn = splitPanel.rightPanel.relation?.leftColumn;
+        detailFkColumn = splitPanel.rightPanel.relation?.foreignKey;
+      }
+
+      // 3. relation 정보가 없으면 column_labels에서 Entity 관계 조회
+      if (!masterKeyColumn || !detailFkColumn) {
+        const entityRelation = await this.getEntityRelation(detailTable, masterTable);
+        if (entityRelation) {
+          masterKeyColumn = entityRelation.masterKeyColumn;
+          detailFkColumn = entityRelation.detailFkColumn;
+        }
+      }
+
+      if (!masterKeyColumn || !detailFkColumn) {
+        logger.warn("조인 키 정보를 찾을 수 없음");
+        return null;
+      }
+
+      // 4. 컬럼 라벨 정보 조회
+      const masterLabels = await this.getColumnLabels(masterTable);
+      const detailLabels = await this.getColumnLabels(detailTable);
+
+      // 5. 마스터 컬럼 정보 구성
+      const masterColumns: ColumnInfo[] = splitPanel.leftPanel.columns.map(col => ({
+        name: col.name,
+        label: masterLabels.get(col.name) || col.label || col.name,
+        inputType: "text",
+        isFromMaster: true,
+      }));
+
+      // 6. 디테일 컬럼 정보 구성 (FK 컬럼 제외)
+      const detailColumns: ColumnInfo[] = splitPanel.rightPanel.columns
+        .filter(col => col.name !== detailFkColumn) // FK 컬럼 제외
+        .map(col => ({
+          name: col.name,
+          label: detailLabels.get(col.name) || col.label || col.name,
+          inputType: "text",
+          isFromMaster: false,
+        }));
+
+      logger.info(`마스터-디테일 관계 구성 완료:`, {
+        masterTable,
+        detailTable,
+        masterKeyColumn,
+        detailFkColumn,
+        masterColumnCount: masterColumns.length,
+        detailColumnCount: detailColumns.length,
+      });
+
+      return {
+        masterTable,
+        detailTable,
+        masterKeyColumn,
+        detailFkColumn,
+        masterColumns,
+        detailColumns,
+      };
+    } catch (error: any) {
+      logger.error(`마스터-디테일 관계 조회 실패: ${error.message}`);
+      return null;
+    }
+  }
+
+  /**
+   * 마스터-디테일 JOIN 데이터 조회 (엑셀 다운로드용)
+   */
+  async getJoinedData(
+    relation: MasterDetailRelation,
+    companyCode: string,
+    filters?: Record<string, any>
+  ): Promise<ExcelDownloadData> {
+    try {
+      const { masterTable, detailTable, masterKeyColumn, detailFkColumn, masterColumns, detailColumns } = relation;
+
+      // 조인 컬럼과 일반 컬럼 분리
+      // 조인 컬럼 형식: "테이블명.컬럼명" (예: customer_mng.customer_name)
+      const entityJoins: Array<{
+        refTable: string;
+        refColumn: string;
+        sourceColumn: string;
+        alias: string;
+        displayColumn: string;
+      }> = [];
+
+      // SELECT 절 구성
+      const selectParts: string[] = [];
+      let aliasIndex = 0;
+
+      // 마스터 컬럼 처리
+      for (const col of masterColumns) {
+        if (col.name.includes(".")) {
+          // 조인 컬럼: 테이블명.컬럼명
+          const [refTable, displayColumn] = col.name.split(".");
+          const alias = `ej${aliasIndex++}`;
+          
+          // column_labels에서 FK 컬럼 찾기
+          const fkColumn = await this.findForeignKeyColumn(masterTable, refTable);
+          if (fkColumn) {
+            entityJoins.push({
+              refTable,
+              refColumn: fkColumn.referenceColumn,
+              sourceColumn: fkColumn.sourceColumn,
+              alias,
+              displayColumn,
+            });
+            selectParts.push(`${alias}."${displayColumn}" AS "${col.name}"`);
+          } else {
+            // FK를 못 찾으면 NULL로 처리
+            selectParts.push(`NULL AS "${col.name}"`);
+          }
+        } else {
+          // 일반 컬럼
+          selectParts.push(`m."${col.name}"`);
+        }
+      }
+
+      // 디테일 컬럼 처리
+      for (const col of detailColumns) {
+        if (col.name.includes(".")) {
+          // 조인 컬럼: 테이블명.컬럼명
+          const [refTable, displayColumn] = col.name.split(".");
+          const alias = `ej${aliasIndex++}`;
+          
+          // column_labels에서 FK 컬럼 찾기
+          const fkColumn = await this.findForeignKeyColumn(detailTable, refTable);
+          if (fkColumn) {
+            entityJoins.push({
+              refTable,
+              refColumn: fkColumn.referenceColumn,
+              sourceColumn: fkColumn.sourceColumn,
+              alias,
+              displayColumn,
+            });
+            selectParts.push(`${alias}."${displayColumn}" AS "${col.name}"`);
+          } else {
+            selectParts.push(`NULL AS "${col.name}"`);
+          }
+        } else {
+          // 일반 컬럼
+          selectParts.push(`d."${col.name}"`);
+        }
+      }
+
+      const selectClause = selectParts.join(", ");
+
+      // 엔티티 조인 절 구성
+      const entityJoinClauses = entityJoins.map(ej => 
+        `LEFT JOIN "${ej.refTable}" ${ej.alias} ON m."${ej.sourceColumn}" = ${ej.alias}."${ej.refColumn}"`
+      ).join("\n        ");
+
+      // WHERE 절 구성
+      const whereConditions: string[] = [];
+      const params: any[] = [];
+      let paramIndex = 1;
+
+      // 회사 코드 필터 (최고 관리자 제외)
+      if (companyCode && companyCode !== "*") {
+        whereConditions.push(`m.company_code = $${paramIndex}`);
+        params.push(companyCode);
+        paramIndex++;
+      }
+
+      // 추가 필터 적용
+      if (filters) {
+        for (const [key, value] of Object.entries(filters)) {
+          if (value !== undefined && value !== null && value !== "") {
+            // 조인 컬럼인지 확인
+            if (key.includes(".")) continue;
+            // 마스터 테이블 컬럼인지 확인
+            const isMasterCol = masterColumns.some(c => c.name === key);
+            const tableAlias = isMasterCol ? "m" : "d";
+            whereConditions.push(`${tableAlias}."${key}" = $${paramIndex}`);
+            params.push(value);
+            paramIndex++;
+          }
+        }
+      }
+
+      const whereClause = whereConditions.length > 0 
+        ? `WHERE ${whereConditions.join(" AND ")}` 
+        : "";
+
+      // JOIN 쿼리 실행
+      const sql = `
+        SELECT ${selectClause}
+        FROM "${masterTable}" m
+        LEFT JOIN "${detailTable}" d 
+          ON m."${masterKeyColumn}" = d."${detailFkColumn}"
+          AND m.company_code = d.company_code
+        ${entityJoinClauses}
+        ${whereClause}
+        ORDER BY m."${masterKeyColumn}", d.id
+      `;
+
+      logger.info(`마스터-디테일 JOIN 쿼리:`, { sql, params });
+
+      const data = await query<any>(sql, params);
+
+      // 헤더 및 컬럼 정보 구성
+      const headers = [...masterColumns.map(c => c.label), ...detailColumns.map(c => c.label)];
+      const columns = [...masterColumns.map(c => c.name), ...detailColumns.map(c => c.name)];
+
+      logger.info(`마스터-디테일 데이터 조회 완료: ${data.length}행`);
+
+      return {
+        headers,
+        columns,
+        data,
+        masterColumns: masterColumns.map(c => c.name),
+        detailColumns: detailColumns.map(c => c.name),
+        joinKey: masterKeyColumn,
+      };
+    } catch (error: any) {
+      logger.error(`마스터-디테일 데이터 조회 실패: ${error.message}`);
+      throw error;
+    }
+  }
+
+  /**
+   * 특정 테이블에서 참조 테이블로의 FK 컬럼 찾기
+   */
+  private async findForeignKeyColumn(
+    sourceTable: string,
+    referenceTable: string
+  ): Promise<{ sourceColumn: string; referenceColumn: string } | null> {
+    try {
+      const result = await query<{ column_name: string; reference_column: string }>(
+        `SELECT column_name, reference_column 
+         FROM column_labels 
+         WHERE table_name = $1 
+         AND reference_table = $2 
+         AND input_type = 'entity'
+         LIMIT 1`,
+        [sourceTable, referenceTable]
+      );
+
+      if (result.length > 0) {
+        return {
+          sourceColumn: result[0].column_name,
+          referenceColumn: result[0].reference_column,
+        };
+      }
+      return null;
+    } catch (error) {
+      logger.error(`FK 컬럼 조회 실패: ${sourceTable} -> ${referenceTable}`, error);
+      return null;
+    }
+  }
+
+  /**
+   * 마스터-디테일 데이터 업로드 (엑셀 업로드용)
+   * 
+   * 처리 로직:
+   * 1. 엑셀 데이터를 마스터 키로 그룹화
+   * 2. 각 그룹의 첫 번째 행에서 마스터 데이터 추출 → UPSERT
+   * 3. 해당 마스터 키의 기존 디테일 삭제
+   * 4. 새 디테일 데이터 INSERT
+   */
+  async uploadJoinedData(
+    relation: MasterDetailRelation,
+    data: Record<string, any>[],
+    companyCode: string,
+    userId?: string
+  ): Promise<ExcelUploadResult> {
+    const result: ExcelUploadResult = {
+      success: false,
+      masterInserted: 0,
+      masterUpdated: 0,
+      detailInserted: 0,
+      detailDeleted: 0,
+      errors: [],
+    };
+
+    const pool = getPool();
+    const client = await pool.connect();
+
+    try {
+      await client.query("BEGIN");
+
+      const { masterTable, detailTable, masterKeyColumn, detailFkColumn, masterColumns, detailColumns } = relation;
+
+      // 1. 데이터를 마스터 키로 그룹화
+      const groupedData = new Map<string, Record<string, any>[]>();
+      
+      for (const row of data) {
+        const masterKey = row[masterKeyColumn];
+        if (!masterKey) {
+          result.errors.push(`마스터 키(${masterKeyColumn}) 값이 없는 행이 있습니다.`);
+          continue;
+        }
+
+        if (!groupedData.has(masterKey)) {
+          groupedData.set(masterKey, []);
+        }
+        groupedData.get(masterKey)!.push(row);
+      }
+
+      logger.info(`데이터 그룹화 완료: ${groupedData.size}개 마스터 그룹`);
+
+      // 2. 각 그룹 처리
+      for (const [masterKey, rows] of groupedData.entries()) {
+        try {
+          // 2a. 마스터 데이터 추출 (첫 번째 행에서)
+          const masterData: Record<string, any> = {};
+          for (const col of masterColumns) {
+            if (rows[0][col.name] !== undefined) {
+              masterData[col.name] = rows[0][col.name];
+            }
+          }
+
+          // 회사 코드, 작성자 추가
+          masterData.company_code = companyCode;
+          if (userId) {
+            masterData.writer = userId;
+          }
+
+          // 2b. 마스터 UPSERT
+          const existingMaster = await client.query(
+            `SELECT id FROM "${masterTable}" WHERE "${masterKeyColumn}" = $1 AND company_code = $2`,
+            [masterKey, companyCode]
+          );
+
+          if (existingMaster.rows.length > 0) {
+            // UPDATE
+            const updateCols = Object.keys(masterData)
+              .filter(k => k !== masterKeyColumn && k !== "id")
+              .map((k, i) => `"${k}" = $${i + 1}`);
+            const updateValues = Object.keys(masterData)
+              .filter(k => k !== masterKeyColumn && k !== "id")
+              .map(k => masterData[k]);
+            
+            if (updateCols.length > 0) {
+              await client.query(
+                `UPDATE "${masterTable}" 
+                 SET ${updateCols.join(", ")}, updated_date = NOW()
+                 WHERE "${masterKeyColumn}" = $${updateValues.length + 1} AND company_code = $${updateValues.length + 2}`,
+                [...updateValues, masterKey, companyCode]
+              );
+            }
+            result.masterUpdated++;
+          } else {
+            // INSERT
+            const insertCols = Object.keys(masterData);
+            const insertPlaceholders = insertCols.map((_, i) => `$${i + 1}`);
+            const insertValues = insertCols.map(k => masterData[k]);
+
+            await client.query(
+              `INSERT INTO "${masterTable}" (${insertCols.map(c => `"${c}"`).join(", ")}, created_date)
+               VALUES (${insertPlaceholders.join(", ")}, NOW())`,
+              insertValues
+            );
+            result.masterInserted++;
+          }
+
+          // 2c. 기존 디테일 삭제
+          const deleteResult = await client.query(
+            `DELETE FROM "${detailTable}" WHERE "${detailFkColumn}" = $1 AND company_code = $2`,
+            [masterKey, companyCode]
+          );
+          result.detailDeleted += deleteResult.rowCount || 0;
+
+          // 2d. 새 디테일 INSERT
+          for (const row of rows) {
+            const detailData: Record<string, any> = {};
+            
+            // FK 컬럼 추가
+            detailData[detailFkColumn] = masterKey;
+            detailData.company_code = companyCode;
+            if (userId) {
+              detailData.writer = userId;
+            }
+
+            // 디테일 컬럼 데이터 추출
+            for (const col of detailColumns) {
+              if (row[col.name] !== undefined) {
+                detailData[col.name] = row[col.name];
+              }
+            }
+
+            const insertCols = Object.keys(detailData);
+            const insertPlaceholders = insertCols.map((_, i) => `$${i + 1}`);
+            const insertValues = insertCols.map(k => detailData[k]);
+
+            await client.query(
+              `INSERT INTO "${detailTable}" (${insertCols.map(c => `"${c}"`).join(", ")}, created_date)
+               VALUES (${insertPlaceholders.join(", ")}, NOW())`,
+              insertValues
+            );
+            result.detailInserted++;
+          }
+        } catch (error: any) {
+          result.errors.push(`마스터 키 ${masterKey} 처리 실패: ${error.message}`);
+          logger.error(`마스터 키 ${masterKey} 처리 실패:`, error);
+        }
+      }
+
+      await client.query("COMMIT");
+      result.success = result.errors.length === 0 || result.masterInserted + result.masterUpdated > 0;
+
+      logger.info(`마스터-디테일 업로드 완료:`, {
+        masterInserted: result.masterInserted,
+        masterUpdated: result.masterUpdated,
+        detailInserted: result.detailInserted,
+        detailDeleted: result.detailDeleted,
+        errors: result.errors.length,
+      });
+
+    } catch (error: any) {
+      await client.query("ROLLBACK");
+      result.errors.push(`트랜잭션 실패: ${error.message}`);
+      logger.error(`마스터-디테일 업로드 트랜잭션 실패:`, error);
+    } finally {
+      client.release();
+    }
+
+    return result;
+  }
+
+  /**
+   * 마스터-디테일 간단 모드 업로드
+   * 
+   * 마스터 정보는 UI에서 선택하고, 엑셀은 디테일 데이터만 포함
+   * 채번 규칙을 통해 마스터 키 자동 생성
+   * 
+   * @param screenId 화면 ID
+   * @param detailData 디테일 데이터 배열
+   * @param masterFieldValues UI에서 선택한 마스터 필드 값
+   * @param numberingRuleId 채번 규칙 ID (optional)
+   * @param companyCode 회사 코드
+   * @param userId 사용자 ID
+   * @param afterUploadFlowId 업로드 후 실행할 노드 플로우 ID (optional, 하위 호환성)
+   * @param afterUploadFlows 업로드 후 실행할 노드 플로우 배열 (optional)
+   */
+  async uploadSimple(
+    screenId: number,
+    detailData: Record<string, any>[],
+    masterFieldValues: Record<string, any>,
+    numberingRuleId: string | undefined,
+    companyCode: string,
+    userId: string,
+    afterUploadFlowId?: string,
+    afterUploadFlows?: Array<{ flowId: string; order: number }>
+  ): Promise<{
+    success: boolean;
+    masterInserted: number;
+    detailInserted: number;
+    generatedKey: string;
+    errors: string[];
+    controlResult?: any;
+  }> {
+    const result: {
+      success: boolean;
+      masterInserted: number;
+      detailInserted: number;
+      generatedKey: string;
+      errors: string[];
+      controlResult?: any;
+    } = {
+      success: false,
+      masterInserted: 0,
+      detailInserted: 0,
+      generatedKey: "",
+      errors: [] as string[],
+    };
+
+    const pool = getPool();
+    const client = await pool.connect();
+
+    try {
+      await client.query("BEGIN");
+
+      // 1. 마스터-디테일 관계 정보 조회
+      const relation = await this.getMasterDetailRelation(screenId);
+      if (!relation) {
+        throw new Error("마스터-디테일 관계 정보를 찾을 수 없습니다.");
+      }
+
+      const { masterTable, detailTable, masterKeyColumn, detailFkColumn } = relation;
+
+      // 2. 채번 처리
+      let generatedKey: string;
+
+      if (numberingRuleId) {
+        // 채번 규칙으로 키 생성
+        generatedKey = await this.generateNumberWithRule(client, numberingRuleId, companyCode);
+      } else {
+        // 채번 규칙 없으면 마스터 필드에서 키 값 사용
+        generatedKey = masterFieldValues[masterKeyColumn];
+        if (!generatedKey) {
+          throw new Error(`마스터 키(${masterKeyColumn}) 값이 필요합니다.`);
+        }
+      }
+
+      result.generatedKey = generatedKey;
+      logger.info(`채번 결과: ${generatedKey}`);
+
+      // 3. 마스터 레코드 생성
+      const masterData: Record<string, any> = {
+        ...masterFieldValues,
+        [masterKeyColumn]: generatedKey,
+        company_code: companyCode,
+        writer: userId,
+      };
+
+      // 마스터 컬럼명 목록 구성
+      const masterCols = Object.keys(masterData).filter(k => masterData[k] !== undefined);
+      const masterPlaceholders = masterCols.map((_, i) => `$${i + 1}`);
+      const masterValues = masterCols.map(k => masterData[k]);
+
+      await client.query(
+        `INSERT INTO "${masterTable}" (${masterCols.map(c => `"${c}"`).join(", ")}, created_date)
+         VALUES (${masterPlaceholders.join(", ")}, NOW())`,
+        masterValues
+      );
+      result.masterInserted = 1;
+      logger.info(`마스터 레코드 생성: ${masterTable}, key=${generatedKey}`);
+
+      // 4. 디테일 레코드들 생성 (삽입된 데이터 수집)
+      const insertedDetailRows: Record<string, any>[] = [];
+      
+      for (const row of detailData) {
+        try {
+          const detailRowData: Record<string, any> = {
+            ...row,
+            [detailFkColumn]: generatedKey,
+            company_code: companyCode,
+            writer: userId,
+          };
+
+          // 빈 값 필터링 및 id 제외
+          const detailCols = Object.keys(detailRowData).filter(k => 
+            k !== "id" && 
+            detailRowData[k] !== undefined && 
+            detailRowData[k] !== null && 
+            detailRowData[k] !== ""
+          );
+          const detailPlaceholders = detailCols.map((_, i) => `$${i + 1}`);
+          const detailValues = detailCols.map(k => detailRowData[k]);
+
+          // RETURNING *로 삽입된 데이터 반환받기
+          const insertResult = await client.query(
+            `INSERT INTO "${detailTable}" (${detailCols.map(c => `"${c}"`).join(", ")}, created_date)
+             VALUES (${detailPlaceholders.join(", ")}, NOW())
+             RETURNING *`,
+            detailValues
+          );
+          
+          if (insertResult.rows && insertResult.rows[0]) {
+            insertedDetailRows.push(insertResult.rows[0]);
+          }
+          
+          result.detailInserted++;
+        } catch (error: any) {
+          result.errors.push(`디테일 행 처리 실패: ${error.message}`);
+          logger.error(`디테일 행 처리 실패:`, error);
+        }
+      }
+      
+      logger.info(`디테일 레코드 ${insertedDetailRows.length}건 삽입 완료`);
+
+      await client.query("COMMIT");
+      result.success = result.errors.length === 0 || result.detailInserted > 0;
+
+      logger.info(`마스터-디테일 간단 모드 업로드 완료:`, {
+        masterInserted: result.masterInserted,
+        detailInserted: result.detailInserted,
+        generatedKey: result.generatedKey,
+        errors: result.errors.length,
+      });
+
+      // 업로드 후 제어 실행 (단일 또는 다중)
+      const flowsToExecute = afterUploadFlows && afterUploadFlows.length > 0
+        ? afterUploadFlows // 다중 제어
+        : afterUploadFlowId 
+          ? [{ flowId: afterUploadFlowId, order: 1 }] // 단일 (하위 호환성)
+          : [];
+      
+      if (flowsToExecute.length > 0 && result.success) {
+        try {
+          const { NodeFlowExecutionService } = await import("./nodeFlowExecutionService");
+          
+          // 마스터 데이터 구성
+          const masterData = {
+            ...masterFieldValues,
+            [relation!.masterKeyColumn]: result.generatedKey,
+            company_code: companyCode,
+          };
+
+          const controlResults: any[] = [];
+          
+          // 순서대로 제어 실행
+          for (const flow of flowsToExecute.sort((a, b) => a.order - b.order)) {
+            logger.info(`업로드 후 제어 실행: flowId=${flow.flowId}, order=${flow.order}`);
+            logger.info(`   전달 데이터: 마스터 1건, 디테일 ${insertedDetailRows.length}건`);
+            
+            // 🆕 삽입된 디테일 데이터를 sourceData로 전달 (성능 최적화)
+            // - 전체 테이블 조회 대신 방금 INSERT한 데이터만 처리
+            // - tableSource 노드가 context-data 모드일 때 이 데이터를 사용
+            const controlResult = await NodeFlowExecutionService.executeFlow(
+              parseInt(flow.flowId),
+              {
+                sourceData: insertedDetailRows.length > 0 ? insertedDetailRows : [masterData],
+                dataSourceType: "excelUpload", // 엑셀 업로드 데이터임을 명시
+                buttonId: "excel-upload-button",
+                screenId: screenId,
+                userId: userId,
+                companyCode: companyCode,
+                formData: masterData,
+                // 추가 컨텍스트: 마스터/디테일 정보
+                masterData: masterData,
+                detailData: insertedDetailRows,
+                masterTable: relation!.masterTable,
+                detailTable: relation!.detailTable,
+                masterKeyColumn: relation!.masterKeyColumn,
+                detailFkColumn: relation!.detailFkColumn,
+              }
+            );
+            
+            controlResults.push({
+              flowId: flow.flowId,
+              order: flow.order,
+              success: controlResult.success,
+              message: controlResult.message,
+              executedNodes: controlResult.nodes?.length || 0,
+            });
+          }
+          
+          result.controlResult = {
+            success: controlResults.every(r => r.success),
+            executedFlows: controlResults.length,
+            results: controlResults,
+          };
+          
+          logger.info(`업로드 후 제어 실행 완료: ${controlResults.length}개 실행`, result.controlResult);
+        } catch (controlError: any) {
+          logger.error(`업로드 후 제어 실행 실패:`, controlError);
+          result.controlResult = {
+            success: false,
+            message: `제어 실행 실패: ${controlError.message}`,
+          };
+        }
+      }
+
+    } catch (error: any) {
+      await client.query("ROLLBACK");
+      result.errors.push(`트랜잭션 실패: ${error.message}`);
+      logger.error(`마스터-디테일 간단 모드 업로드 실패:`, error);
+    } finally {
+      client.release();
+    }
+
+    return result;
+  }
+
+  /**
+   * 채번 규칙으로 번호 생성 (기존 numberingRuleService 사용)
+   */
+  private async generateNumberWithRule(
+    client: any, 
+    ruleId: string, 
+    companyCode: string
+  ): Promise<string> {
+    try {
+      // 기존 numberingRuleService를 사용하여 코드 할당
+      const { numberingRuleService } = await import("./numberingRuleService");
+      const generatedCode = await numberingRuleService.allocateCode(ruleId, companyCode);
+      
+      logger.info(`채번 생성 (numberingRuleService): rule=${ruleId}, result=${generatedCode}`);
+      
+      return generatedCode;
+    } catch (error: any) {
+      logger.error(`채번 생성 실패: rule=${ruleId}, error=${error.message}`);
+      throw error;
+    }
+  }
+}
+
+export const masterDetailExcelService = new MasterDetailExcelService();
+
diff --git a/backend-node/src/services/multilangService.ts b/backend-node/src/services/multilangService.ts
index 090065a3..fc765d89 100644
--- a/backend-node/src/services/multilangService.ts
+++ b/backend-node/src/services/multilangService.ts
@@ -4,6 +4,7 @@ import {
   Language,
   LangKey,
   LangText,
+  LangCategory,
   CreateLanguageRequest,
   UpdateLanguageRequest,
   CreateLangKeyRequest,
@@ -12,12 +13,428 @@ import {
   GetLangKeysParams,
   GetUserTextParams,
   BatchTranslationRequest,
+  GenerateKeyRequest,
+  CreateOverrideKeyRequest,
   ApiResponse,
 } from "../types/multilang";
 
 export class MultiLangService {
   constructor() {}
 
+  // =====================================================
+  // 카테고리 관련 메서드
+  // =====================================================
+
+  /**
+   * 카테고리 목록 조회 (트리 구조)
+   */
+  async getCategories(): Promise<LangCategory[]> {
+    try {
+      logger.info("카테고리 목록 조회 시작");
+
+      const categories = await query<{
+        category_id: number;
+        category_code: string;
+        category_name: string;
+        parent_id: number | null;
+        level: number;
+        key_prefix: string;
+        description: string | null;
+        sort_order: number;
+        is_active: string;
+      }>(
+        `SELECT category_id, category_code, category_name, parent_id, 
+                level, key_prefix, description, sort_order, is_active
+         FROM multi_lang_category
+         WHERE is_active = 'Y'
+         ORDER BY level ASC, sort_order ASC, category_name ASC`
+      );
+
+      // 트리 구조로 변환
+      const categoryMap = new Map<number, LangCategory>();
+      const rootCategories: LangCategory[] = [];
+
+      // 모든 카테고리를 맵에 저장
+      categories.forEach((cat) => {
+        const category: LangCategory = {
+          categoryId: cat.category_id,
+          categoryCode: cat.category_code,
+          categoryName: cat.category_name,
+          parentId: cat.parent_id,
+          level: cat.level,
+          keyPrefix: cat.key_prefix,
+          description: cat.description || undefined,
+          sortOrder: cat.sort_order,
+          isActive: cat.is_active,
+          children: [],
+        };
+        categoryMap.set(cat.category_id, category);
+      });
+
+      // 부모-자식 관계 설정
+      categoryMap.forEach((category) => {
+        if (category.parentId && categoryMap.has(category.parentId)) {
+          const parent = categoryMap.get(category.parentId)!;
+          parent.children = parent.children || [];
+          parent.children.push(category);
+        } else if (!category.parentId) {
+          rootCategories.push(category);
+        }
+      });
+
+      logger.info(`카테고리 목록 조회 완료: ${categories.length}개`);
+      return rootCategories;
+    } catch (error) {
+      logger.error("카테고리 목록 조회 중 오류 발생:", error);
+      throw new Error(
+        `카테고리 목록 조회 실패: ${error instanceof Error ? error.message : "Unknown error"}`
+      );
+    }
+  }
+
+  /**
+   * 카테고리 단일 조회
+   */
+  async getCategoryById(categoryId: number): Promise<LangCategory | null> {
+    try {
+      const category = await queryOne<{
+        category_id: number;
+        category_code: string;
+        category_name: string;
+        parent_id: number | null;
+        level: number;
+        key_prefix: string;
+        description: string | null;
+        sort_order: number;
+        is_active: string;
+      }>(
+        `SELECT category_id, category_code, category_name, parent_id,
+                level, key_prefix, description, sort_order, is_active
+         FROM multi_lang_category
+         WHERE category_id = $1`,
+        [categoryId]
+      );
+
+      if (!category) {
+        return null;
+      }
+
+      return {
+        categoryId: category.category_id,
+        categoryCode: category.category_code,
+        categoryName: category.category_name,
+        parentId: category.parent_id,
+        level: category.level,
+        keyPrefix: category.key_prefix,
+        description: category.description || undefined,
+        sortOrder: category.sort_order,
+        isActive: category.is_active,
+      };
+    } catch (error) {
+      logger.error("카테고리 조회 중 오류 발생:", error);
+      throw new Error(
+        `카테고리 조회 실패: ${error instanceof Error ? error.message : "Unknown error"}`
+      );
+    }
+  }
+
+  /**
+   * 카테고리 경로 조회 (부모 포함)
+   */
+  async getCategoryPath(categoryId: number): Promise<LangCategory[]> {
+    try {
+      const categories = await query<{
+        category_id: number;
+        category_code: string;
+        category_name: string;
+        parent_id: number | null;
+        level: number;
+        key_prefix: string;
+        description: string | null;
+        sort_order: number;
+        is_active: string;
+      }>(
+        `WITH RECURSIVE category_path AS (
+           SELECT category_id, category_code, category_name, parent_id,
+                  level, key_prefix, description, sort_order, is_active
+           FROM multi_lang_category
+           WHERE category_id = $1
+           UNION ALL
+           SELECT c.category_id, c.category_code, c.category_name, c.parent_id,
+                  c.level, c.key_prefix, c.description, c.sort_order, c.is_active
+           FROM multi_lang_category c
+           INNER JOIN category_path cp ON c.category_id = cp.parent_id
+         )
+         SELECT * FROM category_path ORDER BY level ASC`,
+        [categoryId]
+      );
+
+      return categories.map((cat) => ({
+        categoryId: cat.category_id,
+        categoryCode: cat.category_code,
+        categoryName: cat.category_name,
+        parentId: cat.parent_id,
+        level: cat.level,
+        keyPrefix: cat.key_prefix,
+        description: cat.description || undefined,
+        sortOrder: cat.sort_order,
+        isActive: cat.is_active,
+      }));
+    } catch (error) {
+      logger.error("카테고리 경로 조회 중 오류 발생:", error);
+      throw new Error(
+        `카테고리 경로 조회 실패: ${error instanceof Error ? error.message : "Unknown error"}`
+      );
+    }
+  }
+
+  /**
+   * 키 자동 생성
+   */
+  async generateKey(params: GenerateKeyRequest): Promise<number> {
+    try {
+      logger.info("키 자동 생성 시작", { params });
+
+      // 카테고리 경로 조회
+      const categoryPath = await this.getCategoryPath(params.categoryId);
+      if (categoryPath.length === 0) {
+        throw new Error("존재하지 않는 카테고리입니다");
+      }
+
+      // lang_key 자동 생성 (prefix.meaning 형식)
+      const prefixes = categoryPath.map((c) => c.keyPrefix);
+      const langKey = [...prefixes, params.keyMeaning].join(".");
+
+      // 중복 체크
+      const existingKey = await queryOne<{ key_id: number }>(
+        `SELECT key_id FROM multi_lang_key_master 
+         WHERE company_code = $1 AND lang_key = $2`,
+        [params.companyCode, langKey]
+      );
+
+      if (existingKey) {
+        throw new Error(`이미 존재하는 키입니다: ${langKey}`);
+      }
+
+      // 트랜잭션으로 키와 텍스트 생성
+      let keyId: number = 0;
+
+      await transaction(async (client) => {
+        // 키 생성
+        const keyResult = await client.query(
+          `INSERT INTO multi_lang_key_master 
+           (company_code, lang_key, category_id, key_meaning, usage_note, description, is_active, created_by, updated_by)
+           VALUES ($1, $2, $3, $4, $5, $6, 'Y', $7, $7)
+           RETURNING key_id`,
+          [
+            params.companyCode,
+            langKey,
+            params.categoryId,
+            params.keyMeaning,
+            params.usageNote || null,
+            params.usageNote || null,
+            params.createdBy || "system",
+          ]
+        );
+
+        keyId = keyResult.rows[0].key_id;
+
+        // 텍스트 생성
+        for (const text of params.texts) {
+          await client.query(
+            `INSERT INTO multi_lang_text 
+             (key_id, lang_code, lang_text, is_active, created_by, updated_by)
+             VALUES ($1, $2, $3, 'Y', $4, $4)`,
+            [keyId, text.langCode, text.langText, params.createdBy || "system"]
+          );
+        }
+      });
+
+      logger.info("키 자동 생성 완료", { keyId, langKey });
+      return keyId;
+    } catch (error) {
+      logger.error("키 자동 생성 중 오류 발생:", error);
+      throw new Error(
+        `키 자동 생성 실패: ${error instanceof Error ? error.message : "Unknown error"}`
+      );
+    }
+  }
+
+  /**
+   * 회사별 오버라이드 키 생성
+   */
+  async createOverrideKey(params: CreateOverrideKeyRequest): Promise<number> {
+    try {
+      logger.info("오버라이드 키 생성 시작", { params });
+
+      // 원본 키 조회
+      const baseKey = await queryOne<{
+        key_id: number;
+        company_code: string;
+        lang_key: string;
+        category_id: number | null;
+        key_meaning: string | null;
+      }>(
+        `SELECT key_id, company_code, lang_key, category_id, key_meaning
+         FROM multi_lang_key_master WHERE key_id = $1`,
+        [params.baseKeyId]
+      );
+
+      if (!baseKey) {
+        throw new Error("원본 키를 찾을 수 없습니다");
+      }
+
+      // 공통 키(*)만 오버라이드 가능
+      if (baseKey.company_code !== "*") {
+        throw new Error("공통 키(*)만 오버라이드 할 수 있습니다");
+      }
+
+      // 이미 오버라이드 키가 있는지 확인
+      const existingOverride = await queryOne<{ key_id: number }>(
+        `SELECT key_id FROM multi_lang_key_master 
+         WHERE company_code = $1 AND lang_key = $2`,
+        [params.companyCode, baseKey.lang_key]
+      );
+
+      if (existingOverride) {
+        throw new Error("이미 해당 회사의 오버라이드 키가 존재합니다");
+      }
+
+      let keyId: number = 0;
+
+      await transaction(async (client) => {
+        // 오버라이드 키 생성
+        const keyResult = await client.query(
+          `INSERT INTO multi_lang_key_master 
+           (company_code, lang_key, category_id, key_meaning, base_key_id, is_active, created_by, updated_by)
+           VALUES ($1, $2, $3, $4, $5, 'Y', $6, $6)
+           RETURNING key_id`,
+          [
+            params.companyCode,
+            baseKey.lang_key,
+            baseKey.category_id,
+            baseKey.key_meaning,
+            params.baseKeyId,
+            params.createdBy || "system",
+          ]
+        );
+
+        keyId = keyResult.rows[0].key_id;
+
+        // 텍스트 생성
+        for (const text of params.texts) {
+          await client.query(
+            `INSERT INTO multi_lang_text 
+             (key_id, lang_code, lang_text, is_active, created_by, updated_by)
+             VALUES ($1, $2, $3, 'Y', $4, $4)`,
+            [keyId, text.langCode, text.langText, params.createdBy || "system"]
+          );
+        }
+      });
+
+      logger.info("오버라이드 키 생성 완료", { keyId, langKey: baseKey.lang_key });
+      return keyId;
+    } catch (error) {
+      logger.error("오버라이드 키 생성 중 오류 발생:", error);
+      throw new Error(
+        `오버라이드 키 생성 실패: ${error instanceof Error ? error.message : "Unknown error"}`
+      );
+    }
+  }
+
+  /**
+   * 회사의 오버라이드 키 목록 조회
+   */
+  async getOverrideKeys(companyCode: string): Promise<LangKey[]> {
+    try {
+      logger.info("오버라이드 키 목록 조회 시작", { companyCode });
+
+      const keys = await query<{
+        key_id: number;
+        company_code: string;
+        lang_key: string;
+        category_id: number | null;
+        key_meaning: string | null;
+        usage_note: string | null;
+        base_key_id: number | null;
+        is_active: string;
+        created_date: Date | null;
+      }>(
+        `SELECT key_id, company_code, lang_key, category_id, key_meaning,
+                usage_note, base_key_id, is_active, created_date
+         FROM multi_lang_key_master
+         WHERE company_code = $1 AND base_key_id IS NOT NULL
+         ORDER BY lang_key ASC`,
+        [companyCode]
+      );
+
+      return keys.map((k) => ({
+        keyId: k.key_id,
+        companyCode: k.company_code,
+        langKey: k.lang_key,
+        categoryId: k.category_id ?? undefined,
+        keyMeaning: k.key_meaning ?? undefined,
+        usageNote: k.usage_note ?? undefined,
+        baseKeyId: k.base_key_id ?? undefined,
+        isActive: k.is_active,
+        createdDate: k.created_date ?? undefined,
+      }));
+    } catch (error) {
+      logger.error("오버라이드 키 목록 조회 중 오류 발생:", error);
+      throw new Error(
+        `오버라이드 키 목록 조회 실패: ${error instanceof Error ? error.message : "Unknown error"}`
+      );
+    }
+  }
+
+  /**
+   * 키 존재 여부 및 미리보기 확인
+   */
+  async previewGeneratedKey(categoryId: number, keyMeaning: string, companyCode: string): Promise<{
+    langKey: string;
+    exists: boolean;
+    isOverride: boolean;
+    baseKeyId?: number;
+  }> {
+    try {
+      // 카테고리 경로 조회
+      const categoryPath = await this.getCategoryPath(categoryId);
+      if (categoryPath.length === 0) {
+        throw new Error("존재하지 않는 카테고리입니다");
+      }
+
+      // lang_key 생성
+      const prefixes = categoryPath.map((c) => c.keyPrefix);
+      const langKey = [...prefixes, keyMeaning].join(".");
+
+      // 공통 키 확인
+      const commonKey = await queryOne<{ key_id: number }>(
+        `SELECT key_id FROM multi_lang_key_master 
+         WHERE company_code = '*' AND lang_key = $1`,
+        [langKey]
+      );
+
+      // 회사별 키 확인
+      const companyKey = await queryOne<{ key_id: number }>(
+        `SELECT key_id FROM multi_lang_key_master 
+         WHERE company_code = $1 AND lang_key = $2`,
+        [companyCode, langKey]
+      );
+
+      return {
+        langKey,
+        exists: !!companyKey,
+        isOverride: !!commonKey && !companyKey,
+        baseKeyId: commonKey?.key_id,
+      };
+    } catch (error) {
+      logger.error("키 미리보기 중 오류 발생:", error);
+      throw new Error(
+        `키 미리보기 실패: ${error instanceof Error ? error.message : "Unknown error"}`
+      );
+    }
+  }
+
   /**
    * 언어 목록 조회
    */
@@ -275,14 +692,29 @@ export class MultiLangService {
 
       // 메뉴 코드 필터
       if (params.menuCode) {
-        whereConditions.push(`menu_name = $${paramIndex++}`);
+        whereConditions.push(`usage_note = $${paramIndex++}`);
         values.push(params.menuCode);
       }
 
+      // 카테고리 필터 (하위 카테고리 포함)
+      if (params.categoryId) {
+        whereConditions.push(`category_id IN (
+          WITH RECURSIVE category_tree AS (
+            SELECT category_id FROM multi_lang_category WHERE category_id = $${paramIndex}
+            UNION ALL
+            SELECT c.category_id FROM multi_lang_category c
+            INNER JOIN category_tree ct ON c.parent_id = ct.category_id
+          )
+          SELECT category_id FROM category_tree
+        )`);
+        values.push(params.categoryId);
+        paramIndex++;
+      }
+
       // 검색 조건 (OR)
       if (params.searchText) {
         whereConditions.push(
-          `(lang_key ILIKE $${paramIndex} OR description ILIKE $${paramIndex} OR menu_name ILIKE $${paramIndex})`
+          `(lang_key ILIKE $${paramIndex} OR description ILIKE $${paramIndex} OR usage_note ILIKE $${paramIndex})`
         );
         values.push(`%${params.searchText}%`);
         paramIndex++;
@@ -296,30 +728,32 @@ export class MultiLangService {
       const langKeys = await query<{
         key_id: number;
         company_code: string;
-        menu_name: string | null;
+        usage_note: string | null;
         lang_key: string;
         description: string | null;
         is_active: string | null;
+        category_id: number | null;
         created_date: Date | null;
         created_by: string | null;
         updated_date: Date | null;
         updated_by: string | null;
       }>(
-        `SELECT key_id, company_code, menu_name, lang_key, description, is_active,
+        `SELECT key_id, company_code, usage_note, lang_key, description, is_active, category_id,
                 created_date, created_by, updated_date, updated_by
          FROM multi_lang_key_master
          ${whereClause}
-         ORDER BY company_code ASC, menu_name ASC, lang_key ASC`,
+         ORDER BY company_code ASC, usage_note ASC, lang_key ASC`,
         values
       );
 
       const mappedKeys: LangKey[] = langKeys.map((key) => ({
         keyId: key.key_id,
         companyCode: key.company_code,
-        menuName: key.menu_name || undefined,
+        menuName: key.usage_note || undefined,
         langKey: key.lang_key,
         description: key.description || undefined,
         isActive: key.is_active || "Y",
+        categoryId: key.category_id || undefined,
         createdDate: key.created_date || undefined,
         createdBy: key.created_by || undefined,
         updatedDate: key.updated_date || undefined,
@@ -407,7 +841,7 @@ export class MultiLangService {
       // 다국어 키 생성
       const createdKey = await queryOne<{ key_id: number }>(
         `INSERT INTO multi_lang_key_master 
-         (company_code, menu_name, lang_key, description, is_active, created_by, updated_by)
+         (company_code, usage_note, lang_key, description, is_active, created_by, updated_by)
          VALUES ($1, $2, $3, $4, $5, $6, $7)
          RETURNING key_id`,
         [
@@ -480,7 +914,7 @@ export class MultiLangService {
         values.push(keyData.companyCode);
       }
       if (keyData.menuName !== undefined) {
-        updates.push(`menu_name = $${paramIndex++}`);
+        updates.push(`usage_note = $${paramIndex++}`);
         values.push(keyData.menuName);
       }
       if (keyData.langKey) {
@@ -668,7 +1102,7 @@ export class MultiLangService {
          WHERE mlt.lang_code = $1
            AND mlt.is_active = $2
            AND mlkm.company_code = $3
-           AND mlkm.menu_name = $4
+           AND mlkm.usage_note = $4
            AND mlkm.lang_key = $5
            AND mlkm.is_active = $6`,
         [
@@ -753,7 +1187,9 @@ export class MultiLangService {
   }
 
   /**
-   * 배치 번역 조회
+   * 배치 번역 조회 (회사별 우선순위 적용)
+   * 우선순위: 회사별 키 > 공통 키(*)
+   * 폴백: 요청 언어 번역이 없으면 KR 번역 사용
    */
   async getBatchTranslations(
     params: BatchTranslationRequest
@@ -775,12 +1211,17 @@ export class MultiLangService {
         .map((_, i) => `$${i + 4}`)
         .join(", ");
 
+      // 회사별 우선순위를 적용하기 위해 정렬 수정
+      // 회사별 키가 먼저 오도록 DESC 정렬 (company_code가 '*'보다 특정 회사 코드가 알파벳 순으로 앞)
+      // 또는 CASE WHEN을 사용하여 명시적으로 우선순위 설정
       const translations = await query<{
         lang_text: string;
         lang_key: string;
         company_code: string;
+        priority: number;
       }>(
-        `SELECT mlt.lang_text, mlkm.lang_key, mlkm.company_code
+        `SELECT mlt.lang_text, mlkm.lang_key, mlkm.company_code,
+                CASE WHEN mlkm.company_code = $3 THEN 1 ELSE 2 END as priority
          FROM multi_lang_text mlt
          INNER JOIN multi_lang_key_master mlkm ON mlt.key_id = mlkm.key_id
          WHERE mlt.lang_code = $1
@@ -788,28 +1229,76 @@ export class MultiLangService {
            AND mlkm.lang_key IN (${placeholders})
            AND mlkm.company_code IN ($3, '*')
            AND mlkm.is_active = $2
-         ORDER BY mlkm.company_code ASC`,
+         ORDER BY mlkm.lang_key ASC, priority ASC`,
         [params.userLang, "Y", params.companyCode, ...params.langKeys]
       );
 
       const result: Record<string, string> = {};
+      const processedKeys = new Set<string>();
 
-      // 기본값으로 모든 키 설정
-      params.langKeys.forEach((key) => {
-        result[key] = key;
-      });
-
-      // 실제 번역으로 덮어쓰기 (회사별 우선)
+      // 우선순위 기반으로 번역 적용
+      // priority가 낮은 것(회사별)이 먼저 오므로, 먼저 처리된 키는 덮어쓰지 않음
       translations.forEach((translation) => {
         const langKey = translation.lang_key;
-        if (params.langKeys.includes(langKey)) {
+        if (params.langKeys.includes(langKey) && !processedKeys.has(langKey)) {
           result[langKey] = translation.lang_text;
+          processedKeys.add(langKey);
+        }
+      });
+
+      // 번역이 없는 키들에 대해 KR 폴백 조회 (요청 언어가 KR이 아닌 경우)
+      const missingKeys = params.langKeys.filter((key) => !processedKeys.has(key));
+      
+      if (missingKeys.length > 0 && params.userLang !== "KR") {
+        logger.info("KR 폴백 번역 조회 시작", { missingCount: missingKeys.length });
+        
+        const fallbackPlaceholders = missingKeys.map((_, i) => `$${i + 3}`).join(", ");
+        const fallbackTranslations = await query<{
+          lang_text: string;
+          lang_key: string;
+          company_code: string;
+          priority: number;
+        }>(
+          `SELECT mlt.lang_text, mlkm.lang_key, mlkm.company_code,
+                  CASE WHEN mlkm.company_code = $2 THEN 1 ELSE 2 END as priority
+           FROM multi_lang_text mlt
+           INNER JOIN multi_lang_key_master mlkm ON mlt.key_id = mlkm.key_id
+           WHERE mlt.lang_code = 'KR'
+             AND mlt.is_active = $1
+             AND mlkm.lang_key IN (${fallbackPlaceholders})
+             AND mlkm.company_code IN ($2, '*')
+             AND mlkm.is_active = $1
+           ORDER BY mlkm.lang_key ASC, priority ASC`,
+          ["Y", params.companyCode, ...missingKeys]
+        );
+
+        // KR 폴백 적용
+        const fallbackProcessed = new Set<string>();
+        fallbackTranslations.forEach((translation) => {
+          const langKey = translation.lang_key;
+          if (!result[langKey] && !fallbackProcessed.has(langKey)) {
+            result[langKey] = translation.lang_text;
+            fallbackProcessed.add(langKey);
+          }
+        });
+        
+        logger.info("KR 폴백 번역 조회 완료", {
+          missingCount: missingKeys.length,
+          foundFallback: fallbackTranslations.length,
+        });
+      }
+
+      // 여전히 없는 키는 키 자체를 반환 (최후의 폴백)
+      params.langKeys.forEach((key) => {
+        if (!result[key]) {
+          result[key] = key;
         }
       });
 
       logger.info("배치 번역 조회 완료", {
         totalKeys: params.langKeys.length,
         foundTranslations: translations.length,
+        companyOverrides: translations.filter(t => t.company_code !== '*').length,
         resultKeys: Object.keys(result).length,
       });
 
@@ -865,4 +1354,391 @@ export class MultiLangService {
       );
     }
   }
+
+  // =====================================================
+  // 회사/메뉴 기반 카테고리 자동 생성 메서드
+  // =====================================================
+
+  /**
+   * 화면(screen) 루트 카테고리 확인 또는 생성
+   */
+  async ensureScreenRootCategory(): Promise<number> {
+    try {
+      // 기존 screen 카테고리 확인
+      const existing = await queryOne<{ category_id: number }>(
+        `SELECT category_id FROM multi_lang_category 
+         WHERE category_code = 'screen' AND parent_id IS NULL`,
+        []
+      );
+
+      if (existing) {
+        return existing.category_id;
+      }
+
+      // 없으면 생성
+      const result = await queryOne<{ category_id: number }>(
+        `INSERT INTO multi_lang_category 
+         (category_code, category_name, parent_id, level, key_prefix, description, sort_order, is_active, created_date)
+         VALUES ('screen', '화면', NULL, 1, 'screen', '화면 디자이너에서 자동 생성된 다국어 키', 100, 'Y', NOW())
+         RETURNING category_id`,
+        []
+      );
+
+      logger.info("화면 루트 카테고리 생성", { categoryId: result?.category_id });
+      return result!.category_id;
+    } catch (error) {
+      logger.error("화면 루트 카테고리 생성 실패:", error);
+      throw error;
+    }
+  }
+
+  /**
+   * 회사 카테고리 확인 또는 생성
+   */
+  async ensureCompanyCategory(companyCode: string, companyName: string): Promise<number> {
+    try {
+      const screenRootId = await this.ensureScreenRootCategory();
+
+      // 기존 회사 카테고리 확인
+      const existing = await queryOne<{ category_id: number }>(
+        `SELECT category_id FROM multi_lang_category 
+         WHERE category_code = $1 AND parent_id = $2`,
+        [companyCode, screenRootId]
+      );
+
+      if (existing) {
+        return existing.category_id;
+      }
+
+      // 회사 카테고리 생성
+      const displayName = companyCode === "*" ? "공통" : companyName;
+      const keyPrefix = companyCode === "*" ? "common" : companyCode.toLowerCase();
+
+      const result = await queryOne<{ category_id: number }>(
+        `INSERT INTO multi_lang_category 
+         (category_code, category_name, parent_id, level, key_prefix, description, sort_order, is_active, created_date)
+         VALUES ($1, $2, $3, 2, $4, $5, $6, 'Y', NOW())
+         RETURNING category_id`,
+        [
+          companyCode,
+          displayName,
+          screenRootId,
+          keyPrefix,
+          `${displayName} 회사의 화면 다국어`,
+          companyCode === "*" ? 0 : 10,
+        ]
+      );
+
+      logger.info("회사 카테고리 생성", { companyCode, categoryId: result?.category_id });
+      return result!.category_id;
+    } catch (error) {
+      logger.error("회사 카테고리 생성 실패:", error);
+      throw error;
+    }
+  }
+
+  /**
+   * 메뉴 카테고리 확인 또는 생성 (메뉴 경로 전체)
+   */
+  async ensureMenuCategory(
+    companyCode: string,
+    companyName: string,
+    menuPath: string[] // ["영업관리", "수주관리"]
+  ): Promise<number> {
+    try {
+      if (menuPath.length === 0) {
+        return await this.ensureCompanyCategory(companyCode, companyName);
+      }
+
+      let parentId = await this.ensureCompanyCategory(companyCode, companyName);
+      let currentLevel = 3;
+
+      for (const menuName of menuPath) {
+        // 현재 메뉴 카테고리 확인
+        const existing = await queryOne<{ category_id: number }>(
+          `SELECT category_id FROM multi_lang_category 
+           WHERE category_name = $1 AND parent_id = $2`,
+          [menuName, parentId]
+        );
+
+        if (existing) {
+          parentId = existing.category_id;
+        } else {
+          // 메뉴 카테고리 생성
+          const menuCode = `${companyCode}_${menuName}`.replace(/\s+/g, "_");
+          const keyPrefix = menuName.toLowerCase().replace(/\s+/g, "_");
+
+          const result = await queryOne<{ category_id: number }>(
+            `INSERT INTO multi_lang_category 
+             (category_code, category_name, parent_id, level, key_prefix, description, sort_order, is_active, created_date)
+             VALUES ($1, $2, $3, $4, $5, $6, 0, 'Y', NOW())
+             RETURNING category_id`,
+            [menuCode, menuName, parentId, currentLevel, keyPrefix, `${menuName} 메뉴의 다국어`]
+          );
+
+          logger.info("메뉴 카테고리 생성", { menuName, categoryId: result?.category_id });
+          parentId = result!.category_id;
+        }
+
+        currentLevel++;
+      }
+
+      return parentId;
+    } catch (error) {
+      logger.error("메뉴 카테고리 생성 실패:", error);
+      throw error;
+    }
+  }
+
+  /**
+   * 메뉴 경로 조회 (menu_info에서 부모 메뉴까지)
+   */
+  async getMenuPath(menuObjId: string): Promise<string[]> {
+    try {
+      const menus = await query<{ menu_name_kor: string; level: number }>(
+        `WITH RECURSIVE menu_path AS (
+           SELECT objid, parent_obj_id, menu_name_kor, 1 as level
+           FROM menu_info
+           WHERE objid = $1
+           UNION ALL
+           SELECT m.objid, m.parent_obj_id, m.menu_name_kor, mp.level + 1
+           FROM menu_info m
+           INNER JOIN menu_path mp ON m.objid = mp.parent_obj_id
+           WHERE m.parent_obj_id IS NOT NULL AND m.parent_obj_id != 0
+         )
+         SELECT menu_name_kor, level FROM menu_path 
+         WHERE menu_name_kor IS NOT NULL
+         ORDER BY level DESC`,
+        [menuObjId]
+      );
+
+      return menus.map((m) => m.menu_name_kor);
+    } catch (error) {
+      logger.error("메뉴 경로 조회 실패:", error);
+      return [];
+    }
+  }
+
+  /**
+   * 화면 그룹 경로 조회 (screen_groups에서 계층 구조 조회)
+   * @param screenId 화면 ID
+   * @returns 그룹 경로 배열 (최상위 → 현재 그룹 순서)
+   */
+  async getScreenGroupPath(screenId: number): Promise<string[]> {
+    try {
+      // 화면이 속한 그룹 조회
+      const screenGroup = await queryOne<{ group_id: number }>(
+        `SELECT group_id FROM screen_group_screens WHERE screen_id = $1 LIMIT 1`,
+        [screenId]
+      );
+
+      if (!screenGroup) {
+        logger.info("화면이 그룹에 속하지 않음", { screenId });
+        return [];
+      }
+
+      // 그룹의 계층 구조 경로 조회 (최상위 → 현재 그룹 순서)
+      const groups = await query<{ group_name: string; group_level: number }>(
+        `WITH RECURSIVE group_path AS (
+           SELECT id, parent_group_id, group_name, group_level, 1 as depth
+           FROM screen_groups
+           WHERE id = $1
+           UNION ALL
+           SELECT g.id, g.parent_group_id, g.group_name, g.group_level, gp.depth + 1
+           FROM screen_groups g
+           INNER JOIN group_path gp ON g.id = gp.parent_group_id
+           WHERE g.parent_group_id IS NOT NULL
+         )
+         SELECT group_name, group_level FROM group_path
+         ORDER BY depth DESC`,
+        [screenGroup.group_id]
+      );
+
+      return groups.map((g) => g.group_name);
+    } catch (error) {
+      logger.error("화면 그룹 경로 조회 실패:", error);
+      return [];
+    }
+  }
+
+  /**
+   * 화면 그룹 기반 카테고리 확인 또는 생성
+   * @param companyCode 회사 코드
+   * @param companyName 회사 이름
+   * @param groupPath 그룹 경로 (상위 → 하위 순서)
+   * @returns 최종 카테고리 ID
+   */
+  async ensureScreenGroupCategory(
+    companyCode: string,
+    companyName: string,
+    groupPath: string[]
+  ): Promise<number> {
+    try {
+      if (groupPath.length === 0) {
+        // 그룹이 없으면 회사 카테고리만 반환
+        return await this.ensureCompanyCategory(companyCode, companyName);
+      }
+
+      let parentId = await this.ensureCompanyCategory(companyCode, companyName);
+      let currentLevel = 3; // SCREEN(1) > Company(2) > Group(3)
+
+      for (const groupName of groupPath) {
+        // 현재 그룹 카테고리 확인
+        const existing = await queryOne<{ category_id: number }>(
+          `SELECT category_id FROM multi_lang_category 
+           WHERE category_name = $1 AND parent_id = $2`,
+          [groupName, parentId]
+        );
+
+        if (existing) {
+          parentId = existing.category_id;
+        } else {
+          // 그룹 카테고리 생성
+          const groupCode = `${companyCode}_GROUP_${groupName}`.replace(/\s+/g, "_");
+          const keyPrefix = groupName.toLowerCase().replace(/\s+/g, "_");
+
+          const result = await queryOne<{ category_id: number }>(
+            `INSERT INTO multi_lang_category 
+             (category_code, category_name, parent_id, level, key_prefix, description, sort_order, is_active, created_date)
+             VALUES ($1, $2, $3, $4, $5, $6, 0, 'Y', NOW())
+             RETURNING category_id`,
+            [groupCode, groupName, parentId, currentLevel, keyPrefix, `${groupName} 화면 그룹의 다국어`]
+          );
+
+          logger.info("화면 그룹 카테고리 생성", { groupName, categoryId: result?.category_id });
+          parentId = result!.category_id;
+        }
+
+        currentLevel++;
+      }
+
+      return parentId;
+    } catch (error) {
+      logger.error("화면 그룹 카테고리 생성 실패:", error);
+      throw error;
+    }
+  }
+
+  /**
+   * 화면 라벨 다국어 키 자동 생성
+   * 화면 그룹 기반으로 카테고리 생성 (기존 메뉴 기반에서 변경)
+   */
+  async generateScreenLabelKeys(params: {
+    screenId: number;
+    companyCode: string;
+    companyName: string;
+    menuObjId?: string; // 하위 호환성 유지 (미사용, 화면 그룹 기반으로 변경)
+    labels: Array<{ componentId: string; label: string; type?: string }>;
+  }): Promise<Array<{ componentId: string; keyId: number; langKey: string }>> {
+    try {
+      logger.info("화면 라벨 다국어 키 자동 생성 시작", {
+        screenId: params.screenId,
+        companyCode: params.companyCode,
+        labelCount: params.labels.length,
+      });
+
+      // 화면 그룹 경로 조회 (화면이 속한 그룹의 계층 구조)
+      const groupPath = await this.getScreenGroupPath(params.screenId);
+      logger.info("화면 그룹 경로 조회 완료", { screenId: params.screenId, groupPath });
+
+      // 화면 그룹 기반 카테고리 확보
+      const categoryId = await this.ensureScreenGroupCategory(
+        params.companyCode,
+        params.companyName,
+        groupPath
+      );
+
+      // 카테고리 경로 조회 (키 생성용)
+      const categoryPath = await this.getCategoryPath(categoryId);
+      const keyPrefixParts = categoryPath.map((c) => c.keyPrefix);
+
+      const results: Array<{ componentId: string; keyId: number; langKey: string }> = [];
+
+      for (const labelInfo of params.labels) {
+        // 라벨을 키 형태로 변환 (한글 → 스네이크케이스)
+        const keyMeaning = this.labelToKeyMeaning(labelInfo.label);
+        const langKey = [...keyPrefixParts, keyMeaning].join(".");
+
+        // 기존 키 확인
+        const existingKey = await queryOne<{ key_id: number }>(
+          `SELECT key_id FROM multi_lang_key_master 
+           WHERE lang_key = $1 AND company_code = $2`,
+          [langKey, params.companyCode]
+        );
+
+        let keyId: number;
+
+        if (existingKey) {
+          keyId = existingKey.key_id;
+          logger.info("기존 키 사용", { langKey, keyId });
+        } else {
+          // 새 키 생성
+          const keyResult = await queryOne<{ key_id: number }>(
+            `INSERT INTO multi_lang_key_master 
+             (company_code, lang_key, description, is_active, category_id, key_meaning, created_date, created_by)
+             VALUES ($1, $2, $3, 'Y', $4, $5, NOW(), 'system')
+             RETURNING key_id`,
+            [
+              params.companyCode,
+              langKey,
+              `화면 ${params.screenId}의 ${labelInfo.type || "라벨"}: ${labelInfo.label}`,
+              categoryId,
+              keyMeaning,
+            ]
+          );
+
+          keyId = keyResult!.key_id;
+
+          // 한국어 텍스트 저장 (원문)
+          await query(
+            `INSERT INTO multi_lang_text (key_id, lang_code, lang_text, is_active, created_date, created_by)
+             VALUES ($1, 'KR', $2, 'Y', NOW(), 'system')
+             ON CONFLICT (key_id, lang_code) DO UPDATE SET lang_text = $2, updated_date = NOW()`,
+            [keyId, labelInfo.label]
+          );
+
+          logger.info("새 키 생성", { langKey, keyId });
+        }
+
+        results.push({
+          componentId: labelInfo.componentId,
+          keyId,
+          langKey,
+        });
+      }
+
+      logger.info("화면 라벨 다국어 키 생성 완료", {
+        screenId: params.screenId,
+        generatedCount: results.length,
+      });
+
+      return results;
+    } catch (error) {
+      logger.error("화면 라벨 다국어 키 생성 실패:", error);
+      throw new Error(
+        `화면 라벨 다국어 키 생성 실패: ${error instanceof Error ? error.message : "Unknown error"}`
+      );
+    }
+  }
+
+  /**
+   * 라벨을 키 의미로 변환 (한글 → 스네이크케이스 또는 영문 유지)
+   */
+  private labelToKeyMeaning(label: string): string {
+    // 이미 영문 스네이크케이스면 그대로 사용
+    if (/^[a-z][a-z0-9_]*$/.test(label)) {
+      return label;
+    }
+
+    // 영문 일반이면 스네이크케이스로 변환
+    if (/^[A-Za-z][A-Za-z0-9 ]*$/.test(label)) {
+      return label.toLowerCase().replace(/\s+/g, "_");
+    }
+
+    // 한글이면 간단한 변환 (특수문자 제거, 공백을 _로)
+    return label
+      .replace(/[^\w가-힣\s]/g, "")
+      .replace(/\s+/g, "_")
+      .toLowerCase();
+  }
 }
diff --git a/backend-node/src/services/nodeFlowExecutionService.ts b/backend-node/src/services/nodeFlowExecutionService.ts
index 6f481198..b5237f0b 100644
--- a/backend-node/src/services/nodeFlowExecutionService.ts
+++ b/backend-node/src/services/nodeFlowExecutionService.ts
@@ -969,21 +969,56 @@ export class NodeFlowExecutionService {
         const insertedData = { ...data };
 
         console.log("🗺️ 필드 매핑 처리 중...");
-        fieldMappings.forEach((mapping: any) => {
+        
+        // 🔥 채번 규칙 서비스 동적 import
+        const { numberingRuleService } = await import("./numberingRuleService");
+        
+        for (const mapping of fieldMappings) {
           fields.push(mapping.targetField);
-          const value =
-            mapping.staticValue !== undefined
-              ? mapping.staticValue
-              : data[mapping.sourceField];
-
-          console.log(
-            `  ${mapping.sourceField} → ${mapping.targetField}: ${value === undefined ? "❌ undefined" : "✅ " + value}`
-          );
+          let value: any;
+          
+          // 🔥 값 생성 유형에 따른 처리
+          const valueType = mapping.valueType || (mapping.staticValue !== undefined ? "static" : "source");
+          
+          if (valueType === "autoGenerate" && mapping.numberingRuleId) {
+            // 자동 생성 (채번 규칙)
+            const companyCode = context.buttonContext?.companyCode || "*";
+            try {
+              value = await numberingRuleService.allocateCode(
+                mapping.numberingRuleId,
+                companyCode
+              );
+              console.log(
+                `  🔢 자동 생성(채번): ${mapping.targetField} = ${value} (규칙: ${mapping.numberingRuleId})`
+              );
+            } catch (error: any) {
+              logger.error(`채번 규칙 적용 실패: ${error.message}`);
+              console.error(
+                `  ❌ 채번 실패 → ${mapping.targetField}: ${error.message}`
+              );
+              throw new Error(
+                `채번 규칙 '${mapping.numberingRuleName || mapping.numberingRuleId}' 적용 실패: ${error.message}`
+              );
+            }
+          } else if (valueType === "static" || mapping.staticValue !== undefined) {
+            // 고정값
+            value = mapping.staticValue;
+            console.log(
+              `  📌 고정값: ${mapping.targetField} = ${value}`
+            );
+          } else {
+            // 소스 필드
+            value = data[mapping.sourceField];
+            console.log(
+              `  ${mapping.sourceField} → ${mapping.targetField}: ${value === undefined ? "❌ undefined" : "✅ " + value}`
+            );
+          }
+          
           values.push(value);
 
           // 🔥 삽입된 값을 데이터에 반영
           insertedData[mapping.targetField] = value;
-        });
+        }
 
         // 🆕 writer와 company_code 자동 추가 (필드 매핑에 없는 경우)
         const hasWriterMapping = fieldMappings.some(
@@ -1528,16 +1563,24 @@ export class NodeFlowExecutionService {
           }
         });
 
-        // 🔑 Primary Key 자동 추가 (context-data 모드)
-        console.log("🔑 context-data 모드: Primary Key 자동 추가");
-        const enhancedWhereConditions = await this.enhanceWhereConditionsWithPK(
-          whereConditions,
-          data,
-          targetTable
-        );
+        // 🔑 Primary Key 자동 추가 여부 결정:
+        // whereConditions가 명시적으로 설정되어 있으면 PK 자동 추가를 하지 않음
+        // (사용자가 직접 조건을 설정한 경우 의도를 존중)
+        let finalWhereConditions: any[];
+        if (whereConditions && whereConditions.length > 0) {
+          console.log("📋 사용자 정의 WHERE 조건 사용 (PK 자동 추가 안 함)");
+          finalWhereConditions = whereConditions;
+        } else {
+          console.log("🔑 context-data 모드: Primary Key 자동 추가");
+          finalWhereConditions = await this.enhanceWhereConditionsWithPK(
+            whereConditions,
+            data,
+            targetTable
+          );
+        }
 
         const whereResult = this.buildWhereClause(
-          enhancedWhereConditions,
+          finalWhereConditions,
           data,
           paramIndex
         );
@@ -1907,22 +1950,30 @@ export class NodeFlowExecutionService {
         return deletedDataArray;
       }
 
-      // 🆕 context-data 모드: 개별 삭제 (PK 자동 추가)
+      // 🆕 context-data 모드: 개별 삭제
       console.log("🎯 context-data 모드: 개별 삭제 시작");
 
       for (const data of dataArray) {
         console.log("🔍 WHERE 조건 처리 중...");
 
-        // 🔑 Primary Key 자동 추가 (context-data 모드)
-        console.log("🔑 context-data 모드: Primary Key 자동 추가");
-        const enhancedWhereConditions = await this.enhanceWhereConditionsWithPK(
-          whereConditions,
-          data,
-          targetTable
-        );
+        // 🔑 Primary Key 자동 추가 여부 결정:
+        // whereConditions가 명시적으로 설정되어 있으면 PK 자동 추가를 하지 않음
+        // (사용자가 직접 조건을 설정한 경우 의도를 존중)
+        let finalWhereConditions: any[];
+        if (whereConditions && whereConditions.length > 0) {
+          console.log("📋 사용자 정의 WHERE 조건 사용 (PK 자동 추가 안 함)");
+          finalWhereConditions = whereConditions;
+        } else {
+          console.log("🔑 context-data 모드: Primary Key 자동 추가");
+          finalWhereConditions = await this.enhanceWhereConditionsWithPK(
+            whereConditions,
+            data,
+            targetTable
+          );
+        }
 
         const whereResult = this.buildWhereClause(
-          enhancedWhereConditions,
+          finalWhereConditions,
           data,
           1
         );
@@ -2282,6 +2333,7 @@ export class NodeFlowExecutionService {
             UPDATE ${targetTable}
             SET ${setClauses.join(", ")}
             WHERE ${updateWhereConditions}
+            RETURNING *
           `;
 
           logger.info(`🔄 UPDATE 실행:`, {
@@ -2292,8 +2344,14 @@ export class NodeFlowExecutionService {
             values: updateValues,
           });
 
-          await txClient.query(updateSql, updateValues);
+          const updateResult = await txClient.query(updateSql, updateValues);
           updatedCount++;
+          
+          // 🆕 UPDATE 결과를 입력 데이터에 병합 (다음 노드에서 id 등 사용 가능)
+          if (updateResult.rows && updateResult.rows[0]) {
+            Object.assign(data, updateResult.rows[0]);
+            logger.info(`  📦 UPDATE 결과 병합: id=${updateResult.rows[0].id}`);
+          }
         } else {
           // 3-B. 없으면 INSERT
           const columns: string[] = [];
@@ -2340,6 +2398,7 @@ export class NodeFlowExecutionService {
           const insertSql = `
             INSERT INTO ${targetTable} (${columns.join(", ")})
             VALUES (${placeholders})
+            RETURNING *
           `;
 
           logger.info(`➕ INSERT 실행:`, {
@@ -2348,8 +2407,14 @@ export class NodeFlowExecutionService {
             conflictKeyValues,
           });
 
-          await txClient.query(insertSql, values);
+          const insertResult = await txClient.query(insertSql, values);
           insertedCount++;
+          
+          // 🆕 INSERT 결과를 입력 데이터에 병합 (다음 노드에서 id 등 사용 가능)
+          if (insertResult.rows && insertResult.rows[0]) {
+            Object.assign(data, insertResult.rows[0]);
+            logger.info(`  📦 INSERT 결과 병합: id=${insertResult.rows[0].id}`);
+          }
         }
       }
 
@@ -2357,11 +2422,10 @@ export class NodeFlowExecutionService {
         `✅ UPSERT 완료 (내부 DB): ${targetTable}, INSERT ${insertedCount}건, UPDATE ${updatedCount}건`
       );
 
-      return {
-        insertedCount,
-        updatedCount,
-        totalCount: insertedCount + updatedCount,
-      };
+      // 🔥 다음 노드에 전달할 데이터 반환
+      // dataArray에는 Object.assign으로 UPSERT 결과(id 등)가 이미 병합되어 있음
+      // 카운트 정보도 함께 반환하여 기존 호환성 유지
+      return dataArray;
     };
 
     // 🔥 클라이언트가 전달되었으면 사용, 아니면 독립 트랜잭션 생성
@@ -2707,28 +2771,48 @@ export class NodeFlowExecutionService {
       const trueData: any[] = [];
       const falseData: any[] = [];
 
-      inputData.forEach((item: any) => {
-        const results = conditions.map((condition: any) => {
+      // 배열의 각 항목에 대해 조건 평가 (EXISTS 조건은 비동기)
+      for (const item of inputData) {
+        const results: boolean[] = [];
+
+        for (const condition of conditions) {
           const fieldValue = item[condition.field];
 
-          let compareValue = condition.value;
-          if (condition.valueType === "field") {
-            compareValue = item[condition.value];
+          // EXISTS 계열 연산자 처리
+          if (
+            condition.operator === "EXISTS_IN" ||
+            condition.operator === "NOT_EXISTS_IN"
+          ) {
+            const existsResult = await this.evaluateExistsCondition(
+              fieldValue,
+              condition.operator,
+              condition.lookupTable,
+              condition.lookupField,
+              context.buttonContext?.companyCode
+            );
+            results.push(existsResult);
             logger.info(
-              `🔄 필드 참조 비교: ${condition.field} (${fieldValue}) vs ${condition.value} (${compareValue})`
+              `🔍 EXISTS 조건: ${condition.field} (${fieldValue}) ${condition.operator} ${condition.lookupTable}.${condition.lookupField} => ${existsResult}`
             );
           } else {
-            logger.info(
-              `📊 고정값 비교: ${condition.field} (${fieldValue}) vs ${compareValue}`
+            // 일반 연산자 처리
+            let compareValue = condition.value;
+            if (condition.valueType === "field") {
+              compareValue = item[condition.value];
+              logger.info(
+                `🔄 필드 참조 비교: ${condition.field} (${fieldValue}) vs ${condition.value} (${compareValue})`
+              );
+            } else {
+              logger.info(
+                `📊 고정값 비교: ${condition.field} (${fieldValue}) vs ${compareValue}`
+              );
+            }
+
+            results.push(
+              this.evaluateCondition(fieldValue, condition.operator, compareValue)
             );
           }
-
-          return this.evaluateCondition(
-            fieldValue,
-            condition.operator,
-            compareValue
-          );
-        });
+        }
 
         const result =
           logic === "OR"
@@ -2740,7 +2824,7 @@ export class NodeFlowExecutionService {
         } else {
           falseData.push(item);
         }
-      });
+      }
 
       logger.info(
         `🔍 조건 필터링 결과: TRUE ${trueData.length}건 / FALSE ${falseData.length}건 (${logic} 로직)`
@@ -2755,27 +2839,46 @@ export class NodeFlowExecutionService {
     }
 
     // 단일 객체인 경우
-    const results = conditions.map((condition: any) => {
+    const results: boolean[] = [];
+
+    for (const condition of conditions) {
       const fieldValue = inputData[condition.field];
 
-      let compareValue = condition.value;
-      if (condition.valueType === "field") {
-        compareValue = inputData[condition.value];
+      // EXISTS 계열 연산자 처리
+      if (
+        condition.operator === "EXISTS_IN" ||
+        condition.operator === "NOT_EXISTS_IN"
+      ) {
+        const existsResult = await this.evaluateExistsCondition(
+          fieldValue,
+          condition.operator,
+          condition.lookupTable,
+          condition.lookupField,
+          context.buttonContext?.companyCode
+        );
+        results.push(existsResult);
         logger.info(
-          `🔄 필드 참조 비교: ${condition.field} (${fieldValue}) vs ${condition.value} (${compareValue})`
+          `🔍 EXISTS 조건: ${condition.field} (${fieldValue}) ${condition.operator} ${condition.lookupTable}.${condition.lookupField} => ${existsResult}`
         );
       } else {
-        logger.info(
-          `📊 고정값 비교: ${condition.field} (${fieldValue}) vs ${compareValue}`
+        // 일반 연산자 처리
+        let compareValue = condition.value;
+        if (condition.valueType === "field") {
+          compareValue = inputData[condition.value];
+          logger.info(
+            `🔄 필드 참조 비교: ${condition.field} (${fieldValue}) vs ${condition.value} (${compareValue})`
+          );
+        } else {
+          logger.info(
+            `📊 고정값 비교: ${condition.field} (${fieldValue}) vs ${compareValue}`
+          );
+        }
+
+        results.push(
+          this.evaluateCondition(fieldValue, condition.operator, compareValue)
         );
       }
-
-      return this.evaluateCondition(
-        fieldValue,
-        condition.operator,
-        compareValue
-      );
-    });
+    }
 
     const result =
       logic === "OR"
@@ -2784,7 +2887,7 @@ export class NodeFlowExecutionService {
 
     logger.info(`🔍 조건 평가 결과: ${result} (${logic} 로직)`);
 
-    // ⚠️ 조건 노드는 TRUE/FALSE 브랜치를 위한 특별한 처리 필요
+    // 조건 노드는 TRUE/FALSE 브랜치를 위한 특별한 처리 필요
     // 조건 결과를 저장하고, 원본 데이터는 항상 반환
     // 다음 노드에서 sourceHandle을 기반으로 필터링됨
     return {
@@ -2795,6 +2898,69 @@ export class NodeFlowExecutionService {
     };
   }
 
+  /**
+   * EXISTS_IN / NOT_EXISTS_IN 조건 평가
+   * 다른 테이블에 값이 존재하는지 확인
+   */
+  private static async evaluateExistsCondition(
+    fieldValue: any,
+    operator: string,
+    lookupTable: string,
+    lookupField: string,
+    companyCode?: string
+  ): Promise<boolean> {
+    if (!lookupTable || !lookupField) {
+      logger.warn("⚠️ EXISTS 조건: lookupTable 또는 lookupField가 없습니다");
+      return false;
+    }
+
+    if (fieldValue === null || fieldValue === undefined || fieldValue === "") {
+      logger.info(
+        `⚠️ EXISTS 조건: 필드값이 비어있어 FALSE 반환 (빈 값은 조건 검사하지 않음)`
+      );
+      // 값이 비어있으면 조건 검사 자체가 무의미하므로 항상 false 반환
+      // 이렇게 하면 빈 값으로 인한 의도치 않은 INSERT/UPDATE/DELETE가 방지됨
+      return false;
+    }
+
+    try {
+      // 멀티테넌시: company_code 필터 적용 여부 확인
+      // company_mng 테이블은 제외
+      const hasCompanyCode = lookupTable !== "company_mng" && companyCode;
+
+      let sql: string;
+      let params: any[];
+
+      if (hasCompanyCode) {
+        sql = `SELECT EXISTS(SELECT 1 FROM "${lookupTable}" WHERE "${lookupField}" = $1 AND company_code = $2) as exists_result`;
+        params = [fieldValue, companyCode];
+      } else {
+        sql = `SELECT EXISTS(SELECT 1 FROM "${lookupTable}" WHERE "${lookupField}" = $1) as exists_result`;
+        params = [fieldValue];
+      }
+
+      logger.info(`🔍 EXISTS 쿼리: ${sql}, params: ${JSON.stringify(params)}`);
+
+      const result = await query(sql, params);
+      const existsInTable = result[0]?.exists_result === true;
+
+      logger.info(
+        `🔍 EXISTS 결과: ${fieldValue}이(가) ${lookupTable}.${lookupField}에 ${existsInTable ? "존재함" : "존재하지 않음"}`
+      );
+
+      // EXISTS_IN: 존재하면 true
+      // NOT_EXISTS_IN: 존재하지 않으면 true
+      if (operator === "EXISTS_IN") {
+        return existsInTable;
+      } else {
+        return !existsInTable;
+      }
+    } catch (error: any) {
+      logger.error(`❌ EXISTS 조건 평가 실패: ${error.message}`);
+      return false;
+    }
+  }
+
   /**
    * WHERE 절 생성
    */
@@ -4280,6 +4446,8 @@ export class NodeFlowExecutionService {
 
   /**
    * 산술 연산 계산
+   * 다중 연산 지원: (leftOperand operator rightOperand) 이후 additionalOperations 순차 적용
+   * 예: (width * height) / 1000000 * qty
    */
   private static evaluateArithmetic(
     arithmetic: any,
@@ -4306,27 +4474,67 @@ export class NodeFlowExecutionService {
     const leftNum = Number(left) || 0;
     const rightNum = Number(right) || 0;
 
-    switch (arithmetic.operator) {
+    // 기본 연산 수행
+    let result = this.applyOperator(leftNum, arithmetic.operator, rightNum);
+    
+    if (result === null) {
+      return null;
+    }
+
+    // 추가 연산 처리 (다중 연산 지원)
+    if (arithmetic.additionalOperations && Array.isArray(arithmetic.additionalOperations)) {
+      for (const addOp of arithmetic.additionalOperations) {
+        const operandValue = this.getOperandValue(
+          addOp.operand,
+          sourceRow,
+          targetRow,
+          resultValues
+        );
+        const operandNum = Number(operandValue) || 0;
+        
+        result = this.applyOperator(result, addOp.operator, operandNum);
+        
+        if (result === null) {
+          logger.warn(`⚠️ 추가 연산 실패: ${addOp.operator}`);
+          return null;
+        }
+        
+        logger.info(`   추가 연산: ${addOp.operator} ${operandNum} = ${result}`);
+      }
+    }
+
+    return result;
+  }
+
+  /**
+   * 단일 연산자 적용
+   */
+  private static applyOperator(
+    left: number,
+    operator: string,
+    right: number
+  ): number | null {
+    switch (operator) {
       case "+":
-        return leftNum + rightNum;
+        return left + right;
       case "-":
-        return leftNum - rightNum;
+        return left - right;
       case "*":
-        return leftNum * rightNum;
+        return left * right;
       case "/":
-        if (rightNum === 0) {
+        if (right === 0) {
           logger.warn(`⚠️ 0으로 나누기 시도`);
           return null;
         }
-        return leftNum / rightNum;
+        return left / right;
       case "%":
-        if (rightNum === 0) {
+        if (right === 0) {
           logger.warn(`⚠️ 0으로 나머지 연산 시도`);
           return null;
         }
-        return leftNum % rightNum;
+        return left % right;
       default:
-        throw new Error(`지원하지 않는 연산자: ${arithmetic.operator}`);
+        throw new Error(`지원하지 않는 연산자: ${operator}`);
     }
   }
 
diff --git a/backend-node/src/services/tableCategoryValueService.ts b/backend-node/src/services/tableCategoryValueService.ts
index 1638a417..9cbbc521 100644
--- a/backend-node/src/services/tableCategoryValueService.ts
+++ b/backend-node/src/services/tableCategoryValueService.ts
@@ -187,71 +187,68 @@ class TableCategoryValueService {
         logger.info("형제 메뉴 OBJID 목록", { menuObjid, siblingObjids });
       }
       
-      // 2. 카테고리 값 조회 (형제 메뉴 포함)
+      // 2. 카테고리 값 조회 (메뉴 스코프 또는 형제 메뉴 포함)
       let query: string;
       let params: any[];
       
+      const baseSelect = `
+        SELECT 
+          value_id AS "valueId",
+          table_name AS "tableName",
+          column_name AS "columnName",
+          value_code AS "valueCode",
+          value_label AS "valueLabel",
+          value_order AS "valueOrder",
+          parent_value_id AS "parentValueId",
+          depth,
+          description,
+          color,
+          icon,
+          is_active AS "isActive",
+          is_default AS "isDefault",
+          company_code AS "companyCode",
+          menu_objid AS "menuObjid",
+          created_at AS "createdAt",
+          updated_at AS "updatedAt",
+          created_by AS "createdBy",
+          updated_by AS "updatedBy"
+        FROM table_column_category_values
+        WHERE table_name = $1
+          AND column_name = $2
+      `;
+      
       if (companyCode === "*") {
-        // 최고 관리자: 모든 카테고리 값 조회
-        // 메뉴 스코프 제거: 같은 테이블.컬럼 조합은 모든 메뉴에서 공유
-        query = `
-          SELECT 
-            value_id AS "valueId",
-            table_name AS "tableName",
-            column_name AS "columnName",
-            value_code AS "valueCode",
-            value_label AS "valueLabel",
-            value_order AS "valueOrder",
-            parent_value_id AS "parentValueId",
-            depth,
-            description,
-            color,
-            icon,
-            is_active AS "isActive",
-            is_default AS "isDefault",
-            company_code AS "companyCode",
-            menu_objid AS "menuObjid",
-            created_at AS "createdAt",
-            updated_at AS "updatedAt",
-            created_by AS "createdBy",
-            updated_by AS "updatedBy"
-          FROM table_column_category_values
-          WHERE table_name = $1
-            AND column_name = $2
-        `;
-        params = [tableName, columnName];
-        logger.info("최고 관리자 카테고리 값 조회");
+        // 최고 관리자: menuObjid가 있으면 해당 메뉴(및 형제 메뉴)의 값만 조회
+        if (menuObjid && siblingObjids.length > 0) {
+          query = baseSelect + ` AND menu_objid = ANY($3::numeric[])`;
+          params = [tableName, columnName, siblingObjids];
+          logger.info("최고 관리자 메뉴 스코프 카테고리 값 조회", { menuObjid, siblingObjids });
+        } else if (menuObjid) {
+          query = baseSelect + ` AND menu_objid = $3`;
+          params = [tableName, columnName, menuObjid];
+          logger.info("최고 관리자 단일 메뉴 카테고리 값 조회", { menuObjid });
+        } else {
+          // menuObjid 없으면 모든 값 조회 (중복 가능)
+          query = baseSelect;
+          params = [tableName, columnName];
+          logger.info("최고 관리자 전체 카테고리 값 조회 (menuObjid 없음)");
+        }
       } else {
-        // 일반 회사: 자신의 카테고리 값만 조회
-        // 메뉴 스코프 제거: 같은 테이블.컬럼 조합은 모든 메뉴에서 공유
-        query = `
-          SELECT 
-            value_id AS "valueId",
-            table_name AS "tableName",
-            column_name AS "columnName",
-            value_code AS "valueCode",
-            value_label AS "valueLabel",
-            value_order AS "valueOrder",
-            parent_value_id AS "parentValueId",
-            depth,
-            description,
-            color,
-            icon,
-            is_active AS "isActive",
-            is_default AS "isDefault",
-            company_code AS "companyCode",
-            menu_objid AS "menuObjid",
-            created_at AS "createdAt",
-            updated_at AS "updatedAt",
-            created_by AS "createdBy",
-            updated_by AS "updatedBy"
-          FROM table_column_category_values
-          WHERE table_name = $1
-            AND column_name = $2
-            AND company_code = $3
-        `;
-        params = [tableName, columnName, companyCode];
-        logger.info("회사별 카테고리 값 조회", { companyCode });
+        // 일반 회사: 자신의 회사 + menuObjid로 필터링
+        if (menuObjid && siblingObjids.length > 0) {
+          query = baseSelect + ` AND company_code = $3 AND menu_objid = ANY($4::numeric[])`;
+          params = [tableName, columnName, companyCode, siblingObjids];
+          logger.info("회사별 메뉴 스코프 카테고리 값 조회", { companyCode, menuObjid, siblingObjids });
+        } else if (menuObjid) {
+          query = baseSelect + ` AND company_code = $3 AND menu_objid = $4`;
+          params = [tableName, columnName, companyCode, menuObjid];
+          logger.info("회사별 단일 메뉴 카테고리 값 조회", { companyCode, menuObjid });
+        } else {
+          // menuObjid 없으면 회사 전체 조회 (중복 가능하지만 회사별로 제한)
+          query = baseSelect + ` AND company_code = $3`;
+          params = [tableName, columnName, companyCode];
+          logger.info("회사별 카테고리 값 조회 (menuObjid 없음)", { companyCode });
+        }
       }
 
       if (!includeInactive) {
@@ -1398,6 +1395,220 @@ class TableCategoryValueService {
       throw error;
     }
   }
+
+  /**
+   * 테이블의 카테고리 타입 컬럼과 해당 값 매핑 조회 (라벨 → 코드 변환용)
+   * 
+   * 엑셀 업로드 등에서 라벨 값을 코드 값으로 변환할 때 사용
+   * 
+   * @param tableName - 테이블명
+   * @param companyCode - 회사 코드
+   * @returns { [columnName]: { [label]: code } } 형태의 매핑 객체
+   */
+  async getCategoryLabelToCodeMapping(
+    tableName: string,
+    companyCode: string
+  ): Promise<Record<string, Record<string, string>>> {
+    try {
+      logger.info("카테고리 라벨→코드 매핑 조회", { tableName, companyCode });
+
+      const pool = getPool();
+
+      // 1. 해당 테이블의 카테고리 타입 컬럼 조회
+      const categoryColumnsQuery = `
+        SELECT column_name
+        FROM table_type_columns
+        WHERE table_name = $1
+          AND input_type = 'category'
+      `;
+      const categoryColumnsResult = await pool.query(categoryColumnsQuery, [tableName]);
+      
+      if (categoryColumnsResult.rows.length === 0) {
+        logger.info("카테고리 타입 컬럼 없음", { tableName });
+        return {};
+      }
+
+      const categoryColumns = categoryColumnsResult.rows.map(row => row.column_name);
+      logger.info(`카테고리 컬럼 ${categoryColumns.length}개 발견`, { categoryColumns });
+
+      // 2. 각 카테고리 컬럼의 라벨→코드 매핑 조회
+      const result: Record<string, Record<string, string>> = {};
+
+      for (const columnName of categoryColumns) {
+        let query: string;
+        let params: any[];
+
+        if (companyCode === "*") {
+          // 최고 관리자: 모든 카테고리 값 조회
+          query = `
+            SELECT value_code, value_label
+            FROM table_column_category_values
+            WHERE table_name = $1
+              AND column_name = $2
+              AND is_active = true
+          `;
+          params = [tableName, columnName];
+        } else {
+          // 일반 회사: 자신의 카테고리 값 + 공통 카테고리 값 조회
+          query = `
+            SELECT value_code, value_label
+            FROM table_column_category_values
+            WHERE table_name = $1
+              AND column_name = $2
+              AND is_active = true
+              AND (company_code = $3 OR company_code = '*')
+          `;
+          params = [tableName, columnName, companyCode];
+        }
+
+        const valuesResult = await pool.query(query, params);
+
+        // { [label]: code } 형태로 변환
+        const labelToCodeMap: Record<string, string> = {};
+        for (const row of valuesResult.rows) {
+          // 라벨을 소문자로 변환하여 대소문자 구분 없이 매핑
+          labelToCodeMap[row.value_label] = row.value_code;
+          // 소문자 키도 추가 (대소문자 무시 검색용)
+          labelToCodeMap[row.value_label.toLowerCase()] = row.value_code;
+        }
+
+        if (Object.keys(labelToCodeMap).length > 0) {
+          result[columnName] = labelToCodeMap;
+          logger.info(`컬럼 ${columnName}의 라벨→코드 매핑 ${valuesResult.rows.length}개 조회`);
+        }
+      }
+
+      logger.info(`카테고리 라벨→코드 매핑 조회 완료`, { 
+        tableName, 
+        columnCount: Object.keys(result).length 
+      });
+
+      return result;
+    } catch (error: any) {
+      logger.error(`카테고리 라벨→코드 매핑 조회 실패: ${error.message}`, { error });
+      throw error;
+    }
+  }
+
+  /**
+   * 데이터의 카테고리 라벨 값을 코드 값으로 변환
+   * 
+   * 엑셀 업로드 등에서 사용자가 입력한 라벨 값을 DB 저장용 코드 값으로 변환
+   * 
+   * @param tableName - 테이블명
+   * @param companyCode - 회사 코드
+   * @param data - 변환할 데이터 객체
+   * @returns 라벨이 코드로 변환된 데이터 객체
+   */
+  async convertCategoryLabelsToCodesForData(
+    tableName: string,
+    companyCode: string,
+    data: Record<string, any>
+  ): Promise<{ convertedData: Record<string, any>; conversions: Array<{ column: string; label: string; code: string }> }> {
+    try {
+      // 라벨→코드 매핑 조회
+      const labelToCodeMapping = await this.getCategoryLabelToCodeMapping(tableName, companyCode);
+
+      if (Object.keys(labelToCodeMapping).length === 0) {
+        // 카테고리 컬럼 없음
+        return { convertedData: data, conversions: [] };
+      }
+
+      const convertedData = { ...data };
+      const conversions: Array<{ column: string; label: string; code: string }> = [];
+
+      for (const [columnName, labelCodeMap] of Object.entries(labelToCodeMapping)) {
+        const value = data[columnName];
+
+        if (value !== undefined && value !== null && value !== "") {
+          const stringValue = String(value).trim();
+          
+          // 다중 값 확인 (쉼표로 구분된 경우)
+          if (stringValue.includes(",")) {
+            // 다중 카테고리 값 처리
+            const labels = stringValue.split(",").map(s => s.trim()).filter(s => s !== "");
+            const convertedCodes: string[] = [];
+            let allConverted = true;
+
+            for (const label of labels) {
+              // 정확한 라벨 매칭 시도
+              let matchedCode = labelCodeMap[label];
+              
+              // 대소문자 무시 매칭
+              if (!matchedCode) {
+                matchedCode = labelCodeMap[label.toLowerCase()];
+              }
+
+              if (matchedCode) {
+                convertedCodes.push(matchedCode);
+                conversions.push({
+                  column: columnName,
+                  label: label,
+                  code: matchedCode,
+                });
+                logger.info(`카테고리 라벨→코드 변환 (다중): ${columnName} "${label}" → "${matchedCode}"`);
+              } else {
+                // 이미 코드값인지 확인
+                const isAlreadyCode = Object.values(labelCodeMap).includes(label);
+                if (isAlreadyCode) {
+                  // 이미 코드값이면 그대로 사용
+                  convertedCodes.push(label);
+                } else {
+                  // 라벨도 코드도 아니면 원래 값 유지
+                  convertedCodes.push(label);
+                  allConverted = false;
+                  logger.warn(`카테고리 값 매핑 없음 (다중): ${columnName} = "${label}" (라벨도 코드도 아님)`);
+                }
+              }
+            }
+
+            // 변환된 코드들을 쉼표로 합쳐서 저장
+            convertedData[columnName] = convertedCodes.join(",");
+            logger.info(`다중 카테고리 변환 완료: ${columnName} "${stringValue}" → "${convertedData[columnName]}"`);
+          } else {
+            // 단일 값 처리
+            // 정확한 라벨 매칭 시도
+            let matchedCode = labelCodeMap[stringValue];
+            
+            // 대소문자 무시 매칭
+            if (!matchedCode) {
+              matchedCode = labelCodeMap[stringValue.toLowerCase()];
+            }
+
+            if (matchedCode) {
+              // 라벨 값을 코드 값으로 변환
+              convertedData[columnName] = matchedCode;
+              conversions.push({
+                column: columnName,
+                label: stringValue,
+                code: matchedCode,
+              });
+              logger.info(`카테고리 라벨→코드 변환: ${columnName} "${stringValue}" → "${matchedCode}"`);
+            } else {
+              // 이미 코드값인지 확인 (역방향 확인)
+              const isAlreadyCode = Object.values(labelCodeMap).includes(stringValue);
+              if (!isAlreadyCode) {
+                logger.warn(`카테고리 값 매핑 없음: ${columnName} = "${stringValue}" (라벨도 코드도 아님)`);
+              }
+              // 변환 없이 원래 값 유지
+            }
+          }
+        }
+      }
+
+      logger.info(`카테고리 라벨→코드 변환 완료`, {
+        tableName,
+        conversionCount: conversions.length,
+        conversions,
+      });
+
+      return { convertedData, conversions };
+    } catch (error: any) {
+      logger.error(`카테고리 라벨→코드 변환 실패: ${error.message}`, { error });
+      // 실패 시 원본 데이터 반환
+      return { convertedData: data, conversions: [] };
+    }
+  }
 }
 
 export default new TableCategoryValueService();
diff --git a/backend-node/src/services/tableManagementService.ts b/backend-node/src/services/tableManagementService.ts
index b714b186..2e67040a 100644
--- a/backend-node/src/services/tableManagementService.ts
+++ b/backend-node/src/services/tableManagementService.ts
@@ -1306,6 +1306,41 @@ export class TableManagementService {
     paramCount: number;
   } | null> {
     try {
+      // 🆕 배열 값 처리 (다중 값 검색 - 분할패널 엔티티 타입에서 "2,3" 형태 지원)
+      // 좌측에서 "2"를 선택해도, 우측에서 "2,3"을 가진 행이 표시되도록 함
+      if (Array.isArray(value) && value.length > 0) {
+        // 배열의 각 값에 대해 OR 조건으로 검색
+        // 우측 컬럼에 "2,3" 같은 다중 값이 있을 수 있으므로
+        // 각 값을 LIKE 또는 = 조건으로 처리
+        const conditions: string[] = [];
+        const values: any[] = [];
+        
+        value.forEach((v: any, idx: number) => {
+          const safeValue = String(v).trim();
+          // 정확히 일치하거나, 콤마로 구분된 값 중 하나로 포함
+          // 예: "2,3" 컬럼에서 "2"를 찾으려면:
+          // - 정확히 "2"
+          // - "2," 로 시작
+          // - ",2" 로 끝남
+          // - ",2," 중간에 포함
+          const paramBase = paramIndex + (idx * 4);
+          conditions.push(`(
+            ${columnName}::text = $${paramBase} OR
+            ${columnName}::text LIKE $${paramBase + 1} OR
+            ${columnName}::text LIKE $${paramBase + 2} OR
+            ${columnName}::text LIKE $${paramBase + 3}
+          )`);
+          values.push(safeValue, `${safeValue},%`, `%,${safeValue}`, `%,${safeValue},%`);
+        });
+
+        logger.info(`🔍 다중 값 배열 검색: ${columnName} IN [${value.join(", ")}]`);
+        return {
+          whereClause: `(${conditions.join(" OR ")})`,
+          values,
+          paramCount: values.length,
+        };
+      }
+
       // 🔧 파이프로 구분된 문자열 처리 (다중선택 또는 날짜 범위)
       if (typeof value === "string" && value.includes("|")) {
         const columnInfo = await this.getColumnWebTypeInfo(
@@ -2261,11 +2296,12 @@ export class TableManagementService {
 
   /**
    * 테이블에 데이터 추가
+   * @returns 무시된 컬럼 정보 (디버깅용)
    */
   async addTableData(
     tableName: string,
     data: Record<string, any>
-  ): Promise<void> {
+  ): Promise<{ skippedColumns: string[]; savedColumns: string[] }> {
     try {
       logger.info(`=== 테이블 데이터 추가 시작: ${tableName} ===`);
       logger.info(`추가할 데이터:`, data);
@@ -2296,10 +2332,41 @@ export class TableManagementService {
         logger.info(`created_date 자동 추가: ${data.created_date}`);
       }
 
-      // 컬럼명과 값을 분리하고 타입에 맞게 변환
-      const columns = Object.keys(data);
-      const values = Object.values(data).map((value, index) => {
-        const columnName = columns[index];
+      // 🆕 테이블에 존재하는 컬럼만 필터링 (존재하지 않는 컬럼은 무시)
+      const skippedColumns: string[] = [];
+      const existingColumns = Object.keys(data).filter((col) => {
+        const exists = columnTypeMap.has(col);
+        if (!exists) {
+          skippedColumns.push(col);
+        }
+        return exists;
+      });
+
+      // 무시된 컬럼이 있으면 경고 로그 출력
+      if (skippedColumns.length > 0) {
+        logger.warn(
+          `⚠️ [${tableName}] 테이블에 존재하지 않는 컬럼 ${skippedColumns.length}개 무시됨: ${skippedColumns.join(", ")}`
+        );
+        logger.warn(
+          `⚠️ [${tableName}] 무시된 컬럼 상세:`,
+          skippedColumns.map((col) => ({ column: col, value: data[col] }))
+        );
+      }
+
+      if (existingColumns.length === 0) {
+        throw new Error(
+          `저장할 유효한 컬럼이 없습니다. 테이블: ${tableName}, 전달된 컬럼: ${Object.keys(data).join(", ")}`
+        );
+      }
+
+      logger.info(
+        `✅ [${tableName}] 저장될 컬럼 ${existingColumns.length}개: ${existingColumns.join(", ")}`
+      );
+
+      // 컬럼명과 값을 분리하고 타입에 맞게 변환 (존재하는 컬럼만)
+      const columns = existingColumns;
+      const values = columns.map((columnName) => {
+        const value = data[columnName];
         const dataType = columnTypeMap.get(columnName) || "text";
         const convertedValue = this.convertValueForPostgreSQL(value, dataType);
         logger.info(
@@ -2355,6 +2422,12 @@ export class TableManagementService {
       await query(insertQuery, values);
 
       logger.info(`테이블 데이터 추가 완료: ${tableName}`);
+
+      // 무시된 컬럼과 저장된 컬럼 정보 반환
+      return {
+        skippedColumns,
+        savedColumns: existingColumns,
+      };
     } catch (error) {
       logger.error(`테이블 데이터 추가 오류: ${tableName}`, error);
       throw error;
@@ -2409,11 +2482,19 @@ export class TableManagementService {
       }
 
       // SET 절 생성 (수정할 데이터) - 먼저 생성
+      // 🔧 테이블에 존재하는 컬럼만 UPDATE (가상 컬럼 제외)
       const setConditions: string[] = [];
       const setValues: any[] = [];
       let paramIndex = 1;
+      const skippedColumns: string[] = [];
 
       Object.keys(updatedData).forEach((column) => {
+        // 테이블에 존재하지 않는 컬럼은 스킵
+        if (!columnTypeMap.has(column)) {
+          skippedColumns.push(column);
+          return;
+        }
+        
         const dataType = columnTypeMap.get(column) || "text";
         setConditions.push(
           `"${column}" = $${paramIndex}::${this.getPostgreSQLType(dataType)}`
@@ -2424,6 +2505,10 @@ export class TableManagementService {
         paramIndex++;
       });
 
+      if (skippedColumns.length > 0) {
+        logger.info(`⚠️ 테이블에 존재하지 않는 컬럼 스킵: ${skippedColumns.join(", ")}`);
+      }
+
       // WHERE 조건 생성 (PRIMARY KEY 우선, 없으면 모든 원본 데이터 사용)
       let whereConditions: string[] = [];
       let whereValues: any[] = [];
@@ -2626,6 +2711,12 @@ export class TableManagementService {
         filterColumn?: string;
         filterValue?: any;
       }; // 🆕 제외 필터 (다른 테이블에 이미 존재하는 데이터 제외)
+      deduplication?: {
+        enabled: boolean;
+        groupByColumn: string;
+        keepStrategy: "latest" | "earliest" | "base_price" | "current_date";
+        sortColumn?: string;
+      }; // 🆕 중복 제거 설정
     }
   ): Promise<EntityJoinResponse> {
     const startTime = Date.now();
@@ -2676,33 +2767,64 @@ export class TableManagementService {
         );
 
         for (const additionalColumn of options.additionalJoinColumns) {
-          // 🔍 sourceColumn을 기준으로 기존 조인 설정 찾기 (dept_code로 찾기)
-          const baseJoinConfig = joinConfigs.find(
+          // 🔍 1차: sourceColumn을 기준으로 기존 조인 설정 찾기
+          let baseJoinConfig = joinConfigs.find(
             (config) => config.sourceColumn === additionalColumn.sourceColumn
           );
 
+          // 🔍 2차: referenceTable을 기준으로 찾기 (프론트엔드가 customer_mng.customer_name 같은 형식을 요청할 때)
+          // 실제 소스 컬럼이 partner_id인데 프론트엔드가 customer_id로 추론하는 경우 대응
+          if (!baseJoinConfig && (additionalColumn as any).referenceTable) {
+            baseJoinConfig = joinConfigs.find(
+              (config) => config.referenceTable === (additionalColumn as any).referenceTable
+            );
+            if (baseJoinConfig) {
+              logger.info(`🔄 referenceTable로 조인 설정 찾음: ${(additionalColumn as any).referenceTable} → ${baseJoinConfig.sourceColumn}`);
+            }
+          }
+
           if (baseJoinConfig) {
-            // joinAlias에서 실제 컬럼명 추출 (예: dept_code_location_name -> location_name)
-            // sourceColumn을 제거한 나머지 부분이 실제 컬럼명
-            const sourceColumn = baseJoinConfig.sourceColumn; // dept_code
-            const joinAlias = additionalColumn.joinAlias; // dept_code_company_name
-            const actualColumnName = joinAlias.replace(`${sourceColumn}_`, ""); // company_name
+            // joinAlias에서 실제 컬럼명 추출
+            const sourceColumn = baseJoinConfig.sourceColumn; // 실제 소스 컬럼 (예: partner_id)
+            const originalJoinAlias = additionalColumn.joinAlias; // 프론트엔드가 보낸 별칭 (예: customer_id_customer_name)
+            
+            // 🔄 프론트엔드가 잘못된 소스 컬럼으로 추론한 경우 처리
+            // customer_id_customer_name → customer_name 추출 (customer_id_ 부분 제거)
+            // 또는 partner_id_customer_name → customer_name 추출 (partner_id_ 부분 제거)
+            let actualColumnName: string;
+            
+            // 프론트엔드가 보낸 joinAlias에서 실제 컬럼명 추출
+            const frontendSourceColumn = additionalColumn.sourceColumn; // 프론트엔드가 추론한 소스 컬럼 (customer_id)
+            if (originalJoinAlias.startsWith(`${frontendSourceColumn}_`)) {
+              // 프론트엔드가 추론한 소스 컬럼으로 시작하면 그 부분 제거
+              actualColumnName = originalJoinAlias.replace(`${frontendSourceColumn}_`, "");
+            } else if (originalJoinAlias.startsWith(`${sourceColumn}_`)) {
+              // 실제 소스 컬럼으로 시작하면 그 부분 제거
+              actualColumnName = originalJoinAlias.replace(`${sourceColumn}_`, "");
+            } else {
+              // 어느 것도 아니면 원본 사용
+              actualColumnName = originalJoinAlias;
+            }
+            
+            // 🆕 올바른 joinAlias 재생성 (실제 소스 컬럼 기반)
+            const correctedJoinAlias = `${sourceColumn}_${actualColumnName}`;
 
             logger.info(`🔍 조인 컬럼 상세 분석:`, {
               sourceColumn,
-              joinAlias,
+              frontendSourceColumn,
+              originalJoinAlias,
+              correctedJoinAlias,
               actualColumnName,
-              referenceTable: additionalColumn.sourceTable,
+              referenceTable: (additionalColumn as any).referenceTable,
             });
 
             // 🚨 기본 Entity 조인과 중복되지 않도록 체크
             const isBasicEntityJoin =
-              additionalColumn.joinAlias ===
-              `${baseJoinConfig.sourceColumn}_name`;
+              correctedJoinAlias === `${sourceColumn}_name`;
 
             if (isBasicEntityJoin) {
               logger.info(
-                `⚠️ 기본 Entity 조인과 중복: ${additionalColumn.joinAlias} - 건너뜀`
+                `⚠️ 기본 Entity 조인과 중복: ${correctedJoinAlias} - 건너뜀`
               );
               continue; // 기본 Entity 조인과 중복되면 추가하지 않음
             }
@@ -2710,14 +2832,14 @@ export class TableManagementService {
             // 추가 조인 컬럼 설정 생성
             const additionalJoinConfig: EntityJoinConfig = {
               sourceTable: tableName,
-              sourceColumn: baseJoinConfig.sourceColumn, // 원본 컬럼 (dept_code)
+              sourceColumn: sourceColumn, // 실제 소스 컬럼 (partner_id)
               referenceTable:
                 (additionalColumn as any).referenceTable ||
-                baseJoinConfig.referenceTable, // 참조 테이블 (dept_info)
-              referenceColumn: baseJoinConfig.referenceColumn, // 참조 키 (dept_code)
-              displayColumns: [actualColumnName], // 표시할 컬럼들 (company_name)
+                baseJoinConfig.referenceTable, // 참조 테이블 (customer_mng)
+              referenceColumn: baseJoinConfig.referenceColumn, // 참조 키 (customer_code)
+              displayColumns: [actualColumnName], // 표시할 컬럼들 (customer_name)
               displayColumn: actualColumnName, // 하위 호환성
-              aliasColumn: additionalColumn.joinAlias, // 별칭 (dept_code_company_name)
+              aliasColumn: correctedJoinAlias, // 수정된 별칭 (partner_id_customer_name)
               separator: " - ", // 기본 구분자
             };
 
@@ -3684,6 +3806,15 @@ export class TableManagementService {
     const cacheableJoins: EntityJoinConfig[] = [];
     const dbJoins: EntityJoinConfig[] = [];
 
+    // 🔒 멀티테넌시: 회사별 데이터 테이블은 캐시 사용 불가 (company_code 필터링 필요)
+    const companySpecificTables = [
+      "supplier_mng",
+      "customer_mng", 
+      "item_info",
+      "dept_info",
+      // 필요시 추가
+    ];
+
     for (const config of joinConfigs) {
       // table_column_category_values는 특수 조인 조건이 필요하므로 항상 DB 조인
       if (config.referenceTable === "table_column_category_values") {
@@ -3692,6 +3823,13 @@ export class TableManagementService {
         continue;
       }
 
+      // 🔒 회사별 데이터 테이블은 캐시 사용 불가 (멀티테넌시)
+      if (companySpecificTables.includes(config.referenceTable)) {
+        dbJoins.push(config);
+        console.log(`🔗 DB 조인 (멀티테넌시): ${config.referenceTable}`);
+        continue;
+      }
+
       // 캐시 가능성 확인
       const cachedData = await referenceCacheService.getCachedReference(
         config.referenceTable,
@@ -3930,9 +4068,10 @@ export class TableManagementService {
         `컬럼 입력타입 정보 조회: ${tableName}, company: ${companyCode}`
       );
 
-      // table_type_columns에서 입력타입 정보 조회 (company_code 필터링)
+      // table_type_columns에서 입력타입 정보 조회
+      // 회사별 설정 우선, 없으면 기본 설정(*) fallback
       const rawInputTypes = await query<any>(
-        `SELECT 
+        `SELECT DISTINCT ON (ttc.column_name)
           ttc.column_name as "columnName",
           COALESCE(cl.column_label, ttc.column_name) as "displayName",
           ttc.input_type as "inputType",
@@ -3946,8 +4085,10 @@ export class TableManagementService {
         LEFT JOIN information_schema.columns ic 
           ON ttc.table_name = ic.table_name AND ttc.column_name = ic.column_name
         WHERE ttc.table_name = $1 
-          AND ttc.company_code = $2
-        ORDER BY ttc.display_order, ttc.column_name`,
+          AND ttc.company_code IN ($2, '*')
+        ORDER BY ttc.column_name, 
+          CASE WHEN ttc.company_code = $2 THEN 0 ELSE 1 END,
+          ttc.display_order`,
         [tableName, companyCode]
       );
 
@@ -3961,17 +4102,20 @@ export class TableManagementService {
       const mappingTableExists = tableExistsResult[0]?.table_exists === true;
 
       // 카테고리 컬럼의 경우, 매핑된 메뉴 목록 조회
+      // 회사별 설정 우선, 없으면 기본 설정(*) fallback
       let categoryMappings: Map<string, number[]> = new Map();
       if (mappingTableExists) {
         logger.info("카테고리 매핑 조회 시작", { tableName, companyCode });
 
         const mappings = await query<any>(
-          `SELECT 
+          `SELECT DISTINCT ON (logical_column_name, menu_objid)
             logical_column_name as "columnName",
             menu_objid as "menuObjid"
           FROM category_column_mapping
           WHERE table_name = $1 
-            AND company_code = $2`,
+            AND company_code IN ($2, '*')
+          ORDER BY logical_column_name, menu_objid,
+            CASE WHEN company_code = $2 THEN 0 ELSE 1 END`,
           [tableName, companyCode]
         );
 
@@ -4574,4 +4718,101 @@ export class TableManagementService {
       return false;
     }
   }
+
+  /**
+   * 두 테이블 간의 엔티티 관계 자동 감지
+   * column_labels에서 엔티티 타입 설정을 기반으로 테이블 간 관계를 찾습니다.
+   * 
+   * @param leftTable 좌측 테이블명
+   * @param rightTable 우측 테이블명
+   * @returns 감지된 엔티티 관계 배열
+   */
+  async detectTableEntityRelations(
+    leftTable: string,
+    rightTable: string
+  ): Promise<Array<{
+    leftColumn: string;
+    rightColumn: string;
+    direction: "left_to_right" | "right_to_left";
+    inputType: string;
+    displayColumn?: string;
+  }>> {
+    try {
+      logger.info(`두 테이블 간 엔티티 관계 감지 시작: ${leftTable} <-> ${rightTable}`);
+      
+      const relations: Array<{
+        leftColumn: string;
+        rightColumn: string;
+        direction: "left_to_right" | "right_to_left";
+        inputType: string;
+        displayColumn?: string;
+      }> = [];
+
+      // 1. 우측 테이블에서 좌측 테이블을 참조하는 엔티티 컬럼 찾기
+      // 예: right_table의 customer_id -> left_table(customer_mng)의 customer_code
+      const rightToLeftRels = await query<{
+        column_name: string;
+        reference_column: string;
+        input_type: string;
+        display_column: string | null;
+      }>(
+        `SELECT column_name, reference_column, input_type, display_column
+         FROM column_labels
+         WHERE table_name = $1 
+         AND input_type IN ('entity', 'category')
+         AND reference_table = $2
+         AND reference_column IS NOT NULL 
+         AND reference_column != ''`,
+        [rightTable, leftTable]
+      );
+
+      for (const rel of rightToLeftRels) {
+        relations.push({
+          leftColumn: rel.reference_column,
+          rightColumn: rel.column_name,
+          direction: "right_to_left",
+          inputType: rel.input_type,
+          displayColumn: rel.display_column || undefined,
+        });
+      }
+
+      // 2. 좌측 테이블에서 우측 테이블을 참조하는 엔티티 컬럼 찾기
+      // 예: left_table의 item_id -> right_table(item_info)의 item_number
+      const leftToRightRels = await query<{
+        column_name: string;
+        reference_column: string;
+        input_type: string;
+        display_column: string | null;
+      }>(
+        `SELECT column_name, reference_column, input_type, display_column
+         FROM column_labels
+         WHERE table_name = $1 
+         AND input_type IN ('entity', 'category')
+         AND reference_table = $2
+         AND reference_column IS NOT NULL 
+         AND reference_column != ''`,
+        [leftTable, rightTable]
+      );
+
+      for (const rel of leftToRightRels) {
+        relations.push({
+          leftColumn: rel.column_name,
+          rightColumn: rel.reference_column,
+          direction: "left_to_right",
+          inputType: rel.input_type,
+          displayColumn: rel.display_column || undefined,
+        });
+      }
+
+      logger.info(`엔티티 관계 감지 완료: ${relations.length}개 발견`);
+      relations.forEach((rel, idx) => {
+        logger.info(`  ${idx + 1}. ${leftTable}.${rel.leftColumn} <-> ${rightTable}.${rel.rightColumn} (${rel.direction})`);
+      });
+
+      return relations;
+    } catch (error) {
+      logger.error(`엔티티 관계 감지 실패: ${leftTable} <-> ${rightTable}`, error);
+      return [];
+    }
+  }
 }
diff --git a/backend-node/src/types/multilang.ts b/backend-node/src/types/multilang.ts
index 8ad8adb6..c30fdfaa 100644
--- a/backend-node/src/types/multilang.ts
+++ b/backend-node/src/types/multilang.ts
@@ -17,12 +17,30 @@ export interface LangKey {
   langKey: string;
   description?: string;
   isActive: string;
+  categoryId?: number;
+  keyMeaning?: string;
+  usageNote?: string;
+  baseKeyId?: number;
   createdDate?: Date;
   createdBy?: string;
   updatedDate?: Date;
   updatedBy?: string;
 }
 
+// 카테고리 인터페이스
+export interface LangCategory {
+  categoryId: number;
+  categoryCode: string;
+  categoryName: string;
+  parentId?: number | null;
+  level: number;
+  keyPrefix: string;
+  description?: string;
+  sortOrder: number;
+  isActive: string;
+  children?: LangCategory[];
+}
+
 export interface LangText {
   textId?: number;
   keyId: number;
@@ -63,10 +81,38 @@ export interface CreateLangKeyRequest {
   langKey: string;
   description?: string;
   isActive?: string;
+  categoryId?: number;
+  keyMeaning?: string;
+  usageNote?: string;
+  baseKeyId?: number;
   createdBy?: string;
   updatedBy?: string;
 }
 
+// 자동 키 생성 요청
+export interface GenerateKeyRequest {
+  companyCode: string;
+  categoryId: number;
+  keyMeaning: string;
+  usageNote?: string;
+  texts: Array<{
+    langCode: string;
+    langText: string;
+  }>;
+  createdBy?: string;
+}
+
+// 오버라이드 키 생성 요청
+export interface CreateOverrideKeyRequest {
+  companyCode: string;
+  baseKeyId: number;
+  texts: Array<{
+    langCode: string;
+    langText: string;
+  }>;
+  createdBy?: string;
+}
+
 export interface UpdateLangKeyRequest {
   companyCode?: string;
   menuName?: string;
@@ -90,6 +136,8 @@ export interface GetLangKeysParams {
   menuCode?: string;
   keyType?: string;
   searchText?: string;
+  categoryId?: number;
+  includeOverrides?: boolean;
   page?: number;
   limit?: number;
 }
diff --git a/docs/노드플로우_개선사항.md b/docs/노드플로우_개선사항.md
index c9349b94..a59f4499 100644
--- a/docs/노드플로우_개선사항.md
+++ b/docs/노드플로우_개선사항.md
@@ -587,3 +587,5 @@ const result = await executeNodeFlow(flowId, {
 
 
 
+
+
diff --git a/docs/다국어_관리_시스템_개선_계획서.md b/docs/다국어_관리_시스템_개선_계획서.md
new file mode 100644
index 00000000..24ca5850
--- /dev/null
+++ b/docs/다국어_관리_시스템_개선_계획서.md
@@ -0,0 +1,597 @@
+# 다국어 관리 시스템 개선 계획서
+
+## 1. 개요
+
+### 1.1 현재 시스템 분석
+
+현재 ERP 시스템의 다국어 관리 시스템은 기본적인 기능은 갖추고 있으나 다음과 같은 한계점이 있습니다.
+
+| 항목 | 현재 상태 | 문제점 |
+|------|----------|--------|
+| 회사별 다국어 | `company_code` 컬럼 존재하나 `*`(공통)만 사용 | 회사별 커스텀 번역 불가 |
+| 언어 키 입력 | 수동 입력 (`button.add` 등) | 명명 규칙 불일치, 오타, 중복 위험 |
+| 카테고리 분류 | 없음 (`menu_name` 텍스트만 존재) | 체계적 분류/검색 불가 |
+| 권한 관리 | 없음 | 모든 사용자가 모든 키 수정 가능 |
+| 조회 우선순위 | 없음 | 회사별 오버라이드 불가 |
+
+### 1.2 개선 목표
+
+1. **회사별 다국어 오버라이드 시스템**: 공통 키를 기본으로 사용하되, 회사별 커스텀 번역 지원
+2. **권한 기반 접근 제어**: 공통 키는 최고 관리자만, 회사 키는 해당 회사만 수정
+3. **카테고리 기반 분류**: 2단계 계층 구조로 체계적 분류
+4. **자동 키 생성**: 카테고리 선택 + 의미 입력으로 규칙화된 키 자동 생성
+5. **실시간 중복 체크**: 키 생성 시 중복 여부 즉시 확인
+
+---
+
+## 2. 데이터베이스 스키마 설계
+
+### 2.1 신규 테이블: multi_lang_category (카테고리 마스터)
+
+```sql
+CREATE TABLE multi_lang_category (
+  category_id SERIAL PRIMARY KEY,
+  category_code VARCHAR(50) NOT NULL,           -- BUTTON, FORM, MESSAGE 등
+  category_name VARCHAR(100) NOT NULL,          -- 버튼, 폼, 메시지 등
+  parent_id INT4 REFERENCES multi_lang_category(category_id),
+  level INT4 DEFAULT 1,                         -- 1=대분류, 2=세부분류
+  key_prefix VARCHAR(50) NOT NULL,              -- 키 생성용 prefix
+  description TEXT,
+  sort_order INT4 DEFAULT 0,
+  is_active CHAR(1) DEFAULT 'Y',
+  created_date TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+  created_by VARCHAR(50),
+  updated_date TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+  updated_by VARCHAR(50),
+  UNIQUE(category_code, COALESCE(parent_id, 0))
+);
+
+-- 인덱스
+CREATE INDEX idx_lang_category_parent ON multi_lang_category(parent_id);
+CREATE INDEX idx_lang_category_level ON multi_lang_category(level);
+```
+
+### 2.2 기존 테이블 수정: multi_lang_key_master
+
+```sql
+-- 카테고리 연결 컬럼 추가
+ALTER TABLE multi_lang_key_master 
+ADD COLUMN category_id INT4 REFERENCES multi_lang_category(category_id);
+
+-- 키 의미 컬럼 추가 (자동 생성 시 사용자 입력값)
+ALTER TABLE multi_lang_key_master 
+ADD COLUMN key_meaning VARCHAR(100);
+
+-- 원본 키 참조 (오버라이드 시 원본 추적)
+ALTER TABLE multi_lang_key_master 
+ADD COLUMN base_key_id INT4 REFERENCES multi_lang_key_master(key_id);
+
+-- menu_name을 usage_note로 변경 (사용 위치 메모)
+ALTER TABLE multi_lang_key_master 
+RENAME COLUMN menu_name TO usage_note;
+
+-- 인덱스 추가
+CREATE INDEX idx_lang_key_category ON multi_lang_key_master(category_id);
+CREATE INDEX idx_lang_key_company_category ON multi_lang_key_master(company_code, category_id);
+CREATE INDEX idx_lang_key_base ON multi_lang_key_master(base_key_id);
+```
+
+### 2.3 테이블 관계도
+
+```
+multi_lang_category (1) ◀────────┐
+  ├── category_id (PK)            │
+  ├── category_code               │
+  ├── parent_id (자기참조)         │
+  └── key_prefix                  │
+                                  │
+multi_lang_key_master (N) ────────┘
+  ├── key_id (PK)
+  ├── company_code ('*' = 공통)
+  ├── category_id (FK)
+  ├── lang_key (자동 생성)
+  ├── key_meaning (사용자 입력)
+  ├── base_key_id (오버라이드 시 원본)
+  └── usage_note (사용 위치 메모)
+              │
+              ▼
+multi_lang_text (N)
+  ├── text_id (PK)
+  ├── key_id (FK)
+  ├── lang_code (FK → language_master)
+  └── lang_text
+```
+
+---
+
+## 3. 카테고리 체계
+
+### 3.1 대분류 (Level 1)
+
+| category_code | category_name | key_prefix | 설명 |
+|---------------|---------------|------------|------|
+| COMMON | 공통 | common | 범용 텍스트 |
+| BUTTON | 버튼 | button | 버튼 텍스트 |
+| FORM | 폼 | form | 폼 라벨, 플레이스홀더 |
+| TABLE | 테이블 | table | 테이블 헤더, 빈 상태 |
+| MESSAGE | 메시지 | message | 알림, 경고, 성공 메시지 |
+| MENU | 메뉴 | menu | 메뉴명, 네비게이션 |
+| MODAL | 모달 | modal | 모달/다이얼로그 |
+| VALIDATION | 검증 | validation | 유효성 검사 메시지 |
+| STATUS | 상태 | status | 상태 표시 텍스트 |
+| TOOLTIP | 툴팁 | tooltip | 툴팁, 도움말 |
+
+### 3.2 세부분류 (Level 2)
+
+#### BUTTON 하위
+| category_code | category_name | key_prefix |
+|---------------|---------------|------------|
+| ACTION | 액션 | action |
+| NAVIGATION | 네비게이션 | nav |
+| TOGGLE | 토글 | toggle |
+
+#### FORM 하위
+| category_code | category_name | key_prefix |
+|---------------|---------------|------------|
+| LABEL | 라벨 | label |
+| PLACEHOLDER | 플레이스홀더 | placeholder |
+| HELPER | 도움말 | helper |
+
+#### MESSAGE 하위
+| category_code | category_name | key_prefix |
+|---------------|---------------|------------|
+| SUCCESS | 성공 | success |
+| ERROR | 에러 | error |
+| WARNING | 경고 | warning |
+| INFO | 안내 | info |
+| CONFIRM | 확인 | confirm |
+
+#### TABLE 하위
+| category_code | category_name | key_prefix |
+|---------------|---------------|------------|
+| HEADER | 헤더 | header |
+| EMPTY | 빈 상태 | empty |
+| PAGINATION | 페이지네이션 | pagination |
+
+#### MENU 하위
+| category_code | category_name | key_prefix |
+|---------------|---------------|------------|
+| ADMIN | 관리자 | admin |
+| USER | 사용자 | user |
+
+#### MODAL 하위
+| category_code | category_name | key_prefix |
+|---------------|---------------|------------|
+| TITLE | 제목 | title |
+| DESCRIPTION | 설명 | description |
+
+### 3.3 키 자동 생성 규칙
+
+**형식**: `{대분류_prefix}.{세부분류_prefix}.{key_meaning}`
+
+**예시**:
+| 대분류 | 세부분류 | 의미 입력 | 생성 키 |
+|--------|----------|----------|---------|
+| BUTTON | ACTION | save | `button.action.save` |
+| BUTTON | ACTION | delete_selected | `button.action.delete_selected` |
+| FORM | LABEL | user_name | `form.label.user_name` |
+| FORM | PLACEHOLDER | search | `form.placeholder.search` |
+| MESSAGE | SUCCESS | save_complete | `message.success.save_complete` |
+| MESSAGE | ERROR | network_fail | `message.error.network_fail` |
+| TABLE | HEADER | created_date | `table.header.created_date` |
+| MENU | ADMIN | user_management | `menu.admin.user_management` |
+
+---
+
+## 4. 회사별 다국어 시스템
+
+### 4.1 조회 우선순위
+
+다국어 텍스트 조회 시 다음 우선순위를 적용합니다:
+
+1. **회사 전용 키** (`company_code = 'COMPANY_A'`)
+2. **공통 키** (`company_code = '*'`)
+
+```sql
+-- 조회 쿼리 예시
+WITH ranked_keys AS (
+  SELECT 
+    km.lang_key,
+    mt.lang_text,
+    km.company_code,
+    ROW_NUMBER() OVER (
+      PARTITION BY km.lang_key 
+      ORDER BY CASE WHEN km.company_code = $1 THEN 1 ELSE 2 END
+    ) as priority
+  FROM multi_lang_key_master km
+  JOIN multi_lang_text mt ON km.key_id = mt.key_id
+  WHERE km.lang_key = ANY($2)
+    AND mt.lang_code = $3
+    AND km.is_active = 'Y'
+    AND km.company_code IN ($1, '*')
+)
+SELECT lang_key, lang_text 
+FROM ranked_keys 
+WHERE priority = 1;
+```
+
+### 4.2 오버라이드 프로세스
+
+1. 회사 관리자가 공통 키에서 "이 회사 전용으로 복사" 클릭
+2. 시스템이 `base_key_id`에 원본 키를 참조하는 새 키 생성
+3. 기존 번역 텍스트 복사
+4. 회사 관리자가 번역 수정
+5. 이후 해당 회사 사용자는 회사 전용 번역 사용
+
+### 4.3 권한 매트릭스
+
+| 작업 | 최고 관리자 (`*`) | 회사 관리자 | 일반 사용자 |
+|------|------------------|-------------|-------------|
+| 공통 키 조회 | O | O | O |
+| 공통 키 생성 | O | X | X |
+| 공통 키 수정 | O | X | X |
+| 공통 키 삭제 | O | X | X |
+| 회사 키 조회 | O | 자사만 | 자사만 |
+| 회사 키 생성 (오버라이드) | O | O | X |
+| 회사 키 수정 | O | 자사만 | X |
+| 회사 키 삭제 | O | 자사만 | X |
+| 카테고리 관리 | O | X | X |
+
+---
+
+## 5. API 설계
+
+### 5.1 카테고리 API
+
+| 엔드포인트 | 메서드 | 설명 | 권한 |
+|-----------|--------|------|------|
+| `/multilang/categories` | GET | 카테고리 목록 조회 | 인증 필요 |
+| `/multilang/categories/tree` | GET | 계층 구조로 조회 | 인증 필요 |
+| `/multilang/categories` | POST | 카테고리 생성 | 최고 관리자 |
+| `/multilang/categories/:id` | PUT | 카테고리 수정 | 최고 관리자 |
+| `/multilang/categories/:id` | DELETE | 카테고리 삭제 | 최고 관리자 |
+
+### 5.2 다국어 키 API (개선)
+
+| 엔드포인트 | 메서드 | 설명 | 권한 |
+|-----------|--------|------|------|
+| `/multilang/keys` | GET | 키 목록 조회 (카테고리/회사 필터) | 인증 필요 |
+| `/multilang/keys` | POST | 키 생성 | 공통: 최고관리자, 회사: 회사관리자 |
+| `/multilang/keys/:keyId` | PUT | 키 수정 | 공통: 최고관리자, 회사: 해당회사 |
+| `/multilang/keys/:keyId` | DELETE | 키 삭제 | 공통: 최고관리자, 회사: 해당회사 |
+| `/multilang/keys/:keyId/override` | POST | 공통 키를 회사 전용으로 복사 | 회사 관리자 |
+| `/multilang/keys/check` | GET | 키 중복 체크 | 인증 필요 |
+| `/multilang/keys/generate-preview` | POST | 키 자동 생성 미리보기 | 인증 필요 |
+
+### 5.3 API 요청/응답 예시
+
+#### 키 생성 요청
+```json
+POST /multilang/keys
+{
+  "categoryId": 11,           // 세부분류 ID (BUTTON > ACTION)
+  "keyMeaning": "save_changes",
+  "description": "변경사항 저장 버튼",
+  "usageNote": "사용자 관리, 설정 화면",
+  "texts": [
+    { "langCode": "KR", "langText": "저장하기" },
+    { "langCode": "US", "langText": "Save Changes" },
+    { "langCode": "JP", "langText": "保存する" }
+  ]
+}
+```
+
+#### 키 생성 응답
+```json
+{
+  "success": true,
+  "message": "다국어 키가 생성되었습니다.",
+  "data": {
+    "keyId": 175,
+    "langKey": "button.action.save_changes",
+    "companyCode": "*",
+    "categoryId": 11
+  }
+}
+```
+
+#### 오버라이드 요청
+```json
+POST /multilang/keys/123/override
+{
+  "texts": [
+    { "langCode": "KR", "langText": "등록하기" },
+    { "langCode": "US", "langText": "Register" }
+  ]
+}
+```
+
+---
+
+## 6. 프론트엔드 UI 설계
+
+### 6.1 다국어 관리 페이지 리뉴얼
+
+```
+┌─────────────────────────────────────────────────────────────────────────┐
+│ 다국어 관리                                                              │
+│ 다국어 키와 번역 텍스트를 관리합니다                                       │
+├─────────────────────────────────────────────────────────────────────────┤
+│ [언어 관리] [다국어 키 관리] [카테고리 관리]                               │
+├─────────────────────────────────────────────────────────────────────────┤
+│                                                                         │
+│ ┌────────────────────┐  ┌───────────────────────────────────────────────┤
+│ │ 카테고리 필터       │  │                                               │
+│ │                    │  │ 검색: [________________] 회사: [전체 ▼]        │
+│ │ ▼ 버튼 (45)        │  │                           [초기화] [+ 키 등록] │
+│ │   ├ 액션 (30)      │  │───────────────────────────────────────────────│
+│ │   ├ 네비게이션 (10)│  │ ☐ │ 키           │ 카테고리   │ 회사 │ 상태   │
+│ │   └ 토글 (5)       │  │───────────────────────────────────────────────│
+│ │ ▼ 폼 (60)          │  │ ☐ │ button.action.save      │ 버튼>액션  │ 공통 │ 활성 │
+│ │   ├ 라벨 (35)      │  │ ☐ │ button.action.save      │ 버튼>액션  │ A사  │ 활성 │
+│ │   ├ 플레이스홀더(15)│  │ ☐ │ button.action.delete    │ 버튼>액션  │ 공통 │ 활성 │
+│ │   └ 도움말 (10)    │  │ ☐ │ form.label.user_name    │ 폼>라벨    │ 공통 │ 활성 │
+│ │ ▶ 메시지 (40)      │  │───────────────────────────────────────────────│
+│ │ ▶ 테이블 (20)      │  │ 페이지: [1] [2] [3] ... [10]                  │
+│ │ ▶ 메뉴 (9)         │  │                                               │
+│ └────────────────────┘  └───────────────────────────────────────────────┤
+└─────────────────────────────────────────────────────────────────────────┘
+```
+
+### 6.2 키 등록 모달
+
+```
+┌─────────────────────────────────────────────────────────────────┐
+│ 다국어 키 등록                                                   │
+├─────────────────────────────────────────────────────────────────┤
+│                                                                 │
+│ ① 카테고리 선택                                                  │
+│ ┌───────────────────────────────────────────────────────────────┤
+│ │ 대분류 *                      │ 세부 분류 *                    │
+│ │ ┌─────────────────────────┐   │ ┌─────────────────────────┐   │
+│ │ │ 공통                    │   │ │ (대분류 먼저 선택)       │   │
+│ │ │ ● 버튼                  │   │ │ ● 액션                  │   │
+│ │ │ 폼                      │   │ │ 네비게이션               │   │
+│ │ │ 테이블                  │   │ │ 토글                    │   │
+│ │ │ 메시지                  │   │ │                         │   │
+│ │ └─────────────────────────┘   │ └─────────────────────────┘   │
+│ └───────────────────────────────────────────────────────────────┤
+│                                                                 │
+│ ② 키 정보 입력                                                   │
+│ ┌───────────────────────────────────────────────────────────────┤
+│ │ 키 의미 (영문) *                                               │
+│ │ [ save_changes                                         ]      │
+│ │ 영문 소문자, 밑줄(_) 사용. 예: save, add_new, delete_all       │
+│ │                                                               │
+│ │ ─────────────────────────────────────────────────────────     │
+│ │ 자동 생성 키:                                                  │
+│ │ ┌─────────────────────────────────────────────────────────┐   │
+│ │ │ button.action.save_changes                              │   │
+│ │ └─────────────────────────────────────────────────────────┘   │
+│ │ ✓ 사용 가능한 키입니다                                         │
+│ └───────────────────────────────────────────────────────────────┤
+│                                                                 │
+│ ③ 설명 및 번역                                                   │
+│ ┌───────────────────────────────────────────────────────────────┤
+│ │ 설명 (선택)                                                    │
+│ │ [ 변경사항을 저장하는 버튼                              ]      │
+│ │                                                               │
+│ │ 사용 위치 메모 (선택)                                          │
+│ │ [ 사용자 관리, 설정 화면                                ]      │
+│ │                                                               │
+│ │ ─────────────────────────────────────────────────────────     │
+│ │ 번역 텍스트                                                    │
+│ │                                                               │
+│ │ 한국어 (KR) *           [ 저장하기                      ]      │
+│ │ English (US)            [ Save Changes                  ]      │
+│ │ 日本語 (JP)             [ 保存する                      ]      │
+│ └───────────────────────────────────────────────────────────────┤
+│                                                                 │
+├─────────────────────────────────────────────────────────────────┤
+│                                         [취소]  [등록]           │
+└─────────────────────────────────────────────────────────────────┘
+```
+
+### 6.3 공통 키 편집 모달 (회사 관리자용)
+
+```
+┌─────────────────────────────────────────────────────────────────┐
+│ 다국어 키 상세                                                   │
+│ button.action.save (공통)                                       │
+├─────────────────────────────────────────────────────────────────┤
+│                                                                 │
+│ 카테고리: 버튼 > 액션                                            │
+│ 설명: 저장 버튼                                                  │
+│                                                                 │
+│ ─────────────────────────────────────────────────────────────   │
+│ 번역 텍스트 (읽기 전용)                                          │
+│                                                                 │
+│ 한국어 (KR)          저장                                        │
+│ English (US)         Save                                        │
+│ 日本語 (JP)          保存                                        │
+│                                                                 │
+├─────────────────────────────────────────────────────────────────┤
+│ 공통 키는 수정할 수 없습니다.                                     │
+│ 이 회사만의 번역이 필요하시면 아래 버튼을 클릭하세요.              │
+│                                                                 │
+│                    [이 회사 전용으로 복사]                        │
+├─────────────────────────────────────────────────────────────────┤
+│                                               [닫기]             │
+└─────────────────────────────────────────────────────────────────┘
+```
+
+### 6.4 회사 전용 키 생성 모달 (오버라이드)
+
+```
+┌─────────────────────────────────────────────────────────────────┐
+│ 회사 전용 키 생성                                                │
+├─────────────────────────────────────────────────────────────────┤
+│                                                                 │
+│ 원본 키: button.action.save (공통)                               │
+│                                                                 │
+│ 원본 번역:                                                       │
+│ ┌─────────────────────────────────────────────────────────────┐ │
+│ │ 한국어: 저장                                                 │ │
+│ │ English: Save                                                │ │
+│ │ 日本語: 保存                                                 │ │
+│ └─────────────────────────────────────────────────────────────┘ │
+│                                                                 │
+│ ─────────────────────────────────────────────────────────────   │
+│                                                                 │
+│ 이 회사 전용 번역 텍스트:                                        │
+│                                                                 │
+│ 한국어 (KR) *           [ 등록하기                        ]      │
+│ English (US)            [ Register                        ]      │
+│ 日本語 (JP)             [ 登録                            ]      │
+│                                                                 │
+├─────────────────────────────────────────────────────────────────┤
+│ 회사 전용 키를 생성하면 공통 키 대신 사용됩니다.                   │
+│ 원본 키가 변경되어도 회사 전용 키는 영향받지 않습니다.             │
+├─────────────────────────────────────────────────────────────────┤
+│                                         [취소]  [생성]           │
+└─────────────────────────────────────────────────────────────────┘
+```
+
+---
+
+## 7. 구현 계획
+
+### 7.1 Phase 1: 데이터베이스 마이그레이션
+
+**예상 소요 시간: 2시간**
+
+1. 카테고리 테이블 생성
+2. 기본 카테고리 데이터 삽입 (대분류 10개, 세부분류 약 20개)
+3. multi_lang_key_master 스키마 변경
+4. 기존 174개 키 카테고리 자동 분류 (패턴 매칭)
+
+**마이그레이션 파일**: `db/migrations/075_multilang_category_system.sql`
+
+### 7.2 Phase 2: 백엔드 API 개발
+
+**예상 소요 시간: 4시간**
+
+1. 카테고리 CRUD API
+2. 키 조회 로직 수정 (우선순위 적용)
+3. 권한 검사 미들웨어
+4. 오버라이드 API
+5. 키 중복 체크 API
+6. 키 자동 생성 미리보기 API
+
+**관련 파일**:
+- `backend-node/src/controllers/multilangController.ts`
+- `backend-node/src/services/multilangService.ts`
+- `backend-node/src/routes/multilangRoutes.ts`
+
+### 7.3 Phase 3: 프론트엔드 UI 개발
+
+**예상 소요 시간: 6시간**
+
+1. 카테고리 트리 컴포넌트
+2. 키 등록 모달 리뉴얼 (단계별 입력)
+3. 키 편집 모달 (권한별 UI 분기)
+4. 오버라이드 모달
+5. 카테고리 관리 탭 추가
+
+**관련 파일**:
+- `frontend/app/(main)/admin/systemMng/i18nList/page.tsx`
+- `frontend/components/multilang/LangKeyModal.tsx` (리뉴얼)
+- `frontend/components/multilang/CategoryTree.tsx` (신규)
+- `frontend/components/multilang/OverrideModal.tsx` (신규)
+
+### 7.4 Phase 4: 테스트 및 마이그레이션
+
+**예상 소요 시간: 2시간**
+
+1. API 테스트
+2. UI 테스트
+3. 기존 데이터 마이그레이션 검증
+4. 권한 테스트 (최고 관리자, 회사 관리자)
+
+---
+
+## 8. 상세 구현 일정
+
+| 단계 | 작업 | 예상 시간 | 의존성 |
+|------|------|----------|--------|
+| 1.1 | 마이그레이션 SQL 작성 | 30분 | - |
+| 1.2 | 카테고리 기본 데이터 삽입 | 30분 | 1.1 |
+| 1.3 | 기존 키 카테고리 자동 분류 | 30분 | 1.2 |
+| 1.4 | 스키마 변경 검증 | 30분 | 1.3 |
+| 2.1 | 카테고리 API 개발 | 1시간 | 1.4 |
+| 2.2 | 키 조회 로직 수정 (우선순위) | 1시간 | 2.1 |
+| 2.3 | 권한 검사 로직 추가 | 30분 | 2.2 |
+| 2.4 | 오버라이드 API 개발 | 1시간 | 2.3 |
+| 2.5 | 키 생성 API 개선 (자동 생성) | 30분 | 2.4 |
+| 3.1 | 카테고리 트리 컴포넌트 | 1시간 | 2.5 |
+| 3.2 | 키 등록 모달 리뉴얼 | 2시간 | 3.1 |
+| 3.3 | 키 편집/상세 모달 | 1시간 | 3.2 |
+| 3.4 | 오버라이드 모달 | 1시간 | 3.3 |
+| 3.5 | 카테고리 관리 탭 | 1시간 | 3.4 |
+| 4.1 | 통합 테스트 | 1시간 | 3.5 |
+| 4.2 | 버그 수정 및 마무리 | 1시간 | 4.1 |
+
+**총 예상 시간: 약 14시간**
+
+---
+
+## 9. 기대 효과
+
+### 9.1 개선 전후 비교
+
+| 항목 | 현재 | 개선 후 |
+|------|------|---------|
+| 키 명명 규칙 | 불규칙 (수동 입력) | 규칙화 (자동 생성) |
+| 카테고리 분류 | 없음 | 2단계 계층 구조 |
+| 회사별 다국어 | 미활용 | 오버라이드 지원 |
+| 조회 우선순위 | 없음 | 회사 전용 > 공통 |
+| 권한 관리 | 없음 | 역할별 접근 제어 |
+| 중복 체크 | 저장 시에만 | 실시간 검증 |
+| 검색/필터 | 키 이름만 | 카테고리 + 회사 + 키 |
+
+### 9.2 사용자 경험 개선
+
+1. **일관된 키 명명**: 자동 생성으로 규칙 준수
+2. **빠른 검색**: 카테고리 기반 필터링
+3. **회사별 커스터마이징**: 브랜드에 맞는 번역 사용
+4. **안전한 수정**: 권한 기반 보호
+
+### 9.3 유지보수 개선
+
+1. **체계적 분류**: 어떤 텍스트가 어디에 사용되는지 명확
+2. **변경 영향 파악**: 오버라이드 추적으로 영향 범위 확인
+3. **권한 분리**: 공통 키 보호, 회사별 자율성 보장
+
+---
+
+## 10. 참고 자료
+
+### 10.1 관련 파일
+
+| 파일 | 설명 |
+|------|------|
+| `frontend/hooks/useMultiLang.ts` | 다국어 훅 |
+| `frontend/lib/utils/multilang.ts` | 다국어 유틸리티 |
+| `frontend/app/(main)/admin/systemMng/i18nList/page.tsx` | 다국어 관리 페이지 |
+| `backend-node/src/controllers/multilangController.ts` | API 컨트롤러 |
+| `backend-node/src/services/multilangService.ts` | 비즈니스 로직 |
+| `docs/다국어_시스템_가이드.md` | 기존 시스템 가이드 |
+
+### 10.2 데이터베이스 테이블
+
+| 테이블 | 설명 |
+|--------|------|
+| `language_master` | 언어 마스터 (KR, US, JP) |
+| `multi_lang_key_master` | 다국어 키 마스터 |
+| `multi_lang_text` | 다국어 번역 텍스트 |
+| `multi_lang_category` | 다국어 카테고리 (신규) |
+
+---
+
+## 11. 변경 이력
+
+| 버전 | 날짜 | 작성자 | 변경 내용 |
+|------|------|--------|----------|
+| 1.0 | 2026-01-13 | AI | 최초 작성 |
+
+
diff --git a/docs/메일발송_기능_사용_가이드.md b/docs/메일발송_기능_사용_가이드.md
index 42900211..ef62a60a 100644
--- a/docs/메일발송_기능_사용_가이드.md
+++ b/docs/메일발송_기능_사용_가이드.md
@@ -360,3 +360,5 @@
 
 
 
+
+
diff --git a/docs/즉시저장_버튼_액션_구현_계획서.md b/docs/즉시저장_버튼_액션_구현_계획서.md
index c392eece..806e480d 100644
--- a/docs/즉시저장_버튼_액션_구현_계획서.md
+++ b/docs/즉시저장_버튼_액션_구현_계획서.md
@@ -346,3 +346,5 @@ const getComponentValue = (componentId: string) => {
 
 
 
+
+
diff --git a/frontend/app/(main)/admin/screenMng/screenMngList/page.tsx b/frontend/app/(main)/admin/screenMng/screenMngList/page.tsx
index 106870eb..4e2878eb 100644
--- a/frontend/app/(main)/admin/screenMng/screenMngList/page.tsx
+++ b/frontend/app/(main)/admin/screenMng/screenMngList/page.tsx
@@ -241,3 +241,5 @@ export default function ScreenManagementPage() {
     </div>
   );
 }
+
+
diff --git a/frontend/app/(main)/admin/systemMng/i18nList/page.tsx b/frontend/app/(main)/admin/systemMng/i18nList/page.tsx
index 3acce6fb..79264d72 100644
--- a/frontend/app/(main)/admin/systemMng/i18nList/page.tsx
+++ b/frontend/app/(main)/admin/systemMng/i18nList/page.tsx
@@ -7,13 +7,19 @@ import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { Badge } from "@/components/ui/badge";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Plus } from "lucide-react";
 
 import { DataTable } from "@/components/common/DataTable";
 import { LoadingSpinner } from "@/components/common/LoadingSpinner";
 import { useAuth } from "@/hooks/useAuth";
 import LangKeyModal from "@/components/admin/LangKeyModal";
 import LanguageModal from "@/components/admin/LanguageModal";
+import { CategoryTree } from "@/components/admin/multilang/CategoryTree";
+import { KeyGenerateModal } from "@/components/admin/multilang/KeyGenerateModal";
 import { apiClient } from "@/lib/api/client";
+import { LangCategory } from "@/lib/api/multilang";
 
 interface Language {
   langCode: string;
@@ -29,6 +35,7 @@ interface LangKey {
   langKey: string;
   description: string;
   isActive: string;
+  categoryId?: number;
 }
 
 interface LangText {
@@ -59,6 +66,10 @@ export default function I18nPage() {
   const [selectedLanguages, setSelectedLanguages] = useState<Set<string>>(new Set());
   const [activeTab, setActiveTab] = useState<"keys" | "languages">("keys");
 
+  // 카테고리 관련 상태
+  const [selectedCategory, setSelectedCategory] = useState<LangCategory | null>(null);
+  const [isGenerateModalOpen, setIsGenerateModalOpen] = useState(false);
+
   const [companies, setCompanies] = useState<Array<{ code: string; name: string }>>([]);
 
   // 회사 목록 조회
@@ -92,9 +103,14 @@ export default function I18nPage() {
   };
 
   // 다국어 키 목록 조회
-  const fetchLangKeys = async () => {
+  const fetchLangKeys = async (categoryId?: number | null) => {
     try {
-      const response = await apiClient.get("/multilang/keys");
+      const params = new URLSearchParams();
+      if (categoryId) {
+        params.append("categoryId", categoryId.toString());
+      }
+      const url = `/multilang/keys${params.toString() ? `?${params.toString()}` : ""}`;
+      const response = await apiClient.get(url);
       const data = response.data;
       if (data.success) {
         setLangKeys(data.data);
@@ -471,6 +487,13 @@ export default function I18nPage() {
     initializeData();
   }, []);
 
+  // 카테고리 변경 시 키 목록 다시 조회
+  useEffect(() => {
+    if (!loading) {
+      fetchLangKeys(selectedCategory?.categoryId);
+    }
+  }, [selectedCategory?.categoryId]);
+
   const columns = [
     {
       id: "select",
@@ -678,27 +701,70 @@ export default function I18nPage() {
 
             {/* 다국어 키 관리 탭 */}
             {activeTab === "keys" && (
-              <div className="grid grid-cols-1 gap-4 lg:grid-cols-10">
-                {/* 좌측: 언어 키 목록 (7/10) */}
-                <Card className="lg:col-span-7">
-                  <CardHeader>
+              <div className="grid grid-cols-1 gap-4 lg:grid-cols-12">
+                {/* 좌측: 카테고리 트리 (2/12) */}
+                <Card className="lg:col-span-2">
+                  <CardHeader className="py-3">
                     <div className="flex items-center justify-between">
-                      <CardTitle>언어 키 목록</CardTitle>
+                      <CardTitle className="text-sm">카테고리</CardTitle>
+                    </div>
+                  </CardHeader>
+                  <CardContent className="p-2">
+                    <ScrollArea className="h-[500px]">
+                      <CategoryTree
+                        selectedCategoryId={selectedCategory?.categoryId || null}
+                        onSelectCategory={(cat) => setSelectedCategory(cat)}
+                        onDoubleClickCategory={(cat) => {
+                          setSelectedCategory(cat);
+                          setIsGenerateModalOpen(true);
+                        }}
+                      />
+                    </ScrollArea>
+                  </CardContent>
+                </Card>
+
+                {/* 중앙: 언어 키 목록 (6/12) */}
+                <Card className="lg:col-span-6">
+                  <CardHeader className="py-3">
+                    <div className="flex items-center justify-between">
+                      <CardTitle className="text-sm">
+                        언어 키 목록
+                        {selectedCategory && (
+                          <Badge variant="secondary" className="ml-2">
+                            {selectedCategory.categoryName}
+                          </Badge>
+                        )}
+                      </CardTitle>
                       <div className="flex space-x-2">
-                        <Button variant="destructive" onClick={handleDeleteSelectedKeys} disabled={selectedKeys.size === 0}>
+                        <Button 
+                          size="sm"
+                          variant="destructive" 
+                          onClick={handleDeleteSelectedKeys} 
+                          disabled={selectedKeys.size === 0}
+                        >
                           선택 삭제 ({selectedKeys.size})
                         </Button>
-                        <Button onClick={handleAddKey}>새 키 추가</Button>
+                        <Button size="sm" variant="outline" onClick={handleAddKey}>
+                          수동 추가
+                        </Button>
+                        <Button 
+                          size="sm" 
+                          onClick={() => setIsGenerateModalOpen(true)}
+                          disabled={!selectedCategory}
+                        >
+                          <Plus className="mr-1 h-4 w-4" />
+                          자동 생성
+                        </Button>
                       </div>
                     </div>
                   </CardHeader>
-                  <CardContent>
+                  <CardContent className="pt-0">
                     {/* 검색 필터 영역 */}
                     <div className="mb-2 grid grid-cols-1 gap-2 md:grid-cols-3">
                       <div>
-                        <Label htmlFor="company">회사</Label>
+                        <Label htmlFor="company" className="text-xs">회사</Label>
                         <Select value={selectedCompany} onValueChange={setSelectedCompany}>
-                          <SelectTrigger>
+                          <SelectTrigger className="h-8 text-xs">
                             <SelectValue placeholder="전체 회사" />
                           </SelectTrigger>
                           <SelectContent>
@@ -713,22 +779,22 @@ export default function I18nPage() {
                       </div>
 
                       <div>
-                        <Label htmlFor="search">검색</Label>
+                        <Label htmlFor="search" className="text-xs">검색</Label>
                         <Input
-                          placeholder="키명, 설명, 메뉴, 회사로 검색..."
+                          placeholder="키명, 설명으로 검색..."
                           value={searchText}
                           onChange={(e) => setSearchText(e.target.value)}
+                          className="h-8 text-xs"
                         />
                       </div>
 
                       <div className="flex items-end">
-                        <div className="text-sm text-muted-foreground">검색 결과: {getFilteredLangKeys().length}건</div>
+                        <div className="text-xs text-muted-foreground">결과: {getFilteredLangKeys().length}건</div>
                       </div>
                     </div>
 
                     {/* 테이블 영역 */}
                     <div>
-                      <div className="mb-2 text-sm text-muted-foreground">전체: {getFilteredLangKeys().length}건</div>
                       <DataTable
                         columns={columns}
                         data={getFilteredLangKeys()}
@@ -739,8 +805,8 @@ export default function I18nPage() {
                   </CardContent>
                 </Card>
 
-                {/* 우측: 선택된 키의 다국어 관리 (3/10) */}
-                <Card className="lg:col-span-3">
+                {/* 우측: 선택된 키의 다국어 관리 (4/12) */}
+                <Card className="lg:col-span-4">
                   <CardHeader>
                     <CardTitle>
                       {selectedKey ? (
@@ -817,6 +883,18 @@ export default function I18nPage() {
             onSave={handleSaveLanguage}
             languageData={editingLanguage}
           />
+
+          {/* 키 자동 생성 모달 */}
+          <KeyGenerateModal
+            isOpen={isGenerateModalOpen}
+            onClose={() => setIsGenerateModalOpen(false)}
+            selectedCategory={selectedCategory}
+            companyCode={user?.companyCode || ""}
+            isSuperAdmin={user?.companyCode === "*"}
+            onSuccess={() => {
+              fetchLangKeys(selectedCategory?.categoryId);
+            }}
+          />
         </div>
       </div>
     </div>
diff --git a/frontend/app/(main)/admin/systemMng/tableMngList/page.tsx b/frontend/app/(main)/admin/systemMng/tableMngList/page.tsx
index 0b5ff573..4ba1e6c0 100644
--- a/frontend/app/(main)/admin/systemMng/tableMngList/page.tsx
+++ b/frontend/app/(main)/admin/systemMng/tableMngList/page.tsx
@@ -6,7 +6,10 @@ import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
 import { Checkbox } from "@/components/ui/checkbox";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
-import { Search, Database, RefreshCw, Settings, Plus, Activity, Trash2, Copy } from "lucide-react";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";
+import { Search, Database, RefreshCw, Settings, Plus, Activity, Trash2, Copy, Check, ChevronsUpDown } from "lucide-react";
+import { cn } from "@/lib/utils";
 import { LoadingSpinner } from "@/components/common/LoadingSpinner";
 import { toast } from "sonner";
 import { useMultiLang } from "@/hooks/useMultiLang";
@@ -90,6 +93,13 @@ export default function TableManagementPage() {
   // 🎯 Entity 조인 관련 상태
   const [referenceTableColumns, setReferenceTableColumns] = useState<Record<string, ReferenceTableColumn[]>>({});
 
+  // 🆕 Entity 타입 Combobox 열림/닫힘 상태 (컬럼별 관리)
+  const [entityComboboxOpen, setEntityComboboxOpen] = useState<Record<string, {
+    table: boolean;
+    joinColumn: boolean;
+    displayColumn: boolean;
+  }>>({});
+
   // DDL 기능 관련 상태
   const [createTableModalOpen, setCreateTableModalOpen] = useState(false);
   const [addColumnModalOpen, setAddColumnModalOpen] = useState(false);
@@ -1388,113 +1398,266 @@ export default function TableManagementPage() {
                                 {/* 입력 타입이 'entity'인 경우 참조 테이블 선택 */}
                                 {column.inputType === "entity" && (
                                   <>
-                                    {/* 참조 테이블 */}
-                                    <div className="w-48">
+                                    {/* 참조 테이블 - 검색 가능한 Combobox */}
+                                    <div className="w-56">
                                       <label className="text-muted-foreground mb-1 block text-xs">참조 테이블</label>
-                                      <Select
-                                        value={column.referenceTable || "none"}
-                                        onValueChange={(value) =>
-                                          handleDetailSettingsChange(column.columnName, "entity", value)
+                                      <Popover
+                                        open={entityComboboxOpen[column.columnName]?.table || false}
+                                        onOpenChange={(open) =>
+                                          setEntityComboboxOpen((prev) => ({
+                                            ...prev,
+                                            [column.columnName]: { ...prev[column.columnName], table: open },
+                                          }))
                                         }
                                       >
-                                        <SelectTrigger className="bg-background h-8 w-full text-xs">
-                                          <SelectValue placeholder="선택" />
-                                        </SelectTrigger>
-                                        <SelectContent>
-                                          {referenceTableOptions.map((option, index) => (
-                                            <SelectItem key={`entity-${option.value}-${index}`} value={option.value}>
-                                              <div className="flex flex-col">
-                                                <span className="font-medium">{option.label}</span>
-                                                <span className="text-muted-foreground text-xs">{option.value}</span>
-                                              </div>
-                                            </SelectItem>
-                                          ))}
-                                        </SelectContent>
-                                      </Select>
+                                        <PopoverTrigger asChild>
+                                          <Button
+                                            variant="outline"
+                                            role="combobox"
+                                            aria-expanded={entityComboboxOpen[column.columnName]?.table || false}
+                                            className="bg-background h-8 w-full justify-between text-xs"
+                                          >
+                                            {column.referenceTable && column.referenceTable !== "none"
+                                              ? referenceTableOptions.find((opt) => opt.value === column.referenceTable)?.label ||
+                                                column.referenceTable
+                                              : "테이블 선택..."}
+                                            <ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
+                                          </Button>
+                                        </PopoverTrigger>
+                                        <PopoverContent className="w-[280px] p-0" align="start">
+                                          <Command>
+                                            <CommandInput placeholder="테이블 검색..." className="h-8 text-xs" />
+                                            <CommandList className="max-h-[200px]">
+                                              <CommandEmpty className="py-2 text-center text-xs">
+                                                테이블을 찾을 수 없습니다.
+                                              </CommandEmpty>
+                                              <CommandGroup>
+                                                {referenceTableOptions.map((option) => (
+                                                  <CommandItem
+                                                    key={option.value}
+                                                    value={`${option.label} ${option.value}`}
+                                                    onSelect={() => {
+                                                      handleDetailSettingsChange(column.columnName, "entity", option.value);
+                                                      setEntityComboboxOpen((prev) => ({
+                                                        ...prev,
+                                                        [column.columnName]: { ...prev[column.columnName], table: false },
+                                                      }));
+                                                    }}
+                                                    className="text-xs"
+                                                  >
+                                                    <Check
+                                                      className={cn(
+                                                        "mr-2 h-3 w-3",
+                                                        column.referenceTable === option.value ? "opacity-100" : "opacity-0",
+                                                      )}
+                                                    />
+                                                    <div className="flex flex-col">
+                                                      <span className="font-medium">{option.label}</span>
+                                                      {option.value !== "none" && (
+                                                        <span className="text-muted-foreground text-[10px]">{option.value}</span>
+                                                      )}
+                                                    </div>
+                                                  </CommandItem>
+                                                ))}
+                                              </CommandGroup>
+                                            </CommandList>
+                                          </Command>
+                                        </PopoverContent>
+                                      </Popover>
                                     </div>
 
-                                    {/* 조인 컬럼 */}
+                                    {/* 조인 컬럼 - 검색 가능한 Combobox */}
                                     {column.referenceTable && column.referenceTable !== "none" && (
-                                      <div className="w-48">
+                                      <div className="w-56">
                                         <label className="text-muted-foreground mb-1 block text-xs">조인 컬럼</label>
-                                        <Select
-                                          value={column.referenceColumn || "none"}
-                                          onValueChange={(value) =>
-                                            handleDetailSettingsChange(
-                                              column.columnName,
-                                              "entity_reference_column",
-                                              value,
-                                            )
+                                        <Popover
+                                          open={entityComboboxOpen[column.columnName]?.joinColumn || false}
+                                          onOpenChange={(open) =>
+                                            setEntityComboboxOpen((prev) => ({
+                                              ...prev,
+                                              [column.columnName]: { ...prev[column.columnName], joinColumn: open },
+                                            }))
                                           }
                                         >
-                                          <SelectTrigger className="bg-background h-8 w-full text-xs">
-                                            <SelectValue placeholder="선택" />
-                                          </SelectTrigger>
-                                          <SelectContent>
-                                            <SelectItem value="none">-- 선택 안함 --</SelectItem>
-                                            {referenceTableColumns[column.referenceTable]?.map((refCol, index) => (
-                                              <SelectItem
-                                                key={`ref-col-${refCol.columnName}-${index}`}
-                                                value={refCol.columnName}
-                                              >
-                                                <span className="font-medium">{refCol.columnName}</span>
-                                              </SelectItem>
-                                            ))}
-                                            {(!referenceTableColumns[column.referenceTable] ||
-                                              referenceTableColumns[column.referenceTable].length === 0) && (
-                                              <SelectItem value="loading" disabled>
-                                                <div className="flex items-center gap-2">
+                                          <PopoverTrigger asChild>
+                                            <Button
+                                              variant="outline"
+                                              role="combobox"
+                                              aria-expanded={entityComboboxOpen[column.columnName]?.joinColumn || false}
+                                              className="bg-background h-8 w-full justify-between text-xs"
+                                              disabled={!referenceTableColumns[column.referenceTable] || referenceTableColumns[column.referenceTable].length === 0}
+                                            >
+                                              {!referenceTableColumns[column.referenceTable] || referenceTableColumns[column.referenceTable].length === 0 ? (
+                                                <span className="flex items-center gap-2">
                                                   <div className="border-primary h-3 w-3 animate-spin rounded-full border border-t-transparent"></div>
-                                                  로딩중
-                                                </div>
-                                              </SelectItem>
-                                            )}
-                                          </SelectContent>
-                                        </Select>
+                                                  로딩중...
+                                                </span>
+                                              ) : column.referenceColumn && column.referenceColumn !== "none" ? (
+                                                column.referenceColumn
+                                              ) : (
+                                                "컬럼 선택..."
+                                              )}
+                                              <ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
+                                            </Button>
+                                          </PopoverTrigger>
+                                          <PopoverContent className="w-[280px] p-0" align="start">
+                                            <Command>
+                                              <CommandInput placeholder="컬럼 검색..." className="h-8 text-xs" />
+                                              <CommandList className="max-h-[200px]">
+                                                <CommandEmpty className="py-2 text-center text-xs">
+                                                  컬럼을 찾을 수 없습니다.
+                                                </CommandEmpty>
+                                                <CommandGroup>
+                                                  <CommandItem
+                                                    value="none"
+                                                    onSelect={() => {
+                                                      handleDetailSettingsChange(column.columnName, "entity_reference_column", "none");
+                                                      setEntityComboboxOpen((prev) => ({
+                                                        ...prev,
+                                                        [column.columnName]: { ...prev[column.columnName], joinColumn: false },
+                                                      }));
+                                                    }}
+                                                    className="text-xs"
+                                                  >
+                                                    <Check
+                                                      className={cn(
+                                                        "mr-2 h-3 w-3",
+                                                        column.referenceColumn === "none" || !column.referenceColumn ? "opacity-100" : "opacity-0",
+                                                      )}
+                                                    />
+                                                    -- 선택 안함 --
+                                                  </CommandItem>
+                                                  {referenceTableColumns[column.referenceTable]?.map((refCol) => (
+                                                    <CommandItem
+                                                      key={refCol.columnName}
+                                                      value={`${refCol.columnLabel || ""} ${refCol.columnName}`}
+                                                      onSelect={() => {
+                                                        handleDetailSettingsChange(column.columnName, "entity_reference_column", refCol.columnName);
+                                                        setEntityComboboxOpen((prev) => ({
+                                                          ...prev,
+                                                          [column.columnName]: { ...prev[column.columnName], joinColumn: false },
+                                                        }));
+                                                      }}
+                                                      className="text-xs"
+                                                    >
+                                                      <Check
+                                                        className={cn(
+                                                          "mr-2 h-3 w-3",
+                                                          column.referenceColumn === refCol.columnName ? "opacity-100" : "opacity-0",
+                                                        )}
+                                                      />
+                                                      <div className="flex flex-col">
+                                                        <span className="font-medium">{refCol.columnName}</span>
+                                                        {refCol.columnLabel && (
+                                                          <span className="text-muted-foreground text-[10px]">{refCol.columnLabel}</span>
+                                                        )}
+                                                      </div>
+                                                    </CommandItem>
+                                                  ))}
+                                                </CommandGroup>
+                                              </CommandList>
+                                            </Command>
+                                          </PopoverContent>
+                                        </Popover>
                                       </div>
                                     )}
 
-                                    {/* 표시 컬럼 */}
+                                    {/* 표시 컬럼 - 검색 가능한 Combobox */}
                                     {column.referenceTable &&
                                       column.referenceTable !== "none" &&
                                       column.referenceColumn &&
                                       column.referenceColumn !== "none" && (
-                                        <div className="w-48">
+                                        <div className="w-56">
                                           <label className="text-muted-foreground mb-1 block text-xs">표시 컬럼</label>
-                                          <Select
-                                            value={column.displayColumn || "none"}
-                                            onValueChange={(value) =>
-                                              handleDetailSettingsChange(
-                                                column.columnName,
-                                                "entity_display_column",
-                                                value,
-                                              )
+                                          <Popover
+                                            open={entityComboboxOpen[column.columnName]?.displayColumn || false}
+                                            onOpenChange={(open) =>
+                                              setEntityComboboxOpen((prev) => ({
+                                                ...prev,
+                                                [column.columnName]: { ...prev[column.columnName], displayColumn: open },
+                                              }))
                                             }
                                           >
-                                            <SelectTrigger className="bg-background h-8 w-full text-xs">
-                                              <SelectValue placeholder="선택" />
-                                            </SelectTrigger>
-                                            <SelectContent>
-                                              <SelectItem value="none">-- 선택 안함 --</SelectItem>
-                                              {referenceTableColumns[column.referenceTable]?.map((refCol, index) => (
-                                                <SelectItem
-                                                  key={`ref-col-${refCol.columnName}-${index}`}
-                                                  value={refCol.columnName}
-                                                >
-                                                  <span className="font-medium">{refCol.columnName}</span>
-                                                </SelectItem>
-                                              ))}
-                                              {(!referenceTableColumns[column.referenceTable] ||
-                                                referenceTableColumns[column.referenceTable].length === 0) && (
-                                                <SelectItem value="loading" disabled>
-                                                  <div className="flex items-center gap-2">
+                                            <PopoverTrigger asChild>
+                                              <Button
+                                                variant="outline"
+                                                role="combobox"
+                                                aria-expanded={entityComboboxOpen[column.columnName]?.displayColumn || false}
+                                                className="bg-background h-8 w-full justify-between text-xs"
+                                                disabled={!referenceTableColumns[column.referenceTable] || referenceTableColumns[column.referenceTable].length === 0}
+                                              >
+                                                {!referenceTableColumns[column.referenceTable] || referenceTableColumns[column.referenceTable].length === 0 ? (
+                                                  <span className="flex items-center gap-2">
                                                     <div className="border-primary h-3 w-3 animate-spin rounded-full border border-t-transparent"></div>
-                                                    로딩중
-                                                  </div>
-                                                </SelectItem>
-                                              )}
-                                            </SelectContent>
-                                          </Select>
+                                                    로딩중...
+                                                  </span>
+                                                ) : column.displayColumn && column.displayColumn !== "none" ? (
+                                                  column.displayColumn
+                                                ) : (
+                                                  "컬럼 선택..."
+                                                )}
+                                                <ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
+                                              </Button>
+                                            </PopoverTrigger>
+                                            <PopoverContent className="w-[280px] p-0" align="start">
+                                              <Command>
+                                                <CommandInput placeholder="컬럼 검색..." className="h-8 text-xs" />
+                                                <CommandList className="max-h-[200px]">
+                                                  <CommandEmpty className="py-2 text-center text-xs">
+                                                    컬럼을 찾을 수 없습니다.
+                                                  </CommandEmpty>
+                                                  <CommandGroup>
+                                                    <CommandItem
+                                                      value="none"
+                                                      onSelect={() => {
+                                                        handleDetailSettingsChange(column.columnName, "entity_display_column", "none");
+                                                        setEntityComboboxOpen((prev) => ({
+                                                          ...prev,
+                                                          [column.columnName]: { ...prev[column.columnName], displayColumn: false },
+                                                        }));
+                                                      }}
+                                                      className="text-xs"
+                                                    >
+                                                      <Check
+                                                        className={cn(
+                                                          "mr-2 h-3 w-3",
+                                                          column.displayColumn === "none" || !column.displayColumn ? "opacity-100" : "opacity-0",
+                                                        )}
+                                                      />
+                                                      -- 선택 안함 --
+                                                    </CommandItem>
+                                                    {referenceTableColumns[column.referenceTable]?.map((refCol) => (
+                                                      <CommandItem
+                                                        key={refCol.columnName}
+                                                        value={`${refCol.columnLabel || ""} ${refCol.columnName}`}
+                                                        onSelect={() => {
+                                                          handleDetailSettingsChange(column.columnName, "entity_display_column", refCol.columnName);
+                                                          setEntityComboboxOpen((prev) => ({
+                                                            ...prev,
+                                                            [column.columnName]: { ...prev[column.columnName], displayColumn: false },
+                                                          }));
+                                                        }}
+                                                        className="text-xs"
+                                                      >
+                                                        <Check
+                                                          className={cn(
+                                                            "mr-2 h-3 w-3",
+                                                            column.displayColumn === refCol.columnName ? "opacity-100" : "opacity-0",
+                                                          )}
+                                                        />
+                                                        <div className="flex flex-col">
+                                                          <span className="font-medium">{refCol.columnName}</span>
+                                                          {refCol.columnLabel && (
+                                                            <span className="text-muted-foreground text-[10px]">{refCol.columnLabel}</span>
+                                                          )}
+                                                        </div>
+                                                      </CommandItem>
+                                                    ))}
+                                                  </CommandGroup>
+                                                </CommandList>
+                                              </Command>
+                                            </PopoverContent>
+                                          </Popover>
                                         </div>
                                       )}
 
@@ -1505,8 +1668,8 @@ export default function TableManagementPage() {
                                       column.referenceColumn !== "none" &&
                                       column.displayColumn &&
                                       column.displayColumn !== "none" && (
-                                        <div className="bg-primary/10 text-primary flex w-48 items-center gap-1 rounded px-2 py-1 text-xs">
-                                          <span>✓</span>
+                                        <div className="bg-primary/10 text-primary flex items-center gap-1 rounded px-2 py-1 text-xs">
+                                          <Check className="h-3 w-3" />
                                           <span className="truncate">설정 완료</span>
                                         </div>
                                       )}
diff --git a/frontend/app/(main)/screens/[screenId]/page.tsx b/frontend/app/(main)/screens/[screenId]/page.tsx
index b61d5dae..4923ded7 100644
--- a/frontend/app/(main)/screens/[screenId]/page.tsx
+++ b/frontend/app/(main)/screens/[screenId]/page.tsx
@@ -23,6 +23,7 @@ import { TableSearchWidgetHeightProvider, useTableSearchWidgetHeight } from "@/c
 import { ScreenContextProvider } from "@/contexts/ScreenContext"; // 컴포넌트 간 통신
 import { SplitPanelProvider } from "@/lib/registry/components/split-panel-layout/SplitPanelContext"; // 분할 패널 리사이즈
 import { ActiveTabProvider } from "@/contexts/ActiveTabContext"; // 활성 탭 관리
+import { ScreenMultiLangProvider } from "@/contexts/ScreenMultiLangContext"; // 화면 다국어
 
 function ScreenViewPage() {
   const params = useParams();
@@ -113,7 +114,7 @@ function ScreenViewPage() {
   // 편집 모달 이벤트 리스너 등록
   useEffect(() => {
     const handleOpenEditModal = (event: CustomEvent) => {
-      console.log("🎭 편집 모달 열기 이벤트 수신:", event.detail);
+      // console.log("🎭 편집 모달 열기 이벤트 수신:", event.detail);
 
       setEditModalConfig({
         screenId: event.detail.screenId,
@@ -345,9 +346,10 @@ function ScreenViewPage() {
 
           {/* 절대 위치 기반 렌더링 (화면관리와 동일한 방식) */}
           {layoutReady && layout && layout.components.length > 0 ? (
-            <div
-              className="bg-background relative"
-              style={{
+            <ScreenMultiLangProvider components={layout.components} companyCode={companyCode}>
+              <div
+                className="bg-background relative"
+                style={{
                 width: `${screenWidth}px`,
                 height: `${screenHeight}px`,
                 minWidth: `${screenWidth}px`,
@@ -769,7 +771,8 @@ function ScreenViewPage() {
                   </>
                 );
               })()}
-            </div>
+              </div>
+            </ScreenMultiLangProvider>
           ) : (
             // 빈 화면일 때
             <div className="bg-background flex items-center justify-center" style={{ minHeight: screenHeight }}>
diff --git a/frontend/app/(pop)/layout.tsx b/frontend/app/(pop)/layout.tsx
new file mode 100644
index 00000000..1c41d1c0
--- /dev/null
+++ b/frontend/app/(pop)/layout.tsx
@@ -0,0 +1,10 @@
+import "@/app/globals.css";
+
+export const metadata = {
+  title: "POP - 생산실적관리",
+  description: "생산 현장 실적 관리 시스템",
+};
+
+export default function PopLayout({ children }: { children: React.ReactNode }) {
+  return <>{children}</>;
+}
diff --git a/frontend/app/(pop)/pop/page.tsx b/frontend/app/(pop)/pop/page.tsx
new file mode 100644
index 00000000..3cf5de33
--- /dev/null
+++ b/frontend/app/(pop)/pop/page.tsx
@@ -0,0 +1,7 @@
+"use client";
+
+import { PopDashboard } from "@/components/pop/dashboard";
+
+export default function PopPage() {
+  return <PopDashboard />;
+}
diff --git a/frontend/app/(pop)/pop/work/page.tsx b/frontend/app/(pop)/pop/work/page.tsx
new file mode 100644
index 00000000..15608959
--- /dev/null
+++ b/frontend/app/(pop)/pop/work/page.tsx
@@ -0,0 +1,8 @@
+"use client";
+
+import { PopApp } from "@/components/pop";
+
+export default function PopWorkPage() {
+  return <PopApp />;
+}
+
diff --git a/frontend/app/(pop)/work/page.tsx b/frontend/app/(pop)/work/page.tsx
new file mode 100644
index 00000000..15608959
--- /dev/null
+++ b/frontend/app/(pop)/work/page.tsx
@@ -0,0 +1,8 @@
+"use client";
+
+import { PopApp } from "@/components/pop";
+
+export default function PopWorkPage() {
+  return <PopApp />;
+}
+
diff --git a/frontend/app/globals.css b/frontend/app/globals.css
index a252eaff..1614c9b8 100644
--- a/frontend/app/globals.css
+++ b/frontend/app/globals.css
@@ -388,6 +388,237 @@ select {
   border-spacing: 0 !important;
 }
 
+/* ===== POP (Production Operation Panel) Styles ===== */
+
+/* POP 전용 다크 테마 변수 */
+.pop-dark {
+  /* 배경 색상 */
+  --pop-bg-deepest: 8 12 21;
+  --pop-bg-deep: 10 15 28;
+  --pop-bg-primary: 13 19 35;
+  --pop-bg-secondary: 18 26 47;
+  --pop-bg-tertiary: 25 35 60;
+  --pop-bg-elevated: 32 45 75;
+
+  /* 네온 강조색 */
+  --pop-neon-cyan: 0 212 255;
+  --pop-neon-cyan-bright: 0 240 255;
+  --pop-neon-cyan-dim: 0 150 190;
+  --pop-neon-pink: 255 0 102;
+  --pop-neon-purple: 138 43 226;
+
+  /* 상태 색상 */
+  --pop-success: 0 255 136;
+  --pop-success-dim: 0 180 100;
+  --pop-warning: 255 170 0;
+  --pop-warning-dim: 200 130 0;
+  --pop-danger: 255 51 51;
+  --pop-danger-dim: 200 40 40;
+
+  /* 텍스트 색상 */
+  --pop-text-primary: 255 255 255;
+  --pop-text-secondary: 180 195 220;
+  --pop-text-muted: 100 120 150;
+
+  /* 테두리 색상 */
+  --pop-border: 40 55 85;
+  --pop-border-light: 55 75 110;
+}
+
+/* POP 전용 라이트 테마 변수 */
+.pop-light {
+  --pop-bg-deepest: 245 247 250;
+  --pop-bg-deep: 240 243 248;
+  --pop-bg-primary: 250 251 253;
+  --pop-bg-secondary: 255 255 255;
+  --pop-bg-tertiary: 245 247 250;
+  --pop-bg-elevated: 235 238 245;
+
+  --pop-neon-cyan: 0 122 204;
+  --pop-neon-cyan-bright: 0 140 230;
+  --pop-neon-cyan-dim: 0 100 170;
+  --pop-neon-pink: 220 38 127;
+  --pop-neon-purple: 118 38 200;
+
+  --pop-success: 22 163 74;
+  --pop-success-dim: 21 128 61;
+  --pop-warning: 245 158 11;
+  --pop-warning-dim: 217 119 6;
+  --pop-danger: 220 38 38;
+  --pop-danger-dim: 185 28 28;
+
+  --pop-text-primary: 15 23 42;
+  --pop-text-secondary: 71 85 105;
+  --pop-text-muted: 148 163 184;
+
+  --pop-border: 226 232 240;
+  --pop-border-light: 203 213 225;
+}
+
+/* POP 배경 그리드 패턴 */
+.pop-bg-pattern::before {
+  content: "";
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background:
+    repeating-linear-gradient(90deg, rgba(0, 212, 255, 0.03) 0px, transparent 1px, transparent 60px),
+    repeating-linear-gradient(0deg, rgba(0, 212, 255, 0.03) 0px, transparent 1px, transparent 60px),
+    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(0, 212, 255, 0.08) 0%, transparent 60%);
+  pointer-events: none;
+  z-index: 0;
+}
+
+.pop-light .pop-bg-pattern::before {
+  background:
+    repeating-linear-gradient(90deg, rgba(0, 122, 204, 0.02) 0px, transparent 1px, transparent 60px),
+    repeating-linear-gradient(0deg, rgba(0, 122, 204, 0.02) 0px, transparent 1px, transparent 60px),
+    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(0, 122, 204, 0.05) 0%, transparent 60%);
+}
+
+/* POP 글로우 효과 */
+.pop-glow-cyan {
+  box-shadow:
+    0 0 20px rgba(0, 212, 255, 0.5),
+    0 0 40px rgba(0, 212, 255, 0.3);
+}
+
+.pop-glow-cyan-strong {
+  box-shadow:
+    0 0 10px rgba(0, 212, 255, 0.8),
+    0 0 30px rgba(0, 212, 255, 0.5),
+    0 0 50px rgba(0, 212, 255, 0.3);
+}
+
+.pop-glow-success {
+  box-shadow: 0 0 15px rgba(0, 255, 136, 0.5);
+}
+
+.pop-glow-warning {
+  box-shadow: 0 0 15px rgba(255, 170, 0, 0.5);
+}
+
+.pop-glow-danger {
+  box-shadow: 0 0 15px rgba(255, 51, 51, 0.5);
+}
+
+/* POP 펄스 글로우 애니메이션 */
+@keyframes pop-pulse-glow {
+  0%,
+  100% {
+    box-shadow: 0 0 5px rgba(0, 212, 255, 0.5);
+  }
+  50% {
+    box-shadow:
+      0 0 20px rgba(0, 212, 255, 0.8),
+      0 0 30px rgba(0, 212, 255, 0.4);
+  }
+}
+
+.pop-animate-pulse-glow {
+  animation: pop-pulse-glow 2s ease-in-out infinite;
+}
+
+/* POP 프로그레스 바 샤인 애니메이션 */
+@keyframes pop-progress-shine {
+  0% {
+    opacity: 0;
+    transform: translateX(-20px);
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+    transform: translateX(20px);
+  }
+}
+
+.pop-progress-shine::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 20px;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3));
+  animation: pop-progress-shine 1.5s ease-in-out infinite;
+}
+
+/* POP 스크롤바 스타일 */
+.pop-scrollbar::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+.pop-scrollbar::-webkit-scrollbar-track {
+  background: rgb(var(--pop-bg-secondary));
+}
+
+.pop-scrollbar::-webkit-scrollbar-thumb {
+  background: rgb(var(--pop-border-light));
+  border-radius: 9999px;
+}
+
+.pop-scrollbar::-webkit-scrollbar-thumb:hover {
+  background: rgb(var(--pop-neon-cyan-dim));
+}
+
+/* POP 스크롤바 숨기기 */
+.pop-hide-scrollbar::-webkit-scrollbar {
+  display: none;
+}
+
+.pop-hide-scrollbar {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+/* ===== Marching Ants Animation (Excel Copy Border) ===== */
+@keyframes marching-ants-h {
+  0% {
+    background-position: 0 0;
+  }
+  100% {
+    background-position: 16px 0;
+  }
+}
+
+@keyframes marching-ants-v {
+  0% {
+    background-position: 0 0;
+  }
+  100% {
+    background-position: 0 16px;
+  }
+}
+
+.animate-marching-ants-h {
+  background: repeating-linear-gradient(
+    90deg,
+    hsl(var(--primary)) 0,
+    hsl(var(--primary)) 4px,
+    transparent 4px,
+    transparent 8px
+  );
+  background-size: 16px 2px;
+  animation: marching-ants-h 0.4s linear infinite;
+}
+
+.animate-marching-ants-v {
+  background: repeating-linear-gradient(
+    180deg,
+    hsl(var(--primary)) 0,
+    hsl(var(--primary)) 4px,
+    transparent 4px,
+    transparent 8px
+  );
+  background-size: 2px 16px;
+  animation: marching-ants-v 0.4s linear infinite;
+}
+
 /* ===== 저장 테이블 막대기 애니메이션 ===== */
 @keyframes saveBarDrop {
   0% {
diff --git a/frontend/components/admin/multilang/CategoryTree.tsx b/frontend/components/admin/multilang/CategoryTree.tsx
new file mode 100644
index 00000000..2e1238cf
--- /dev/null
+++ b/frontend/components/admin/multilang/CategoryTree.tsx
@@ -0,0 +1,200 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { ChevronRight, ChevronDown, Folder, FolderOpen, Tag } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { LangCategory, getCategories } from "@/lib/api/multilang";
+
+interface CategoryTreeProps {
+  selectedCategoryId: number | null;
+  onSelectCategory: (category: LangCategory | null) => void;
+  onDoubleClickCategory?: (category: LangCategory) => void;
+}
+
+interface CategoryNodeProps {
+  category: LangCategory;
+  level: number;
+  selectedCategoryId: number | null;
+  onSelectCategory: (category: LangCategory) => void;
+  onDoubleClickCategory?: (category: LangCategory) => void;
+}
+
+function CategoryNode({
+  category,
+  level,
+  selectedCategoryId,
+  onSelectCategory,
+  onDoubleClickCategory,
+}: CategoryNodeProps) {
+  // 기본값: 접힌 상태로 시작
+  const [isExpanded, setIsExpanded] = useState(false);
+  const hasChildren = category.children && category.children.length > 0;
+  const isSelected = selectedCategoryId === category.categoryId;
+
+  return (
+    <div>
+      <div
+        className={cn(
+          "flex cursor-pointer items-center gap-1 rounded-md px-2 py-1.5 text-sm transition-colors",
+          isSelected
+            ? "bg-primary text-primary-foreground"
+            : "hover:bg-muted"
+        )}
+        style={{ paddingLeft: `${level * 16 + 8}px` }}
+        onClick={() => onSelectCategory(category)}
+        onDoubleClick={() => onDoubleClickCategory?.(category)}
+      >
+        {/* 확장/축소 아이콘 */}
+        {hasChildren ? (
+          <button
+            className="shrink-0"
+            onClick={(e) => {
+              e.stopPropagation();
+              setIsExpanded(!isExpanded);
+            }}
+          >
+            {isExpanded ? (
+              <ChevronDown className="h-4 w-4" />
+            ) : (
+              <ChevronRight className="h-4 w-4" />
+            )}
+          </button>
+        ) : (
+          <span className="w-4" />
+        )}
+
+        {/* 폴더/태그 아이콘 */}
+        {hasChildren || level === 0 ? (
+          isExpanded ? (
+            <FolderOpen className="h-4 w-4 shrink-0 text-amber-500" />
+          ) : (
+            <Folder className="h-4 w-4 shrink-0 text-amber-500" />
+          )
+        ) : (
+          <Tag className="h-4 w-4 shrink-0 text-blue-500" />
+        )}
+
+        {/* 카테고리 이름 */}
+        <span className="truncate">{category.categoryName}</span>
+
+        {/* prefix 표시 */}
+        <span
+          className={cn(
+            "ml-auto text-xs",
+            isSelected ? "text-primary-foreground/70" : "text-muted-foreground"
+          )}
+        >
+          {category.keyPrefix}
+        </span>
+      </div>
+
+      {/* 자식 카테고리 */}
+      {hasChildren && isExpanded && (
+        <div>
+          {category.children!.map((child) => (
+            <CategoryNode
+              key={child.categoryId}
+              category={child}
+              level={level + 1}
+              selectedCategoryId={selectedCategoryId}
+              onSelectCategory={onSelectCategory}
+              onDoubleClickCategory={onDoubleClickCategory}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export function CategoryTree({
+  selectedCategoryId,
+  onSelectCategory,
+  onDoubleClickCategory,
+}: CategoryTreeProps) {
+  const [categories, setCategories] = useState<LangCategory[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    loadCategories();
+  }, []);
+
+  const loadCategories = async () => {
+    try {
+      setLoading(true);
+      const response = await getCategories();
+      if (response.success && response.data) {
+        setCategories(response.data);
+      } else {
+        setError(response.error?.details || "카테고리 로드 실패");
+      }
+    } catch (err) {
+      setError("카테고리 로드 중 오류 발생");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="flex h-32 items-center justify-center">
+        <div className="animate-pulse text-sm text-muted-foreground">
+          카테고리 로딩 중...
+        </div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="flex h-32 items-center justify-center">
+        <div className="text-sm text-destructive">{error}</div>
+      </div>
+    );
+  }
+
+  if (categories.length === 0) {
+    return (
+      <div className="flex h-32 items-center justify-center">
+        <div className="text-sm text-muted-foreground">
+          카테고리가 없습니다
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-0.5">
+      {/* 전체 선택 옵션 */}
+      <div
+        className={cn(
+          "flex cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 text-sm transition-colors",
+          selectedCategoryId === null
+            ? "bg-primary text-primary-foreground"
+            : "hover:bg-muted"
+        )}
+        onClick={() => onSelectCategory(null)}
+      >
+        <Folder className="h-4 w-4 shrink-0" />
+        <span>전체</span>
+      </div>
+
+      {/* 카테고리 트리 */}
+      {categories.map((category) => (
+        <CategoryNode
+          key={category.categoryId}
+          category={category}
+          level={0}
+          selectedCategoryId={selectedCategoryId}
+          onSelectCategory={onSelectCategory}
+          onDoubleClickCategory={onDoubleClickCategory}
+        />
+      ))}
+    </div>
+  );
+}
+
+export default CategoryTree;
+
+
diff --git a/frontend/components/admin/multilang/KeyGenerateModal.tsx b/frontend/components/admin/multilang/KeyGenerateModal.tsx
new file mode 100644
index 00000000..c595adbc
--- /dev/null
+++ b/frontend/components/admin/multilang/KeyGenerateModal.tsx
@@ -0,0 +1,497 @@
+"use client";
+
+import { useState, useEffect, useCallback } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import { Badge } from "@/components/ui/badge";
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import { Loader2, AlertCircle, CheckCircle2, Info, Check, ChevronsUpDown } from "lucide-react";
+import { cn } from "@/lib/utils";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import {
+  LangCategory,
+  Language,
+  generateKey,
+  previewKey,
+  createOverrideKey,
+  getLanguages,
+  getCategoryPath,
+  KeyPreview,
+} from "@/lib/api/multilang";
+import { apiClient } from "@/lib/api/client";
+
+interface Company {
+  companyCode: string;
+  companyName: string;
+}
+
+interface KeyGenerateModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  selectedCategory: LangCategory | null;
+  companyCode: string;
+  isSuperAdmin: boolean;
+  onSuccess: () => void;
+}
+
+export function KeyGenerateModal({
+  isOpen,
+  onClose,
+  selectedCategory,
+  companyCode,
+  isSuperAdmin,
+  onSuccess,
+}: KeyGenerateModalProps) {
+  // 상태
+  const [keyMeaning, setKeyMeaning] = useState("");
+  const [usageNote, setUsageNote] = useState("");
+  const [targetCompanyCode, setTargetCompanyCode] = useState(companyCode);
+  const [languages, setLanguages] = useState<Language[]>([]);
+  const [texts, setTexts] = useState<Record<string, string>>({});
+  const [categoryPath, setCategoryPath] = useState<LangCategory[]>([]);
+  const [preview, setPreview] = useState<KeyPreview | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [previewLoading, setPreviewLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [companies, setCompanies] = useState<Company[]>([]);
+  const [companySearchOpen, setCompanySearchOpen] = useState(false);
+
+  // 초기화
+  useEffect(() => {
+    if (isOpen) {
+      setKeyMeaning("");
+      setUsageNote("");
+      setTargetCompanyCode(isSuperAdmin ? "*" : companyCode);
+      setTexts({});
+      setPreview(null);
+      setError(null);
+      loadLanguages();
+      if (isSuperAdmin) {
+        loadCompanies();
+      }
+      if (selectedCategory) {
+        loadCategoryPath(selectedCategory.categoryId);
+      } else {
+        setCategoryPath([]);
+      }
+    }
+  }, [isOpen, selectedCategory, companyCode, isSuperAdmin]);
+
+  // 회사 목록 로드 (최고관리자 전용)
+  const loadCompanies = async () => {
+    try {
+      const response = await apiClient.get("/admin/companies");
+      if (response.data.success && response.data.data) {
+        // snake_case를 camelCase로 변환하고 공통(*)은 제외
+        const companyList = response.data.data
+          .filter((c: any) => c.company_code !== "*")
+          .map((c: any) => ({
+            companyCode: c.company_code,
+            companyName: c.company_name,
+          }));
+        setCompanies(companyList);
+      }
+    } catch (err) {
+      console.error("회사 목록 로드 실패:", err);
+    }
+  };
+
+  // 언어 목록 로드
+  const loadLanguages = async () => {
+    const response = await getLanguages();
+    if (response.success && response.data) {
+      const activeLanguages = response.data.filter((l) => l.isActive === "Y");
+      setLanguages(activeLanguages);
+      // 초기 텍스트 상태 설정
+      const initialTexts: Record<string, string> = {};
+      activeLanguages.forEach((lang) => {
+        initialTexts[lang.langCode] = "";
+      });
+      setTexts(initialTexts);
+    }
+  };
+
+  // 카테고리 경로 로드
+  const loadCategoryPath = async (categoryId: number) => {
+    const response = await getCategoryPath(categoryId);
+    if (response.success && response.data) {
+      setCategoryPath(response.data);
+    }
+  };
+
+  // 키 미리보기 (디바운스)
+  const loadPreview = useCallback(async () => {
+    if (!selectedCategory || !keyMeaning.trim()) {
+      setPreview(null);
+      return;
+    }
+
+    setPreviewLoading(true);
+    try {
+      const response = await previewKey(
+        selectedCategory.categoryId,
+        keyMeaning.trim().toLowerCase().replace(/\s+/g, "_"),
+        targetCompanyCode
+      );
+      if (response.success && response.data) {
+        setPreview(response.data);
+      }
+    } catch (err) {
+      console.error("키 미리보기 실패:", err);
+    } finally {
+      setPreviewLoading(false);
+    }
+  }, [selectedCategory, keyMeaning, targetCompanyCode]);
+
+  // keyMeaning 변경 시 디바운스로 미리보기 로드
+  useEffect(() => {
+    const timer = setTimeout(loadPreview, 500);
+    return () => clearTimeout(timer);
+  }, [loadPreview]);
+
+  // 텍스트 변경 핸들러
+  const handleTextChange = (langCode: string, value: string) => {
+    setTexts((prev) => ({ ...prev, [langCode]: value }));
+  };
+
+  // 저장 핸들러
+  const handleSave = async () => {
+    if (!selectedCategory) {
+      setError("카테고리를 선택해주세요");
+      return;
+    }
+
+    if (!keyMeaning.trim()) {
+      setError("키 의미를 입력해주세요");
+      return;
+    }
+
+    // 최소 하나의 텍스트 입력 검증
+    const hasText = Object.values(texts).some((t) => t.trim());
+    if (!hasText) {
+      setError("최소 하나의 언어에 대한 텍스트를 입력해주세요");
+      return;
+    }
+
+    setLoading(true);
+    setError(null);
+
+    try {
+      // 오버라이드 모드인지 확인
+      if (preview?.isOverride && preview.baseKeyId) {
+        // 오버라이드 키 생성
+        const response = await createOverrideKey({
+          companyCode: targetCompanyCode,
+          baseKeyId: preview.baseKeyId,
+          texts: Object.entries(texts)
+            .filter(([_, text]) => text.trim())
+            .map(([langCode, langText]) => ({ langCode, langText })),
+        });
+
+        if (response.success) {
+          onSuccess();
+          onClose();
+        } else {
+          setError(response.error?.details || "오버라이드 키 생성 실패");
+        }
+      } else {
+        // 새 키 생성
+        const response = await generateKey({
+          companyCode: targetCompanyCode,
+          categoryId: selectedCategory.categoryId,
+          keyMeaning: keyMeaning.trim().toLowerCase().replace(/\s+/g, "_"),
+          usageNote: usageNote.trim() || undefined,
+          texts: Object.entries(texts)
+            .filter(([_, text]) => text.trim())
+            .map(([langCode, langText]) => ({ langCode, langText })),
+        });
+
+        if (response.success) {
+          onSuccess();
+          onClose();
+        } else {
+          setError(response.error?.details || "키 생성 실패");
+        }
+      }
+    } catch (err: any) {
+      setError(err.message || "키 생성 중 오류 발생");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // 생성될 키 미리보기
+  const generatedKeyPreview = categoryPath.length > 0 && keyMeaning.trim()
+    ? [...categoryPath.map((c) => c.keyPrefix), keyMeaning.trim().toLowerCase().replace(/\s+/g, "_")].join(".")
+    : "";
+
+  return (
+    <Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
+      <DialogContent className="max-w-[95vw] sm:max-w-[600px]">
+        <DialogHeader>
+          <DialogTitle className="text-base sm:text-lg">
+            {preview?.isOverride ? "오버라이드 키 생성" : "다국어 키 생성"}
+          </DialogTitle>
+          <DialogDescription className="text-xs sm:text-sm">
+            {preview?.isOverride
+              ? "공통 키에 대한 회사별 오버라이드를 생성합니다"
+              : "새로운 다국어 키를 자동으로 생성합니다"}
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-4 py-2">
+          {/* 카테고리 경로 표시 */}
+          <div>
+            <Label className="text-xs sm:text-sm">카테고리</Label>
+            <div className="mt-1 flex flex-wrap gap-1">
+              {categoryPath.length > 0 ? (
+                categoryPath.map((cat, idx) => (
+                  <span key={cat.categoryId} className="flex items-center">
+                    <Badge variant="secondary" className="text-xs">
+                      {cat.categoryName}
+                    </Badge>
+                    {idx < categoryPath.length - 1 && (
+                      <span className="mx-1 text-muted-foreground">/</span>
+                    )}
+                  </span>
+                ))
+              ) : (
+                <span className="text-sm text-muted-foreground">
+                  카테고리를 선택해주세요
+                </span>
+              )}
+            </div>
+          </div>
+
+          {/* 키 의미 입력 */}
+          <div>
+            <Label htmlFor="keyMeaning" className="text-xs sm:text-sm">
+              키 의미 *
+            </Label>
+            <Input
+              id="keyMeaning"
+              value={keyMeaning}
+              onChange={(e) => setKeyMeaning(e.target.value)}
+              placeholder="예: add_new_item, search_button, save_success"
+              className="h-8 text-xs sm:h-10 sm:text-sm"
+            />
+            <p className="mt-1 text-[10px] text-muted-foreground sm:text-xs">
+              영문 소문자와 밑줄(_)을 사용하세요
+            </p>
+          </div>
+
+          {/* 생성될 키 미리보기 */}
+          {generatedKeyPreview && (
+            <div className={cn(
+              "rounded-md border p-3",
+              preview?.exists 
+                ? "border-destructive bg-destructive/10"
+                : preview?.isOverride
+                ? "border-blue-500 bg-blue-500/10"
+                : "border-green-500 bg-green-500/10"
+            )}>
+              <div className="flex items-center gap-2">
+                {previewLoading ? (
+                  <Loader2 className="h-4 w-4 animate-spin" />
+                ) : preview?.exists ? (
+                  <AlertCircle className="h-4 w-4 text-destructive" />
+                ) : preview?.isOverride ? (
+                  <Info className="h-4 w-4 text-blue-500" />
+                ) : (
+                  <CheckCircle2 className="h-4 w-4 text-green-500" />
+                )}
+                <code className="text-xs font-mono sm:text-sm">
+                  {generatedKeyPreview}
+                </code>
+              </div>
+              {preview?.exists && (
+                <p className="mt-1 text-xs text-destructive">
+                  이미 존재하는 키입니다
+                </p>
+              )}
+              {preview?.isOverride && !preview?.exists && (
+                <p className="mt-1 text-xs text-blue-600">
+                  공통 키가 존재합니다. 회사별 오버라이드로 생성됩니다.
+                </p>
+              )}
+            </div>
+          )}
+
+          {/* 대상 회사 선택 (최고 관리자만) */}
+          {isSuperAdmin && (
+            <div>
+              <Label className="text-xs sm:text-sm">대상</Label>
+              <div className="mt-1">
+                <Popover open={companySearchOpen} onOpenChange={setCompanySearchOpen}>
+                  <PopoverTrigger asChild>
+                    <Button
+                      variant="outline"
+                      role="combobox"
+                      aria-expanded={companySearchOpen}
+                      className="h-8 w-full justify-between text-xs sm:h-10 sm:text-sm"
+                    >
+                      {targetCompanyCode === "*"
+                        ? "공통 (*) - 모든 회사 적용"
+                        : companies.find((c) => c.companyCode === targetCompanyCode)
+                          ? `${companies.find((c) => c.companyCode === targetCompanyCode)?.companyName} (${targetCompanyCode})`
+                          : "대상 선택"}
+                      <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                    </Button>
+                  </PopoverTrigger>
+                  <PopoverContent 
+                    className="p-0" 
+                    style={{ width: "var(--radix-popover-trigger-width)" }}
+                    align="start"
+                  >
+                    <Command>
+                      <CommandInput placeholder="회사 검색..." className="text-xs sm:text-sm" />
+                      <CommandList>
+                        <CommandEmpty className="py-2 text-center text-xs sm:text-sm">
+                          검색 결과가 없습니다
+                        </CommandEmpty>
+                        <CommandGroup>
+                          <CommandItem
+                            value="공통"
+                            onSelect={() => {
+                              setTargetCompanyCode("*");
+                              setCompanySearchOpen(false);
+                            }}
+                            className="text-xs sm:text-sm"
+                          >
+                            <Check
+                              className={cn(
+                                "mr-2 h-4 w-4",
+                                targetCompanyCode === "*" ? "opacity-100" : "opacity-0"
+                              )}
+                            />
+                            공통 (*) - 모든 회사 적용
+                          </CommandItem>
+                          {companies.map((company) => (
+                            <CommandItem
+                              key={company.companyCode}
+                              value={`${company.companyName} ${company.companyCode}`}
+                              onSelect={() => {
+                                setTargetCompanyCode(company.companyCode);
+                                setCompanySearchOpen(false);
+                              }}
+                              className="text-xs sm:text-sm"
+                            >
+                              <Check
+                                className={cn(
+                                  "mr-2 h-4 w-4",
+                                  targetCompanyCode === company.companyCode ? "opacity-100" : "opacity-0"
+                                )}
+                              />
+                              {company.companyName} ({company.companyCode})
+                            </CommandItem>
+                          ))}
+                        </CommandGroup>
+                      </CommandList>
+                    </Command>
+                  </PopoverContent>
+                </Popover>
+              </div>
+            </div>
+          )}
+
+          {/* 사용 메모 */}
+          <div>
+            <Label htmlFor="usageNote" className="text-xs sm:text-sm">
+              사용 메모 (선택)
+            </Label>
+            <Textarea
+              id="usageNote"
+              value={usageNote}
+              onChange={(e) => setUsageNote(e.target.value)}
+              placeholder="이 키가 어디서 사용되는지 메모"
+              className="h-16 resize-none text-xs sm:text-sm"
+            />
+          </div>
+
+          {/* 번역 텍스트 입력 */}
+          <div>
+            <Label className="text-xs sm:text-sm">번역 텍스트 *</Label>
+            <div className="mt-2 space-y-2">
+              {languages.map((lang) => (
+                <div key={lang.langCode} className="flex items-center gap-2">
+                  <Badge variant="outline" className="w-12 justify-center text-xs">
+                    {lang.langCode}
+                  </Badge>
+                  <Input
+                    value={texts[lang.langCode] || ""}
+                    onChange={(e) => handleTextChange(lang.langCode, e.target.value)}
+                    placeholder={`${lang.langName} 텍스트`}
+                    className="h-8 flex-1 text-xs sm:h-9 sm:text-sm"
+                  />
+                </div>
+              ))}
+            </div>
+          </div>
+
+          {/* 에러 메시지 */}
+          {error && (
+            <Alert variant="destructive">
+              <AlertCircle className="h-4 w-4" />
+              <AlertDescription className="text-xs sm:text-sm">
+                {error}
+              </AlertDescription>
+            </Alert>
+          )}
+        </div>
+
+        <DialogFooter className="gap-2 sm:gap-0">
+          <Button
+            variant="outline"
+            onClick={onClose}
+            disabled={loading}
+            className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
+          >
+            취소
+          </Button>
+          <Button
+            onClick={handleSave}
+            disabled={loading || !selectedCategory || !keyMeaning.trim() || preview?.exists}
+            className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
+          >
+            {loading ? (
+              <>
+                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                생성 중...
+              </>
+            ) : preview?.isOverride ? (
+              "오버라이드 생성"
+            ) : (
+              "키 생성"
+            )}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export default KeyGenerateModal;
+
+
diff --git a/frontend/components/common/EditableSpreadsheet.tsx b/frontend/components/common/EditableSpreadsheet.tsx
new file mode 100644
index 00000000..67e7f80b
--- /dev/null
+++ b/frontend/components/common/EditableSpreadsheet.tsx
@@ -0,0 +1,1209 @@
+"use client";
+
+import React, { useState, useRef, useEffect, useCallback } from "react";
+import { cn } from "@/lib/utils";
+
+interface EditableSpreadsheetProps {
+  columns: string[];
+  data: Record<string, any>[];
+  onColumnsChange: (columns: string[]) => void;
+  onDataChange: (data: Record<string, any>[]) => void;
+  maxHeight?: string;
+}
+
+// 셀 범위 정의
+interface CellRange {
+  startRow: number;
+  startCol: number;
+  endRow: number;
+  endCol: number;
+}
+
+/**
+ * 엑셀처럼 편집 가능한 스프레드시트 컴포넌트
+ * - 셀 클릭으로 편집
+ * - Tab/Enter로 다음 셀 이동
+ * - 마지막 행/열에서 자동 추가
+ * - 헤더(컬럼명)도 편집 가능
+ * - 다중 셀 선택 (드래그)
+ * - 자동 채우기 (드래그 핸들) - 다중 셀 지원
+ */
+export const EditableSpreadsheet: React.FC<EditableSpreadsheetProps> = ({
+  columns,
+  data,
+  onColumnsChange,
+  onDataChange,
+  maxHeight = "350px",
+}) => {
+  // 현재 편집 중인 셀 (row: -1은 헤더)
+  const [editingCell, setEditingCell] = useState<{
+    row: number;
+    col: number;
+  } | null>(null);
+  const [editValue, setEditValue] = useState<string>("");
+  
+  // 선택 범위 (다중 셀 선택)
+  const [selection, setSelection] = useState<CellRange | null>(null);
+  
+  // 셀 선택 드래그 중
+  const [isDraggingSelection, setIsDraggingSelection] = useState(false);
+  
+  // 자동 채우기 드래그 상태
+  const [isDraggingFill, setIsDraggingFill] = useState(false);
+  const [fillPreviewEnd, setFillPreviewEnd] = useState<number | null>(null);
+  
+  // 복사된 범위 (점선 애니메이션 표시용)
+  const [copiedRange, setCopiedRange] = useState<CellRange | null>(null);
+  
+  // Undo/Redo 히스토리
+  interface HistoryState {
+    columns: string[];
+    data: Record<string, any>[];
+  }
+  const [history, setHistory] = useState<HistoryState[]>([]);
+  const [historyIndex, setHistoryIndex] = useState(-1);
+  const [isUndoRedo, setIsUndoRedo] = useState(false);
+  
+  const inputRef = useRef<HTMLInputElement>(null);
+  const tableRef = useRef<HTMLDivElement>(null);
+  
+  // 히스토리에 현재 상태 저장
+  const saveToHistory = useCallback(() => {
+    if (isUndoRedo) return;
+    
+    const newState: HistoryState = {
+      columns: [...columns],
+      data: data.map(row => ({ ...row })),
+    };
+    
+    setHistory(prev => {
+      // 현재 인덱스 이후의 히스토리는 삭제 (새로운 분기)
+      const newHistory = prev.slice(0, historyIndex + 1);
+      newHistory.push(newState);
+      // 최대 50개까지만 유지
+      if (newHistory.length > 50) {
+        newHistory.shift();
+        return newHistory;
+      }
+      return newHistory;
+    });
+    setHistoryIndex(prev => Math.min(prev + 1, 49));
+  }, [columns, data, historyIndex, isUndoRedo]);
+  
+  // 초기 상태 저장
+  useEffect(() => {
+    if (history.length === 0 && (columns.length > 0 || data.length > 0)) {
+      setHistory([{ columns: [...columns], data: data.map(row => ({ ...row })) }]);
+      setHistoryIndex(0);
+    }
+  }, []);
+  
+  // 데이터 변경 시 히스토리 저장 (Undo/Redo가 아닌 경우)
+  useEffect(() => {
+    if (!isUndoRedo && historyIndex >= 0) {
+      const currentState = history[historyIndex];
+      if (currentState) {
+        const columnsChanged = JSON.stringify(columns) !== JSON.stringify(currentState.columns);
+        const dataChanged = JSON.stringify(data) !== JSON.stringify(currentState.data);
+        if (columnsChanged || dataChanged) {
+          saveToHistory();
+        }
+      }
+    }
+    setIsUndoRedo(false);
+  }, [columns, data]);
+  
+  // Undo 실행
+  const handleUndo = useCallback(() => {
+    if (historyIndex <= 0) return;
+    
+    const prevIndex = historyIndex - 1;
+    const prevState = history[prevIndex];
+    if (prevState) {
+      setIsUndoRedo(true);
+      setHistoryIndex(prevIndex);
+      onColumnsChange([...prevState.columns]);
+      onDataChange(prevState.data.map(row => ({ ...row })));
+    }
+  }, [history, historyIndex, onColumnsChange, onDataChange]);
+  
+  // Redo 실행
+  const handleRedo = useCallback(() => {
+    if (historyIndex >= history.length - 1) return;
+    
+    const nextIndex = historyIndex + 1;
+    const nextState = history[nextIndex];
+    if (nextState) {
+      setIsUndoRedo(true);
+      setHistoryIndex(nextIndex);
+      onColumnsChange([...nextState.columns]);
+      onDataChange(nextState.data.map(row => ({ ...row })));
+    }
+  }, [history, historyIndex, onColumnsChange, onDataChange]);
+
+  // 범위 정규화 (시작이 끝보다 크면 교환)
+  const normalizeRange = (range: CellRange): CellRange => {
+    return {
+      startRow: Math.min(range.startRow, range.endRow),
+      startCol: Math.min(range.startCol, range.endCol),
+      endRow: Math.max(range.startRow, range.endRow),
+      endCol: Math.max(range.startCol, range.endCol),
+    };
+  };
+
+  // 셀이 선택 범위 내에 있는지 확인
+  const isCellInSelection = (row: number, col: number): boolean => {
+    if (!selection) return false;
+    const norm = normalizeRange(selection);
+    return (
+      row >= norm.startRow &&
+      row <= norm.endRow &&
+      col >= norm.startCol &&
+      col <= norm.endCol
+    );
+  };
+
+  // 셀이 선택 범위의 끝(우하단)인지 확인
+  const isCellSelectionEnd = (row: number, col: number): boolean => {
+    if (!selection) return false;
+    const norm = normalizeRange(selection);
+    return row === norm.endRow && col === norm.endCol;
+  };
+
+  // 셀 선택 시작 (클릭)
+  const handleCellMouseDown = useCallback((row: number, col: number, e: React.MouseEvent) => {
+    // 편집 중이면 종료
+    if (editingCell) {
+      setEditingCell(null);
+      setEditValue("");
+    }
+
+    // 새 선택 시작
+    setSelection({
+      startRow: row,
+      startCol: col,
+      endRow: row,
+      endCol: col,
+    });
+    setIsDraggingSelection(true);
+    
+    // 테이블에 포커스 (키보드 이벤트 수신용)
+    tableRef.current?.focus();
+  }, [editingCell]);
+
+  // 셀 선택 드래그 중
+  const handleCellMouseEnter = useCallback((row: number, col: number) => {
+    if (isDraggingSelection && selection) {
+      setSelection((prev) => prev ? {
+        ...prev,
+        endRow: row,
+        endCol: col,
+      } : null);
+    }
+  }, [isDraggingSelection, selection]);
+
+  // 셀 선택 드래그 종료
+  useEffect(() => {
+    const handleMouseUp = () => {
+      if (isDraggingSelection) {
+        setIsDraggingSelection(false);
+      }
+    };
+
+    document.addEventListener("mouseup", handleMouseUp);
+    return () => document.removeEventListener("mouseup", handleMouseUp);
+  }, [isDraggingSelection]);
+
+  // 셀 편집 시작 (더블클릭)
+  const startEditing = useCallback(
+    (row: number, col: number) => {
+      setEditingCell({ row, col });
+      setSelection({
+        startRow: row,
+        startCol: col,
+        endRow: row,
+        endCol: col,
+      });
+      if (row === -1) {
+        // 헤더 편집
+        setEditValue(columns[col] || "");
+      } else {
+        // 데이터 셀 편집
+        const colName = columns[col];
+        setEditValue(String(data[row]?.[colName] ?? ""));
+      }
+    },
+    [columns, data]
+  );
+
+  // 편집 완료
+  const finishEditing = useCallback(() => {
+    if (!editingCell) return;
+
+    const { row, col } = editingCell;
+
+    if (row === -1) {
+      // 헤더(컬럼명) 변경
+      const newColumns = [...columns];
+      const oldColName = newColumns[col];
+      const newColName = editValue.trim() || `Column${col + 1}`;
+
+      if (oldColName !== newColName) {
+        newColumns[col] = newColName;
+        onColumnsChange(newColumns);
+
+        // 데이터의 키도 함께 변경
+        const newData = data.map((rowData) => {
+          const newRowData: Record<string, any> = {};
+          Object.keys(rowData).forEach((key) => {
+            if (key === oldColName) {
+              newRowData[newColName] = rowData[key];
+            } else {
+              newRowData[key] = rowData[key];
+            }
+          });
+          return newRowData;
+        });
+        onDataChange(newData);
+      }
+    } else {
+      // 데이터 셀 변경
+      const colName = columns[col];
+      const newData = [...data];
+      if (!newData[row]) {
+        newData[row] = {};
+      }
+      newData[row] = { ...newData[row], [colName]: editValue };
+      onDataChange(newData);
+    }
+
+    setEditingCell(null);
+    setEditValue("");
+  }, [editingCell, editValue, columns, data, onColumnsChange, onDataChange]);
+
+  // 다음 셀로 이동
+  const moveToNextCell = useCallback(
+    (direction: "right" | "down" | "left" | "up") => {
+      if (!editingCell) return;
+
+      finishEditing();
+
+      const { row, col } = editingCell;
+      let nextRow = row;
+      let nextCol = col;
+
+      switch (direction) {
+        case "right":
+          if (col < columns.length - 1) {
+            nextCol = col + 1;
+          } else {
+            // 마지막 열에서 Tab → 새 열 추가 (빈 헤더로)
+            const tempColId = `__temp_${Date.now()}`;
+            const newColumns = [...columns, ""];
+            onColumnsChange(newColumns);
+
+            // 모든 행에 새 컬럼 추가 (임시 키 사용)
+            const newData = data.map((rowData) => ({
+              ...rowData,
+              [tempColId]: "",
+            }));
+            onDataChange(newData);
+
+            nextCol = columns.length;
+          }
+          break;
+
+        case "down":
+          if (row === -1) {
+            nextRow = 0;
+          } else if (row < data.length - 1) {
+            nextRow = row + 1;
+          } else {
+            // 마지막 행에서 Enter → 새 행 추가
+            const newRow: Record<string, any> = {};
+            columns.forEach((c) => {
+              newRow[c] = "";
+            });
+            onDataChange([...data, newRow]);
+            nextRow = data.length;
+          }
+          break;
+
+        case "left":
+          if (col > 0) {
+            nextCol = col - 1;
+          }
+          break;
+
+        case "up":
+          if (row > -1) {
+            nextRow = row - 1;
+          }
+          break;
+      }
+
+      // 다음 셀 편집 시작
+      setTimeout(() => {
+        startEditing(nextRow, nextCol);
+      }, 0);
+    },
+    [editingCell, columns, data, onColumnsChange, onDataChange, finishEditing, startEditing]
+  );
+
+  // 키보드 이벤트 처리
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent<HTMLInputElement>) => {
+      switch (e.key) {
+        case "Tab":
+          e.preventDefault();
+          moveToNextCell(e.shiftKey ? "left" : "right");
+          break;
+        case "Enter":
+          e.preventDefault();
+          moveToNextCell("down");
+          break;
+        case "Escape":
+          setEditingCell(null);
+          setEditValue("");
+          break;
+        case "ArrowUp":
+          if (!e.shiftKey) {
+            e.preventDefault();
+            moveToNextCell("up");
+          }
+          break;
+        case "ArrowDown":
+          if (!e.shiftKey) {
+            e.preventDefault();
+            moveToNextCell("down");
+          }
+          break;
+        case "ArrowLeft":
+          // 커서가 맨 앞이면 왼쪽 셀로
+          if (inputRef.current?.selectionStart === 0) {
+            e.preventDefault();
+            moveToNextCell("left");
+          }
+          break;
+        case "ArrowRight":
+          // 커서가 맨 뒤면 오른쪽 셀로
+          if (inputRef.current?.selectionStart === editValue.length) {
+            e.preventDefault();
+            moveToNextCell("right");
+          }
+          break;
+      }
+    },
+    [moveToNextCell, editValue]
+  );
+
+  // 편집 모드일 때 input에 포커스
+  useEffect(() => {
+    if (editingCell && inputRef.current) {
+      inputRef.current.focus();
+      inputRef.current.select();
+    }
+  }, [editingCell]);
+
+  // 외부 클릭 시 편집 종료
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (tableRef.current && !tableRef.current.contains(e.target as Node)) {
+        finishEditing();
+        setSelection(null);
+      }
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [finishEditing]);
+
+  // ============ 복사/붙여넣기 ============
+
+  // 셀이 복사 범위 내에 있는지 확인
+  const isCellInCopiedRange = (row: number, col: number): boolean => {
+    if (!copiedRange) return false;
+    const norm = normalizeRange(copiedRange);
+    return (
+      row >= norm.startRow &&
+      row <= norm.endRow &&
+      col >= norm.startCol &&
+      col <= norm.endCol
+    );
+  };
+
+  // 복사 범위의 테두리 위치 확인
+  const getCopiedBorderPosition = (row: number, col: number): { top: boolean; right: boolean; bottom: boolean; left: boolean } => {
+    if (!copiedRange) return { top: false, right: false, bottom: false, left: false };
+    const norm = normalizeRange(copiedRange);
+    
+    if (!isCellInCopiedRange(row, col)) {
+      return { top: false, right: false, bottom: false, left: false };
+    }
+
+    return {
+      top: row === norm.startRow,
+      right: col === norm.endCol,
+      bottom: row === norm.endRow,
+      left: col === norm.startCol,
+    };
+  };
+
+  // 선택 범위 복사 (Ctrl+C)
+  const handleCopy = useCallback(async () => {
+    if (!selection || editingCell) return;
+
+    const norm = normalizeRange(selection);
+    const rows: string[] = [];
+
+    for (let r = norm.startRow; r <= norm.endRow; r++) {
+      const rowValues: string[] = [];
+      for (let c = norm.startCol; c <= norm.endCol; c++) {
+        if (r === -1) {
+          // 헤더 복사
+          rowValues.push(columns[c] || "");
+        } else {
+          // 데이터 복사
+          const colName = columns[c];
+          rowValues.push(String(data[r]?.[colName] ?? ""));
+        }
+      }
+      rows.push(rowValues.join("\t"));
+    }
+
+    const text = rows.join("\n");
+    
+    try {
+      await navigator.clipboard.writeText(text);
+      // 복사 범위 저장 (점선 애니메이션 표시)
+      setCopiedRange({ ...norm });
+    } catch (err) {
+      console.warn("클립보드 복사 실패:", err);
+    }
+  }, [selection, editingCell, columns, data]);
+
+  // 붙여넣기 (Ctrl+V)
+  const handlePaste = useCallback(async () => {
+    if (!selection || editingCell) return;
+
+    try {
+      const text = await navigator.clipboard.readText();
+      if (!text) return;
+
+      const norm = normalizeRange(selection);
+      const pasteRows = text.split(/\r?\n/).map((row) => row.split("\t"));
+      
+      // 빈 행 제거
+      const filteredRows = pasteRows.filter((row) => row.some((cell) => cell.trim() !== ""));
+      if (filteredRows.length === 0) return;
+
+      const newData = [...data];
+      const newColumns = [...columns];
+      let columnsChanged = false;
+
+      for (let ri = 0; ri < filteredRows.length; ri++) {
+        const pasteRow = filteredRows[ri];
+        const targetRow = norm.startRow + ri;
+
+        for (let ci = 0; ci < pasteRow.length; ci++) {
+          const targetCol = norm.startCol + ci;
+          const value = pasteRow[ci];
+
+          if (targetRow === -1) {
+            // 헤더에 붙여넣기
+            if (targetCol < newColumns.length) {
+              newColumns[targetCol] = value;
+              columnsChanged = true;
+            }
+          } else {
+            // 데이터에 붙여넣기
+            if (targetCol < columns.length) {
+              // 필요시 행 추가
+              while (newData.length <= targetRow) {
+                const emptyRow: Record<string, any> = {};
+                columns.forEach((c) => {
+                  emptyRow[c] = "";
+                });
+                newData.push(emptyRow);
+              }
+
+              const colName = columns[targetCol];
+              newData[targetRow] = {
+                ...newData[targetRow],
+                [colName]: value,
+              };
+            }
+          }
+        }
+      }
+
+      if (columnsChanged) {
+        onColumnsChange(newColumns);
+      }
+      onDataChange(newData);
+
+      // 붙여넣기 범위로 선택 확장
+      setSelection({
+        startRow: norm.startRow,
+        startCol: norm.startCol,
+        endRow: Math.min(norm.startRow + filteredRows.length - 1, data.length - 1),
+        endCol: Math.min(norm.startCol + (filteredRows[0]?.length || 1) - 1, columns.length - 1),
+      });
+
+      // 붙여넣기 후 복사 범위 초기화
+      setCopiedRange(null);
+    } catch (err) {
+      console.warn("클립보드 붙여넣기 실패:", err);
+    }
+  }, [selection, editingCell, columns, data, onColumnsChange, onDataChange]);
+
+  // Delete 키로 선택 범위 삭제
+  const handleDelete = useCallback(() => {
+    if (!selection || editingCell) return;
+
+    const norm = normalizeRange(selection);
+    const newData = [...data];
+
+    for (let r = norm.startRow; r <= norm.endRow; r++) {
+      if (r >= 0 && r < newData.length) {
+        for (let c = norm.startCol; c <= norm.endCol; c++) {
+          if (c < columns.length) {
+            const colName = columns[c];
+            newData[r] = {
+              ...newData[r],
+              [colName]: "",
+            };
+          }
+        }
+      }
+    }
+
+    onDataChange(newData);
+  }, [selection, editingCell, columns, data, onDataChange]);
+
+  // 전역 키보드 이벤트 (복사/붙여넣기/삭제)
+  useEffect(() => {
+    const handleGlobalKeyDown = (e: KeyboardEvent) => {
+      // 편집 중이면 무시 (input에서 자체 처리)
+      if (editingCell) return;
+      
+      // 선택이 없으면 무시
+      if (!selection) return;
+
+      // 다른 입력 필드에 포커스가 있으면 무시
+      const activeElement = document.activeElement;
+      const isInputFocused = activeElement instanceof HTMLInputElement ||
+                             activeElement instanceof HTMLTextAreaElement ||
+                             activeElement instanceof HTMLSelectElement;
+      
+      // 테이블 내부의 input이 아닌 다른 input에 포커스가 있으면 무시
+      if (isInputFocused && !tableRef.current?.contains(activeElement)) {
+        return;
+      }
+
+      if ((e.ctrlKey || e.metaKey) && e.key === "z") {
+        // Ctrl+Z: Undo
+        e.preventDefault();
+        handleUndo();
+      } else if ((e.ctrlKey || e.metaKey) && e.key === "y") {
+        // Ctrl+Y: Redo
+        e.preventDefault();
+        handleRedo();
+      } else if ((e.ctrlKey || e.metaKey) && e.key === "c") {
+        e.preventDefault();
+        handleCopy();
+      } else if ((e.ctrlKey || e.metaKey) && e.key === "v") {
+        e.preventDefault();
+        handlePaste();
+      } else if (e.key === "Delete" || e.key === "Backspace") {
+        // 다른 곳에 포커스가 있으면 Delete 무시
+        if (isInputFocused) return;
+        e.preventDefault();
+        handleDelete();
+      } else if (e.key === "Escape") {
+        // Esc로 복사 범위 표시 취소
+        setCopiedRange(null);
+      } else if (e.key === "F2") {
+        // F2로 편집 모드 진입 (기존 값 유지)
+        const norm = normalizeRange(selection);
+        if (norm.startRow >= 0 && norm.startRow === norm.endRow && norm.startCol === norm.endCol) {
+          e.preventDefault();
+          const colName = columns[norm.startCol];
+          setEditingCell({ row: norm.startRow, col: norm.startCol });
+          setEditValue(String(data[norm.startRow]?.[colName] ?? ""));
+        }
+      } else if (e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) {
+        // 일반 문자 키 입력 시 편집 모드 진입 (엑셀처럼)
+        const norm = normalizeRange(selection);
+        if (norm.startRow >= 0 && norm.startRow === norm.endRow && norm.startCol === norm.endCol) {
+          // 단일 셀 선택 시에만
+          e.preventDefault();
+          setEditingCell({ row: norm.startRow, col: norm.startCol });
+          setEditValue(e.key); // 입력한 문자로 시작
+        }
+      }
+    };
+
+    document.addEventListener("keydown", handleGlobalKeyDown);
+    return () => document.removeEventListener("keydown", handleGlobalKeyDown);
+  }, [editingCell, selection, handleCopy, handlePaste, handleDelete, handleUndo, handleRedo]);
+
+  // 행 삭제
+  const handleDeleteRow = (rowIndex: number) => {
+    const newData = data.filter((_, i) => i !== rowIndex);
+    onDataChange(newData);
+  };
+
+  // 열 삭제
+  const handleDeleteColumn = (colIndex: number) => {
+    if (columns.length <= 1) return;
+
+    const colName = columns[colIndex];
+    const newColumns = columns.filter((_, i) => i !== colIndex);
+    onColumnsChange(newColumns);
+
+    const newData = data.map((row) => {
+      const { [colName]: removed, ...rest } = row;
+      return rest;
+    });
+    onDataChange(newData);
+  };
+
+  // 컬럼 문자 (A, B, C, ...)
+  const getColumnLetter = (index: number): string => {
+    let letter = "";
+    let i = index;
+    while (i >= 0) {
+      letter = String.fromCharCode(65 + (i % 26)) + letter;
+      i = Math.floor(i / 26) - 1;
+    }
+    return letter;
+  };
+
+  // ============ 자동 채우기 로직 ============
+
+  // 값에서 마지막 숫자 패턴 추출
+  const extractNumberPattern = (value: string): { 
+    prefix: string; 
+    number: number; 
+    suffix: string;
+    numLength: number;
+    isZeroPadded: boolean;
+  } | null => {
+    if (/^-?\d+(\.\d+)?$/.test(value)) {
+      const isZeroPadded = value.startsWith("0") && value.length > 1 && !value.includes(".");
+      return { 
+        prefix: "", 
+        number: parseFloat(value), 
+        suffix: "",
+        numLength: value.replace("-", "").split(".")[0].length,
+        isZeroPadded
+      };
+    }
+
+    const match = value.match(/^(.*)(\d+)(\D*)$/);
+    if (match) {
+      const numStr = match[2];
+      const isZeroPadded = numStr.startsWith("0") && numStr.length > 1;
+      return {
+        prefix: match[1],
+        number: parseInt(numStr, 10),
+        suffix: match[3],
+        numLength: numStr.length,
+        isZeroPadded
+      };
+    }
+
+    return null;
+  };
+
+  // 날짜 패턴 인식
+  const extractDatePattern = (value: string): Date | null => {
+    const dateMatch = value.match(/^(\d{4})-(\d{2})-(\d{2})$/);
+    if (dateMatch) {
+      const date = new Date(parseInt(dateMatch[1]), parseInt(dateMatch[2]) - 1, parseInt(dateMatch[3]));
+      if (!isNaN(date.getTime())) {
+        return date;
+      }
+    }
+    return null;
+  };
+
+  // 다음 값 생성
+  const generateNextValue = (sourceValue: string, step: number): string => {
+    if (!sourceValue || sourceValue.trim() === "") {
+      return "";
+    }
+
+    const datePattern = extractDatePattern(sourceValue);
+    if (datePattern) {
+      const newDate = new Date(datePattern);
+      newDate.setDate(newDate.getDate() + step);
+      const year = newDate.getFullYear();
+      const month = String(newDate.getMonth() + 1).padStart(2, "0");
+      const day = String(newDate.getDate()).padStart(2, "0");
+      return `${year}-${month}-${day}`;
+    }
+
+    const numberPattern = extractNumberPattern(sourceValue);
+    if (numberPattern) {
+      const newNumber = numberPattern.number + step;
+      const absNumber = Math.max(0, newNumber);
+      
+      let numStr: string;
+      if (numberPattern.isZeroPadded) {
+        numStr = String(absNumber).padStart(numberPattern.numLength, "0");
+      } else {
+        numStr = String(absNumber);
+      }
+      
+      return numberPattern.prefix + numStr + numberPattern.suffix;
+    }
+
+    return sourceValue;
+  };
+
+  // 자동 채우기 드래그 시작
+  const handleFillDragStart = (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    
+    // 편집 중이면 먼저 현재 편집 값을 저장
+    if (editingCell) {
+      const { row, col } = editingCell;
+      if (row === -1) {
+        // 헤더 변경
+        const newColumns = [...columns];
+        const oldColName = newColumns[col];
+        const newColName = editValue.trim() || `Column${col + 1}`;
+        if (oldColName !== newColName) {
+          newColumns[col] = newColName;
+          onColumnsChange(newColumns);
+        }
+      } else {
+        // 데이터 셀 변경
+        const colName = columns[col];
+        const newData = [...data];
+        if (!newData[row]) {
+          newData[row] = {};
+        }
+        newData[row] = { ...newData[row], [colName]: editValue };
+        onDataChange(newData);
+      }
+      setEditingCell(null);
+      setEditValue("");
+    }
+    
+    if (!selection) return;
+    const norm = normalizeRange(selection);
+    if (norm.startRow < 0) return; // 헤더는 제외
+    
+    setIsDraggingFill(true);
+    setFillPreviewEnd(norm.endRow);
+  };
+
+  // 자동 채우기 드래그 중
+  const handleFillDragMove = useCallback((e: MouseEvent) => {
+    if (!isDraggingFill || !selection || !tableRef.current) return;
+
+    const rows = tableRef.current.querySelectorAll("tbody tr");
+    const mouseY = e.clientY;
+
+    for (let i = 0; i < rows.length - 1; i++) {
+      const row = rows[i] as HTMLElement;
+      const rect = row.getBoundingClientRect();
+      
+      if (mouseY >= rect.top && mouseY <= rect.bottom) {
+        setFillPreviewEnd(i);
+        break;
+      } else if (mouseY > rect.bottom && i === rows.length - 2) {
+        setFillPreviewEnd(i);
+      }
+    }
+  }, [isDraggingFill, selection]);
+
+  // 열의 숫자 패턴 간격 계산 (예: 201, 202 → 간격 1)
+  const calculateColumnIncrement = (colIndex: number, startRow: number, endRow: number): number | null => {
+    if (startRow === endRow) return 1; // 단일 행이면 기본 증가 1
+    
+    const colName = columns[colIndex];
+    const increments: number[] = [];
+    
+    for (let row = startRow; row < endRow; row++) {
+      const currentValue = String(data[row]?.[colName] ?? "");
+      const nextValue = String(data[row + 1]?.[colName] ?? "");
+      
+      const currentPattern = extractNumberPattern(currentValue);
+      const nextPattern = extractNumberPattern(nextValue);
+      
+      if (currentPattern && nextPattern) {
+        // 접두사와 접미사가 같은지 확인
+        if (currentPattern.prefix === nextPattern.prefix && currentPattern.suffix === nextPattern.suffix) {
+          increments.push(nextPattern.number - currentPattern.number);
+        } else {
+          return null; // 패턴이 다르면 복사 모드
+        }
+      } else {
+        return null; // 숫자 패턴이 없으면 복사 모드
+      }
+    }
+    
+    // 모든 간격이 같은지 확인
+    if (increments.length > 0 && increments.every(inc => inc === increments[0])) {
+      return increments[0];
+    }
+    
+    return null;
+  };
+
+  // 자동 채우기 드래그 종료 (다중 셀 지원)
+  // - 숫자 패턴이 있으면: 패턴 간격을 인식하여 증가 (201, 202 → 203, 204)
+  // - 숫자 패턴이 없으면: 선택된 패턴 그대로 반복 (복사)
+  const handleFillDragEnd = useCallback(() => {
+    if (!isDraggingFill || !selection || fillPreviewEnd === null) {
+      setIsDraggingFill(false);
+      setFillPreviewEnd(null);
+      return;
+    }
+
+    const norm = normalizeRange(selection);
+    const endRow = fillPreviewEnd;
+    const selectionHeight = norm.endRow - norm.startRow + 1;
+
+    if (endRow !== norm.endRow && norm.startRow >= 0) {
+      const newData = [...data];
+      
+      // 각 열별로 증가 패턴 계산
+      const columnIncrements: Map<number, number | null> = new Map();
+      for (let col = norm.startCol; col <= norm.endCol; col++) {
+        columnIncrements.set(col, calculateColumnIncrement(col, norm.startRow, norm.endRow));
+      }
+
+      if (endRow > norm.endRow) {
+        // 아래로 채우기
+        for (let targetRow = norm.endRow + 1; targetRow <= endRow; targetRow++) {
+          if (!newData[targetRow]) {
+            newData[targetRow] = {};
+            columns.forEach((c) => {
+              newData[targetRow][c] = "";
+            });
+          }
+
+          // 선택된 모든 열에 대해 채우기
+          for (let col = norm.startCol; col <= norm.endCol; col++) {
+            const colName = columns[col];
+            const increment = columnIncrements.get(col);
+            
+            if (increment !== null) {
+              // 숫자 패턴 증가 모드
+              // 마지막 선택 행의 값을 기준으로 증가
+              const lastValue = String(data[norm.endRow]?.[colName] ?? "");
+              const step = (targetRow - norm.endRow) * increment;
+              newData[targetRow] = {
+                ...newData[targetRow],
+                [colName]: generateNextValue(lastValue, step),
+              };
+            } else {
+              // 복사 모드 (패턴 반복)
+              const sourceRowOffset = (targetRow - norm.endRow - 1) % selectionHeight;
+              const sourceRow = norm.startRow + sourceRowOffset;
+              const sourceValue = String(data[sourceRow]?.[colName] ?? "");
+              newData[targetRow] = {
+                ...newData[targetRow],
+                [colName]: sourceValue,
+              };
+            }
+          }
+        }
+      } else if (endRow < norm.startRow) {
+        // 위로 채우기
+        for (let targetRow = norm.startRow - 1; targetRow >= endRow; targetRow--) {
+          if (!newData[targetRow]) {
+            newData[targetRow] = {};
+            columns.forEach((c) => {
+              newData[targetRow][c] = "";
+            });
+          }
+
+          for (let col = norm.startCol; col <= norm.endCol; col++) {
+            const colName = columns[col];
+            const increment = columnIncrements.get(col);
+            
+            if (increment !== null) {
+              // 숫자 패턴 감소 모드
+              const firstValue = String(data[norm.startRow]?.[colName] ?? "");
+              const step = (targetRow - norm.startRow) * increment;
+              newData[targetRow] = {
+                ...newData[targetRow],
+                [colName]: generateNextValue(firstValue, step),
+              };
+            } else {
+              // 복사 모드 (패턴 반복)
+              const sourceRowOffset = (norm.startRow - targetRow - 1) % selectionHeight;
+              const sourceRow = norm.endRow - sourceRowOffset;
+              const sourceValue = String(data[sourceRow]?.[colName] ?? "");
+              newData[targetRow] = {
+                ...newData[targetRow],
+                [colName]: sourceValue,
+              };
+            }
+          }
+        }
+      }
+
+      onDataChange(newData);
+    }
+
+    setIsDraggingFill(false);
+    setFillPreviewEnd(null);
+  }, [isDraggingFill, selection, fillPreviewEnd, columns, data, onDataChange]);
+
+  // 드래그 이벤트 리스너
+  useEffect(() => {
+    if (isDraggingFill) {
+      document.addEventListener("mousemove", handleFillDragMove);
+      document.addEventListener("mouseup", handleFillDragEnd);
+      return () => {
+        document.removeEventListener("mousemove", handleFillDragMove);
+        document.removeEventListener("mouseup", handleFillDragEnd);
+      };
+    }
+  }, [isDraggingFill, handleFillDragMove, handleFillDragEnd]);
+
+  // 셀이 자동 채우기 미리보기 범위에 있는지 확인
+  const isInFillPreview = (rowIndex: number, colIndex: number): boolean => {
+    if (!isDraggingFill || !selection || fillPreviewEnd === null) return false;
+    
+    const norm = normalizeRange(selection);
+    
+    // 열이 선택 범위 내에 있어야 함
+    if (colIndex < norm.startCol || colIndex > norm.endCol) return false;
+
+    if (fillPreviewEnd > norm.endRow) {
+      return rowIndex > norm.endRow && rowIndex <= fillPreviewEnd;
+    } else if (fillPreviewEnd < norm.startRow) {
+      return rowIndex >= fillPreviewEnd && rowIndex < norm.startRow;
+    }
+    
+    return false;
+  };
+
+  return (
+    <div
+      ref={tableRef}
+      tabIndex={0}
+      className="overflow-auto rounded-md border border-border select-none outline-none focus:ring-2 focus:ring-primary/20"
+      style={{ maxHeight }}
+    >
+      <table className="min-w-full border-collapse text-xs">
+        {/* 열 인덱스 헤더 (A, B, C, ...) */}
+        <thead className="sticky top-0 z-10 bg-muted">
+          <tr>
+            {/* 빈 코너 셀 */}
+            <th className="sticky left-0 z-20 w-10 border-b border-r border-border bg-muted px-1 py-1 text-center text-[10px] text-muted-foreground">
+              
+            </th>
+            {columns.map((_, colIndex) => (
+              <th
+                key={colIndex}
+                className="min-w-[100px] border-b border-r border-border bg-muted px-2 py-1 text-center font-normal text-muted-foreground"
+              >
+                <div className="flex items-center justify-center gap-1">
+                  <span>{getColumnLetter(colIndex)}</span>
+                  {columns.length > 1 && (
+                    <button
+                      onClick={() => handleDeleteColumn(colIndex)}
+                      className="ml-1 text-muted-foreground/50 hover:text-destructive"
+                      title="열 삭제"
+                    >
+                      ×
+                    </button>
+                  )}
+                </div>
+              </th>
+            ))}
+            {/* 새 열 추가 버튼 */}
+            <th className="w-8 border-b border-border bg-muted px-1 py-1">
+              <button
+                onClick={() => {
+                  onColumnsChange([...columns, ""]);
+                  const tempColId = `__temp_${Date.now()}`;
+                  const newData = data.map((row) => ({ ...row, [tempColId]: "" }));
+                  onDataChange(newData);
+                }}
+                className="text-muted-foreground/50 hover:text-primary"
+                title="열 추가"
+              >
+                +
+              </button>
+            </th>
+          </tr>
+
+          {/* 컬럼명 헤더 (편집 가능) */}
+          <tr>
+            <th className="sticky left-0 z-20 w-10 border-b border-r border-border bg-primary/10 px-1 py-1 text-center font-medium">
+              1
+            </th>
+            {columns.map((colName, colIndex) => (
+              <th
+                key={colIndex}
+                className={cn(
+                  "min-w-[100px] cursor-pointer border-b border-r border-border bg-primary/5 px-0 py-0 font-medium text-primary",
+                  (editingCell?.row === -1 && editingCell?.col === colIndex) ||
+                    isCellInSelection(-1, colIndex)
+                    ? "ring-2 ring-primary ring-inset"
+                    : ""
+                )}
+                onMouseDown={(e) => handleCellMouseDown(-1, colIndex, e)}
+                onMouseEnter={() => handleCellMouseEnter(-1, colIndex)}
+                onDoubleClick={() => startEditing(-1, colIndex)}
+              >
+                {editingCell?.row === -1 && editingCell?.col === colIndex ? (
+                  <input
+                    ref={inputRef}
+                    type="text"
+                    value={editValue}
+                    onChange={(e) => setEditValue(e.target.value)}
+                    onKeyDown={handleKeyDown}
+                    onBlur={finishEditing}
+                    className="w-full bg-white px-2 py-1 text-xs font-medium text-primary outline-none"
+                  />
+                ) : (
+                  <div className="px-2 py-1">{colName || <span className="text-muted-foreground/50 italic">빈 헤더</span>}</div>
+                )}
+              </th>
+            ))}
+            <th className="w-8 border-b border-border bg-primary/5"></th>
+          </tr>
+        </thead>
+
+        <tbody>
+          {data.map((row, rowIndex) => (
+            <tr key={rowIndex} className="group">
+              {/* 행 번호 */}
+              <td className="sticky left-0 z-10 w-10 border-b border-r border-border bg-muted/50 px-1 py-1 text-center text-muted-foreground">
+                <div className="flex items-center justify-center gap-0.5">
+                  <span>{rowIndex + 2}</span>
+                  <button
+                    onClick={() => handleDeleteRow(rowIndex)}
+                    className="hidden text-muted-foreground/50 hover:text-destructive group-hover:inline"
+                    title="행 삭제"
+                  >
+                    ×
+                  </button>
+                </div>
+              </td>
+
+              {/* 데이터 셀 */}
+              {columns.map((colName, colIndex) => {
+                const isSelected = isCellInSelection(rowIndex, colIndex);
+                const isEditing = editingCell?.row === rowIndex && editingCell?.col === colIndex;
+                const inFillPreview = isInFillPreview(rowIndex, colIndex);
+                const isSelectionEnd = isCellSelectionEnd(rowIndex, colIndex);
+                const copiedBorder = getCopiedBorderPosition(rowIndex, colIndex);
+                const isCopied = isCellInCopiedRange(rowIndex, colIndex);
+
+                return (
+                  <td
+                    key={colIndex}
+                    className={cn(
+                      "relative cursor-cell border-b border-r border-border px-0 py-0",
+                      isSelected ? "bg-primary/10" : "",
+                      isEditing ? "ring-2 ring-primary ring-inset" : "",
+                      inFillPreview ? "bg-primary/20" : ""
+                    )}
+                    onMouseDown={(e) => handleCellMouseDown(rowIndex, colIndex, e)}
+                    onMouseEnter={() => handleCellMouseEnter(rowIndex, colIndex)}
+                    onDoubleClick={() => startEditing(rowIndex, colIndex)}
+                  >
+                    {isEditing ? (
+                      <input
+                        ref={inputRef}
+                        type="text"
+                        value={editValue}
+                        onChange={(e) => setEditValue(e.target.value)}
+                        onKeyDown={handleKeyDown}
+                        onBlur={finishEditing}
+                        className="w-full bg-white px-2 py-1 text-xs outline-none"
+                      />
+                    ) : (
+                      <div
+                        className="max-w-[200px] truncate px-2 py-1"
+                        title={String(row[colName] ?? "")}
+                      >
+                        {String(row[colName] ?? "")}
+                      </div>
+                    )}
+
+                    {/* 복사 범위 점선 테두리 (Marching Ants) */}
+                    {isCopied && (
+                      <>
+                        {copiedBorder.top && (
+                          <div className="pointer-events-none absolute left-0 right-0 top-0 h-[2px] animate-marching-ants-h" />
+                        )}
+                        {copiedBorder.right && (
+                          <div className="pointer-events-none absolute bottom-0 right-0 top-0 w-[2px] animate-marching-ants-v" />
+                        )}
+                        {copiedBorder.bottom && (
+                          <div className="pointer-events-none absolute bottom-0 left-0 right-0 h-[2px] animate-marching-ants-h" />
+                        )}
+                        {copiedBorder.left && (
+                          <div className="pointer-events-none absolute bottom-0 left-0 top-0 w-[2px] animate-marching-ants-v" />
+                        )}
+                      </>
+                    )}
+
+                    {/* 자동 채우기 핸들 - 선택 범위의 우하단에서만 표시 (편집 중에도 표시) */}
+                    {isSelectionEnd && selection && normalizeRange(selection).startRow >= 0 && (
+                      <div
+                        className="absolute bottom-0 right-0 z-20 h-2.5 w-2.5 translate-x-1/2 translate-y-1/2 cursor-crosshair border border-white bg-primary"
+                        onMouseDown={handleFillDragStart}
+                        title="자동 채우기"
+                      />
+                    )}
+                  </td>
+                );
+              })}
+              <td className="w-8 border-b border-border"></td>
+            </tr>
+          ))}
+
+          {/* 새 행 추가 영역 */}
+          <tr className="bg-muted/20">
+            <td className="sticky left-0 z-10 w-10 border-r border-border bg-muted/30 px-1 py-1 text-center">
+              <button
+                onClick={() => {
+                  const newRow: Record<string, any> = {};
+                  columns.forEach((c) => {
+                    newRow[c] = "";
+                  });
+                  onDataChange([...data, newRow]);
+                }}
+                className="text-muted-foreground/50 hover:text-primary"
+                title="행 추가"
+              >
+                +
+              </button>
+            </td>
+            <td
+              colSpan={columns.length + 1}
+              className="cursor-pointer px-2 py-1 text-muted-foreground/50 hover:bg-muted/50"
+              onClick={() => {
+                const newRow: Record<string, any> = {};
+                columns.forEach((c) => {
+                  newRow[c] = "";
+                });
+                onDataChange([...data, newRow]);
+                setTimeout(() => {
+                  startEditing(data.length, 0);
+                }, 0);
+              }}
+            >
+              클릭하여 새 행 추가...
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  );
+};
diff --git a/frontend/components/common/ExcelUploadModal.tsx b/frontend/components/common/ExcelUploadModal.tsx
index a4a17274..64fe38b8 100644
--- a/frontend/components/common/ExcelUploadModal.tsx
+++ b/frontend/components/common/ExcelUploadModal.tsx
@@ -18,16 +18,12 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import { Input } from "@/components/ui/input";
-import { Checkbox } from "@/components/ui/checkbox";
 import { toast } from "sonner";
 import {
   Upload,
   FileSpreadsheet,
   AlertCircle,
   CheckCircle2,
-  Plus,
-  Minus,
   ArrowRight,
   Zap,
 } from "lucide-react";
@@ -35,6 +31,37 @@ import { importFromExcel, getExcelSheetNames } from "@/lib/utils/excelExport";
 import { DynamicFormApi } from "@/lib/api/dynamicForm";
 import { getTableSchema, TableColumn } from "@/lib/api/tableSchema";
 import { cn } from "@/lib/utils";
+import { findMappingByColumns, saveMappingTemplate } from "@/lib/api/excelMapping";
+import { EditableSpreadsheet } from "./EditableSpreadsheet";
+
+// 마스터-디테일 엑셀 업로드 설정 (버튼 설정에서 설정)
+export interface MasterDetailExcelConfig {
+  // 테이블 정보
+  masterTable?: string;
+  detailTable?: string;
+  masterKeyColumn?: string;
+  detailFkColumn?: string;
+  // 채번
+  numberingRuleId?: string;
+  // 업로드 전 사용자가 선택할 마스터 테이블 필드
+  masterSelectFields?: Array<{
+    columnName: string;
+    columnLabel: string;
+    required: boolean;
+    inputType: "entity" | "date" | "text" | "select";
+    referenceTable?: string;
+    referenceColumn?: string;
+    displayColumn?: string;
+  }>;
+  // 엑셀에서 매핑할 디테일 테이블 필드
+  detailExcelFields?: Array<{
+    columnName: string;
+    columnLabel: string;
+    required: boolean;
+  }>;
+  masterDefaults?: Record<string, any>;
+  detailDefaults?: Record<string, any>;
+}
 
 export interface ExcelUploadModalProps {
   open: boolean;
@@ -44,6 +71,24 @@ export interface ExcelUploadModalProps {
   keyColumn?: string;
   onSuccess?: () => void;
   userId?: string;
+  // 마스터-디테일 지원
+  screenId?: number;
+  isMasterDetail?: boolean;
+  masterDetailRelation?: {
+    masterTable: string;
+    detailTable: string;
+    masterKeyColumn: string;
+    detailFkColumn: string;
+    masterColumns: Array<{ name: string; label: string; inputType: string; isFromMaster: boolean }>;
+    detailColumns: Array<{ name: string; label: string; inputType: string; isFromMaster: boolean }>;
+  };
+  // 🆕 마스터-디테일 엑셀 업로드 설정
+  masterDetailExcelConfig?: MasterDetailExcelConfig;
+  // 🆕 단일 테이블 채번 설정
+  numberingRuleId?: string;
+  numberingTargetColumn?: string;
+  // 🆕 업로드 후 제어 실행 설정
+  afterUploadFlows?: Array<{ flowId: string; order: number }>;
 }
 
 interface ColumnMapping {
@@ -59,37 +104,156 @@ export const ExcelUploadModal: React.FC<ExcelUploadModalProps> = ({
   keyColumn,
   onSuccess,
   userId = "guest",
+  screenId,
+  isMasterDetail = false,
+  masterDetailRelation,
+  masterDetailExcelConfig,
+  // 단일 테이블 채번 설정
+  numberingRuleId,
+  numberingTargetColumn,
+  // 업로드 후 제어 실행 설정
+  afterUploadFlows,
 }) => {
   const [currentStep, setCurrentStep] = useState(1);
 
-  // 1단계: 파일 선택
+  // 1단계: 파일 선택 & 미리보기
   const [file, setFile] = useState<File | null>(null);
   const [sheetNames, setSheetNames] = useState<string[]>([]);
   const [selectedSheet, setSelectedSheet] = useState<string>("");
+  const [isDragOver, setIsDragOver] = useState(false);
   const fileInputRef = useRef<HTMLInputElement>(null);
-
-  // 2단계: 범위 지정
-  const [autoCreateColumn, setAutoCreateColumn] = useState(false);
-  const [selectedCompany, setSelectedCompany] = useState<string>("");
-  const [selectedDataType, setSelectedDataType] = useState<string>("");
   const [detectedRange, setDetectedRange] = useState<string>("");
-  const [previewData, setPreviewData] = useState<Record<string, any>[]>([]);
   const [allData, setAllData] = useState<Record<string, any>[]>([]);
   const [displayData, setDisplayData] = useState<Record<string, any>[]>([]);
 
-  // 3단계: 컬럼 매핑
+  // 2단계: 컬럼 매핑 + 매핑 템플릿 자동 적용
+  const [isAutoMappingLoaded, setIsAutoMappingLoaded] = useState(false);
   const [excelColumns, setExcelColumns] = useState<string[]>([]);
   const [systemColumns, setSystemColumns] = useState<TableColumn[]>([]);
   const [columnMappings, setColumnMappings] = useState<ColumnMapping[]>([]);
 
-  // 4단계: 확인
+  // 3단계: 확인
   const [isUploading, setIsUploading] = useState(false);
 
+  // 🆕 마스터-디테일 모드: 마스터 필드 입력값
+  const [masterFieldValues, setMasterFieldValues] = useState<Record<string, any>>({});
+  const [entitySearchData, setEntitySearchData] = useState<Record<string, any[]>>({});
+  const [entitySearchLoading, setEntitySearchLoading] = useState<Record<string, boolean>>({});
+  const [entityDisplayColumns, setEntityDisplayColumns] = useState<Record<string, string>>({});
+
+  // 🆕 엔티티 참조 데이터 로드
+  useEffect(() => {
+    console.log("🔍 엔티티 데이터 로드 체크:", {
+      masterSelectFields: masterDetailExcelConfig?.masterSelectFields,
+      open,
+      isMasterDetail,
+    });
+
+    if (!masterDetailExcelConfig?.masterSelectFields) return;
+
+    const loadEntityData = async () => {
+      const { apiClient } = await import("@/lib/api/client");
+      const { DynamicFormApi } = await import("@/lib/api/dynamicForm");
+
+      for (const field of masterDetailExcelConfig.masterSelectFields!) {
+        console.log("🔍 필드 처리:", field);
+        
+        if (field.inputType === "entity") {
+          setEntitySearchLoading((prev) => ({ ...prev, [field.columnName]: true }));
+          try {
+            let refTable = field.referenceTable;
+            console.log("🔍 초기 refTable:", refTable);
+
+            let displayCol = field.displayColumn;
+
+            // referenceTable 또는 displayColumn이 없으면 DB에서 동적으로 조회
+            if ((!refTable || !displayCol) && masterDetailExcelConfig.masterTable) {
+              console.log("🔍 DB에서 referenceTable/displayColumn 조회 시도:", masterDetailExcelConfig.masterTable);
+              const colResponse = await apiClient.get(
+                `/table-management/tables/${masterDetailExcelConfig.masterTable}/columns`
+              );
+              console.log("🔍 컬럼 조회 응답:", colResponse.data);
+              
+              if (colResponse.data?.success && colResponse.data?.data?.columns) {
+                const colInfo = colResponse.data.data.columns.find(
+                  (c: any) => (c.columnName || c.column_name) === field.columnName
+                );
+                console.log("🔍 찾은 컬럼 정보:", colInfo);
+                if (colInfo) {
+                  if (!refTable) {
+                    refTable = colInfo.referenceTable || colInfo.reference_table;
+                    console.log("🔍 DB에서 가져온 refTable:", refTable);
+                  }
+                  if (!displayCol) {
+                    displayCol = colInfo.displayColumn || colInfo.display_column;
+                    console.log("🔍 DB에서 가져온 displayColumn:", displayCol);
+                  }
+                }
+              }
+            }
+
+            // displayColumn 저장 (Select 렌더링 시 사용)
+            if (displayCol) {
+              setEntityDisplayColumns((prev) => ({ ...prev, [field.columnName]: displayCol }));
+            }
+
+            if (refTable) {
+              console.log("🔍 엔티티 데이터 조회:", refTable);
+              const response = await DynamicFormApi.getTableData(refTable, {
+                page: 1,
+                pageSize: 1000,
+              });
+              console.log("🔍 엔티티 데이터 응답:", response);
+              // getTableData는 { success, data: [...] } 형식으로 반환
+              const rows = response.data?.rows || response.data;
+              if (response.success && rows && Array.isArray(rows)) {
+                setEntitySearchData((prev) => ({
+                  ...prev,
+                  [field.columnName]: rows,
+                }));
+                console.log("✅ 엔티티 데이터 로드 성공:", field.columnName, rows.length, "개");
+              }
+            } else {
+              console.warn("❌ 엔티티 필드의 referenceTable을 찾을 수 없음:", field.columnName);
+            }
+          } catch (error) {
+            console.error("❌ 엔티티 데이터 로드 실패:", field.columnName, error);
+          } finally {
+            setEntitySearchLoading((prev) => ({ ...prev, [field.columnName]: false }));
+          }
+        }
+      }
+    };
+
+    if (open && isMasterDetail && masterDetailExcelConfig?.masterSelectFields?.length > 0) {
+      loadEntityData();
+    }
+  }, [open, isMasterDetail, masterDetailExcelConfig]);
+
+  // 마스터-디테일 모드에서 마스터 필드 입력 여부 확인
+  const isSimpleMasterDetailMode = isMasterDetail && masterDetailExcelConfig;
+  const hasMasterSelectFields = isSimpleMasterDetailMode && 
+    (masterDetailExcelConfig?.masterSelectFields?.length ?? 0) > 0;
+
+  // 마스터 필드가 모두 입력되었는지 확인
+  const isMasterFieldsValid = () => {
+    if (!hasMasterSelectFields) return true;
+    return masterDetailExcelConfig!.masterSelectFields!.every((field) => {
+      if (!field.required) return true;
+      const value = masterFieldValues[field.columnName];
+      return value !== undefined && value !== null && value !== "";
+    });
+  };
+
   // 파일 선택 핸들러
   const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
     const selectedFile = e.target.files?.[0];
     if (!selectedFile) return;
+    await processFile(selectedFile);
+  };
 
+  // 파일 처리 공통 함수 (파일 선택 및 드래그 앤 드롭에서 공유)
+  const processFile = async (selectedFile: File) => {
     const fileExtension = selectedFile.name.split(".").pop()?.toLowerCase();
     if (!["xlsx", "xls", "csv"].includes(fileExtension || "")) {
       toast.error("엑셀 파일만 업로드 가능합니다. (.xlsx, .xls, .csv)");
@@ -105,7 +269,7 @@ export const ExcelUploadModal: React.FC<ExcelUploadModalProps> = ({
 
       const data = await importFromExcel(selectedFile, sheets[0]);
       setAllData(data);
-      setDisplayData(data); // 전체 데이터를 미리보기에 표시 (스크롤 가능)
+      setDisplayData(data);
 
       if (data.length > 0) {
         const columns = Object.keys(data[0]);
@@ -122,6 +286,30 @@ export const ExcelUploadModal: React.FC<ExcelUploadModalProps> = ({
     }
   };
 
+  // 드래그 앤 드롭 핸들러
+  const handleDragOver = (e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragOver(true);
+  };
+
+  const handleDragLeave = (e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragOver(false);
+  };
+
+  const handleDrop = async (e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragOver(false);
+
+    const droppedFile = e.dataTransfer.files?.[0];
+    if (droppedFile) {
+      await processFile(droppedFile);
+    }
+  };
+
   // 시트 변경 핸들러
   const handleSheetChange = async (sheetName: string) => {
     setSelectedSheet(sheetName);
@@ -130,7 +318,7 @@ export const ExcelUploadModal: React.FC<ExcelUploadModalProps> = ({
     try {
       const data = await importFromExcel(file, sheetName);
       setAllData(data);
-      setDisplayData(data); // 전체 데이터를 미리보기에 표시 (스크롤 가능)
+      setDisplayData(data);
 
       if (data.length > 0) {
         const columns = Object.keys(data[0]);
@@ -144,82 +332,156 @@ export const ExcelUploadModal: React.FC<ExcelUploadModalProps> = ({
     }
   };
 
-  // 행 추가
-  const handleAddRow = () => {
-    const newRow: Record<string, any> = {};
-    excelColumns.forEach((col) => {
-      newRow[col] = "";
-    });
-    setDisplayData([...displayData, newRow]);
-    toast.success("행이 추가되었습니다.");
-  };
-
-  // 행 삭제
-  const handleRemoveRow = () => {
-    if (displayData.length > 1) {
-      setDisplayData(displayData.slice(0, -1));
-      toast.success("마지막 행이 삭제되었습니다.");
-    } else {
-      toast.error("최소 1개의 행이 필요합니다.");
-    }
-  };
-
-  // 열 추가
-  const handleAddColumn = () => {
-    const newColName = `Column${excelColumns.length + 1}`;
-    setExcelColumns([...excelColumns, newColName]);
-    setDisplayData(
-      displayData.map((row) => ({
-        ...row,
-        [newColName]: "",
-      }))
-    );
-    toast.success("열이 추가되었습니다.");
-  };
-
-  // 열 삭제
-  const handleRemoveColumn = () => {
-    if (excelColumns.length > 1) {
-      const lastCol = excelColumns[excelColumns.length - 1];
-      setExcelColumns(excelColumns.slice(0, -1));
-      setDisplayData(
-        displayData.map((row) => {
-          const { [lastCol]: removed, ...rest } = row;
-          return rest;
-        })
-      );
-      toast.success("마지막 열이 삭제되었습니다.");
-    } else {
-      toast.error("최소 1개의 열이 필요합니다.");
-    }
-  };
-
-  // 테이블 스키마 가져오기
+  // 테이블 스키마 가져오기 (2단계 진입 시)
   useEffect(() => {
-    if (currentStep === 3 && tableName) {
+    if (currentStep === 2 && tableName) {
       loadTableSchema();
     }
   }, [currentStep, tableName]);
 
+  // 테이블 생성 시 자동 생성되는 시스템 컬럼 (매핑에서 제외)
+  const AUTO_GENERATED_COLUMNS = [
+    "id",
+    "created_date",
+    "updated_date",
+    "writer",
+    "company_code",
+  ];
+
   const loadTableSchema = async () => {
     try {
-      console.log("🔍 테이블 스키마 로드 시작:", { tableName });
-      
-      const response = await getTableSchema(tableName);
-      
-      console.log("📊 테이블 스키마 응답:", response);
-      
-      if (response.success && response.data) {
-        console.log("✅ 시스템 컬럼 로드 완료:", response.data.columns);
-        setSystemColumns(response.data.columns);
+      console.log("🔍 테이블 스키마 로드 시작:", { tableName, isMasterDetail, isSimpleMasterDetailMode });
 
+      let allColumns: TableColumn[] = [];
+
+      // 🆕 마스터-디테일 간단 모드: 디테일 테이블 컬럼만 로드 (마스터 필드는 UI에서 선택)
+      if (isSimpleMasterDetailMode && masterDetailRelation) {
+        const { detailTable, detailFkColumn } = masterDetailRelation;
+        
+        console.log("📊 마스터-디테일 간단 모드 스키마 로드 (디테일만):", { detailTable });
+
+        // 디테일 테이블 스키마만 로드 (마스터 정보는 UI에서 선택)
+        const detailResponse = await getTableSchema(detailTable);
+        if (detailResponse.success && detailResponse.data) {
+          // 설정된 detailExcelFields가 있으면 해당 필드만, 없으면 전체
+          const configuredFields = masterDetailExcelConfig?.detailExcelFields;
+          
+          const detailCols = detailResponse.data.columns
+            .filter((col) => {
+              // 자동 생성 컬럼, FK 컬럼 제외
+              if (AUTO_GENERATED_COLUMNS.includes(col.name.toLowerCase())) return false;
+              if (col.name === detailFkColumn) return false;
+              
+              // 설정된 필드가 있으면 해당 필드만
+              if (configuredFields && configuredFields.length > 0) {
+                return configuredFields.some((f) => f.columnName === col.name);
+              }
+              return true;
+            })
+            .map((col) => {
+              // 설정에서 라벨 찾기
+              const configField = configuredFields?.find((f) => f.columnName === col.name);
+              return {
+                ...col,
+                label: configField?.columnLabel || col.label || col.name,
+                originalName: col.name,
+                sourceTable: detailTable,
+              };
+            });
+          allColumns = detailCols;
+        }
+
+        console.log("✅ 마스터-디테일 간단 모드 컬럼 로드 완료:", allColumns.length);
+      }
+      // 🆕 마스터-디테일 기존 모드: 두 테이블의 컬럼 합치기
+      else if (isMasterDetail && masterDetailRelation) {
+        const { masterTable, detailTable, detailFkColumn } = masterDetailRelation;
+        
+        console.log("📊 마스터-디테일 스키마 로드:", { masterTable, detailTable });
+
+        // 마스터 테이블 스키마
+        const masterResponse = await getTableSchema(masterTable);
+        if (masterResponse.success && masterResponse.data) {
+          const masterCols = masterResponse.data.columns
+            .filter((col) => !AUTO_GENERATED_COLUMNS.includes(col.name.toLowerCase()))
+            .map((col) => ({
+              ...col,
+              // 유니크 키를 위해 테이블명 접두사 추가
+              name: `${masterTable}.${col.name}`,
+              label: `[마스터] ${col.label || col.name}`,
+              originalName: col.name,
+              sourceTable: masterTable,
+            }));
+          allColumns = [...allColumns, ...masterCols];
+        }
+
+        // 디테일 테이블 스키마 (FK 컬럼 제외)
+        const detailResponse = await getTableSchema(detailTable);
+        if (detailResponse.success && detailResponse.data) {
+          const detailCols = detailResponse.data.columns
+            .filter((col) => 
+              !AUTO_GENERATED_COLUMNS.includes(col.name.toLowerCase()) &&
+              col.name !== detailFkColumn // FK 컬럼 제외
+            )
+            .map((col) => ({
+              ...col,
+              // 유니크 키를 위해 테이블명 접두사 추가
+              name: `${detailTable}.${col.name}`,
+              label: `[디테일] ${col.label || col.name}`,
+              originalName: col.name,
+              sourceTable: detailTable,
+            }));
+          allColumns = [...allColumns, ...detailCols];
+        }
+
+        console.log("✅ 마스터-디테일 컬럼 로드 완료:", allColumns.length);
+      } else {
+        // 기존 단일 테이블 모드
+        const response = await getTableSchema(tableName);
+
+        console.log("📊 테이블 스키마 응답:", response);
+
+        if (response.success && response.data) {
+          // 자동 생성 컬럼 제외
+          allColumns = response.data.columns.filter(
+            (col) => !AUTO_GENERATED_COLUMNS.includes(col.name.toLowerCase())
+          );
+        } else {
+          console.error("❌ 테이블 스키마 로드 실패:", response);
+          return;
+        }
+      }
+
+      console.log("✅ 시스템 컬럼 로드 완료 (자동 생성 컬럼 제외):", allColumns);
+      setSystemColumns(allColumns);
+
+      // 기존 매핑 템플릿 조회
+      console.log("🔍 매핑 템플릿 조회 중...", { tableName, excelColumns });
+      const mappingResponse = await findMappingByColumns(tableName, excelColumns);
+
+      if (mappingResponse.success && mappingResponse.data) {
+        // 저장된 매핑 템플릿이 있으면 자동 적용
+        console.log("✅ 기존 매핑 템플릿 발견:", mappingResponse.data);
+        const savedMappings = mappingResponse.data.columnMappings;
+
+        const appliedMappings: ColumnMapping[] = excelColumns.map((col) => ({
+          excelColumn: col,
+          systemColumn: savedMappings[col] || null,
+        }));
+        setColumnMappings(appliedMappings);
+        setIsAutoMappingLoaded(true);
+
+        const matchedCount = appliedMappings.filter((m) => m.systemColumn).length;
+        toast.success(`이전 매핑 템플릿이 적용되었습니다. (${matchedCount}개 컬럼)`);
+      } else {
+        // 매핑 템플릿이 없으면 초기 상태로 설정
+        console.log("ℹ️ 매핑 템플릿 없음 - 새 엑셀 구조");
         const initialMappings: ColumnMapping[] = excelColumns.map((col) => ({
           excelColumn: col,
           systemColumn: null,
         }));
         setColumnMappings(initialMappings);
-      } else {
-        console.error("❌ 테이블 스키마 로드 실패:", response);
+        setIsAutoMappingLoaded(false);
       }
     } catch (error) {
       console.error("❌ 테이블 스키마 로드 실패:", error);
@@ -231,17 +493,35 @@ export const ExcelUploadModal: React.FC<ExcelUploadModalProps> = ({
   const handleAutoMapping = () => {
     const newMappings = excelColumns.map((excelCol) => {
       const normalizedExcelCol = excelCol.toLowerCase().trim();
-      
-      // 1. 먼저 라벨로 매칭 시도
-      let matchedSystemCol = systemColumns.find(
-        (sysCol) => sysCol.label && sysCol.label.toLowerCase().trim() === normalizedExcelCol
-      );
+      // [마스터], [디테일] 접두사 제거 후 비교
+      const cleanExcelCol = normalizedExcelCol.replace(/^\[(마스터|디테일)\]\s*/i, "");
+
+      // 1. 먼저 라벨로 매칭 시도 (접두사 제거 후)
+      let matchedSystemCol = systemColumns.find((sysCol) => {
+        if (!sysCol.label) return false;
+        // [마스터], [디테일] 접두사 제거 후 비교
+        const cleanLabel = sysCol.label.toLowerCase().trim().replace(/^\[(마스터|디테일)\]\s*/i, "");
+        return cleanLabel === normalizedExcelCol || cleanLabel === cleanExcelCol;
+      });
 
       // 2. 라벨로 매칭되지 않으면 컬럼명으로 매칭 시도
       if (!matchedSystemCol) {
-        matchedSystemCol = systemColumns.find(
-          (sysCol) => sysCol.name.toLowerCase().trim() === normalizedExcelCol
-        );
+        matchedSystemCol = systemColumns.find((sysCol) => {
+          // 마스터-디테일 모드: originalName이 있으면 사용
+          const originalName = (sysCol as any).originalName;
+          const colName = originalName || sysCol.name;
+          return colName.toLowerCase().trim() === normalizedExcelCol || colName.toLowerCase().trim() === cleanExcelCol;
+        });
+      }
+
+      // 3. 여전히 매칭 안되면 전체 이름(테이블.컬럼)에서 컬럼 부분만 추출해서 비교
+      if (!matchedSystemCol) {
+        matchedSystemCol = systemColumns.find((sysCol) => {
+          // 테이블.컬럼 형식에서 컬럼만 추출
+          const nameParts = sysCol.name.split(".");
+          const colNameOnly = nameParts.length > 1 ? nameParts[1] : nameParts[0];
+          return colNameOnly.toLowerCase().trim() === normalizedExcelCol || colNameOnly.toLowerCase().trim() === cleanExcelCol;
+        });
       }
 
       return {
@@ -259,9 +539,7 @@ export const ExcelUploadModal: React.FC<ExcelUploadModalProps> = ({
   const handleMappingChange = (excelColumn: string, systemColumn: string | null) => {
     setColumnMappings((prev) =>
       prev.map((mapping) =>
-        mapping.excelColumn === excelColumn
-          ? { ...mapping, systemColumn }
-          : mapping
+        mapping.excelColumn === excelColumn ? { ...mapping, systemColumn } : mapping
       )
     );
   };
@@ -273,12 +551,54 @@ export const ExcelUploadModal: React.FC<ExcelUploadModalProps> = ({
       return;
     }
 
-    if (currentStep === 2 && displayData.length === 0) {
+    if (currentStep === 1 && displayData.length === 0) {
       toast.error("데이터가 없습니다.");
       return;
     }
 
-    setCurrentStep((prev) => Math.min(prev + 1, 4));
+    // 🆕 마스터-디테일 간단 모드: 마스터 필드 유효성 검사
+    if (currentStep === 1 && hasMasterSelectFields && !isMasterFieldsValid()) {
+      toast.error("마스터 정보를 모두 입력해주세요.");
+      return;
+    }
+
+    // 1단계 → 2단계 전환 시: 빈 헤더 열 제외
+    if (currentStep === 1) {
+      // 빈 헤더가 아닌 열만 필터링
+      const validColumnIndices: number[] = [];
+      const validColumns: string[] = [];
+
+      excelColumns.forEach((col, index) => {
+        if (col && col.trim() !== "") {
+          validColumnIndices.push(index);
+          validColumns.push(col);
+        }
+      });
+
+      // 빈 헤더 열이 있었다면 데이터에서도 해당 열 제거
+      if (validColumns.length < excelColumns.length) {
+        const removedCount = excelColumns.length - validColumns.length;
+        
+        // 새로운 데이터: 유효한 열만 포함
+        const cleanedData = displayData.map((row) => {
+          const newRow: Record<string, any> = {};
+          validColumns.forEach((colName) => {
+            newRow[colName] = row[colName];
+          });
+          return newRow;
+        });
+
+        setExcelColumns(validColumns);
+        setDisplayData(cleanedData);
+        setAllData(cleanedData);
+
+        if (removedCount > 0) {
+          toast.info(`빈 헤더 ${removedCount}개 열이 제외되었습니다.`);
+        }
+      }
+    }
+
+    setCurrentStep((prev) => Math.min(prev + 1, 3));
   };
 
   // 이전 단계
@@ -296,43 +616,163 @@ export const ExcelUploadModal: React.FC<ExcelUploadModalProps> = ({
     setIsUploading(true);
 
     try {
-      // allData를 사용하여 전체 데이터 업로드 (displayData는 미리보기용 10개만)
+      // allData를 사용하여 전체 데이터 업로드
       const mappedData = allData.map((row) => {
         const mappedRow: Record<string, any> = {};
         columnMappings.forEach((mapping) => {
           if (mapping.systemColumn) {
-            mappedRow[mapping.systemColumn] = row[mapping.excelColumn];
+            // 마스터-디테일 모드: 테이블.컬럼 형식에서 컬럼명만 추출
+            let colName = mapping.systemColumn;
+            if (isMasterDetail && colName.includes(".")) {
+              colName = colName.split(".")[1];
+            }
+            mappedRow[colName] = row[mapping.excelColumn];
           }
         });
         return mappedRow;
       });
 
-      let successCount = 0;
-      let failCount = 0;
+      // 빈 행 필터링: 모든 값이 비어있거나 undefined/null인 행 제외
+      const filteredData = mappedData.filter((row) => {
+        const values = Object.values(row);
+        return values.some((value) => {
+          if (value === undefined || value === null) return false;
+          if (typeof value === "string" && value.trim() === "") return false;
+          return true;
+        });
+      });
 
-      for (const row of mappedData) {
-        try {
-          if (uploadMode === "insert") {
-            const formData = { screenId: 0, tableName, data: row };
-            const result = await DynamicFormApi.saveFormData(formData);
-            if (result.success) {
-              successCount++;
-            } else {
-              failCount++;
-            }
-          }
-        } catch (error) {
-          failCount++;
+      console.log(
+        `📊 엑셀 업로드: 전체 ${mappedData.length}행 중 유효한 ${filteredData.length}행`
+      );
+
+      // 🆕 마스터-디테일 간단 모드 처리 (마스터 필드 선택 + 채번)
+      if (isSimpleMasterDetailMode && screenId && masterDetailRelation) {
+        console.log("📊 마스터-디테일 간단 모드 업로드:", {
+          masterDetailRelation,
+          masterFieldValues,
+          numberingRuleId: masterDetailExcelConfig?.numberingRuleId,
+        });
+
+        const uploadResult = await DynamicFormApi.uploadMasterDetailSimple(
+          screenId,
+          filteredData,
+          masterFieldValues,
+          masterDetailExcelConfig?.numberingRuleId || undefined,
+          masterDetailExcelConfig?.afterUploadFlowId || undefined, // 하위 호환성
+          masterDetailExcelConfig?.afterUploadFlows || undefined // 다중 제어
+        );
+
+        if (uploadResult.success && uploadResult.data) {
+          const { masterInserted, detailInserted, generatedKey, errors } = uploadResult.data;
+          
+          toast.success(
+            `마스터 ${masterInserted}건(${generatedKey || ""}), 디테일 ${detailInserted}건 처리되었습니다.` +
+            (errors?.length > 0 ? ` (오류: ${errors.length}건)` : "")
+          );
+
+          // 매핑 템플릿 저장
+          await saveMappingTemplateInternal();
+
+          onSuccess?.();
+        } else {
+          toast.error(uploadResult.message || "마스터-디테일 업로드에 실패했습니다.");
         }
       }
+      // 🆕 마스터-디테일 기존 모드 처리
+      else if (isMasterDetail && screenId && masterDetailRelation) {
+        console.log("📊 마스터-디테일 업로드 모드:", masterDetailRelation);
 
-      if (successCount > 0) {
-        toast.success(
-          `${successCount}개 행이 업로드되었습니다.${failCount > 0 ? ` (실패: ${failCount}개)` : ""}`
+        const uploadResult = await DynamicFormApi.uploadMasterDetailData(
+          screenId,
+          filteredData
         );
-        onSuccess?.();
+
+        if (uploadResult.success && uploadResult.data) {
+          const { masterInserted, masterUpdated, detailInserted, errors } = uploadResult.data;
+          
+          toast.success(
+            `마스터 ${masterInserted + masterUpdated}건, 디테일 ${detailInserted}건 처리되었습니다.` +
+            (errors.length > 0 ? ` (오류: ${errors.length}건)` : "")
+          );
+
+          // 매핑 템플릿 저장
+          await saveMappingTemplateInternal();
+
+          onSuccess?.();
+        } else {
+          toast.error(uploadResult.message || "마스터-디테일 업로드에 실패했습니다.");
+        }
       } else {
-        toast.error("업로드에 실패했습니다.");
+        // 기존 단일 테이블 업로드 로직
+        let successCount = 0;
+        let failCount = 0;
+
+        // 단일 테이블 채번 설정 확인
+        const hasNumbering = numberingRuleId && numberingTargetColumn;
+
+        for (const row of filteredData) {
+          try {
+            let dataToSave = { ...row };
+
+            // 채번 적용: 각 행마다 채번 API 호출
+            if (hasNumbering && uploadMode === "insert") {
+              try {
+                const { apiClient } = await import("@/lib/api/client");
+                const numberingResponse = await apiClient.post(`/numbering-rules/${numberingRuleId}/allocate`);
+                const generatedCode = numberingResponse.data?.data?.generatedCode || numberingResponse.data?.data?.code;
+                if (numberingResponse.data?.success && generatedCode) {
+                  dataToSave[numberingTargetColumn] = generatedCode;
+                }
+              } catch (numError) {
+                console.error("채번 오류:", numError);
+              }
+            }
+
+            if (uploadMode === "insert") {
+              const formData = { screenId: 0, tableName, data: dataToSave };
+              const result = await DynamicFormApi.saveFormData(formData);
+              if (result.success) {
+                successCount++;
+              } else {
+                failCount++;
+              }
+            }
+          } catch (error) {
+            failCount++;
+          }
+        }
+
+        // 🆕 업로드 후 제어 실행
+        if (afterUploadFlows && afterUploadFlows.length > 0 && successCount > 0) {
+          console.log("🔄 업로드 후 제어 실행:", afterUploadFlows);
+          try {
+            const { apiClient } = await import("@/lib/api/client");
+            // 순서대로 실행
+            const sortedFlows = [...afterUploadFlows].sort((a, b) => a.order - b.order);
+            for (const flow of sortedFlows) {
+              await apiClient.post(`/dataflow/node-flows/${flow.flowId}/execute`, {
+                sourceData: { tableName, uploadedCount: successCount },
+              });
+              console.log(`✅ 제어 실행 완료: flowId=${flow.flowId}`);
+            }
+          } catch (controlError) {
+            console.error("제어 실행 오류:", controlError);
+          }
+        }
+
+        if (successCount > 0) {
+          toast.success(
+            `${successCount}개 행이 업로드되었습니다.${failCount > 0 ? ` (실패: ${failCount}개)` : ""}`
+          );
+
+          // 매핑 템플릿 저장
+          await saveMappingTemplateInternal();
+
+          onSuccess?.();
+        } else {
+          toast.error("업로드에 실패했습니다.");
+        }
       }
     } catch (error) {
       console.error("❌ 엑셀 업로드 실패:", error);
@@ -342,6 +782,35 @@ export const ExcelUploadModal: React.FC<ExcelUploadModalProps> = ({
     }
   };
 
+  // 매핑 템플릿 저장 헬퍼 함수
+  const saveMappingTemplateInternal = async () => {
+    try {
+      const mappingsToSave: Record<string, string | null> = {};
+      columnMappings.forEach((mapping) => {
+        mappingsToSave[mapping.excelColumn] = mapping.systemColumn;
+      });
+
+      console.log("💾 매핑 템플릿 저장 중...", {
+        tableName,
+        excelColumns,
+        mappingsToSave,
+      });
+      const saveResult = await saveMappingTemplate(
+        tableName,
+        excelColumns,
+        mappingsToSave
+      );
+
+      if (saveResult.success) {
+        console.log("✅ 매핑 템플릿 저장 완료:", saveResult.data);
+      } else {
+        console.warn("⚠️ 매핑 템플릿 저장 실패:", saveResult.error);
+      }
+    } catch (error) {
+      console.warn("⚠️ 매핑 템플릿 저장 중 오류:", error);
+    }
+  };
+
   // 모달 닫기 시 초기화
   useEffect(() => {
     if (!open) {
@@ -349,16 +818,15 @@ export const ExcelUploadModal: React.FC<ExcelUploadModalProps> = ({
       setFile(null);
       setSheetNames([]);
       setSelectedSheet("");
-      setAutoCreateColumn(false);
-      setSelectedCompany("");
-      setSelectedDataType("");
+      setIsAutoMappingLoaded(false);
       setDetectedRange("");
-      setPreviewData([]);
       setAllData([]);
       setDisplayData([]);
       setExcelColumns([]);
       setSystemColumns([]);
       setColumnMappings([]);
+      // 🆕 마스터-디테일 모드 초기화
+      setMasterFieldValues({});
     }
   }, [open]);
 
@@ -379,19 +847,30 @@ export const ExcelUploadModal: React.FC<ExcelUploadModalProps> = ({
           <DialogTitle className="flex items-center gap-2 text-base sm:text-lg">
             <FileSpreadsheet className="h-5 w-5" />
             엑셀 데이터 업로드
+            {isMasterDetail && (
+              <span className="ml-2 rounded bg-blue-100 px-2 py-0.5 text-xs font-normal text-blue-700">
+                마스터-디테일
+              </span>
+            )}
           </DialogTitle>
           <DialogDescription className="text-xs sm:text-sm">
-            엑셀 파일을 선택하고 컬럼을 매핑하여 데이터를 업로드하세요. 모달 테두리를 드래그하여 크기를 조절할 수 있습니다.
+            {isMasterDetail && masterDetailRelation ? (
+              <>
+                마스터({masterDetailRelation.masterTable}) + 디테일({masterDetailRelation.detailTable}) 구조입니다.
+                마스터 데이터는 중복 입력 시 병합됩니다.
+              </>
+            ) : (
+              "엑셀 파일을 선택하고 컬럼을 매핑하여 데이터를 업로드하세요."
+            )}
           </DialogDescription>
         </DialogHeader>
 
-        {/* 스텝 인디케이터 */}
+        {/* 스텝 인디케이터 (3단계) */}
         <div className="flex items-center justify-between">
           {[
             { num: 1, label: "파일 선택" },
-            { num: 2, label: "범위 지정" },
-            { num: 3, label: "컬럼 매핑" },
-            { num: 4, label: "확인" },
+            { num: 2, label: "컬럼 매핑" },
+            { num: 3, label: "확인" },
           ].map((step, index) => (
             <React.Fragment key={step.num}>
               <div className="flex flex-col items-center gap-1">
@@ -414,15 +893,13 @@ export const ExcelUploadModal: React.FC<ExcelUploadModalProps> = ({
                 <span
                   className={cn(
                     "text-[10px] font-medium sm:text-xs",
-                    currentStep === step.num
-                      ? "text-primary"
-                      : "text-muted-foreground"
+                    currentStep === step.num ? "text-primary" : "text-muted-foreground"
                   )}
                 >
                   {step.label}
                 </span>
               </div>
-              {index < 3 && (
+              {index < 2 && (
                 <div
                   className={cn(
                     "h-0.5 flex-1 transition-colors",
@@ -436,23 +913,142 @@ export const ExcelUploadModal: React.FC<ExcelUploadModalProps> = ({
 
         {/* 스텝별 컨텐츠 */}
         <div className="max-h-[calc(95vh-200px)] space-y-4 overflow-y-auto">
-          {/* 1단계: 파일 선택 */}
+          {/* 1단계: 파일 선택 & 미리보기 (통합) */}
           {currentStep === 1 && (
             <div className="space-y-4">
+              {/* 🆕 마스터-디테일 간단 모드: 마스터 필드 입력 */}
+              {hasMasterSelectFields && (
+                <div className="grid gap-3 sm:grid-cols-2">
+                  {masterDetailExcelConfig?.masterSelectFields?.map((field) => (
+                      <div key={field.columnName} className="space-y-1">
+                        <Label className="text-xs">
+                          {field.columnLabel}
+                          {field.required && <span className="ml-1 text-destructive">*</span>}
+                        </Label>
+                        {field.inputType === "entity" ? (
+                          <Select
+                            value={masterFieldValues[field.columnName]?.toString() || ""}
+                            onValueChange={(value) =>
+                              setMasterFieldValues((prev) => ({
+                                ...prev,
+                                [field.columnName]: value,
+                              }))
+                            }
+                          >
+                            <SelectTrigger className="h-9 text-xs">
+                              <SelectValue placeholder={`${field.columnLabel} 선택`} />
+                            </SelectTrigger>
+                            <SelectContent>
+                              {entitySearchLoading[field.columnName] ? (
+                                <SelectItem value="loading" disabled>
+                                  로딩 중...
+                                </SelectItem>
+                              ) : (
+                                entitySearchData[field.columnName]?.map((item: any) => {
+                                  const keyValue = item[field.referenceColumn || "id"];
+                                  // displayColumn: 저장된 값 → DB에서 조회한 값 → referenceColumn → id
+                                  const displayColName = 
+                                    field.displayColumn || 
+                                    entityDisplayColumns[field.columnName] || 
+                                    field.referenceColumn || 
+                                    "id";
+                                  const displayValue = item[displayColName] || keyValue;
+                                  return (
+                                    <SelectItem
+                                      key={keyValue}
+                                      value={keyValue?.toString()}
+                                      className="text-xs"
+                                    >
+                                      {displayValue}
+                                    </SelectItem>
+                                  );
+                                })
+                              )}
+                            </SelectContent>
+                          </Select>
+                        ) : field.inputType === "date" ? (
+                          <input
+                            type="date"
+                            value={masterFieldValues[field.columnName] || ""}
+                            onChange={(e) =>
+                              setMasterFieldValues((prev) => ({
+                                ...prev,
+                                [field.columnName]: e.target.value,
+                              }))
+                            }
+                            className="h-9 w-full rounded-md border px-3 text-xs"
+                          />
+                        ) : (
+                          <input
+                            type="text"
+                            value={masterFieldValues[field.columnName] || ""}
+                            onChange={(e) =>
+                              setMasterFieldValues((prev) => ({
+                                ...prev,
+                                [field.columnName]: e.target.value,
+                              }))
+                            }
+                            placeholder={field.columnLabel}
+                            className="h-9 w-full rounded-md border px-3 text-xs"
+                          />
+                        )}
+                      </div>
+                    ))}
+                </div>
+              )}
+
+              {/* 파일 선택 영역 */}
               <div>
                 <Label htmlFor="file-upload" className="text-xs sm:text-sm">
                   파일 선택 *
                 </Label>
-                <div className="mt-2 flex items-center gap-2">
-                  <Button
-                    type="button"
-                    variant="outline"
-                    onClick={() => fileInputRef.current?.click()}
-                    className="h-8 flex-1 text-xs sm:h-10 sm:text-sm"
-                  >
-                    <Upload className="mr-2 h-4 w-4" />
-                    {file ? file.name : "파일 선택"}
-                  </Button>
+                <div
+                  onDragOver={handleDragOver}
+                  onDragLeave={handleDragLeave}
+                  onDrop={handleDrop}
+                  onClick={() => fileInputRef.current?.click()}
+                  className={cn(
+                    "mt-2 flex cursor-pointer flex-col items-center justify-center rounded-lg border-2 border-dashed p-4 transition-colors",
+                    isDragOver
+                      ? "border-primary bg-primary/5"
+                      : file
+                        ? "border-green-500 bg-green-50"
+                        : "border-muted-foreground/25 hover:border-primary hover:bg-muted/50"
+                  )}
+                >
+                  {file ? (
+                    <div className="flex items-center gap-3">
+                      <FileSpreadsheet className="h-8 w-8 text-green-600" />
+                      <div>
+                        <p className="text-sm font-medium text-green-700">{file.name}</p>
+                        <p className="text-xs text-muted-foreground">
+                          클릭하여 다른 파일 선택
+                        </p>
+                      </div>
+                    </div>
+                  ) : (
+                    <>
+                      <Upload
+                        className={cn(
+                          "mb-2 h-8 w-8",
+                          isDragOver ? "text-primary" : "text-muted-foreground"
+                        )}
+                      />
+                      <p
+                        className={cn(
+                          "text-sm font-medium",
+                          isDragOver ? "text-primary" : "text-muted-foreground"
+                        )}
+                      >
+                        {isDragOver
+                          ? "파일을 놓으세요"
+                          : "파일을 드래그하거나 클릭하여 선택"}
+                      </p>
+                      <p className="mt-1 text-xs text-muted-foreground">
+                        지원 형식: .xlsx, .xls, .csv
+                      </p>
+                    </>
+                  )}
                   <input
                     ref={fileInputRef}
                     id="file-upload"
@@ -462,213 +1058,71 @@ export const ExcelUploadModal: React.FC<ExcelUploadModalProps> = ({
                     className="hidden"
                   />
                 </div>
-                <p className="mt-1 text-[10px] text-muted-foreground sm:text-xs">
-                  지원 형식: .xlsx, .xls, .csv
-                </p>
               </div>
 
-              {sheetNames.length > 0 && (
-                <div>
-                  <Label htmlFor="sheet-select" className="text-xs sm:text-sm">
-                    시트 선택
-                  </Label>
-                  <Select value={selectedSheet} onValueChange={handleSheetChange}>
-                    <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm">
-                      <SelectValue placeholder="시트를 선택하세요" />
-                    </SelectTrigger>
-                    <SelectContent>
-                      {sheetNames.map((sheetName) => (
-                        <SelectItem
-                          key={sheetName}
-                          value={sheetName}
-                          className="text-xs sm:text-sm"
-                        >
-                          <FileSpreadsheet className="mr-2 inline h-4 w-4" />
-                          {sheetName}
-                        </SelectItem>
-                      ))}
-                    </SelectContent>
-                  </Select>
-                </div>
-              )}
-            </div>
-          )}
-
-          {/* 2단계: 범위 지정 */}
-          {currentStep === 2 && (
-            <div className="space-y-3">
-              {/* 상단: 3개 드롭다운 가로 배치 */}
-              <div className="grid grid-cols-3 gap-3">
-                <Select value={selectedSheet} onValueChange={handleSheetChange}>
-                  <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm">
-                    <SelectValue placeholder="Sheet1" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    {sheetNames.map((sheetName) => (
-                      <SelectItem key={sheetName} value={sheetName} className="text-xs sm:text-sm">
-                        {sheetName}
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
-
-                <Select value={selectedCompany} onValueChange={setSelectedCompany}>
-                  <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm">
-                    <SelectValue placeholder="거래처 선택" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="company1" className="text-xs sm:text-sm">
-                      ABC 주식회사
-                    </SelectItem>
-                    <SelectItem value="company2" className="text-xs sm:text-sm">
-                      XYZ 상사
-                    </SelectItem>
-                    <SelectItem value="company3" className="text-xs sm:text-sm">
-                      대한물산
-                    </SelectItem>
-                  </SelectContent>
-                </Select>
-
-                <Select value={selectedDataType} onValueChange={setSelectedDataType}>
-                  <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm">
-                    <SelectValue placeholder="유형 선택" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="type1" className="text-xs sm:text-sm">
-                      유형 1
-                    </SelectItem>
-                    <SelectItem value="type2" className="text-xs sm:text-sm">
-                      유형 2
-                    </SelectItem>
-                  </SelectContent>
-                </Select>
-              </div>
-
-              {/* 중간: 체크박스 + 버튼들 한 줄 배치 */}
-              <div className="flex flex-wrap items-center gap-2">
-                <div className="flex items-center space-x-2">
-                  <Checkbox
-                    id="auto-create"
-                    checked={autoCreateColumn}
-                    onCheckedChange={(checked) => setAutoCreateColumn(checked as boolean)}
-                  />
-                  <label
-                    htmlFor="auto-create"
-                    className="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 sm:text-sm"
-                  >
-                    자동 거래처 열 생성
-                  </label>
-                </div>
-
-                <div className="ml-auto flex flex-wrap gap-2">
-                  <Button
-                    type="button"
-                    variant="outline"
-                    size="sm"
-                    onClick={handleAddRow}
-                    className="h-7 text-xs sm:h-8 sm:text-sm"
-                  >
-                    <Plus className="mr-1 h-3 w-3" />
-                    행 추가
-                  </Button>
-                  <Button
-                    type="button"
-                    variant="outline"
-                    size="sm"
-                    onClick={handleAddColumn}
-                    className="h-7 text-xs sm:h-8 sm:text-sm"
-                  >
-                    <Plus className="mr-1 h-3 w-3" />
-                    열 추가
-                  </Button>
-                  <Button
-                    type="button"
-                    variant="outline"
-                    size="sm"
-                    onClick={handleRemoveRow}
-                    className="h-7 text-xs sm:h-8 sm:text-sm"
-                  >
-                    <Minus className="mr-1 h-3 w-3" />
-                    행 삭제
-                  </Button>
-                  <Button
-                    type="button"
-                    variant="outline"
-                    size="sm"
-                    onClick={handleRemoveColumn}
-                    className="h-7 text-xs sm:h-8 sm:text-sm"
-                  >
-                    <Minus className="mr-1 h-3 w-3" />
-                    열 삭제
-                  </Button>
-                </div>
-              </div>
-
-              {/* 하단: 감지된 범위 + 테이블 */}
-              <div className="text-xs text-muted-foreground sm:text-sm">
-                감지된 범위: <span className="font-medium">{detectedRange}</span>
-                <span className="ml-2 text-[10px] sm:text-xs">
-                  첫 행이 컬럼명, 데이터는 자동 감지됩니다
-                </span>
-              </div>
-
-              {displayData.length > 0 && (
-                <div className="max-h-[250px] overflow-auto rounded-md border border-border">
-                  <table className="min-w-full text-[10px] sm:text-xs">
-                    <thead className="sticky top-0 bg-muted">
-                      <tr>
-                        <th className="whitespace-nowrap border-b border-r border-border bg-primary/10 px-2 py-1 text-center font-medium">
-                          
-                        </th>
-                        {excelColumns.map((col, index) => (
-                          <th
-                            key={col}
-                            className="whitespace-nowrap border-b border-r border-border bg-primary/10 px-2 py-1 text-center font-medium"
-                          >
-                            {String.fromCharCode(65 + index)}
-                          </th>
-                        ))}
-                      </tr>
-                    </thead>
-                    <tbody>
-                      <tr className="bg-primary/5">
-                        <td className="whitespace-nowrap border-b border-r border-border bg-primary/10 px-2 py-1 text-center font-medium">
-                          1
-                        </td>
-                        {excelColumns.map((col) => (
-                          <td
-                            key={col}
-                            className="whitespace-nowrap border-b border-r border-border px-2 py-1 font-medium text-primary"
-                          >
-                            {col}
-                          </td>
-                        ))}
-                      </tr>
-                      {displayData.map((row, rowIndex) => (
-                        <tr key={rowIndex} className="border-b border-border last:border-0">
-                          <td className="whitespace-nowrap border-r border-border bg-muted/50 px-2 py-1 text-center font-medium text-muted-foreground">
-                            {rowIndex + 2}
-                          </td>
-                          {excelColumns.map((col) => (
-                            <td
-                              key={col}
-                              className="max-w-[150px] truncate whitespace-nowrap border-r border-border px-2 py-1"
-                              title={String(row[col])}
+              {/* 파일이 선택된 경우에만 미리보기 표시 */}
+              {file && displayData.length > 0 && (
+                <>
+                  {/* 시트 선택 */}
+                  <div className="flex items-center gap-3">
+                    <div className="flex items-center gap-2">
+                      <Label className="text-xs text-muted-foreground sm:text-sm">
+                        시트:
+                      </Label>
+                      <Select value={selectedSheet} onValueChange={handleSheetChange}>
+                        <SelectTrigger className="h-8 w-[140px] text-xs sm:h-9 sm:w-[180px] sm:text-sm">
+                          <SelectValue placeholder="Sheet1" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {sheetNames.map((sheetName) => (
+                            <SelectItem
+                              key={sheetName}
+                              value={sheetName}
+                              className="text-xs sm:text-sm"
                             >
-                              {String(row[col] || "")}
-                            </td>
+                              {sheetName}
+                            </SelectItem>
                           ))}
-                        </tr>
-                      ))}
-                    </tbody>
-                  </table>
-                </div>
+                        </SelectContent>
+                      </Select>
+                    </div>
+                    <span className="text-xs text-muted-foreground">
+                      {displayData.length}개 행 · 셀을 클릭하여 편집, Tab/Enter로 이동
+                    </span>
+                  </div>
+
+                  {/* 엑셀처럼 편집 가능한 스프레드시트 */}
+                  <EditableSpreadsheet
+                    columns={excelColumns}
+                    data={displayData}
+                    onColumnsChange={(newColumns) => {
+                      setExcelColumns(newColumns);
+                      // 범위 재계산
+                      const lastCol =
+                        newColumns.length > 0
+                          ? String.fromCharCode(64 + newColumns.length)
+                          : "A";
+                      setDetectedRange(`A1:${lastCol}${displayData.length + 1}`);
+                    }}
+                    onDataChange={(newData) => {
+                      setDisplayData(newData);
+                      setAllData(newData);
+                      // 범위 재계산
+                      const lastCol =
+                        excelColumns.length > 0
+                          ? String.fromCharCode(64 + excelColumns.length)
+                          : "A";
+                      setDetectedRange(`A1:${lastCol}${newData.length + 1}`);
+                    }}
+                    maxHeight="320px"
+                  />
+                </>
               )}
             </div>
           )}
 
-          {/* 3단계: 컬럼 매핑 */}
-          {currentStep === 3 && (
+          {/* 2단계: 컬럼 매핑 */}
+          {currentStep === 2 && (
             <div className="space-y-4">
               {/* 상단: 제목 + 자동 매핑 버튼 */}
               <div className="flex items-center justify-between">
@@ -693,9 +1147,12 @@ export const ExcelUploadModal: React.FC<ExcelUploadModalProps> = ({
                   <div>시스템 컬럼</div>
                 </div>
 
-                <div className="max-h-[400px] space-y-2 overflow-y-auto">
+                <div className="max-h-[350px] space-y-2 overflow-y-auto">
                   {columnMappings.map((mapping, index) => (
-                    <div key={index} className="grid grid-cols-[1fr_auto_1fr] items-center gap-2">
+                    <div
+                      key={index}
+                      className="grid grid-cols-[1fr_auto_1fr] items-center gap-2"
+                    >
                       <div className="rounded-md border border-border bg-muted px-3 py-2 text-xs font-medium sm:text-sm">
                         {mapping.excelColumn}
                       </div>
@@ -713,7 +1170,9 @@ export const ExcelUploadModal: React.FC<ExcelUploadModalProps> = ({
                           <SelectValue placeholder="매핑 안함">
                             {mapping.systemColumn
                               ? (() => {
-                                  const col = systemColumns.find(c => c.name === mapping.systemColumn);
+                                  const col = systemColumns.find(
+                                    (c) => c.name === mapping.systemColumn
+                                  );
                                   return col?.label || mapping.systemColumn;
                                 })()
                               : "매핑 안함"}
@@ -738,11 +1197,40 @@ export const ExcelUploadModal: React.FC<ExcelUploadModalProps> = ({
                   ))}
                 </div>
               </div>
+
+              {/* 매핑 자동 저장 안내 */}
+              {isAutoMappingLoaded ? (
+                <div className="rounded-md border border-success bg-success/10 p-3">
+                  <div className="flex items-start gap-2">
+                    <CheckCircle2 className="mt-0.5 h-4 w-4 text-success" />
+                    <div className="text-[10px] text-success sm:text-xs">
+                      <p className="font-medium">이전 매핑이 자동 적용됨</p>
+                      <p className="mt-1">
+                        동일한 엑셀 구조가 감지되어 이전에 저장된 매핑이 적용되었습니다.
+                        수정하면 업로드 시 자동 저장됩니다.
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              ) : (
+                <div className="rounded-md border border-muted bg-muted/30 p-3">
+                  <div className="flex items-start gap-2">
+                    <Zap className="mt-0.5 h-4 w-4 text-muted-foreground" />
+                    <div className="text-[10px] text-muted-foreground sm:text-xs">
+                      <p className="font-medium">새로운 엑셀 구조</p>
+                      <p className="mt-1">
+                        이 엑셀 구조는 처음입니다. 매핑을 설정하면 다음에 같은 구조의
+                        엑셀에 자동 적용됩니다.
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              )}
             </div>
           )}
 
-          {/* 4단계: 확인 */}
-          {currentStep === 4 && (
+          {/* 3단계: 확인 */}
+          {currentStep === 3 && (
             <div className="space-y-4">
               <div className="rounded-md border border-border bg-muted/50 p-4">
                 <h3 className="text-sm font-medium sm:text-base">업로드 요약</h3>
@@ -762,7 +1250,7 @@ export const ExcelUploadModal: React.FC<ExcelUploadModalProps> = ({
                   <p>
                     <span className="font-medium">모드:</span>{" "}
                     {uploadMode === "insert"
-                      ? "삽입"
+                      ? "신규 등록"
                       : uploadMode === "update"
                         ? "업데이트"
                         : "Upsert"}
@@ -775,12 +1263,17 @@ export const ExcelUploadModal: React.FC<ExcelUploadModalProps> = ({
                 <div className="mt-2 space-y-1 text-[10px] text-muted-foreground sm:text-xs">
                   {columnMappings
                     .filter((m) => m.systemColumn)
-                    .map((mapping, index) => (
-                      <p key={index}>
-                        <span className="font-medium">{mapping.excelColumn}</span> →{" "}
-                        {mapping.systemColumn}
-                      </p>
-                    ))}
+                    .map((mapping, index) => {
+                      const col = systemColumns.find(
+                        (c) => c.name === mapping.systemColumn
+                      );
+                      return (
+                        <p key={index}>
+                          <span className="font-medium">{mapping.excelColumn}</span> →{" "}
+                          {col?.label || mapping.systemColumn}
+                        </p>
+                      );
+                    })}
                   {columnMappings.filter((m) => m.systemColumn).length === 0 && (
                     <p className="text-destructive">매핑된 컬럼이 없습니다.</p>
                   )}
@@ -793,7 +1286,8 @@ export const ExcelUploadModal: React.FC<ExcelUploadModalProps> = ({
                   <div className="text-[10px] text-warning sm:text-xs">
                     <p className="font-medium">주의사항</p>
                     <p className="mt-1">
-                      업로드를 진행하면 데이터가 데이터베이스에 저장됩니다. 계속하시겠습니까?
+                      업로드를 진행하면 데이터가 데이터베이스에 저장됩니다.
+                      계속하시겠습니까?
                     </p>
                   </div>
                 </div>
@@ -811,10 +1305,10 @@ export const ExcelUploadModal: React.FC<ExcelUploadModalProps> = ({
           >
             {currentStep === 1 ? "취소" : "이전"}
           </Button>
-          {currentStep < 4 ? (
+          {currentStep < 3 ? (
             <Button
               onClick={handleNext}
-              disabled={isUploading}
+              disabled={isUploading || (currentStep === 1 && !file)}
               className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
             >
               다음
@@ -822,10 +1316,12 @@ export const ExcelUploadModal: React.FC<ExcelUploadModalProps> = ({
           ) : (
             <Button
               onClick={handleUpload}
-              disabled={isUploading || columnMappings.filter((m) => m.systemColumn).length === 0}
+              disabled={
+                isUploading || columnMappings.filter((m) => m.systemColumn).length === 0
+              }
               className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
             >
-              {isUploading ? "업로드 중..." : "다음"}
+              {isUploading ? "업로드 중..." : "업로드"}
             </Button>
           )}
         </DialogFooter>
diff --git a/frontend/components/common/ScreenModal.tsx b/frontend/components/common/ScreenModal.tsx
index cceadae9..44685dc0 100644
--- a/frontend/components/common/ScreenModal.tsx
+++ b/frontend/components/common/ScreenModal.tsx
@@ -174,8 +174,24 @@ export const ScreenModal: React.FC<ScreenModalProps> = ({ className }) => {
       // 🆕 editData가 있으면 formData와 originalData로 설정 (수정 모드)
       if (editData) {
         console.log("📝 [ScreenModal] 수정 데이터 설정:", editData);
-        setFormData(editData);
-        setOriginalData(editData); // 🆕 원본 데이터 저장 (UPDATE 판단용)
+        
+        // 🆕 배열인 경우 두 가지 데이터를 설정:
+        // 1. formData: 첫 번째 요소(객체) - 일반 입력 필드용 (TextInput 등)
+        // 2. selectedData: 전체 배열 - 다중 항목 컴포넌트용 (SelectedItemsDetailInput 등)
+        if (Array.isArray(editData)) {
+          const firstRecord = editData[0] || {};
+          console.log(`📝 [ScreenModal] 그룹 레코드 ${editData.length}개 설정:`, {
+            formData: "첫 번째 레코드 (일반 입력 필드용)",
+            selectedData: "전체 배열 (다중 항목 컴포넌트용)",
+          });
+          setFormData(firstRecord); // 🔧 일반 입력 필드용 (객체)
+          setSelectedData(editData); // 🔧 다중 항목 컴포넌트용 (배열) - groupedData로 전달됨
+          setOriginalData(firstRecord); // 첫 번째 레코드를 원본으로 저장
+        } else {
+          setFormData(editData);
+          setSelectedData([editData]); // 🔧 단일 객체도 배열로 변환하여 저장
+          setOriginalData(editData); // 🆕 원본 데이터 저장 (UPDATE 판단용)
+        }
       } else {
         // 🆕 신규 등록 모드: 분할 패널 부모 데이터가 있으면 미리 설정
         // 🔧 중요: 신규 등록 시에는 연결 필드(equipment_code 등)만 전달해야 함
@@ -261,7 +277,7 @@ export const ScreenModal: React.FC<ScreenModalProps> = ({ className }) => {
         // dataSourceId 파라미터 제거
         currentUrl.searchParams.delete("dataSourceId");
         window.history.pushState({}, "", currentUrl.toString());
-        console.log("🧹 URL 파라미터 제거");
+        // console.log("🧹 URL 파라미터 제거");
       }
 
       setModalState({
@@ -277,7 +293,7 @@ export const ScreenModal: React.FC<ScreenModalProps> = ({ className }) => {
       setSelectedData([]); // 🆕 선택된 데이터 초기화
       setContinuousMode(false);
       localStorage.setItem("screenModal_continuousMode", "false"); // localStorage에 저장
-      console.log("🔄 연속 모드 초기화: false");
+      // console.log("🔄 연속 모드 초기화: false");
     };
 
     // 저장 성공 이벤트 처리 (연속 등록 모드 지원)
@@ -285,36 +301,36 @@ export const ScreenModal: React.FC<ScreenModalProps> = ({ className }) => {
       // 🆕 모달이 열린 후 500ms 이내의 저장 성공 이벤트는 무시 (이전 이벤트 방지)
       const timeSinceOpen = Date.now() - modalOpenedAtRef.current;
       if (timeSinceOpen < 500) {
-        console.log("⏭️ [ScreenModal] 모달 열린 직후 저장 성공 이벤트 무시:", { timeSinceOpen });
+        // console.log("⏭️ [ScreenModal] 모달 열린 직후 저장 성공 이벤트 무시:", { timeSinceOpen });
         return;
       }
 
       const isContinuousMode = continuousMode;
-      console.log("💾 저장 성공 이벤트 수신");
-      console.log("📌 현재 연속 모드 상태:", isContinuousMode);
-      console.log("📌 localStorage:", localStorage.getItem("screenModal_continuousMode"));
+      // console.log("💾 저장 성공 이벤트 수신");
+      // console.log("📌 현재 연속 모드 상태:", isContinuousMode);
+      // console.log("📌 localStorage:", localStorage.getItem("screenModal_continuousMode"));
 
       if (isContinuousMode) {
         // 연속 모드: 폼만 초기화하고 모달은 유지
-        console.log("✅ 연속 모드 활성화 - 폼 초기화 및 화면 리셋");
+        // console.log("✅ 연속 모드 활성화 - 폼 초기화 및 화면 리셋");
 
         // 1. 폼 데이터 초기화
         setFormData({});
 
         // 2. 리셋 키 변경 (컴포넌트 강제 리마운트)
         setResetKey((prev) => prev + 1);
-        console.log("🔄 resetKey 증가 - 컴포넌트 리마운트");
+        // console.log("🔄 resetKey 증가 - 컴포넌트 리마운트");
 
         // 3. 화면 데이터 다시 로드 (채번 규칙 새로 생성)
         if (modalState.screenId) {
-          console.log("🔄 화면 데이터 다시 로드:", modalState.screenId);
+          // console.log("🔄 화면 데이터 다시 로드:", modalState.screenId);
           loadScreenData(modalState.screenId);
         }
 
         toast.success("저장되었습니다. 계속 입력하세요.");
       } else {
         // 일반 모드: 모달 닫기
-        console.log("❌ 일반 모드 - 모달 닫기");
+        // console.log("❌ 일반 모드 - 모달 닫기");
         handleCloseModal();
       }
     };
diff --git a/frontend/components/dataflow/node-editor/nodes/ConditionNode.tsx b/frontend/components/dataflow/node-editor/nodes/ConditionNode.tsx
index 5418fcab..4cf5e32d 100644
--- a/frontend/components/dataflow/node-editor/nodes/ConditionNode.tsx
+++ b/frontend/components/dataflow/node-editor/nodes/ConditionNode.tsx
@@ -22,6 +22,13 @@ const OPERATOR_LABELS: Record<string, string> = {
   NOT_IN: "NOT IN",
   IS_NULL: "NULL",
   IS_NOT_NULL: "NOT NULL",
+  EXISTS_IN: "EXISTS IN",
+  NOT_EXISTS_IN: "NOT EXISTS IN",
+};
+
+// EXISTS 계열 연산자인지 확인
+const isExistsOperator = (operator: string): boolean => {
+  return operator === "EXISTS_IN" || operator === "NOT_EXISTS_IN";
 };
 
 export const ConditionNode = memo(({ data, selected }: NodeProps<ConditionNodeData>) => {
@@ -54,15 +61,31 @@ export const ConditionNode = memo(({ data, selected }: NodeProps<ConditionNodeDa
                   {idx > 0 && (
                     <div className="mb-1 text-center text-xs font-semibold text-yellow-600">{data.logic}</div>
                   )}
-                  <div className="flex items-center gap-1">
+                  <div className="flex flex-wrap items-center gap-1">
                     <span className="font-mono text-gray-700">{condition.field}</span>
-                    <span className="rounded bg-yellow-200 px-1 py-0.5 text-yellow-800">
+                    <span
+                      className={`rounded px-1 py-0.5 ${
+                        isExistsOperator(condition.operator)
+                          ? "bg-purple-200 text-purple-800"
+                          : "bg-yellow-200 text-yellow-800"
+                      }`}
+                    >
                       {OPERATOR_LABELS[condition.operator] || condition.operator}
                     </span>
-                    {condition.value !== null && condition.value !== undefined && (
-                      <span className="text-gray-600">
-                        {typeof condition.value === "string" ? `"${condition.value}"` : String(condition.value)}
+                    {/* EXISTS 연산자인 경우 테이블.필드 표시 */}
+                    {isExistsOperator(condition.operator) ? (
+                      <span className="text-purple-600">
+                        {(condition as any).lookupTableLabel || (condition as any).lookupTable || "..."}
+                        {(condition as any).lookupField && `.${(condition as any).lookupFieldLabel || (condition as any).lookupField}`}
                       </span>
+                    ) : (
+                      // 일반 연산자인 경우 값 표시
+                      condition.value !== null &&
+                      condition.value !== undefined && (
+                        <span className="text-gray-600">
+                          {typeof condition.value === "string" ? `"${condition.value}"` : String(condition.value)}
+                        </span>
+                      )
                     )}
                   </div>
                 </div>
diff --git a/frontend/components/dataflow/node-editor/nodes/FormulaTransformNode.tsx b/frontend/components/dataflow/node-editor/nodes/FormulaTransformNode.tsx
index 981a5002..991e1bd4 100644
--- a/frontend/components/dataflow/node-editor/nodes/FormulaTransformNode.tsx
+++ b/frontend/components/dataflow/node-editor/nodes/FormulaTransformNode.tsx
@@ -28,6 +28,14 @@ const OPERATOR_LABELS: Record<string, string> = {
   "%": "%",
 };
 
+// 피연산자를 문자열로 변환
+function getOperandStr(operand: any): string {
+  if (!operand) return "?";
+  if (operand.type === "static") return String(operand.value || "?");
+  if (operand.fieldLabel) return operand.fieldLabel;
+  return operand.field || operand.resultField || "?";
+}
+
 // 수식 요약 생성
 function getFormulaSummary(transformation: FormulaTransformNodeData["transformations"][0]): string {
   const { formulaType, arithmetic, function: func, condition, staticValue } = transformation;
@@ -35,11 +43,19 @@ function getFormulaSummary(transformation: FormulaTransformNodeData["transformat
   switch (formulaType) {
     case "arithmetic": {
       if (!arithmetic) return "미설정";
-      const left = arithmetic.leftOperand;
-      const right = arithmetic.rightOperand;
-      const leftStr = left.type === "static" ? left.value : `${left.type}.${left.field || left.resultField}`;
-      const rightStr = right.type === "static" ? right.value : `${right.type}.${right.field || right.resultField}`;
-      return `${leftStr} ${OPERATOR_LABELS[arithmetic.operator]} ${rightStr}`;
+      const leftStr = getOperandStr(arithmetic.leftOperand);
+      const rightStr = getOperandStr(arithmetic.rightOperand);
+      let formula = `${leftStr} ${OPERATOR_LABELS[arithmetic.operator]} ${rightStr}`;
+      
+      // 추가 연산 표시
+      if (arithmetic.additionalOperations && arithmetic.additionalOperations.length > 0) {
+        for (const addOp of arithmetic.additionalOperations) {
+          const opStr = getOperandStr(addOp.operand);
+          formula += ` ${OPERATOR_LABELS[addOp.operator] || addOp.operator} ${opStr}`;
+        }
+      }
+      
+      return formula;
     }
     case "function": {
       if (!func) return "미설정";
diff --git a/frontend/components/dataflow/node-editor/panels/properties/ConditionProperties.tsx b/frontend/components/dataflow/node-editor/panels/properties/ConditionProperties.tsx
index 87f7f771..a2d060d4 100644
--- a/frontend/components/dataflow/node-editor/panels/properties/ConditionProperties.tsx
+++ b/frontend/components/dataflow/node-editor/panels/properties/ConditionProperties.tsx
@@ -4,14 +4,18 @@
  * 조건 분기 노드 속성 편집
  */
 
-import { useEffect, useState } from "react";
-import { Plus, Trash2 } from "lucide-react";
+import { useEffect, useState, useCallback } from "react";
+import { Plus, Trash2, Database, Search, Check, ChevronsUpDown } from "lucide-react";
 import { Label } from "@/components/ui/label";
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import { useFlowEditorStore } from "@/lib/stores/flowEditorStore";
-import type { ConditionNodeData } from "@/types/node-editor";
+import type { ConditionNodeData, ConditionOperator } from "@/types/node-editor";
+import { tableManagementApi } from "@/lib/api/tableManagement";
+import { cn } from "@/lib/utils";
 
 // 필드 정의
 interface FieldDefinition {
@@ -20,6 +24,19 @@ interface FieldDefinition {
   type?: string;
 }
 
+// 테이블 정보
+interface TableInfo {
+  tableName: string;
+  tableLabel: string;
+}
+
+// 테이블 컬럼 정보
+interface ColumnInfo {
+  columnName: string;
+  columnLabel: string;
+  dataType: string;
+}
+
 interface ConditionPropertiesProps {
   nodeId: string;
   data: ConditionNodeData;
@@ -38,8 +55,194 @@ const OPERATORS = [
   { value: "NOT_IN", label: "NOT IN" },
   { value: "IS_NULL", label: "NULL" },
   { value: "IS_NOT_NULL", label: "NOT NULL" },
+  { value: "EXISTS_IN", label: "다른 테이블에 존재함" },
+  { value: "NOT_EXISTS_IN", label: "다른 테이블에 존재하지 않음" },
 ] as const;
 
+// EXISTS 계열 연산자인지 확인
+const isExistsOperator = (operator: string): boolean => {
+  return operator === "EXISTS_IN" || operator === "NOT_EXISTS_IN";
+};
+
+// 테이블 선택용 검색 가능한 Combobox
+function TableCombobox({
+  tables,
+  value,
+  onSelect,
+  placeholder = "테이블 검색...",
+}: {
+  tables: TableInfo[];
+  value: string;
+  onSelect: (value: string) => void;
+  placeholder?: string;
+}) {
+  const [open, setOpen] = useState(false);
+
+  const selectedTable = tables.find((t) => t.tableName === value);
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          role="combobox"
+          aria-expanded={open}
+          className="mt-1 h-8 w-full justify-between text-xs"
+        >
+          {selectedTable ? (
+            <span className="truncate">
+              {selectedTable.tableLabel}
+              <span className="ml-1 text-gray-400">({selectedTable.tableName})</span>
+            </span>
+          ) : (
+            <span className="text-muted-foreground">테이블 선택</span>
+          )}
+          <ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-[300px] p-0" align="start">
+        <Command>
+          <CommandInput placeholder={placeholder} className="h-8 text-xs" />
+          <CommandList>
+            <CommandEmpty className="py-2 text-center text-xs">테이블을 찾을 수 없습니다.</CommandEmpty>
+            <CommandGroup className="max-h-[200px] overflow-y-auto">
+              {tables.map((table) => (
+                <CommandItem
+                  key={table.tableName}
+                  value={`${table.tableLabel} ${table.tableName}`}
+                  onSelect={() => {
+                    onSelect(table.tableName);
+                    setOpen(false);
+                  }}
+                  className="text-xs"
+                >
+                  <Check className={cn("mr-2 h-3 w-3", value === table.tableName ? "opacity-100" : "opacity-0")} />
+                  <div className="flex flex-col">
+                    <span className="font-medium">{table.tableLabel}</span>
+                    <span className="text-[10px] text-gray-500">{table.tableName}</span>
+                  </div>
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+// 컬럼 선택용 검색 가능한 Combobox
+function ColumnCombobox({
+  columns,
+  value,
+  onSelect,
+  placeholder = "컬럼 검색...",
+}: {
+  columns: ColumnInfo[];
+  value: string;
+  onSelect: (value: string) => void;
+  placeholder?: string;
+}) {
+  const [open, setOpen] = useState(false);
+
+  const selectedColumn = columns.find((c) => c.columnName === value);
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          role="combobox"
+          aria-expanded={open}
+          className="mt-1 h-8 w-full justify-between text-xs"
+        >
+          {selectedColumn ? (
+            <span className="truncate">
+              {selectedColumn.columnLabel}
+              <span className="ml-1 text-gray-400">({selectedColumn.columnName})</span>
+            </span>
+          ) : (
+            <span className="text-muted-foreground">컬럼 선택</span>
+          )}
+          <ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-[300px] p-0" align="start">
+        <Command>
+          <CommandInput placeholder={placeholder} className="h-8 text-xs" />
+          <CommandList>
+            <CommandEmpty className="py-2 text-center text-xs">컬럼을 찾을 수 없습니다.</CommandEmpty>
+            <CommandGroup className="max-h-[200px] overflow-y-auto">
+              {columns.map((col) => (
+                <CommandItem
+                  key={col.columnName}
+                  value={`${col.columnLabel} ${col.columnName}`}
+                  onSelect={() => {
+                    onSelect(col.columnName);
+                    setOpen(false);
+                  }}
+                  className="text-xs"
+                >
+                  <Check className={cn("mr-2 h-3 w-3", value === col.columnName ? "opacity-100" : "opacity-0")} />
+                  <span className="font-medium">{col.columnLabel}</span>
+                  <span className="ml-1 text-[10px] text-gray-400">({col.columnName})</span>
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+// 컬럼 선택 섹션 (자동 로드 포함)
+function ColumnSelectSection({
+  lookupTable,
+  lookupField,
+  tableColumnsCache,
+  loadingColumns,
+  loadTableColumns,
+  onSelect,
+}: {
+  lookupTable: string;
+  lookupField: string;
+  tableColumnsCache: Record<string, ColumnInfo[]>;
+  loadingColumns: Record<string, boolean>;
+  loadTableColumns: (tableName: string) => Promise<ColumnInfo[]>;
+  onSelect: (value: string) => void;
+}) {
+  // 캐시에 없고 로딩 중이 아니면 자동으로 로드
+  useEffect(() => {
+    if (lookupTable && !tableColumnsCache[lookupTable] && !loadingColumns[lookupTable]) {
+      loadTableColumns(lookupTable);
+    }
+  }, [lookupTable, tableColumnsCache, loadingColumns, loadTableColumns]);
+
+  const isLoading = loadingColumns[lookupTable];
+  const columns = tableColumnsCache[lookupTable];
+
+  return (
+    <div>
+      <Label className="text-xs text-gray-600">
+        <Search className="mr-1 inline h-3 w-3" />
+        비교할 컬럼
+      </Label>
+      {isLoading ? (
+        <div className="mt-1 rounded border border-dashed bg-gray-50 p-2 text-center text-xs text-gray-400">
+          컬럼 목록 로딩 중...
+        </div>
+      ) : columns && columns.length > 0 ? (
+        <ColumnCombobox columns={columns} value={lookupField} onSelect={onSelect} placeholder="컬럼 검색..." />
+      ) : (
+        <div className="mt-1 rounded border border-dashed bg-gray-50 p-2 text-center text-xs text-gray-400">
+          컬럼 목록을 로드할 수 없습니다
+        </div>
+      )}
+    </div>
+  );
+}
+
 export function ConditionProperties({ nodeId, data }: ConditionPropertiesProps) {
   const { updateNode, nodes, edges } = useFlowEditorStore();
 
@@ -48,6 +251,12 @@ export function ConditionProperties({ nodeId, data }: ConditionPropertiesProps)
   const [logic, setLogic] = useState<"AND" | "OR">(data.logic || "AND");
   const [availableFields, setAvailableFields] = useState<FieldDefinition[]>([]);
 
+  // EXISTS 연산자용 상태
+  const [allTables, setAllTables] = useState<TableInfo[]>([]);
+  const [tableColumnsCache, setTableColumnsCache] = useState<Record<string, ColumnInfo[]>>({});
+  const [loadingTables, setLoadingTables] = useState(false);
+  const [loadingColumns, setLoadingColumns] = useState<Record<string, boolean>>({});
+
   // 데이터 변경 시 로컬 상태 업데이트
   useEffect(() => {
     setDisplayName(data.displayName || "조건 분기");
@@ -55,6 +264,100 @@ export function ConditionProperties({ nodeId, data }: ConditionPropertiesProps)
     setLogic(data.logic || "AND");
   }, [data]);
 
+  // 전체 테이블 목록 로드 (EXISTS 연산자용)
+  useEffect(() => {
+    const loadAllTables = async () => {
+      // 이미 EXISTS 연산자가 있거나 로드된 적이 있으면 스킵
+      if (allTables.length > 0) return;
+
+      // EXISTS 연산자가 하나라도 있으면 테이블 목록 로드
+      const hasExistsOperator = conditions.some((c) => isExistsOperator(c.operator));
+      if (!hasExistsOperator) return;
+
+      setLoadingTables(true);
+      try {
+        const response = await tableManagementApi.getTableList();
+        if (response.success && response.data) {
+          setAllTables(
+            response.data.map((t: any) => ({
+              tableName: t.tableName,
+              tableLabel: t.tableLabel || t.tableName,
+            }))
+          );
+        }
+      } catch (error) {
+        console.error("테이블 목록 로드 실패:", error);
+      } finally {
+        setLoadingTables(false);
+      }
+    };
+
+    loadAllTables();
+  }, [conditions, allTables.length]);
+
+  // 테이블 컬럼 로드 함수
+  const loadTableColumns = useCallback(
+    async (tableName: string): Promise<ColumnInfo[]> => {
+      // 캐시에 있으면 반환
+      if (tableColumnsCache[tableName]) {
+        return tableColumnsCache[tableName];
+      }
+
+      // 이미 로딩 중이면 스킵
+      if (loadingColumns[tableName]) {
+        return [];
+      }
+
+      // 로딩 상태 설정
+      setLoadingColumns((prev) => ({ ...prev, [tableName]: true }));
+
+      try {
+        // getColumnList 반환: { success, data: { columns, total, ... } }
+        const response = await tableManagementApi.getColumnList(tableName);
+        if (response.success && response.data && response.data.columns) {
+          const columns = response.data.columns.map((c: any) => ({
+            columnName: c.columnName,
+            columnLabel: c.columnLabel || c.columnName,
+            dataType: c.dataType,
+          }));
+          setTableColumnsCache((prev) => ({ ...prev, [tableName]: columns }));
+          console.log(`✅ 테이블 ${tableName} 컬럼 로드 완료:`, columns.length, "개");
+          return columns;
+        } else {
+          console.warn(`⚠️ 테이블 ${tableName} 컬럼 조회 실패:`, response);
+        }
+      } catch (error) {
+        console.error(`❌ 테이블 ${tableName} 컬럼 로드 실패:`, error);
+      } finally {
+        setLoadingColumns((prev) => ({ ...prev, [tableName]: false }));
+      }
+      return [];
+    },
+    [tableColumnsCache, loadingColumns]
+  );
+
+  // EXISTS 연산자 선택 시 테이블 목록 강제 로드
+  const ensureTablesLoaded = useCallback(async () => {
+    if (allTables.length > 0) return;
+
+    setLoadingTables(true);
+    try {
+      const response = await tableManagementApi.getTableList();
+      if (response.success && response.data) {
+        setAllTables(
+          response.data.map((t: any) => ({
+            tableName: t.tableName,
+            tableLabel: t.tableLabel || t.tableName,
+          }))
+        );
+      }
+    } catch (error) {
+      console.error("테이블 목록 로드 실패:", error);
+    } finally {
+      setLoadingTables(false);
+    }
+  }, [allTables.length]);
+
   // 🔥 연결된 소스 노드의 필드를 재귀적으로 수집
   useEffect(() => {
     const getAllSourceFields = (currentNodeId: string, visited: Set<string> = new Set()): FieldDefinition[] => {
@@ -170,15 +473,18 @@ export function ConditionProperties({ nodeId, data }: ConditionPropertiesProps)
   }, [nodeId, nodes, edges]);
 
   const handleAddCondition = () => {
-    setConditions([
-      ...conditions,
-      {
-        field: "",
-        operator: "EQUALS",
-        value: "",
-        valueType: "static", // "static" (고정값) 또는 "field" (필드 참조)
-      },
-    ]);
+    const newCondition = {
+      field: "",
+      operator: "EQUALS" as ConditionOperator,
+      value: "",
+      valueType: "static" as "static" | "field",
+      // EXISTS 연산자용 필드는 초기값 없음
+      lookupTable: undefined,
+      lookupTableLabel: undefined,
+      lookupField: undefined,
+      lookupFieldLabel: undefined,
+    };
+    setConditions([...conditions, newCondition]);
   };
 
   const handleRemoveCondition = (index: number) => {
@@ -196,9 +502,50 @@ export function ConditionProperties({ nodeId, data }: ConditionPropertiesProps)
     });
   };
 
-  const handleConditionChange = (index: number, field: string, value: any) => {
+  const handleConditionChange = async (index: number, field: string, value: any) => {
     const newConditions = [...conditions];
     newConditions[index] = { ...newConditions[index], [field]: value };
+
+    // EXISTS 연산자로 변경 시 테이블 목록 로드 및 기존 value/valueType 초기화
+    if (field === "operator" && isExistsOperator(value)) {
+      await ensureTablesLoaded();
+      // EXISTS 연산자에서는 value, valueType이 필요 없으므로 초기화
+      newConditions[index].value = "";
+      newConditions[index].valueType = undefined;
+    }
+
+    // EXISTS 연산자에서 다른 연산자로 변경 시 lookup 필드들 초기화
+    if (field === "operator" && !isExistsOperator(value)) {
+      newConditions[index].lookupTable = undefined;
+      newConditions[index].lookupTableLabel = undefined;
+      newConditions[index].lookupField = undefined;
+      newConditions[index].lookupFieldLabel = undefined;
+    }
+
+    // lookupTable 변경 시 컬럼 목록 로드 및 라벨 설정
+    if (field === "lookupTable" && value) {
+      const tableInfo = allTables.find((t) => t.tableName === value);
+      if (tableInfo) {
+        newConditions[index].lookupTableLabel = tableInfo.tableLabel;
+      }
+      // 테이블 변경 시 필드 초기화
+      newConditions[index].lookupField = undefined;
+      newConditions[index].lookupFieldLabel = undefined;
+      // 컬럼 목록 미리 로드
+      await loadTableColumns(value);
+    }
+
+    // lookupField 변경 시 라벨 설정
+    if (field === "lookupField" && value) {
+      const tableName = newConditions[index].lookupTable;
+      if (tableName && tableColumnsCache[tableName]) {
+        const columnInfo = tableColumnsCache[tableName].find((c) => c.columnName === value);
+        if (columnInfo) {
+          newConditions[index].lookupFieldLabel = columnInfo.columnLabel;
+        }
+      }
+    }
+
     setConditions(newConditions);
     updateNode(nodeId, {
       conditions: newConditions,
@@ -329,64 +676,114 @@ export function ConditionProperties({ nodeId, data }: ConditionPropertiesProps)
                       </Select>
                     </div>
 
-                    {condition.operator !== "IS_NULL" && condition.operator !== "IS_NOT_NULL" && (
+                    {/* EXISTS 연산자인 경우: 테이블/필드 선택 UI (검색 가능한 Combobox) */}
+                    {isExistsOperator(condition.operator) && (
                       <>
                         <div>
-                          <Label className="text-xs text-gray-600">비교 값 타입</Label>
-                          <Select
-                            value={(condition as any).valueType || "static"}
-                            onValueChange={(value) => handleConditionChange(index, "valueType", value)}
-                          >
-                            <SelectTrigger className="mt-1 h-8 text-xs">
-                              <SelectValue />
-                            </SelectTrigger>
-                            <SelectContent>
-                              <SelectItem value="static">고정값</SelectItem>
-                              <SelectItem value="field">필드 참조</SelectItem>
-                            </SelectContent>
-                          </Select>
+                          <Label className="text-xs text-gray-600">
+                            <Database className="mr-1 inline h-3 w-3" />
+                            조회할 테이블
+                          </Label>
+                          {loadingTables ? (
+                            <div className="mt-1 rounded border border-dashed bg-gray-50 p-2 text-center text-xs text-gray-400">
+                              테이블 목록 로딩 중...
+                            </div>
+                          ) : allTables.length > 0 ? (
+                            <TableCombobox
+                              tables={allTables}
+                              value={(condition as any).lookupTable || ""}
+                              onSelect={(value) => handleConditionChange(index, "lookupTable", value)}
+                              placeholder="테이블 검색..."
+                            />
+                          ) : (
+                            <div className="mt-1 rounded border border-dashed bg-gray-50 p-2 text-center text-xs text-gray-400">
+                              테이블 목록을 로드할 수 없습니다
+                            </div>
+                          )}
                         </div>
 
-                        <div>
-                          <Label className="text-xs text-gray-600">
-                            {(condition as any).valueType === "field" ? "비교 필드" : "비교 값"}
-                          </Label>
-                          {(condition as any).valueType === "field" ? (
-                            // 필드 참조: 드롭다운으로 선택
-                            availableFields.length > 0 ? (
-                              <Select
-                                value={condition.value as string}
-                                onValueChange={(value) => handleConditionChange(index, "value", value)}
-                              >
-                                <SelectTrigger className="mt-1 h-8 text-xs">
-                                  <SelectValue placeholder="비교할 필드 선택" />
-                                </SelectTrigger>
-                                <SelectContent>
-                                  {availableFields.map((field) => (
-                                    <SelectItem key={field.name} value={field.name}>
-                                      {field.label || field.name}
-                                      {field.type && <span className="ml-2 text-xs text-gray-400">({field.type})</span>}
-                                    </SelectItem>
-                                  ))}
-                                </SelectContent>
-                              </Select>
-                            ) : (
-                              <div className="mt-1 rounded border border-dashed bg-gray-50 p-2 text-center text-xs text-gray-400">
-                                소스 노드를 연결하세요
-                              </div>
-                            )
-                          ) : (
-                            // 고정값: 직접 입력
-                            <Input
-                              value={condition.value as string}
-                              onChange={(e) => handleConditionChange(index, "value", e.target.value)}
-                              placeholder="비교할 값"
-                              className="mt-1 h-8 text-xs"
-                            />
-                          )}
+                        {(condition as any).lookupTable && (
+                          <ColumnSelectSection
+                            lookupTable={(condition as any).lookupTable}
+                            lookupField={(condition as any).lookupField || ""}
+                            tableColumnsCache={tableColumnsCache}
+                            loadingColumns={loadingColumns}
+                            loadTableColumns={loadTableColumns}
+                            onSelect={(value) => handleConditionChange(index, "lookupField", value)}
+                          />
+                        )}
+
+                        <div className="rounded bg-purple-50 p-2 text-xs text-purple-700">
+                          {condition.operator === "EXISTS_IN"
+                            ? `소스의 "${condition.field || "..."}" 값이 "${(condition as any).lookupTableLabel || "..."}" 테이블의 "${(condition as any).lookupFieldLabel || "..."}" 컬럼에 존재하면 TRUE`
+                            : `소스의 "${condition.field || "..."}" 값이 "${(condition as any).lookupTableLabel || "..."}" 테이블의 "${(condition as any).lookupFieldLabel || "..."}" 컬럼에 존재하지 않으면 TRUE`}
                         </div>
                       </>
                     )}
+
+                    {/* 일반 연산자인 경우: 기존 비교값 UI */}
+                    {condition.operator !== "IS_NULL" &&
+                      condition.operator !== "IS_NOT_NULL" &&
+                      !isExistsOperator(condition.operator) && (
+                        <>
+                          <div>
+                            <Label className="text-xs text-gray-600">비교 값 타입</Label>
+                            <Select
+                              value={(condition as any).valueType || "static"}
+                              onValueChange={(value) => handleConditionChange(index, "valueType", value)}
+                            >
+                              <SelectTrigger className="mt-1 h-8 text-xs">
+                                <SelectValue />
+                              </SelectTrigger>
+                              <SelectContent>
+                                <SelectItem value="static">고정값</SelectItem>
+                                <SelectItem value="field">필드 참조</SelectItem>
+                              </SelectContent>
+                            </Select>
+                          </div>
+
+                          <div>
+                            <Label className="text-xs text-gray-600">
+                              {(condition as any).valueType === "field" ? "비교 필드" : "비교 값"}
+                            </Label>
+                            {(condition as any).valueType === "field" ? (
+                              // 필드 참조: 드롭다운으로 선택
+                              availableFields.length > 0 ? (
+                                <Select
+                                  value={condition.value as string}
+                                  onValueChange={(value) => handleConditionChange(index, "value", value)}
+                                >
+                                  <SelectTrigger className="mt-1 h-8 text-xs">
+                                    <SelectValue placeholder="비교할 필드 선택" />
+                                  </SelectTrigger>
+                                  <SelectContent>
+                                    {availableFields.map((field) => (
+                                      <SelectItem key={field.name} value={field.name}>
+                                        {field.label || field.name}
+                                        {field.type && (
+                                          <span className="ml-2 text-xs text-gray-400">({field.type})</span>
+                                        )}
+                                      </SelectItem>
+                                    ))}
+                                  </SelectContent>
+                                </Select>
+                              ) : (
+                                <div className="mt-1 rounded border border-dashed bg-gray-50 p-2 text-center text-xs text-gray-400">
+                                  소스 노드를 연결하세요
+                                </div>
+                              )
+                            ) : (
+                              // 고정값: 직접 입력
+                              <Input
+                                value={condition.value as string}
+                                onChange={(e) => handleConditionChange(index, "value", e.target.value)}
+                                placeholder="비교할 값"
+                                className="mt-1 h-8 text-xs"
+                              />
+                            )}
+                          </div>
+                        </>
+                      )}
                   </div>
                 </div>
               ))}
@@ -402,20 +799,28 @@ export function ConditionProperties({ nodeId, data }: ConditionPropertiesProps)
         {/* 안내 */}
         <div className="space-y-2">
           <div className="rounded bg-blue-50 p-3 text-xs text-blue-700">
-            🔌 <strong>소스 노드 연결</strong>: 테이블/외부DB 노드를 연결하면 자동으로 필드 목록이 표시됩니다.
+            <strong>소스 노드 연결</strong>: 테이블/외부DB 노드를 연결하면 자동으로 필드 목록이 표시됩니다.
           </div>
           <div className="rounded bg-green-50 p-3 text-xs text-green-700">
-            🔄 <strong>비교 값 타입</strong>:<br />• <strong>고정값</strong>: 직접 입력한 값과 비교 (예: age &gt; 30)
-            <br />• <strong>필드 참조</strong>: 다른 필드의 값과 비교 (예: 주문수량 &gt; 재고수량)
+            <strong>비교 값 타입</strong>:<br />
+            - <strong>고정값</strong>: 직접 입력한 값과 비교 (예: age &gt; 30)
+            <br />- <strong>필드 참조</strong>: 다른 필드의 값과 비교 (예: 주문수량 &gt; 재고수량)
+          </div>
+          <div className="rounded bg-purple-50 p-3 text-xs text-purple-700">
+            <strong>테이블 존재 여부 검사</strong>:<br />
+            - <strong>다른 테이블에 존재함</strong>: 값이 다른 테이블에 있으면 TRUE
+            <br />- <strong>다른 테이블에 존재하지 않음</strong>: 값이 다른 테이블에 없으면 TRUE
+            <br />
+            (예: 품명이 품목정보 테이블에 없으면 자동 등록)
           </div>
           <div className="rounded bg-yellow-50 p-3 text-xs text-yellow-700">
-            💡 <strong>AND</strong>: 모든 조건이 참이어야 TRUE 출력
+            <strong>AND</strong>: 모든 조건이 참이어야 TRUE 출력
           </div>
           <div className="rounded bg-yellow-50 p-3 text-xs text-yellow-700">
-            💡 <strong>OR</strong>: 하나라도 참이면 TRUE 출력
+            <strong>OR</strong>: 하나라도 참이면 TRUE 출력
           </div>
           <div className="rounded bg-yellow-50 p-3 text-xs text-yellow-700">
-            ⚡ TRUE 출력은 오른쪽 위, FALSE 출력은 오른쪽 아래입니다.
+            TRUE 출력은 오른쪽 위, FALSE 출력은 오른쪽 아래입니다.
           </div>
         </div>
       </div>
diff --git a/frontend/components/dataflow/node-editor/panels/properties/DeleteActionProperties.tsx b/frontend/components/dataflow/node-editor/panels/properties/DeleteActionProperties.tsx
index 16eca3cd..b30bc1f4 100644
--- a/frontend/components/dataflow/node-editor/panels/properties/DeleteActionProperties.tsx
+++ b/frontend/components/dataflow/node-editor/panels/properties/DeleteActionProperties.tsx
@@ -4,7 +4,7 @@
  * DELETE 액션 노드 속성 편집
  */
 
-import { useEffect, useState } from "react";
+import { useEffect, useState, useCallback } from "react";
 import { Plus, Trash2, AlertTriangle, Database, Globe, Link2, Check, ChevronsUpDown } from "lucide-react";
 import { Label } from "@/components/ui/label";
 import { Input } from "@/components/ui/input";
@@ -24,6 +24,12 @@ interface DeleteActionPropertiesProps {
   data: DeleteActionNodeData;
 }
 
+// 소스 필드 타입
+interface SourceField {
+  name: string;
+  label?: string;
+}
+
 const OPERATORS = [
   { value: "EQUALS", label: "=" },
   { value: "NOT_EQUALS", label: "≠" },
@@ -34,7 +40,7 @@ const OPERATORS = [
 ] as const;
 
 export function DeleteActionProperties({ nodeId, data }: DeleteActionPropertiesProps) {
-  const { updateNode, getExternalConnectionsCache } = useFlowEditorStore();
+  const { updateNode, getExternalConnectionsCache, nodes, edges } = useFlowEditorStore();
 
   // 🔥 타겟 타입 상태
   const [targetType, setTargetType] = useState<"internal" | "external" | "api">(data.targetType || "internal");
@@ -43,6 +49,10 @@ export function DeleteActionProperties({ nodeId, data }: DeleteActionPropertiesP
   const [targetTable, setTargetTable] = useState(data.targetTable);
   const [whereConditions, setWhereConditions] = useState(data.whereConditions || []);
 
+  // 🆕 소스 필드 목록 (연결된 입력 노드에서 가져오기)
+  const [sourceFields, setSourceFields] = useState<SourceField[]>([]);
+  const [sourceFieldsOpenState, setSourceFieldsOpenState] = useState<boolean[]>([]);
+
   // 🔥 외부 DB 관련 상태
   const [externalConnections, setExternalConnections] = useState<ExternalConnection[]>([]);
   const [externalConnectionsLoading, setExternalConnectionsLoading] = useState(false);
@@ -124,8 +134,106 @@ export function DeleteActionProperties({ nodeId, data }: DeleteActionPropertiesP
   // whereConditions 변경 시 fieldOpenState 초기화
   useEffect(() => {
     setFieldOpenState(new Array(whereConditions.length).fill(false));
+    setSourceFieldsOpenState(new Array(whereConditions.length).fill(false));
   }, [whereConditions.length]);
 
+  // 🆕 소스 필드 로딩 (연결된 입력 노드에서)
+  const loadSourceFields = useCallback(async () => {
+    // 현재 노드로 연결된 엣지 찾기
+    const incomingEdges = edges.filter((e) => e.target === nodeId);
+    console.log("🔍 DELETE 노드 연결 엣지:", incomingEdges);
+
+    if (incomingEdges.length === 0) {
+      console.log("⚠️ 연결된 소스 노드가 없습니다");
+      setSourceFields([]);
+      return;
+    }
+
+    const fields: SourceField[] = [];
+    const processedFields = new Set<string>();
+
+    for (const edge of incomingEdges) {
+      const sourceNode = nodes.find((n) => n.id === edge.source);
+      if (!sourceNode) continue;
+
+      console.log("🔗 소스 노드:", sourceNode.type, sourceNode.data);
+
+      // 소스 노드 타입에 따라 필드 추출
+      if (sourceNode.type === "trigger" && sourceNode.data.tableName) {
+        // 트리거 노드: 테이블 컬럼 조회
+        try {
+          const columns = await tableTypeApi.getColumns(sourceNode.data.tableName);
+          if (columns && Array.isArray(columns)) {
+            columns.forEach((col: any) => {
+              const colName = col.columnName || col.column_name;
+              if (!processedFields.has(colName)) {
+                processedFields.add(colName);
+                fields.push({
+                  name: colName,
+                  label: col.columnLabel || col.column_label || colName,
+                });
+              }
+            });
+          }
+        } catch (error) {
+          console.error("트리거 노드 컬럼 로딩 실패:", error);
+        }
+      } else if (sourceNode.type === "tableSource" && sourceNode.data.tableName) {
+        // 테이블 소스 노드
+        try {
+          const columns = await tableTypeApi.getColumns(sourceNode.data.tableName);
+          if (columns && Array.isArray(columns)) {
+            columns.forEach((col: any) => {
+              const colName = col.columnName || col.column_name;
+              if (!processedFields.has(colName)) {
+                processedFields.add(colName);
+                fields.push({
+                  name: colName,
+                  label: col.columnLabel || col.column_label || colName,
+                });
+              }
+            });
+          }
+        } catch (error) {
+          console.error("테이블 소스 노드 컬럼 로딩 실패:", error);
+        }
+      } else if (sourceNode.type === "condition") {
+        // 조건 노드: 연결된 이전 노드에서 필드 가져오기
+        const conditionIncomingEdges = edges.filter((e) => e.target === sourceNode.id);
+        for (const condEdge of conditionIncomingEdges) {
+          const condSourceNode = nodes.find((n) => n.id === condEdge.source);
+          if (condSourceNode?.type === "trigger" && condSourceNode.data.tableName) {
+            try {
+              const columns = await tableTypeApi.getColumns(condSourceNode.data.tableName);
+              if (columns && Array.isArray(columns)) {
+                columns.forEach((col: any) => {
+                  const colName = col.columnName || col.column_name;
+                  if (!processedFields.has(colName)) {
+                    processedFields.add(colName);
+                    fields.push({
+                      name: colName,
+                      label: col.columnLabel || col.column_label || colName,
+                    });
+                  }
+                });
+              }
+            } catch (error) {
+              console.error("조건 노드 소스 컬럼 로딩 실패:", error);
+            }
+          }
+        }
+      }
+    }
+
+    console.log("✅ DELETE 노드 소스 필드:", fields);
+    setSourceFields(fields);
+  }, [nodeId, nodes, edges]);
+
+  // 소스 필드 로딩
+  useEffect(() => {
+    loadSourceFields();
+  }, [loadSourceFields]);
+
   const loadExternalConnections = async () => {
     try {
       setExternalConnectionsLoading(true);
@@ -239,22 +347,41 @@ export function DeleteActionProperties({ nodeId, data }: DeleteActionPropertiesP
         field: "",
         operator: "EQUALS",
         value: "",
+        sourceField: undefined,
+        staticValue: undefined,
       },
     ];
     setWhereConditions(newConditions);
     setFieldOpenState(new Array(newConditions.length).fill(false));
+    setSourceFieldsOpenState(new Array(newConditions.length).fill(false));
+    
+    // 자동 저장
+    updateNode(nodeId, {
+      whereConditions: newConditions,
+    });
   };
 
   const handleRemoveCondition = (index: number) => {
     const newConditions = whereConditions.filter((_, i) => i !== index);
     setWhereConditions(newConditions);
     setFieldOpenState(new Array(newConditions.length).fill(false));
+    setSourceFieldsOpenState(new Array(newConditions.length).fill(false));
+    
+    // 자동 저장
+    updateNode(nodeId, {
+      whereConditions: newConditions,
+    });
   };
 
   const handleConditionChange = (index: number, field: string, value: any) => {
     const newConditions = [...whereConditions];
     newConditions[index] = { ...newConditions[index], [field]: value };
     setWhereConditions(newConditions);
+    
+    // 자동 저장
+    updateNode(nodeId, {
+      whereConditions: newConditions,
+    });
   };
 
   const handleSave = () => {
@@ -840,14 +967,125 @@ export function DeleteActionProperties({ nodeId, data }: DeleteActionPropertiesP
                         </Select>
                       </div>
 
+                      {/* 🆕 소스 필드 - Combobox */}
                       <div>
-                        <Label className="text-xs text-gray-600">값</Label>
+                        <Label className="text-xs text-gray-600">소스 필드 (선택)</Label>
+                        {sourceFields.length > 0 ? (
+                          <Popover
+                            open={sourceFieldsOpenState[index]}
+                            onOpenChange={(open) => {
+                              const newState = [...sourceFieldsOpenState];
+                              newState[index] = open;
+                              setSourceFieldsOpenState(newState);
+                            }}
+                          >
+                            <PopoverTrigger asChild>
+                              <Button
+                                variant="outline"
+                                role="combobox"
+                                aria-expanded={sourceFieldsOpenState[index]}
+                                className="mt-1 h-8 w-full justify-between text-xs sm:h-10 sm:text-sm"
+                              >
+                                {condition.sourceField
+                                  ? (() => {
+                                      const field = sourceFields.find((f) => f.name === condition.sourceField);
+                                      return (
+                                        <div className="flex items-center justify-between gap-2 overflow-hidden">
+                                          <span className="truncate font-medium">
+                                            {field?.label || condition.sourceField}
+                                          </span>
+                                          {field?.label && field.label !== field.name && (
+                                            <span className="text-muted-foreground font-mono text-xs">{field.name}</span>
+                                          )}
+                                        </div>
+                                      );
+                                    })()
+                                  : "소스 필드 선택 (선택)"}
+                                <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                              </Button>
+                            </PopoverTrigger>
+                            <PopoverContent
+                              className="p-0"
+                              style={{ width: "var(--radix-popover-trigger-width)" }}
+                              align="start"
+                            >
+                              <Command>
+                                <CommandInput placeholder="소스 필드 검색..." className="text-xs sm:text-sm" />
+                                <CommandList>
+                                  <CommandEmpty className="text-xs sm:text-sm">필드를 찾을 수 없습니다.</CommandEmpty>
+                                  <CommandGroup>
+                                    <CommandItem
+                                      value="_NONE_"
+                                      onSelect={() => {
+                                        handleConditionChange(index, "sourceField", undefined);
+                                        const newState = [...sourceFieldsOpenState];
+                                        newState[index] = false;
+                                        setSourceFieldsOpenState(newState);
+                                      }}
+                                      className="text-xs text-gray-400 sm:text-sm"
+                                    >
+                                      <Check
+                                        className={cn(
+                                          "mr-2 h-4 w-4",
+                                          !condition.sourceField ? "opacity-100" : "opacity-0",
+                                        )}
+                                      />
+                                      없음 (정적 값 사용)
+                                    </CommandItem>
+                                    {sourceFields.map((field) => (
+                                      <CommandItem
+                                        key={field.name}
+                                        value={field.name}
+                                        onSelect={(currentValue) => {
+                                          handleConditionChange(index, "sourceField", currentValue);
+                                          const newState = [...sourceFieldsOpenState];
+                                          newState[index] = false;
+                                          setSourceFieldsOpenState(newState);
+                                        }}
+                                        className="text-xs sm:text-sm"
+                                      >
+                                        <Check
+                                          className={cn(
+                                            "mr-2 h-4 w-4",
+                                            condition.sourceField === field.name ? "opacity-100" : "opacity-0",
+                                          )}
+                                        />
+                                        <div className="flex flex-col">
+                                          <span className="font-medium">{field.label || field.name}</span>
+                                          {field.label && field.label !== field.name && (
+                                            <span className="text-muted-foreground font-mono text-[10px]">
+                                              {field.name}
+                                            </span>
+                                          )}
+                                        </div>
+                                      </CommandItem>
+                                    ))}
+                                  </CommandGroup>
+                                </CommandList>
+                              </Command>
+                            </PopoverContent>
+                          </Popover>
+                        ) : (
+                          <div className="mt-1 rounded border border-dashed border-gray-300 bg-gray-50 p-2 text-center text-xs text-gray-500">
+                            연결된 소스 노드가 없습니다
+                          </div>
+                        )}
+                        <p className="mt-1 text-xs text-gray-400">소스 데이터에서 값을 가져올 필드</p>
+                      </div>
+
+                      {/* 정적 값 */}
+                      <div>
+                        <Label className="text-xs text-gray-600">정적 값</Label>
                         <Input
-                          value={condition.value as string}
-                          onChange={(e) => handleConditionChange(index, "value", e.target.value)}
-                          placeholder="비교 값"
+                          value={condition.staticValue || condition.value || ""}
+                          onChange={(e) => {
+                            handleConditionChange(index, "staticValue", e.target.value || undefined);
+                            handleConditionChange(index, "value", e.target.value);
+                          }}
+                          placeholder="비교할 고정 값"
                           className="mt-1 h-8 text-xs"
                         />
+                        <p className="mt-1 text-xs text-gray-400">소스 필드가 비어있을 때 사용됩니다</p>
                       </div>
                     </div>
                   </div>
diff --git a/frontend/components/dataflow/node-editor/panels/properties/FormulaTransformProperties.tsx b/frontend/components/dataflow/node-editor/panels/properties/FormulaTransformProperties.tsx
index fc2fbdf8..d9a9a20c 100644
--- a/frontend/components/dataflow/node-editor/panels/properties/FormulaTransformProperties.tsx
+++ b/frontend/components/dataflow/node-editor/panels/properties/FormulaTransformProperties.tsx
@@ -797,6 +797,85 @@ export function FormulaTransformProperties({ nodeId, data }: FormulaTransformPro
                             index,
                           )}
                         </div>
+
+                        {/* 추가 연산 목록 */}
+                        {trans.arithmetic.additionalOperations && trans.arithmetic.additionalOperations.length > 0 && (
+                          <div className="space-y-2 border-t pt-2">
+                            <Label className="text-xs text-gray-500">추가 연산</Label>
+                            {trans.arithmetic.additionalOperations.map((addOp: any, addIndex: number) => (
+                              <div key={addIndex} className="flex items-center gap-2 rounded bg-orange-50 p-2">
+                                <Select
+                                  value={addOp.operator}
+                                  onValueChange={(value) => {
+                                    const newAdditionalOps = [...(trans.arithmetic!.additionalOperations || [])];
+                                    newAdditionalOps[addIndex] = { ...newAdditionalOps[addIndex], operator: value };
+                                    handleTransformationChange(index, {
+                                      arithmetic: { ...trans.arithmetic!, additionalOperations: newAdditionalOps },
+                                    });
+                                  }}
+                                >
+                                  <SelectTrigger className="h-7 w-20 text-xs">
+                                    <SelectValue />
+                                  </SelectTrigger>
+                                  <SelectContent>
+                                    {ARITHMETIC_OPERATORS.map((op) => (
+                                      <SelectItem key={op.value} value={op.value}>
+                                        {op.value}
+                                      </SelectItem>
+                                    ))}
+                                  </SelectContent>
+                                </Select>
+                                <div className="flex-1">
+                                  {renderOperandSelector(
+                                    addOp.operand,
+                                    (updates) => {
+                                      const newAdditionalOps = [...(trans.arithmetic!.additionalOperations || [])];
+                                      newAdditionalOps[addIndex] = { ...newAdditionalOps[addIndex], operand: updates };
+                                      handleTransformationChange(index, {
+                                        arithmetic: { ...trans.arithmetic!, additionalOperations: newAdditionalOps },
+                                      });
+                                    },
+                                    index,
+                                  )}
+                                </div>
+                                <Button
+                                  variant="ghost"
+                                  size="sm"
+                                  className="h-7 w-7 p-0 text-red-500 hover:text-red-700"
+                                  onClick={() => {
+                                    const newAdditionalOps = trans.arithmetic!.additionalOperations!.filter(
+                                      (_: any, i: number) => i !== addIndex
+                                    );
+                                    handleTransformationChange(index, {
+                                      arithmetic: { ...trans.arithmetic!, additionalOperations: newAdditionalOps },
+                                    });
+                                  }}
+                                >
+                                  <Trash2 className="h-3 w-3" />
+                                </Button>
+                              </div>
+                            ))}
+                          </div>
+                        )}
+
+                        {/* 추가 연산 버튼 */}
+                        <Button
+                          variant="outline"
+                          size="sm"
+                          className="h-7 w-full text-xs"
+                          onClick={() => {
+                            const newAdditionalOps = [
+                              ...(trans.arithmetic!.additionalOperations || []),
+                              { operator: "*", operand: { type: "static" as const, value: "" } },
+                            ];
+                            handleTransformationChange(index, {
+                              arithmetic: { ...trans.arithmetic!, additionalOperations: newAdditionalOps },
+                            });
+                          }}
+                        >
+                          <Plus className="mr-1 h-3 w-3" />
+                          연산 추가
+                        </Button>
                       </div>
                     )}
 
diff --git a/frontend/components/dataflow/node-editor/panels/properties/InsertActionProperties.tsx b/frontend/components/dataflow/node-editor/panels/properties/InsertActionProperties.tsx
index 437487e9..c68ff8d4 100644
--- a/frontend/components/dataflow/node-editor/panels/properties/InsertActionProperties.tsx
+++ b/frontend/components/dataflow/node-editor/panels/properties/InsertActionProperties.tsx
@@ -5,7 +5,7 @@
  */
 
 import { useEffect, useState } from "react";
-import { Plus, Trash2, Check, ChevronsUpDown, ArrowRight, Database, Globe, Link2 } from "lucide-react";
+import { Plus, Trash2, Check, ChevronsUpDown, ArrowRight, Database, Globe, Link2, Sparkles } from "lucide-react";
 import { Label } from "@/components/ui/label";
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
@@ -18,6 +18,8 @@ import { cn } from "@/lib/utils";
 import { useFlowEditorStore } from "@/lib/stores/flowEditorStore";
 import { tableTypeApi } from "@/lib/api/screen";
 import { getTestedExternalConnections, getExternalTables, getExternalColumns } from "@/lib/api/nodeExternalConnections";
+import { getNumberingRules } from "@/lib/api/numberingRule";
+import type { NumberingRuleConfig } from "@/types/numbering-rule";
 import type { InsertActionNodeData } from "@/types/node-editor";
 import type { ExternalConnection, ExternalTable, ExternalColumn } from "@/lib/api/nodeExternalConnections";
 
@@ -89,6 +91,11 @@ export function InsertActionProperties({ nodeId, data }: InsertActionPropertiesP
   const [apiHeaders, setApiHeaders] = useState<Record<string, string>>(data.apiHeaders || {});
   const [apiBodyTemplate, setApiBodyTemplate] = useState(data.apiBodyTemplate || "");
 
+  // 🔥 채번 규칙 관련 상태
+  const [numberingRules, setNumberingRules] = useState<NumberingRuleConfig[]>([]);
+  const [numberingRulesLoading, setNumberingRulesLoading] = useState(false);
+  const [mappingNumberingRulesOpenState, setMappingNumberingRulesOpenState] = useState<boolean[]>([]);
+
   // 데이터 변경 시 로컬 상태 업데이트
   useEffect(() => {
     setDisplayName(data.displayName || data.targetTable);
@@ -128,8 +135,33 @@ export function InsertActionProperties({ nodeId, data }: InsertActionPropertiesP
   useEffect(() => {
     setMappingSourceFieldsOpenState(new Array(fieldMappings.length).fill(false));
     setMappingTargetFieldsOpenState(new Array(fieldMappings.length).fill(false));
+    setMappingNumberingRulesOpenState(new Array(fieldMappings.length).fill(false));
   }, [fieldMappings.length]);
 
+  // 🔥 채번 규칙 로딩 (자동 생성 사용 시)
+  useEffect(() => {
+    const loadNumberingRules = async () => {
+      setNumberingRulesLoading(true);
+      try {
+        const response = await getNumberingRules();
+        if (response.success && response.data) {
+          setNumberingRules(response.data);
+          console.log(`✅ 채번 규칙 ${response.data.length}개 로딩 완료`);
+        } else {
+          console.error("❌ 채번 규칙 로딩 실패:", response.error);
+          setNumberingRules([]);
+        }
+      } catch (error) {
+        console.error("❌ 채번 규칙 로딩 오류:", error);
+        setNumberingRules([]);
+      } finally {
+        setNumberingRulesLoading(false);
+      }
+    };
+
+    loadNumberingRules();
+  }, []);
+
   // 🔥 외부 테이블 변경 시 컬럼 로드
   useEffect(() => {
     if (targetType === "external" && selectedExternalConnectionId && externalTargetTable) {
@@ -540,6 +572,7 @@ export function InsertActionProperties({ nodeId, data }: InsertActionPropertiesP
         sourceField: null,
         targetField: "",
         staticValue: undefined,
+        valueType: "source" as const, // 🔥 기본값: 소스 필드
       },
     ];
     setFieldMappings(newMappings);
@@ -548,6 +581,7 @@ export function InsertActionProperties({ nodeId, data }: InsertActionPropertiesP
     // Combobox 열림 상태 배열 초기화
     setMappingSourceFieldsOpenState(new Array(newMappings.length).fill(false));
     setMappingTargetFieldsOpenState(new Array(newMappings.length).fill(false));
+    setMappingNumberingRulesOpenState(new Array(newMappings.length).fill(false));
   };
 
   const handleRemoveMapping = (index: number) => {
@@ -558,6 +592,7 @@ export function InsertActionProperties({ nodeId, data }: InsertActionPropertiesP
     // Combobox 열림 상태 배열도 업데이트
     setMappingSourceFieldsOpenState(new Array(newMappings.length).fill(false));
     setMappingTargetFieldsOpenState(new Array(newMappings.length).fill(false));
+    setMappingNumberingRulesOpenState(new Array(newMappings.length).fill(false));
   };
 
   const handleMappingChange = (index: number, field: string, value: any) => {
@@ -586,6 +621,24 @@ export function InsertActionProperties({ nodeId, data }: InsertActionPropertiesP
         targetField: value,
         targetFieldLabel: targetColumn?.label_ko || targetColumn?.column_label || targetColumn?.displayName || value,
       };
+    } else if (field === "valueType") {
+      // 🔥 값 생성 유형 변경 시 관련 필드 초기화
+      newMappings[index] = {
+        ...newMappings[index],
+        valueType: value,
+        // 유형 변경 시 다른 유형의 값 초기화
+        ...(value !== "source" && { sourceField: null, sourceFieldLabel: undefined }),
+        ...(value !== "static" && { staticValue: undefined }),
+        ...(value !== "autoGenerate" && { numberingRuleId: undefined, numberingRuleName: undefined }),
+      };
+    } else if (field === "numberingRuleId") {
+      // 🔥 채번 규칙 선택 시 이름도 함께 저장
+      const selectedRule = numberingRules.find((r) => r.ruleId === value);
+      newMappings[index] = {
+        ...newMappings[index],
+        numberingRuleId: value,
+        numberingRuleName: selectedRule?.ruleName,
+      };
     } else {
       newMappings[index] = {
         ...newMappings[index],
@@ -1165,54 +1218,203 @@ export function InsertActionProperties({ nodeId, data }: InsertActionPropertiesP
                         </div>
 
                         <div className="space-y-2">
-                          {/* 소스 필드 입력/선택 */}
+                          {/* 🔥 값 생성 유형 선택 */}
                           <div>
-                            <Label className="text-xs text-gray-600">
-                              소스 필드
-                              {hasRestAPISource && <span className="ml-1 text-teal-600">(REST API - 직접 입력)</span>}
-                            </Label>
-                            {hasRestAPISource ? (
-                              // REST API 소스인 경우: 직접 입력
+                            <Label className="text-xs text-gray-600">값 생성 방식</Label>
+                            <div className="mt-1 grid grid-cols-3 gap-1">
+                              <button
+                                type="button"
+                                onClick={() => handleMappingChange(index, "valueType", "source")}
+                                className={cn(
+                                  "rounded border px-2 py-1 text-xs transition-all",
+                                  (mapping.valueType === "source" || !mapping.valueType)
+                                    ? "border-blue-500 bg-blue-50 text-blue-700"
+                                    : "border-gray-200 hover:border-gray-300",
+                                )}
+                              >
+                                소스 필드
+                              </button>
+                              <button
+                                type="button"
+                                onClick={() => handleMappingChange(index, "valueType", "static")}
+                                className={cn(
+                                  "rounded border px-2 py-1 text-xs transition-all",
+                                  mapping.valueType === "static"
+                                    ? "border-orange-500 bg-orange-50 text-orange-700"
+                                    : "border-gray-200 hover:border-gray-300",
+                                )}
+                              >
+                                고정값
+                              </button>
+                              <button
+                                type="button"
+                                onClick={() => handleMappingChange(index, "valueType", "autoGenerate")}
+                                className={cn(
+                                  "rounded border px-2 py-1 text-xs transition-all flex items-center justify-center gap-1",
+                                  mapping.valueType === "autoGenerate"
+                                    ? "border-purple-500 bg-purple-50 text-purple-700"
+                                    : "border-gray-200 hover:border-gray-300",
+                                )}
+                              >
+                                <Sparkles className="h-3 w-3" />
+                                자동생성
+                              </button>
+                            </div>
+                          </div>
+
+                          {/* 🔥 소스 필드 입력/선택 (valueType === "source" 일 때만) */}
+                          {(mapping.valueType === "source" || !mapping.valueType) && (
+                            <div>
+                              <Label className="text-xs text-gray-600">
+                                소스 필드
+                                {hasRestAPISource && <span className="ml-1 text-teal-600">(REST API - 직접 입력)</span>}
+                              </Label>
+                              {hasRestAPISource ? (
+                                // REST API 소스인 경우: 직접 입력
+                                <Input
+                                  value={mapping.sourceField || ""}
+                                  onChange={(e) => handleMappingChange(index, "sourceField", e.target.value || null)}
+                                  placeholder="필드명 입력 (예: userId, userName)"
+                                  className="mt-1 h-8 text-xs"
+                                />
+                              ) : (
+                                // 일반 소스인 경우: Combobox 선택
+                                <Popover
+                                  open={mappingSourceFieldsOpenState[index]}
+                                  onOpenChange={(open) => {
+                                    const newState = [...mappingSourceFieldsOpenState];
+                                    newState[index] = open;
+                                    setMappingSourceFieldsOpenState(newState);
+                                  }}
+                                >
+                                  <PopoverTrigger asChild>
+                                    <Button
+                                      variant="outline"
+                                      role="combobox"
+                                      aria-expanded={mappingSourceFieldsOpenState[index]}
+                                      className="mt-1 h-8 w-full justify-between text-xs sm:h-10 sm:text-sm"
+                                    >
+                                      {mapping.sourceField
+                                        ? (() => {
+                                            const field = sourceFields.find((f) => f.name === mapping.sourceField);
+                                            return (
+                                              <div className="flex items-center justify-between gap-2 overflow-hidden">
+                                                <span className="truncate font-medium">
+                                                  {field?.label || mapping.sourceField}
+                                                </span>
+                                                {field?.label && field.label !== field.name && (
+                                                  <span className="text-muted-foreground font-mono text-xs">
+                                                    {field.name}
+                                                  </span>
+                                                )}
+                                              </div>
+                                            );
+                                          })()
+                                        : "소스 필드 선택"}
+                                      <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                                    </Button>
+                                  </PopoverTrigger>
+                                  <PopoverContent
+                                    className="p-0"
+                                    style={{ width: "var(--radix-popover-trigger-width)" }}
+                                    align="start"
+                                  >
+                                    <Command>
+                                      <CommandInput placeholder="소스 필드 검색..." className="text-xs sm:text-sm" />
+                                      <CommandList>
+                                        <CommandEmpty className="text-xs sm:text-sm">
+                                          필드를 찾을 수 없습니다.
+                                        </CommandEmpty>
+                                        <CommandGroup>
+                                          {sourceFields.map((field) => (
+                                            <CommandItem
+                                              key={field.name}
+                                              value={field.name}
+                                              onSelect={(currentValue) => {
+                                                handleMappingChange(index, "sourceField", currentValue || null);
+                                                const newState = [...mappingSourceFieldsOpenState];
+                                                newState[index] = false;
+                                                setMappingSourceFieldsOpenState(newState);
+                                              }}
+                                              className="text-xs sm:text-sm"
+                                            >
+                                              <Check
+                                                className={cn(
+                                                  "mr-2 h-4 w-4",
+                                                  mapping.sourceField === field.name ? "opacity-100" : "opacity-0",
+                                                )}
+                                              />
+                                              <div className="flex flex-col">
+                                                <span className="font-medium">{field.label || field.name}</span>
+                                                {field.label && field.label !== field.name && (
+                                                  <span className="text-muted-foreground font-mono text-[10px]">
+                                                    {field.name}
+                                                  </span>
+                                                )}
+                                              </div>
+                                            </CommandItem>
+                                          ))}
+                                        </CommandGroup>
+                                      </CommandList>
+                                    </Command>
+                                  </PopoverContent>
+                                </Popover>
+                              )}
+                              {hasRestAPISource && (
+                                <p className="mt-1 text-xs text-gray-500">API 응답 JSON의 필드명을 입력하세요</p>
+                              )}
+                            </div>
+                          )}
+
+                          {/* 🔥 고정값 입력 (valueType === "static" 일 때) */}
+                          {mapping.valueType === "static" && (
+                            <div>
+                              <Label className="text-xs text-gray-600">고정값</Label>
                               <Input
-                                value={mapping.sourceField || ""}
-                                onChange={(e) => handleMappingChange(index, "sourceField", e.target.value || null)}
-                                placeholder="필드명 입력 (예: userId, userName)"
+                                value={mapping.staticValue || ""}
+                                onChange={(e) => handleMappingChange(index, "staticValue", e.target.value || undefined)}
+                                placeholder="고정값 입력"
                                 className="mt-1 h-8 text-xs"
                               />
-                            ) : (
-                              // 일반 소스인 경우: Combobox 선택
+                            </div>
+                          )}
+
+                          {/* 🔥 채번 규칙 선택 (valueType === "autoGenerate" 일 때) */}
+                          {mapping.valueType === "autoGenerate" && (
+                            <div>
+                              <Label className="text-xs text-gray-600">
+                                채번 규칙
+                                {numberingRulesLoading && <span className="ml-1 text-gray-400">(로딩 중...)</span>}
+                              </Label>
                               <Popover
-                                open={mappingSourceFieldsOpenState[index]}
+                                open={mappingNumberingRulesOpenState[index]}
                                 onOpenChange={(open) => {
-                                  const newState = [...mappingSourceFieldsOpenState];
+                                  const newState = [...mappingNumberingRulesOpenState];
                                   newState[index] = open;
-                                  setMappingSourceFieldsOpenState(newState);
+                                  setMappingNumberingRulesOpenState(newState);
                                 }}
                               >
                                 <PopoverTrigger asChild>
                                   <Button
                                     variant="outline"
                                     role="combobox"
-                                    aria-expanded={mappingSourceFieldsOpenState[index]}
+                                    aria-expanded={mappingNumberingRulesOpenState[index]}
                                     className="mt-1 h-8 w-full justify-between text-xs sm:h-10 sm:text-sm"
+                                    disabled={numberingRulesLoading || numberingRules.length === 0}
                                   >
-                                    {mapping.sourceField
+                                    {mapping.numberingRuleId
                                       ? (() => {
-                                          const field = sourceFields.find((f) => f.name === mapping.sourceField);
+                                          const rule = numberingRules.find((r) => r.ruleId === mapping.numberingRuleId);
                                           return (
-                                            <div className="flex items-center justify-between gap-2 overflow-hidden">
+                                            <div className="flex items-center gap-2 overflow-hidden">
+                                              <Sparkles className="h-3 w-3 text-purple-500" />
                                               <span className="truncate font-medium">
-                                                {field?.label || mapping.sourceField}
+                                                {rule?.ruleName || mapping.numberingRuleName || mapping.numberingRuleId}
                                               </span>
-                                              {field?.label && field.label !== field.name && (
-                                                <span className="text-muted-foreground font-mono text-xs">
-                                                  {field.name}
-                                                </span>
-                                              )}
                                             </div>
                                           );
                                         })()
-                                      : "소스 필드 선택"}
+                                      : "채번 규칙 선택"}
                                     <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
                                   </Button>
                                 </PopoverTrigger>
@@ -1222,37 +1424,36 @@ export function InsertActionProperties({ nodeId, data }: InsertActionPropertiesP
                                   align="start"
                                 >
                                   <Command>
-                                    <CommandInput placeholder="소스 필드 검색..." className="text-xs sm:text-sm" />
+                                    <CommandInput placeholder="채번 규칙 검색..." className="text-xs sm:text-sm" />
                                     <CommandList>
                                       <CommandEmpty className="text-xs sm:text-sm">
-                                        필드를 찾을 수 없습니다.
+                                        채번 규칙을 찾을 수 없습니다.
                                       </CommandEmpty>
                                       <CommandGroup>
-                                        {sourceFields.map((field) => (
+                                        {numberingRules.map((rule) => (
                                           <CommandItem
-                                            key={field.name}
-                                            value={field.name}
+                                            key={rule.ruleId}
+                                            value={rule.ruleId}
                                             onSelect={(currentValue) => {
-                                              handleMappingChange(index, "sourceField", currentValue || null);
-                                              const newState = [...mappingSourceFieldsOpenState];
+                                              handleMappingChange(index, "numberingRuleId", currentValue);
+                                              const newState = [...mappingNumberingRulesOpenState];
                                               newState[index] = false;
-                                              setMappingSourceFieldsOpenState(newState);
+                                              setMappingNumberingRulesOpenState(newState);
                                             }}
                                             className="text-xs sm:text-sm"
                                           >
                                             <Check
                                               className={cn(
                                                 "mr-2 h-4 w-4",
-                                                mapping.sourceField === field.name ? "opacity-100" : "opacity-0",
+                                                mapping.numberingRuleId === rule.ruleId ? "opacity-100" : "opacity-0",
                                               )}
                                             />
                                             <div className="flex flex-col">
-                                              <span className="font-medium">{field.label || field.name}</span>
-                                              {field.label && field.label !== field.name && (
-                                                <span className="text-muted-foreground font-mono text-[10px]">
-                                                  {field.name}
-                                                </span>
-                                              )}
+                                              <span className="font-medium">{rule.ruleName}</span>
+                                              <span className="text-muted-foreground font-mono text-[10px]">
+                                                {rule.ruleId}
+                                                {rule.tableName && ` - ${rule.tableName}`}
+                                              </span>
                                             </div>
                                           </CommandItem>
                                         ))}
@@ -1261,11 +1462,13 @@ export function InsertActionProperties({ nodeId, data }: InsertActionPropertiesP
                                   </Command>
                                 </PopoverContent>
                               </Popover>
-                            )}
-                            {hasRestAPISource && (
-                              <p className="mt-1 text-xs text-gray-500">API 응답 JSON의 필드명을 입력하세요</p>
-                            )}
-                          </div>
+                              {numberingRules.length === 0 && !numberingRulesLoading && (
+                                <p className="mt-1 text-xs text-orange-600">
+                                  등록된 채번 규칙이 없습니다. 시스템 관리에서 먼저 채번 규칙을 생성하세요.
+                                </p>
+                              )}
+                            </div>
+                          )}
 
                           <div className="flex items-center justify-center py-1">
                             <ArrowRight className="h-4 w-4 text-green-600" />
@@ -1400,18 +1603,6 @@ export function InsertActionProperties({ nodeId, data }: InsertActionPropertiesP
                               </PopoverContent>
                             </Popover>
                           </div>
-
-                          {/* 정적 값 */}
-                          <div>
-                            <Label className="text-xs text-gray-600">정적 값 (선택)</Label>
-                            <Input
-                              value={mapping.staticValue || ""}
-                              onChange={(e) => handleMappingChange(index, "staticValue", e.target.value || undefined)}
-                              placeholder="소스 필드 대신 고정 값 사용"
-                              className="mt-1 h-8 text-xs"
-                            />
-                            <p className="mt-1 text-xs text-gray-400">소스 필드가 비어있을 때만 사용됩니다</p>
-                          </div>
                         </div>
                       </div>
                     ))}
@@ -1428,9 +1619,8 @@ export function InsertActionProperties({ nodeId, data }: InsertActionPropertiesP
 
         {/* 안내 */}
         <div className="rounded bg-green-50 p-3 text-xs text-green-700">
-          ✅ 테이블과 필드는 실제 데이터베이스에서 조회됩니다.
-          <br />
-          💡 소스 필드가 없으면 정적 값이 사용됩니다.
+          <p>테이블과 필드는 실제 데이터베이스에서 조회됩니다.</p>
+          <p className="mt-1">값 생성 방식: 소스 필드(입력값 연결) / 고정값(직접 입력) / 자동생성(채번 규칙)</p>
         </div>
       </div>
     </div>
diff --git a/frontend/components/layout/ProfileModal.tsx b/frontend/components/layout/ProfileModal.tsx
index ad23acb4..a74501e0 100644
--- a/frontend/components/layout/ProfileModal.tsx
+++ b/frontend/components/layout/ProfileModal.tsx
@@ -1,3 +1,4 @@
+import { useEffect, useState } from "react";
 import {
   Dialog,
   DialogContent,
@@ -15,6 +16,14 @@ import { Camera, X, Car, Wrench, Clock, Plus, Trash2 } from "lucide-react";
 import { ProfileFormData } from "@/types/profile";
 import { Separator } from "@/components/ui/separator";
 import { VehicleRegisterData } from "@/lib/api/driver";
+import { apiClient } from "@/lib/api/client";
+
+// 언어 정보 타입
+interface LanguageInfo {
+  langCode: string;
+  langName: string;
+  langNative: string;
+}
 
 // 운전자 정보 타입
 export interface DriverInfo {
@@ -148,6 +157,46 @@ export function ProfileModal({
   onSave,
   onAlertClose,
 }: ProfileModalProps) {
+  // 언어 목록 상태
+  const [languages, setLanguages] = useState<LanguageInfo[]>([]);
+
+  // 언어 목록 로드
+  useEffect(() => {
+    const loadLanguages = async () => {
+      try {
+        const response = await apiClient.get("/multilang/languages");
+        if (response.data?.success && response.data?.data) {
+          // is_active가 'Y'인 언어만 필터링하고 정렬
+          const activeLanguages = response.data.data
+            .filter((lang: any) => lang.isActive === "Y" || lang.is_active === "Y")
+            .map((lang: any) => ({
+              langCode: lang.langCode || lang.lang_code,
+              langName: lang.langName || lang.lang_name,
+              langNative: lang.langNative || lang.lang_native,
+            }))
+            .sort((a: LanguageInfo, b: LanguageInfo) => {
+              // KR을 먼저 표시
+              if (a.langCode === "KR") return -1;
+              if (b.langCode === "KR") return 1;
+              return a.langCode.localeCompare(b.langCode);
+            });
+          setLanguages(activeLanguages);
+        }
+      } catch (error) {
+        console.error("언어 목록 로드 실패:", error);
+        // 기본값 설정
+        setLanguages([
+          { langCode: "KR", langName: "Korean", langNative: "한국어" },
+          { langCode: "US", langName: "English", langNative: "English" },
+        ]);
+      }
+    };
+
+    if (isOpen) {
+      loadLanguages();
+    }
+  }, [isOpen]);
+
   // 차량 상태 한글 변환
   const getStatusLabel = (status: string | null) => {
     switch (status) {
@@ -293,10 +342,15 @@ export function ProfileModal({
                     <SelectValue placeholder="선택해주세요" />
                   </SelectTrigger>
                   <SelectContent>
-                    <SelectItem value="KR">한국어 (KR)</SelectItem>
-                    <SelectItem value="US">English (US)</SelectItem>
-                    <SelectItem value="JP">日本語 (JP)</SelectItem>
-                    <SelectItem value="CN">中文 (CN)</SelectItem>
+                    {languages.length > 0 ? (
+                      languages.map((lang) => (
+                        <SelectItem key={lang.langCode} value={lang.langCode}>
+                          {lang.langNative} ({lang.langCode})
+                        </SelectItem>
+                      ))
+                    ) : (
+                      <SelectItem value="KR">한국어 (KR)</SelectItem>
+                    )}
                   </SelectContent>
                 </Select>
               </div>
diff --git a/frontend/components/pop/PopAcceptModal.tsx b/frontend/components/pop/PopAcceptModal.tsx
new file mode 100644
index 00000000..06f1759e
--- /dev/null
+++ b/frontend/components/pop/PopAcceptModal.tsx
@@ -0,0 +1,131 @@
+"use client";
+
+import React from "react";
+import { X, Info } from "lucide-react";
+import { WorkOrder } from "./types";
+
+interface PopAcceptModalProps {
+  isOpen: boolean;
+  workOrder: WorkOrder | null;
+  quantity: number;
+  onQuantityChange: (qty: number) => void;
+  onConfirm: (quantity: number) => void;
+  onClose: () => void;
+}
+
+export function PopAcceptModal({
+  isOpen,
+  workOrder,
+  quantity,
+  onQuantityChange,
+  onConfirm,
+  onClose,
+}: PopAcceptModalProps) {
+  if (!isOpen || !workOrder) return null;
+
+  const acceptedQty = workOrder.acceptedQuantity || 0;
+  const remainingQty = workOrder.orderQuantity - acceptedQty;
+
+  const handleAdjust = (delta: number) => {
+    const newQty = Math.max(1, Math.min(quantity + delta, remainingQty));
+    onQuantityChange(newQty);
+  };
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const val = parseInt(e.target.value) || 0;
+    const newQty = Math.max(0, Math.min(val, remainingQty));
+    onQuantityChange(newQty);
+  };
+
+  const handleConfirm = () => {
+    if (quantity > 0) {
+      onConfirm(quantity);
+    }
+  };
+
+  return (
+    <div className="pop-modal-overlay active" onClick={(e) => e.target === e.currentTarget && onClose()}>
+      <div className="pop-modal">
+        <div className="pop-modal-header">
+          <h2 className="pop-modal-title">작업 접수</h2>
+          <button className="pop-modal-close" onClick={onClose}>
+            <X size={16} />
+          </button>
+        </div>
+
+        <div className="pop-modal-body">
+          <div className="pop-accept-modal-content">
+            {/* 작업지시 정보 */}
+            <div className="pop-accept-work-info">
+              <div className="work-id">{workOrder.id}</div>
+              <div className="work-name">
+                {workOrder.itemName} ({workOrder.spec})
+              </div>
+              <div style={{ marginTop: "var(--spacing-sm)", fontSize: "var(--text-xs)", color: "rgb(var(--text-muted))" }}>
+                지시수량: {workOrder.orderQuantity} EA | 기 접수: {acceptedQty} EA
+              </div>
+            </div>
+
+            {/* 수량 입력 */}
+            <div>
+              <label className="pop-form-label">접수 수량</label>
+              <div className="pop-quantity-input-wrapper">
+                <button className="pop-qty-btn minus" onClick={() => handleAdjust(-10)}>
+                  -10
+                </button>
+                <button className="pop-qty-btn minus" onClick={() => handleAdjust(-1)}>
+                  -1
+                </button>
+                <input
+                  type="number"
+                  className="pop-qty-input"
+                  value={quantity}
+                  onChange={handleInputChange}
+                  min={1}
+                  max={remainingQty}
+                />
+                <button className="pop-qty-btn" onClick={() => handleAdjust(1)}>
+                  +1
+                </button>
+                <button className="pop-qty-btn" onClick={() => handleAdjust(10)}>
+                  +10
+                </button>
+              </div>
+              <div className="pop-qty-hint">미접수 수량: {remainingQty} EA</div>
+            </div>
+
+            {/* 분할접수 안내 */}
+            {quantity < remainingQty && (
+              <div className="pop-accept-info-box">
+                <span className="info-icon">
+                  <Info size={20} />
+                </span>
+                <div>
+                  <div className="info-title">분할 접수</div>
+                  <div className="info-desc">
+                    {quantity}EA 접수 후 {remainingQty - quantity}EA가 접수대기 상태로 남습니다.
+                  </div>
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+
+        <div className="pop-modal-footer">
+          <button className="pop-btn pop-btn-outline" style={{ flex: 1 }} onClick={onClose}>
+            취소
+          </button>
+          <button
+            className="pop-btn pop-btn-primary"
+            style={{ flex: 1 }}
+            onClick={handleConfirm}
+            disabled={quantity <= 0}
+          >
+            접수 ({quantity} EA)
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
diff --git a/frontend/components/pop/PopApp.tsx b/frontend/components/pop/PopApp.tsx
new file mode 100644
index 00000000..b1eb6551
--- /dev/null
+++ b/frontend/components/pop/PopApp.tsx
@@ -0,0 +1,462 @@
+"use client";
+
+import React, { useState, useEffect, useCallback } from "react";
+import "./styles.css";
+
+import {
+  AppState,
+  ModalState,
+  PanelState,
+  StatusType,
+  ProductionType,
+  WorkOrder,
+  WorkStep,
+  Equipment,
+  Process,
+} from "./types";
+import { WORK_ORDERS, EQUIPMENTS, PROCESSES, WORK_STEP_TEMPLATES, STATUS_TEXT } from "./data";
+
+import { PopHeader } from "./PopHeader";
+import { PopStatusTabs } from "./PopStatusTabs";
+import { PopWorkCard } from "./PopWorkCard";
+import { PopBottomNav } from "./PopBottomNav";
+import { PopEquipmentModal } from "./PopEquipmentModal";
+import { PopProcessModal } from "./PopProcessModal";
+import { PopAcceptModal } from "./PopAcceptModal";
+import { PopSettingsModal } from "./PopSettingsModal";
+import { PopProductionPanel } from "./PopProductionPanel";
+
+export function PopApp() {
+  // 앱 상태
+  const [appState, setAppState] = useState<AppState>({
+    currentStatus: "waiting",
+    selectedEquipment: null,
+    selectedProcess: null,
+    selectedWorkOrder: null,
+    showMyWorkOnly: false,
+    currentWorkSteps: [],
+    currentStepIndex: 0,
+    currentProductionType: "work-order",
+    selectionMode: "single",
+    completionAction: "close",
+    acceptTargetWorkOrder: null,
+    acceptQuantity: 0,
+    theme: "dark",
+  });
+
+  // 모달 상태
+  const [modalState, setModalState] = useState<ModalState>({
+    equipment: false,
+    process: false,
+    accept: false,
+    settings: false,
+  });
+
+  // 패널 상태
+  const [panelState, setPanelState] = useState<PanelState>({
+    production: false,
+  });
+
+  // 현재 시간 (hydration 에러 방지를 위해 초기값 null)
+  const [currentDateTime, setCurrentDateTime] = useState<Date | null>(null);
+  const [isClient, setIsClient] = useState(false);
+
+  // 작업지시 목록 (상태 변경을 위해 로컬 상태로 관리)
+  const [workOrders, setWorkOrders] = useState<WorkOrder[]>(WORK_ORDERS);
+
+  // 클라이언트 마운트 확인 및 시계 업데이트
+  useEffect(() => {
+    setIsClient(true);
+    setCurrentDateTime(new Date());
+    
+    const timer = setInterval(() => {
+      setCurrentDateTime(new Date());
+    }, 1000);
+    return () => clearInterval(timer);
+  }, []);
+
+  // 로컬 스토리지에서 설정 로드
+  useEffect(() => {
+    const savedSelectionMode = localStorage.getItem("selectionMode") as "single" | "multi" | null;
+    const savedCompletionAction = localStorage.getItem("completionAction") as "close" | "stay" | null;
+    const savedTheme = localStorage.getItem("popTheme") as "dark" | "light" | null;
+
+    setAppState((prev) => ({
+      ...prev,
+      selectionMode: savedSelectionMode || "single",
+      completionAction: savedCompletionAction || "close",
+      theme: savedTheme || "dark",
+    }));
+  }, []);
+
+  // 상태별 카운트 계산
+  const getStatusCounts = useCallback(() => {
+    const myProcessId = appState.selectedProcess?.id;
+
+    let waitingCount = 0;
+    let pendingAcceptCount = 0;
+    let inProgressCount = 0;
+    let completedCount = 0;
+
+    workOrders.forEach((wo) => {
+      if (!wo.processFlow) return;
+
+      const myProcessIndex = myProcessId
+        ? wo.processFlow.findIndex((step) => step.id === myProcessId)
+        : -1;
+
+      if (wo.status === "completed") {
+        completedCount++;
+      } else if (wo.status === "in-progress" && wo.accepted) {
+        inProgressCount++;
+      } else if (myProcessIndex >= 0) {
+        const currentProcessIndex = wo.currentProcessIndex || 0;
+        const myStep = wo.processFlow[myProcessIndex];
+
+        if (currentProcessIndex < myProcessIndex) {
+          waitingCount++;
+        } else if (currentProcessIndex === myProcessIndex && myStep.status !== "completed") {
+          pendingAcceptCount++;
+        } else if (myStep.status === "completed") {
+          completedCount++;
+        }
+      } else {
+        if (wo.status === "waiting") waitingCount++;
+        else if (wo.status === "in-progress") inProgressCount++;
+      }
+    });
+
+    return { waitingCount, pendingAcceptCount, inProgressCount, completedCount };
+  }, [workOrders, appState.selectedProcess]);
+
+  // 필터링된 작업 목록
+  const getFilteredWorkOrders = useCallback(() => {
+    const myProcessId = appState.selectedProcess?.id;
+    let filtered: WorkOrder[] = [];
+
+    workOrders.forEach((wo) => {
+      if (!wo.processFlow) return;
+
+      const myProcessIndex = myProcessId
+        ? wo.processFlow.findIndex((step) => step.id === myProcessId)
+        : -1;
+      const currentProcessIndex = wo.currentProcessIndex || 0;
+      const myStep = myProcessIndex >= 0 ? wo.processFlow[myProcessIndex] : null;
+
+      switch (appState.currentStatus) {
+        case "waiting":
+          if (myProcessIndex >= 0 && currentProcessIndex < myProcessIndex) {
+            filtered.push(wo);
+          } else if (!myProcessId && wo.status === "waiting") {
+            filtered.push(wo);
+          }
+          break;
+
+        case "pending-accept":
+          if (
+            myProcessIndex >= 0 &&
+            currentProcessIndex === myProcessIndex &&
+            myStep &&
+            myStep.status !== "completed" &&
+            !wo.accepted
+          ) {
+            filtered.push(wo);
+          }
+          break;
+
+        case "in-progress":
+          if (wo.accepted && wo.status === "in-progress") {
+            filtered.push(wo);
+          } else if (!myProcessId && wo.status === "in-progress") {
+            filtered.push(wo);
+          }
+          break;
+
+        case "completed":
+          if (wo.status === "completed") {
+            filtered.push(wo);
+          } else if (myStep && myStep.status === "completed") {
+            filtered.push(wo);
+          }
+          break;
+      }
+    });
+
+    // 내 작업만 보기 필터
+    if (appState.showMyWorkOnly && myProcessId) {
+      filtered = filtered.filter((wo) => {
+        const mySteps = wo.processFlow.filter((step) => step.id === myProcessId);
+        if (mySteps.length === 0) return false;
+        return !mySteps.every((step) => step.status === "completed");
+      });
+    }
+
+    return filtered;
+  }, [workOrders, appState.currentStatus, appState.selectedProcess, appState.showMyWorkOnly]);
+
+  // 상태 탭 변경
+  const handleStatusChange = (status: StatusType) => {
+    setAppState((prev) => ({ ...prev, currentStatus: status }));
+  };
+
+  // 생산 유형 변경
+  const handleProductionTypeChange = (type: ProductionType) => {
+    setAppState((prev) => ({ ...prev, currentProductionType: type }));
+  };
+
+  // 내 작업만 보기 토글
+  const handleMyWorkToggle = () => {
+    setAppState((prev) => ({ ...prev, showMyWorkOnly: !prev.showMyWorkOnly }));
+  };
+
+  // 테마 토글
+  const handleThemeToggle = () => {
+    const newTheme = appState.theme === "dark" ? "light" : "dark";
+    setAppState((prev) => ({ ...prev, theme: newTheme }));
+    localStorage.setItem("popTheme", newTheme);
+  };
+
+  // 모달 열기/닫기
+  const openModal = (type: keyof ModalState) => {
+    setModalState((prev) => ({ ...prev, [type]: true }));
+  };
+
+  const closeModal = (type: keyof ModalState) => {
+    setModalState((prev) => ({ ...prev, [type]: false }));
+  };
+
+  // 설비 선택
+  const handleEquipmentSelect = (equipment: Equipment) => {
+    setAppState((prev) => ({
+      ...prev,
+      selectedEquipment: equipment,
+      // 공정이 1개면 자동 선택
+      selectedProcess:
+        equipment.processIds.length === 1
+          ? PROCESSES.find((p) => p.id === equipment.processIds[0]) || null
+          : null,
+    }));
+  };
+
+  // 공정 선택
+  const handleProcessSelect = (process: Process) => {
+    setAppState((prev) => ({ ...prev, selectedProcess: process }));
+  };
+
+  // 작업 접수 모달 열기
+  const handleOpenAcceptModal = (workOrder: WorkOrder) => {
+    const acceptedQty = workOrder.acceptedQuantity || 0;
+    const remainingQty = workOrder.orderQuantity - acceptedQty;
+
+    setAppState((prev) => ({
+      ...prev,
+      acceptTargetWorkOrder: workOrder,
+      acceptQuantity: remainingQty,
+    }));
+    openModal("accept");
+  };
+
+  // 접수 확인
+  const handleConfirmAccept = (quantity: number) => {
+    if (!appState.acceptTargetWorkOrder) return;
+
+    setWorkOrders((prev) =>
+      prev.map((wo) => {
+        if (wo.id === appState.acceptTargetWorkOrder!.id) {
+          const previousAccepted = wo.acceptedQuantity || 0;
+          const newAccepted = previousAccepted + quantity;
+          return {
+            ...wo,
+            acceptedQuantity: newAccepted,
+            remainingQuantity: wo.orderQuantity - newAccepted,
+            accepted: true,
+            status: "in-progress" as const,
+            isPartialAccept: newAccepted < wo.orderQuantity,
+          };
+        }
+        return wo;
+      })
+    );
+
+    closeModal("accept");
+    setAppState((prev) => ({
+      ...prev,
+      acceptTargetWorkOrder: null,
+      acceptQuantity: 0,
+    }));
+  };
+
+  // 접수 취소
+  const handleCancelAccept = (workOrderId: string) => {
+    setWorkOrders((prev) =>
+      prev.map((wo) => {
+        if (wo.id === workOrderId) {
+          return {
+            ...wo,
+            accepted: false,
+            acceptedQuantity: 0,
+            remainingQuantity: wo.orderQuantity,
+            isPartialAccept: false,
+            status: "waiting" as const,
+          };
+        }
+        return wo;
+      })
+    );
+  };
+
+  // 생산진행 패널 열기
+  const handleOpenProductionPanel = (workOrder: WorkOrder) => {
+    const template = WORK_STEP_TEMPLATES[workOrder.process] || WORK_STEP_TEMPLATES["default"];
+    const workSteps: WorkStep[] = template.map((step) => ({
+      ...step,
+      status: "pending" as const,
+      startTime: null,
+      endTime: null,
+      data: {},
+    }));
+
+    setAppState((prev) => ({
+      ...prev,
+      selectedWorkOrder: workOrder,
+      currentWorkSteps: workSteps,
+      currentStepIndex: 0,
+    }));
+    setPanelState((prev) => ({ ...prev, production: true }));
+  };
+
+  // 생산진행 패널 닫기
+  const handleCloseProductionPanel = () => {
+    setPanelState((prev) => ({ ...prev, production: false }));
+    setAppState((prev) => ({
+      ...prev,
+      selectedWorkOrder: null,
+      currentWorkSteps: [],
+      currentStepIndex: 0,
+    }));
+  };
+
+  // 설정 저장
+  const handleSaveSettings = (selectionMode: "single" | "multi", completionAction: "close" | "stay") => {
+    setAppState((prev) => ({ ...prev, selectionMode, completionAction }));
+    localStorage.setItem("selectionMode", selectionMode);
+    localStorage.setItem("completionAction", completionAction);
+    closeModal("settings");
+  };
+
+  const statusCounts = getStatusCounts();
+  const filteredWorkOrders = getFilteredWorkOrders();
+
+  return (
+    <div className={`pop-container ${appState.theme === "light" ? "light" : ""}`}>
+      <div className="pop-app">
+        {/* 헤더 */}
+        <PopHeader
+          currentDateTime={currentDateTime || new Date()}
+          productionType={appState.currentProductionType}
+          selectedEquipment={appState.selectedEquipment}
+          selectedProcess={appState.selectedProcess}
+          showMyWorkOnly={appState.showMyWorkOnly}
+          theme={appState.theme}
+          onProductionTypeChange={handleProductionTypeChange}
+          onEquipmentClick={() => openModal("equipment")}
+          onProcessClick={() => openModal("process")}
+          onMyWorkToggle={handleMyWorkToggle}
+          onSearchClick={() => {
+            /* 조회 */
+          }}
+          onSettingsClick={() => openModal("settings")}
+          onThemeToggle={handleThemeToggle}
+        />
+
+        {/* 상태 탭 */}
+        <PopStatusTabs
+          currentStatus={appState.currentStatus}
+          counts={statusCounts}
+          onStatusChange={handleStatusChange}
+        />
+
+        {/* 메인 콘텐츠 */}
+        <div className="pop-main-content">
+          {filteredWorkOrders.length === 0 ? (
+            <div className="pop-empty-state">
+              <div className="pop-empty-state-text">작업이 없습니다</div>
+              <div className="pop-empty-state-desc">
+                {appState.currentStatus === "waiting" && "대기 중인 작업이 없습니다"}
+                {appState.currentStatus === "pending-accept" && "접수 대기 작업이 없습니다"}
+                {appState.currentStatus === "in-progress" && "진행 중인 작업이 없습니다"}
+                {appState.currentStatus === "completed" && "완료된 작업이 없습니다"}
+              </div>
+            </div>
+          ) : (
+            <div className="pop-work-list">
+              {filteredWorkOrders.map((workOrder) => (
+                <PopWorkCard
+                  key={workOrder.id}
+                  workOrder={workOrder}
+                  currentStatus={appState.currentStatus}
+                  selectedProcess={appState.selectedProcess}
+                  onAccept={() => handleOpenAcceptModal(workOrder)}
+                  onCancelAccept={() => handleCancelAccept(workOrder.id)}
+                  onStartProduction={() => handleOpenProductionPanel(workOrder)}
+                  onClick={() => handleOpenProductionPanel(workOrder)}
+                />
+              ))}
+            </div>
+          )}
+        </div>
+
+        {/* 하단 네비게이션 */}
+        <PopBottomNav />
+      </div>
+
+      {/* 모달들 */}
+      <PopEquipmentModal
+        isOpen={modalState.equipment}
+        equipments={EQUIPMENTS}
+        selectedEquipment={appState.selectedEquipment}
+        onSelect={handleEquipmentSelect}
+        onClose={() => closeModal("equipment")}
+      />
+
+      <PopProcessModal
+        isOpen={modalState.process}
+        selectedEquipment={appState.selectedEquipment}
+        selectedProcess={appState.selectedProcess}
+        processes={PROCESSES}
+        onSelect={handleProcessSelect}
+        onClose={() => closeModal("process")}
+      />
+
+      <PopAcceptModal
+        isOpen={modalState.accept}
+        workOrder={appState.acceptTargetWorkOrder}
+        quantity={appState.acceptQuantity}
+        onQuantityChange={(qty) => setAppState((prev) => ({ ...prev, acceptQuantity: qty }))}
+        onConfirm={handleConfirmAccept}
+        onClose={() => closeModal("accept")}
+      />
+
+      <PopSettingsModal
+        isOpen={modalState.settings}
+        selectionMode={appState.selectionMode}
+        completionAction={appState.completionAction}
+        onSave={handleSaveSettings}
+        onClose={() => closeModal("settings")}
+      />
+
+      {/* 생산진행 패널 */}
+      <PopProductionPanel
+        isOpen={panelState.production}
+        workOrder={appState.selectedWorkOrder}
+        workSteps={appState.currentWorkSteps}
+        currentStepIndex={appState.currentStepIndex}
+        currentDateTime={currentDateTime || new Date()}
+        onStepChange={(index) => setAppState((prev) => ({ ...prev, currentStepIndex: index }))}
+        onStepsUpdate={(steps) => setAppState((prev) => ({ ...prev, currentWorkSteps: steps }))}
+        onClose={handleCloseProductionPanel}
+      />
+    </div>
+  );
+}
+
diff --git a/frontend/components/pop/PopBottomNav.tsx b/frontend/components/pop/PopBottomNav.tsx
new file mode 100644
index 00000000..f3fb86ae
--- /dev/null
+++ b/frontend/components/pop/PopBottomNav.tsx
@@ -0,0 +1,30 @@
+"use client";
+
+import React from "react";
+import { Clock, ClipboardList } from "lucide-react";
+
+export function PopBottomNav() {
+  const handleHistoryClick = () => {
+    console.log("작업이력 클릭");
+    // TODO: 작업이력 페이지 이동 또는 모달 열기
+  };
+
+  const handleRegisterClick = () => {
+    console.log("실적등록 클릭");
+    // TODO: 실적등록 모달 열기
+  };
+
+  return (
+    <div className="pop-bottom-nav">
+      <button className="pop-nav-btn secondary" onClick={handleHistoryClick}>
+        <Clock size={18} />
+        작업이력
+      </button>
+      <button className="pop-nav-btn primary" onClick={handleRegisterClick}>
+        <ClipboardList size={18} />
+        실적등록
+      </button>
+    </div>
+  );
+}
+
diff --git a/frontend/components/pop/PopEquipmentModal.tsx b/frontend/components/pop/PopEquipmentModal.tsx
new file mode 100644
index 00000000..cfae902f
--- /dev/null
+++ b/frontend/components/pop/PopEquipmentModal.tsx
@@ -0,0 +1,80 @@
+"use client";
+
+import React from "react";
+import { X } from "lucide-react";
+import { Equipment } from "./types";
+
+interface PopEquipmentModalProps {
+  isOpen: boolean;
+  equipments: Equipment[];
+  selectedEquipment: Equipment | null;
+  onSelect: (equipment: Equipment) => void;
+  onClose: () => void;
+}
+
+export function PopEquipmentModal({
+  isOpen,
+  equipments,
+  selectedEquipment,
+  onSelect,
+  onClose,
+}: PopEquipmentModalProps) {
+  const [tempSelected, setTempSelected] = React.useState<Equipment | null>(selectedEquipment);
+
+  React.useEffect(() => {
+    setTempSelected(selectedEquipment);
+  }, [selectedEquipment, isOpen]);
+
+  const handleConfirm = () => {
+    if (tempSelected) {
+      onSelect(tempSelected);
+      onClose();
+    }
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="pop-modal-overlay active" onClick={(e) => e.target === e.currentTarget && onClose()}>
+      <div className="pop-modal">
+        <div className="pop-modal-header">
+          <h2 className="pop-modal-title">설비 선택</h2>
+          <button className="pop-modal-close" onClick={onClose}>
+            <X size={16} />
+          </button>
+        </div>
+
+        <div className="pop-modal-body">
+          <div className="pop-selection-grid">
+            {equipments.map((equip) => (
+              <div
+                key={equip.id}
+                className={`pop-selection-card ${tempSelected?.id === equip.id ? "selected" : ""}`}
+                onClick={() => setTempSelected(equip)}
+              >
+                <div className="pop-selection-card-check">✓</div>
+                <div className="pop-selection-card-name">{equip.name}</div>
+                <div className="pop-selection-card-info">{equip.processNames.join(", ")}</div>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        <div className="pop-modal-footer">
+          <button className="pop-btn pop-btn-outline" style={{ flex: 1 }} onClick={onClose}>
+            취소
+          </button>
+          <button
+            className="pop-btn pop-btn-primary"
+            style={{ flex: 1 }}
+            onClick={handleConfirm}
+            disabled={!tempSelected}
+          >
+            확인
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
diff --git a/frontend/components/pop/PopHeader.tsx b/frontend/components/pop/PopHeader.tsx
new file mode 100644
index 00000000..b2266eef
--- /dev/null
+++ b/frontend/components/pop/PopHeader.tsx
@@ -0,0 +1,123 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+import { Moon, Sun } from "lucide-react";
+import { Equipment, Process, ProductionType } from "./types";
+
+interface PopHeaderProps {
+  currentDateTime: Date;
+  productionType: ProductionType;
+  selectedEquipment: Equipment | null;
+  selectedProcess: Process | null;
+  showMyWorkOnly: boolean;
+  theme: "dark" | "light";
+  onProductionTypeChange: (type: ProductionType) => void;
+  onEquipmentClick: () => void;
+  onProcessClick: () => void;
+  onMyWorkToggle: () => void;
+  onSearchClick: () => void;
+  onSettingsClick: () => void;
+  onThemeToggle: () => void;
+}
+
+export function PopHeader({
+  currentDateTime,
+  productionType,
+  selectedEquipment,
+  selectedProcess,
+  showMyWorkOnly,
+  theme,
+  onProductionTypeChange,
+  onEquipmentClick,
+  onProcessClick,
+  onMyWorkToggle,
+  onSearchClick,
+  onSettingsClick,
+  onThemeToggle,
+}: PopHeaderProps) {
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  const formatDate = (date: Date) => {
+    const year = date.getFullYear();
+    const month = String(date.getMonth() + 1).padStart(2, "0");
+    const day = String(date.getDate()).padStart(2, "0");
+    return `${year}-${month}-${day}`;
+  };
+
+  const formatTime = (date: Date) => {
+    const hours = String(date.getHours()).padStart(2, "0");
+    const minutes = String(date.getMinutes()).padStart(2, "0");
+    return `${hours}:${minutes}`;
+  };
+
+  return (
+    <div className="pop-header-container">
+      {/* 1행: 날짜/시간 + 테마 토글 + 작업지시/원자재 */}
+      <div className="pop-top-bar row-1">
+        <div className="pop-datetime">
+          <span className="pop-date">{mounted ? formatDate(currentDateTime) : "----.--.--"}</span>
+          <span className="pop-time">{mounted ? formatTime(currentDateTime) : "--:--"}</span>
+        </div>
+
+        {/* 테마 토글 버튼 */}
+        <button className="pop-theme-toggle-inline" onClick={onThemeToggle} title="테마 변경">
+          {theme === "dark" ? <Sun size={18} /> : <Moon size={18} />}
+        </button>
+
+        <div className="pop-spacer" />
+
+        <div className="pop-type-buttons">
+          <button
+            className={`pop-type-btn ${productionType === "work-order" ? "active" : ""}`}
+            onClick={() => onProductionTypeChange("work-order")}
+          >
+            작업지시
+          </button>
+          <button
+            className={`pop-type-btn ${productionType === "material" ? "active" : ""}`}
+            onClick={() => onProductionTypeChange("material")}
+          >
+            원자재
+          </button>
+        </div>
+      </div>
+
+      {/* 2행: 필터 버튼들 */}
+      <div className="pop-top-bar row-2">
+        <button
+          className={`pop-filter-btn ${selectedEquipment ? "active" : ""}`}
+          onClick={onEquipmentClick}
+        >
+          <span>{selectedEquipment?.name || "설비"}</span>
+        </button>
+        <button
+          className={`pop-filter-btn ${selectedProcess ? "active" : ""}`}
+          onClick={onProcessClick}
+          disabled={!selectedEquipment}
+        >
+          <span>{selectedProcess?.name || "공정"}</span>
+        </button>
+        <button
+          className={`pop-filter-btn ${showMyWorkOnly ? "active" : ""}`}
+          onClick={onMyWorkToggle}
+        >
+          내 작업
+        </button>
+
+        <div className="pop-spacer" />
+
+        <button className="pop-filter-btn primary" onClick={onSearchClick}>
+          조회
+        </button>
+        <button className="pop-filter-btn" onClick={onSettingsClick}>
+          설정
+        </button>
+      </div>
+    </div>
+  );
+}
+
diff --git a/frontend/components/pop/PopProcessModal.tsx b/frontend/components/pop/PopProcessModal.tsx
new file mode 100644
index 00000000..74f72c7e
--- /dev/null
+++ b/frontend/components/pop/PopProcessModal.tsx
@@ -0,0 +1,92 @@
+"use client";
+
+import React from "react";
+import { X } from "lucide-react";
+import { Equipment, Process } from "./types";
+
+interface PopProcessModalProps {
+  isOpen: boolean;
+  selectedEquipment: Equipment | null;
+  selectedProcess: Process | null;
+  processes: Process[];
+  onSelect: (process: Process) => void;
+  onClose: () => void;
+}
+
+export function PopProcessModal({
+  isOpen,
+  selectedEquipment,
+  selectedProcess,
+  processes,
+  onSelect,
+  onClose,
+}: PopProcessModalProps) {
+  const [tempSelected, setTempSelected] = React.useState<Process | null>(selectedProcess);
+
+  React.useEffect(() => {
+    setTempSelected(selectedProcess);
+  }, [selectedProcess, isOpen]);
+
+  const handleConfirm = () => {
+    if (tempSelected) {
+      onSelect(tempSelected);
+      onClose();
+    }
+  };
+
+  if (!isOpen || !selectedEquipment) return null;
+
+  // 선택된 설비의 공정만 필터링
+  const availableProcesses = selectedEquipment.processIds.map((processId, index) => {
+    const process = processes.find((p) => p.id === processId);
+    return {
+      id: processId,
+      name: selectedEquipment.processNames[index],
+      code: process?.code || "",
+    };
+  });
+
+  return (
+    <div className="pop-modal-overlay active" onClick={(e) => e.target === e.currentTarget && onClose()}>
+      <div className="pop-modal">
+        <div className="pop-modal-header">
+          <h2 className="pop-modal-title">공정 선택</h2>
+          <button className="pop-modal-close" onClick={onClose}>
+            <X size={16} />
+          </button>
+        </div>
+
+        <div className="pop-modal-body">
+          <div className="pop-selection-grid">
+            {availableProcesses.map((process) => (
+              <div
+                key={process.id}
+                className={`pop-selection-card ${tempSelected?.id === process.id ? "selected" : ""}`}
+                onClick={() => setTempSelected(process as Process)}
+              >
+                <div className="pop-selection-card-check">✓</div>
+                <div className="pop-selection-card-name">{process.name}</div>
+                <div className="pop-selection-card-info">{process.code}</div>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        <div className="pop-modal-footer">
+          <button className="pop-btn pop-btn-outline" style={{ flex: 1 }} onClick={onClose}>
+            취소
+          </button>
+          <button
+            className="pop-btn pop-btn-primary"
+            style={{ flex: 1 }}
+            onClick={handleConfirm}
+            disabled={!tempSelected}
+          >
+            확인
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
diff --git a/frontend/components/pop/PopProductionPanel.tsx b/frontend/components/pop/PopProductionPanel.tsx
new file mode 100644
index 00000000..ceb1d902
--- /dev/null
+++ b/frontend/components/pop/PopProductionPanel.tsx
@@ -0,0 +1,344 @@
+"use client";
+
+import React from "react";
+import { X, Play, Square, ChevronRight } from "lucide-react";
+import { WorkOrder, WorkStep } from "./types";
+
+interface PopProductionPanelProps {
+  isOpen: boolean;
+  workOrder: WorkOrder | null;
+  workSteps: WorkStep[];
+  currentStepIndex: number;
+  currentDateTime: Date;
+  onStepChange: (index: number) => void;
+  onStepsUpdate: (steps: WorkStep[]) => void;
+  onClose: () => void;
+}
+
+export function PopProductionPanel({
+  isOpen,
+  workOrder,
+  workSteps,
+  currentStepIndex,
+  currentDateTime,
+  onStepChange,
+  onStepsUpdate,
+  onClose,
+}: PopProductionPanelProps) {
+  if (!isOpen || !workOrder) return null;
+
+  const currentStep = workSteps[currentStepIndex];
+
+  const formatDate = (date: Date) => {
+    const year = date.getFullYear();
+    const month = String(date.getMonth() + 1).padStart(2, "0");
+    const day = String(date.getDate()).padStart(2, "0");
+    return `${year}-${month}-${day}`;
+  };
+
+  const formatTime = (date: Date | null) => {
+    if (!date) return "--:--";
+    const d = new Date(date);
+    return `${String(d.getHours()).padStart(2, "0")}:${String(d.getMinutes()).padStart(2, "0")}`;
+  };
+
+  const handleStartStep = () => {
+    const newSteps = [...workSteps];
+    newSteps[currentStepIndex] = {
+      ...newSteps[currentStepIndex],
+      status: "in-progress",
+      startTime: new Date(),
+    };
+    onStepsUpdate(newSteps);
+  };
+
+  const handleEndStep = () => {
+    const newSteps = [...workSteps];
+    newSteps[currentStepIndex] = {
+      ...newSteps[currentStepIndex],
+      endTime: new Date(),
+    };
+    onStepsUpdate(newSteps);
+  };
+
+  const handleSaveAndNext = () => {
+    const newSteps = [...workSteps];
+    const step = newSteps[currentStepIndex];
+
+    // 시간 자동 설정
+    if (!step.startTime) step.startTime = new Date();
+    if (!step.endTime) step.endTime = new Date();
+    step.status = "completed";
+
+    onStepsUpdate(newSteps);
+
+    // 다음 단계로 이동
+    if (currentStepIndex < workSteps.length - 1) {
+      onStepChange(currentStepIndex + 1);
+    }
+  };
+
+  const renderStepForm = () => {
+    if (!currentStep) return null;
+
+    const isCompleted = currentStep.status === "completed";
+
+    if (currentStep.type === "work" || currentStep.type === "record") {
+      return (
+        <div className="pop-step-form-section">
+          <h4 className="pop-step-form-title">작업 내용 입력</h4>
+          <div className="pop-form-row">
+            <div className="pop-form-group">
+              <label className="pop-form-label">생산수량</label>
+              <input
+                type="number"
+                className="pop-input"
+                placeholder="0"
+                disabled={isCompleted}
+              />
+            </div>
+            <div className="pop-form-group">
+              <label className="pop-form-label">불량수량</label>
+              <input
+                type="number"
+                className="pop-input"
+                placeholder="0"
+                disabled={isCompleted}
+              />
+            </div>
+          </div>
+          <div className="pop-form-group">
+            <label className="pop-form-label">비고</label>
+            <textarea
+              className="pop-input"
+              rows={2}
+              placeholder="특이사항을 입력하세요"
+              disabled={isCompleted}
+            />
+          </div>
+        </div>
+      );
+    }
+
+    if (currentStep.type === "equipment-check" || currentStep.type === "inspection") {
+      return (
+        <div className="pop-step-form-section">
+          <h4 className="pop-step-form-title">점검 항목</h4>
+          <div className="pop-checkbox-list">
+            <label className="pop-checkbox-label">
+              <input type="checkbox" className="pop-checkbox" disabled={isCompleted} />
+              <span>장비 상태 확인</span>
+            </label>
+            <label className="pop-checkbox-label">
+              <input type="checkbox" className="pop-checkbox" disabled={isCompleted} />
+              <span>안전 장비 착용</span>
+            </label>
+            <label className="pop-checkbox-label">
+              <input type="checkbox" className="pop-checkbox" disabled={isCompleted} />
+              <span>작업 환경 확인</span>
+            </label>
+          </div>
+          <div className="pop-form-group" style={{ marginTop: "var(--spacing-md)" }}>
+            <label className="pop-form-label">비고</label>
+            <textarea
+              className="pop-input"
+              rows={2}
+              placeholder="점검 결과를 입력하세요"
+              disabled={isCompleted}
+            />
+          </div>
+        </div>
+      );
+    }
+
+    return (
+      <div className="pop-step-form-section">
+        <h4 className="pop-step-form-title">작업 메모</h4>
+        <div className="pop-form-group">
+          <textarea
+            className="pop-input"
+            rows={3}
+            placeholder="메모를 입력하세요"
+            disabled={isCompleted}
+          />
+        </div>
+      </div>
+    );
+  };
+
+  return (
+    <div className="pop-slide-panel active">
+      <div className="pop-slide-panel-overlay" onClick={onClose} />
+      <div className="pop-slide-panel-content">
+        {/* 헤더 */}
+        <div className="pop-slide-panel-header">
+          <div style={{ display: "flex", alignItems: "center", gap: "var(--spacing-md)" }}>
+            <h2 className="pop-slide-panel-title">생산진행</h2>
+            <span className="pop-badge pop-badge-primary">{workOrder.processName}</span>
+          </div>
+          <div style={{ display: "flex", alignItems: "center", gap: "var(--spacing-md)" }}>
+            <div className="pop-panel-datetime">
+              <span className="pop-panel-date">{formatDate(currentDateTime)}</span>
+              <span className="pop-panel-time">{formatTime(currentDateTime)}</span>
+            </div>
+            <button className="pop-icon-btn" onClick={onClose}>
+              <X size={20} />
+            </button>
+          </div>
+        </div>
+
+        {/* 작업지시 정보 */}
+        <div className="pop-work-order-info-section">
+          <div className="pop-work-order-info-card">
+            <div className="pop-work-order-info-item">
+              <span className="label">작업지시</span>
+              <span className="value primary">{workOrder.id}</span>
+            </div>
+            <div className="pop-work-order-info-item">
+              <span className="label">품목</span>
+              <span className="value">{workOrder.itemName}</span>
+            </div>
+            <div className="pop-work-order-info-item">
+              <span className="label">규격</span>
+              <span className="value">{workOrder.spec}</span>
+            </div>
+            <div className="pop-work-order-info-item">
+              <span className="label">지시수량</span>
+              <span className="value">{workOrder.orderQuantity} EA</span>
+            </div>
+            <div className="pop-work-order-info-item">
+              <span className="label">생산수량</span>
+              <span className="value">{workOrder.producedQuantity} EA</span>
+            </div>
+            <div className="pop-work-order-info-item">
+              <span className="label">납기일</span>
+              <span className="value">{workOrder.dueDate}</span>
+            </div>
+          </div>
+        </div>
+
+        {/* 바디 */}
+        <div className="pop-slide-panel-body">
+          <div className="pop-panel-body-content">
+            {/* 작업순서 사이드바 */}
+            <div className="pop-work-steps-sidebar">
+              <div className="pop-work-steps-header">작업순서</div>
+              <div className="pop-work-steps-list">
+                {workSteps.map((step, index) => (
+                  <div
+                    key={step.id}
+                    className={`pop-work-step-item ${index === currentStepIndex ? "active" : ""} ${step.status}`}
+                    onClick={() => onStepChange(index)}
+                  >
+                    <div className="pop-work-step-number">{index + 1}</div>
+                    <div className="pop-work-step-info">
+                      <div className="pop-work-step-name">{step.name}</div>
+                      <div className="pop-work-step-time">
+                        {formatTime(step.startTime)} ~ {formatTime(step.endTime)}
+                      </div>
+                    </div>
+                    <span className={`pop-work-step-status ${step.status}`}>
+                      {step.status === "completed" ? "완료" : step.status === "in-progress" ? "진행중" : "대기"}
+                    </span>
+                  </div>
+                ))}
+              </div>
+            </div>
+
+            {/* 작업 콘텐츠 영역 */}
+            <div className="pop-work-content-area">
+              {currentStep && (
+                <>
+                  {/* 스텝 헤더 */}
+                  <div className="pop-step-header">
+                    <h3 className="pop-step-title">{currentStep.name}</h3>
+                    <p className="pop-step-description">{currentStep.description}</p>
+                  </div>
+
+                  {/* 시간 컨트롤 */}
+                  {currentStep.status !== "completed" && (
+                    <div className="pop-step-time-controls">
+                      <button
+                        className="pop-time-control-btn start"
+                        onClick={handleStartStep}
+                        disabled={!!currentStep.startTime}
+                      >
+                        <Play size={16} />
+                        시작 {currentStep.startTime ? formatTime(currentStep.startTime) : ""}
+                      </button>
+                      <button
+                        className="pop-time-control-btn end"
+                        onClick={handleEndStep}
+                        disabled={!currentStep.startTime || !!currentStep.endTime}
+                      >
+                        <Square size={16} />
+                        종료 {currentStep.endTime ? formatTime(currentStep.endTime) : ""}
+                      </button>
+                    </div>
+                  )}
+
+                  {/* 폼 */}
+                  {renderStepForm()}
+
+                  {/* 액션 버튼 */}
+                  {currentStep.status !== "completed" && (
+                    <div style={{ marginTop: "auto", display: "flex", gap: "var(--spacing-md)" }}>
+                      <button
+                        className="pop-btn pop-btn-outline"
+                        style={{ flex: 1 }}
+                        onClick={() => onStepChange(Math.max(0, currentStepIndex - 1))}
+                        disabled={currentStepIndex === 0}
+                      >
+                        이전
+                      </button>
+                      <button
+                        className="pop-btn pop-btn-primary"
+                        style={{ flex: 1 }}
+                        onClick={handleSaveAndNext}
+                      >
+                        {currentStepIndex === workSteps.length - 1 ? "완료" : "저장 후 다음"}
+                        <ChevronRight size={16} />
+                      </button>
+                    </div>
+                  )}
+
+                  {/* 완료 메시지 */}
+                  {currentStep.status === "completed" && (
+                    <div
+                      style={{
+                        padding: "var(--spacing-md)",
+                        background: "rgba(0, 255, 136, 0.1)",
+                        border: "1px solid rgba(0, 255, 136, 0.3)",
+                        borderRadius: "var(--radius-md)",
+                        display: "flex",
+                        alignItems: "center",
+                        gap: "var(--spacing-sm)",
+                        color: "rgb(var(--success))",
+                      }}
+                    >
+                      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                        <polyline points="20 6 9 17 4 12" />
+                      </svg>
+                      <span style={{ fontWeight: 600 }}>작업이 완료되었습니다</span>
+                    </div>
+                  )}
+                </>
+              )}
+            </div>
+          </div>
+        </div>
+
+        {/* 푸터 */}
+        <div className="pop-slide-panel-footer">
+          <button className="pop-btn pop-btn-outline" style={{ flex: 1 }} onClick={onClose}>
+            닫기
+          </button>
+          <button className="pop-btn pop-btn-primary" style={{ flex: 1 }}>
+            작업 완료
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
diff --git a/frontend/components/pop/PopSettingsModal.tsx b/frontend/components/pop/PopSettingsModal.tsx
new file mode 100644
index 00000000..2b385bb8
--- /dev/null
+++ b/frontend/components/pop/PopSettingsModal.tsx
@@ -0,0 +1,135 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+import { X } from "lucide-react";
+
+interface PopSettingsModalProps {
+  isOpen: boolean;
+  selectionMode: "single" | "multi";
+  completionAction: "close" | "stay";
+  onSave: (selectionMode: "single" | "multi", completionAction: "close" | "stay") => void;
+  onClose: () => void;
+}
+
+export function PopSettingsModal({
+  isOpen,
+  selectionMode,
+  completionAction,
+  onSave,
+  onClose,
+}: PopSettingsModalProps) {
+  const [tempSelectionMode, setTempSelectionMode] = useState(selectionMode);
+  const [tempCompletionAction, setTempCompletionAction] = useState(completionAction);
+
+  useEffect(() => {
+    setTempSelectionMode(selectionMode);
+    setTempCompletionAction(completionAction);
+  }, [selectionMode, completionAction, isOpen]);
+
+  const handleSave = () => {
+    onSave(tempSelectionMode, tempCompletionAction);
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="pop-modal-overlay active" onClick={(e) => e.target === e.currentTarget && onClose()}>
+      <div className="pop-modal">
+        <div className="pop-modal-header">
+          <h2 className="pop-modal-title">설정</h2>
+          <button className="pop-modal-close" onClick={onClose}>
+            <X size={16} />
+          </button>
+        </div>
+
+        <div className="pop-modal-body">
+          {/* 선택 모드 */}
+          <div className="pop-settings-section">
+            <h3 className="pop-settings-title">설비/공정 선택 모드</h3>
+            <div className="pop-mode-options">
+              <label className="pop-mode-option">
+                <input
+                  type="radio"
+                  name="selectionMode"
+                  value="single"
+                  checked={tempSelectionMode === "single"}
+                  onChange={() => setTempSelectionMode("single")}
+                />
+                <div className="pop-mode-info">
+                  <div className="pop-mode-name">단일 선택 모드</div>
+                  <div className="pop-mode-desc">
+                    설비와 공정을 선택하여 해당 작업만 표시합니다.
+                  </div>
+                </div>
+              </label>
+              <label className="pop-mode-option">
+                <input
+                  type="radio"
+                  name="selectionMode"
+                  value="multi"
+                  checked={tempSelectionMode === "multi"}
+                  onChange={() => setTempSelectionMode("multi")}
+                />
+                <div className="pop-mode-info">
+                  <div className="pop-mode-name">다중 선택 모드</div>
+                  <div className="pop-mode-desc">
+                    모든 설비/공정의 작업을 표시합니다.
+                  </div>
+                </div>
+              </label>
+            </div>
+          </div>
+
+          <div className="pop-settings-divider" />
+
+          {/* 완료 후 동작 */}
+          <div className="pop-settings-section">
+            <h3 className="pop-settings-title">작업 완료 후 동작</h3>
+            <div className="pop-mode-options">
+              <label className="pop-mode-option">
+                <input
+                  type="radio"
+                  name="completionAction"
+                  value="close"
+                  checked={tempCompletionAction === "close"}
+                  onChange={() => setTempCompletionAction("close")}
+                />
+                <div className="pop-mode-info">
+                  <div className="pop-mode-name">패널 닫기</div>
+                  <div className="pop-mode-desc">
+                    작업 완료 시 생산진행 패널을 자동으로 닫습니다.
+                  </div>
+                </div>
+              </label>
+              <label className="pop-mode-option">
+                <input
+                  type="radio"
+                  name="completionAction"
+                  value="stay"
+                  checked={tempCompletionAction === "stay"}
+                  onChange={() => setTempCompletionAction("stay")}
+                />
+                <div className="pop-mode-info">
+                  <div className="pop-mode-name">패널 유지</div>
+                  <div className="pop-mode-desc">
+                    작업 완료 후에도 패널을 유지합니다.
+                  </div>
+                </div>
+              </label>
+            </div>
+          </div>
+        </div>
+
+        <div className="pop-modal-footer">
+          <button className="pop-btn pop-btn-outline" style={{ flex: 1 }} onClick={onClose}>
+            취소
+          </button>
+          <button className="pop-btn pop-btn-primary" style={{ flex: 1 }} onClick={handleSave}>
+            저장
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
diff --git a/frontend/components/pop/PopStatusTabs.tsx b/frontend/components/pop/PopStatusTabs.tsx
new file mode 100644
index 00000000..d9c610fb
--- /dev/null
+++ b/frontend/components/pop/PopStatusTabs.tsx
@@ -0,0 +1,48 @@
+"use client";
+
+import React from "react";
+import { StatusType } from "./types";
+
+interface StatusCounts {
+  waitingCount: number;
+  pendingAcceptCount: number;
+  inProgressCount: number;
+  completedCount: number;
+}
+
+interface PopStatusTabsProps {
+  currentStatus: StatusType;
+  counts: StatusCounts;
+  onStatusChange: (status: StatusType) => void;
+}
+
+const STATUS_CONFIG: {
+  id: StatusType;
+  label: string;
+  detail: string;
+  countKey: keyof StatusCounts;
+}[] = [
+  { id: "waiting", label: "대기", detail: "내 공정 이전", countKey: "waitingCount" },
+  { id: "pending-accept", label: "접수대기", detail: "내 차례", countKey: "pendingAcceptCount" },
+  { id: "in-progress", label: "진행", detail: "작업중", countKey: "inProgressCount" },
+  { id: "completed", label: "완료", detail: "처리완료", countKey: "completedCount" },
+];
+
+export function PopStatusTabs({ currentStatus, counts, onStatusChange }: PopStatusTabsProps) {
+  return (
+    <div className="pop-status-tabs">
+      {STATUS_CONFIG.map((status) => (
+        <div
+          key={status.id}
+          className={`pop-status-tab ${currentStatus === status.id ? "active" : ""}`}
+          onClick={() => onStatusChange(status.id)}
+        >
+          <span className="pop-status-tab-label">{status.label}</span>
+          <span className="pop-status-tab-count">{counts[status.countKey]}</span>
+          <span className="pop-status-tab-detail">{status.detail}</span>
+        </div>
+      ))}
+    </div>
+  );
+}
+
diff --git a/frontend/components/pop/PopWorkCard.tsx b/frontend/components/pop/PopWorkCard.tsx
new file mode 100644
index 00000000..2e3416dd
--- /dev/null
+++ b/frontend/components/pop/PopWorkCard.tsx
@@ -0,0 +1,274 @@
+"use client";
+
+import React, { useRef, useEffect, useState } from "react";
+import { WorkOrder, Process, StatusType } from "./types";
+import { STATUS_TEXT } from "./data";
+
+interface PopWorkCardProps {
+  workOrder: WorkOrder;
+  currentStatus: StatusType;
+  selectedProcess: Process | null;
+  onAccept: () => void;
+  onCancelAccept: () => void;
+  onStartProduction: () => void;
+  onClick: () => void;
+}
+
+export function PopWorkCard({
+  workOrder,
+  currentStatus,
+  selectedProcess,
+  onAccept,
+  onCancelAccept,
+  onStartProduction,
+  onClick,
+}: PopWorkCardProps) {
+  const chipsRef = useRef<HTMLDivElement>(null);
+  const [showLeftBtn, setShowLeftBtn] = useState(false);
+  const [showRightBtn, setShowRightBtn] = useState(false);
+
+  const progress = ((workOrder.producedQuantity / workOrder.orderQuantity) * 100).toFixed(1);
+  const isReturnWork = workOrder.isReturn === true;
+
+  // 공정 스크롤 버튼 표시 여부 확인
+  const checkScrollButtons = () => {
+    const container = chipsRef.current;
+    if (!container) return;
+
+    const isScrollable = container.scrollWidth > container.clientWidth;
+    if (isScrollable) {
+      const scrollLeft = container.scrollLeft;
+      const maxScroll = container.scrollWidth - container.clientWidth;
+      setShowLeftBtn(scrollLeft > 5);
+      setShowRightBtn(scrollLeft < maxScroll - 5);
+    } else {
+      setShowLeftBtn(false);
+      setShowRightBtn(false);
+    }
+  };
+
+  // 현재 공정으로 스크롤
+  const scrollToCurrentProcess = () => {
+    const container = chipsRef.current;
+    if (!container || !workOrder.processFlow) return;
+
+    let targetIndex = -1;
+
+    // 내 공정 우선
+    if (selectedProcess) {
+      targetIndex = workOrder.processFlow.findIndex(
+        (step) =>
+          step.id === selectedProcess.id &&
+          (step.status === "current" || step.status === "pending")
+      );
+    }
+
+    // 없으면 현재 진행 중인 공정
+    if (targetIndex === -1) {
+      targetIndex = workOrder.processFlow.findIndex((step) => step.status === "current");
+    }
+
+    if (targetIndex === -1) return;
+
+    const chips = container.querySelectorAll(".pop-process-chip");
+    if (chips.length > targetIndex) {
+      const targetChip = chips[targetIndex] as HTMLElement;
+      const scrollPos =
+        targetChip.offsetLeft - container.clientWidth / 2 + targetChip.offsetWidth / 2;
+      container.scrollLeft = Math.max(0, scrollPos);
+    }
+  };
+
+  useEffect(() => {
+    scrollToCurrentProcess();
+    checkScrollButtons();
+
+    const container = chipsRef.current;
+    if (container) {
+      container.addEventListener("scroll", checkScrollButtons);
+      return () => container.removeEventListener("scroll", checkScrollButtons);
+    }
+  }, [workOrder, selectedProcess]);
+
+  const handleScroll = (direction: "left" | "right", e: React.MouseEvent) => {
+    e.stopPropagation();
+    const container = chipsRef.current;
+    if (!container) return;
+
+    const scrollAmount = 150;
+    container.scrollLeft += direction === "left" ? -scrollAmount : scrollAmount;
+    setTimeout(checkScrollButtons, 100);
+  };
+
+  // 상태 텍스트 결정
+  const statusText =
+    isReturnWork && currentStatus === "pending-accept" ? "리턴" : STATUS_TEXT[workOrder.status];
+  const statusClass = isReturnWork ? "return" : workOrder.status;
+
+  // 완료된 공정 수
+  const completedCount = workOrder.processFlow.filter((s) => s.status === "completed").length;
+  const totalCount = workOrder.processFlow.length;
+
+  return (
+    <div
+      className={`pop-work-card ${isReturnWork ? "return-card" : ""}`}
+      onClick={onClick}
+    >
+      {/* 헤더 */}
+      <div className="pop-work-card-header">
+        <div style={{ display: "flex", alignItems: "center", gap: "var(--spacing-sm)", flex: 1, flexWrap: "wrap" }}>
+          <span className="pop-work-number">{workOrder.id}</span>
+          {isReturnWork && <span className="pop-return-badge">리턴</span>}
+          {workOrder.acceptedQuantity && workOrder.acceptedQuantity > 0 && workOrder.acceptedQuantity < workOrder.orderQuantity && (
+            <span className="pop-partial-badge">
+              {workOrder.acceptedQuantity}/{workOrder.orderQuantity} 접수
+            </span>
+          )}
+        </div>
+        <span className={`pop-work-status ${statusClass}`}>{statusText}</span>
+
+        {/* 액션 버튼 */}
+        {currentStatus === "pending-accept" && (
+          <div className="pop-work-card-actions">
+            <button
+              className="pop-btn pop-btn-sm pop-btn-primary"
+              onClick={(e) => {
+                e.stopPropagation();
+                onAccept();
+              }}
+            >
+              접수
+            </button>
+          </div>
+        )}
+        {currentStatus === "in-progress" && (
+          <div className="pop-work-card-actions">
+            <button
+              className="pop-btn pop-btn-sm pop-btn-ghost"
+              onClick={(e) => {
+                e.stopPropagation();
+                onCancelAccept();
+              }}
+            >
+              접수취소
+            </button>
+            <button
+              className="pop-btn pop-btn-sm pop-btn-success"
+              onClick={(e) => {
+                e.stopPropagation();
+                onStartProduction();
+              }}
+            >
+              생산진행
+            </button>
+          </div>
+        )}
+      </div>
+
+      {/* 리턴 정보 배너 */}
+      {isReturnWork && currentStatus === "pending-accept" && (
+        <div className="pop-return-banner">
+          <span className="pop-return-banner-icon">🔄</span>
+          <div>
+            <div className="pop-return-banner-title">
+              {workOrder.returnFromProcessName} 공정에서 리턴됨
+            </div>
+            <div className="pop-return-banner-reason">{workOrder.returnReason || "사유 없음"}</div>
+          </div>
+        </div>
+      )}
+
+      {/* 바디 */}
+      <div className="pop-work-card-body">
+        <div className="pop-work-info-line">
+          <div className="pop-work-info-item">
+            <span className="pop-work-info-label">품목</span>
+            <span className="pop-work-info-value">{workOrder.itemName}</span>
+          </div>
+          <div className="pop-work-info-item">
+            <span className="pop-work-info-label">규격</span>
+            <span className="pop-work-info-value">{workOrder.spec}</span>
+          </div>
+          <div className="pop-work-info-item">
+            <span className="pop-work-info-label">지시</span>
+            <span className="pop-work-info-value">{workOrder.orderQuantity}</span>
+          </div>
+          <div className="pop-work-info-item">
+            <span className="pop-work-info-label">납기</span>
+            <span className="pop-work-info-value">{workOrder.dueDate}</span>
+          </div>
+        </div>
+      </div>
+
+      {/* 공정 타임라인 */}
+      <div className="pop-process-timeline">
+        <div className="pop-process-bar">
+          <div className="pop-process-bar-header">
+            <span className="pop-process-bar-label">공정 진행</span>
+            <span className="pop-process-bar-count">
+              <span>{completedCount}</span>/{totalCount}
+            </span>
+          </div>
+          <div className="pop-process-segments">
+            {workOrder.processFlow.map((step, index) => {
+              let segmentClass = "";
+              if (step.status === "completed") segmentClass = "done";
+              else if (step.status === "current") segmentClass = "current";
+              if (selectedProcess && step.id === selectedProcess.id) {
+                segmentClass += " my-work";
+              }
+              return <div key={index} className={`pop-process-segment ${segmentClass}`} />;
+            })}
+          </div>
+        </div>
+
+        <div className="pop-process-chips-container">
+          <button
+            className={`pop-process-scroll-btn left ${!showLeftBtn ? "hidden" : ""}`}
+            onClick={(e) => handleScroll("left", e)}
+          >
+            ‹
+          </button>
+          <div className="pop-process-chips" ref={chipsRef}>
+            {workOrder.processFlow.map((step, index) => {
+              let chipClass = "";
+              if (step.status === "completed") chipClass = "done";
+              else if (step.status === "current") chipClass = "current";
+              if (selectedProcess && step.id === selectedProcess.id) {
+                chipClass += " my-work";
+              }
+              return (
+                <div key={index} className={`pop-process-chip ${chipClass}`}>
+                  <span className="pop-chip-num">{index + 1}</span>
+                  {step.name}
+                </div>
+              );
+            })}
+          </div>
+          <button
+            className={`pop-process-scroll-btn right ${!showRightBtn ? "hidden" : ""}`}
+            onClick={(e) => handleScroll("right", e)}
+          >
+            ›
+          </button>
+        </div>
+      </div>
+
+      {/* 진행률 바 */}
+      {workOrder.status !== "completed" && (
+        <div className="pop-work-progress">
+          <div className="pop-progress-info">
+            <span className="pop-progress-text">
+              {workOrder.producedQuantity} / {workOrder.orderQuantity} EA
+            </span>
+            <span className="pop-progress-percent">{progress}%</span>
+          </div>
+          <div className="pop-progress-bar">
+            <div className="pop-progress-fill" style={{ width: `${progress}%` }} />
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
diff --git a/frontend/components/pop/dashboard/ActivityList.tsx b/frontend/components/pop/dashboard/ActivityList.tsx
new file mode 100644
index 00000000..e0efd123
--- /dev/null
+++ b/frontend/components/pop/dashboard/ActivityList.tsx
@@ -0,0 +1,35 @@
+"use client";
+
+import React from "react";
+import { ActivityItem } from "./types";
+
+interface ActivityListProps {
+  items: ActivityItem[];
+  onMoreClick: () => void;
+}
+
+export function ActivityList({ items, onMoreClick }: ActivityListProps) {
+  return (
+    <div className="pop-dashboard-card">
+      <div className="pop-dashboard-card-header">
+        <h3 className="pop-dashboard-card-title">최근 활동</h3>
+        <button className="pop-dashboard-btn-more" onClick={onMoreClick}>
+          전체보기
+        </button>
+      </div>
+      <div className="pop-dashboard-activity-list">
+        {items.map((item) => (
+          <div key={item.id} className="pop-dashboard-activity-item">
+            <span className="pop-dashboard-activity-time">{item.time}</span>
+            <span className={`pop-dashboard-activity-dot ${item.category}`} />
+            <div className="pop-dashboard-activity-content">
+              <div className="pop-dashboard-activity-title">{item.title}</div>
+              <div className="pop-dashboard-activity-desc">{item.description}</div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
diff --git a/frontend/components/pop/dashboard/DashboardFooter.tsx b/frontend/components/pop/dashboard/DashboardFooter.tsx
new file mode 100644
index 00000000..202427fc
--- /dev/null
+++ b/frontend/components/pop/dashboard/DashboardFooter.tsx
@@ -0,0 +1,24 @@
+"use client";
+
+import React from "react";
+
+interface DashboardFooterProps {
+  companyName: string;
+  version: string;
+  emergencyContact: string;
+}
+
+export function DashboardFooter({
+  companyName,
+  version,
+  emergencyContact,
+}: DashboardFooterProps) {
+  return (
+    <footer className="pop-dashboard-footer">
+      <span>&copy; 2024 {companyName}</span>
+      <span>Version {version}</span>
+      <span>긴급연락: {emergencyContact}</span>
+    </footer>
+  );
+}
+
diff --git a/frontend/components/pop/dashboard/DashboardHeader.tsx b/frontend/components/pop/dashboard/DashboardHeader.tsx
new file mode 100644
index 00000000..a16cbb05
--- /dev/null
+++ b/frontend/components/pop/dashboard/DashboardHeader.tsx
@@ -0,0 +1,96 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+import { Moon, Sun } from "lucide-react";
+import { WeatherInfo, UserInfo, CompanyInfo } from "./types";
+
+interface DashboardHeaderProps {
+  theme: "dark" | "light";
+  weather: WeatherInfo;
+  user: UserInfo;
+  company: CompanyInfo;
+  onThemeToggle: () => void;
+  onUserClick: () => void;
+}
+
+export function DashboardHeader({
+  theme,
+  weather,
+  user,
+  company,
+  onThemeToggle,
+  onUserClick,
+}: DashboardHeaderProps) {
+  const [mounted, setMounted] = useState(false);
+  const [currentTime, setCurrentTime] = useState(new Date());
+
+  useEffect(() => {
+    setMounted(true);
+    const timer = setInterval(() => {
+      setCurrentTime(new Date());
+    }, 1000);
+    return () => clearInterval(timer);
+  }, []);
+
+  const formatTime = (date: Date) => {
+    const hours = String(date.getHours()).padStart(2, "0");
+    const minutes = String(date.getMinutes()).padStart(2, "0");
+    const seconds = String(date.getSeconds()).padStart(2, "0");
+    return `${hours}:${minutes}:${seconds}`;
+  };
+
+  const formatDate = (date: Date) => {
+    const year = date.getFullYear();
+    const month = String(date.getMonth() + 1).padStart(2, "0");
+    const day = String(date.getDate()).padStart(2, "0");
+    return `${year}-${month}-${day}`;
+  };
+
+  return (
+    <header className="pop-dashboard-header">
+      <div className="pop-dashboard-header-left">
+        <div className="pop-dashboard-time-display">
+          <div className="pop-dashboard-time-main">
+            {mounted ? formatTime(currentTime) : "--:--:--"}
+          </div>
+          <div className="pop-dashboard-time-date">
+            {mounted ? formatDate(currentTime) : "----.--.--"}
+          </div>
+        </div>
+      </div>
+
+      <div className="pop-dashboard-header-right">
+        {/* 테마 토글 */}
+        <button
+          className="pop-dashboard-theme-toggle"
+          onClick={onThemeToggle}
+          title="테마 변경"
+        >
+          {theme === "dark" ? <Moon size={16} /> : <Sun size={16} />}
+        </button>
+
+        {/* 날씨 정보 */}
+        <div className="pop-dashboard-weather">
+          <span className="pop-dashboard-weather-temp">{weather.temp}</span>
+          <span className="pop-dashboard-weather-desc">{weather.description}</span>
+        </div>
+
+        {/* 회사 정보 */}
+        <div className="pop-dashboard-company">
+          <div className="pop-dashboard-company-name">{company.name}</div>
+          <div className="pop-dashboard-company-sub">{company.subTitle}</div>
+        </div>
+
+        {/* 사용자 배지 */}
+        <button className="pop-dashboard-user-badge" onClick={onUserClick}>
+          <div className="pop-dashboard-user-avatar">{user.avatar}</div>
+          <div className="pop-dashboard-user-text">
+            <div className="pop-dashboard-user-name">{user.name}</div>
+            <div className="pop-dashboard-user-role">{user.role}</div>
+          </div>
+        </button>
+      </div>
+    </header>
+  );
+}
+
diff --git a/frontend/components/pop/dashboard/KpiBar.tsx b/frontend/components/pop/dashboard/KpiBar.tsx
new file mode 100644
index 00000000..8d75df7d
--- /dev/null
+++ b/frontend/components/pop/dashboard/KpiBar.tsx
@@ -0,0 +1,60 @@
+"use client";
+
+import React from "react";
+import { KpiItem } from "./types";
+
+interface KpiBarProps {
+  items: KpiItem[];
+}
+
+export function KpiBar({ items }: KpiBarProps) {
+  const getStrokeDashoffset = (percentage: number) => {
+    const circumference = 264; // 2 * PI * 42
+    return circumference - (circumference * percentage) / 100;
+  };
+
+  const formatValue = (value: number) => {
+    if (value >= 1000) {
+      return value.toLocaleString();
+    }
+    return value.toString();
+  };
+
+  return (
+    <div className="pop-dashboard-kpi-bar">
+      {items.map((item) => (
+        <div key={item.id} className="pop-dashboard-kpi-item">
+          <div className="pop-dashboard-kpi-gauge">
+            <svg viewBox="0 0 100 100" width="52" height="52">
+              <circle
+                className="pop-dashboard-kpi-gauge-bg"
+                cx="50"
+                cy="50"
+                r="42"
+              />
+              <circle
+                className={`pop-dashboard-kpi-gauge-fill kpi-color-${item.color}`}
+                cx="50"
+                cy="50"
+                r="42"
+                strokeDasharray="264"
+                strokeDashoffset={getStrokeDashoffset(item.percentage)}
+              />
+            </svg>
+            <span className={`pop-dashboard-kpi-gauge-text kpi-color-${item.color}`}>
+              {item.percentage}%
+            </span>
+          </div>
+          <div className="pop-dashboard-kpi-info">
+            <div className="pop-dashboard-kpi-label">{item.label}</div>
+            <div className={`pop-dashboard-kpi-value kpi-color-${item.color}`}>
+              {formatValue(item.value)}
+              <span className="pop-dashboard-kpi-unit">{item.unit}</span>
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
diff --git a/frontend/components/pop/dashboard/MenuGrid.tsx b/frontend/components/pop/dashboard/MenuGrid.tsx
new file mode 100644
index 00000000..d921d156
--- /dev/null
+++ b/frontend/components/pop/dashboard/MenuGrid.tsx
@@ -0,0 +1,43 @@
+"use client";
+
+import React from "react";
+import { useRouter } from "next/navigation";
+import { MenuItem } from "./types";
+
+interface MenuGridProps {
+  items: MenuItem[];
+}
+
+export function MenuGrid({ items }: MenuGridProps) {
+  const router = useRouter();
+
+  const handleClick = (item: MenuItem) => {
+    if (item.href === "#") {
+      alert(`${item.title} 화면은 준비 중입니다.`);
+    } else {
+      router.push(item.href);
+    }
+  };
+
+  return (
+    <div className="pop-dashboard-menu-grid">
+      {items.map((item) => (
+        <div
+          key={item.id}
+          className={`pop-dashboard-menu-card ${item.category}`}
+          onClick={() => handleClick(item)}
+        >
+          <div className="pop-dashboard-menu-header">
+            <div className="pop-dashboard-menu-title">{item.title}</div>
+            <div className={`pop-dashboard-menu-count ${item.category}`}>
+              {item.count}
+            </div>
+          </div>
+          <div className="pop-dashboard-menu-desc">{item.description}</div>
+          <div className="pop-dashboard-menu-status">{item.status}</div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
diff --git a/frontend/components/pop/dashboard/NoticeBanner.tsx b/frontend/components/pop/dashboard/NoticeBanner.tsx
new file mode 100644
index 00000000..011142e6
--- /dev/null
+++ b/frontend/components/pop/dashboard/NoticeBanner.tsx
@@ -0,0 +1,22 @@
+"use client";
+
+import React from "react";
+
+interface NoticeBannerProps {
+  text: string;
+}
+
+export function NoticeBanner({ text }: NoticeBannerProps) {
+  return (
+    <div className="pop-dashboard-notice-banner">
+      <div className="pop-dashboard-notice-label">공지</div>
+      <div className="pop-dashboard-notice-content">
+        <div className="pop-dashboard-notice-marquee">
+          <span className="pop-dashboard-notice-text">{text}</span>
+          <span className="pop-dashboard-notice-text">{text}</span>
+        </div>
+      </div>
+    </div>
+  );
+}
+
diff --git a/frontend/components/pop/dashboard/NoticeList.tsx b/frontend/components/pop/dashboard/NoticeList.tsx
new file mode 100644
index 00000000..fdad92a7
--- /dev/null
+++ b/frontend/components/pop/dashboard/NoticeList.tsx
@@ -0,0 +1,31 @@
+"use client";
+
+import React from "react";
+import { NoticeItem } from "./types";
+
+interface NoticeListProps {
+  items: NoticeItem[];
+  onMoreClick: () => void;
+}
+
+export function NoticeList({ items, onMoreClick }: NoticeListProps) {
+  return (
+    <div className="pop-dashboard-card">
+      <div className="pop-dashboard-card-header">
+        <h3 className="pop-dashboard-card-title">공지사항</h3>
+        <button className="pop-dashboard-btn-more" onClick={onMoreClick}>
+          더보기
+        </button>
+      </div>
+      <div className="pop-dashboard-notice-list">
+        {items.map((item) => (
+          <div key={item.id} className="pop-dashboard-notice-item">
+            <div className="pop-dashboard-notice-title">{item.title}</div>
+            <div className="pop-dashboard-notice-date">{item.date}</div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
diff --git a/frontend/components/pop/dashboard/PopDashboard.tsx b/frontend/components/pop/dashboard/PopDashboard.tsx
new file mode 100644
index 00000000..dde9498b
--- /dev/null
+++ b/frontend/components/pop/dashboard/PopDashboard.tsx
@@ -0,0 +1,83 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+import { DashboardHeader } from "./DashboardHeader";
+import { NoticeBanner } from "./NoticeBanner";
+import { KpiBar } from "./KpiBar";
+import { MenuGrid } from "./MenuGrid";
+import { ActivityList } from "./ActivityList";
+import { NoticeList } from "./NoticeList";
+import { DashboardFooter } from "./DashboardFooter";
+import {
+  KPI_ITEMS,
+  MENU_ITEMS,
+  ACTIVITY_ITEMS,
+  NOTICE_ITEMS,
+  NOTICE_MARQUEE_TEXT,
+} from "./data";
+import "./dashboard.css";
+
+export function PopDashboard() {
+  const [theme, setTheme] = useState<"dark" | "light">("dark");
+
+  // 로컬 스토리지에서 테마 로드
+  useEffect(() => {
+    const savedTheme = localStorage.getItem("popTheme") as "dark" | "light" | null;
+    if (savedTheme) {
+      setTheme(savedTheme);
+    }
+  }, []);
+
+  const handleThemeToggle = () => {
+    const newTheme = theme === "dark" ? "light" : "dark";
+    setTheme(newTheme);
+    localStorage.setItem("popTheme", newTheme);
+  };
+
+  const handleUserClick = () => {
+    if (confirm("로그아웃 하시겠습니까?")) {
+      alert("로그아웃되었습니다.");
+    }
+  };
+
+  const handleActivityMore = () => {
+    alert("전체 활동 내역 화면으로 이동합니다.");
+  };
+
+  const handleNoticeMore = () => {
+    alert("전체 공지사항 화면으로 이동합니다.");
+  };
+
+  return (
+    <div className={`pop-dashboard-container ${theme === "light" ? "light" : ""}`}>
+      <div className="pop-dashboard">
+        <DashboardHeader
+          theme={theme}
+          weather={{ temp: "18°C", description: "맑음" }}
+          user={{ name: "김철수", role: "생산1팀", avatar: "김" }}
+          company={{ name: "탑씰", subTitle: "현장 관리 시스템" }}
+          onThemeToggle={handleThemeToggle}
+          onUserClick={handleUserClick}
+        />
+
+        <NoticeBanner text={NOTICE_MARQUEE_TEXT} />
+
+        <KpiBar items={KPI_ITEMS} />
+
+        <MenuGrid items={MENU_ITEMS} />
+
+        <div className="pop-dashboard-bottom-section">
+          <ActivityList items={ACTIVITY_ITEMS} onMoreClick={handleActivityMore} />
+          <NoticeList items={NOTICE_ITEMS} onMoreClick={handleNoticeMore} />
+        </div>
+
+        <DashboardFooter
+          companyName="탑씰"
+          version="1.0.0"
+          emergencyContact="042-XXX-XXXX"
+        />
+      </div>
+    </div>
+  );
+}
+
diff --git a/frontend/components/pop/dashboard/dashboard.css b/frontend/components/pop/dashboard/dashboard.css
new file mode 100644
index 00000000..a78d7926
--- /dev/null
+++ b/frontend/components/pop/dashboard/dashboard.css
@@ -0,0 +1,906 @@
+/* ============================================
+   POP 대시보드 스타일시트
+   다크 모드 (사이버펑크) + 라이트 모드 (소프트 그레이 민트)
+   ============================================ */
+
+/* ========== 다크 모드 (기본) ========== */
+.pop-dashboard-container {
+    --db-bg-page: #080c15;
+    --db-bg-card: linear-gradient(145deg, rgba(25, 35, 60, 0.9) 0%, rgba(18, 26, 47, 0.95) 100%);
+    --db-bg-card-solid: #121a2f;
+    --db-bg-card-alt: rgba(0, 0, 0, 0.2);
+    --db-bg-elevated: #202d4b;
+    
+    --db-accent-primary: #00d4ff;
+    --db-accent-primary-light: #00f0ff;
+    --db-indigo: #4169e1;
+    --db-violet: #8a2be2;
+    --db-mint: #00d4ff;
+    --db-emerald: #00ff88;
+    --db-amber: #ffaa00;
+    --db-rose: #ff3333;
+    
+    --db-text-primary: #ffffff;
+    --db-text-secondary: #b4c3dc;
+    --db-text-muted: #64788c;
+    
+    --db-border: rgba(40, 55, 85, 1);
+    --db-border-light: rgba(55, 75, 110, 1);
+    
+    --db-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
+    --db-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
+    --db-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
+    --db-glow-accent: 0 0 20px rgba(0, 212, 255, 0.5), 0 0 40px rgba(0, 212, 255, 0.3);
+    
+    --db-radius-sm: 6px;
+    --db-radius-md: 10px;
+    --db-radius-lg: 14px;
+    
+    --db-card-border-production: rgba(65, 105, 225, 0.5);
+    --db-card-border-material: rgba(138, 43, 226, 0.5);
+    --db-card-border-quality: rgba(0, 212, 255, 0.5);
+    --db-card-border-equipment: rgba(0, 255, 136, 0.5);
+    --db-card-border-safety: rgba(255, 170, 0, 0.5);
+    
+    --db-notice-bg: rgba(255, 170, 0, 0.1);
+    --db-notice-border: rgba(255, 170, 0, 0.3);
+    --db-notice-text: #ffaa00;
+    
+    --db-weather-bg: rgba(0, 0, 0, 0.2);
+    --db-weather-border: rgba(40, 55, 85, 1);
+    
+    --db-user-badge-bg: rgba(0, 0, 0, 0.3);
+    --db-user-badge-hover: rgba(0, 212, 255, 0.1);
+    
+    --db-btn-more-bg: rgba(0, 212, 255, 0.08);
+    --db-btn-more-border: rgba(0, 212, 255, 0.2);
+    --db-btn-more-color: #00d4ff;
+    
+    --db-status-bg: rgba(0, 212, 255, 0.1);
+    --db-status-border: rgba(0, 212, 255, 0.2);
+    --db-status-color: #00d4ff;
+}
+
+/* ========== 라이트 모드 ========== */
+.pop-dashboard-container.light {
+    --db-bg-page: #f8f9fb;
+    --db-bg-card: #ffffff;
+    --db-bg-card-solid: #ffffff;
+    --db-bg-card-alt: #f3f5f7;
+    --db-bg-elevated: #fafbfc;
+    
+    --db-accent-primary: #14b8a6;
+    --db-accent-primary-light: #2dd4bf;
+    --db-indigo: #6366f1;
+    --db-violet: #8b5cf6;
+    --db-mint: #14b8a6;
+    --db-emerald: #10b981;
+    --db-amber: #f59e0b;
+    --db-rose: #f43f5e;
+    
+    --db-text-primary: #1e293b;
+    --db-text-secondary: #475569;
+    --db-text-muted: #94a3b8;
+    
+    --db-border: #e2e8f0;
+    --db-border-light: #f1f5f9;
+    
+    --db-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);
+    --db-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
+    --db-shadow-lg: 0 10px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
+    --db-glow-accent: none;
+    
+    --db-card-border-production: rgba(99, 102, 241, 0.3);
+    --db-card-border-material: rgba(139, 92, 246, 0.3);
+    --db-card-border-quality: rgba(20, 184, 166, 0.3);
+    --db-card-border-equipment: rgba(16, 185, 129, 0.3);
+    --db-card-border-safety: rgba(245, 158, 11, 0.3);
+    
+    --db-notice-bg: linear-gradient(90deg, rgba(245, 158, 11, 0.08), rgba(251, 191, 36, 0.05));
+    --db-notice-border: rgba(245, 158, 11, 0.2);
+    --db-notice-text: #475569;
+    
+    --db-weather-bg: rgba(20, 184, 166, 0.08);
+    --db-weather-border: rgba(20, 184, 166, 0.25);
+    
+    --db-user-badge-bg: #f3f5f7;
+    --db-user-badge-hover: #e2e8f0;
+    
+    --db-btn-more-bg: rgba(20, 184, 166, 0.08);
+    --db-btn-more-border: rgba(20, 184, 166, 0.25);
+    --db-btn-more-color: #0d9488;
+    
+    --db-status-bg: #f3f5f7;
+    --db-status-border: transparent;
+    --db-status-color: #475569;
+}
+
+/* ========== 기본 컨테이너 ========== */
+.pop-dashboard-container {
+    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
+    background: var(--db-bg-page);
+    color: var(--db-text-primary);
+    min-height: 100vh;
+    min-height: 100dvh;
+    transition: background 0.3s, color 0.3s;
+    position: relative;
+}
+
+/* 다크 모드 배경 그리드 */
+.pop-dashboard-container::before {
+    content: '';
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: 
+        repeating-linear-gradient(90deg, rgba(0, 212, 255, 0.03) 0px, transparent 1px, transparent 60px),
+        repeating-linear-gradient(0deg, rgba(0, 212, 255, 0.03) 0px, transparent 1px, transparent 60px),
+        radial-gradient(ellipse 80% 50% at 50% 0%, rgba(0, 212, 255, 0.08) 0%, transparent 60%),
+        linear-gradient(180deg, #080c15 0%, #0a0f1c 50%, #0d1323 100%);
+    pointer-events: none;
+    z-index: 0;
+}
+
+.pop-dashboard-container.light::before {
+    background: linear-gradient(180deg, #f1f5f9 0%, #f8fafc 50%, #ffffff 100%);
+}
+
+.pop-dashboard {
+    position: relative;
+    z-index: 1;
+    max-width: 1600px;
+    margin: 0 auto;
+    padding: 20px;
+    min-height: 100vh;
+    min-height: 100dvh;
+}
+
+/* ========== 헤더 ========== */
+.pop-dashboard-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 16px;
+    padding: 14px 24px;
+    background: var(--db-bg-card);
+    border: 1px solid var(--db-border);
+    border-radius: var(--db-radius-lg);
+    box-shadow: var(--db-shadow-sm);
+    position: relative;
+    overflow: hidden;
+}
+
+.pop-dashboard-container:not(.light) .pop-dashboard-header::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 20%;
+    right: 20%;
+    height: 2px;
+    background: linear-gradient(90deg, transparent, var(--db-accent-primary), transparent);
+}
+
+.pop-dashboard-header-left {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.pop-dashboard-time-display {
+    display: flex;
+    align-items: baseline;
+    gap: 12px;
+}
+
+.pop-dashboard-time-main {
+    font-size: 26px;
+    font-weight: 600;
+    letter-spacing: 1px;
+    color: var(--db-accent-primary);
+    line-height: 1;
+    font-variant-numeric: tabular-nums;
+}
+
+.pop-dashboard-container:not(.light) .pop-dashboard-time-main {
+    text-shadow: var(--db-glow-accent);
+    animation: neonFlicker 3s infinite;
+}
+
+.pop-dashboard-time-date {
+    font-size: 13px;
+    color: var(--db-text-muted);
+    font-variant-numeric: tabular-nums;
+}
+
+.pop-dashboard-header-right {
+    display: flex;
+    align-items: center;
+    gap: 14px;
+}
+
+/* 테마 토글 */
+.pop-dashboard-theme-toggle {
+    width: 36px;
+    height: 36px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--db-bg-card-alt);
+    border: 1px solid var(--db-border);
+    border-radius: var(--db-radius-md);
+    color: var(--db-text-secondary);
+    cursor: pointer;
+    transition: all 0.2s;
+}
+
+.pop-dashboard-theme-toggle:hover {
+    border-color: var(--db-accent-primary);
+    color: var(--db-accent-primary);
+}
+
+/* 날씨 정보 */
+.pop-dashboard-weather {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 6px 12px;
+    background: var(--db-weather-bg);
+    border: 1px solid var(--db-weather-border);
+    border-radius: var(--db-radius-md);
+}
+
+.pop-dashboard-weather-temp {
+    font-size: 13px;
+    font-weight: 700;
+    color: var(--db-amber);
+}
+
+.pop-dashboard-container.light .pop-dashboard-weather-temp {
+    color: var(--db-accent-primary);
+}
+
+.pop-dashboard-weather-desc {
+    font-size: 11px;
+    color: var(--db-text-muted);
+}
+
+/* 회사 정보 */
+.pop-dashboard-company {
+    padding-right: 14px;
+    border-right: 1px solid var(--db-border);
+    text-align: right;
+}
+
+.pop-dashboard-company-name {
+    font-size: 15px;
+    font-weight: 700;
+    color: var(--db-text-primary);
+}
+
+.pop-dashboard-company-sub {
+    font-size: 11px;
+    color: var(--db-text-muted);
+    margin-top: 2px;
+}
+
+/* 사용자 배지 */
+.pop-dashboard-user-badge {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 8px 14px;
+    background: var(--db-user-badge-bg);
+    border: 1px solid var(--db-border);
+    border-radius: var(--db-radius-md);
+    cursor: pointer;
+    transition: all 0.2s;
+}
+
+.pop-dashboard-user-badge:hover {
+    background: var(--db-user-badge-hover);
+}
+
+.pop-dashboard-user-badge:active {
+    transform: scale(0.98);
+}
+
+.pop-dashboard-user-avatar {
+    width: 32px;
+    height: 32px;
+    background: linear-gradient(135deg, var(--db-accent-primary), var(--db-emerald));
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 13px;
+    font-weight: 700;
+    color: white;
+}
+
+.pop-dashboard-container:not(.light) .pop-dashboard-user-avatar {
+    box-shadow: 0 0 10px rgba(0, 212, 255, 0.4);
+}
+
+.pop-dashboard-container.light .pop-dashboard-user-avatar {
+    box-shadow: 0 2px 8px rgba(20, 184, 166, 0.3);
+}
+
+.pop-dashboard-user-name {
+    font-size: 13px;
+    font-weight: 600;
+    color: var(--db-text-primary);
+}
+
+.pop-dashboard-user-role {
+    font-size: 11px;
+    color: var(--db-text-muted);
+}
+
+/* ========== 공지사항 배너 ========== */
+.pop-dashboard-notice-banner {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    margin-bottom: 16px;
+    padding: 10px 16px;
+    background: var(--db-notice-bg);
+    border: 1px solid var(--db-notice-border);
+    border-radius: var(--db-radius-md);
+}
+
+.pop-dashboard-notice-label {
+    font-size: 10px;
+    font-weight: 700;
+    color: var(--db-bg-page);
+    background: var(--db-amber);
+    padding: 3px 8px;
+    border-radius: 4px;
+    flex-shrink: 0;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.pop-dashboard-container.light .pop-dashboard-notice-label {
+    color: white;
+}
+
+.pop-dashboard-notice-content {
+    flex: 1;
+    overflow: hidden;
+}
+
+.pop-dashboard-notice-marquee {
+    display: flex;
+    animation: dashboardMarquee 30s linear infinite;
+    white-space: nowrap;
+}
+
+.pop-dashboard-notice-text {
+    font-size: 12px;
+    color: var(--db-notice-text);
+    padding-right: 100px;
+}
+
+@keyframes dashboardMarquee {
+    0% { transform: translateX(0); }
+    100% { transform: translateX(-50%); }
+}
+
+.pop-dashboard-notice-banner:hover .pop-dashboard-notice-marquee {
+    animation-play-state: paused;
+}
+
+/* ========== KPI 바 ========== */
+.pop-dashboard-kpi-bar {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 12px;
+    margin-bottom: 16px;
+}
+
+.pop-dashboard-kpi-item {
+    background: var(--db-bg-card);
+    border: 1px solid var(--db-border);
+    border-radius: var(--db-radius-lg);
+    padding: 16px 18px;
+    display: flex;
+    align-items: center;
+    gap: 14px;
+    box-shadow: var(--db-shadow-sm);
+    transition: all 0.2s;
+    position: relative;
+    overflow: hidden;
+}
+
+.pop-dashboard-container:not(.light) .pop-dashboard-kpi-item::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 1px;
+    background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.5), transparent);
+}
+
+.pop-dashboard-kpi-item:hover {
+    transform: translateY(-2px);
+    box-shadow: var(--db-shadow-md);
+}
+
+.pop-dashboard-container:not(.light) .pop-dashboard-kpi-item:hover {
+    border-color: rgba(0, 212, 255, 0.3);
+    box-shadow: 0 0 30px rgba(0, 212, 255, 0.1), inset 0 0 30px rgba(0, 212, 255, 0.02);
+}
+
+.pop-dashboard-kpi-gauge {
+    width: 52px;
+    height: 52px;
+    position: relative;
+    flex-shrink: 0;
+}
+
+.pop-dashboard-kpi-gauge svg {
+    transform: rotate(-90deg);
+}
+
+.pop-dashboard-kpi-gauge-bg {
+    fill: none;
+    stroke: var(--db-border);
+    stroke-width: 5;
+}
+
+.pop-dashboard-kpi-gauge-fill {
+    fill: none;
+    stroke-width: 5;
+    stroke-linecap: round;
+    transition: stroke-dashoffset 0.5s;
+}
+
+.pop-dashboard-container:not(.light) .pop-dashboard-kpi-gauge-fill {
+    filter: drop-shadow(0 0 6px currentColor);
+}
+
+.pop-dashboard-container.light .pop-dashboard-kpi-gauge-fill {
+    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.1));
+}
+
+.pop-dashboard-kpi-gauge-text {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    font-size: 12px;
+    font-weight: 700;
+    font-variant-numeric: tabular-nums;
+}
+
+.pop-dashboard-kpi-info { flex: 1; }
+
+.pop-dashboard-kpi-label {
+    font-size: 11px;
+    color: var(--db-text-muted);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    margin-bottom: 4px;
+}
+
+.pop-dashboard-kpi-value {
+    font-size: 22px;
+    font-weight: 700;
+    font-variant-numeric: tabular-nums;
+}
+
+.pop-dashboard-kpi-unit {
+    font-size: 12px;
+    color: var(--db-text-muted);
+    margin-left: 3px;
+    font-weight: 500;
+}
+
+/* KPI 색상 */
+.kpi-color-cyan { color: var(--db-mint); stroke: var(--db-mint); }
+.kpi-color-emerald { color: var(--db-emerald); stroke: var(--db-emerald); }
+.kpi-color-rose { color: var(--db-rose); stroke: var(--db-rose); }
+.kpi-color-amber { color: var(--db-amber); stroke: var(--db-amber); }
+
+/* ========== 메뉴 그리드 ========== */
+.pop-dashboard-menu-grid {
+    display: grid;
+    grid-template-columns: repeat(5, 1fr);
+    gap: 12px;
+    margin-bottom: 16px;
+}
+
+.pop-dashboard-menu-card {
+    background: var(--db-bg-card);
+    border-radius: var(--db-radius-lg);
+    padding: 18px;
+    cursor: pointer;
+    transition: all 0.2s;
+    box-shadow: var(--db-shadow-sm);
+    position: relative;
+    overflow: hidden;
+}
+
+.pop-dashboard-menu-card:hover {
+    transform: translateY(-4px);
+    box-shadow: var(--db-shadow-lg);
+}
+
+.pop-dashboard-menu-card:active {
+    transform: scale(0.98);
+}
+
+.pop-dashboard-menu-card.production { border: 2px solid var(--db-card-border-production); }
+.pop-dashboard-menu-card.material { border: 2px solid var(--db-card-border-material); }
+.pop-dashboard-menu-card.quality { border: 2px solid var(--db-card-border-quality); }
+.pop-dashboard-menu-card.equipment { border: 2px solid var(--db-card-border-equipment); }
+.pop-dashboard-menu-card.safety { border: 2px solid var(--db-card-border-safety); }
+
+.pop-dashboard-container:not(.light) .pop-dashboard-menu-card.production:hover { box-shadow: 0 0 20px rgba(65, 105, 225, 0.3); }
+.pop-dashboard-container:not(.light) .pop-dashboard-menu-card.material:hover { box-shadow: 0 0 20px rgba(138, 43, 226, 0.3); }
+.pop-dashboard-container:not(.light) .pop-dashboard-menu-card.quality:hover { box-shadow: 0 0 20px rgba(0, 212, 255, 0.3); }
+.pop-dashboard-container:not(.light) .pop-dashboard-menu-card.equipment:hover { box-shadow: 0 0 20px rgba(0, 255, 136, 0.3); }
+.pop-dashboard-container:not(.light) .pop-dashboard-menu-card.safety:hover { box-shadow: 0 0 20px rgba(255, 170, 0, 0.3); }
+
+.pop-dashboard-menu-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    margin-bottom: 10px;
+}
+
+.pop-dashboard-menu-title {
+    font-size: 14px;
+    font-weight: 700;
+    color: var(--db-text-primary);
+}
+
+.pop-dashboard-menu-count {
+    font-size: 24px;
+    font-weight: 800;
+    font-variant-numeric: tabular-nums;
+}
+
+.pop-dashboard-container:not(.light) .pop-dashboard-menu-count {
+    text-shadow: 0 0 20px currentColor;
+}
+
+.pop-dashboard-menu-count.production { color: var(--db-indigo); }
+.pop-dashboard-menu-count.material { color: var(--db-violet); }
+.pop-dashboard-menu-count.quality { color: var(--db-mint); }
+.pop-dashboard-menu-count.equipment { color: var(--db-emerald); }
+.pop-dashboard-menu-count.safety { color: var(--db-amber); }
+
+.pop-dashboard-menu-desc {
+    font-size: 11px;
+    color: var(--db-text-muted);
+    line-height: 1.5;
+}
+
+.pop-dashboard-menu-status {
+    display: inline-block;
+    margin-top: 10px;
+    padding: 4px 10px;
+    background: var(--db-status-bg);
+    border: 1px solid var(--db-status-border);
+    border-radius: 16px;
+    font-size: 10px;
+    font-weight: 600;
+    color: var(--db-status-color);
+}
+
+/* ========== 하단 섹션 ========== */
+.pop-dashboard-bottom-section {
+    display: grid;
+    grid-template-columns: 2fr 1fr;
+    gap: 12px;
+}
+
+.pop-dashboard-card {
+    background: var(--db-bg-card);
+    border: 1px solid var(--db-border);
+    border-radius: var(--db-radius-lg);
+    padding: 18px;
+    box-shadow: var(--db-shadow-sm);
+    position: relative;
+    overflow: hidden;
+}
+
+.pop-dashboard-container:not(.light) .pop-dashboard-card::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 1px;
+    background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.5), transparent);
+}
+
+.pop-dashboard-card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 14px;
+    padding-bottom: 12px;
+    border-bottom: 1px solid var(--db-border);
+}
+
+.pop-dashboard-card-title {
+    font-size: 14px;
+    font-weight: 700;
+    color: var(--db-text-primary);
+}
+
+.pop-dashboard-btn-more {
+    padding: 6px 12px;
+    background: var(--db-btn-more-bg);
+    border: 1px solid var(--db-btn-more-border);
+    color: var(--db-btn-more-color);
+    border-radius: var(--db-radius-sm);
+    font-size: 11px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.2s;
+}
+
+.pop-dashboard-btn-more:hover {
+    background: var(--db-accent-primary);
+    color: white;
+    border-color: var(--db-accent-primary);
+}
+
+/* 활동 리스트 */
+.pop-dashboard-activity-list {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.pop-dashboard-activity-item {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 12px;
+    background: var(--db-bg-card-alt);
+    border-radius: var(--db-radius-md);
+    transition: all 0.2s;
+}
+
+.pop-dashboard-container:not(.light) .pop-dashboard-activity-item {
+    border: 1px solid transparent;
+}
+
+.pop-dashboard-container:not(.light) .pop-dashboard-activity-item:hover {
+    background: rgba(0, 212, 255, 0.05);
+    border-color: rgba(0, 212, 255, 0.2);
+}
+
+.pop-dashboard-container.light .pop-dashboard-activity-item:hover {
+    background: var(--db-border-light);
+}
+
+.pop-dashboard-activity-time {
+    font-size: 12px;
+    font-weight: 700;
+    color: var(--db-accent-primary);
+    font-variant-numeric: tabular-nums;
+    min-width: 48px;
+}
+
+.pop-dashboard-container:not(.light) .pop-dashboard-activity-time {
+    text-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
+}
+
+.pop-dashboard-activity-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    flex-shrink: 0;
+}
+
+.pop-dashboard-container:not(.light) .pop-dashboard-activity-dot {
+    box-shadow: 0 0 8px currentColor;
+}
+
+.pop-dashboard-activity-dot.production { background: var(--db-indigo); color: var(--db-indigo); }
+.pop-dashboard-activity-dot.material { background: var(--db-violet); color: var(--db-violet); }
+.pop-dashboard-activity-dot.quality { background: var(--db-mint); color: var(--db-mint); }
+.pop-dashboard-activity-dot.equipment { background: var(--db-emerald); color: var(--db-emerald); }
+
+.pop-dashboard-activity-content { flex: 1; }
+
+.pop-dashboard-activity-title {
+    font-size: 13px;
+    font-weight: 600;
+    color: var(--db-text-primary);
+    margin-bottom: 2px;
+}
+
+.pop-dashboard-activity-desc {
+    font-size: 11px;
+    color: var(--db-text-muted);
+}
+
+/* 공지사항 리스트 */
+.pop-dashboard-notice-list {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.pop-dashboard-notice-item {
+    padding: 12px;
+    background: var(--db-bg-card-alt);
+    border-radius: var(--db-radius-md);
+    transition: all 0.2s;
+    cursor: pointer;
+}
+
+.pop-dashboard-container:not(.light) .pop-dashboard-notice-item:hover {
+    background: rgba(255, 170, 0, 0.05);
+}
+
+.pop-dashboard-container.light .pop-dashboard-notice-item:hover {
+    background: var(--db-border-light);
+}
+
+.pop-dashboard-notice-title {
+    font-size: 13px;
+    font-weight: 600;
+    color: var(--db-text-primary);
+    margin-bottom: 4px;
+}
+
+.pop-dashboard-notice-date {
+    font-size: 11px;
+    color: var(--db-text-muted);
+    font-variant-numeric: tabular-nums;
+}
+
+/* ========== 푸터 ========== */
+.pop-dashboard-footer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 16px;
+    padding: 14px 18px;
+    background: var(--db-bg-card);
+    border: 1px solid var(--db-border);
+    border-radius: var(--db-radius-md);
+    font-size: 11px;
+    color: var(--db-text-muted);
+}
+
+/* ========== 반응형 ========== */
+
+/* 가로 모드 */
+@media (orientation: landscape) {
+    .pop-dashboard { padding: 16px 24px; }
+    .pop-dashboard-kpi-bar { grid-template-columns: repeat(4, 1fr) !important; gap: 10px; }
+    .pop-dashboard-kpi-item { padding: 12px 14px; }
+    .pop-dashboard-kpi-gauge { width: 44px; height: 44px; }
+    .pop-dashboard-kpi-gauge svg { width: 44px; height: 44px; }
+    .pop-dashboard-kpi-value { font-size: 20px; }
+    
+    .pop-dashboard-menu-grid { grid-template-columns: repeat(5, 1fr) !important; gap: 10px; }
+    .pop-dashboard-menu-card { padding: 14px; display: block; }
+    .pop-dashboard-menu-header { margin-bottom: 8px; display: block; }
+    .pop-dashboard-menu-title { font-size: 13px; }
+    .pop-dashboard-menu-count { font-size: 20px; }
+    .pop-dashboard-menu-desc { display: block; font-size: 10px; }
+    .pop-dashboard-menu-status { margin-top: 8px; }
+    
+    .pop-dashboard-bottom-section { grid-template-columns: 2fr 1fr; }
+}
+
+/* 세로 모드 */
+@media (orientation: portrait) {
+    .pop-dashboard { padding: 16px; }
+    .pop-dashboard-kpi-bar { grid-template-columns: repeat(2, 1fr) !important; gap: 10px; }
+    
+    .pop-dashboard-menu-grid { grid-template-columns: 1fr !important; gap: 8px; }
+    .pop-dashboard-menu-card { 
+        padding: 14px 18px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+    }
+    .pop-dashboard-menu-header { margin-bottom: 0; display: flex; align-items: center; gap: 12px; }
+    .pop-dashboard-menu-title { font-size: 15px; }
+    .pop-dashboard-menu-count { font-size: 20px; }
+    .pop-dashboard-menu-desc { display: none; }
+    .pop-dashboard-menu-status { margin-top: 0; padding: 5px 12px; font-size: 11px; }
+    
+    .pop-dashboard-bottom-section { grid-template-columns: 1fr; }
+}
+
+/* 작은 화면 세로 */
+@media (max-width: 600px) and (orientation: portrait) {
+    .pop-dashboard { padding: 12px; }
+    .pop-dashboard-header { padding: 10px 14px; }
+    .pop-dashboard-time-main { font-size: 20px; }
+    .pop-dashboard-time-date { display: none; }
+    .pop-dashboard-weather { padding: 4px 8px; }
+    .pop-dashboard-weather-temp { font-size: 11px; }
+    .pop-dashboard-weather-desc { display: none; }
+    .pop-dashboard-company { display: none; }
+    .pop-dashboard-user-text { display: none; }
+    .pop-dashboard-user-avatar { width: 30px; height: 30px; }
+    
+    .pop-dashboard-notice-banner { padding: 8px 12px; }
+    .pop-dashboard-notice-label { font-size: 9px; }
+    .pop-dashboard-notice-text { font-size: 11px; }
+    
+    .pop-dashboard-kpi-item { padding: 12px 14px; gap: 10px; }
+    .pop-dashboard-kpi-gauge { width: 44px; height: 44px; }
+    .pop-dashboard-kpi-gauge svg { width: 44px; height: 44px; }
+    .pop-dashboard-kpi-gauge-text { font-size: 10px; }
+    .pop-dashboard-kpi-label { font-size: 10px; }
+    .pop-dashboard-kpi-value { font-size: 18px; }
+    
+    .pop-dashboard-menu-card { padding: 12px 16px; }
+    .pop-dashboard-menu-title { font-size: 14px; }
+    .pop-dashboard-menu-count { font-size: 18px; }
+    .pop-dashboard-menu-status { padding: 4px 10px; font-size: 10px; }
+}
+
+/* 작은 화면 가로 */
+@media (max-width: 600px) and (orientation: landscape) {
+    .pop-dashboard { padding: 10px 16px; }
+    .pop-dashboard-header { padding: 8px 12px; }
+    .pop-dashboard-time-main { font-size: 18px; }
+    .pop-dashboard-time-date { font-size: 10px; }
+    .pop-dashboard-weather { display: none; }
+    .pop-dashboard-company { display: none; }
+    .pop-dashboard-user-text { display: none; }
+    
+    .pop-dashboard-notice-banner { padding: 6px 10px; margin-bottom: 10px; }
+    
+    .pop-dashboard-kpi-item { padding: 8px 10px; gap: 8px; }
+    .pop-dashboard-kpi-gauge { width: 36px; height: 36px; }
+    .pop-dashboard-kpi-gauge svg { width: 36px; height: 36px; }
+    .pop-dashboard-kpi-gauge-text { font-size: 9px; }
+    .pop-dashboard-kpi-label { font-size: 9px; }
+    .pop-dashboard-kpi-value { font-size: 16px; }
+    
+    .pop-dashboard-menu-card { padding: 10px; }
+    .pop-dashboard-menu-title { font-size: 11px; }
+    .pop-dashboard-menu-count { font-size: 16px; }
+    .pop-dashboard-menu-status { margin-top: 4px; padding: 2px 6px; font-size: 8px; }
+}
+
+/* ========== 애니메이션 ========== */
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(8px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes neonFlicker {
+    0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { opacity: 1; }
+    20%, 24%, 55% { opacity: 0.85; }
+}
+
+.pop-dashboard-kpi-item, .pop-dashboard-menu-card, .pop-dashboard-card {
+    animation: fadeIn 0.35s ease-out backwards;
+}
+
+.pop-dashboard-kpi-item:nth-child(1) { animation-delay: 0.05s; }
+.pop-dashboard-kpi-item:nth-child(2) { animation-delay: 0.1s; }
+.pop-dashboard-kpi-item:nth-child(3) { animation-delay: 0.15s; }
+.pop-dashboard-kpi-item:nth-child(4) { animation-delay: 0.2s; }
+
+.pop-dashboard-menu-card:nth-child(1) { animation-delay: 0.1s; }
+.pop-dashboard-menu-card:nth-child(2) { animation-delay: 0.15s; }
+.pop-dashboard-menu-card:nth-child(3) { animation-delay: 0.2s; }
+.pop-dashboard-menu-card:nth-child(4) { animation-delay: 0.25s; }
+.pop-dashboard-menu-card:nth-child(5) { animation-delay: 0.3s; }
+
+/* 스크롤바 */
+.pop-dashboard-container ::-webkit-scrollbar { width: 6px; height: 6px; }
+.pop-dashboard-container ::-webkit-scrollbar-track { background: transparent; }
+.pop-dashboard-container ::-webkit-scrollbar-thumb { background: var(--db-border); border-radius: 3px; }
+.pop-dashboard-container ::-webkit-scrollbar-thumb:hover { background: var(--db-accent-primary); }
+
diff --git a/frontend/components/pop/dashboard/data.ts b/frontend/components/pop/dashboard/data.ts
new file mode 100644
index 00000000..ce6ac542
--- /dev/null
+++ b/frontend/components/pop/dashboard/data.ts
@@ -0,0 +1,139 @@
+// POP 대시보드 샘플 데이터
+
+import { KpiItem, MenuItem, ActivityItem, NoticeItem } from "./types";
+
+export const KPI_ITEMS: KpiItem[] = [
+  {
+    id: "achievement",
+    label: "목표 달성률",
+    value: 83.3,
+    unit: "%",
+    percentage: 83,
+    color: "cyan",
+  },
+  {
+    id: "production",
+    label: "금일 생산실적",
+    value: 1250,
+    unit: "EA",
+    percentage: 100,
+    color: "emerald",
+  },
+  {
+    id: "defect",
+    label: "불량률",
+    value: 0.8,
+    unit: "%",
+    percentage: 1,
+    color: "rose",
+  },
+  {
+    id: "equipment",
+    label: "가동 설비",
+    value: 8,
+    unit: "/ 10",
+    percentage: 80,
+    color: "amber",
+  },
+];
+
+export const MENU_ITEMS: MenuItem[] = [
+  {
+    id: "production",
+    title: "생산관리",
+    count: 5,
+    description: "작업지시 / 생산실적 / 공정관리",
+    status: "진행중",
+    category: "production",
+    href: "/pop/work",
+  },
+  {
+    id: "material",
+    title: "자재관리",
+    count: 12,
+    description: "자재출고 / 재고확인 / 입고처리",
+    status: "대기",
+    category: "material",
+    href: "#",
+  },
+  {
+    id: "quality",
+    title: "품질관리",
+    count: 3,
+    description: "품질검사 / 불량처리 / 검사기록",
+    status: "검사대기",
+    category: "quality",
+    href: "#",
+  },
+  {
+    id: "equipment",
+    title: "설비관리",
+    count: 2,
+    description: "설비현황 / 점검관리 / 고장신고",
+    status: "점검필요",
+    category: "equipment",
+    href: "#",
+  },
+  {
+    id: "safety",
+    title: "안전관리",
+    count: 0,
+    description: "안전점검 / 사고신고 / 안전교육",
+    status: "이상무",
+    category: "safety",
+    href: "#",
+  },
+];
+
+export const ACTIVITY_ITEMS: ActivityItem[] = [
+  {
+    id: "1",
+    time: "14:25",
+    title: "생산실적 등록",
+    description: "WO-2024-156 - 500EA 생산완료",
+    category: "production",
+  },
+  {
+    id: "2",
+    time: "13:50",
+    title: "자재출고",
+    description: "알루미늄 프로파일 A100 - 200EA",
+    category: "material",
+  },
+  {
+    id: "3",
+    time: "11:30",
+    title: "품질검사 완료",
+    description: "LOT-2024-156 합격 (불량 0건)",
+    category: "quality",
+  },
+  {
+    id: "4",
+    time: "09:15",
+    title: "설비점검",
+    description: "5호기 정기점검 완료",
+    category: "equipment",
+  },
+];
+
+export const NOTICE_ITEMS: NoticeItem[] = [
+  {
+    id: "1",
+    title: "금일 15:00 전체 안전교육",
+    date: "2024-01-05",
+  },
+  {
+    id: "2",
+    title: "3호기 정기점검 안내",
+    date: "2024-01-04",
+  },
+  {
+    id: "3",
+    title: "11월 우수팀 - 생산1팀",
+    date: "2024-01-03",
+  },
+];
+
+export const NOTICE_MARQUEE_TEXT =
+  "[공지] 금일 오후 3시 전체 안전교육 실시 예정입니다. 전 직원 필참 바랍니다. | [알림] 내일 설비 정기점검으로 인한 3호기 가동 중지 예정 | [안내] 11월 생산실적 우수팀 발표 - 생산1팀 축하드립니다!";
+
diff --git a/frontend/components/pop/dashboard/index.ts b/frontend/components/pop/dashboard/index.ts
new file mode 100644
index 00000000..dbafdc54
--- /dev/null
+++ b/frontend/components/pop/dashboard/index.ts
@@ -0,0 +1,11 @@
+export { PopDashboard } from "./PopDashboard";
+export { DashboardHeader } from "./DashboardHeader";
+export { NoticeBanner } from "./NoticeBanner";
+export { KpiBar } from "./KpiBar";
+export { MenuGrid } from "./MenuGrid";
+export { ActivityList } from "./ActivityList";
+export { NoticeList } from "./NoticeList";
+export { DashboardFooter } from "./DashboardFooter";
+export * from "./types";
+export * from "./data";
+
diff --git a/frontend/components/pop/dashboard/types.ts b/frontend/components/pop/dashboard/types.ts
new file mode 100644
index 00000000..9c3c67f3
--- /dev/null
+++ b/frontend/components/pop/dashboard/types.ts
@@ -0,0 +1,51 @@
+// POP 대시보드 타입 정의
+
+export interface KpiItem {
+  id: string;
+  label: string;
+  value: number;
+  unit: string;
+  percentage: number;
+  color: string;
+}
+
+export interface MenuItem {
+  id: string;
+  title: string;
+  count: number;
+  description: string;
+  status: string;
+  category: "production" | "material" | "quality" | "equipment" | "safety";
+  href: string;
+}
+
+export interface ActivityItem {
+  id: string;
+  time: string;
+  title: string;
+  description: string;
+  category: "production" | "material" | "quality" | "equipment";
+}
+
+export interface NoticeItem {
+  id: string;
+  title: string;
+  date: string;
+}
+
+export interface WeatherInfo {
+  temp: string;
+  description: string;
+}
+
+export interface UserInfo {
+  name: string;
+  role: string;
+  avatar: string;
+}
+
+export interface CompanyInfo {
+  name: string;
+  subTitle: string;
+}
+
diff --git a/frontend/components/pop/data.ts b/frontend/components/pop/data.ts
new file mode 100644
index 00000000..64df7b6d
--- /dev/null
+++ b/frontend/components/pop/data.ts
@@ -0,0 +1,373 @@
+// POP 샘플 데이터
+
+import { Process, Equipment, WorkOrder, WorkStepTemplate } from "./types";
+
+// 공정 목록
+export const PROCESSES: Process[] = [
+  { id: "P001", name: "절단", code: "CUT" },
+  { id: "P002", name: "용접", code: "WELD" },
+  { id: "P003", name: "도장", code: "PAINT" },
+  { id: "P004", name: "조립", code: "ASSY" },
+  { id: "P005", name: "검사", code: "QC" },
+  { id: "P006", name: "포장", code: "PACK" },
+  { id: "P007", name: "프레스", code: "PRESS" },
+  { id: "P008", name: "연마", code: "POLISH" },
+  { id: "P009", name: "열처리", code: "HEAT" },
+  { id: "P010", name: "표면처리", code: "SURFACE" },
+  { id: "P011", name: "드릴링", code: "DRILL" },
+  { id: "P012", name: "밀링", code: "MILL" },
+  { id: "P013", name: "선반", code: "LATHE" },
+  { id: "P014", name: "연삭", code: "GRIND" },
+  { id: "P015", name: "측정", code: "MEASURE" },
+  { id: "P016", name: "세척", code: "CLEAN" },
+  { id: "P017", name: "건조", code: "DRY" },
+  { id: "P018", name: "코팅", code: "COAT" },
+  { id: "P019", name: "라벨링", code: "LABEL" },
+  { id: "P020", name: "출하검사", code: "FINAL_QC" },
+];
+
+// 설비 목록
+export const EQUIPMENTS: Equipment[] = [
+  {
+    id: "E001",
+    name: "CNC-01",
+    processIds: ["P001"],
+    processNames: ["절단"],
+    status: "running",
+  },
+  {
+    id: "E002",
+    name: "CNC-02",
+    processIds: ["P001"],
+    processNames: ["절단"],
+    status: "idle",
+  },
+  {
+    id: "E003",
+    name: "용접기-01",
+    processIds: ["P002"],
+    processNames: ["용접"],
+    status: "running",
+  },
+  {
+    id: "E004",
+    name: "도장라인-A",
+    processIds: ["P003"],
+    processNames: ["도장"],
+    status: "running",
+  },
+  {
+    id: "E005",
+    name: "조립라인-01",
+    processIds: ["P004", "P006"],
+    processNames: ["조립", "포장"],
+    status: "running",
+  },
+  {
+    id: "E006",
+    name: "검사대-01",
+    processIds: ["P005"],
+    processNames: ["검사"],
+    status: "idle",
+  },
+  {
+    id: "E007",
+    name: "작업대-A",
+    processIds: ["P001", "P002", "P004"],
+    processNames: ["절단", "용접", "조립"],
+    status: "idle",
+  },
+  {
+    id: "E008",
+    name: "작업대-B",
+    processIds: ["P003", "P005", "P006"],
+    processNames: ["도장", "검사", "포장"],
+    status: "idle",
+  },
+];
+
+// 작업순서 템플릿
+export const WORK_STEP_TEMPLATES: Record<string, WorkStepTemplate[]> = {
+  P001: [
+    // 절단 공정
+    {
+      id: 1,
+      name: "설비 점검",
+      type: "equipment-check",
+      description: "설비 상태 및 안전 점검",
+    },
+    {
+      id: 2,
+      name: "원자재 확인",
+      type: "material-check",
+      description: "원자재 수량 및 품질 확인",
+    },
+    { id: 3, name: "설비 셋팅", type: "setup", description: "절단 조건 설정" },
+    { id: 4, name: "가공 작업", type: "work", description: "절단 가공 진행" },
+    {
+      id: 5,
+      name: "품질 검사",
+      type: "inspection",
+      description: "가공 결과 품질 검사",
+    },
+    { id: 6, name: "작업 기록", type: "record", description: "작업 실적 기록" },
+  ],
+  P002: [
+    // 용접 공정
+    {
+      id: 1,
+      name: "설비 점검",
+      type: "equipment-check",
+      description: "용접기 및 안전장비 점검",
+    },
+    {
+      id: 2,
+      name: "자재 준비",
+      type: "material-check",
+      description: "용접 자재 및 부품 확인",
+    },
+    {
+      id: 3,
+      name: "용접 조건 설정",
+      type: "setup",
+      description: "전류, 전압 등 설정",
+    },
+    { id: 4, name: "용접 작업", type: "work", description: "용접 진행" },
+    {
+      id: 5,
+      name: "용접부 검사",
+      type: "inspection",
+      description: "용접 품질 검사",
+    },
+    { id: 6, name: "작업 기록", type: "record", description: "용접 실적 기록" },
+  ],
+  default: [
+    {
+      id: 1,
+      name: "작업 준비",
+      type: "preparation",
+      description: "작업 전 준비사항 확인",
+    },
+    { id: 2, name: "작업 실행", type: "work", description: "작업 진행" },
+    {
+      id: 3,
+      name: "품질 확인",
+      type: "inspection",
+      description: "작업 결과 확인",
+    },
+    { id: 4, name: "작업 기록", type: "record", description: "작업 내용 기록" },
+  ],
+};
+
+// 작업지시 목록
+export const WORK_ORDERS: WorkOrder[] = [
+  {
+    id: "WO-2025-001",
+    itemCode: "PROD-001",
+    itemName: "LCD 패널 A101",
+    spec: "1920x1080",
+    orderQuantity: 500,
+    producedQuantity: 0,
+    status: "waiting",
+    process: "P001",
+    processName: "절단",
+    equipment: "E001",
+    equipmentName: "CNC-01",
+    startDate: "2025-01-06",
+    dueDate: "2025-01-10",
+    priority: "high",
+    accepted: false,
+    processFlow: [
+      { id: "P001", name: "절단", status: "pending" },
+      { id: "P007", name: "프레스", status: "pending" },
+      { id: "P011", name: "드릴링", status: "pending" },
+      { id: "P002", name: "용접", status: "pending" },
+      { id: "P008", name: "연마", status: "pending" },
+      { id: "P003", name: "도장", status: "pending" },
+      { id: "P004", name: "조립", status: "pending" },
+      { id: "P005", name: "검사", status: "pending" },
+      { id: "P006", name: "포장", status: "pending" },
+    ],
+    currentProcessIndex: 0,
+  },
+  {
+    id: "WO-2025-002",
+    itemCode: "PROD-002",
+    itemName: "LED 모듈 B202",
+    spec: "500x500",
+    orderQuantity: 300,
+    producedQuantity: 150,
+    status: "in-progress",
+    process: "P002",
+    processName: "용접",
+    equipment: "E003",
+    equipmentName: "용접기-01",
+    startDate: "2025-01-05",
+    dueDate: "2025-01-08",
+    priority: "medium",
+    accepted: true,
+    processFlow: [
+      { id: "P001", name: "절단", status: "completed" },
+      { id: "P007", name: "프레스", status: "completed" },
+      { id: "P011", name: "드릴링", status: "completed" },
+      { id: "P002", name: "용접", status: "current" },
+      { id: "P008", name: "연마", status: "pending" },
+      { id: "P003", name: "도장", status: "pending" },
+      { id: "P004", name: "조립", status: "pending" },
+      { id: "P005", name: "검사", status: "pending" },
+      { id: "P006", name: "포장", status: "pending" },
+    ],
+    currentProcessIndex: 3,
+  },
+  {
+    id: "WO-2025-003",
+    itemCode: "PROD-003",
+    itemName: "OLED 디스플레이",
+    spec: "2560x1440",
+    orderQuantity: 200,
+    producedQuantity: 50,
+    status: "in-progress",
+    process: "P004",
+    processName: "조립",
+    equipment: "E005",
+    equipmentName: "조립라인-01",
+    startDate: "2025-01-04",
+    dueDate: "2025-01-09",
+    priority: "high",
+    accepted: true,
+    processFlow: [
+      { id: "P001", name: "절단", status: "completed" },
+      { id: "P007", name: "프레스", status: "completed" },
+      { id: "P002", name: "용접", status: "completed" },
+      { id: "P003", name: "도장", status: "completed" },
+      { id: "P004", name: "조립", status: "current" },
+      { id: "P005", name: "검사", status: "pending" },
+      { id: "P006", name: "포장", status: "pending" },
+    ],
+    currentProcessIndex: 4,
+  },
+  {
+    id: "WO-2025-004",
+    itemCode: "PROD-004",
+    itemName: "스틸 프레임 C300",
+    spec: "800x600",
+    orderQuantity: 150,
+    producedQuantity: 30,
+    status: "in-progress",
+    process: "P005",
+    processName: "검사",
+    equipment: "E006",
+    equipmentName: "검사대-01",
+    startDate: "2025-01-03",
+    dueDate: "2025-01-10",
+    priority: "medium",
+    accepted: false,
+    processFlow: [
+      { id: "P001", name: "절단", status: "completed" },
+      { id: "P002", name: "용접", status: "completed" },
+      { id: "P008", name: "연마", status: "completed" },
+      { id: "P003", name: "도장", status: "completed" },
+      { id: "P004", name: "조립", status: "completed" },
+      { id: "P005", name: "검사", status: "current" },
+      { id: "P006", name: "포장", status: "pending" },
+    ],
+    currentProcessIndex: 5,
+  },
+  {
+    id: "WO-2025-005",
+    itemCode: "PROD-005",
+    itemName: "알루미늄 케이스",
+    spec: "300x400",
+    orderQuantity: 400,
+    producedQuantity: 400,
+    status: "completed",
+    process: "P006",
+    processName: "포장",
+    equipment: "E005",
+    equipmentName: "조립라인-01",
+    startDate: "2025-01-01",
+    dueDate: "2025-01-05",
+    completedDate: "2025-01-05",
+    priority: "high",
+    accepted: true,
+    processFlow: [
+      { id: "P001", name: "절단", status: "completed" },
+      { id: "P007", name: "프레스", status: "completed" },
+      { id: "P008", name: "연마", status: "completed" },
+      { id: "P003", name: "도장", status: "completed" },
+      { id: "P004", name: "조립", status: "completed" },
+      { id: "P005", name: "검사", status: "completed" },
+      { id: "P006", name: "포장", status: "completed" },
+    ],
+    currentProcessIndex: 6,
+  },
+  // 공정 리턴 작업지시
+  {
+    id: "WO-2025-006",
+    itemCode: "PROD-006",
+    itemName: "리턴품 샤프트 F100",
+    spec: "50x300",
+    orderQuantity: 80,
+    producedQuantity: 30,
+    status: "in-progress",
+    process: "P008",
+    processName: "연마",
+    equipment: null,
+    equipmentName: null,
+    startDate: "2025-01-03",
+    dueDate: "2025-01-08",
+    priority: "high",
+    accepted: false,
+    isReturn: true,
+    returnReason: "검사 불합격 - 표면 조도 미달",
+    returnFromProcess: "P005",
+    returnFromProcessName: "검사",
+    processFlow: [
+      { id: "P001", name: "절단", status: "completed" },
+      { id: "P002", name: "용접", status: "completed" },
+      { id: "P008", name: "연마", status: "pending", isReturnTarget: true },
+      { id: "P014", name: "연삭", status: "pending" },
+      { id: "P016", name: "세척", status: "pending" },
+      { id: "P005", name: "검사", status: "pending" },
+    ],
+    currentProcessIndex: 2,
+  },
+  // 분할접수 작업지시
+  {
+    id: "WO-2025-007",
+    itemCode: "PROD-007",
+    itemName: "분할접수 테스트 품목",
+    spec: "100x200",
+    orderQuantity: 200,
+    producedQuantity: 50,
+    acceptedQuantity: 50,
+    remainingQuantity: 150,
+    status: "in-progress",
+    process: "P002",
+    processName: "용접",
+    equipment: "E003",
+    equipmentName: "용접기-01",
+    startDate: "2025-01-04",
+    dueDate: "2025-01-10",
+    priority: "normal",
+    accepted: true,
+    isPartialAccept: true,
+    processFlow: [
+      { id: "P001", name: "절단", status: "completed" },
+      { id: "P002", name: "용접", status: "current" },
+      { id: "P003", name: "도장", status: "pending" },
+      { id: "P004", name: "조립", status: "pending" },
+      { id: "P005", name: "검사", status: "pending" },
+      { id: "P006", name: "포장", status: "pending" },
+    ],
+    currentProcessIndex: 1,
+  },
+];
+
+// 상태 텍스트 매핑
+export const STATUS_TEXT: Record<string, string> = {
+  waiting: "대기",
+  "in-progress": "진행중",
+  completed: "완료",
+};
+
diff --git a/frontend/components/pop/index.ts b/frontend/components/pop/index.ts
new file mode 100644
index 00000000..ff57ee80
--- /dev/null
+++ b/frontend/components/pop/index.ts
@@ -0,0 +1,13 @@
+export { PopApp } from "./PopApp";
+export { PopHeader } from "./PopHeader";
+export { PopStatusTabs } from "./PopStatusTabs";
+export { PopWorkCard } from "./PopWorkCard";
+export { PopBottomNav } from "./PopBottomNav";
+export { PopEquipmentModal } from "./PopEquipmentModal";
+export { PopProcessModal } from "./PopProcessModal";
+export { PopAcceptModal } from "./PopAcceptModal";
+export { PopSettingsModal } from "./PopSettingsModal";
+export { PopProductionPanel } from "./PopProductionPanel";
+
+export * from "./types";
+export * from "./data";
diff --git a/frontend/components/pop/styles.css b/frontend/components/pop/styles.css
new file mode 100644
index 00000000..c2913c8e
--- /dev/null
+++ b/frontend/components/pop/styles.css
@@ -0,0 +1,2191 @@
+/* POP 생산실적관리 - 사이버펑크 스타일 */
+
+/* ==================== 다크 테마 (기본) ==================== */
+.pop-container {
+    --bg-deepest: 8 12 21;
+    --bg-deep: 10 15 28;
+    --bg-primary: 13 19 35;
+    --bg-secondary: 18 26 47;
+    --bg-tertiary: 25 35 60;
+    --bg-elevated: 32 45 75;
+    
+    --neon-cyan: 0 212 255;
+    --neon-cyan-bright: 0 240 255;
+    --neon-cyan-dim: 0 150 190;
+    --neon-pink: 255 0 102;
+    --neon-purple: 138 43 226;
+    --neon-blue: 65 105 225;
+    
+    --success: 0 255 136;
+    --success-dim: 0 180 100;
+    --warning: 255 170 0;
+    --warning-dim: 200 130 0;
+    --danger: 255 51 51;
+    --danger-dim: 200 40 40;
+    --info: 100 149 237;
+    
+    --text-primary: 255 255 255;
+    --text-secondary: 180 195 220;
+    --text-muted: 100 120 150;
+    --text-disabled: 60 75 95;
+    
+    --border: 40 55 85;
+    --border-light: 55 75 110;
+    --border-glow: 0 212 255;
+    
+    --glow-cyan: 0 0 20px rgba(0, 212, 255, 0.5), 0 0 40px rgba(0, 212, 255, 0.3);
+    --glow-cyan-strong: 0 0 10px rgba(0, 212, 255, 0.8), 0 0 30px rgba(0, 212, 255, 0.5), 0 0 50px rgba(0, 212, 255, 0.3);
+    --glow-pink: 0 0 20px rgba(255, 0, 102, 0.5), 0 0 40px rgba(255, 0, 102, 0.3);
+    --glow-success: 0 0 15px rgba(0, 255, 136, 0.5);
+    --glow-warning: 0 0 15px rgba(255, 170, 0, 0.5);
+    --glow-danger: 0 0 15px rgba(255, 51, 51, 0.5);
+    
+    --gradient-card: linear-gradient(145deg, rgba(25, 35, 60, 0.9) 0%, rgba(18, 26, 47, 0.95) 100%);
+    --gradient-glass: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
+    --gradient-neon: linear-gradient(90deg, rgb(var(--neon-cyan)) 0%, rgb(var(--neon-pink)) 100%);
+    --gradient-header: linear-gradient(180deg, rgba(13, 19, 35, 0.98) 0%, rgba(13, 19, 35, 0.85) 100%);
+    
+    --spacing-xs: 0.25rem;
+    --spacing-sm: 0.5rem;
+    --spacing-md: 0.75rem;
+    --spacing-lg: 1rem;
+    --spacing-xl: 1.5rem;
+    --spacing-2xl: 2rem;
+    
+    --radius-sm: 4px;
+    --radius-md: 8px;
+    --radius-lg: 12px;
+    --radius-xl: 16px;
+    --radius-full: 9999px;
+    
+    --transition-fast: 0.15s ease;
+    --transition-normal: 0.25s ease;
+    --transition-slow: 0.4s ease;
+    
+    --text-2xs: 0.625rem;
+    --text-xs: 0.75rem;
+    --text-sm: 0.875rem;
+    --text-base: 1rem;
+    --text-lg: 1.125rem;
+    --text-xl: 1.25rem;
+    --text-2xl: 1.5rem;
+    --text-3xl: 2rem;
+    
+    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
+    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
+    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
+    --shadow-glow: 0 0 30px rgba(0, 212, 255, 0.2);
+    
+    --z-dropdown: 100;
+    --z-sticky: 200;
+    --z-fixed: 300;
+    --z-modal-backdrop: 400;
+    --z-modal: 500;
+    --z-popover: 600;
+    --z-tooltip: 700;
+    --z-header: 100;
+}
+
+/* ==================== 라이트 테마 ==================== */
+.pop-container.light {
+    --bg-deepest: 245 247 250;
+    --bg-deep: 240 243 248;
+    --bg-primary: 250 251 253;
+    --bg-secondary: 255 255 255;
+    --bg-tertiary: 245 247 250;
+    --bg-elevated: 235 238 245;
+    
+    --neon-cyan: 0 122 204;
+    --neon-cyan-bright: 0 140 230;
+    --neon-cyan-dim: 0 100 170;
+    --neon-pink: 220 38 127;
+    --neon-purple: 118 38 200;
+    --neon-blue: 37 99 235;
+    
+    --success: 22 163 74;
+    --success-dim: 21 128 61;
+    --warning: 245 158 11;
+    --warning-dim: 217 119 6;
+    --danger: 220 38 38;
+    --danger-dim: 185 28 28;
+    --info: 59 130 246;
+    
+    --text-primary: 15 23 42;
+    --text-secondary: 71 85 105;
+    --text-muted: 148 163 184;
+    --text-disabled: 203 213 225;
+    
+    --border: 226 232 240;
+    --border-light: 203 213 225;
+    --border-glow: 0 122 204;
+    
+    --glow-cyan: 0 0 15px rgba(0, 122, 204, 0.3), 0 0 30px rgba(0, 122, 204, 0.15);
+    --glow-cyan-strong: 0 0 8px rgba(0, 122, 204, 0.5), 0 0 20px rgba(0, 122, 204, 0.3);
+    --glow-success: 0 0 10px rgba(22, 163, 74, 0.3);
+    --glow-warning: 0 0 10px rgba(245, 158, 11, 0.3);
+    --glow-danger: 0 0 10px rgba(220, 38, 38, 0.3);
+    
+    --gradient-card: linear-gradient(145deg, rgba(255, 255, 255, 0.95) 0%, rgba(250, 251, 253, 0.98) 100%);
+    --gradient-glass: linear-gradient(135deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.6) 100%);
+    --gradient-header: linear-gradient(180deg, rgba(250, 251, 253, 0.98) 0%, rgba(250, 251, 253, 0.9) 100%);
+    
+    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
+    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06);
+    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
+    --shadow-glow: 0 0 20px rgba(0, 122, 204, 0.1);
+}
+
+/* ==================== 기본 스타일 ==================== */
+.pop-container {
+    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif;
+    font-size: var(--text-sm);
+    line-height: 1.5;
+    color: rgb(var(--text-primary));
+    background: rgb(var(--bg-deepest));
+    height: 100vh;
+    height: 100dvh;
+    overflow-x: hidden;
+    overflow-y: auto;
+    -webkit-font-smoothing: antialiased;
+    position: relative;
+}
+
+/* 배경 그리드 패턴 */
+.pop-container::before {
+    content: '';
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: 
+        repeating-linear-gradient(90deg, rgba(0, 212, 255, 0.03) 0px, transparent 1px, transparent 60px),
+        repeating-linear-gradient(0deg, rgba(0, 212, 255, 0.03) 0px, transparent 1px, transparent 60px),
+        radial-gradient(ellipse 80% 50% at 50% 0%, rgba(0, 212, 255, 0.08) 0%, transparent 60%),
+        linear-gradient(180deg, rgb(var(--bg-deepest)) 0%, rgb(var(--bg-deep)) 50%, rgb(var(--bg-primary)) 100%);
+    pointer-events: none;
+    z-index: -1;
+}
+
+.pop-container.light::before {
+    background: 
+        repeating-linear-gradient(90deg, rgba(0, 122, 204, 0.02) 0px, transparent 1px, transparent 60px),
+        repeating-linear-gradient(0deg, rgba(0, 122, 204, 0.02) 0px, transparent 1px, transparent 60px),
+        radial-gradient(ellipse 80% 50% at 50% 0%, rgba(0, 122, 204, 0.05) 0%, transparent 60%),
+        linear-gradient(180deg, rgb(var(--bg-deepest)) 0%, rgb(var(--bg-deep)) 50%, rgb(var(--bg-primary)) 100%);
+}
+
+/* 스크롤바 */
+.pop-container ::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+}
+
+.pop-container ::-webkit-scrollbar-track {
+    background: rgb(var(--bg-secondary));
+}
+
+.pop-container ::-webkit-scrollbar-thumb {
+    background: rgb(var(--border-light));
+    border-radius: var(--radius-full);
+}
+
+.pop-container ::-webkit-scrollbar-thumb:hover {
+    background: rgb(var(--neon-cyan-dim));
+}
+
+/* ==================== 앱 레이아웃 ==================== */
+.pop-app {
+    display: flex;
+    flex-direction: column;
+    min-height: 100%;
+    padding: var(--spacing-sm);
+    padding-bottom: calc(60px + var(--spacing-sm) + env(safe-area-inset-bottom, 0px));
+}
+
+/* ==================== 헤더 컨테이너 ==================== */
+.pop-header-container {
+    background: var(--gradient-card);
+    border: 1px solid rgb(var(--border));
+    border-radius: var(--radius-lg);
+    margin-bottom: var(--spacing-sm);
+    position: sticky;
+    top: 0;
+    z-index: 100;
+    overflow: hidden;
+}
+
+.pop-header-container::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 1px;
+    background: linear-gradient(90deg, transparent 0%, rgba(0, 212, 255, 0.5) 50%, transparent 100%);
+}
+
+/* 상단 바 */
+.pop-top-bar {
+    display: flex;
+    align-items: center;
+    padding: var(--spacing-xs) var(--spacing-sm);
+    gap: var(--spacing-sm);
+}
+
+.pop-top-bar.row-1 {
+    border-bottom: 1px solid rgba(var(--border), 0.5);
+}
+
+.pop-spacer {
+    flex: 1;
+}
+
+/* 날짜/시간 */
+.pop-datetime {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-xs);
+    font-size: var(--text-2xs);
+}
+
+.pop-date {
+    color: rgb(var(--text-secondary));
+}
+
+.pop-time {
+    color: rgb(var(--neon-cyan));
+    font-weight: 700;
+    font-size: var(--text-xs);
+}
+
+/* 생산유형 버튼 */
+.pop-type-buttons {
+    display: flex;
+    gap: var(--spacing-xs);
+}
+
+.pop-type-btn {
+    padding: 4px var(--spacing-sm);
+    background: rgba(255, 255, 255, 0.03);
+    border: 1px solid rgb(var(--border));
+    border-radius: var(--radius-md);
+    color: rgb(var(--text-muted));
+    font-size: var(--text-2xs);
+    font-weight: 500;
+    cursor: pointer;
+    transition: all var(--transition-fast);
+}
+
+.pop-type-btn:hover {
+    background: rgba(0, 212, 255, 0.08);
+    color: rgb(var(--text-primary));
+}
+
+.pop-type-btn.active {
+    background: linear-gradient(135deg, rgba(0, 212, 255, 0.15) 0%, rgba(0, 180, 220, 0.2) 100%);
+    border-color: rgba(0, 212, 255, 0.5);
+    color: rgb(var(--neon-cyan));
+    box-shadow: 0 0 15px rgba(0, 212, 255, 0.15);
+}
+
+/* 필터 버튼 */
+.pop-filter-btn {
+    display: flex;
+    align-items: center;
+    gap: 2px;
+    padding: 4px var(--spacing-sm);
+    background: rgba(255, 255, 255, 0.03);
+    border: 1px solid rgb(var(--border));
+    border-radius: var(--radius-md);
+    color: rgb(var(--text-secondary));
+    font-size: var(--text-2xs);
+    font-size: var(--text-xs);
+    font-weight: 500;
+    cursor: pointer;
+    transition: all var(--transition-fast);
+    white-space: nowrap;
+}
+
+.pop-filter-btn:hover:not(:disabled) {
+    background: rgba(0, 212, 255, 0.08);
+    border-color: rgba(0, 212, 255, 0.3);
+    color: rgb(var(--text-primary));
+}
+
+.pop-filter-btn:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+}
+
+.pop-filter-btn.active {
+    background: linear-gradient(135deg, rgba(0, 212, 255, 0.15) 0%, rgba(0, 180, 220, 0.2) 100%);
+    border-color: rgba(0, 212, 255, 0.5);
+    color: rgb(var(--neon-cyan));
+}
+
+.pop-filter-btn.primary {
+    background: linear-gradient(135deg, rgba(0, 212, 255, 0.2) 0%, rgba(0, 180, 220, 0.3) 100%);
+    border: 1px solid rgba(0, 212, 255, 0.5);
+    color: rgb(var(--neon-cyan-bright));
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 0 15px rgba(0, 212, 255, 0.2);
+}
+
+.pop-filter-btn.primary:hover:not(:disabled) {
+    background: linear-gradient(135deg, rgba(0, 212, 255, 0.3) 0%, rgba(0, 180, 220, 0.4) 100%);
+    border-color: rgb(var(--neon-cyan));
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), var(--glow-cyan);
+}
+
+/* ==================== 상태 탭 ==================== */
+.pop-status-tabs {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 1px;
+    background: rgb(var(--border));
+    border-radius: var(--radius-lg);
+    overflow: hidden;
+    margin-bottom: var(--spacing-sm);
+    position: sticky;
+    top: 90px;
+    z-index: 99;
+}
+
+.pop-status-tab {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: var(--spacing-sm) var(--spacing-xs);
+    background: rgb(var(--bg-secondary));
+    cursor: pointer;
+    transition: all var(--transition-fast);
+    position: relative;
+}
+
+.pop-status-tab:hover {
+    background: rgb(var(--bg-tertiary));
+}
+
+.pop-status-tab.active {
+    background: linear-gradient(180deg, rgba(0, 212, 255, 0.15) 0%, rgba(0, 212, 255, 0.05) 100%);
+}
+
+/* 밑줄 제거됨 */
+
+.pop-status-tab-label {
+    font-size: var(--text-2xs);
+    color: rgb(var(--text-muted));
+    margin-bottom: 2px;
+}
+
+.pop-status-tab.active .pop-status-tab-label {
+    color: rgb(var(--neon-cyan));
+}
+
+.pop-status-tab-count {
+    font-size: var(--text-lg);
+    font-weight: 700;
+    color: rgb(var(--text-primary));
+}
+
+.pop-status-tab.active .pop-status-tab-count {
+    color: rgb(var(--neon-cyan));
+    text-shadow: var(--glow-cyan);
+}
+
+.pop-status-tab-detail {
+    font-size: var(--text-2xs);
+    color: rgb(var(--text-muted));
+}
+
+/* ==================== 메인 콘텐츠 ==================== */
+.pop-main-content {
+    flex: 1;
+    min-height: 0;
+}
+
+.pop-work-list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-sm);
+}
+
+/* ==================== 작업 카드 ==================== */
+.pop-work-card {
+    background: var(--gradient-card);
+    border: 1px solid rgb(var(--border));
+    border-radius: var(--radius-lg);
+    padding: var(--spacing-md);
+    cursor: pointer;
+    transition: all var(--transition-fast);
+    position: relative;
+    overflow: hidden;
+}
+
+.pop-work-card::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 1px;
+    background: linear-gradient(90deg, transparent 0%, rgba(0, 212, 255, 0.5) 50%, transparent 100%);
+}
+
+.pop-work-card:hover {
+    border-color: rgba(0, 212, 255, 0.3);
+    box-shadow: 0 0 30px rgba(0, 212, 255, 0.1), inset 0 0 30px rgba(0, 212, 255, 0.02);
+}
+
+.pop-work-card.return-card {
+    border-color: rgba(255, 170, 0, 0.4);
+}
+
+.pop-work-card.return-card::before {
+    background: linear-gradient(90deg, transparent 0%, rgba(255, 170, 0, 0.5) 50%, transparent 100%);
+}
+
+/* 카드 헤더 */
+.pop-work-card-header {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-sm);
+    margin-bottom: var(--spacing-sm);
+    flex-wrap: wrap;
+}
+
+.pop-work-number {
+    font-size: var(--text-sm);
+    font-weight: 700;
+    color: rgb(var(--neon-cyan));
+}
+
+.pop-work-status {
+    padding: 2px 8px;
+    border-radius: var(--radius-full);
+    font-size: var(--text-2xs);
+    font-weight: 600;
+}
+
+.pop-work-status.waiting {
+    background: rgba(0, 212, 255, 0.15);
+    color: rgb(var(--neon-cyan));
+}
+
+.pop-work-status.in-progress {
+    background: rgba(255, 170, 0, 0.15);
+    color: rgb(var(--warning));
+}
+
+.pop-work-status.completed {
+    background: rgba(0, 255, 136, 0.15);
+    color: rgb(var(--success));
+}
+
+.pop-work-status.return {
+    background: rgba(255, 170, 0, 0.2);
+    color: rgb(var(--warning));
+}
+
+/* 리턴 배지 */
+.pop-return-badge {
+    padding: 2px 6px;
+    background: rgba(255, 170, 0, 0.2);
+    border: 1px solid rgba(255, 170, 0, 0.4);
+    border-radius: var(--radius-sm);
+    font-size: var(--text-2xs);
+    font-weight: 600;
+    color: rgb(var(--warning));
+}
+
+/* 분할접수 배지 */
+.pop-partial-badge {
+    padding: 2px 6px;
+    background: rgba(0, 212, 255, 0.1);
+    border: 1px solid rgba(0, 212, 255, 0.3);
+    border-radius: var(--radius-sm);
+    font-size: var(--text-2xs);
+    color: rgb(var(--neon-cyan));
+}
+
+/* 리턴 정보 배너 */
+.pop-return-banner {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--spacing-sm);
+    padding: var(--spacing-sm);
+    background: rgba(255, 170, 0, 0.1);
+    border: 1px solid rgba(255, 170, 0, 0.3);
+    border-radius: var(--radius-md);
+    margin-bottom: var(--spacing-sm);
+}
+
+.pop-return-banner-icon {
+    font-size: var(--text-base);
+}
+
+.pop-return-banner-title {
+    font-size: var(--text-xs);
+    font-weight: 600;
+    color: rgb(var(--warning));
+}
+
+.pop-return-banner-reason {
+    font-size: var(--text-2xs);
+    color: rgb(var(--text-muted));
+}
+
+/* 카드 바디 */
+.pop-work-card-body {
+    margin-bottom: var(--spacing-sm);
+}
+
+.pop-work-info-line {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--spacing-md);
+}
+
+.pop-work-info-item {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-xs);
+}
+
+.pop-work-info-label {
+    font-size: var(--text-2xs);
+    color: rgb(var(--text-muted));
+}
+
+.pop-work-info-value {
+    font-size: var(--text-xs);
+    color: rgb(var(--text-primary));
+    font-weight: 500;
+}
+
+/* 카드 액션 */
+.pop-work-card-actions {
+    display: flex;
+    gap: var(--spacing-xs);
+    margin-left: auto;
+}
+
+/* ==================== 공정 타임라인 ==================== */
+.pop-process-timeline {
+    margin-top: var(--spacing-sm);
+}
+
+.pop-process-bar {
+    margin-bottom: var(--spacing-sm);
+}
+
+.pop-process-bar-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: var(--spacing-xs);
+}
+
+.pop-process-bar-label {
+    font-size: var(--text-2xs);
+    color: rgb(var(--text-muted));
+}
+
+.pop-process-bar-count {
+    font-size: var(--text-2xs);
+    color: rgb(var(--text-muted));
+}
+
+.pop-process-bar-count span {
+    color: rgb(var(--neon-cyan));
+    font-weight: 600;
+}
+
+.pop-process-segments {
+    display: flex;
+    gap: 2px;
+    height: 4px;
+}
+
+.pop-process-segment {
+    flex: 1;
+    background: rgb(var(--border));
+    border-radius: 2px;
+    transition: all var(--transition-fast);
+}
+
+.pop-process-segment.done {
+    background: rgb(var(--success));
+    box-shadow: var(--glow-success);
+}
+
+.pop-process-segment.current {
+    background: rgb(var(--warning));
+    box-shadow: var(--glow-warning);
+    animation: pulse-glow 2s ease-in-out infinite;
+}
+
+.pop-process-segment.my-work {
+    border: 1px solid rgb(var(--neon-cyan));
+}
+
+/* 공정 칩 */
+.pop-process-chips-container {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-xs);
+    position: relative;
+}
+
+.pop-process-scroll-btn {
+    width: 24px;
+    height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgb(var(--bg-tertiary));
+    border: 1px solid rgb(var(--border));
+    border-radius: var(--radius-sm);
+    color: rgb(var(--text-muted));
+    cursor: pointer;
+    flex-shrink: 0;
+    transition: all var(--transition-fast);
+}
+
+.pop-process-scroll-btn:hover {
+    background: rgba(0, 212, 255, 0.1);
+    border-color: rgba(0, 212, 255, 0.3);
+    color: rgb(var(--neon-cyan));
+}
+
+.pop-process-scroll-btn.hidden {
+    visibility: hidden;
+}
+
+.pop-process-chips {
+    display: flex;
+    gap: var(--spacing-xs);
+    overflow-x: auto;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+    scroll-behavior: smooth;
+    flex: 1;
+}
+
+.pop-process-chips::-webkit-scrollbar {
+    display: none;
+}
+
+.pop-process-chip {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    padding: 4px 8px;
+    font-size: var(--text-2xs);
+    background: rgba(255, 255, 255, 0.03);
+    border: 1px solid rgb(var(--border));
+    border-radius: var(--radius-sm);
+    font-size: var(--text-2xs);
+    color: rgb(var(--text-muted));
+    white-space: nowrap;
+    flex-shrink: 0;
+    transition: all var(--transition-fast);
+}
+
+.pop-chip-num {
+    width: 16px;
+    height: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgb(var(--border));
+    border-radius: 50%;
+    font-size: 9px;
+    font-weight: 600;
+}
+
+.pop-process-chip.done {
+    background: rgba(0, 255, 136, 0.1);
+    border-color: rgba(0, 255, 136, 0.3);
+    color: rgb(var(--success));
+}
+
+.pop-process-chip.done .pop-chip-num {
+    background: rgb(var(--success));
+    color: white;
+}
+
+.pop-process-chip.current {
+    background: rgba(255, 170, 0, 0.1);
+    border-color: rgba(255, 170, 0, 0.4);
+    color: rgb(var(--warning));
+}
+
+.pop-process-chip.current .pop-chip-num {
+    background: rgb(var(--warning));
+    color: white;
+}
+
+.pop-process-chip.my-work {
+    border-color: rgb(var(--neon-cyan));
+    box-shadow: 0 0 10px rgba(0, 212, 255, 0.2);
+}
+
+/* ==================== 진행률 바 ==================== */
+.pop-work-progress {
+    margin-top: var(--spacing-sm);
+    padding-top: var(--spacing-sm);
+    border-top: 1px solid rgba(var(--border), 0.5);
+}
+
+.pop-progress-info {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: var(--spacing-xs);
+}
+
+.pop-progress-text {
+    font-size: var(--text-2xs);
+    color: rgb(var(--text-muted));
+}
+
+.pop-progress-percent {
+    font-size: var(--text-xs);
+    font-weight: 600;
+    color: rgb(var(--neon-cyan));
+}
+
+.pop-progress-bar {
+    height: 4px;
+    background: rgb(var(--border));
+    border-radius: 2px;
+    overflow: hidden;
+}
+
+.pop-progress-fill {
+    height: 100%;
+    background: linear-gradient(90deg, rgb(var(--neon-cyan)) 0%, rgb(var(--neon-cyan-bright)) 100%);
+    border-radius: 2px;
+    transition: width var(--transition-normal);
+}
+
+/* ==================== 빈 상태 ==================== */
+.pop-empty-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: var(--spacing-2xl);
+    text-align: center;
+}
+
+.pop-empty-state-text {
+    font-size: var(--text-base);
+    font-weight: 600;
+    color: rgb(var(--text-primary));
+    margin-bottom: var(--spacing-xs);
+}
+
+.pop-empty-state-desc {
+    font-size: var(--text-sm);
+    color: rgb(var(--text-muted));
+}
+
+/* ==================== 하단 네비게이션 ==================== */
+.pop-bottom-nav {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    display: flex;
+    gap: var(--spacing-sm);
+    padding: var(--spacing-sm) var(--spacing-md);
+    padding-bottom: calc(var(--spacing-sm) + env(safe-area-inset-bottom, 0px));
+    background: rgba(13, 19, 35, 0.95);
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+    border-top: 1px solid rgb(var(--border));
+    z-index: var(--z-fixed);
+}
+
+.pop-nav-btn {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--spacing-sm);
+    padding: var(--spacing-md);
+    border-radius: var(--radius-md);
+    font-size: var(--text-sm);
+    font-weight: 600;
+    cursor: pointer;
+    transition: all var(--transition-fast);
+}
+
+.pop-nav-btn svg {
+    width: 18px;
+    height: 18px;
+}
+
+.pop-nav-btn.secondary {
+    background: rgba(255, 255, 255, 0.03);
+    border: 1px solid rgb(var(--border));
+    color: rgb(var(--text-secondary));
+}
+
+.pop-nav-btn.secondary:hover {
+    background: rgba(0, 212, 255, 0.08);
+    border-color: rgba(0, 212, 255, 0.3);
+    color: rgb(var(--text-primary));
+}
+
+.pop-nav-btn.primary {
+    background: linear-gradient(135deg, rgba(0, 212, 255, 0.2) 0%, rgba(0, 180, 220, 0.3) 100%);
+    border: 1px solid rgba(0, 212, 255, 0.5);
+    color: rgb(var(--neon-cyan-bright));
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 0 15px rgba(0, 212, 255, 0.2);
+}
+
+.pop-nav-btn.primary:hover {
+    background: linear-gradient(135deg, rgba(0, 212, 255, 0.3) 0%, rgba(0, 180, 220, 0.4) 100%);
+    border-color: rgb(var(--neon-cyan));
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), var(--glow-cyan);
+}
+
+/* ==================== 버튼 ==================== */
+.pop-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--spacing-sm);
+    padding: var(--spacing-md) var(--spacing-lg);
+    border: 1px solid transparent;
+    border-radius: var(--radius-md);
+    font-size: var(--text-sm);
+    font-weight: 600;
+    cursor: pointer;
+    transition: all var(--transition-fast);
+    white-space: nowrap;
+}
+
+.pop-btn:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+}
+
+.pop-btn-sm {
+    padding: var(--spacing-xs) var(--spacing-sm);
+    font-size: var(--text-2xs);
+}
+
+.pop-btn-primary {
+    background: linear-gradient(135deg, rgba(0, 212, 255, 0.2) 0%, rgba(0, 180, 220, 0.3) 100%);
+    border: 1px solid rgba(0, 212, 255, 0.5);
+    color: rgb(var(--neon-cyan-bright));
+}
+
+.pop-btn-primary:hover:not(:disabled) {
+    background: linear-gradient(135deg, rgba(0, 212, 255, 0.3) 0%, rgba(0, 180, 220, 0.4) 100%);
+    border-color: rgb(var(--neon-cyan));
+    box-shadow: var(--glow-cyan);
+}
+
+.pop-btn-success {
+    background: linear-gradient(135deg, rgba(0, 255, 136, 0.15) 0%, rgba(0, 200, 100, 0.25) 100%);
+    border: 1px solid rgba(0, 255, 136, 0.4);
+    color: rgb(var(--success));
+}
+
+.pop-btn-success:hover:not(:disabled) {
+    background: linear-gradient(135deg, rgba(0, 255, 136, 0.25) 0%, rgba(0, 200, 100, 0.35) 100%);
+    box-shadow: var(--glow-success);
+}
+
+.pop-btn-ghost {
+    background: transparent;
+    border: none;
+    color: rgb(var(--text-muted));
+}
+
+.pop-btn-ghost:hover:not(:disabled) {
+    background: rgba(0, 212, 255, 0.1);
+    color: rgb(var(--neon-cyan));
+}
+
+.pop-btn-outline {
+    background: rgba(255, 255, 255, 0.03);
+    border: 1px solid rgb(var(--border));
+    color: rgb(var(--text-secondary));
+}
+
+.pop-btn-outline:hover:not(:disabled) {
+    background: rgba(0, 212, 255, 0.08);
+    border-color: rgba(0, 212, 255, 0.4);
+    color: rgb(var(--neon-cyan));
+}
+
+/* ==================== 모달 ==================== */
+.pop-modal-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(8, 12, 21, 0.85);
+    backdrop-filter: blur(8px);
+    -webkit-backdrop-filter: blur(8px);
+    z-index: var(--z-modal-backdrop);
+    display: none;
+    align-items: center;
+    justify-content: center;
+    padding: var(--spacing-lg);
+}
+
+.pop-modal-overlay.active {
+    display: flex;
+}
+
+.pop-modal {
+    background: var(--gradient-card);
+    border: 1px solid rgb(var(--border));
+    border-radius: var(--radius-xl);
+    width: 100%;
+    max-width: 500px;
+    max-height: 85vh;
+    display: flex;
+    flex-direction: column;
+    box-shadow: var(--shadow-lg), 0 0 60px rgba(0, 212, 255, 0.1);
+    position: relative;
+    overflow: hidden;
+}
+
+.pop-modal::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 2px;
+    background: linear-gradient(90deg, transparent 0%, rgb(var(--neon-cyan)) 30%, rgb(var(--neon-pink)) 70%, transparent 100%);
+}
+
+.pop-modal-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--spacing-lg) var(--spacing-xl);
+    border-bottom: 1px solid rgb(var(--border));
+}
+
+.pop-modal-title {
+    font-size: var(--text-lg);
+    font-weight: 700;
+    color: rgb(var(--text-primary));
+}
+
+.pop-modal-close {
+    width: 28px;
+    height: 28px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid rgb(var(--border));
+    border-radius: var(--radius-md);
+    color: rgb(var(--text-muted));
+    cursor: pointer;
+    transition: all var(--transition-fast);
+}
+
+.pop-modal-close:hover {
+    background: rgba(255, 51, 51, 0.15);
+    border-color: rgba(255, 51, 51, 0.4);
+    color: rgb(var(--danger));
+}
+
+.pop-modal-body {
+    flex: 1;
+    overflow-y: auto;
+    padding: var(--spacing-xl);
+}
+
+.pop-modal-footer {
+    display: flex;
+    gap: var(--spacing-md);
+    padding: var(--spacing-lg) var(--spacing-xl);
+    border-top: 1px solid rgb(var(--border));
+}
+
+/* 선택 그리드 */
+.pop-selection-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+    gap: var(--spacing-md);
+}
+
+.pop-selection-card {
+    padding: var(--spacing-lg);
+    background: rgba(255, 255, 255, 0.02);
+    border: 2px solid rgb(var(--border));
+    border-radius: var(--radius-lg);
+    cursor: pointer;
+    transition: all var(--transition-fast);
+    text-align: center;
+    position: relative;
+}
+
+.pop-selection-card:hover {
+    background: rgba(0, 212, 255, 0.05);
+    border-color: rgba(0, 212, 255, 0.3);
+}
+
+.pop-selection-card.selected {
+    background: linear-gradient(135deg, rgba(0, 212, 255, 0.1) 0%, rgba(0, 180, 220, 0.15) 100%);
+    border-color: rgb(var(--neon-cyan));
+    box-shadow: var(--glow-cyan);
+}
+
+.pop-selection-card-check {
+    position: absolute;
+    top: var(--spacing-sm);
+    right: var(--spacing-sm);
+    width: 20px;
+    height: 20px;
+    background: rgb(var(--neon-cyan));
+    border-radius: 50%;
+    display: none;
+    align-items: center;
+    justify-content: center;
+    color: white;
+    font-size: var(--text-2xs);
+    box-shadow: var(--glow-cyan);
+}
+
+.pop-selection-card.selected .pop-selection-card-check {
+    display: flex;
+}
+
+.pop-selection-card-icon {
+    font-size: 2rem;
+    margin-bottom: var(--spacing-sm);
+}
+
+.pop-selection-card-name {
+    font-size: var(--text-sm);
+    font-weight: 600;
+    color: rgb(var(--text-primary));
+    margin-bottom: var(--spacing-xs);
+}
+
+.pop-selection-card-info {
+    font-size: var(--text-2xs);
+    color: rgb(var(--text-muted));
+}
+
+/* ==================== 슬라이드 패널 ==================== */
+.pop-slide-panel {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: var(--z-modal);
+    display: none;
+}
+
+.pop-slide-panel.active {
+    display: block;
+}
+
+.pop-slide-panel-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(8, 12, 21, 0.7);
+    backdrop-filter: blur(4px);
+}
+
+.pop-slide-panel-content {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    max-width: none;
+    background: rgb(var(--bg-primary));
+    display: flex;
+    flex-direction: column;
+    box-shadow: -10px 0 50px rgba(0, 0, 0, 0.5);
+    animation: slideIn 0.3s ease;
+}
+
+@keyframes slideIn {
+    from {
+        transform: translateX(100%);
+    }
+    to {
+        transform: translateX(0);
+    }
+}
+
+.pop-slide-panel-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--spacing-md) var(--spacing-lg);
+    background: var(--gradient-card);
+    border-bottom: 1px solid rgb(var(--border));
+}
+
+.pop-slide-panel-title {
+    font-size: var(--text-xl);
+    font-weight: 700;
+    color: rgb(var(--text-primary));
+}
+
+/* 슬라이드 패널 날짜/시간 */
+.pop-panel-datetime {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-sm);
+}
+
+.pop-panel-date {
+    font-size: var(--text-sm);
+    color: rgb(var(--text-muted));
+}
+
+.pop-panel-time {
+    font-size: var(--text-base);
+    font-weight: 700;
+    color: rgb(var(--neon-cyan));
+}
+
+.pop-badge {
+    padding: 2px 8px;
+    border-radius: var(--radius-full);
+    font-size: var(--text-2xs);
+    font-weight: 600;
+}
+
+.pop-badge-primary {
+    background: rgba(0, 212, 255, 0.15);
+    color: rgb(var(--neon-cyan));
+}
+
+.pop-slide-panel-body {
+    flex: 1;
+    display: flex;
+    overflow: hidden;
+}
+
+.pop-panel-body-content {
+    display: flex;
+    flex: 1;
+    overflow: hidden;
+}
+
+/* 작업순서 사이드바 */
+.pop-work-steps-sidebar {
+    width: 180px;
+    min-width: 180px;
+    background: rgb(var(--bg-secondary));
+    border-right: 1px solid rgb(var(--border));
+    display: flex;
+    flex-direction: column;
+}
+
+.pop-work-steps-header {
+    padding: var(--spacing-md);
+    font-size: var(--text-sm);
+    font-weight: 600;
+    color: rgb(var(--text-muted));
+    border-bottom: 1px solid rgb(var(--border));
+}
+
+.pop-work-steps-list {
+    flex: 1;
+    overflow-y: auto;
+    padding: var(--spacing-sm);
+}
+
+.pop-work-step-item {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-sm);
+    padding: var(--spacing-sm);
+    border-radius: var(--radius-md);
+    cursor: pointer;
+    transition: all var(--transition-fast);
+    margin-bottom: var(--spacing-xs);
+}
+
+.pop-work-step-item:hover {
+    background: rgba(0, 212, 255, 0.05);
+}
+
+.pop-work-step-item.active {
+    background: rgba(0, 212, 255, 0.1);
+    border: 1px solid rgba(0, 212, 255, 0.3);
+}
+
+.pop-work-step-item.completed {
+    opacity: 0.7;
+}
+
+.pop-work-step-number {
+    width: 24px;
+    height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgb(var(--border));
+    border-radius: 50%;
+    font-size: var(--text-2xs);
+    font-weight: 600;
+    color: rgb(var(--text-muted));
+}
+
+.pop-work-step-item.active .pop-work-step-number {
+    background: rgb(var(--neon-cyan));
+    color: white;
+}
+
+.pop-work-step-item.completed .pop-work-step-number {
+    background: rgb(var(--success));
+    color: white;
+}
+
+.pop-work-step-info {
+    flex: 1;
+    min-width: 0;
+}
+
+.pop-work-step-name {
+    font-size: var(--text-sm);
+    font-weight: 500;
+    color: rgb(var(--text-primary));
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.pop-work-step-time {
+    font-size: var(--text-xs);
+    color: rgb(var(--text-muted));
+}
+
+.pop-work-step-status {
+    font-size: var(--text-xs);
+    padding: 3px 8px;
+    border-radius: var(--radius-sm);
+}
+
+.pop-work-step-status.pending {
+    background: rgb(var(--border));
+    color: rgb(var(--text-muted));
+}
+
+.pop-work-step-status.in-progress {
+    background: rgba(255, 170, 0, 0.15);
+    color: rgb(var(--warning));
+}
+
+.pop-work-step-status.completed {
+    background: rgba(0, 255, 136, 0.15);
+    color: rgb(var(--success));
+}
+
+/* 작업 콘텐츠 영역 */
+.pop-work-content-area {
+    flex: 1;
+    padding: var(--spacing-lg);
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-md);
+}
+
+.pop-step-header {
+    margin-bottom: var(--spacing-md);
+}
+
+.pop-step-title {
+    font-size: var(--text-xl);
+    font-weight: 700;
+    color: rgb(var(--text-primary));
+    margin-bottom: var(--spacing-xs);
+}
+
+.pop-step-description {
+    font-size: var(--text-base);
+    color: rgb(var(--text-muted));
+}
+
+/* 시간 컨트롤 */
+.pop-step-time-controls {
+    display: flex;
+    gap: var(--spacing-sm);
+}
+
+.pop-time-control-btn {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--spacing-sm);
+    padding: var(--spacing-md) var(--spacing-lg);
+    background: rgba(255, 255, 255, 0.03);
+    border: 1px solid rgb(var(--border));
+    border-radius: var(--radius-md);
+    color: rgb(var(--text-secondary));
+    font-size: var(--text-base);
+    font-weight: 500;
+    cursor: pointer;
+    transition: all var(--transition-fast);
+}
+
+.pop-time-control-btn svg {
+    width: 20px;
+    height: 20px;
+}
+
+.pop-time-control-btn:hover:not(:disabled) {
+    background: rgba(0, 212, 255, 0.08);
+    border-color: rgba(0, 212, 255, 0.3);
+}
+
+.pop-time-control-btn:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+}
+
+.pop-time-control-btn.start:not(:disabled) {
+    background: rgba(0, 255, 136, 0.1);
+    border-color: rgba(0, 255, 136, 0.3);
+    color: rgb(var(--success));
+}
+
+.pop-time-control-btn.end:not(:disabled) {
+    background: rgba(255, 51, 51, 0.1);
+    border-color: rgba(255, 51, 51, 0.3);
+    color: rgb(var(--danger));
+}
+
+/* 폼 섹션 */
+.pop-step-form-section {
+    background: rgba(255, 255, 255, 0.02);
+    border: 1px solid rgb(var(--border));
+    border-radius: var(--radius-md);
+    padding: var(--spacing-md);
+}
+
+.pop-step-form-title {
+    font-size: var(--text-base);
+    font-weight: 600;
+    color: rgb(var(--text-primary));
+    margin-bottom: var(--spacing-md);
+}
+
+.pop-form-group {
+    margin-bottom: var(--spacing-md);
+}
+
+.pop-form-group:last-child {
+    margin-bottom: 0;
+}
+
+.pop-form-label {
+    display: block;
+    font-size: var(--text-sm);
+    font-weight: 500;
+    color: rgb(var(--text-secondary));
+    margin-bottom: var(--spacing-xs);
+}
+
+/* 체크박스 리스트 */
+.pop-checkbox-list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-md);
+}
+
+.pop-checkbox-label {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-sm);
+    font-size: var(--text-base);
+    color: rgb(var(--text-primary));
+    cursor: pointer;
+}
+
+.pop-checkbox {
+    width: 20px;
+    height: 20px;
+    accent-color: rgb(var(--neon-cyan));
+    cursor: pointer;
+}
+
+.pop-checkbox:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+.pop-checkbox-label:has(.pop-checkbox:disabled) {
+    opacity: 0.6;
+    cursor: not-allowed;
+}
+
+.pop-input {
+    width: 100%;
+    padding: var(--spacing-md);
+    background: rgba(var(--bg-tertiary), 0.5);
+    border: 1px solid rgb(var(--border));
+    border-radius: var(--radius-md);
+    color: rgb(var(--text-primary));
+    font-size: var(--text-base);
+    transition: all var(--transition-fast);
+}
+
+.pop-input::placeholder {
+    color: rgb(var(--text-muted));
+}
+
+.pop-input:focus {
+    border-color: rgba(0, 212, 255, 0.5);
+    box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.1), 0 0 15px rgba(0, 212, 255, 0.1);
+    outline: none;
+}
+
+.pop-input:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+.pop-form-row {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: var(--spacing-md);
+}
+
+/* 슬라이드 패널 푸터 */
+.pop-slide-panel-footer {
+    display: flex;
+    gap: var(--spacing-md);
+    padding: var(--spacing-md) var(--spacing-lg);
+    background: var(--gradient-card);
+    border-top: 1px solid rgb(var(--border));
+}
+
+/* 작업지시 정보 섹션 */
+.pop-work-order-info-section {
+    padding: var(--spacing-md) var(--spacing-lg);
+    background: rgba(0, 0, 0, 0.2);
+    border-bottom: 1px solid rgb(var(--border));
+}
+
+.pop-work-order-info-card {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+    gap: var(--spacing-sm);
+}
+
+.pop-work-order-info-item {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+}
+
+.pop-work-order-info-item .label {
+    font-size: var(--text-xs);
+    color: rgb(var(--text-muted));
+}
+
+.pop-work-order-info-item .value {
+    font-size: var(--text-base);
+    font-weight: 500;
+    color: rgb(var(--text-primary));
+}
+
+.pop-work-order-info-item .value.primary {
+    color: rgb(var(--neon-cyan));
+}
+
+/* ==================== 분할접수 모달 ==================== */
+.pop-accept-modal-content {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-lg);
+}
+
+.pop-accept-work-info {
+    padding: var(--spacing-md);
+    background: rgba(0, 0, 0, 0.3);
+    border: 1px solid rgb(var(--border));
+    border-radius: var(--radius-md);
+}
+
+.pop-accept-work-info .work-id {
+    font-size: var(--text-sm);
+    font-weight: 700;
+    color: rgb(var(--text-primary));
+    margin-bottom: var(--spacing-xs);
+}
+
+.pop-accept-work-info .work-name {
+    font-size: var(--text-xs);
+    color: rgb(var(--text-secondary));
+}
+
+.pop-quantity-input-wrapper {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-xs);
+    background: rgba(0, 0, 0, 0.3);
+    border: 1px solid rgb(var(--border));
+    border-radius: var(--radius-md);
+    padding: var(--spacing-xs);
+}
+
+.pop-qty-btn {
+    padding: var(--spacing-sm) var(--spacing-md);
+    background: rgba(0, 212, 255, 0.1);
+    border: 1px solid rgba(0, 212, 255, 0.3);
+    border-radius: var(--radius-sm);
+    color: rgb(var(--neon-cyan));
+    font-size: var(--text-sm);
+    font-weight: 600;
+    cursor: pointer;
+    transition: all var(--transition-fast);
+}
+
+.pop-qty-btn:hover {
+    background: rgba(0, 212, 255, 0.2);
+}
+
+.pop-qty-btn.minus {
+    background: rgba(255, 51, 51, 0.1);
+    border-color: rgba(255, 51, 51, 0.3);
+    color: rgb(var(--danger));
+}
+
+.pop-qty-btn.minus:hover {
+    background: rgba(255, 51, 51, 0.2);
+}
+
+.pop-qty-input {
+    flex: 1;
+    padding: var(--spacing-sm);
+    background: transparent;
+    border: none;
+    color: rgb(var(--text-primary));
+    font-size: var(--text-lg);
+    font-weight: 700;
+    text-align: center;
+}
+
+.pop-qty-input:focus {
+    outline: none;
+}
+
+.pop-qty-hint {
+    font-size: var(--text-xs);
+    color: rgb(var(--text-muted));
+    text-align: center;
+    margin-top: var(--spacing-xs);
+}
+
+.pop-accept-info-box {
+    display: flex;
+    gap: var(--spacing-sm);
+    padding: var(--spacing-md);
+    background: rgba(0, 212, 255, 0.05);
+    border: 1px solid rgba(0, 212, 255, 0.2);
+    border-radius: var(--radius-md);
+}
+
+.pop-accept-info-box .info-icon {
+    font-size: var(--text-lg);
+}
+
+.pop-accept-info-box .info-title {
+    font-size: var(--text-sm);
+    font-weight: 600;
+    color: rgb(var(--neon-cyan));
+    margin-bottom: 2px;
+}
+
+.pop-accept-info-box .info-desc {
+    font-size: var(--text-xs);
+    color: rgb(var(--text-muted));
+}
+
+/* ==================== 설정 모달 ==================== */
+.pop-settings-section {
+    margin-bottom: var(--spacing-lg);
+}
+
+.pop-settings-title {
+    font-size: var(--text-sm);
+    font-weight: 600;
+    color: rgb(var(--text-primary));
+    margin-bottom: var(--spacing-md);
+}
+
+.pop-mode-options {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-sm);
+}
+
+.pop-mode-option {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--spacing-md);
+    padding: var(--spacing-md);
+    background: rgba(255, 255, 255, 0.02);
+    border: 1px solid rgb(var(--border));
+    border-radius: var(--radius-md);
+    cursor: pointer;
+    transition: all var(--transition-fast);
+}
+
+.pop-mode-option:hover {
+    background: rgba(0, 212, 255, 0.05);
+    border-color: rgba(0, 212, 255, 0.3);
+}
+
+.pop-mode-option input[type="radio"] {
+    margin-top: 2px;
+    accent-color: rgb(var(--neon-cyan));
+}
+
+.pop-mode-info {
+    flex: 1;
+}
+
+.pop-mode-name {
+    font-size: var(--text-sm);
+    font-weight: 600;
+    color: rgb(var(--text-primary));
+    margin-bottom: 2px;
+}
+
+.pop-mode-desc {
+    font-size: var(--text-xs);
+    color: rgb(var(--text-muted));
+}
+
+.pop-settings-divider {
+    height: 1px;
+    background: rgb(var(--border));
+    margin: var(--spacing-lg) 0;
+}
+
+/* ==================== 테마 토글 ==================== */
+/* 기존 플로팅 테마 토글 (더 이상 사용 안함) */
+.pop-theme-toggle {
+    display: none;
+}
+
+/* 헤더 인라인 테마 토글 버튼 */
+.pop-theme-toggle-inline {
+    width: 26px;
+    height: 26px;
+    margin-left: var(--spacing-xs);
+    border-radius: var(--radius-md);
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid rgb(var(--border));
+    color: rgb(var(--text-secondary));
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all var(--transition-fast);
+    flex-shrink: 0;
+}
+
+.pop-theme-toggle-inline:hover {
+    border-color: rgb(var(--neon-cyan));
+    color: rgb(var(--neon-cyan));
+    box-shadow: var(--glow-cyan);
+}
+
+.pop-theme-toggle-inline svg {
+    width: 14px;
+    height: 14px;
+}
+
+/* ==================== 아이콘 버튼 ==================== */
+.pop-icon-btn {
+    width: 32px;
+    height: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--radius-md);
+    background: rgba(255, 255, 255, 0.03);
+    border: 1px solid rgb(var(--border));
+    color: rgb(var(--text-muted));
+    cursor: pointer;
+    transition: all var(--transition-fast);
+}
+
+.pop-icon-btn svg {
+    width: 16px;
+    height: 16px;
+}
+
+.pop-icon-btn:hover {
+    background: rgba(0, 212, 255, 0.1);
+    border-color: rgba(0, 212, 255, 0.4);
+    color: rgb(var(--neon-cyan));
+}
+
+/* ==================== 애니메이션 ==================== */
+@keyframes pulse-glow {
+    0%, 100% {
+        box-shadow: 0 0 5px rgba(0, 212, 255, 0.5);
+    }
+    50% {
+        box-shadow: 0 0 20px rgba(0, 212, 255, 0.8), 0 0 30px rgba(0, 212, 255, 0.4);
+    }
+}
+
+/* ==================== 반응형 ==================== */
+@media (max-width: 768px) {
+    .pop-work-steps-sidebar {
+        width: 100%;
+        max-height: 150px;
+        border-right: none;
+        border-bottom: 1px solid rgb(var(--border));
+    }
+    
+    .pop-work-steps-list {
+        display: flex;
+        overflow-x: auto;
+        padding: var(--spacing-xs);
+        gap: var(--spacing-xs);
+    }
+    
+    .pop-work-step-item {
+        flex: 0 0 auto;
+        min-width: 100px;
+    }
+    
+    .pop-panel-body-content {
+        flex-direction: column;
+    }
+    
+    .pop-slide-panel-content {
+        max-width: none;
+        left: 0;
+    }
+}
+
+/* 태블릿 이상 (768px+) - 폰트 크기 증가 */
+@media (min-width: 768px) {
+    /* 상태 탭 sticky 위치 조정 */
+    .pop-status-tabs {
+        top: 100px;
+    }
+    
+    /* 헤더 */
+    .pop-top-bar {
+        font-size: var(--text-sm);
+        padding: var(--spacing-sm) var(--spacing-md);
+        gap: var(--spacing-md);
+    }
+    
+    .pop-datetime {
+        font-size: var(--text-xs);
+    }
+    
+    .pop-time {
+        font-size: var(--text-sm);
+    }
+    
+    .pop-type-btn {
+        font-size: var(--text-xs);
+        padding: var(--spacing-xs) var(--spacing-md);
+    }
+    
+    .pop-filter-btn {
+        font-size: var(--text-xs);
+        padding: var(--spacing-xs) var(--spacing-md);
+    }
+    
+    .pop-theme-toggle-inline {
+        width: 32px;
+        height: 32px;
+    }
+    
+    .pop-theme-toggle-inline svg {
+        width: 16px;
+        height: 16px;
+    }
+    
+    .pop-equipment-name,
+    .pop-process-name {
+        font-size: var(--text-sm);
+    }
+    
+    /* 상태 탭 */
+    .pop-status-tab-label {
+        font-size: var(--text-base);
+    }
+    
+    .pop-status-tab-count {
+        font-size: var(--text-xl);
+    }
+    
+    .pop-status-tab-detail {
+        font-size: var(--text-sm);
+    }
+    
+    /* 작업 카드 */
+    .pop-work-card-id {
+        font-size: var(--text-base);
+    }
+    
+    .pop-work-card-item {
+        font-size: var(--text-lg);
+    }
+    
+    .pop-work-card-spec {
+        font-size: var(--text-base);
+    }
+    
+    .pop-work-card-info-item .label {
+        font-size: var(--text-sm);
+    }
+    
+    .pop-work-card-info-item .value {
+        font-size: var(--text-base);
+    }
+    
+    /* 작업 카드 내부 - 태블릿 */
+    .pop-work-number {
+        font-size: var(--text-base);
+    }
+    
+    .pop-work-status {
+        font-size: var(--text-xs);
+        padding: 3px 10px;
+    }
+    
+    .pop-work-info-label {
+        font-size: var(--text-xs);
+    }
+    
+    .pop-work-info-value {
+        font-size: var(--text-sm);
+    }
+    
+    .pop-process-bar-label,
+    .pop-process-bar-count {
+        font-size: var(--text-xs);
+    }
+    
+    .pop-process-chip {
+        font-size: var(--text-xs);
+        padding: 5px 10px;
+    }
+    
+    .pop-progress-text,
+    .pop-progress-percent {
+        font-size: var(--text-sm);
+    }
+    
+    .pop-btn-sm {
+        font-size: var(--text-xs);
+        padding: var(--spacing-xs) var(--spacing-md);
+    }
+    
+    /* 공정 타임라인 */
+    .pop-process-step-label {
+        font-size: var(--text-sm);
+    }
+    
+    /* 하단 네비게이션 */
+    .pop-nav-btn {
+        font-size: var(--text-base);
+    }
+    
+    /* 배지 */
+    .pop-badge {
+        font-size: var(--text-sm);
+        padding: 4px 10px;
+    }
+}
+
+@media (min-width: 1024px) {
+    .pop-app {
+        max-width: 1200px;
+        margin: 0 auto;
+        padding: var(--spacing-lg);
+        padding-bottom: calc(64px + var(--spacing-lg) + env(safe-area-inset-bottom, 0px));
+    }
+    
+    /* 상태 탭 sticky 위치 조정 - 데스크톱 */
+    .pop-status-tabs {
+        top: 110px;
+    }
+    
+    .pop-work-list {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
+        gap: var(--spacing-md);
+    }
+    
+    .pop-slide-panel-content {
+        max-width: none;
+        left: 0;
+    }
+    
+    .pop-work-steps-sidebar {
+        width: 280px;
+    }
+    
+    /* 데스크톱 (1024px+) - 폰트 크기 더 증가 */
+    
+    /* 헤더 */
+    .pop-top-bar {
+        font-size: var(--text-base);
+        padding: var(--spacing-sm) var(--spacing-lg);
+    }
+    
+    .pop-datetime {
+        font-size: var(--text-sm);
+    }
+    
+    .pop-time {
+        font-size: var(--text-base);
+    }
+    
+    .pop-type-btn {
+        font-size: var(--text-sm);
+        padding: var(--spacing-sm) var(--spacing-md);
+    }
+    
+    .pop-filter-btn {
+        font-size: var(--text-sm);
+        padding: var(--spacing-sm) var(--spacing-md);
+    }
+    
+    .pop-theme-toggle-inline {
+        width: 36px;
+        height: 36px;
+    }
+    
+    .pop-theme-toggle-inline svg {
+        width: 18px;
+        height: 18px;
+    }
+    
+    .pop-equipment-name,
+    .pop-process-name {
+        font-size: var(--text-base);
+    }
+    
+    /* 상태 탭 */
+    .pop-status-tab-label {
+        font-size: var(--text-lg);
+    }
+    
+    .pop-status-tab-count {
+        font-size: var(--text-2xl);
+    }
+    
+    .pop-status-tab-detail {
+        font-size: var(--text-base);
+    }
+    
+    /* 작업 카드 */
+    .pop-work-card-id {
+        font-size: var(--text-lg);
+    }
+    
+    .pop-work-card-item {
+        font-size: var(--text-xl);
+    }
+    
+    .pop-work-card-spec {
+        font-size: var(--text-lg);
+    }
+    
+    .pop-work-card-info-item .label {
+        font-size: var(--text-base);
+    }
+    
+    .pop-work-card-info-item .value {
+        font-size: var(--text-lg);
+    }
+    
+    /* 작업 카드 내부 - 데스크톱 */
+    .pop-work-number {
+        font-size: var(--text-lg);
+    }
+    
+    .pop-work-status {
+        font-size: var(--text-sm);
+        padding: 4px 12px;
+    }
+    
+    .pop-work-info-label {
+        font-size: var(--text-sm);
+    }
+    
+    .pop-work-info-value {
+        font-size: var(--text-base);
+    }
+    
+    .pop-process-bar-label,
+    .pop-process-bar-count {
+        font-size: var(--text-sm);
+    }
+    
+    .pop-process-chip {
+        font-size: var(--text-sm);
+        padding: 6px 12px;
+    }
+    
+    .pop-progress-text,
+    .pop-progress-percent {
+        font-size: var(--text-base);
+    }
+    
+    .pop-btn-sm {
+        font-size: var(--text-sm);
+        padding: var(--spacing-sm) var(--spacing-md);
+    }
+    
+    /* 공정 타임라인 */
+    .pop-process-step-label {
+        font-size: var(--text-base);
+    }
+    
+    /* 하단 네비게이션 */
+    .pop-nav-btn {
+        font-size: var(--text-lg);
+    }
+    
+    /* 배지 */
+    .pop-badge {
+        font-size: var(--text-base);
+        padding: 5px 12px;
+    }
+    
+    /* 슬라이드 패널 - 데스크톱 */
+    .pop-slide-panel-title {
+        font-size: var(--text-2xl);
+    }
+    
+    .pop-panel-date {
+        font-size: var(--text-base);
+    }
+    
+    .pop-panel-time {
+        font-size: var(--text-lg);
+    }
+    
+    .pop-work-steps-header {
+        font-size: var(--text-base);
+    }
+    
+    .pop-work-step-name {
+        font-size: var(--text-base);
+    }
+    
+    .pop-work-step-time {
+        font-size: var(--text-sm);
+    }
+    
+    .pop-work-step-status {
+        font-size: var(--text-sm);
+    }
+    
+    .pop-step-title {
+        font-size: var(--text-2xl);
+    }
+    
+    .pop-step-description {
+        font-size: var(--text-lg);
+    }
+    
+    .pop-step-form-title {
+        font-size: var(--text-lg);
+    }
+    
+    .pop-form-label {
+        font-size: var(--text-base);
+    }
+    
+    .pop-checkbox-label {
+        font-size: var(--text-lg);
+    }
+    
+    .pop-checkbox {
+        width: 24px;
+        height: 24px;
+    }
+    
+    .pop-input {
+        font-size: var(--text-lg);
+        padding: var(--spacing-md) var(--spacing-lg);
+    }
+    
+    .pop-work-order-info-item .label {
+        font-size: var(--text-sm);
+    }
+    
+    .pop-work-order-info-item .value {
+        font-size: var(--text-lg);
+    }
+    
+    .pop-btn {
+        font-size: var(--text-base);
+        padding: var(--spacing-md) var(--spacing-xl);
+    }
+    
+    .pop-time-control-btn {
+        font-size: var(--text-lg);
+    }
+}
+
+/* ==================== 라이트 모드 컴포넌트 스타일 ==================== */
+
+/* 하단 네비게이션 - 라이트 모드 */
+.pop-container.light .pop-bottom-nav {
+    background: rgba(255, 255, 255, 0.95);
+    border-top: 1px solid rgb(var(--border));
+}
+
+.pop-container.light .pop-nav-btn.secondary {
+    background: rgb(var(--bg-tertiary));
+    border: 1px solid rgb(var(--border));
+    color: rgb(var(--text-secondary));
+}
+
+.pop-container.light .pop-nav-btn.secondary:hover {
+    background: rgba(0, 122, 204, 0.08);
+    border-color: rgba(0, 122, 204, 0.3);
+    color: rgb(var(--text-primary));
+}
+
+.pop-container.light .pop-nav-btn.primary {
+    background: linear-gradient(135deg, rgba(0, 122, 204, 0.15) 0%, rgba(0, 100, 180, 0.25) 100%);
+    border: 1px solid rgba(0, 122, 204, 0.4);
+    color: rgb(var(--neon-cyan));
+    box-shadow: 0 2px 8px rgba(0, 122, 204, 0.15);
+}
+
+.pop-container.light .pop-nav-btn.primary:hover {
+    background: linear-gradient(135deg, rgba(0, 122, 204, 0.25) 0%, rgba(0, 100, 180, 0.35) 100%);
+    border-color: rgb(var(--neon-cyan));
+    box-shadow: 0 4px 12px rgba(0, 122, 204, 0.25);
+}
+
diff --git a/frontend/components/pop/types.ts b/frontend/components/pop/types.ts
new file mode 100644
index 00000000..4585e4d0
--- /dev/null
+++ b/frontend/components/pop/types.ts
@@ -0,0 +1,104 @@
+// POP 생산실적관리 타입 정의
+
+export interface Process {
+  id: string;
+  name: string;
+  code: string;
+}
+
+export interface Equipment {
+  id: string;
+  name: string;
+  processIds: string[];
+  processNames: string[];
+  status: "running" | "idle" | "maintenance";
+}
+
+export interface ProcessFlowStep {
+  id: string;
+  name: string;
+  status: "pending" | "current" | "completed";
+  isReturnTarget?: boolean;
+}
+
+export interface WorkOrder {
+  id: string;
+  itemCode: string;
+  itemName: string;
+  spec: string;
+  orderQuantity: number;
+  producedQuantity: number;
+  status: "waiting" | "in-progress" | "completed";
+  process: string;
+  processName: string;
+  equipment: string | null;
+  equipmentName: string | null;
+  startDate: string;
+  dueDate: string;
+  completedDate?: string;
+  priority: "high" | "medium" | "normal" | "low";
+  accepted: boolean;
+  processFlow: ProcessFlowStep[];
+  currentProcessIndex: number;
+  // 리턴 관련
+  isReturn?: boolean;
+  returnReason?: string;
+  returnFromProcess?: string;
+  returnFromProcessName?: string;
+  // 분할접수 관련
+  acceptedQuantity?: number;
+  remainingQuantity?: number;
+  isPartialAccept?: boolean;
+}
+
+export interface WorkStepTemplate {
+  id: number;
+  name: string;
+  type:
+    | "equipment-check"
+    | "material-check"
+    | "setup"
+    | "work"
+    | "inspection"
+    | "record"
+    | "preparation";
+  description: string;
+}
+
+export interface WorkStep extends WorkStepTemplate {
+  status: "pending" | "in-progress" | "completed";
+  startTime: Date | null;
+  endTime: Date | null;
+  data: Record<string, any>;
+}
+
+export type StatusType = "waiting" | "pending-accept" | "in-progress" | "completed";
+
+export type ProductionType = "work-order" | "material";
+
+export interface AppState {
+  currentStatus: StatusType;
+  selectedEquipment: Equipment | null;
+  selectedProcess: Process | null;
+  selectedWorkOrder: WorkOrder | null;
+  showMyWorkOnly: boolean;
+  currentWorkSteps: WorkStep[];
+  currentStepIndex: number;
+  currentProductionType: ProductionType;
+  selectionMode: "single" | "multi";
+  completionAction: "close" | "stay";
+  acceptTargetWorkOrder: WorkOrder | null;
+  acceptQuantity: number;
+  theme: "dark" | "light";
+}
+
+export interface ModalState {
+  equipment: boolean;
+  process: boolean;
+  accept: boolean;
+  settings: boolean;
+}
+
+export interface PanelState {
+  production: boolean;
+}
diff --git a/frontend/components/screen-embedding/EmbeddedScreen.tsx b/frontend/components/screen-embedding/EmbeddedScreen.tsx
index 3bfb7a77..0b32830e 100644
--- a/frontend/components/screen-embedding/EmbeddedScreen.tsx
+++ b/frontend/components/screen-embedding/EmbeddedScreen.tsx
@@ -27,13 +27,14 @@ interface EmbeddedScreenProps {
   onSelectionChanged?: (selectedRows: any[]) => void;
   position?: SplitPanelPosition; // 분할 패널 내 위치 (left/right)
   initialFormData?: Record<string, any>; // 🆕 수정 모드에서 전달되는 초기 데이터
+  groupedData?: Record<string, any>[]; // 🆕 그룹 데이터 (수정 모드에서 원본 데이터 추적용)
 }
 
 /**
  * 임베드된 화면 컴포넌트
  */
 export const EmbeddedScreen = forwardRef<EmbeddedScreenHandle, EmbeddedScreenProps>(
-  ({ embedding, onSelectionChanged, position, initialFormData }, ref) => {
+  ({ embedding, onSelectionChanged, position, initialFormData, groupedData }, ref) => {
     const [layout, setLayout] = useState<ComponentData[]>([]);
     const [selectedRows, setSelectedRows] = useState<any[]>([]);
     const [loading, setLoading] = useState(true);
@@ -430,6 +431,8 @@ export const EmbeddedScreen = forwardRef<EmbeddedScreenHandle, EmbeddedScreenPro
                       userId={userId}
                       userName={userName}
                       companyCode={companyCode}
+                      groupedData={groupedData}
+                      initialData={initialFormData}
                     />
                   </div>
                 );
diff --git a/frontend/components/screen-embedding/ScreenSplitPanel.tsx b/frontend/components/screen-embedding/ScreenSplitPanel.tsx
index f457e851..2f30a4ec 100644
--- a/frontend/components/screen-embedding/ScreenSplitPanel.tsx
+++ b/frontend/components/screen-embedding/ScreenSplitPanel.tsx
@@ -17,13 +17,14 @@ interface ScreenSplitPanelProps {
   screenId?: number;
   config?: any; // 설정 패널에서 오는 config (leftScreenId, rightScreenId, splitRatio, resizable)
   initialFormData?: Record<string, any>; // 🆕 수정 모드에서 전달되는 초기 데이터
+  groupedData?: Record<string, any>[]; // 🆕 그룹 데이터 (수정 모드에서 원본 데이터 추적용)
 }
 
 /**
  * 분할 패널 컴포넌트
  * 순수하게 화면 분할 기능만 제공합니다.
  */
-export function ScreenSplitPanel({ screenId, config, initialFormData }: ScreenSplitPanelProps) {
+export function ScreenSplitPanel({ screenId, config, initialFormData, groupedData }: ScreenSplitPanelProps) {
   // config에서 splitRatio 추출 (기본값 50)
   const configSplitRatio = config?.splitRatio ?? 50;
   
@@ -117,7 +118,7 @@ export function ScreenSplitPanel({ screenId, config, initialFormData }: ScreenSp
         {/* 좌측 패널 */}
         <div style={{ width: `${splitRatio}%` }} className="h-full flex-shrink-0 overflow-hidden border-r">
           {hasLeftScreen ? (
-            <EmbeddedScreen embedding={leftEmbedding!} position="left" initialFormData={initialFormData} />
+            <EmbeddedScreen embedding={leftEmbedding!} position="left" initialFormData={initialFormData} groupedData={groupedData} />
           ) : (
             <div className="flex h-full items-center justify-center bg-muted/30">
               <p className="text-muted-foreground text-sm">좌측 화면을 선택하세요</p>
@@ -157,7 +158,7 @@ export function ScreenSplitPanel({ screenId, config, initialFormData }: ScreenSp
         {/* 우측 패널 */}
         <div style={{ width: `${100 - splitRatio}%` }} className="h-full flex-shrink-0 overflow-hidden">
           {hasRightScreen ? (
-            <EmbeddedScreen embedding={rightEmbedding!} position="right" initialFormData={initialFormData} />
+            <EmbeddedScreen embedding={rightEmbedding!} position="right" initialFormData={initialFormData} groupedData={groupedData} />
           ) : (
             <div className="flex h-full items-center justify-center bg-muted/30">
               <p className="text-muted-foreground text-sm">우측 화면을 선택하세요</p>
diff --git a/frontend/components/screen/DesignerToolbar.tsx b/frontend/components/screen/DesignerToolbar.tsx
index a50e8f09..366a1418 100644
--- a/frontend/components/screen/DesignerToolbar.tsx
+++ b/frontend/components/screen/DesignerToolbar.tsx
@@ -17,6 +17,7 @@ import {
   Layout,
   Monitor,
   Square,
+  Languages,
 } from "lucide-react";
 import { cn } from "@/lib/utils";
 
@@ -34,6 +35,8 @@ interface DesignerToolbarProps {
   isSaving?: boolean;
   showZoneBorders?: boolean;
   onToggleZoneBorders?: () => void;
+  onGenerateMultilang?: () => void;
+  isGeneratingMultilang?: boolean;
 }
 
 export const DesignerToolbar: React.FC<DesignerToolbarProps> = ({
@@ -50,6 +53,8 @@ export const DesignerToolbar: React.FC<DesignerToolbarProps> = ({
   isSaving = false,
   showZoneBorders = true,
   onToggleZoneBorders,
+  onGenerateMultilang,
+  isGeneratingMultilang = false,
 }) => {
   return (
     <div className="flex items-center justify-between border-b border-gray-200 bg-gradient-to-r from-gray-50 to-white px-4 py-3 shadow-sm">
@@ -226,6 +231,20 @@ export const DesignerToolbar: React.FC<DesignerToolbarProps> = ({
 
         <div className="h-6 w-px bg-gray-300" />
 
+        {onGenerateMultilang && (
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={onGenerateMultilang}
+            disabled={isGeneratingMultilang}
+            className="flex items-center space-x-1"
+            title="화면 라벨에 대한 다국어 키를 자동으로 생성합니다"
+          >
+            <Languages className="h-4 w-4" />
+            <span className="hidden sm:inline">{isGeneratingMultilang ? "생성 중..." : "다국어"}</span>
+          </Button>
+        )}
+
         <Button onClick={onSave} disabled={isSaving} className="flex items-center space-x-2">
           <Save className="h-4 w-4" />
           <span>{isSaving ? "저장 중..." : "저장"}</span>
diff --git a/frontend/components/screen/EditModal.tsx b/frontend/components/screen/EditModal.tsx
index 58149088..b3c94ade 100644
--- a/frontend/components/screen/EditModal.tsx
+++ b/frontend/components/screen/EditModal.tsx
@@ -190,14 +190,14 @@ export const EditModal: React.FC<EditModalProps> = ({ className }) => {
                   const innerLayoutData = await screenApi.getLayout(section.screenId);
                   saveButton = findSaveButtonInComponents(innerLayoutData?.components || []);
                   if (saveButton) {
-                    console.log("[EditModal] 조건부 컨테이너 내부에서 저장 버튼 발견:", {
-                      sectionScreenId: section.screenId,
-                      sectionLabel: section.label,
-                    });
+                    // console.log("[EditModal] 조건부 컨테이너 내부에서 저장 버튼 발견:", {
+                    //   sectionScreenId: section.screenId,
+                    //   sectionLabel: section.label,
+                    // });
                     break;
                   }
                 } catch (innerError) {
-                  console.warn("[EditModal] 내부 화면 레이아웃 조회 실패:", section.screenId);
+                  // console.warn("[EditModal] 내부 화면 레이아웃 조회 실패:", section.screenId);
                 }
               }
             }
@@ -207,7 +207,7 @@ export const EditModal: React.FC<EditModalProps> = ({ className }) => {
       }
       
       if (!saveButton) {
-        console.log("[EditModal] 저장 버튼을 찾을 수 없음:", targetScreenId);
+        // console.log("[EditModal] 저장 버튼을 찾을 수 없음:", targetScreenId);
         return null;
       }
       
@@ -219,14 +219,14 @@ export const EditModal: React.FC<EditModalProps> = ({ className }) => {
           dataflowConfig: webTypeConfig.dataflowConfig,
           dataflowTiming: webTypeConfig.dataflowConfig?.flowConfig?.executionTiming || "after",
         };
-        console.log("[EditModal] 저장 버튼 제어로직 설정 발견:", config);
+        // console.log("[EditModal] 저장 버튼 제어로직 설정 발견:", config);
         return config;
       }
       
-      console.log("[EditModal] 저장 버튼에 제어로직 설정 없음");
+      // console.log("[EditModal] 저장 버튼에 제어로직 설정 없음");
       return null;
     } catch (error) {
-      console.warn("[EditModal] 저장 버튼 설정 조회 실패:", error);
+      // console.warn("[EditModal] 저장 버튼 설정 조회 실패:", error);
       return null;
     }
   };
@@ -309,16 +309,16 @@ export const EditModal: React.FC<EditModalProps> = ({ className }) => {
   // 🆕 그룹 데이터 조회 함수
   const loadGroupData = async () => {
     if (!modalState.tableName || !modalState.groupByColumns || modalState.groupByColumns.length === 0) {
-      console.warn("테이블명 또는 그룹핑 컬럼이 없습니다.");
+      // console.warn("테이블명 또는 그룹핑 컬럼이 없습니다.");
       return;
     }
 
     try {
-      console.log("🔍 그룹 데이터 조회 시작:", {
-        tableName: modalState.tableName,
-        groupByColumns: modalState.groupByColumns,
-        editData: modalState.editData,
-      });
+      // console.log("🔍 그룹 데이터 조회 시작:", {
+      //   tableName: modalState.tableName,
+      //   groupByColumns: modalState.groupByColumns,
+      //   editData: modalState.editData,
+      // });
 
       // 그룹핑 컬럼 값 추출 (예: order_no = "ORD-20251124-001")
       const groupValues: Record<string, any> = {};
@@ -329,14 +329,14 @@ export const EditModal: React.FC<EditModalProps> = ({ className }) => {
       });
 
       if (Object.keys(groupValues).length === 0) {
-        console.warn("그룹핑 컬럼 값이 없습니다:", modalState.groupByColumns);
+        // console.warn("그룹핑 컬럼 값이 없습니다:", modalState.groupByColumns);
         return;
       }
 
-      console.log("🔍 그룹 조회 요청:", {
-        tableName: modalState.tableName,
-        groupValues,
-      });
+      // console.log("🔍 그룹 조회 요청:", {
+      //   tableName: modalState.tableName,
+      //   groupValues,
+      // });
 
       // 같은 그룹의 모든 레코드 조회 (entityJoinApi 사용)
       const { entityJoinApi } = await import("@/lib/api/entityJoin");
@@ -347,13 +347,13 @@ export const EditModal: React.FC<EditModalProps> = ({ className }) => {
         enableEntityJoin: true,
       });
 
-      console.log("🔍 그룹 조회 응답:", response);
+      // console.log("🔍 그룹 조회 응답:", response);
 
       // entityJoinApi는 배열 또는 { data: [] } 형식으로 반환
       const dataArray = Array.isArray(response) ? response : response?.data || [];
 
       if (dataArray.length > 0) {
-        console.log("✅ 그룹 데이터 조회 성공:", dataArray.length, "건");
+        // console.log("✅ 그룹 데이터 조회 성공:", dataArray.length, "건");
         setGroupData(dataArray);
         setOriginalGroupData(JSON.parse(JSON.stringify(dataArray))); // Deep copy
         toast.info(`${dataArray.length}개의 관련 품목을 불러왔습니다.`);
@@ -374,7 +374,7 @@ export const EditModal: React.FC<EditModalProps> = ({ className }) => {
     try {
       setLoading(true);
 
-      console.log("화면 데이터 로딩 시작:", screenId);
+      // console.log("화면 데이터 로딩 시작:", screenId);
 
       // 화면 정보와 레이아웃 데이터 로딩
       const [screenInfo, layoutData] = await Promise.all([
@@ -382,7 +382,7 @@ export const EditModal: React.FC<EditModalProps> = ({ className }) => {
         screenApi.getLayout(screenId),
       ]);
 
-      console.log("API 응답:", { screenInfo, layoutData });
+      // console.log("API 응답:", { screenInfo, layoutData });
 
       if (screenInfo && layoutData) {
         const components = layoutData.components || [];
@@ -395,11 +395,11 @@ export const EditModal: React.FC<EditModalProps> = ({ className }) => {
           components,
           screenInfo: screenInfo,
         });
-        console.log("화면 데이터 설정 완료:", {
-          componentsCount: components.length,
-          dimensions,
-          screenInfo,
-        });
+        // console.log("화면 데이터 설정 완료:", {
+        //   componentsCount: components.length,
+        //   dimensions,
+        //   screenInfo,
+        // });
       } else {
         throw new Error("화면 데이터가 없습니다");
       }
@@ -671,9 +671,11 @@ export const EditModal: React.FC<EditModalProps> = ({ className }) => {
           console.log("🗑️ 품목 삭제:", deletedItem);
 
           try {
+            // screenId 전달하여 제어관리 실행 가능하도록 함
             const response = await dynamicFormApi.deleteFormDataFromTable(
               deletedItem.id,
               screenData.screenInfo.tableName,
+              modalState.screenId || screenData.screenInfo?.id,
             );
 
             if (response.success) {
@@ -761,10 +763,74 @@ export const EditModal: React.FC<EditModalProps> = ({ className }) => {
         // INSERT 모드
         console.log("[EditModal] INSERT 모드 - 새 데이터 생성:", formData);
 
+        // 🆕 채번 규칙 할당 처리 (저장 시점에 실제 순번 증가)
+        const dataToSave = { ...formData };
+        const fieldsWithNumbering: Record<string, string> = {};
+
+        // formData에서 채번 규칙이 설정된 필드 찾기
+        for (const [key, value] of Object.entries(formData)) {
+          if (key.endsWith("_numberingRuleId") && value) {
+            const fieldName = key.replace("_numberingRuleId", "");
+            fieldsWithNumbering[fieldName] = value as string;
+            console.log(`🎯 [EditModal] 채번 규칙 발견: ${fieldName} → 규칙 ${value}`);
+          }
+        }
+
+        // 채번 규칙이 있는 필드에 대해 allocateCode 호출
+        if (Object.keys(fieldsWithNumbering).length > 0) {
+          console.log("🎯 [EditModal] 채번 규칙 할당 시작");
+          const { allocateNumberingCode } = await import("@/lib/api/numberingRule");
+
+          let hasAllocationFailure = false;
+          const failedFields: string[] = [];
+
+          for (const [fieldName, ruleId] of Object.entries(fieldsWithNumbering)) {
+            try {
+              console.log(`🔄 [EditModal] ${fieldName} 필드에 대해 allocateCode 호출: ${ruleId}`);
+              const allocateResult = await allocateNumberingCode(ruleId);
+
+              if (allocateResult.success && allocateResult.data?.generatedCode) {
+                const newCode = allocateResult.data.generatedCode;
+                console.log(`✅ [EditModal] ${fieldName} 새 코드 할당: ${dataToSave[fieldName]} → ${newCode}`);
+                dataToSave[fieldName] = newCode;
+              } else {
+                console.warn(`⚠️ [EditModal] ${fieldName} 코드 할당 실패:`, allocateResult.error);
+                if (!dataToSave[fieldName] || dataToSave[fieldName] === "") {
+                  hasAllocationFailure = true;
+                  failedFields.push(fieldName);
+                }
+              }
+            } catch (allocateError) {
+              console.error(`❌ [EditModal] ${fieldName} 코드 할당 오류:`, allocateError);
+              if (!dataToSave[fieldName] || dataToSave[fieldName] === "") {
+                hasAllocationFailure = true;
+                failedFields.push(fieldName);
+              }
+            }
+          }
+
+          // 채번 규칙 할당 실패 시 저장 중단
+          if (hasAllocationFailure) {
+            const fieldNames = failedFields.join(", ");
+            toast.error(`채번 규칙 할당에 실패했습니다 (${fieldNames}). 화면 설정에서 채번 규칙을 확인해주세요.`);
+            console.error(`❌ [EditModal] 채번 규칙 할당 실패로 저장 중단. 실패 필드: ${fieldNames}`);
+            return;
+          }
+
+          // _numberingRuleId 필드 제거 (실제 저장하지 않음)
+          for (const key of Object.keys(dataToSave)) {
+            if (key.endsWith("_numberingRuleId")) {
+              delete dataToSave[key];
+            }
+          }
+        }
+
+        console.log("[EditModal] 최종 저장 데이터:", dataToSave);
+
         const response = await dynamicFormApi.saveFormData({
           screenId: modalState.screenId!,
           tableName: screenData.screenInfo.tableName,
-          data: formData,
+          data: dataToSave,
         });
 
         if (response.success) {
diff --git a/frontend/components/screen/InteractiveDataTable.tsx b/frontend/components/screen/InteractiveDataTable.tsx
index 5e4bda2e..8c4c95ce 100644
--- a/frontend/components/screen/InteractiveDataTable.tsx
+++ b/frontend/components/screen/InteractiveDataTable.tsx
@@ -1,6 +1,7 @@
 "use client";
 
-import React, { useState, useEffect, useCallback, useRef } from "react";
+import React, { useState, useEffect, useCallback, useRef, useMemo } from "react";
+import { useSearchParams } from "next/navigation";
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
 import { Checkbox } from "@/components/ui/checkbox";
@@ -42,7 +43,7 @@ import {
 } from "lucide-react";
 import { tableTypeApi } from "@/lib/api/screen";
 import { commonCodeApi } from "@/lib/api/commonCode";
-import { getCurrentUser, UserInfo } from "@/lib/api/client";
+import { apiClient, getCurrentUser, UserInfo } from "@/lib/api/client";
 import { useAuth } from "@/hooks/useAuth";
 import { DataTableComponent, DataTableColumn, DataTableFilter } from "@/types/screen-legacy-backup";
 import { cn } from "@/lib/utils";
@@ -100,11 +101,7 @@ const CascadingDropdownInForm: React.FC<CascadingDropdownInFormProps> = ({
   const isDisabled = !parentValue || loading;
 
   return (
-    <Select
-      value={value || ""}
-      onValueChange={(newValue) => onChange?.(newValue)}
-      disabled={isDisabled}
-    >
+    <Select value={value || ""} onValueChange={(newValue) => onChange?.(newValue)} disabled={isDisabled}>
       <SelectTrigger className={className}>
         {loading ? (
           <div className="flex items-center gap-2">
@@ -187,7 +184,17 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
   const splitPanelContext = useSplitPanelContext(); // 분할 패널 컨텍스트
   const screenContext = useScreenContextOptional(); // 화면 컨텍스트 (좌측/우측 위치 확인용)
   const splitPanelPosition = screenContext?.splitPanelPosition; // 분할 패널 내 위치
-  
+
+  // URL에서 menuObjid 가져오기 (카테고리 값 조회 시 필요)
+  const searchParams = useSearchParams();
+  const menuObjid = useMemo(() => {
+    // 1. ScreenContext에서 가져오기
+    if (screenContext?.menuObjid) return screenContext.menuObjid;
+    // 2. URL 쿼리에서 가져오기
+    const urlMenuObjid = searchParams.get("menuObjid");
+    return urlMenuObjid ? parseInt(urlMenuObjid) : undefined;
+  }, [screenContext?.menuObjid, searchParams]);
+
   const [data, setData] = useState<Record<string, any>[]>([]);
   const [loading, setLoading] = useState(false);
   const [searchValues, setSearchValues] = useState<Record<string, any>>({});
@@ -199,7 +206,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
   const hasInitializedWidthsRef = useRef(false);
   const columnRefs = useRef<Record<string, HTMLTableCellElement | null>>({});
   const isResizingRef = useRef(false);
-  
+
   // TableOptions 상태
   const [filters, setFilters] = useState<TableFilter[]>([]);
   const [grouping, setGrouping] = useState<string[]>([]);
@@ -236,14 +243,19 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
   const [columnLabels, setColumnLabels] = useState<Record<string, string>>({}); // 컬럼명 -> 라벨 매핑
 
   // 카테고리 값 매핑 캐시 (컬럼명 -> {코드 -> {라벨, 색상}})
-  const [categoryMappings, setCategoryMappings] = useState<Record<string, Record<string, { label: string; color?: string }>>>({});
+  const [categoryMappings, setCategoryMappings] = useState<
+    Record<string, Record<string, { label: string; color?: string }>>
+  >({});
+
+  // 카테고리 코드 라벨 캐시 (CATEGORY_* 코드 -> 라벨)
+  const [categoryCodeLabels, setCategoryCodeLabels] = useState<Record<string, string>>({});
 
   // 테이블 등록 (Context에 등록)
   const tableId = `datatable-${component.id}`;
-  
+
   useEffect(() => {
     if (!component.tableName || !component.columns) return;
-    
+
     registerTable({
       tableId,
       label: component.title || "데이터 테이블",
@@ -320,7 +332,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
   useEffect(() => {
     const handleRelatedButtonSelect = (event: CustomEvent) => {
       const { targetTable, filterColumn, filterValue } = event.detail || {};
-      
+
       // 이 테이블이 대상 테이블인지 확인
       if (targetTable === component.tableName) {
         console.log("📌 [InteractiveDataTable] RelatedDataButtons 필터 적용:", {
@@ -365,8 +377,10 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
 
         for (const col of categoryColumns) {
           try {
+            // menuObjid가 있으면 쿼리 파라미터로 전달 (메뉴별 카테고리 색상 적용)
+            const queryParams = menuObjid ? `?menuObjid=${menuObjid}` : "";
             const response = await apiClient.get(
-              `/table-categories/${component.tableName}/${col.columnName}/values`
+              `/table-categories/${component.tableName}/${col.columnName}/values${queryParams}`,
             );
 
             if (response.data.success && response.data.data) {
@@ -379,7 +393,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
                 };
               });
               mappings[col.columnName] = mapping;
-              console.log(`✅ 카테고리 매핑 로드 성공 [${col.columnName}]:`, mapping);
+              console.log(`✅ 카테고리 매핑 로드 성공 [${col.columnName}]:`, mapping, { menuObjid });
             }
           } catch (error) {
             console.error(`❌ 카테고리 값 로드 실패 [${col.columnName}]:`, error);
@@ -394,7 +408,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
     };
 
     loadCategoryMappings();
-  }, [component.tableName, component.columns, getColumnWebType]);
+  }, [component.tableName, component.columns, getColumnWebType, menuObjid]);
 
   // 파일 상태 확인 함수
   const checkFileStatus = useCallback(
@@ -583,13 +597,13 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
 
       // 없으면 테이블 타입 관리에서 설정된 값 찾기
       const tableColumn = tableColumns.find((col) => col.columnName === columnName);
-      
+
       // input_type 우선 사용 (category 등)
       const inputType = (tableColumn as any)?.input_type || (tableColumn as any)?.inputType;
       if (inputType) {
         return inputType;
       }
-      
+
       // 없으면 webType 사용
       return tableColumn?.webType || "text";
     },
@@ -696,19 +710,19 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
         let linkedFilterValues: Record<string, any> = {};
         let hasLinkedFiltersConfigured = false; // 연결 필터가 설정되어 있는지 여부
         let hasSelectedLeftData = false; // 좌측에서 데이터가 선택되었는지 여부
-        
+
         if (splitPanelContext) {
           // 연결 필터 설정 여부 확인 (현재 테이블에 해당하는 필터가 있는지)
           const linkedFiltersConfig = splitPanelContext.linkedFilters || [];
           hasLinkedFiltersConfigured = linkedFiltersConfig.some(
-            (filter) => filter.targetColumn?.startsWith(component.tableName + ".") ||
-                        filter.targetColumn === component.tableName
+            (filter) =>
+              filter.targetColumn?.startsWith(component.tableName + ".") || filter.targetColumn === component.tableName,
           );
-          
+
           // 좌측 데이터 선택 여부 확인
-          hasSelectedLeftData = splitPanelContext.selectedLeftData && 
-                                Object.keys(splitPanelContext.selectedLeftData).length > 0;
-          
+          hasSelectedLeftData =
+            splitPanelContext.selectedLeftData && Object.keys(splitPanelContext.selectedLeftData).length > 0;
+
           linkedFilterValues = splitPanelContext.getLinkedFilterValues();
           // 현재 테이블에 해당하는 필터만 추출 (테이블명.컬럼명 형식에서)
           const tableSpecificFilters: Record<string, any> = {};
@@ -727,7 +741,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
           }
           linkedFilterValues = tableSpecificFilters;
         }
-        
+
         // 🆕 연결 필터가 설정되어 있지만 좌측에서 데이터가 선택되지 않은 경우
         // → 빈 데이터 표시 (모든 데이터를 보여주지 않음)
         if (hasLinkedFiltersConfigured && !hasSelectedLeftData) {
@@ -739,9 +753,9 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
           setLoading(false);
           return;
         }
-        
+
         // 🆕 RelatedDataButtons 필터 적용
-        let relatedButtonFilterValues: Record<string, any> = {};
+        const relatedButtonFilterValues: Record<string, any> = {};
         if (relatedButtonFilter) {
           relatedButtonFilterValues[relatedButtonFilter.filterColumn] = relatedButtonFilter.filterValue;
         }
@@ -752,16 +766,16 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
           ...linkedFilterValues,
           ...relatedButtonFilterValues, // 🆕 RelatedDataButtons 필터 추가
         };
-        
-        console.log("🔍 데이터 조회 시작:", { 
-          tableName: component.tableName, 
-          page, 
+
+        console.log("🔍 데이터 조회 시작:", {
+          tableName: component.tableName,
+          page,
           pageSize,
           linkedFilterValues,
           relatedButtonFilterValues,
           mergedSearchParams,
         });
-        
+
         const result = await tableTypeApi.getTableData(component.tableName, {
           page,
           size: pageSize,
@@ -769,11 +783,11 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
           autoFilter: component.autoFilter, // 🆕 자동 필터 설정 전달
         });
 
-        console.log("✅ 데이터 조회 완료:", { 
+        console.log("✅ 데이터 조회 완료:", {
           tableName: component.tableName,
-          dataLength: result.data.length, 
+          dataLength: result.data.length,
           total: result.total,
-          page: result.page
+          page: result.page,
         });
 
         setData(result.data);
@@ -781,6 +795,45 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
         setTotalPages(result.totalPages);
         setCurrentPage(result.page);
 
+        // 카테고리 코드 패턴(CATEGORY_*) 검출 및 라벨 조회
+        const detectAndLoadCategoryLabels = async () => {
+          const categoryCodes = new Set<string>();
+          result.data.forEach((row: Record<string, any>) => {
+            Object.values(row).forEach((value) => {
+              if (typeof value === "string" && value.startsWith("CATEGORY_")) {
+                categoryCodes.add(value);
+              }
+            });
+          });
+
+          console.log("🏷️ [InteractiveDataTable] 감지된 카테고리 코드:", Array.from(categoryCodes));
+
+          // 새로운 카테고리 코드만 필터링 (이미 캐시된 것 제외)
+          const newCodes = Array.from(categoryCodes);
+
+          if (newCodes.length > 0) {
+            try {
+              console.log("🏷️ [InteractiveDataTable] 카테고리 라벨 API 호출:", newCodes);
+              const response = await apiClient.post("/table-categories/labels-by-codes", { valueCodes: newCodes });
+              console.log("🏷️ [InteractiveDataTable] 카테고리 라벨 API 응답:", response.data);
+              if (response.data.success && response.data.data) {
+                setCategoryCodeLabels((prev) => {
+                  const newLabels = {
+                    ...prev,
+                    ...response.data.data,
+                  };
+                  console.log("🏷️ [InteractiveDataTable] 카테고리 라벨 캐시 업데이트:", newLabels);
+                  return newLabels;
+                });
+              }
+            } catch (error) {
+              console.error("카테고리 라벨 조회 실패:", error);
+            }
+          }
+        };
+
+        detectAndLoadCategoryLabels();
+
         // 각 행의 파일 상태 확인 (전체 행 + 가상 파일 컬럼별)
         const fileStatusPromises = result.data.map(async (rowData: Record<string, any>) => {
           const primaryKeyField = Object.keys(rowData)[0];
@@ -916,18 +969,18 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
       try {
         const columns = await tableTypeApi.getColumns(component.tableName);
         setTableColumns(columns);
-        
+
         // 🆕 전체 컬럼 목록 설정
-        const columnNames = columns.map(col => col.columnName);
+        const columnNames = columns.map((col) => col.columnName);
         setAllAvailableColumns(columnNames);
-        
+
         // 🆕 컬럼명 -> 라벨 매핑 생성
         const labels: Record<string, string> = {};
-        columns.forEach(col => {
+        columns.forEach((col) => {
           labels[col.columnName] = col.displayName || col.columnName;
         });
         setColumnLabels(labels);
-        
+
         // 🆕 localStorage에서 필터 설정 복원
         if (user?.userId && component.componentId) {
           const storageKey = `table-search-filter-${user.userId}-${component.componentId}`;
@@ -983,28 +1036,31 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
   );
 
   // 행 선택 핸들러
-  const handleRowSelect = useCallback((rowIndex: number, isSelected: boolean) => {
-    setSelectedRows((prev) => {
-      const newSet = new Set(prev);
-      if (isSelected) {
-        newSet.add(rowIndex);
-      } else {
-        newSet.delete(rowIndex);
+  const handleRowSelect = useCallback(
+    (rowIndex: number, isSelected: boolean) => {
+      setSelectedRows((prev) => {
+        const newSet = new Set(prev);
+        if (isSelected) {
+          newSet.add(rowIndex);
+        } else {
+          newSet.delete(rowIndex);
+        }
+        return newSet;
+      });
+
+      // 분할 패널 좌측에서 선택 시 컨텍스트에 데이터 저장 (연결 필터용)
+      if (splitPanelContext && splitPanelPosition === "left" && !splitPanelContext.disableAutoDataTransfer) {
+        if (isSelected && data[rowIndex]) {
+          splitPanelContext.setSelectedLeftData(data[rowIndex]);
+          console.log("🔗 [InteractiveDataTable] 좌측 선택 데이터 저장:", data[rowIndex]);
+        } else if (!isSelected) {
+          splitPanelContext.setSelectedLeftData(null);
+          console.log("🔗 [InteractiveDataTable] 좌측 선택 데이터 초기화");
+        }
       }
-      return newSet;
-    });
-    
-    // 분할 패널 좌측에서 선택 시 컨텍스트에 데이터 저장 (연결 필터용)
-    if (splitPanelContext && splitPanelPosition === "left" && !splitPanelContext.disableAutoDataTransfer) {
-      if (isSelected && data[rowIndex]) {
-        splitPanelContext.setSelectedLeftData(data[rowIndex]);
-        console.log("🔗 [InteractiveDataTable] 좌측 선택 데이터 저장:", data[rowIndex]);
-      } else if (!isSelected) {
-        splitPanelContext.setSelectedLeftData(null);
-        console.log("🔗 [InteractiveDataTable] 좌측 선택 데이터 초기화");
-      }
-    }
-  }, [data, splitPanelContext, splitPanelPosition]);
+    },
+    [data, splitPanelContext, splitPanelPosition],
+  );
 
   // 전체 선택/해제 핸들러
   const handleSelectAll = useCallback(
@@ -1586,7 +1642,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
             </div>
           );
         }
-        
+
         // 상세 설정에서 옵션 목록 가져오기
         const options = detailSettings?.options || [];
         if (options.length > 0) {
@@ -1713,7 +1769,9 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
 
       case "category": {
         // 카테고리 셀렉트 (동적 import)
-        const { CategorySelectComponent } = require("@/lib/registry/components/category-select/CategorySelectComponent");
+        const {
+          CategorySelectComponent,
+        } = require("@/lib/registry/components/category-select/CategorySelectComponent");
         return (
           <div>
             <CategorySelectComponent
@@ -1841,7 +1899,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
             </div>
           );
         }
-        
+
         // 상세 설정에서 옵션 목록 가져오기
         const optionsAdd = detailSettings?.options || [];
         if (optionsAdd.length > 0) {
@@ -2013,7 +2071,9 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
 
       case "category": {
         // 카테고리 셀렉트 (동적 import)
-        const { CategorySelectComponent } = require("@/lib/registry/components/category-select/CategorySelectComponent");
+        const {
+          CategorySelectComponent,
+        } = require("@/lib/registry/components/category-select/CategorySelectComponent");
         return (
           <div>
             <CategorySelectComponent
@@ -2151,8 +2211,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
     const actualWebType = getColumnWebType(column.columnName);
 
     // 파일 타입 컬럼 처리 (가상 파일 컬럼 포함)
-    const isFileColumn =
-      actualWebType === "file" || column.columnName === "file_path" || column.isVirtualFileColumn;
+    const isFileColumn = actualWebType === "file" || column.columnName === "file_path" || column.isVirtualFileColumn;
 
     // 파일 타입 컬럼은 파일 아이콘으로 표시 (컬럼별 파일 관리)
     if (isFileColumn && rowData) {
@@ -2197,25 +2256,25 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
       case "category": {
         // 카테고리 타입: 배지로 표시 (배지 없음 옵션 지원)
         if (!value) return "";
-        
+
         const mapping = categoryMappings[column.columnName];
         const categoryData = mapping?.[String(value)];
-        
+
         // 매핑 데이터가 있으면 라벨과 색상 사용, 없으면 코드값만 텍스트로 표시
         const displayLabel = categoryData?.label || String(value);
         const displayColor = categoryData?.color;
-        
+
         // 배지 없음 옵션: color가 없거나, "none"이거나, 매핑 데이터가 없으면 텍스트만 표시
         if (!displayColor || displayColor === "none" || !categoryData) {
           return <span className="text-sm">{displayLabel}</span>;
         }
-        
+
         return (
-          <Badge 
-            style={{ 
+          <Badge
+            style={{
               backgroundColor: displayColor,
-              borderColor: displayColor
-            }} 
+              borderColor: displayColor,
+            }}
             className="text-white"
           >
             {displayLabel}
@@ -2255,8 +2314,41 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
         }
         break;
 
-      default:
-        return String(value);
+      default: {
+        // 카테고리 코드 패턴 감지 (CATEGORY_로 시작하는 값)
+        const strValue = String(value);
+        if (strValue.startsWith("CATEGORY_")) {
+          // 1. categoryMappings에서 해당 코드 검색 (색상 정보 포함)
+          for (const columnName of Object.keys(categoryMappings)) {
+            const mapping = categoryMappings[columnName];
+            const categoryData = mapping?.[strValue];
+            if (categoryData) {
+              // 색상이 있으면 배지로, 없으면 텍스트로 표시
+              if (categoryData.color && categoryData.color !== "none") {
+                return (
+                  <Badge
+                    style={{
+                      backgroundColor: categoryData.color,
+                      borderColor: categoryData.color,
+                    }}
+                    className="text-white"
+                  >
+                    {categoryData.label}
+                  </Badge>
+                );
+              }
+              return <span className="text-sm">{categoryData.label}</span>;
+            }
+          }
+
+          // 2. categoryCodeLabels에서 검색 (API로 조회한 라벨)
+          const cachedLabel = categoryCodeLabels[strValue];
+          if (cachedLabel) {
+            return <span className="text-sm">{cachedLabel}</span>;
+          }
+        }
+        return strValue;
+      }
     }
 
     return String(value);
@@ -2392,15 +2484,12 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
           {visibleColumns.length > 0 ? (
             <>
               <div className="overflow-hidden rounded-lg border border-gray-200/60 bg-white shadow-sm">
-                <Table style={{ tableLayout: 'fixed' }}>
-                  <TableHeader className="bg-gradient-to-b from-muted/50 to-muted border-b-2 border-primary/20">
+                <Table style={{ tableLayout: "fixed" }}>
+                  <TableHeader className="from-muted/50 to-muted border-primary/20 border-b-2 bg-gradient-to-b">
                     <TableRow>
                       {/* 체크박스 컬럼 (삭제 기능이 활성화된 경우) */}
                       {component.enableDelete && (
-                        <TableHead 
-                          className="px-4"
-                          style={{ width: '48px', minWidth: '48px', maxWidth: '48px' }}
-                        >
+                        <TableHead className="px-4" style={{ width: "48px", minWidth: "48px", maxWidth: "48px" }}>
                           <Checkbox
                             checked={selectedRows.size === data.length && data.length > 0}
                             onCheckedChange={handleSelectAll}
@@ -2409,74 +2498,74 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
                       )}
                       {visibleColumns.map((column: DataTableColumn, columnIndex) => {
                         const columnWidth = columnWidths[column.id];
-                        
+
                         return (
                           <TableHead
                             key={column.id}
                             ref={(el) => (columnRefs.current[column.id] = el)}
-                            className="relative px-4 font-bold text-foreground/90 select-none text-center hover:bg-muted/70 transition-colors"
-                            style={{ 
+                            className="text-foreground/90 hover:bg-muted/70 relative px-4 text-center font-bold transition-colors select-none"
+                            style={{
                               width: columnWidth ? `${columnWidth}px` : undefined,
-                              userSelect: 'none'
+                              userSelect: "none",
                             }}
                           >
                             {column.label}
                             {/* 리사이즈 핸들 */}
                             {columnIndex < visibleColumns.length - 1 && (
                               <div
-                                className="absolute right-0 top-0 h-full w-2 cursor-col-resize hover:bg-blue-500 z-20"
-                                style={{ marginRight: '-4px', paddingLeft: '4px', paddingRight: '4px' }}
+                                className="absolute top-0 right-0 z-20 h-full w-2 cursor-col-resize hover:bg-blue-500"
+                                style={{ marginRight: "-4px", paddingLeft: "4px", paddingRight: "4px" }}
                                 onClick={(e) => e.stopPropagation()}
                                 onMouseDown={(e) => {
                                   e.preventDefault();
                                   e.stopPropagation();
-                                  
+
                                   const thElement = columnRefs.current[column.id];
                                   if (!thElement) return;
-                                  
+
                                   isResizingRef.current = true;
-                                  
+
                                   const startX = e.clientX;
                                   const startWidth = columnWidth || thElement.offsetWidth;
-                                  
+
                                   // 드래그 중 텍스트 선택 방지
-                                  document.body.style.userSelect = 'none';
-                                  document.body.style.cursor = 'col-resize';
-                                  
+                                  document.body.style.userSelect = "none";
+                                  document.body.style.cursor = "col-resize";
+
                                   const handleMouseMove = (moveEvent: MouseEvent) => {
                                     moveEvent.preventDefault();
-                                    
+
                                     const diff = moveEvent.clientX - startX;
                                     const newWidth = Math.max(80, startWidth + diff);
-                                    
+
                                     // 직접 DOM 스타일 변경 (리렌더링 없음)
                                     if (thElement) {
                                       thElement.style.width = `${newWidth}px`;
                                     }
                                   };
-                                  
+
                                   const handleMouseUp = () => {
                                     // 최종 너비를 state에 저장
                                     if (thElement) {
                                       const finalWidth = Math.max(80, thElement.offsetWidth);
-                                      setColumnWidths(prev => ({ ...prev, [column.id]: finalWidth }));
+                                      setColumnWidths((prev) => ({ ...prev, [column.id]: finalWidth }));
                                     }
-                                    
+
                                     // 텍스트 선택 복원
-                                    document.body.style.userSelect = '';
-                                    document.body.style.cursor = '';
-                                    
+                                    document.body.style.userSelect = "";
+                                    document.body.style.cursor = "";
+
                                     // 약간의 지연 후 리사이즈 플래그 해제
                                     setTimeout(() => {
                                       isResizingRef.current = false;
                                     }, 100);
-                                    
-                                    document.removeEventListener('mousemove', handleMouseMove);
-                                    document.removeEventListener('mouseup', handleMouseUp);
+
+                                    document.removeEventListener("mousemove", handleMouseMove);
+                                    document.removeEventListener("mouseup", handleMouseUp);
                                   };
-                                  
-                                  document.addEventListener('mousemove', handleMouseMove);
-                                  document.addEventListener('mouseup', handleMouseUp);
+
+                                  document.addEventListener("mousemove", handleMouseMove);
+                                  document.addEventListener("mouseup", handleMouseUp);
                                 }}
                               />
                             )}
@@ -2504,10 +2593,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
                         <TableRow key={rowIndex} className="transition-all duration-200 hover:bg-orange-100">
                           {/* 체크박스 셀 (삭제 기능이 활성화된 경우) */}
                           {component.enableDelete && (
-                            <TableCell 
-                              className="px-4"
-                              style={{ width: '48px', minWidth: '48px', maxWidth: '48px' }}
-                            >
+                            <TableCell className="px-4" style={{ width: "48px", minWidth: "48px", maxWidth: "48px" }}>
                               <Checkbox
                                 checked={selectedRows.has(rowIndex)}
                                 onCheckedChange={(checked) => handleRowSelect(rowIndex, checked as boolean)}
@@ -2517,10 +2603,10 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
                           {visibleColumns.map((column: DataTableColumn) => {
                             const isNumeric = column.widgetType === "number" || column.widgetType === "decimal";
                             return (
-                              <TableCell 
-                                key={column.id} 
-                                className="px-4 text-sm font-medium text-gray-900 whitespace-nowrap overflow-hidden text-ellipsis"
-                                style={{ textAlign: isNumeric ? 'right' : 'left' }}
+                              <TableCell
+                                key={column.id}
+                                className="overflow-hidden px-4 text-sm font-medium text-ellipsis whitespace-nowrap text-gray-900"
+                                style={{ textAlign: isNumeric ? "right" : "left" }}
                               >
                                 {formatCellValue(row[column.columnName], column, row)}
                               </TableCell>
diff --git a/frontend/components/screen/InteractiveScreenViewer.tsx b/frontend/components/screen/InteractiveScreenViewer.tsx
index af6c9dbc..8445f5e1 100644
--- a/frontend/components/screen/InteractiveScreenViewer.tsx
+++ b/frontend/components/screen/InteractiveScreenViewer.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useState, useCallback } from "react";
+import React, { useState, useCallback, useEffect, useMemo } from "react";
 import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
 import { Button } from "@/components/ui/button";
@@ -48,6 +48,7 @@ import { isFileComponent } from "@/lib/utils/componentTypeUtils";
 import { buildGridClasses } from "@/lib/constants/columnSpans";
 import { cn } from "@/lib/utils";
 import { useScreenPreview } from "@/contexts/ScreenPreviewContext";
+import { useMultiLang } from "@/hooks/useMultiLang";
 import { TableOptionsProvider } from "@/contexts/TableOptionsContext";
 import { TableOptionsToolbar } from "./table-options/TableOptionsToolbar";
 import { SplitPanelProvider } from "@/lib/registry/components/split-panel-layout/SplitPanelContext";
@@ -88,7 +89,7 @@ const CascadingDropdownWrapper: React.FC<CascadingDropdownWrapperProps> = ({
     relationCode,
     parentValue,
   });
-  
+
   // 실제 사용할 설정 (직접 설정 또는 API에서 가져온 설정)
   const effectiveConfig = config || relationConfig;
 
@@ -109,11 +110,7 @@ const CascadingDropdownWrapper: React.FC<CascadingDropdownWrapperProps> = ({
   const isDisabled = disabled || !parentValue || loading;
 
   return (
-    <Select
-      value={value || ""}
-      onValueChange={(newValue) => onChange?.(newValue)}
-      disabled={isDisabled}
-    >
+    <Select value={value || ""} onValueChange={(newValue) => onChange?.(newValue)} disabled={isDisabled}>
       <SelectTrigger className="h-full w-full">
         {loading ? (
           <div className="flex items-center gap-2">
@@ -187,22 +184,80 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
 
   const { isPreviewMode } = useScreenPreview(); // 프리뷰 모드 확인
   const { userName, user } = useAuth(); // 현재 로그인한 사용자명과 사용자 정보 가져오기
+  const { userLang } = useMultiLang(); // 다국어 훅
   const [localFormData, setLocalFormData] = useState<Record<string, any>>({});
   const [dateValues, setDateValues] = useState<Record<string, Date | undefined>>({});
-  
+
+  // 다국어 번역 상태 (langKeyId가 있는 컴포넌트들의 번역 텍스트)
+  const [translations, setTranslations] = useState<Record<string, string>>({});
+
+  // 다국어 키 수집 및 번역 로드
+  useEffect(() => {
+    const loadTranslations = async () => {
+      // 모든 컴포넌트에서 langKey 수집
+      const langKeysToFetch: string[] = [];
+
+      const collectLangKeys = (comps: ComponentData[]) => {
+        comps.forEach((comp) => {
+          // 컴포넌트 라벨의 langKey
+          if ((comp as any).langKey) {
+            langKeysToFetch.push((comp as any).langKey);
+          }
+          // componentConfig 내의 langKey (버튼 텍스트 등)
+          if ((comp as any).componentConfig?.langKey) {
+            langKeysToFetch.push((comp as any).componentConfig.langKey);
+          }
+          // 자식 컴포넌트 재귀 처리
+          if ((comp as any).children) {
+            collectLangKeys((comp as any).children);
+          }
+        });
+      };
+
+      collectLangKeys(allComponents);
+
+      // langKey가 있으면 배치 조회
+      if (langKeysToFetch.length > 0 && userLang) {
+        try {
+          const { apiClient } = await import("@/lib/api/client");
+          const response = await apiClient.post(
+            "/multilang/batch",
+            {
+              langKeys: [...new Set(langKeysToFetch)], // 중복 제거
+            },
+            {
+              params: {
+                userLang,
+                companyCode: user?.companyCode || "*",
+              },
+            },
+          );
+
+          if (response.data?.success && response.data?.data) {
+            setTranslations(response.data.data);
+          }
+        } catch (error) {
+          console.error("다국어 번역 로드 실패:", error);
+        }
+      }
+    };
+
+    loadTranslations();
+  }, [allComponents, userLang, user?.companyCode]);
+
   // 팝업 화면 상태
   const [popupScreen, setPopupScreen] = useState<{
     screenId: number;
     title: string;
     size: string;
   } | null>(null);
-  
+
   // 팝업 화면 레이아웃 상태
   const [popupLayout, setPopupLayout] = useState<ComponentData[]>([]);
   const [popupLoading, setPopupLoading] = useState(false);
   const [popupScreenResolution, setPopupScreenResolution] = useState<{ width: number; height: number } | null>(null);
   const [popupScreenInfo, setPopupScreenInfo] = useState<{ id: number; tableName?: string } | null>(null);
-  
+
   // 팝업 전용 formData 상태
   const [popupFormData, setPopupFormData] = useState<Record<string, any>>({});
 
@@ -210,64 +265,68 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
   const finalFormData = { ...localFormData, ...externalFormData };
 
   // 개선된 검증 시스템 (선택적 활성화)
-  const enhancedValidation = enableEnhancedValidation && screenInfo && tableColumns.length > 0 
-    ? useFormValidation(
-        finalFormData,
-        allComponents.filter(c => c.type === 'widget') as WidgetComponent[],
-        tableColumns,
-        { 
-          id: screenInfo.id, 
-          screenName: screenInfo.tableName || "unknown",
-          tableName: screenInfo.tableName,
-          screenResolution: { width: 800, height: 600 },
-          gridSettings: { size: 20, color: "#e0e0e0", opacity: 0.5 },
-          description: "동적 화면"
-        },
-        {
-          enableRealTimeValidation: true,
-          validationDelay: 300,
-          enableAutoSave: false,
-          showToastMessages: true,
-          ...validationOptions,
-        }
-      )
-    : null;
+  const enhancedValidation =
+    enableEnhancedValidation && screenInfo && tableColumns.length > 0
+      ? useFormValidation(
+          finalFormData,
+          allComponents.filter((c) => c.type === "widget") as WidgetComponent[],
+          tableColumns,
+          {
+            id: screenInfo.id,
+            screenName: screenInfo.tableName || "unknown",
+            tableName: screenInfo.tableName,
+            screenResolution: { width: 800, height: 600 },
+            gridSettings: { size: 20, color: "#e0e0e0", opacity: 0.5 },
+            description: "동적 화면",
+          },
+          {
+            enableRealTimeValidation: true,
+            validationDelay: 300,
+            enableAutoSave: false,
+            showToastMessages: true,
+            ...validationOptions,
+          },
+        )
+      : null;
 
   // 자동값 생성 함수
-  const generateAutoValue = useCallback(async (autoValueType: string, ruleId?: string): Promise<string> => {
-    const now = new Date();
-    switch (autoValueType) {
-      case "current_datetime":
-        return now.toISOString().slice(0, 19).replace("T", " "); // YYYY-MM-DD HH:mm:ss
-      case "current_date":
-        return now.toISOString().slice(0, 10); // YYYY-MM-DD
-      case "current_time":
-        return now.toTimeString().slice(0, 8); // HH:mm:ss
-      case "current_user":
-        // 실제 접속중인 사용자명 사용
-        return userName || "사용자"; // 사용자명이 없으면 기본값
-      case "uuid":
-        return crypto.randomUUID();
-      case "sequence":
-        return `SEQ_${Date.now()}`;
-      case "numbering_rule":
-        // 채번 규칙 사용
-        if (ruleId) {
-          try {
-            const { generateNumberingCode } = await import("@/lib/api/numberingRule");
-            const response = await generateNumberingCode(ruleId);
-            if (response.success && response.data) {
-              return response.data.generatedCode;
+  const generateAutoValue = useCallback(
+    async (autoValueType: string, ruleId?: string): Promise<string> => {
+      const now = new Date();
+      switch (autoValueType) {
+        case "current_datetime":
+          return now.toISOString().slice(0, 19).replace("T", " "); // YYYY-MM-DD HH:mm:ss
+        case "current_date":
+          return now.toISOString().slice(0, 10); // YYYY-MM-DD
+        case "current_time":
+          return now.toTimeString().slice(0, 8); // HH:mm:ss
+        case "current_user":
+          // 실제 접속중인 사용자명 사용
+          return userName || "사용자"; // 사용자명이 없으면 기본값
+        case "uuid":
+          return crypto.randomUUID();
+        case "sequence":
+          return `SEQ_${Date.now()}`;
+        case "numbering_rule":
+          // 채번 규칙 사용
+          if (ruleId) {
+            try {
+              const { generateNumberingCode } = await import("@/lib/api/numberingRule");
+              const response = await generateNumberingCode(ruleId);
+              if (response.success && response.data) {
+                return response.data.generatedCode;
+              }
+            } catch (error) {
+              console.error("채번 규칙 코드 생성 실패:", error);
             }
-          } catch (error) {
-            console.error("채번 규칙 코드 생성 실패:", error);
           }
-        }
-        return "";
-      default:
-        return "";
-    }
-  }, [userName]); // userName 의존성 추가
+          return "";
+        default:
+          return "";
+      }
+    },
+    [userName],
+  ); // userName 의존성 추가
 
   // 팝업 화면 레이아웃 로드
   React.useEffect(() => {
@@ -276,29 +335,29 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
         try {
           setPopupLoading(true);
           // console.log("🔍 팝업 화면 로드 시작:", popupScreen);
-          
+
           // 화면 레이아웃과 화면 정보를 병렬로 가져오기
           const [layout, screen] = await Promise.all([
             screenApi.getLayout(popupScreen.screenId),
-            screenApi.getScreen(popupScreen.screenId)
+            screenApi.getScreen(popupScreen.screenId),
           ]);
-          
+
           console.log("📊 팝업 화면 로드 완료:", {
             componentsCount: layout.components?.length || 0,
             screenInfo: {
               screenId: screen.screenId,
-              tableName: screen.tableName
+              tableName: screen.tableName,
             },
-            popupFormData: {}
+            popupFormData: {},
           });
-          
+
           setPopupLayout(layout.components || []);
           setPopupScreenResolution(layout.screenResolution || null);
           setPopupScreenInfo({
             id: popupScreen.screenId,
-            tableName: screen.tableName
+            tableName: screen.tableName,
           });
-          
+
           // 팝업 formData 초기화
           setPopupFormData({});
         } catch (error) {
@@ -309,7 +368,7 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
           setPopupLoading(false);
         }
       };
-      
+
       loadPopupLayout();
     }
   }, [popupScreen]);
@@ -320,7 +379,7 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
     external: externalFormData,
     local: localFormData,
     merged: formData,
-    hasExternalCallback: !!onFormDataChange
+    hasExternalCallback: !!onFormDataChange,
   });
 
   // 폼 데이터 업데이트
@@ -329,16 +388,16 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
     if (isPreviewMode) {
       return;
     }
-    
+
     // console.log(`🔄 updateFormData: ${fieldName} = "${value}" (외부콜백: ${!!onFormDataChange})`);
-    
+
     // 항상 로컬 상태도 업데이트
     setLocalFormData((prev) => ({
       ...prev,
       [fieldName]: value,
     }));
     // console.log(`💾 로컬 상태 업데이트: ${fieldName} = "${value}"`);
-    
+
     // 외부 콜백이 있는 경우에도 전달 (개별 필드 단위로)
     if (onFormDataChange) {
       onFormDataChange(fieldName, value);
@@ -353,29 +412,24 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
       // console.log("🔧 initAutoInputFields 실행 시작");
       for (const comp of allComponents) {
         // 🆕 type: "component" 또는 type: "widget" 모두 처리
-        if (comp.type === 'widget' || comp.type === 'component') {
+        if (comp.type === "widget" || comp.type === "component") {
           const widget = comp as WidgetComponent;
           const fieldName = widget.columnName || widget.id;
-          
+
           // 🆕 autoFill 처리 (테이블 조회 기반 자동 입력)
           if (widget.autoFill?.enabled || (comp as any).autoFill?.enabled) {
             const autoFillConfig = widget.autoFill || (comp as any).autoFill;
             const currentValue = formData[fieldName];
-            if (currentValue === undefined || currentValue === '') {
+            if (currentValue === undefined || currentValue === "") {
               const { sourceTable, filterColumn, userField, displayColumn } = autoFillConfig;
-              
+
               // 사용자 정보에서 필터 값 가져오기
               const userValue = user?.[userField];
-              
+
               if (userValue && sourceTable && filterColumn && displayColumn) {
                 try {
-                  const result = await tableTypeApi.getTableRecord(
-                    sourceTable,
-                    filterColumn,
-                    userValue,
-                    displayColumn
-                  );
-                  
+                  const result = await tableTypeApi.getTableRecord(sourceTable, filterColumn, userValue, displayColumn);
+
                   updateFormData(fieldName, result.value);
                 } catch (error) {
                   console.error(`autoFill 조회 실패: ${fieldName}`, error);
@@ -384,37 +438,40 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
             }
             continue; // autoFill이 활성화되면 일반 자동입력은 건너뜀
           }
-          
+
           // 기존 widget 타입 전용 로직은 widget인 경우만
-          if (comp.type !== 'widget') continue;
-          
+          if (comp.type !== "widget") continue;
+
           // 텍스트 타입 위젯의 자동입력 처리 (기존 로직)
-          if ((widget.widgetType === 'text' || widget.widgetType === 'email' || widget.widgetType === 'tel') && 
-              widget.webTypeConfig) {
+          if (
+            (widget.widgetType === "text" || widget.widgetType === "email" || widget.widgetType === "tel") &&
+            widget.webTypeConfig
+          ) {
             const config = widget.webTypeConfig as TextTypeConfig;
             const isAutoInput = config?.autoInput || false;
-            
+
             if (isAutoInput && config?.autoValueType) {
               // 이미 값이 있으면 덮어쓰지 않음
               const currentValue = formData[fieldName];
               console.log(`🔍 자동입력 필드 체크: ${fieldName}`, {
                 currentValue,
-                isEmpty: currentValue === undefined || currentValue === '',
+                isEmpty: currentValue === undefined || currentValue === "",
                 isAutoInput,
-                autoValueType: config.autoValueType
+                autoValueType: config.autoValueType,
               });
-              
-              if (currentValue === undefined || currentValue === '') {
-                const autoValue = config.autoValueType === "custom" 
-                  ? config.customValue || ""
-                  : generateAutoValue(config.autoValueType);
-                
+
+              if (currentValue === undefined || currentValue === "") {
+                const autoValue =
+                  config.autoValueType === "custom"
+                    ? config.customValue || ""
+                    : generateAutoValue(config.autoValueType);
+
                 console.log("🔄 자동입력 필드 초기화:", {
                   fieldName,
                   autoValueType: config.autoValueType,
-                  autoValue
+                  autoValue,
                 });
-                
+
                 updateFormData(fieldName, autoValue);
               } else {
                 // console.log(`⏭️ 자동입력 건너뜀 (값 있음): ${fieldName} = "${currentValue}"`);
@@ -471,7 +528,7 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
       const FlowWidget = require("@/components/screen/widgets/FlowWidget").FlowWidget;
       // componentConfig에서 flowId 추출
       const flowConfig = (comp as any).componentConfig || {};
-      
+
       console.log("🔍 InteractiveScreenViewer 플로우 위젯 변환:", {
         compType: comp.type,
         hasComponentConfig: !!(comp as any).componentConfig,
@@ -479,7 +536,7 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
         flowConfigFlowId: flowConfig.flowId,
         finalFlowId: flowConfig.flowId,
       });
-      
+
       const flowComponent = {
         ...comp,
         type: "flow" as const,
@@ -489,9 +546,9 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
         allowDataMove: flowConfig.allowDataMove || false,
         displayMode: flowConfig.displayMode || "horizontal",
       };
-      
+
       console.log("🔍 InteractiveScreenViewer 최종 flowComponent:", flowComponent);
-      
+
       return (
         <div className="w-full">
           <FlowWidget component={flowComponent as any} />
@@ -503,7 +560,7 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
     const componentType = (comp as any).componentType || (comp as any).componentId;
     if (comp.type === "tabs" || (comp.type === "component" && componentType === "tabs-widget")) {
       const TabsWidget = require("@/components/screen/widgets/TabsWidget").TabsWidget;
-      
+
       // componentConfig에서 탭 정보 추출
       const tabsConfig = comp.componentConfig || {};
       const tabsComponent = {
@@ -516,7 +573,7 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
         allowCloseable: tabsConfig.allowCloseable || false,
         persistSelection: tabsConfig.persistSelection || false,
       };
-      
+
       console.log("🔍 탭 컴포넌트 렌더링:", {
         originalType: comp.type,
         componentType,
@@ -524,11 +581,11 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
         tabs: tabsComponent.tabs,
         tabsConfig,
       });
-      
+
       return (
         <div className="h-full w-full">
-          <TabsWidget 
-            component={tabsComponent as any} 
+          <TabsWidget
+            component={tabsComponent as any}
             menuObjid={menuObjid} // 🆕 부모의 menuObjid 전달
           />
         </div>
@@ -541,7 +598,7 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
       const componentConfig = (comp as any).componentConfig || {};
       // config가 중첩되어 있을 수 있음: componentConfig.config 또는 componentConfig 직접
       const rackConfig = componentConfig.config || componentConfig;
-      
+
       console.log("🏗️ 렉 구조 컴포넌트 렌더링:", {
         componentType,
         componentConfig,
@@ -549,7 +606,7 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
         fieldMapping: rackConfig.fieldMapping,
         formData,
       });
-      
+
       return (
         <div className="h-full w-full overflow-auto">
           <RackStructureComponent
@@ -568,10 +625,14 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
       );
     }
 
-    const { widgetType, label, placeholder, required, readonly, columnName } = comp;
+    const { widgetType, label: originalLabel, placeholder, required, readonly, columnName } = comp;
     const fieldName = columnName || comp.id;
     const currentValue = formData[fieldName] || "";
 
+    // 다국어 라벨 적용 (langKey가 있으면 번역 텍스트 사용)
+    const compLangKey = (comp as any).langKey;
+    const label = compLangKey && translations[compLangKey] ? translations[compLangKey] : originalLabel;
+
     // 스타일 적용
     const applyStyles = (element: React.ReactElement) => {
       if (!comp.style) return element;
@@ -583,7 +644,7 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
       return React.cloneElement(element, {
         style: {
           ...element.props.style, // 기존 스타일 유지
-          ...styleWithoutSize,  // width/height 제외한 스타일만 적용
+          ...styleWithoutSize, // width/height 제외한 스타일만 적용
           boxSizing: "border-box",
         },
       });
@@ -598,12 +659,13 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
 
         // 자동입력 관련 처리
         const isAutoInput = config?.autoInput || false;
-        const autoValue = isAutoInput && config?.autoValueType
-          ? config.autoValueType === "custom" 
-            ? config.customValue || ""
-            : generateAutoValue(config.autoValueType)
-          : "";
-        
+        const autoValue =
+          isAutoInput && config?.autoValueType
+            ? config.autoValueType === "custom"
+              ? config.customValue || ""
+              : generateAutoValue(config.autoValueType)
+            : "";
+
         // 기본값 또는 자동값 설정
         const displayValue = isAutoInput ? autoValue : currentValue || config?.defaultValue || "";
 
@@ -796,17 +858,17 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
         });
 
         const finalPlaceholder = config?.placeholder || placeholder || "선택하세요...";
-        
+
         // 🆕 연쇄 드롭다운 처리 (방법 1: 관계 코드 방식 - 권장)
         if (config?.cascadingRelationCode && config?.cascadingParentField) {
           const parentFieldValue = formData[config.cascadingParentField];
-          
+
           console.log("🔗 연쇄 드롭다운 (관계코드 방식):", {
             relationCode: config.cascadingRelationCode,
             parentField: config.cascadingParentField,
             parentValue: parentFieldValue,
           });
-          
+
           return applyStyles(
             <CascadingDropdownWrapper
               relationCode={config.cascadingRelationCode}
@@ -820,12 +882,12 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
             />,
           );
         }
-        
+
         // 🔄 연쇄 드롭다운 처리 (방법 2: 직접 설정 방식 - 레거시)
         if (config?.cascading?.enabled) {
           const cascadingConfig = config.cascading;
           const parentValue = formData[cascadingConfig.parentField];
-          
+
           return applyStyles(
             <CascadingDropdownWrapper
               config={cascadingConfig}
@@ -838,7 +900,7 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
             />,
           );
         }
-        
+
         // 일반 Select
         const options = config?.options || [
           { label: "옵션 1", value: "option1" },
@@ -1007,7 +1069,7 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
               min={config?.minDate}
               max={config?.maxDate}
               className="w-full"
-            style={{ height: "100%" }}
+              style={{ height: "100%" }}
             />,
           );
         } else {
@@ -1075,19 +1137,20 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
       case "file": {
         const widget = comp as WidgetComponent;
         const config = widget.webTypeConfig as FileTypeConfig | undefined;
-        
+
         // 현재 파일 값 가져오기
         const getCurrentValue = () => {
           const fieldName = widget.columnName || widget.id;
           return (externalFormData?.[fieldName] || localFormData[fieldName]) as any;
         };
-        
+
         const currentValue = getCurrentValue();
 
         // 화면 ID 추출 (URL에서)
-        const screenId = typeof window !== 'undefined' && window.location.pathname.includes('/screens/') 
-          ? parseInt(window.location.pathname.split('/screens/')[1]) 
-          : null;
+        const screenId =
+          typeof window !== "undefined" && window.location.pathname.includes("/screens/")
+            ? parseInt(window.location.pathname.split("/screens/")[1])
+            : null;
 
         console.log("📁 InteractiveScreenViewer - File 위젯:", {
           componentId: widget.id,
@@ -1109,14 +1172,14 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
             e.target.value = ""; // 파일 선택 취소
             return;
           }
-          
+
           const files = e.target.files;
           const fieldName = widget.columnName || widget.id;
-          
+
           // 파일 선택을 취소한 경우 (files가 null이거나 길이가 0)
           if (!files || files.length === 0) {
             // console.log("📁 파일 선택 취소됨 - 기존 파일 유지");
-            
+
             // 현재 저장된 파일이 있는지 확인
             const currentStoredValue = externalFormData?.[fieldName] || localFormData[fieldName];
             if (currentStoredValue) {
@@ -1145,19 +1208,19 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
           // 실제 서버로 파일 업로드
           try {
             toast.loading(`${files.length}개 파일 업로드 중...`);
-            
+
             const uploadResult = await uploadFilesAndCreateData(files);
-            
+
             if (uploadResult.success) {
               // console.log("📁 업로드 완료된 파일 데이터:", uploadResult.data);
-              
-              setLocalFormData(prev => ({ ...prev, [fieldName]: uploadResult.data }));
-              
+
+              setLocalFormData((prev) => ({ ...prev, [fieldName]: uploadResult.data }));
+
               // 외부 폼 데이터 변경 콜백 호출
               if (onFormDataChange) {
                 onFormDataChange(fieldName, uploadResult.data);
               }
-              
+
               toast.success(uploadResult.message);
             } else {
               throw new Error("파일 업로드에 실패했습니다.");
@@ -1165,7 +1228,7 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
           } catch (error) {
             // console.error("파일 업로드 오류:", error);
             toast.error("파일 업로드에 실패했습니다.");
-            
+
             // 파일 입력 초기화
             e.target.value = "";
             return;
@@ -1174,13 +1237,13 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
 
         const clearFile = () => {
           const fieldName = widget.columnName || widget.id;
-          setLocalFormData(prev => ({ ...prev, [fieldName]: null }));
-          
+          setLocalFormData((prev) => ({ ...prev, [fieldName]: null }));
+
           // 외부 폼 데이터 변경 콜백 호출
           if (onFormDataChange) {
             onFormDataChange(fieldName, null);
           }
-          
+
           // 파일 input 초기화
           const fileInput = document.querySelector(`input[type="file"][data-field="${fieldName}"]`) as HTMLInputElement;
           if (fileInput) {
@@ -1194,39 +1257,31 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
           // 새로운 JSON 구조에서 파일 정보 추출
           const fileData = currentValue.files || [];
           if (fileData.length === 0) return null;
-          
+
           return (
             <div className="mt-2 space-y-2">
-              <div className="text-sm font-medium text-foreground">
-                업로드된 파일 ({fileData.length}개)
-              </div>
+              <div className="text-foreground text-sm font-medium">업로드된 파일 ({fileData.length}개)</div>
               {fileData.map((fileInfo: any, index: number) => {
-                const isImage = fileInfo.type?.startsWith('image/');
-                
+                const isImage = fileInfo.type?.startsWith("image/");
+
                 return (
-                  <div key={index} className="flex items-center gap-2 rounded border bg-muted p-2">
-                    <div className="flex h-16 w-16 items-center justify-center rounded bg-muted/50">
+                  <div key={index} className="bg-muted flex items-center gap-2 rounded border p-2">
+                    <div className="bg-muted/50 flex h-16 w-16 items-center justify-center rounded">
                       {isImage ? (
                         <div className="text-success text-xs font-medium">IMG</div>
                       ) : (
-                        <File className="h-8 w-8 text-muted-foreground" />
+                        <File className="text-muted-foreground h-8 w-8" />
                       )}
                     </div>
-                    <div className="flex-1 min-w-0">
-                      <p className="text-sm font-medium text-foreground truncate">{fileInfo.name}</p>
-                      <p className="text-xs text-muted-foreground">
-                        {(fileInfo.size / 1024 / 1024).toFixed(2)} MB
+                    <div className="min-w-0 flex-1">
+                      <p className="text-foreground truncate text-sm font-medium">{fileInfo.name}</p>
+                      <p className="text-muted-foreground text-xs">{(fileInfo.size / 1024 / 1024).toFixed(2)} MB</p>
+                      <p className="text-muted-foreground text-xs">{fileInfo.type || "알 수 없는 형식"}</p>
+                      <p className="text-muted-foreground/70 text-xs">
+                        업로드: {new Date(fileInfo.uploadedAt).toLocaleString("ko-KR")}
                       </p>
-                      <p className="text-xs text-muted-foreground">{fileInfo.type || '알 수 없는 형식'}</p>
-                      <p className="text-xs text-muted-foreground/70">업로드: {new Date(fileInfo.uploadedAt).toLocaleString('ko-KR')}</p>
                     </div>
-                    <Button
-                      type="button"
-                      variant="ghost"
-                      size="sm"
-                      onClick={clearFile}
-                      className="h-8 w-8 p-0"
-                    >
+                    <Button type="button" variant="ghost" size="sm" onClick={clearFile} className="h-8 w-8 p-0">
                       <X className="h-4 w-4" />
                     </Button>
                   </div>
@@ -1237,7 +1292,7 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
         };
 
         const fieldName = widget.columnName || widget.id;
-        
+
         return applyStyles(
           <div className="w-full space-y-2">
             {/* 파일 선택 영역 */}
@@ -1250,45 +1305,45 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
                 required={required}
                 multiple={config?.multiple}
                 accept={config?.accept}
-                className="absolute inset-0 w-full h-full opacity-0 cursor-pointer disabled:cursor-not-allowed"
+                className="absolute inset-0 h-full w-full cursor-pointer opacity-0 disabled:cursor-not-allowed"
                 style={{ zIndex: 1 }}
               />
-              <div className={cn(
-                "flex items-center justify-center rounded-lg border-2 border-dashed p-4 text-center transition-colors",
-                currentValue && currentValue.files && currentValue.files.length > 0 
-                  ? 'border-success/30 bg-success/10' 
-                  : 'border-input bg-muted hover:border-input/80 hover:bg-muted/80',
-                readonly && 'cursor-not-allowed opacity-50',
-                !readonly && 'cursor-pointer'
-              )}>
+              <div
+                className={cn(
+                  "flex items-center justify-center rounded-lg border-2 border-dashed p-4 text-center transition-colors",
+                  currentValue && currentValue.files && currentValue.files.length > 0
+                    ? "border-success/30 bg-success/10"
+                    : "border-input bg-muted hover:border-input/80 hover:bg-muted/80",
+                  readonly && "cursor-not-allowed opacity-50",
+                  !readonly && "cursor-pointer",
+                )}
+              >
                 <div className="space-y-2">
                   {currentValue && currentValue.files && currentValue.files.length > 0 ? (
                     <>
                       <div className="flex items-center justify-center">
-                        <div className="flex h-8 w-8 items-center justify-center rounded-full bg-success/20">
-                          <svg className="h-5 w-5 text-success" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <div className="bg-success/20 flex h-8 w-8 items-center justify-center rounded-full">
+                          <svg className="text-success h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                             <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
                           </svg>
                         </div>
                       </div>
-                      <p className="text-sm font-medium text-success">
-                        {currentValue.totalCount === 1 
-                          ? '파일 선택됨' 
-                          : `${currentValue.totalCount}개 파일 선택됨`}
+                      <p className="text-success text-sm font-medium">
+                        {currentValue.totalCount === 1 ? "파일 선택됨" : `${currentValue.totalCount}개 파일 선택됨`}
                       </p>
-                      <p className="text-xs text-success/80">
+                      <p className="text-success/80 text-xs">
                         총 {(currentValue.totalSize / 1024 / 1024).toFixed(2)}MB
                       </p>
-                      <p className="text-xs text-success/80">클릭하여 다른 파일 선택</p>
+                      <p className="text-success/80 text-xs">클릭하여 다른 파일 선택</p>
                     </>
                   ) : (
                     <>
-                      <Upload className="mx-auto h-8 w-8 text-muted-foreground" />
-                      <p className="text-sm text-muted-foreground">
-                        {config?.dragDrop ? '파일을 드래그하여 놓거나 클릭하여 선택' : '클릭하여 파일 선택'}
+                      <Upload className="text-muted-foreground mx-auto h-8 w-8" />
+                      <p className="text-muted-foreground text-sm">
+                        {config?.dragDrop ? "파일을 드래그하여 놓거나 클릭하여 선택" : "클릭하여 파일 선택"}
                       </p>
                       {(config?.accept || config?.maxSize) && (
-                        <div className="text-xs text-muted-foreground space-y-1">
+                        <div className="text-muted-foreground space-y-1 text-xs">
                           {config.accept && <div>허용 형식: {config.accept}</div>}
                           {config.maxSize && <div>최대 크기: {config.maxSize}MB</div>}
                           {config.multiple && <div>다중 선택 가능</div>}
@@ -1299,10 +1354,10 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
                 </div>
               </div>
             </div>
-            
+
             {/* 파일 미리보기 */}
             {renderFilePreview()}
-          </div>
+          </div>,
         );
       }
 
@@ -1310,7 +1365,7 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
         const widget = comp as WidgetComponent;
         const config = widget.webTypeConfig as CodeTypeConfig | undefined;
 
-        console.log(`🔍 [InteractiveScreenViewer] Code 위젯 렌더링:`, {
+        console.log("🔍 [InteractiveScreenViewer] Code 위젯 렌더링:", {
           componentId: widget.id,
           columnName: widget.columnName,
           codeCategory: config?.codeCategory,
@@ -1344,11 +1399,11 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
               onEvent={(event: string, data: any) => {
                 // console.log(`Code widget event: ${event}`, data);
               }}
-            />
+            />,
           );
         } catch (error) {
           // console.error("DynamicWebTypeRenderer 로딩 실패, 기본 Select 사용:", error);
-          
+
           // 폴백: 기본 Select 컴포넌트 사용
           return applyStyles(
             <Select
@@ -1363,64 +1418,31 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
               <SelectContent>
                 <SelectItem value="loading">로딩 중...</SelectItem>
               </SelectContent>
-            </Select>
+            </Select>,
           );
         }
       }
 
       case "entity": {
+        // DynamicWebTypeRenderer로 위임하여 EntitySearchInputWrapper 사용
         const widget = comp as WidgetComponent;
-        const config = widget.webTypeConfig as EntityTypeConfig | undefined;
-
-        console.log("🏢 InteractiveScreenViewer - Entity 위젯:", {
-          componentId: widget.id,
-          widgetType: widget.widgetType,
-          config,
-          appliedSettings: {
-            entityName: config?.entityName,
-            displayField: config?.displayField,
-            valueField: config?.valueField,
-            multiple: config?.multiple,
-            defaultValue: config?.defaultValue,
-          },
-        });
-
-        const finalPlaceholder = config?.placeholder || "엔티티를 선택하세요...";
-        const defaultOptions = [
-          { label: "사용자", value: "user" },
-          { label: "제품", value: "product" },
-          { label: "주문", value: "order" },
-          { label: "카테고리", value: "category" },
-        ];
-
-        return (
-          <Select
-            value={currentValue || config?.defaultValue || ""}
-            onValueChange={(value) => updateFormData(fieldName, value)}
-            disabled={readonly}
-            required={required}
-          >
-            <SelectTrigger 
-              className="w-full"
-            style={{ height: "100%" }}
-              style={{
-                ...comp.style,
-                width: "100%",
-                height: "100%",
-              }}
-            >
-              <SelectValue placeholder={finalPlaceholder} />
-            </SelectTrigger>
-            <SelectContent>
-              {defaultOptions.map((option) => (
-                <SelectItem key={option.value} value={option.value}>
-                  {config?.displayFormat
-                    ? config.displayFormat.replace("{label}", option.label).replace("{value}", option.value)
-                    : option.label}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>,
+        return applyStyles(
+          <DynamicWebTypeRenderer
+            webType="entity"
+            config={widget.webTypeConfig}
+            props={{
+              component: widget,
+              value: currentValue,
+              onChange: (value: any) => updateFormData(fieldName, value),
+              onFormDataChange: updateFormData,
+              formData: formData,
+              readonly: readonly,
+              required: required,
+              placeholder: widget.placeholder || "엔티티를 선택하세요",
+              isInteractive: true,
+              className: "w-full h-full",
+            }}
+          />,
         );
       }
 
@@ -1433,9 +1455,9 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
           if (isPreviewMode) {
             return;
           }
-          
+
           const actionType = config?.actionType || "save";
-          
+
           try {
             switch (actionType) {
               case "save":
@@ -1472,7 +1494,7 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
                 await handleCustomAction();
                 break;
               default:
-                // console.log(`알 수 없는 액션 타입: ${actionType}`);
+              // console.log(`알 수 없는 액션 타입: ${actionType}`);
             }
           } catch (error) {
             // console.error(`버튼 액션 실행 오류 (${actionType}):`, error);
@@ -1503,24 +1525,24 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
           // 기존 방식 (레거시 지원)
           const currentFormData = { ...localFormData, ...externalFormData };
           // console.log("💾 기존 방식으로 저장 - currentFormData:", currentFormData);
-          
+
           // formData 유효성 체크를 완화 (빈 객체라도 위젯이 있으면 저장 진행)
-          const hasWidgets = allComponents.some(comp => comp.type === 'widget');
+          const hasWidgets = allComponents.some((comp) => comp.type === "widget");
           if (!hasWidgets) {
             alert("저장할 입력 컴포넌트가 없습니다.");
             return;
           }
 
           // 필수 항목 검증
-          const requiredFields = allComponents.filter(c => c.required && (c.columnName || c.id));
-          const missingFields = requiredFields.filter(field => {
+          const requiredFields = allComponents.filter((c) => c.required && (c.columnName || c.id));
+          const missingFields = requiredFields.filter((field) => {
             const fieldName = field.columnName || field.id;
             const value = currentFormData[fieldName];
             return !value || value.toString().trim() === "";
           });
 
           if (missingFields.length > 0) {
-            const fieldNames = missingFields.map(f => f.label || f.columnName || f.id).join(", ");
+            const fieldNames = missingFields.map((f) => f.label || f.columnName || f.id).join(", ");
             alert(`다음 필수 항목을 입력해주세요: ${fieldNames}`);
             return;
           }
@@ -1533,56 +1555,59 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
           try {
             // 컬럼명 기반으로 데이터 매핑
             const mappedData: Record<string, any> = {};
-            
+
             // 입력 가능한 컴포넌트에서 데이터 수집
-            allComponents.forEach(comp => {
+            allComponents.forEach((comp) => {
               // 위젯 컴포넌트이고 입력 가능한 타입인 경우
-              if (comp.type === 'widget') {
+              if (comp.type === "widget") {
                 const widget = comp as WidgetComponent;
                 const fieldName = widget.columnName || widget.id;
                 let value = currentFormData[fieldName];
-                
+
                 console.log(`🔍 컴포넌트 처리: ${fieldName}`, {
                   widgetType: widget.widgetType,
                   formDataValue: value,
                   hasWebTypeConfig: !!widget.webTypeConfig,
-                  config: widget.webTypeConfig
+                  config: widget.webTypeConfig,
                 });
-                
+
                 // 자동입력 필드인 경우에만 값이 없을 때 생성
-                if ((widget.widgetType === 'text' || widget.widgetType === 'email' || widget.widgetType === 'tel') && 
-                    widget.webTypeConfig) {
+                if (
+                  (widget.widgetType === "text" || widget.widgetType === "email" || widget.widgetType === "tel") &&
+                  widget.webTypeConfig
+                ) {
                   const config = widget.webTypeConfig as TextTypeConfig;
                   const isAutoInput = config?.autoInput || false;
-                  
+
                   console.log(`📋 ${fieldName} 자동입력 체크:`, {
                     isAutoInput,
                     autoValueType: config?.autoValueType,
                     hasValue: !!value,
-                    value
+                    value,
                   });
-                  
-                  if (isAutoInput && config?.autoValueType && (!value || value === '')) {
+
+                  if (isAutoInput && config?.autoValueType && (!value || value === "")) {
                     // 자동입력이고 값이 없을 때만 생성
-                    value = config.autoValueType === "custom" 
-                      ? config.customValue || ""
-                      : generateAutoValue(config.autoValueType);
-                    
+                    value =
+                      config.autoValueType === "custom"
+                        ? config.customValue || ""
+                        : generateAutoValue(config.autoValueType);
+
                     console.log("💾 자동입력 값 저장 (값이 없어서 생성):", {
                       fieldName,
                       autoValueType: config.autoValueType,
-                      generatedValue: value
+                      generatedValue: value,
                     });
                   } else if (isAutoInput && value) {
                     console.log("💾 자동입력 필드지만 기존 값 유지:", {
                       fieldName,
-                      existingValue: value
+                      existingValue: value,
                     });
                   } else if (!isAutoInput) {
                     // console.log(`📝 일반 입력 필드: ${fieldName} = "${value}"`);
                   }
                 }
-                
+
                 // 값이 있는 경우만 매핑 (빈 문자열도 포함하되, undefined는 제외)
                 if (value !== undefined && value !== null && value !== "undefined") {
                   // columnName이 있으면 columnName을 키로, 없으면 컴포넌트 ID를 키로 사용
@@ -1601,35 +1626,34 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
               매핑된데이터: mappedData,
               화면정보: screenInfo,
               전체컴포넌트수: allComponents.length,
-              위젯컴포넌트수: allComponents.filter(c => c.type === 'widget').length,
+              위젯컴포넌트수: allComponents.filter((c) => c.type === "widget").length,
             });
 
             // 각 컴포넌트의 상세 정보 로그
             // console.log("🔍 컴포넌트별 데이터 수집 상세:");
-            allComponents.forEach(comp => {
-              if (comp.type === 'widget') {
+            allComponents.forEach((comp) => {
+              if (comp.type === "widget") {
                 const widget = comp as WidgetComponent;
                 const fieldName = widget.columnName || widget.id;
                 const value = currentFormData[fieldName];
-                const hasValue = value !== undefined && value !== null && value !== '';
+                const hasValue = value !== undefined && value !== null && value !== "";
                 // console.log(`  - ${fieldName} (${widget.widgetType}): "${value}" (값있음: ${hasValue}, 컬럼명: ${widget.columnName})`);
               }
             });
-            
+
             // 매핑된 데이터가 비어있으면 경고
             if (Object.keys(mappedData).length === 0) {
               // console.warn("⚠️ 매핑된 데이터가 없습니다. 빈 데이터로 저장됩니다.");
             }
 
             // 테이블명 결정 (화면 정보에서 가져오거나 첫 번째 컴포넌트의 테이블명 사용)
-            const tableName = screenInfo.tableName || 
-                             allComponents.find(c => c.columnName)?.tableName ||
-                             "dynamic_form_data"; // 기본값
+            const tableName =
+              screenInfo.tableName || allComponents.find((c) => c.columnName)?.tableName || "dynamic_form_data"; // 기본값
 
             // 🆕 자동으로 작성자 정보 추가 (user.userId가 확실히 있음)
             const writerValue = user.userId;
             const companyCodeValue = user.companyCode || "";
-            
+
             console.log("👤 현재 사용자 정보:", {
               userId: user.userId,
               userName: userName,
@@ -1661,11 +1685,11 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
             if (result.success) {
               alert("저장되었습니다.");
               // console.log("✅ 저장 성공:", result.data);
-              
+
               // 저장 후 데이터 초기화 (선택사항)
               if (onFormDataChange) {
                 const resetData: Record<string, any> = {};
-                Object.keys(formData).forEach(key => {
+                Object.keys(formData).forEach((key) => {
                   resetData[key] = "";
                 });
                 onFormDataChange(resetData);
@@ -1679,27 +1703,25 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
           }
         };
 
-
         // 삭제 액션
         const handleDeleteAction = async () => {
           const confirmMessage = config?.confirmMessage || "정말로 삭제하시겠습니까?";
-          
+
           if (!confirm(confirmMessage)) {
             return;
           }
 
           // 삭제할 레코드 ID가 필요 (폼 데이터에서 id 필드 찾기)
           const recordId = formData["id"] || formData["ID"] || formData["objid"];
-          
+
           if (!recordId) {
             alert("삭제할 데이터를 찾을 수 없습니다. (ID가 없음)");
             return;
           }
 
           // 테이블명 결정
-          const tableName = screenInfo?.tableName || 
-                           allComponents.find(c => c.columnName)?.tableName ||
-                           "unknown_table";
+          const tableName =
+            screenInfo?.tableName || allComponents.find((c) => c.columnName)?.tableName || "unknown_table";
 
           if (!tableName || tableName === "unknown_table") {
             alert("테이블 정보가 없어 삭제할 수 없습니다.");
@@ -1709,16 +1731,17 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
           try {
             // console.log("🗑️ 삭제 실행:", { recordId, tableName, formData });
 
-            const result = await dynamicFormApi.deleteFormDataFromTable(recordId, tableName);
+            // screenId 전달하여 제어관리 실행 가능하도록 함
+            const result = await dynamicFormApi.deleteFormDataFromTable(recordId, tableName, screenInfo?.id);
 
             if (result.success) {
               alert("삭제되었습니다.");
               // console.log("✅ 삭제 성공");
-              
+
               // 삭제 후 폼 초기화
               if (onFormDataChange) {
                 const resetData: Record<string, any> = {};
-                Object.keys(formData).forEach(key => {
+                Object.keys(formData).forEach((key) => {
                   resetData[key] = "";
                 });
                 onFormDataChange(resetData);
@@ -1735,13 +1758,13 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
         // 편집 액션
         const handleEditAction = () => {
           console.log("✏️ 수정 액션 실행");
-          
+
           // 버튼 컴포넌트의 수정 모달 설정 가져오기
           const editModalTitle = config?.editModalTitle || "";
           const editModalDescription = config?.editModalDescription || "";
-          
+
           console.log("📝 버튼 수정 모달 설정:", { editModalTitle, editModalDescription });
-          
+
           // EditModal 열기 이벤트 발생
           const event = new CustomEvent("openEditModal", {
             detail: {
@@ -1770,7 +1793,7 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
         const handleSearchAction = () => {
           // console.log("🔍 검색 실행:", formData);
           // 검색 로직
-          const searchTerms = Object.values(formData).filter(v => v && v.toString().trim());
+          const searchTerms = Object.values(formData).filter((v) => v && v.toString().trim());
           if (searchTerms.length === 0) {
             alert("검색할 내용을 입력해주세요.");
           } else {
@@ -1783,7 +1806,7 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
           if (confirm("모든 입력을 초기화하시겠습니까?")) {
             if (onFormDataChange) {
               const resetData: Record<string, any> = {};
-              Object.keys(formData).forEach(key => {
+              Object.keys(formData).forEach((key) => {
                 resetData[key] = "";
               });
               onFormDataChange(resetData);
@@ -1803,22 +1826,24 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
         // 닫기 액션
         const handleCloseAction = () => {
           // console.log("❌ 닫기 액션 실행");
-          
+
           // 모달 내부에서 실행되는지 확인
           const isInModal = document.querySelector('[role="dialog"]') !== null;
           const isInPopup = window.opener !== null;
-          
+
           if (isInModal) {
             // 모달 내부인 경우: 모달의 닫기 버튼 클릭하거나 모달 닫기 이벤트 발생
             // console.log("🔄 모달 내부에서 닫기 - 모달 닫기 시도");
-            
+
             // 모달의 닫기 버튼을 찾아서 클릭
-            const modalCloseButton = document.querySelector('[role="dialog"] button[aria-label*="Close"], [role="dialog"] button[data-dismiss="modal"], [role="dialog"] .dialog-close');
+            const modalCloseButton = document.querySelector(
+              '[role="dialog"] button[aria-label*="Close"], [role="dialog"] button[data-dismiss="modal"], [role="dialog"] .dialog-close',
+            );
             if (modalCloseButton) {
               (modalCloseButton as HTMLElement).click();
             } else {
               // ESC 키 이벤트 발생시키기
-              const escEvent = new KeyboardEvent('keydown', { key: 'Escape', keyCode: 27, which: 27 });
+              const escEvent = new KeyboardEvent("keydown", { key: "Escape", keyCode: 27, which: 27 });
               document.dispatchEvent(escEvent);
             }
           } else if (isInPopup) {
@@ -1835,7 +1860,7 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
         // 팝업 액션
         const handlePopupAction = () => {
           // console.log("🎯 팝업 액션 실행:", { popupScreenId: config?.popupScreenId });
-          
+
           if (config?.popupScreenId) {
             // 화면 모달 열기
             setPopupScreen({
@@ -1854,17 +1879,17 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
         // 네비게이션 액션
         const handleNavigateAction = () => {
           const navigateType = config?.navigateType || "url";
-          
+
           if (navigateType === "screen" && config?.navigateScreenId) {
             // 화면으로 이동
             const screenPath = `/screens/${config.navigateScreenId}`;
-            
+
             console.log("🎯 화면으로 이동:", {
               screenId: config.navigateScreenId,
               target: config.navigateTarget || "_self",
-              path: screenPath
+              path: screenPath,
             });
-            
+
             if (config.navigateTarget === "_blank") {
               window.open(screenPath, "_blank");
             } else {
@@ -1874,9 +1899,9 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
             // URL로 이동
             console.log("🔗 URL로 이동:", {
               url: config.navigateUrl,
-              target: config.navigateTarget || "_self"
+              target: config.navigateTarget || "_self",
             });
-            
+
             if (config.navigateTarget === "_blank") {
               window.open(config.navigateUrl, "_blank");
             } else {
@@ -1886,7 +1911,7 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
             console.log("🔗 네비게이션 정보가 설정되지 않았습니다:", {
               navigateType,
               hasUrl: !!config?.navigateUrl,
-              hasScreenId: !!config?.navigateScreenId
+              hasScreenId: !!config?.navigateScreenId,
             });
           }
         };
@@ -1909,17 +1934,24 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
           }
         };
 
+        // 버튼 텍스트 다국어 적용 (componentConfig.langKey 확인)
+        const buttonLangKey = (widget as any).componentConfig?.langKey;
+        const buttonText =
+          buttonLangKey && translations[buttonLangKey]
+            ? translations[buttonLangKey]
+            : (widget as any).componentConfig?.text || label || "버튼";
+
         // 커스텀 색상이 있으면 Tailwind 클래스 대신 직접 스타일 적용
         const hasCustomColors = config?.backgroundColor || config?.textColor;
-        
+
         return applyStyles(
           <button
             onClick={handleButtonClick}
             disabled={readonly}
-            className={`w-full rounded-md px-3 py-2 text-sm font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 ${
-              hasCustomColors 
-                ? '' 
-                : 'bg-background border border-foreground text-foreground shadow-xs hover:bg-muted/50'
+            className={`focus:ring-ring w-full rounded-md px-3 py-2 text-sm font-medium transition-colors focus:ring-2 focus:ring-offset-2 focus:outline-none disabled:pointer-events-none disabled:opacity-50 ${
+              hasCustomColors
+                ? ""
+                : "bg-background border-foreground text-foreground hover:bg-muted/50 border shadow-xs"
             }`}
             style={{
               height: "100%",
@@ -1928,8 +1960,8 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
               borderColor: config?.borderColor,
             }}
           >
-            {label || "버튼"}
-          </button>
+            {buttonText}
+          </button>,
         );
       }
 
@@ -1952,71 +1984,73 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
   // 파일 첨부 컴포넌트 처리
   if (isFileComponent(component)) {
     const fileComponent = component as FileComponent;
-    
+
     console.log("🎯 File 컴포넌트 렌더링:", {
       componentId: fileComponent.id,
       currentUploadedFiles: fileComponent.uploadedFiles?.length || 0,
       hasOnFormDataChange: !!onFormDataChange,
-      userInfo: user ? { userId: user.userId, companyCode: user.companyCode } : "no user"
+      userInfo: user ? { userId: user.userId, companyCode: user.companyCode } : "no user",
     });
-    
-    const handleFileUpdate = useCallback(async (updates: Partial<FileComponent>) => {
-      // 실제 화면에서는 파일 업데이트를 처리
-      console.log("📎 InteractiveScreenViewer - 파일 컴포넌트 업데이트:", {
-        updates,
-        hasUploadedFiles: !!updates.uploadedFiles,
-        uploadedFilesCount: updates.uploadedFiles?.length || 0,
-        hasOnFormDataChange: !!onFormDataChange
-      });
-      
-      if (updates.uploadedFiles && onFormDataChange) {
-        const fieldName = fileComponent.columnName || fileComponent.id;
-        
-        // attach_file_info 테이블 구조에 맞는 데이터 생성
-        const fileInfoForDB = updates.uploadedFiles.map(file => ({
-          objid: file.objid.replace('temp_', ''), // temp_ 제거
-          target_objid: "",
-          saved_file_name: file.savedFileName,
-          real_file_name: file.realFileName,
-          doc_type: file.docType,
-          doc_type_name: file.docTypeName,
-          file_size: file.fileSize,
-          file_ext: file.fileExt,
-          file_path: file.filePath,
-          writer: file.writer,
-          regdate: file.regdate,
-          status: file.status,
-          parent_target_objid: "",
-          company_code: file.companyCode
-        }));
 
-        // console.log("💾 attach_file_info 형태로 변환된 데이터:", fileInfoForDB);
-
-        // FormData에는 파일 연결 정보만 저장 (간단한 형태)
-        const formDataValue = {
-          fileCount: updates.uploadedFiles.length,
-          docType: fileComponent.fileConfig.docType,
-          files: updates.uploadedFiles.map(file => ({
-            objid: file.objid,
-            realFileName: file.realFileName,
-            fileSize: file.fileSize,
-            status: file.status
-          }))
-        };
-
-        // console.log("📝 FormData 저장값:", { fieldName, formDataValue });
-        onFormDataChange(fieldName, formDataValue);
-
-        // TODO: 실제 API 연동 시 attach_file_info 테이블에 저장
-        // await saveFilesToDatabase(fileInfoForDB);
-        
-      } else {
-        console.warn("⚠️ 파일 업데이트 실패:", {
+    const handleFileUpdate = useCallback(
+      async (updates: Partial<FileComponent>) => {
+        // 실제 화면에서는 파일 업데이트를 처리
+        console.log("📎 InteractiveScreenViewer - 파일 컴포넌트 업데이트:", {
+          updates,
           hasUploadedFiles: !!updates.uploadedFiles,
-          hasOnFormDataChange: !!onFormDataChange
+          uploadedFilesCount: updates.uploadedFiles?.length || 0,
+          hasOnFormDataChange: !!onFormDataChange,
         });
-      }
-    }, [fileComponent, onFormDataChange]);
+
+        if (updates.uploadedFiles && onFormDataChange) {
+          const fieldName = fileComponent.columnName || fileComponent.id;
+
+          // attach_file_info 테이블 구조에 맞는 데이터 생성
+          const fileInfoForDB = updates.uploadedFiles.map((file) => ({
+            objid: file.objid.replace("temp_", ""), // temp_ 제거
+            target_objid: "",
+            saved_file_name: file.savedFileName,
+            real_file_name: file.realFileName,
+            doc_type: file.docType,
+            doc_type_name: file.docTypeName,
+            file_size: file.fileSize,
+            file_ext: file.fileExt,
+            file_path: file.filePath,
+            writer: file.writer,
+            regdate: file.regdate,
+            status: file.status,
+            parent_target_objid: "",
+            company_code: file.companyCode,
+          }));
+
+          // console.log("💾 attach_file_info 형태로 변환된 데이터:", fileInfoForDB);
+
+          // FormData에는 파일 연결 정보만 저장 (간단한 형태)
+          const formDataValue = {
+            fileCount: updates.uploadedFiles.length,
+            docType: fileComponent.fileConfig.docType,
+            files: updates.uploadedFiles.map((file) => ({
+              objid: file.objid,
+              realFileName: file.realFileName,
+              fileSize: file.fileSize,
+              status: file.status,
+            })),
+          };
+
+          // console.log("📝 FormData 저장값:", { fieldName, formDataValue });
+          onFormDataChange(fieldName, formDataValue);
+
+          // TODO: 실제 API 연동 시 attach_file_info 테이블에 저장
+          // await saveFilesToDatabase(fileInfoForDB);
+        } else {
+          console.warn("⚠️ 파일 업데이트 실패:", {
+            hasUploadedFiles: !!updates.uploadedFiles,
+            hasOnFormDataChange: !!onFormDataChange,
+          });
+        }
+      },
+      [fileComponent, onFormDataChange],
+    );
 
     return (
       <div className="h-full w-full">
@@ -2071,7 +2105,10 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
     (component.label || component.style?.labelText) &&
     !templateTypes.includes(component.type); // 템플릿 컴포넌트는 라벨 표시 안함
 
-  const labelText = component.style?.labelText || component.label || "";
+  // 다국어 라벨 텍스트 결정 (langKey가 있으면 번역 텍스트 사용)
+  const langKey = (component as any).langKey;
+  const originalLabelText = component.style?.labelText || component.label || "";
+  const labelText = langKey && translations[langKey] ? translations[langKey] : originalLabelText;
 
   // 라벨 표시 여부 로그 (디버깅용)
   if (component.type === "widget") {
@@ -2080,6 +2117,8 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
       hideLabel,
       shouldShowLabel,
       labelText,
+      langKey,
+      hasTranslation: !!translations[langKey],
     });
   }
 
@@ -2094,7 +2133,6 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
     marginBottom: component.style?.labelMarginBottom || "4px",
   };
 
-
   // 상위에서 라벨을 표시한 경우, 컴포넌트 내부에서는 라벨을 숨김
   const componentForRendering = shouldShowLabel
     ? {
@@ -2110,112 +2148,122 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
     <SplitPanelProvider>
       <ActiveTabProvider>
         <TableOptionsProvider>
-        <div className="flex h-full flex-col">
-          {/* 테이블 옵션 툴바 */}
-          <TableOptionsToolbar />
-          
-          {/* 메인 컨텐츠 */}
-          <div className="h-full flex-1" style={{ width: '100%' }}>
-            {/* 라벨이 있는 경우 표시 (데이터 테이블 제외) */}
-            {shouldShowLabel && (
-              <label className="mb-2 block text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
-                {labelText}
-                {(component.required || component.componentConfig?.required) && <span className="ml-1 text-destructive">*</span>}
-              </label>
-            )}
+          <div className="flex h-full flex-col">
+            {/* 테이블 옵션 툴바 */}
+            <TableOptionsToolbar />
 
-          {/* 실제 위젯 - 상위에서 라벨을 렌더링했으므로 자식은 라벨 숨김 */}
-          <div className="h-full" style={{ width: '100%', height: '100%' }}>{renderInteractiveWidget(componentForRendering)}</div>
-          </div>
-        </div>
-
-        {/* 개선된 검증 패널 (선택적 표시) */}
-        {showValidationPanel && enhancedValidation && (
-          <div className="absolute bottom-4 right-4 z-50">
-            <FormValidationIndicator
-              validationState={enhancedValidation.validationState}
-              saveState={enhancedValidation.saveState}
-              onSave={async () => {
-                const success = await enhancedValidation.saveForm();
-                if (success) {
-                  toast.success("데이터가 성공적으로 저장되었습니다!");
-                }
-              }}
-              canSave={enhancedValidation.canSave}
-              compact={true}
-              showDetails={false}
-            />
-          </div>
-        )}
-
-        {/* 모달 화면 */}
-        <Dialog open={!!popupScreen} onOpenChange={() => {
-          setPopupScreen(null);
-          setPopupFormData({}); // 팝업 닫을 때 formData도 초기화
-        }}>
-          <DialogContent className="max-w-4xl max-h-[90vh] overflow-hidden p-0">
-            <DialogHeader className="px-6 pt-4 pb-2">
-              <DialogTitle>{popupScreen?.title || "상세 정보"}</DialogTitle>
-            </DialogHeader>
-            
-            <div className="overflow-y-auto px-6 pb-6" style={{ maxHeight: "calc(90vh - 80px)" }}>
-              {popupLoading ? (
-                <div className="flex items-center justify-center py-8">
-                  <div className="text-muted-foreground">화면을 불러오는 중...</div>
-                </div>
-              ) : popupLayout.length > 0 ? (
-                <div className="relative bg-background border rounded" style={{ 
-                  width: popupScreenResolution ? `${popupScreenResolution.width}px` : "100%", 
-                  height: popupScreenResolution ? `${popupScreenResolution.height}px` : "400px",
-                  minHeight: "400px",
-                  position: "relative",
-                  overflow: "hidden"
-                }}>
-                  {/* 팝업에서도 실제 위치와 크기로 렌더링 */}
-                  {popupLayout.map((popupComponent) => (
-                    <div
-                      key={popupComponent.id}
-                      className="absolute"
-                      style={{
-                        left: `${popupComponent.position.x}px`,
-                        top: `${popupComponent.position.y}px`,
-                        width: popupComponent.style?.width || `${popupComponent.size.width}px`,
-                        height: popupComponent.style?.height || `${popupComponent.size.height}px`,
-                        zIndex: Math.min(popupComponent.position.z || 1, 20), // 최대 z-index 20으로 제한
-                      }}
-                    >
-                      {/* 🎯 핵심 수정: 팝업 전용 formData 사용 */}
-                      <InteractiveScreenViewer
-                        component={popupComponent}
-                        allComponents={popupLayout}
-                        hideLabel={false}
-                        screenInfo={popupScreenInfo || undefined}
-                        formData={popupFormData}
-                        onFormDataChange={(fieldName, value) => {
-                          console.log("💾 팝업 formData 업데이트:", {
-                            fieldName,
-                            value,
-                            valueType: typeof value,
-                            prevFormData: popupFormData
-                          });
-                          
-                          setPopupFormData(prev => ({ 
-                            ...prev, 
-                            [fieldName]: value 
-                          }));
-                        }}
-                      />
-                    </div>
-                  ))}
-                </div>
-              ) : (
-                <div className="flex items-center justify-center py-8">
-                  <div className="text-muted-foreground">화면 데이터가 없습니다.</div>
-                </div>
+            {/* 메인 컨텐츠 */}
+            <div className="h-full flex-1" style={{ width: "100%" }}>
+              {/* 라벨이 있는 경우 표시 (데이터 테이블 제외) */}
+              {shouldShowLabel && (
+                <label className="mb-2 block text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
+                  {labelText}
+                  {(component.required || component.componentConfig?.required) && (
+                    <span className="text-destructive ml-1">*</span>
+                  )}
+                </label>
               )}
+
+              {/* 실제 위젯 - 상위에서 라벨을 렌더링했으므로 자식은 라벨 숨김 */}
+              <div className="h-full" style={{ width: "100%", height: "100%" }}>
+                {renderInteractiveWidget(componentForRendering)}
+              </div>
             </div>
-          </DialogContent>
-        </Dialog>
+          </div>
+
+          {/* 개선된 검증 패널 (선택적 표시) */}
+          {showValidationPanel && enhancedValidation && (
+            <div className="absolute right-4 bottom-4 z-50">
+              <FormValidationIndicator
+                validationState={enhancedValidation.validationState}
+                saveState={enhancedValidation.saveState}
+                onSave={async () => {
+                  const success = await enhancedValidation.saveForm();
+                  if (success) {
+                    toast.success("데이터가 성공적으로 저장되었습니다!");
+                  }
+                }}
+                canSave={enhancedValidation.canSave}
+                compact={true}
+                showDetails={false}
+              />
+            </div>
+          )}
+
+          {/* 모달 화면 */}
+          <Dialog
+            open={!!popupScreen}
+            onOpenChange={() => {
+              setPopupScreen(null);
+              setPopupFormData({}); // 팝업 닫을 때 formData도 초기화
+            }}
+          >
+            <DialogContent className="max-h-[90vh] max-w-4xl overflow-hidden p-0">
+              <DialogHeader className="px-6 pt-4 pb-2">
+                <DialogTitle>{popupScreen?.title || "상세 정보"}</DialogTitle>
+              </DialogHeader>
+
+              <div className="overflow-y-auto px-6 pb-6" style={{ maxHeight: "calc(90vh - 80px)" }}>
+                {popupLoading ? (
+                  <div className="flex items-center justify-center py-8">
+                    <div className="text-muted-foreground">화면을 불러오는 중...</div>
+                  </div>
+                ) : popupLayout.length > 0 ? (
+                  <div
+                    className="bg-background relative rounded border"
+                    style={{
+                      width: popupScreenResolution ? `${popupScreenResolution.width}px` : "100%",
+                      height: popupScreenResolution ? `${popupScreenResolution.height}px` : "400px",
+                      minHeight: "400px",
+                      position: "relative",
+                      overflow: "hidden",
+                    }}
+                  >
+                    {/* 팝업에서도 실제 위치와 크기로 렌더링 */}
+                    {popupLayout.map((popupComponent) => (
+                      <div
+                        key={popupComponent.id}
+                        className="absolute"
+                        style={{
+                          left: `${popupComponent.position.x}px`,
+                          top: `${popupComponent.position.y}px`,
+                          width: popupComponent.style?.width || `${popupComponent.size.width}px`,
+                          height: popupComponent.style?.height || `${popupComponent.size.height}px`,
+                          zIndex: Math.min(popupComponent.position.z || 1, 20), // 최대 z-index 20으로 제한
+                        }}
+                      >
+                        {/* 🎯 핵심 수정: 팝업 전용 formData 사용 */}
+                        <InteractiveScreenViewer
+                          component={popupComponent}
+                          allComponents={popupLayout}
+                          hideLabel={false}
+                          screenInfo={popupScreenInfo || undefined}
+                          formData={popupFormData}
+                          onFormDataChange={(fieldName, value) => {
+                            console.log("💾 팝업 formData 업데이트:", {
+                              fieldName,
+                              value,
+                              valueType: typeof value,
+                              prevFormData: popupFormData,
+                            });
+
+                            setPopupFormData((prev) => ({
+                              ...prev,
+                              [fieldName]: value,
+                            }));
+                          }}
+                        />
+                      </div>
+                    ))}
+                  </div>
+                ) : (
+                  <div className="flex items-center justify-center py-8">
+                    <div className="text-muted-foreground">화면 데이터가 없습니다.</div>
+                  </div>
+                )}
+              </div>
+            </DialogContent>
+          </Dialog>
         </TableOptionsProvider>
       </ActiveTabProvider>
     </SplitPanelProvider>
diff --git a/frontend/components/screen/InteractiveScreenViewerDynamic.tsx b/frontend/components/screen/InteractiveScreenViewerDynamic.tsx
index af4a4542..fbb2d4ec 100644
--- a/frontend/components/screen/InteractiveScreenViewerDynamic.tsx
+++ b/frontend/components/screen/InteractiveScreenViewerDynamic.tsx
@@ -365,6 +365,7 @@ export const InteractiveScreenViewerDynamic: React.FC<InteractiveScreenViewerPro
           isInteractive={true}
           formData={formData}
           originalData={originalData || undefined}
+          initialData={(originalData && Object.keys(originalData).length > 0) ? originalData : formData} // 🆕 originalData가 있으면 사용, 없으면 formData 사용 (생성 모드에서 부모 데이터 전달)
           onFormDataChange={handleFormDataChange}
           screenId={screenInfo?.id}
           tableName={screenInfo?.tableName}
diff --git a/frontend/components/screen/RealtimePreviewDynamic.tsx b/frontend/components/screen/RealtimePreviewDynamic.tsx
index a2537ce0..6e401d6d 100644
--- a/frontend/components/screen/RealtimePreviewDynamic.tsx
+++ b/frontend/components/screen/RealtimePreviewDynamic.tsx
@@ -17,6 +17,7 @@ import {
   File,
 } from "lucide-react";
 import { useSplitPanel } from "@/lib/registry/components/split-panel-layout/SplitPanelContext";
+import { useScreenMultiLang } from "@/contexts/ScreenMultiLangContext";
 
 // 컴포넌트 렌더러들 자동 등록
 import "@/lib/registry/components";
@@ -129,6 +130,9 @@ export const RealtimePreviewDynamic: React.FC<RealtimePreviewProps> = ({
   onFormDataChange,
   onHeightChange, // 🆕 조건부 컨테이너 높이 변화 콜백
 }) => {
+  // 🆕 화면 다국어 컨텍스트
+  const { getTranslatedText } = useScreenMultiLang();
+  
   const [actualHeight, setActualHeight] = React.useState<number | null>(null);
   const contentRef = React.useRef<HTMLDivElement>(null);
   const lastUpdatedHeight = React.useRef<number | null>(null);
diff --git a/frontend/components/screen/ScreenDesigner.tsx b/frontend/components/screen/ScreenDesigner.tsx
index d4cab3cf..4fbaa6d8 100644
--- a/frontend/components/screen/ScreenDesigner.tsx
+++ b/frontend/components/screen/ScreenDesigner.tsx
@@ -78,6 +78,7 @@ import StyleEditor from "./StyleEditor";
 import { RealtimePreview } from "./RealtimePreviewDynamic";
 import FloatingPanel from "./FloatingPanel";
 import { DynamicComponentRenderer } from "@/lib/registry/DynamicComponentRenderer";
+import { MultilangSettingsModal } from "./modals/MultilangSettingsModal";
 import DesignerToolbar from "./DesignerToolbar";
 import TablesPanel from "./panels/TablesPanel";
 import { TemplatesPanel, TemplateComponent } from "./panels/TemplatesPanel";
@@ -144,6 +145,8 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
     },
   });
   const [isSaving, setIsSaving] = useState(false);
+  const [isGeneratingMultilang, setIsGeneratingMultilang] = useState(false);
+  const [showMultilangSettingsModal, setShowMultilangSettingsModal] = useState(false);
 
   // 🆕 화면에 할당된 메뉴 OBJID
   const [menuObjid, setMenuObjid] = useState<number | undefined>(undefined);
@@ -1447,6 +1450,101 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
     }
   }, [selectedScreen, layout, screenResolution]);
 
+  // 다국어 자동 생성 핸들러
+  const handleGenerateMultilang = useCallback(async () => {
+    if (!selectedScreen?.screenId) {
+      toast.error("화면 정보가 없습니다.");
+      return;
+    }
+
+    setIsGeneratingMultilang(true);
+
+    try {
+      // 공통 유틸 사용하여 라벨 추출
+      const { extractMultilangLabels, extractTableNames, applyMultilangMappings } = await import(
+        "@/lib/utils/multilangLabelExtractor"
+      );
+      const { apiClient } = await import("@/lib/api/client");
+
+      // 테이블별 컬럼 라벨 로드
+      const tableNames = extractTableNames(layout.components);
+      const columnLabelMap: Record<string, Record<string, string>> = {};
+
+      for (const tableName of tableNames) {
+        try {
+          const response = await apiClient.get(`/table-management/tables/${tableName}/columns`);
+          if (response.data?.success && response.data?.data) {
+            const columns = response.data.data.columns || response.data.data;
+            if (Array.isArray(columns)) {
+              columnLabelMap[tableName] = {};
+              columns.forEach((col: any) => {
+                const colName = col.columnName || col.column_name || col.name;
+                const colLabel = col.displayName || col.columnLabel || col.column_label || colName;
+                if (colName) {
+                  columnLabelMap[tableName][colName] = colLabel;
+                }
+              });
+            }
+          }
+        } catch (error) {
+          console.error(`컬럼 라벨 조회 실패 (${tableName}):`, error);
+        }
+      }
+
+      // 라벨 추출 (다국어 설정과 동일한 로직)
+      const extractedLabels = extractMultilangLabels(layout.components, columnLabelMap);
+      const labels = extractedLabels.map((l) => ({
+        componentId: l.componentId,
+        label: l.label,
+        type: l.type,
+      }));
+
+      if (labels.length === 0) {
+        toast.info("다국어로 변환할 라벨이 없습니다.");
+        setIsGeneratingMultilang(false);
+        return;
+      }
+
+      // API 호출
+      const { generateScreenLabelKeys } = await import("@/lib/api/multilang");
+      const response = await generateScreenLabelKeys({
+        screenId: selectedScreen.screenId,
+        menuObjId: menuObjid?.toString(),
+        labels,
+      });
+
+      if (response.success && response.data) {
+        // 자동 매핑 적용
+        const updatedComponents = applyMultilangMappings(layout.components, response.data);
+        
+        // 레이아웃 업데이트
+        const updatedLayout = {
+          ...layout,
+          components: updatedComponents,
+          screenResolution: screenResolution,
+        };
+        
+        setLayout(updatedLayout);
+
+        // 자동 저장 (매핑 정보가 손실되지 않도록)
+        try {
+          await screenApi.saveLayout(selectedScreen.screenId, updatedLayout);
+          toast.success(`${response.data.length}개의 다국어 키가 생성되고 자동 저장되었습니다.`);
+        } catch (saveError) {
+          console.error("다국어 매핑 저장 실패:", saveError);
+          toast.warning(`${response.data.length}개의 다국어 키가 생성되었습니다. 저장 버튼을 눌러 매핑을 저장하세요.`);
+        }
+      } else {
+        toast.error(response.error?.details || "다국어 키 생성에 실패했습니다.");
+      }
+    } catch (error) {
+      console.error("다국어 생성 실패:", error);
+      toast.error("다국어 키 생성 중 오류가 발생했습니다.");
+    } finally {
+      setIsGeneratingMultilang(false);
+    }
+  }, [selectedScreen, layout, screenResolution, menuObjid]);
+
   // 템플릿 드래그 처리
   const handleTemplateDrop = useCallback(
     (e: React.DragEvent, template: TemplateComponent) => {
@@ -4217,6 +4315,9 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
             onBack={onBackToList}
             onSave={handleSave}
             isSaving={isSaving}
+            onGenerateMultilang={handleGenerateMultilang}
+            isGeneratingMultilang={isGeneratingMultilang}
+            onOpenMultilangSettings={() => setShowMultilangSettingsModal(true)}
           />
           {/* 메인 컨테이너 (좌측 툴바 + 패널들 + 캔버스) */}
           <div className="flex flex-1 overflow-hidden">
@@ -4999,6 +5100,42 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
               screenId={selectedScreen.screenId}
             />
           )}
+          {/* 다국어 설정 모달 */}
+          <MultilangSettingsModal
+            isOpen={showMultilangSettingsModal}
+            onClose={() => setShowMultilangSettingsModal(false)}
+            components={layout.components}
+            onSave={async (updates) => {
+              if (updates.length === 0) {
+                toast.info("저장할 변경사항이 없습니다.");
+                return;
+              }
+
+              try {
+                // 공통 유틸 사용하여 매핑 적용
+                const { applyMultilangMappings } = await import("@/lib/utils/multilangLabelExtractor");
+
+                // 매핑 형식 변환
+                const mappings = updates.map((u) => ({
+                  componentId: u.componentId,
+                  keyId: u.langKeyId,
+                  langKey: u.langKey,
+                }));
+
+                // 레이아웃 업데이트
+                const updatedComponents = applyMultilangMappings(layout.components, mappings);
+                setLayout((prev) => ({
+                  ...prev,
+                  components: updatedComponents,
+                }));
+
+                toast.success(`${updates.length}개 항목의 다국어 설정이 저장되었습니다.`);
+              } catch (error) {
+                console.error("다국어 설정 저장 실패:", error);
+                toast.error("다국어 설정 저장 중 오류가 발생했습니다.");
+              }
+            }}
+          />
         </div>
       </TableOptionsProvider>
     </ScreenPreviewProvider>
diff --git a/frontend/components/screen/config-panels/ButtonConfigPanel.tsx b/frontend/components/screen/config-panels/ButtonConfigPanel.tsx
index 417ea4ff..eabeb59f 100644
--- a/frontend/components/screen/config-panels/ButtonConfigPanel.tsx
+++ b/frontend/components/screen/config-panels/ButtonConfigPanel.tsx
@@ -60,6 +60,7 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
     editModalTitle: String(config.action?.editModalTitle || ""),
     editModalDescription: String(config.action?.editModalDescription || ""),
     targetUrl: String(config.action?.targetUrl || ""),
+    groupByColumn: String(config.action?.groupByColumns?.[0] || ""),
   });
 
   const [screens, setScreens] = useState<ScreenOption[]>([]);
@@ -97,6 +98,11 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
   const [modalTargetColumns, setModalTargetColumns] = useState<Array<{ name: string; label: string }>>([]);
   const [modalSourcePopoverOpen, setModalSourcePopoverOpen] = useState<Record<number, boolean>>({});
   const [modalTargetPopoverOpen, setModalTargetPopoverOpen] = useState<Record<number, boolean>>({});
+
+  // 🆕 그룹화 컬럼 선택용 상태
+  const [currentTableColumns, setCurrentTableColumns] = useState<Array<{ name: string; label: string }>>([]);
+  const [groupByColumnOpen, setGroupByColumnOpen] = useState(false);
+  const [groupByColumnSearch, setGroupByColumnSearch] = useState("");
   const [modalSourceSearch, setModalSourceSearch] = useState<Record<number, string>>({});
   const [modalTargetSearch, setModalTargetSearch] = useState<Record<number, string>>({});
 
@@ -130,6 +136,7 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
       editModalTitle: String(latestAction.editModalTitle || ""),
       editModalDescription: String(latestAction.editModalDescription || ""),
       targetUrl: String(latestAction.targetUrl || ""),
+      groupByColumn: String(latestAction.groupByColumns?.[0] || ""),
     });
 
     // 🆕 제목 블록 초기화
@@ -168,9 +175,7 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
   };
 
   const updateBlock = (id: string, updates: Partial<TitleBlock>) => {
-    const updatedBlocks = titleBlocks.map((block) =>
-      block.id === id ? { ...block, ...updates } : block
-    );
+    const updatedBlocks = titleBlocks.map((block) => (block.id === id ? { ...block, ...updates } : block));
     setTitleBlocks(updatedBlocks);
     onUpdateProperty("componentConfig.action.modalTitleBlocks", updatedBlocks);
   };
@@ -218,45 +223,45 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
     const fetchAllTables = async () => {
       try {
         const response = await apiClient.get("/table-management/tables");
-        
+
         if (response.data.success && response.data.data) {
           const tables = response.data.data.map((table: any) => ({
             name: table.tableName,
             label: table.displayName || table.tableName,
           }));
           setAvailableTables(tables);
-          console.log(`✅ 전체 테이블 목록 로드 성공:`, tables.length);
+          console.log("✅ 전체 테이블 목록 로드 성공:", tables.length);
         }
       } catch (error) {
         console.error("테이블 목록 로드 실패:", error);
       }
     };
-    
+
     fetchAllTables();
   }, []);
 
   // 🆕 특정 테이블의 컬럼 로드
   const loadTableColumns = async (tableName: string) => {
     if (!tableName || tableColumnsMap[tableName]) return;
-    
+
     try {
       const response = await apiClient.get(`/table-management/tables/${tableName}/columns`);
       console.log(`📥 테이블 ${tableName} 컬럼 응답:`, response.data);
-      
+
       if (response.data.success) {
         // data가 배열인지 확인
         let columnData = response.data.data;
-        
+
         // data.columns 형태일 수도 있음
         if (!Array.isArray(columnData) && columnData?.columns) {
           columnData = columnData.columns;
         }
-        
+
         // data.data 형태일 수도 있음
         if (!Array.isArray(columnData) && columnData?.data) {
           columnData = columnData.data;
         }
-        
+
         if (Array.isArray(columnData)) {
           const columns = columnData.map((col: any) => {
             const name = col.name || col.columnName;
@@ -279,7 +284,7 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
   useEffect(() => {
     const sourceTable = config.action?.dataTransfer?.sourceTable;
     const targetTable = config.action?.dataTransfer?.targetTable;
-    
+
     const loadColumns = async () => {
       if (sourceTable) {
         try {
@@ -288,7 +293,7 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
             let columnData = response.data.data;
             if (!Array.isArray(columnData) && columnData?.columns) columnData = columnData.columns;
             if (!Array.isArray(columnData) && columnData?.data) columnData = columnData.data;
-            
+
             if (Array.isArray(columnData)) {
               const columns = columnData.map((col: any) => ({
                 name: col.name || col.columnName,
@@ -301,7 +306,7 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
           console.error("소스 테이블 컬럼 로드 실패:", error);
         }
       }
-      
+
       if (targetTable) {
         try {
           const response = await apiClient.get(`/table-management/tables/${targetTable}/columns`);
@@ -309,7 +314,7 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
             let columnData = response.data.data;
             if (!Array.isArray(columnData) && columnData?.columns) columnData = columnData.columns;
             if (!Array.isArray(columnData) && columnData?.data) columnData = columnData.data;
-            
+
             if (Array.isArray(columnData)) {
               const columns = columnData.map((col: any) => ({
                 name: col.name || col.columnName,
@@ -323,10 +328,39 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
         }
       }
     };
-    
+
     loadColumns();
   }, [config.action?.dataTransfer?.sourceTable, config.action?.dataTransfer?.targetTable]);
 
+  // 🆕 현재 테이블 컬럼 로드 (그룹화 컬럼 선택용)
+  useEffect(() => {
+    if (!currentTableName) return;
+
+    const loadCurrentTableColumns = async () => {
+      try {
+        const response = await apiClient.get(`/table-management/tables/${currentTableName}/columns`);
+        if (response.data.success) {
+          let columnData = response.data.data;
+          if (!Array.isArray(columnData) && columnData?.columns) columnData = columnData.columns;
+          if (!Array.isArray(columnData) && columnData?.data) columnData = columnData.data;
+
+          if (Array.isArray(columnData)) {
+            const columns = columnData.map((col: any) => ({
+              name: col.name || col.columnName,
+              label: col.displayName || col.label || col.columnLabel || col.name || col.columnName,
+            }));
+            setCurrentTableColumns(columns);
+            console.log(`✅ 현재 테이블 ${currentTableName} 컬럼 로드 성공:`, columns.length, "개");
+          }
+        }
+      } catch (error) {
+        console.error("현재 테이블 컬럼 로드 실패:", error);
+      }
+    };
+
+    loadCurrentTableColumns();
+  }, [currentTableName]);
+
   // 🆕 openModalWithData 소스/타겟 테이블 컬럼 로드
   useEffect(() => {
     const actionType = config.action?.type;
@@ -335,45 +369,43 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
     const loadModalMappingColumns = async () => {
       // 소스 테이블: 현재 화면의 분할 패널 또는 테이블에서 감지
       let sourceTableName: string | null = null;
-      
+
       console.log("[openModalWithData] 컬럼 로드 시작:", {
         allComponentsCount: allComponents.length,
         currentTableName,
         targetScreenId: config.action?.targetScreenId,
       });
-      
+
       // 모든 컴포넌트 타입 로그
       allComponents.forEach((comp, idx) => {
         const compType = comp.componentType || (comp as any).componentConfig?.type;
-        console.log(`  [${idx}] componentType: ${compType}, tableName: ${(comp as any).componentConfig?.tableName || (comp as any).componentConfig?.leftPanel?.tableName || 'N/A'}`);
+        console.log(
+          `  [${idx}] componentType: ${compType}, tableName: ${(comp as any).componentConfig?.tableName || (comp as any).componentConfig?.leftPanel?.tableName || "N/A"}`,
+        );
       });
-      
+
       for (const comp of allComponents) {
         const compType = comp.componentType || (comp as any).componentConfig?.type;
         const compConfig = (comp as any).componentConfig || {};
-        
+
         // 분할 패널 타입들 (다양한 경로에서 테이블명 추출)
         if (compType === "split-panel-layout" || compType === "screen-split-panel") {
-          sourceTableName = compConfig?.leftPanel?.tableName || 
-                           compConfig?.leftTableName ||
-                           compConfig?.tableName;
+          sourceTableName = compConfig?.leftPanel?.tableName || compConfig?.leftTableName || compConfig?.tableName;
           if (sourceTableName) {
             console.log(`✅ [openModalWithData] split-panel-layout에서 소스 테이블 감지: ${sourceTableName}`);
             break;
           }
         }
-        
+
         // split-panel-layout2 타입 (새로운 분할 패널)
         if (compType === "split-panel-layout2") {
-          sourceTableName = compConfig?.leftPanel?.tableName || 
-                           compConfig?.tableName ||
-                           compConfig?.leftTableName;
+          sourceTableName = compConfig?.leftPanel?.tableName || compConfig?.tableName || compConfig?.leftTableName;
           if (sourceTableName) {
             console.log(`✅ [openModalWithData] split-panel-layout2에서 소스 테이블 감지: ${sourceTableName}`);
             break;
           }
         }
-        
+
         // 테이블 리스트 타입
         if (compType === "table-list") {
           sourceTableName = compConfig?.tableName;
@@ -382,7 +414,7 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
             break;
           }
         }
-        
+
         // 🆕 모든 컴포넌트에서 tableName 찾기 (폴백)
         if (!sourceTableName && compConfig?.tableName) {
           sourceTableName = compConfig.tableName;
@@ -390,13 +422,13 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
           break;
         }
       }
-      
+
       // 여전히 없으면 currentTableName 사용 (화면 레벨 테이블명)
       if (!sourceTableName && currentTableName) {
         sourceTableName = currentTableName;
         console.log(`✅ [openModalWithData] currentTableName에서 소스 테이블 사용: ${sourceTableName}`);
       }
-      
+
       if (!sourceTableName) {
         console.warn("[openModalWithData] 소스 테이블을 찾을 수 없습니다.");
       }
@@ -409,11 +441,18 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
             let columnData = response.data.data;
             if (!Array.isArray(columnData) && columnData?.columns) columnData = columnData.columns;
             if (!Array.isArray(columnData) && columnData?.data) columnData = columnData.data;
-            
+
             if (Array.isArray(columnData)) {
               const columns = columnData.map((col: any) => ({
                 name: col.name || col.columnName || col.column_name,
-                label: col.displayName || col.label || col.columnLabel || col.display_name || col.name || col.columnName || col.column_name,
+                label:
+                  col.displayName ||
+                  col.label ||
+                  col.columnLabel ||
+                  col.display_name ||
+                  col.name ||
+                  col.columnName ||
+                  col.column_name,
               }));
               setModalSourceColumns(columns);
               console.log(`✅ [openModalWithData] 소스 테이블(${sourceTableName}) 컬럼 로드 완료:`, columns.length);
@@ -431,22 +470,29 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
           // 타겟 화면 정보 가져오기
           const screenResponse = await apiClient.get(`/screen-management/screens/${targetScreenId}`);
           console.log("[openModalWithData] 타겟 화면 응답:", screenResponse.data);
-          
+
           if (screenResponse.data.success && screenResponse.data.data) {
             const targetTableName = screenResponse.data.data.tableName;
             console.log("[openModalWithData] 타겟 화면 테이블명:", targetTableName);
-            
+
             if (targetTableName) {
               const columnResponse = await apiClient.get(`/table-management/tables/${targetTableName}/columns`);
               if (columnResponse.data.success) {
                 let columnData = columnResponse.data.data;
                 if (!Array.isArray(columnData) && columnData?.columns) columnData = columnData.columns;
                 if (!Array.isArray(columnData) && columnData?.data) columnData = columnData.data;
-                
+
                 if (Array.isArray(columnData)) {
                   const columns = columnData.map((col: any) => ({
                     name: col.name || col.columnName || col.column_name,
-                    label: col.displayName || col.label || col.columnLabel || col.display_name || col.name || col.columnName || col.column_name,
+                    label:
+                      col.displayName ||
+                      col.label ||
+                      col.columnLabel ||
+                      col.display_name ||
+                      col.name ||
+                      col.columnName ||
+                      col.column_name,
                   }));
                   setModalTargetColumns(columns);
                   console.log(`✅ [openModalWithData] 타겟 테이블(${targetTableName}) 컬럼 로드 완료:`, columns.length);
@@ -477,12 +523,12 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
           page: 1,
           size: 9999, // 매우 큰 값으로 설정하여 전체 목록 가져오기
         };
-        
+
         // 현재 화면의 회사 코드가 있으면 필터링 파라미터로 전달
         if (currentScreenCompanyCode) {
           params.companyCode = currentScreenCompanyCode;
         }
-        
+
         const response = await apiClient.get("/screen-management/screens", {
           params,
         });
@@ -662,8 +708,8 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
 
       {/* 모달 열기 액션 설정 */}
       {(component.componentConfig?.action?.type || "save") === "modal" && (
-        <div className="mt-4 space-y-4 rounded-lg border bg-muted/50 p-4">
-          <h4 className="text-sm font-medium text-foreground">모달 설정</h4>
+        <div className="bg-muted/50 mt-4 space-y-4 rounded-lg border p-4">
+          <h4 className="text-foreground text-sm font-medium">모달 설정</h4>
 
           <div>
             <Label htmlFor="modal-title">모달 제목</Label>
@@ -691,7 +737,7 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
                 onUpdateProperty("componentConfig.action.modalDescription", newValue);
               }}
             />
-            <p className="mt-1 text-xs text-muted-foreground">모달 제목 아래에 표시됩니다</p>
+            <p className="text-muted-foreground mt-1 text-xs">모달 제목 아래에 표시됩니다</p>
           </div>
 
           <div>
@@ -748,15 +794,15 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
                     {(() => {
                       const filteredScreens = filterScreens(modalSearchTerm);
                       if (screensLoading) {
-                        return <div className="p-3 text-sm text-muted-foreground">화면 목록을 불러오는 중...</div>;
+                        return <div className="text-muted-foreground p-3 text-sm">화면 목록을 불러오는 중...</div>;
                       }
                       if (filteredScreens.length === 0) {
-                        return <div className="p-3 text-sm text-muted-foreground">검색 결과가 없습니다.</div>;
+                        return <div className="text-muted-foreground p-3 text-sm">검색 결과가 없습니다.</div>;
                       }
                       return filteredScreens.map((screen, index) => (
                         <div
                           key={`modal-screen-${screen.id}-${index}`}
-                          className="flex cursor-pointer items-center px-3 py-2 hover:bg-muted"
+                          className="hover:bg-muted flex cursor-pointer items-center px-3 py-2"
                           onClick={() => {
                             onUpdateProperty("componentConfig.action.targetScreenId", screen.id);
                             setModalScreenOpen(false);
@@ -771,7 +817,9 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
                           />
                           <div className="flex flex-col">
                             <span className="font-medium">{screen.name}</span>
-                            {screen.description && <span className="text-xs text-muted-foreground">{screen.description}</span>}
+                            {screen.description && (
+                              <span className="text-muted-foreground text-xs">{screen.description}</span>
+                            )}
                           </div>
                         </div>
                       ));
@@ -787,10 +835,8 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
       {/* 🆕 데이터 전달 + 모달 열기 액션 설정 */}
       {component.componentConfig?.action?.type === "openModalWithData" && (
         <div className="mt-4 space-y-4 rounded-lg border bg-blue-50 p-4 dark:bg-blue-950/20">
-          <h4 className="text-sm font-medium text-foreground">데이터 전달 + 모달 설정</h4>
-          <p className="text-xs text-muted-foreground">
-            TableList에서 선택된 데이터를 다음 모달로 전달합니다
-          </p>
+          <h4 className="text-foreground text-sm font-medium">데이터 전달 + 모달 설정</h4>
+          <p className="text-muted-foreground text-xs">TableList에서 선택된 데이터를 다음 모달로 전달합니다</p>
 
           <div>
             <Label htmlFor="data-source-id">
@@ -804,14 +850,16 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
                 onUpdateProperty("componentConfig.action.dataSourceId", e.target.value);
               }}
             />
-            <p className="mt-1 text-xs text-primary font-medium">
+            <p className="text-primary mt-1 text-xs font-medium">
               ✨ 비워두면 현재 화면의 TableList를 자동으로 감지합니다
             </p>
-            <p className="mt-1 text-xs text-muted-foreground">
-              • 자동 감지: 현재 화면의 TableList 선택 데이터<br/>
-              • 누적 전달: 이전 모달의 모든 데이터도 자동으로 함께 전달<br/>
-              • 다음 화면에서 tableName으로 바로 사용 가능<br/>
-              • 수동 설정: 필요시 직접 테이블명 입력 (예: item_info)
+            <p className="text-muted-foreground mt-1 text-xs">
+              • 자동 감지: 현재 화면의 TableList 선택 데이터
+              <br />
+              • 누적 전달: 이전 모달의 모든 데이터도 자동으로 함께 전달
+              <br />
+              • 다음 화면에서 tableName으로 바로 사용 가능
+              <br />• 수동 설정: 필요시 직접 테이블명 입력 (예: item_info)
             </p>
           </div>
 
@@ -820,23 +868,11 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
             <div className="flex items-center justify-between">
               <Label>모달 제목 구성</Label>
               <div className="flex gap-1">
-                <Button
-                  type="button"
-                  variant="outline"
-                  size="sm"
-                  onClick={addTextBlock}
-                  className="h-6 text-xs"
-                >
+                <Button type="button" variant="outline" size="sm" onClick={addTextBlock} className="h-6 text-xs">
                   <Type className="mr-1 h-3 w-3" />
                   텍스트 추가
                 </Button>
-                <Button
-                  type="button"
-                  variant="outline"
-                  size="sm"
-                  onClick={addFieldBlock}
-                  className="h-6 text-xs"
-                >
+                <Button type="button" variant="outline" size="sm" onClick={addFieldBlock} className="h-6 text-xs">
                   <Database className="mr-1 h-3 w-3" />
                   필드 추가
                 </Button>
@@ -846,7 +882,7 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
             {/* 블록 목록 */}
             <div className="space-y-2">
               {titleBlocks.length === 0 ? (
-                <div className="text-center py-4 text-xs text-muted-foreground border-2 border-dashed rounded">
+                <div className="text-muted-foreground rounded border-2 border-dashed py-4 text-center text-xs">
                   텍스트나 필드를 추가하여 제목을 구성하세요
                 </div>
               ) : (
@@ -878,7 +914,7 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
                       </div>
 
                       {/* 블록 타입 표시 */}
-                      <div className="flex-shrink-0 mt-1">
+                      <div className="mt-1 flex-shrink-0">
                         {block.type === "text" ? (
                           <Type className="h-4 w-4 text-blue-500" />
                         ) : (
@@ -913,15 +949,15 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
                                   className="h-7 w-full justify-between text-xs"
                                 >
                                   {block.tableName
-                                    ? (availableTables.find((t) => t.name === block.tableName)?.label || block.tableName)
+                                    ? availableTables.find((t) => t.name === block.tableName)?.label || block.tableName
                                     : "테이블 선택"}
                                   <ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
                                 </Button>
                               </PopoverTrigger>
                               <PopoverContent className="w-full p-0" align="start">
                                 <Command shouldFilter={false}>
-                                  <CommandInput 
-                                    placeholder="테이블 검색 (라벨 또는 이름)..." 
+                                  <CommandInput
+                                    placeholder="테이블 검색 (라벨 또는 이름)..."
                                     className="h-7 text-xs"
                                     value={blockTableSearches[block.id] || ""}
                                     onValueChange={(value) => {
@@ -955,11 +991,13 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
                                             <Check
                                               className={cn(
                                                 "mr-2 h-3 w-3",
-                                                block.tableName === table.name ? "opacity-100" : "opacity-0"
+                                                block.tableName === table.name ? "opacity-100" : "opacity-0",
                                               )}
                                             />
                                             <span className="font-medium">{table.label}</span>
-                                            <span className="ml-2 text-[10px] text-muted-foreground">({table.name})</span>
+                                            <span className="text-muted-foreground ml-2 text-[10px]">
+                                              ({table.name})
+                                            </span>
                                           </CommandItem>
                                         ))}
                                     </CommandGroup>
@@ -984,15 +1022,16 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
                                       className="h-7 w-full justify-between text-xs"
                                     >
                                       {block.value
-                                        ? (tableColumnsMap[block.tableName]?.find((c) => c.name === block.value)?.label || block.value)
+                                        ? tableColumnsMap[block.tableName]?.find((c) => c.name === block.value)
+                                            ?.label || block.value
                                         : "컬럼 선택"}
                                       <ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
                                     </Button>
                                   </PopoverTrigger>
                                   <PopoverContent className="w-full p-0" align="start">
                                     <Command shouldFilter={false}>
-                                      <CommandInput 
-                                        placeholder="컬럼 검색 (라벨 또는 이름)..." 
+                                      <CommandInput
+                                        placeholder="컬럼 검색 (라벨 또는 이름)..."
                                         className="h-7 text-xs"
                                         value={blockColumnSearches[block.id] || ""}
                                         onValueChange={(value) => {
@@ -1028,11 +1067,13 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
                                                 <Check
                                                   className={cn(
                                                     "mr-2 h-3 w-3",
-                                                    block.value === col.name ? "opacity-100" : "opacity-0"
+                                                    block.value === col.name ? "opacity-100" : "opacity-0",
                                                   )}
                                                 />
                                                 <span className="font-medium">{col.label}</span>
-                                                <span className="ml-2 text-[10px] text-muted-foreground">({col.name})</span>
+                                                <span className="text-muted-foreground ml-2 text-[10px]">
+                                                  ({col.name})
+                                                </span>
                                               </CommandItem>
                                             ))}
                                         </CommandGroup>
@@ -1071,17 +1112,19 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
 
             {/* 미리보기 */}
             {titleBlocks.length > 0 && (
-              <div className="mt-2 p-2 bg-muted rounded text-xs">
+              <div className="bg-muted mt-2 rounded p-2 text-xs">
                 <span className="text-muted-foreground">미리보기: </span>
                 <span className="font-medium">{generateTitlePreview()}</span>
               </div>
             )}
 
-            <p className="text-[10px] text-muted-foreground">
-              • 텍스트: 고정 텍스트 입력 (예: "품목 상세정보 - ")<br/>
-              • 필드: 이전 화면 데이터로 자동 채워짐 (예: 품목명, 규격)<br/>
-              • 순서 변경: ↑↓ 버튼으로 자유롭게 배치<br/>
-              • 데이터가 없으면 "표시 라벨"이 대신 표시됩니다
+            <p className="text-muted-foreground text-[10px]">
+              • 텍스트: 고정 텍스트 입력 (예: "품목 상세정보 - ")
+              <br />
+              • 필드: 이전 화면 데이터로 자동 채워짐 (예: 품목명, 규격)
+              <br />
+              • 순서 변경: ↑↓ 버튼으로 자유롭게 배치
+              <br />• 데이터가 없으면 "표시 라벨"이 대신 표시됩니다
             </p>
           </div>
 
@@ -1139,15 +1182,15 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
                     {(() => {
                       const filteredScreens = filterScreens(modalSearchTerm);
                       if (screensLoading) {
-                        return <div className="p-3 text-sm text-muted-foreground">화면 목록을 불러오는 중...</div>;
+                        return <div className="text-muted-foreground p-3 text-sm">화면 목록을 불러오는 중...</div>;
                       }
                       if (filteredScreens.length === 0) {
-                        return <div className="p-3 text-sm text-muted-foreground">검색 결과가 없습니다.</div>;
+                        return <div className="text-muted-foreground p-3 text-sm">검색 결과가 없습니다.</div>;
                       }
                       return filteredScreens.map((screen, index) => (
                         <div
                           key={`modal-data-screen-${screen.id}-${index}`}
-                          className="flex cursor-pointer items-center px-3 py-2 hover:bg-muted"
+                          className="hover:bg-muted flex cursor-pointer items-center px-3 py-2"
                           onClick={() => {
                             onUpdateProperty("componentConfig.action.targetScreenId", screen.id);
                             setModalScreenOpen(false);
@@ -1162,7 +1205,9 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
                           />
                           <div className="flex flex-col">
                             <span className="font-medium">{screen.name}</span>
-                            {screen.description && <span className="text-xs text-muted-foreground">{screen.description}</span>}
+                            {screen.description && (
+                              <span className="text-muted-foreground text-xs">{screen.description}</span>
+                            )}
                           </div>
                         </div>
                       ));
@@ -1171,7 +1216,7 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
                 </div>
               </PopoverContent>
             </Popover>
-            <p className="mt-1 text-xs text-muted-foreground">
+            <p className="text-muted-foreground mt-1 text-xs">
               SelectedItemsDetailInput 컴포넌트가 있는 화면을 선택하세요
             </p>
           </div>
@@ -1195,7 +1240,7 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
                 매핑 추가
               </Button>
             </div>
-            <p className="text-[10px] text-muted-foreground">
+            <p className="text-muted-foreground text-[10px]">
               소스 테이블의 컬럼명이 타겟 화면의 입력 필드 컬럼명과 다를 때 매핑을 설정하세요.
               <br />
               예: warehouse_code → warehouse_id (분할 패널의 창고코드를 모달의 창고ID에 매핑)
@@ -1203,41 +1248,36 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
 
             {/* 컬럼 로드 상태 표시 */}
             {modalSourceColumns.length > 0 || modalTargetColumns.length > 0 ? (
-              <div className="text-[10px] text-muted-foreground bg-muted/50 p-2 rounded">
+              <div className="text-muted-foreground bg-muted/50 rounded p-2 text-[10px]">
                 소스 컬럼: {modalSourceColumns.length}개 / 타겟 컬럼: {modalTargetColumns.length}개
               </div>
             ) : (
-              <div className="text-[10px] text-amber-600 bg-amber-50 p-2 rounded dark:bg-amber-950/20">
+              <div className="rounded bg-amber-50 p-2 text-[10px] text-amber-600 dark:bg-amber-950/20">
                 분할 패널 또는 테이블 컴포넌트와 대상 화면을 설정하면 컬럼 목록이 로드됩니다.
               </div>
             )}
 
             {(config.action?.fieldMappings || []).length === 0 ? (
               <div className="rounded-md border border-dashed p-3 text-center">
-                <p className="text-xs text-muted-foreground">
-                  매핑이 없으면 같은 이름의 컬럼끼리 자동으로 매핑됩니다.
-                </p>
+                <p className="text-muted-foreground text-xs">매핑이 없으면 같은 이름의 컬럼끼리 자동으로 매핑됩니다.</p>
               </div>
             ) : (
               <div className="space-y-3">
                 {(config.action?.fieldMappings || []).map((mapping: any, index: number) => (
-                  <div key={index} className="rounded-md border bg-background p-3 space-y-2">
+                  <div key={index} className="bg-background space-y-2 rounded-md border p-3">
                     {/* 소스 필드 선택 (Combobox) - 세로 배치 */}
                     <div className="space-y-1">
-                      <Label className="text-[10px] text-muted-foreground">소스 컬럼</Label>
+                      <Label className="text-muted-foreground text-[10px]">소스 컬럼</Label>
                       <Popover
                         open={modalSourcePopoverOpen[index] || false}
                         onOpenChange={(open) => setModalSourcePopoverOpen((prev) => ({ ...prev, [index]: open }))}
                       >
                         <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">
                             <span className="truncate">
                               {mapping.sourceField
-                                ? modalSourceColumns.find((c) => c.name === mapping.sourceField)?.label || mapping.sourceField
+                                ? modalSourceColumns.find((c) => c.name === mapping.sourceField)?.label ||
+                                  mapping.sourceField
                                 : "소스 컬럼 선택"}
                             </span>
                             <ChevronsUpDown className="ml-1 h-3 w-3 shrink-0 opacity-50" />
@@ -1269,12 +1309,12 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
                                     <Check
                                       className={cn(
                                         "mr-2 h-3 w-3",
-                                        mapping.sourceField === col.name ? "opacity-100" : "opacity-0"
+                                        mapping.sourceField === col.name ? "opacity-100" : "opacity-0",
                                       )}
                                     />
                                     <span className="truncate">{col.label}</span>
                                     {col.label !== col.name && (
-                                      <span className="ml-1 text-muted-foreground truncate">({col.name})</span>
+                                      <span className="text-muted-foreground ml-1 truncate">({col.name})</span>
                                     )}
                                   </CommandItem>
                                 ))}
@@ -1287,25 +1327,22 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
 
                     {/* 화살표 표시 */}
                     <div className="flex justify-center">
-                      <span className="text-xs text-muted-foreground">↓</span>
+                      <span className="text-muted-foreground text-xs">↓</span>
                     </div>
 
                     {/* 타겟 필드 선택 (Combobox) - 세로 배치 */}
                     <div className="space-y-1">
-                      <Label className="text-[10px] text-muted-foreground">타겟 컬럼</Label>
+                      <Label className="text-muted-foreground text-[10px]">타겟 컬럼</Label>
                       <Popover
                         open={modalTargetPopoverOpen[index] || false}
                         onOpenChange={(open) => setModalTargetPopoverOpen((prev) => ({ ...prev, [index]: open }))}
                       >
                         <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">
                             <span className="truncate">
                               {mapping.targetField
-                                ? modalTargetColumns.find((c) => c.name === mapping.targetField)?.label || mapping.targetField
+                                ? modalTargetColumns.find((c) => c.name === mapping.targetField)?.label ||
+                                  mapping.targetField
                                 : "타겟 컬럼 선택"}
                             </span>
                             <ChevronsUpDown className="ml-1 h-3 w-3 shrink-0 opacity-50" />
@@ -1337,12 +1374,12 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
                                     <Check
                                       className={cn(
                                         "mr-2 h-3 w-3",
-                                        mapping.targetField === col.name ? "opacity-100" : "opacity-0"
+                                        mapping.targetField === col.name ? "opacity-100" : "opacity-0",
                                       )}
                                     />
                                     <span className="truncate">{col.label}</span>
                                     {col.label !== col.name && (
-                                      <span className="ml-1 text-muted-foreground truncate">({col.name})</span>
+                                      <span className="text-muted-foreground ml-1 truncate">({col.name})</span>
                                     )}
                                   </CommandItem>
                                 ))}
@@ -1359,14 +1396,14 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
                         type="button"
                         variant="ghost"
                         size="sm"
-                        className="h-6 text-[10px] text-destructive hover:bg-destructive/10"
+                        className="text-destructive hover:bg-destructive/10 h-6 text-[10px]"
                         onClick={() => {
                           const mappings = [...(config.action?.fieldMappings || [])];
                           mappings.splice(index, 1);
                           onUpdateProperty("componentConfig.action.fieldMappings", mappings);
                         }}
                       >
-                        <X className="h-3 w-3 mr-1" />
+                        <X className="mr-1 h-3 w-3" />
                         삭제
                       </Button>
                     </div>
@@ -1380,8 +1417,8 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
 
       {/* 수정 액션 설정 */}
       {(component.componentConfig?.action?.type || "save") === "edit" && (
-        <div className="mt-4 space-y-4 rounded-lg border bg-success/10 p-4">
-          <h4 className="text-sm font-medium text-foreground">수정 설정</h4>
+        <div className="bg-success/10 mt-4 space-y-4 rounded-lg border p-4">
+          <h4 className="text-foreground text-sm font-medium">수정 설정</h4>
 
           <div>
             <Label htmlFor="edit-screen">수정 폼 화면 선택</Label>
@@ -1417,15 +1454,15 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
                     {(() => {
                       const filteredScreens = filterScreens(modalSearchTerm);
                       if (screensLoading) {
-                        return <div className="p-3 text-sm text-muted-foreground">화면 목록을 불러오는 중...</div>;
+                        return <div className="text-muted-foreground p-3 text-sm">화면 목록을 불러오는 중...</div>;
                       }
                       if (filteredScreens.length === 0) {
-                        return <div className="p-3 text-sm text-muted-foreground">검색 결과가 없습니다.</div>;
+                        return <div className="text-muted-foreground p-3 text-sm">검색 결과가 없습니다.</div>;
                       }
                       return filteredScreens.map((screen, index) => (
                         <div
                           key={`edit-screen-${screen.id}-${index}`}
-                          className="flex cursor-pointer items-center px-3 py-2 hover:bg-muted"
+                          className="hover:bg-muted flex cursor-pointer items-center px-3 py-2"
                           onClick={() => {
                             onUpdateProperty("componentConfig.action.targetScreenId", screen.id);
                             setModalScreenOpen(false);
@@ -1440,7 +1477,9 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
                           />
                           <div className="flex flex-col">
                             <span className="font-medium">{screen.name}</span>
-                            {screen.description && <span className="text-xs text-muted-foreground">{screen.description}</span>}
+                            {screen.description && (
+                              <span className="text-muted-foreground text-xs">{screen.description}</span>
+                            )}
                           </div>
                         </div>
                       ));
@@ -1449,7 +1488,7 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
                 </div>
               </PopoverContent>
             </Popover>
-            <p className="mt-1 text-xs text-muted-foreground">
+            <p className="text-muted-foreground mt-1 text-xs">
               선택된 데이터가 이 폼 화면에 자동으로 로드되어 수정할 수 있습니다
             </p>
           </div>
@@ -1488,7 +1527,7 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
                     onUpdateProperty("webTypeConfig.editModalTitle", newValue);
                   }}
                 />
-                <p className="mt-1 text-xs text-muted-foreground">비워두면 기본 제목이 표시됩니다</p>
+                <p className="text-muted-foreground mt-1 text-xs">비워두면 기본 제목이 표시됩니다</p>
               </div>
 
               <div>
@@ -1504,7 +1543,7 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
                     onUpdateProperty("webTypeConfig.editModalDescription", newValue);
                   }}
                 />
-                <p className="mt-1 text-xs text-muted-foreground">비워두면 설명이 표시되지 않습니다</p>
+                <p className="text-muted-foreground mt-1 text-xs">비워두면 설명이 표시되지 않습니다</p>
               </div>
 
               <div>
@@ -1529,13 +1568,114 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
               </div>
             </>
           )}
+
+          <div>
+            <Label htmlFor="edit-group-by-column">그룹화 컬럼</Label>
+            <Popover open={groupByColumnOpen} onOpenChange={setGroupByColumnOpen}>
+              <PopoverTrigger asChild>
+                <Button
+                  variant="outline"
+                  role="combobox"
+                  aria-expanded={groupByColumnOpen}
+                  className="h-8 w-full justify-between text-xs"
+                >
+                  {localInputs.groupByColumn ? (
+                    <span>
+                      {localInputs.groupByColumn}
+                      {currentTableColumns.find((col) => col.name === localInputs.groupByColumn)?.label &&
+                        currentTableColumns.find((col) => col.name === localInputs.groupByColumn)?.label !==
+                          localInputs.groupByColumn && (
+                          <span className="text-muted-foreground ml-1">
+                            ({currentTableColumns.find((col) => col.name === localInputs.groupByColumn)?.label})
+                          </span>
+                        )}
+                    </span>
+                  ) : (
+                    <span className="text-muted-foreground">컬럼을 선택하세요</span>
+                  )}
+                  <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                </Button>
+              </PopoverTrigger>
+              <PopoverContent className="p-0" align="start" style={{ width: "var(--radix-popover-trigger-width)" }}>
+                <div className="flex flex-col">
+                  <div className="flex items-center border-b px-3 py-2">
+                    <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+                    <Input
+                      placeholder="컬럼명 또는 라벨 검색..."
+                      value={groupByColumnSearch}
+                      onChange={(e) => setGroupByColumnSearch(e.target.value)}
+                      className="border-0 p-0 focus-visible:ring-0"
+                    />
+                  </div>
+                  <div className="max-h-[200px] overflow-auto">
+                    {currentTableColumns.length === 0 ? (
+                      <div className="text-muted-foreground p-3 text-sm">
+                        {currentTableName ? "컬럼을 불러오는 중..." : "테이블이 설정되지 않았습니다"}
+                      </div>
+                    ) : (
+                      <>
+                        {/* 선택 해제 옵션 */}
+                        <div
+                          className="hover:bg-muted flex cursor-pointer items-center px-3 py-2"
+                          onClick={() => {
+                            setLocalInputs((prev) => ({ ...prev, groupByColumn: "" }));
+                            onUpdateProperty("componentConfig.action.groupByColumns", undefined);
+                            setGroupByColumnOpen(false);
+                            setGroupByColumnSearch("");
+                          }}
+                        >
+                          <Check
+                            className={cn("mr-2 h-4 w-4", !localInputs.groupByColumn ? "opacity-100" : "opacity-0")}
+                          />
+                          <span className="text-muted-foreground">선택 안 함</span>
+                        </div>
+                        {/* 컬럼 목록 */}
+                        {currentTableColumns
+                          .filter((col) => {
+                            if (!groupByColumnSearch) return true;
+                            const search = groupByColumnSearch.toLowerCase();
+                            return col.name.toLowerCase().includes(search) || col.label.toLowerCase().includes(search);
+                          })
+                          .map((col) => (
+                            <div
+                              key={col.name}
+                              className="hover:bg-muted flex cursor-pointer items-center px-3 py-2"
+                              onClick={() => {
+                                setLocalInputs((prev) => ({ ...prev, groupByColumn: col.name }));
+                                onUpdateProperty("componentConfig.action.groupByColumns", [col.name]);
+                                setGroupByColumnOpen(false);
+                                setGroupByColumnSearch("");
+                              }}
+                            >
+                              <Check
+                                className={cn(
+                                  "mr-2 h-4 w-4",
+                                  localInputs.groupByColumn === col.name ? "opacity-100" : "opacity-0",
+                                )}
+                              />
+                              <div className="flex flex-col">
+                                <span className="font-medium">{col.name}</span>
+                                {col.label !== col.name && (
+                                  <span className="text-muted-foreground text-xs">{col.label}</span>
+                                )}
+                              </div>
+                            </div>
+                          ))}
+                      </>
+                    )}
+                  </div>
+                </div>
+              </PopoverContent>
+            </Popover>
+            <p className="text-muted-foreground mt-1 text-xs">여러 행을 하나의 그룹으로 묶어서 수정할 때 사용합니다</p>
+          </div>
         </div>
       )}
 
       {/* 복사 액션 설정 */}
       {(component.componentConfig?.action?.type || "save") === "copy" && (
         <div className="mt-4 space-y-4 rounded-lg border bg-blue-50 p-4">
-          <h4 className="text-sm font-medium text-foreground">복사 설정 (품목코드 자동 초기화)</h4>
+          <h4 className="text-foreground text-sm font-medium">복사 설정 (품목코드 자동 초기화)</h4>
 
           <div>
             <Label htmlFor="copy-screen">복사 폼 화면 선택</Label>
@@ -1571,15 +1711,15 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
                     {(() => {
                       const filteredScreens = filterScreens(modalSearchTerm);
                       if (screensLoading) {
-                        return <div className="p-3 text-sm text-muted-foreground">화면 목록을 불러오는 중...</div>;
+                        return <div className="text-muted-foreground p-3 text-sm">화면 목록을 불러오는 중...</div>;
                       }
                       if (filteredScreens.length === 0) {
-                        return <div className="p-3 text-sm text-muted-foreground">검색 결과가 없습니다.</div>;
+                        return <div className="text-muted-foreground p-3 text-sm">검색 결과가 없습니다.</div>;
                       }
                       return filteredScreens.map((screen, index) => (
                         <div
                           key={`copy-screen-${screen.id}-${index}`}
-                          className="flex cursor-pointer items-center px-3 py-2 hover:bg-muted"
+                          className="hover:bg-muted flex cursor-pointer items-center px-3 py-2"
                           onClick={() => {
                             onUpdateProperty("componentConfig.action.targetScreenId", screen.id);
                             setModalScreenOpen(false);
@@ -1594,7 +1734,9 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
                           />
                           <div className="flex flex-col">
                             <span className="font-medium">{screen.name}</span>
-                            {screen.description && <span className="text-xs text-muted-foreground">{screen.description}</span>}
+                            {screen.description && (
+                              <span className="text-muted-foreground text-xs">{screen.description}</span>
+                            )}
                           </div>
                         </div>
                       ));
@@ -1603,7 +1745,7 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
                 </div>
               </PopoverContent>
             </Popover>
-            <p className="mt-1 text-xs text-muted-foreground">
+            <p className="text-muted-foreground mt-1 text-xs">
               선택된 데이터가 복사되며, 품목코드는 자동으로 초기화됩니다
             </p>
           </div>
@@ -1641,7 +1783,7 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
                     onUpdateProperty("webTypeConfig.editModalTitle", newValue);
                   }}
                 />
-                <p className="mt-1 text-xs text-muted-foreground">비워두면 기본 제목이 표시됩니다</p>
+                <p className="text-muted-foreground mt-1 text-xs">비워두면 기본 제목이 표시됩니다</p>
               </div>
 
               <div>
@@ -1657,7 +1799,7 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
                     onUpdateProperty("webTypeConfig.editModalDescription", newValue);
                   }}
                 />
-                <p className="mt-1 text-xs text-muted-foreground">비워두면 설명이 표시되지 않습니다</p>
+                <p className="text-muted-foreground mt-1 text-xs">비워두면 설명이 표시되지 않습니다</p>
               </div>
 
               <div>
@@ -1716,9 +1858,7 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
                 <Command>
                   <CommandInput placeholder="컬럼 검색..." className="text-xs" />
                   <CommandList>
-                    <CommandEmpty className="text-xs">
-                      컬럼을 찾을 수 없습니다.
-                    </CommandEmpty>
+                    <CommandEmpty className="text-xs">컬럼을 찾을 수 없습니다.</CommandEmpty>
                     <CommandGroup>
                       {tableColumns.map((column) => (
                         <CommandItem
@@ -1750,8 +1890,8 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
 
       {/* 페이지 이동 액션 설정 */}
       {(component.componentConfig?.action?.type || "save") === "navigate" && (
-        <div className="mt-4 space-y-4 rounded-lg border bg-muted/50 p-4">
-          <h4 className="text-sm font-medium text-foreground">페이지 이동 설정</h4>
+        <div className="bg-muted/50 mt-4 space-y-4 rounded-lg border p-4">
+          <h4 className="text-foreground text-sm font-medium">페이지 이동 설정</h4>
 
           <div>
             <Label htmlFor="target-screen-nav">이동할 화면 선택</Label>
@@ -1787,15 +1927,15 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
                     {(() => {
                       const filteredScreens = filterScreens(navSearchTerm);
                       if (screensLoading) {
-                        return <div className="p-3 text-sm text-muted-foreground">화면 목록을 불러오는 중...</div>;
+                        return <div className="text-muted-foreground p-3 text-sm">화면 목록을 불러오는 중...</div>;
                       }
                       if (filteredScreens.length === 0) {
-                        return <div className="p-3 text-sm text-muted-foreground">검색 결과가 없습니다.</div>;
+                        return <div className="text-muted-foreground p-3 text-sm">검색 결과가 없습니다.</div>;
                       }
                       return filteredScreens.map((screen, index) => (
                         <div
                           key={`navigate-screen-${screen.id}-${index}`}
-                          className="flex cursor-pointer items-center px-3 py-2 hover:bg-muted"
+                          className="hover:bg-muted flex cursor-pointer items-center px-3 py-2"
                           onClick={() => {
                             onUpdateProperty("componentConfig.action.targetScreenId", screen.id);
                             setNavScreenOpen(false);
@@ -1810,7 +1950,9 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
                           />
                           <div className="flex flex-col">
                             <span className="font-medium">{screen.name}</span>
-                            {screen.description && <span className="text-xs text-muted-foreground">{screen.description}</span>}
+                            {screen.description && (
+                              <span className="text-muted-foreground text-xs">{screen.description}</span>
+                            )}
                           </div>
                         </div>
                       ));
@@ -1819,7 +1961,7 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
                 </div>
               </PopoverContent>
             </Popover>
-            <p className="mt-1 text-xs text-muted-foreground">
+            <p className="text-muted-foreground mt-1 text-xs">
               선택한 화면으로 /screens/{"{"}화면ID{"}"} 형태로 이동합니다
             </p>
           </div>
@@ -1837,15 +1979,15 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
               }}
               className="h-6 w-full px-2 py-0 text-xs"
             />
-            <p className="mt-1 text-xs text-muted-foreground">URL을 입력하면 화면 선택보다 우선 적용됩니다</p>
+            <p className="text-muted-foreground mt-1 text-xs">URL을 입력하면 화면 선택보다 우선 적용됩니다</p>
           </div>
         </div>
       )}
 
       {/* 엑셀 다운로드 액션 설정 */}
       {(component.componentConfig?.action?.type || "save") === "excel_download" && (
-        <div className="mt-4 space-y-4 rounded-lg border bg-muted/50 p-4">
-          <h4 className="text-sm font-medium text-foreground">엑셀 다운로드 설정</h4>
+        <div className="bg-muted/50 mt-4 space-y-4 rounded-lg border p-4">
+          <h4 className="text-foreground text-sm font-medium">엑셀 다운로드 설정</h4>
 
           <div>
             <Label htmlFor="excel-filename">파일명 (선택사항)</Label>
@@ -1856,7 +1998,7 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
               onChange={(e) => onUpdateProperty("componentConfig.action.excelFileName", e.target.value)}
               className="h-8 text-xs"
             />
-            <p className="mt-1 text-xs text-muted-foreground">확장자(.xlsx)는 자동으로 추가됩니다</p>
+            <p className="text-muted-foreground mt-1 text-xs">확장자(.xlsx)는 자동으로 추가됩니다</p>
           </div>
 
           <div>
@@ -1883,48 +2025,18 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
 
       {/* 엑셀 업로드 액션 설정 */}
       {(component.componentConfig?.action?.type || "save") === "excel_upload" && (
-        <div className="mt-4 space-y-4 rounded-lg border bg-muted/50 p-4">
-          <h4 className="text-sm font-medium text-foreground">📤 엑셀 업로드 설정</h4>
-
-          <div>
-            <Label htmlFor="excel-upload-mode">업로드 모드</Label>
-            <Select
-              value={config.action?.excelUploadMode || "insert"}
-              onValueChange={(value) => onUpdateProperty("componentConfig.action.excelUploadMode", value)}
-            >
-              <SelectTrigger className="h-8 text-xs">
-                <SelectValue />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="insert">신규 삽입 (INSERT)</SelectItem>
-                <SelectItem value="update">기존 수정 (UPDATE)</SelectItem>
-                <SelectItem value="upsert">삽입/수정 (UPSERT)</SelectItem>
-              </SelectContent>
-            </Select>
-          </div>
-
-          {(config.action?.excelUploadMode === "update" || config.action?.excelUploadMode === "upsert") && (
-            <div>
-              <Label htmlFor="excel-key-column">
-                키 컬럼명 <span className="text-destructive">*</span>
-              </Label>
-              <Input
-                id="excel-key-column"
-                placeholder="예: id, code"
-                value={config.action?.excelKeyColumn || ""}
-                onChange={(e) => onUpdateProperty("componentConfig.action.excelKeyColumn", e.target.value)}
-                className="h-8 text-xs"
-              />
-              <p className="mt-1 text-xs text-muted-foreground">UPDATE/UPSERT 시 기준이 되는 컬럼명</p>
-            </div>
-          )}
-        </div>
+        <ExcelUploadConfigSection
+          config={config}
+          onUpdateProperty={onUpdateProperty}
+          allComponents={allComponents}
+          currentTableName={currentTableName}
+        />
       )}
 
       {/* 바코드 스캔 액션 설정 */}
       {(component.componentConfig?.action?.type || "save") === "barcode_scan" && (
-        <div className="mt-4 space-y-4 rounded-lg border bg-muted/50 p-4">
-          <h4 className="text-sm font-medium text-foreground">📷 바코드 스캔 설정</h4>
+        <div className="bg-muted/50 mt-4 space-y-4 rounded-lg border p-4">
+          <h4 className="text-foreground text-sm font-medium">📷 바코드 스캔 설정</h4>
 
           <div>
             <Label htmlFor="barcode-target-field">
@@ -1937,7 +2049,7 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
               onChange={(e) => onUpdateProperty("componentConfig.action.barcodeTargetField", e.target.value)}
               className="h-8 text-xs"
             />
-            <p className="mt-1 text-xs text-muted-foreground">스캔 결과가 입력될 폼 필드명</p>
+            <p className="text-muted-foreground mt-1 text-xs">스캔 결과가 입력될 폼 필드명</p>
           </div>
 
           <div>
@@ -1970,8 +2082,8 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
 
       {/* 코드 병합 액션 설정 */}
       {(component.componentConfig?.action?.type || "save") === "code_merge" && (
-        <div className="mt-4 space-y-4 rounded-lg border bg-muted/50 p-4">
-          <h4 className="text-sm font-medium text-foreground">🔀 코드 병합 설정</h4>
+        <div className="bg-muted/50 mt-4 space-y-4 rounded-lg border p-4">
+          <h4 className="text-foreground text-sm font-medium">🔀 코드 병합 설정</h4>
 
           <div>
             <Label htmlFor="merge-column-name">
@@ -1984,7 +2096,7 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
               onChange={(e) => onUpdateProperty("componentConfig.action.mergeColumnName", e.target.value)}
               className="h-8 text-xs"
             />
-            <p className="mt-1 text-xs text-muted-foreground">
+            <p className="text-muted-foreground mt-1 text-xs">
               병합할 컬럼명 (예: item_code). 이 컬럼이 있는 모든 테이블에 병합이 적용됩니다.
             </p>
           </div>
@@ -1992,7 +2104,7 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
           <div className="flex items-center justify-between">
             <div className="space-y-0.5">
               <Label htmlFor="merge-show-preview">병합 전 미리보기</Label>
-              <p className="text-xs text-muted-foreground">영향받을 테이블과 행 수를 미리 확인합니다</p>
+              <p className="text-muted-foreground text-xs">영향받을 테이블과 행 수를 미리 확인합니다</p>
             </div>
             <Switch
               id="merge-show-preview"
@@ -2024,8 +2136,8 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
 
       {/* 운행알림 및 종료 설정 */}
       {(component.componentConfig?.action?.type || "save") === "operation_control" && (
-        <div className="mt-4 space-y-4 rounded-lg border bg-muted/50 p-4">
-          <h4 className="text-sm font-medium text-foreground">🚗 운행알림 및 종료 설정</h4>
+        <div className="bg-muted/50 mt-4 space-y-4 rounded-lg border p-4">
+          <h4 className="text-foreground text-sm font-medium">🚗 운행알림 및 종료 설정</h4>
 
           <div>
             <Label htmlFor="update-table">
@@ -2049,9 +2161,7 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
                 ))}
               </SelectContent>
             </Select>
-            <p className="mt-1 text-xs text-muted-foreground">
-              필드 값을 변경할 테이블 (기본: 현재 화면 테이블)
-            </p>
+            <p className="text-muted-foreground mt-1 text-xs">필드 값을 변경할 테이블 (기본: 현재 화면 테이블)</p>
           </div>
 
           <div className="grid grid-cols-2 gap-4">
@@ -2066,7 +2176,7 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
                 onChange={(e) => onUpdateProperty("componentConfig.action.updateTargetField", e.target.value)}
                 className="h-8 text-xs"
               />
-              <p className="mt-1 text-xs text-muted-foreground">변경할 DB 컬럼</p>
+              <p className="text-muted-foreground mt-1 text-xs">변경할 DB 컬럼</p>
             </div>
             <div>
               <Label htmlFor="update-target-value">
@@ -2079,13 +2189,13 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
                 onChange={(e) => onUpdateProperty("componentConfig.action.updateTargetValue", e.target.value)}
                 className="h-8 text-xs"
               />
-              <p className="mt-1 text-xs text-muted-foreground">변경할 값 (문자열, 숫자)</p>
+              <p className="text-muted-foreground mt-1 text-xs">변경할 값 (문자열, 숫자)</p>
             </div>
           </div>
 
           {/* 🆕 키 필드 설정 (레코드 식별용) */}
           <div className="mt-4 border-t pt-4">
-            <h5 className="mb-3 text-xs font-medium text-muted-foreground">레코드 식별 설정</h5>
+            <h5 className="text-muted-foreground mb-3 text-xs font-medium">레코드 식별 설정</h5>
             <div className="grid grid-cols-2 gap-4">
               <div>
                 <Label htmlFor="update-key-field">
@@ -2098,7 +2208,7 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
                   onChange={(e) => onUpdateProperty("componentConfig.action.updateKeyField", e.target.value)}
                   className="h-8 text-xs"
                 />
-                <p className="mt-1 text-xs text-muted-foreground">레코드를 찾을 DB 컬럼명</p>
+                <p className="text-muted-foreground mt-1 text-xs">레코드를 찾을 DB 컬럼명</p>
               </div>
               <div>
                 <Label htmlFor="update-key-source">
@@ -2134,7 +2244,7 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
                     ))}
                   </SelectContent>
                 </Select>
-                <p className="mt-1 text-xs text-muted-foreground">키 값을 가져올 소스</p>
+                <p className="text-muted-foreground mt-1 text-xs">키 값을 가져올 소스</p>
               </div>
             </div>
           </div>
@@ -2142,7 +2252,7 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
           <div className="flex items-center justify-between">
             <div className="space-y-0.5">
               <Label htmlFor="update-auto-save">변경 후 자동 저장</Label>
-              <p className="text-xs text-muted-foreground">버튼 클릭 시 즉시 DB에 저장</p>
+              <p className="text-muted-foreground text-xs">버튼 클릭 시 즉시 DB에 저장</p>
             </div>
             <Switch
               id="update-auto-save"
@@ -2160,7 +2270,7 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
               onChange={(e) => onUpdateProperty("componentConfig.action.confirmMessage", e.target.value)}
               className="h-8 text-xs"
             />
-            <p className="mt-1 text-xs text-muted-foreground">입력하면 변경 전 확인 창이 표시됩니다</p>
+            <p className="text-muted-foreground mt-1 text-xs">입력하면 변경 전 확인 창이 표시됩니다</p>
           </div>
 
           <div className="grid grid-cols-2 gap-4">
@@ -2191,7 +2301,7 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
             <div className="flex items-center justify-between">
               <div className="space-y-0.5">
                 <Label htmlFor="update-with-geolocation">위치정보도 함께 수집</Label>
-                <p className="text-xs text-muted-foreground">상태 변경과 함께 현재 GPS 좌표를 수집합니다</p>
+                <p className="text-muted-foreground text-xs">상태 변경과 함께 현재 GPS 좌표를 수집합니다</p>
               </div>
               <Switch
                 id="update-with-geolocation"
@@ -2199,25 +2309,33 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
                 onCheckedChange={(checked) => onUpdateProperty("componentConfig.action.updateWithGeolocation", checked)}
               />
             </div>
-            
+
             {config.action?.updateWithGeolocation && (
               <div className="mt-3 space-y-3 rounded-md bg-amber-50 p-3 dark:bg-amber-950">
                 <div className="grid grid-cols-2 gap-2">
                   <div>
-                    <Label>위도 저장 필드 <span className="text-destructive">*</span></Label>
+                    <Label>
+                      위도 저장 필드 <span className="text-destructive">*</span>
+                    </Label>
                     <Input
                       placeholder="예: latitude"
                       value={config.action?.updateGeolocationLatField || ""}
-                      onChange={(e) => onUpdateProperty("componentConfig.action.updateGeolocationLatField", e.target.value)}
+                      onChange={(e) =>
+                        onUpdateProperty("componentConfig.action.updateGeolocationLatField", e.target.value)
+                      }
                       className="h-8 text-xs"
                     />
                   </div>
                   <div>
-                    <Label>경도 저장 필드 <span className="text-destructive">*</span></Label>
+                    <Label>
+                      경도 저장 필드 <span className="text-destructive">*</span>
+                    </Label>
                     <Input
                       placeholder="예: longitude"
                       value={config.action?.updateGeolocationLngField || ""}
-                      onChange={(e) => onUpdateProperty("componentConfig.action.updateGeolocationLngField", e.target.value)}
+                      onChange={(e) =>
+                        onUpdateProperty("componentConfig.action.updateGeolocationLngField", e.target.value)
+                      }
                       className="h-8 text-xs"
                     />
                   </div>
@@ -2228,7 +2346,9 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
                     <Input
                       placeholder="예: accuracy"
                       value={config.action?.updateGeolocationAccuracyField || ""}
-                      onChange={(e) => onUpdateProperty("componentConfig.action.updateGeolocationAccuracyField", e.target.value)}
+                      onChange={(e) =>
+                        onUpdateProperty("componentConfig.action.updateGeolocationAccuracyField", e.target.value)
+                      }
                       className="h-8 text-xs"
                     />
                   </div>
@@ -2237,7 +2357,9 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
                     <Input
                       placeholder="예: location_time"
                       value={config.action?.updateGeolocationTimestampField || ""}
-                      onChange={(e) => onUpdateProperty("componentConfig.action.updateGeolocationTimestampField", e.target.value)}
+                      onChange={(e) =>
+                        onUpdateProperty("componentConfig.action.updateGeolocationTimestampField", e.target.value)
+                      }
                       className="h-8 text-xs"
                     />
                   </div>
@@ -2253,7 +2375,7 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
           <div className="flex items-center justify-between">
             <div>
               <Label htmlFor="update-with-tracking">연속 위치 추적</Label>
-              <p className="text-xs text-muted-foreground">10초마다 위치를 경로 테이블에 저장합니다</p>
+              <p className="text-muted-foreground text-xs">10초마다 위치를 경로 테이블에 저장합니다</p>
             </div>
             <Switch
               id="update-with-tracking"
@@ -2261,11 +2383,13 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
               onCheckedChange={(checked) => onUpdateProperty("componentConfig.action.updateWithTracking", checked)}
             />
           </div>
-          
+
           {config.action?.updateWithTracking && (
             <div className="mt-3 space-y-3 rounded-md bg-green-50 p-3 dark:bg-green-950">
               <div>
-                <Label>추적 모드 <span className="text-destructive">*</span></Label>
+                <Label>
+                  추적 모드 <span className="text-destructive">*</span>
+                </Label>
                 <Select
                   value={config.action?.updateTrackingMode || "start"}
                   onValueChange={(value) => onUpdateProperty("componentConfig.action.updateTrackingMode", value)}
@@ -2279,7 +2403,7 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
                   </SelectContent>
                 </Select>
               </div>
-              
+
               {config.action?.updateTrackingMode === "start" && (
                 <div>
                   <Label>위치 저장 주기 (초)</Label>
@@ -2287,17 +2411,22 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
                     type="number"
                     placeholder="10"
                     value={(config.action?.updateTrackingInterval || 10000) / 1000}
-                    onChange={(e) => onUpdateProperty("componentConfig.action.updateTrackingInterval", parseInt(e.target.value) * 1000 || 10000)}
+                    onChange={(e) =>
+                      onUpdateProperty(
+                        "componentConfig.action.updateTrackingInterval",
+                        parseInt(e.target.value) * 1000 || 10000,
+                      )
+                    }
                     className="h-8 text-xs"
                     min={5}
                     max={300}
                   />
-                  <p className="mt-1 text-[10px] text-muted-foreground">5초 ~ 300초 사이로 설정 (기본: 10초)</p>
+                  <p className="text-muted-foreground mt-1 text-[10px]">5초 ~ 300초 사이로 설정 (기본: 10초)</p>
                 </div>
               )}
-              
+
               <p className="text-[10px] text-green-700 dark:text-green-300">
-                {config.action?.updateTrackingMode === "start" 
+                {config.action?.updateTrackingMode === "start"
                   ? "버튼 클릭 시 연속 위치 추적이 시작되고, vehicle_location_history 테이블에 경로가 저장됩니다."
                   : "버튼 클릭 시 진행 중인 위치 추적이 종료됩니다."}
               </p>
@@ -2306,13 +2435,13 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
 
           {/* 🆕 버튼 활성화 조건 설정 */}
           <div className="mt-4 border-t pt-4">
-            <h5 className="mb-3 text-xs font-medium text-muted-foreground">버튼 활성화 조건</h5>
-            
+            <h5 className="text-muted-foreground mb-3 text-xs font-medium">버튼 활성화 조건</h5>
+
             {/* 출발지/도착지 필수 체크 */}
             <div className="flex items-center justify-between">
               <div>
                 <Label htmlFor="require-location">출발지/도착지 필수</Label>
-                <p className="text-xs text-muted-foreground">선택하지 않으면 버튼 비활성화</p>
+                <p className="text-muted-foreground text-xs">선택하지 않으면 버튼 비활성화</p>
               </div>
               <Switch
                 id="require-location"
@@ -2329,7 +2458,9 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
                     <Input
                       placeholder="departure"
                       value={config.action?.trackingDepartureField || "departure"}
-                      onChange={(e) => onUpdateProperty("componentConfig.action.trackingDepartureField", e.target.value)}
+                      onChange={(e) =>
+                        onUpdateProperty("componentConfig.action.trackingDepartureField", e.target.value)
+                      }
                       className="h-8 text-xs"
                     />
                   </div>
@@ -2350,7 +2481,7 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
             <div className="mt-4 flex items-center justify-between">
               <div>
                 <Label htmlFor="enable-on-status">상태 기반 활성화</Label>
-                <p className="text-xs text-muted-foreground">특정 상태일 때만 버튼 활성화</p>
+                <p className="text-muted-foreground text-xs">특정 상태일 때만 버튼 활성화</p>
               </div>
               <Switch
                 id="enable-on-status"
@@ -2378,9 +2509,7 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
                       ))}
                     </SelectContent>
                   </Select>
-                  <p className="mt-1 text-[10px] text-muted-foreground">
-                    상태를 조회할 테이블 (기본: vehicles)
-                  </p>
+                  <p className="text-muted-foreground mt-1 text-[10px]">상태를 조회할 테이블 (기본: vehicles)</p>
                 </div>
                 <div>
                   <Label>조회 키 필드</Label>
@@ -2390,7 +2519,7 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
                     onChange={(e) => onUpdateProperty("componentConfig.action.statusCheckKeyField", e.target.value)}
                     className="h-8 text-xs"
                   />
-                  <p className="mt-1 text-[10px] text-muted-foreground">
+                  <p className="text-muted-foreground mt-1 text-[10px]">
                     현재 로그인 사용자 ID로 조회할 필드 (기본: user_id)
                   </p>
                 </div>
@@ -2402,9 +2531,7 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
                     onChange={(e) => onUpdateProperty("componentConfig.action.statusCheckField", e.target.value)}
                     className="h-8 text-xs"
                   />
-                  <p className="mt-1 text-[10px] text-muted-foreground">
-                    상태 값이 저장된 컬럼명 (기본: status)
-                  </p>
+                  <p className="text-muted-foreground mt-1 text-[10px]">상태 값이 저장된 컬럼명 (기본: status)</p>
                 </div>
                 <div>
                   <Label>상태 조건</Label>
@@ -2429,9 +2556,7 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
                     onChange={(e) => onUpdateProperty("componentConfig.action.statusConditionValues", e.target.value)}
                     className="h-8 text-xs"
                   />
-                  <p className="mt-1 text-[10px] text-muted-foreground">
-                    여러 상태값은 쉼표(,)로 구분
-                  </p>
+                  <p className="text-muted-foreground mt-1 text-[10px]">여러 상태값은 쉼표(,)로 구분</p>
                 </div>
               </div>
             )}
@@ -2444,8 +2569,7 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
               - 운행 시작: status를 &quot;active&quot;로 + 연속 추적 시작
               <br />
               - 운행 종료: status를 &quot;completed&quot;로 + 연속 추적 종료
-              <br />
-              - 공차등록: status를 &quot;inactive&quot;로 + 1회성 위치정보 수집
+              <br />- 공차등록: status를 &quot;inactive&quot;로 + 1회성 위치정보 수집
             </p>
           </div>
         </div>
@@ -2453,8 +2577,8 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
 
       {/* 데이터 전달 액션 설정 */}
       {(component.componentConfig?.action?.type || "save") === "transferData" && (
-        <div className="mt-4 space-y-4 rounded-lg border bg-muted/50 p-4">
-          <h4 className="text-sm font-medium text-foreground">📦 데이터 전달 설정</h4>
+        <div className="bg-muted/50 mt-4 space-y-4 rounded-lg border p-4">
+          <h4 className="text-foreground text-sm font-medium">📦 데이터 전달 설정</h4>
 
           {/* 소스 컴포넌트 선택 (Combobox) */}
           <div>
@@ -2463,7 +2587,9 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
             </Label>
             <Select
               value={config.action?.dataTransfer?.sourceComponentId || ""}
-              onValueChange={(value) => onUpdateProperty("componentConfig.action.dataTransfer.sourceComponentId", value)}
+              onValueChange={(value) =>
+                onUpdateProperty("componentConfig.action.dataTransfer.sourceComponentId", value)
+              }
             >
               <SelectTrigger className="h-8 text-xs">
                 <SelectValue placeholder="데이터를 가져올 컴포넌트 선택" />
@@ -2474,8 +2600,8 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
                   .filter((comp: any) => {
                     const type = comp.componentType || comp.type || "";
                     // 데이터를 제공할 수 있는 컴포넌트 타입들
-                    return ["table-list", "repeater-field-group", "form-group", "data-table"].some(
-                      (t) => type.includes(t)
+                    return ["table-list", "repeater-field-group", "form-group", "data-table"].some((t) =>
+                      type.includes(t),
                     );
                   })
                   .map((comp: any) => {
@@ -2485,14 +2611,16 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
                       <SelectItem key={comp.id} value={comp.id}>
                         <div className="flex items-center gap-2">
                           <span className="text-xs font-medium">{compLabel}</span>
-                          <span className="text-[10px] text-muted-foreground">({compType})</span>
+                          <span className="text-muted-foreground text-[10px]">({compType})</span>
                         </div>
                       </SelectItem>
                     );
                   })}
                 {allComponents.filter((comp: any) => {
                   const type = comp.componentType || comp.type || "";
-                  return ["table-list", "repeater-field-group", "form-group", "data-table"].some((t) => type.includes(t));
+                  return ["table-list", "repeater-field-group", "form-group", "data-table"].some((t) =>
+                    type.includes(t),
+                  );
                 }).length === 0 && (
                   <SelectItem value="__none__" disabled>
                     데이터 제공 가능한 컴포넌트가 없습니다
@@ -2500,9 +2628,7 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
                 )}
               </SelectContent>
             </Select>
-            <p className="mt-1 text-xs text-muted-foreground">
-              테이블, 반복 필드 그룹 등 데이터를 제공하는 컴포넌트
-            </p>
+            <p className="text-muted-foreground mt-1 text-xs">테이블, 반복 필드 그룹 등 데이터를 제공하는 컴포넌트</p>
           </div>
 
           <div>
@@ -2519,12 +2645,15 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
               <SelectContent>
                 <SelectItem value="component">같은 화면의 컴포넌트</SelectItem>
                 <SelectItem value="splitPanel">분할 패널 반대편 화면</SelectItem>
-                <SelectItem value="screen" disabled>다른 화면 (구현 예정)</SelectItem>
+                <SelectItem value="screen" disabled>
+                  다른 화면 (구현 예정)
+                </SelectItem>
               </SelectContent>
             </Select>
             {config.action?.dataTransfer?.targetType === "splitPanel" && (
-              <p className="text-[10px] text-muted-foreground mt-1">
-                이 버튼이 분할 패널 내부에 있어야 합니다. 좌측 화면에서 우측으로, 또는 우측에서 좌측으로 데이터가 전달됩니다.
+              <p className="text-muted-foreground mt-1 text-[10px]">
+                이 버튼이 분할 패널 내부에 있어야 합니다. 좌측 화면에서 우측으로, 또는 우측에서 좌측으로 데이터가
+                전달됩니다.
               </p>
             )}
           </div>
@@ -2537,7 +2666,9 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
               </Label>
               <Select
                 value={config.action?.dataTransfer?.targetComponentId || ""}
-                onValueChange={(value) => onUpdateProperty("componentConfig.action.dataTransfer.targetComponentId", value)}
+                onValueChange={(value) =>
+                  onUpdateProperty("componentConfig.action.dataTransfer.targetComponentId", value)
+                }
               >
                 <SelectTrigger className="h-8 text-xs">
                   <SelectValue placeholder="데이터를 받을 컴포넌트 선택" />
@@ -2549,7 +2680,7 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
                       const type = comp.componentType || comp.type || "";
                       // 데이터를 받을 수 있는 컴포넌트 타입들
                       const isReceivable = ["table-list", "repeater-field-group", "form-group", "data-table"].some(
-                        (t) => type.includes(t)
+                        (t) => type.includes(t),
                       );
                       // 소스와 다른 컴포넌트만
                       return isReceivable && comp.id !== config.action?.dataTransfer?.sourceComponentId;
@@ -2561,14 +2692,16 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
                         <SelectItem key={comp.id} value={comp.id}>
                           <div className="flex items-center gap-2">
                             <span className="text-xs font-medium">{compLabel}</span>
-                            <span className="text-[10px] text-muted-foreground">({compType})</span>
+                            <span className="text-muted-foreground text-[10px]">({compType})</span>
                           </div>
                         </SelectItem>
                       );
                     })}
                   {allComponents.filter((comp: any) => {
                     const type = comp.componentType || comp.type || "";
-                    const isReceivable = ["table-list", "repeater-field-group", "form-group", "data-table"].some((t) => type.includes(t));
+                    const isReceivable = ["table-list", "repeater-field-group", "form-group", "data-table"].some((t) =>
+                      type.includes(t),
+                    );
                     return isReceivable && comp.id !== config.action?.dataTransfer?.sourceComponentId;
                   }).length === 0 && (
                     <SelectItem value="__none__" disabled>
@@ -2577,25 +2710,23 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
                   )}
                 </SelectContent>
               </Select>
-              <p className="mt-1 text-xs text-muted-foreground">
-                테이블, 반복 필드 그룹 등 데이터를 받는 컴포넌트
-              </p>
+              <p className="text-muted-foreground mt-1 text-xs">테이블, 반복 필드 그룹 등 데이터를 받는 컴포넌트</p>
             </div>
           )}
 
           {/* 분할 패널 반대편 타겟 설정 */}
           {config.action?.dataTransfer?.targetType === "splitPanel" && (
             <div>
-              <Label>
-                타겟 컴포넌트 ID (선택사항)
-              </Label>
+              <Label>타겟 컴포넌트 ID (선택사항)</Label>
               <Input
                 value={config.action?.dataTransfer?.targetComponentId || ""}
-                onChange={(e) => onUpdateProperty("componentConfig.action.dataTransfer.targetComponentId", e.target.value)}
+                onChange={(e) =>
+                  onUpdateProperty("componentConfig.action.dataTransfer.targetComponentId", e.target.value)
+                }
                 placeholder="비워두면 첫 번째 수신 가능 컴포넌트로 전달"
                 className="h-8 text-xs"
               />
-              <p className="mt-1 text-xs text-muted-foreground">
+              <p className="text-muted-foreground mt-1 text-xs">
                 반대편 화면의 특정 컴포넌트 ID를 지정하거나, 비워두면 자동으로 첫 번째 수신 가능 컴포넌트로 전달됩니다.
               </p>
             </div>
@@ -2616,32 +2747,34 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
                 <SelectItem value="merge">병합 (Merge)</SelectItem>
               </SelectContent>
             </Select>
-            <p className="mt-1 text-xs text-muted-foreground">
-              기존 데이터를 어떻게 처리할지 선택
-            </p>
+            <p className="text-muted-foreground mt-1 text-xs">기존 데이터를 어떻게 처리할지 선택</p>
           </div>
 
           <div className="flex items-center justify-between">
             <div className="space-y-0.5">
               <Label htmlFor="clear-after-transfer">전달 후 소스 선택 초기화</Label>
-              <p className="text-xs text-muted-foreground">데이터 전달 후 소스의 선택을 해제합니다</p>
+              <p className="text-muted-foreground text-xs">데이터 전달 후 소스의 선택을 해제합니다</p>
             </div>
             <Switch
               id="clear-after-transfer"
               checked={config.action?.dataTransfer?.clearAfterTransfer === true}
-              onCheckedChange={(checked) => onUpdateProperty("componentConfig.action.dataTransfer.clearAfterTransfer", checked)}
+              onCheckedChange={(checked) =>
+                onUpdateProperty("componentConfig.action.dataTransfer.clearAfterTransfer", checked)
+              }
             />
           </div>
 
           <div className="flex items-center justify-between">
             <div className="space-y-0.5">
               <Label htmlFor="confirm-before-transfer">전달 전 확인 메시지</Label>
-              <p className="text-xs text-muted-foreground">데이터 전달 전 확인 다이얼로그를 표시합니다</p>
+              <p className="text-muted-foreground text-xs">데이터 전달 전 확인 다이얼로그를 표시합니다</p>
             </div>
             <Switch
               id="confirm-before-transfer"
               checked={config.action?.dataTransfer?.confirmBeforeTransfer === true}
-              onCheckedChange={(checked) => onUpdateProperty("componentConfig.action.dataTransfer.confirmBeforeTransfer", checked)}
+              onCheckedChange={(checked) =>
+                onUpdateProperty("componentConfig.action.dataTransfer.confirmBeforeTransfer", checked)
+              }
             />
           </div>
 
@@ -2670,7 +2803,12 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
                   type="number"
                   placeholder="0"
                   value={config.action?.dataTransfer?.validation?.minSelection || ""}
-                  onChange={(e) => onUpdateProperty("componentConfig.action.dataTransfer.validation.minSelection", parseInt(e.target.value) || 0)}
+                  onChange={(e) =>
+                    onUpdateProperty(
+                      "componentConfig.action.dataTransfer.validation.minSelection",
+                      parseInt(e.target.value) || 0,
+                    )
+                  }
                   className="h-8 w-20 text-xs"
                 />
               </div>
@@ -2683,7 +2821,12 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
                   type="number"
                   placeholder="제한없음"
                   value={config.action?.dataTransfer?.validation?.maxSelection || ""}
-                  onChange={(e) => onUpdateProperty("componentConfig.action.dataTransfer.validation.maxSelection", parseInt(e.target.value) || undefined)}
+                  onChange={(e) =>
+                    onUpdateProperty(
+                      "componentConfig.action.dataTransfer.validation.maxSelection",
+                      parseInt(e.target.value) || undefined,
+                    )
+                  }
                   className="h-8 w-20 text-xs"
                 />
               </div>
@@ -2692,7 +2835,7 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
 
           <div className="space-y-2">
             <Label>추가 데이터 소스 (선택사항)</Label>
-            <p className="text-xs text-muted-foreground">
+            <p className="text-muted-foreground text-xs">
               조건부 컨테이너의 카테고리 값 등 추가 데이터를 함께 전달할 수 있습니다
             </p>
             <div className="space-y-2 rounded-md border p-3">
@@ -2723,8 +2866,8 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
                       .filter((comp: any) => {
                         const type = comp.componentType || comp.type || "";
                         // 소스/타겟과 다른 컴포넌트 중 값을 제공할 수 있는 타입
-                        return ["conditional-container", "select-basic", "select", "combobox"].some(
-                          (t) => type.includes(t)
+                        return ["conditional-container", "select-basic", "select", "combobox"].some((t) =>
+                          type.includes(t),
                         );
                       })
                       .map((comp: any) => {
@@ -2734,14 +2877,14 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
                           <SelectItem key={comp.id} value={comp.id}>
                             <div className="flex items-center gap-2">
                               <span className="text-xs font-medium">{compLabel}</span>
-                              <span className="text-[10px] text-muted-foreground">({compType})</span>
+                              <span className="text-muted-foreground text-[10px]">({compType})</span>
                             </div>
                           </SelectItem>
                         );
                       })}
                   </SelectContent>
                 </Select>
-                <p className="mt-1 text-xs text-muted-foreground">
+                <p className="text-muted-foreground mt-1 text-xs">
                   조건부 컨테이너, 셀렉트박스 등 (카테고리 값 전달용)
                 </p>
               </div>
@@ -2765,9 +2908,7 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
                   }}
                   className="h-8 text-xs"
                 />
-                <p className="mt-1 text-xs text-muted-foreground">
-                  타겟 테이블에 저장될 필드명
-                </p>
+                <p className="text-muted-foreground mt-1 text-xs">타겟 테이블에 저장될 필드명</p>
               </div>
             </div>
           </div>
@@ -2775,18 +2916,14 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
           {/* 필드 매핑 규칙 */}
           <div className="space-y-3">
             <Label>필드 매핑 설정</Label>
-            
+
             {/* 소스/타겟 테이블 선택 */}
             <div className="grid grid-cols-2 gap-3">
               <div className="space-y-1">
                 <Label className="text-xs">소스 테이블</Label>
                 <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.action?.dataTransfer?.sourceTable
                         ? availableTables.find((t) => t.name === config.action?.dataTransfer?.sourceTable)?.label ||
                           config.action?.dataTransfer?.sourceTable
@@ -2812,11 +2949,11 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
                               <Check
                                 className={cn(
                                   "mr-2 h-3 w-3",
-                                  config.action?.dataTransfer?.sourceTable === table.name ? "opacity-100" : "opacity-0"
+                                  config.action?.dataTransfer?.sourceTable === table.name ? "opacity-100" : "opacity-0",
                                 )}
                               />
                               <span className="font-medium">{table.label}</span>
-                              <span className="ml-1 text-muted-foreground">({table.name})</span>
+                              <span className="text-muted-foreground ml-1">({table.name})</span>
                             </CommandItem>
                           ))}
                         </CommandGroup>
@@ -2825,16 +2962,12 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
                   </PopoverContent>
                 </Popover>
               </div>
-              
+
               <div className="space-y-1">
                 <Label className="text-xs">타겟 테이블</Label>
                 <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.action?.dataTransfer?.targetTable
                         ? availableTables.find((t) => t.name === config.action?.dataTransfer?.targetTable)?.label ||
                           config.action?.dataTransfer?.targetTable
@@ -2860,11 +2993,11 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
                               <Check
                                 className={cn(
                                   "mr-2 h-3 w-3",
-                                  config.action?.dataTransfer?.targetTable === table.name ? "opacity-100" : "opacity-0"
+                                  config.action?.dataTransfer?.targetTable === table.name ? "opacity-100" : "opacity-0",
                                 )}
                               />
                               <span className="font-medium">{table.label}</span>
-                              <span className="ml-1 text-muted-foreground">({table.name})</span>
+                              <span className="text-muted-foreground ml-1">({table.name})</span>
                             </CommandItem>
                           ))}
                         </CommandGroup>
@@ -2874,7 +3007,7 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
                 </Popover>
               </div>
             </div>
-            
+
             {/* 필드 매핑 규칙 */}
             <div className="space-y-2">
               <div className="flex items-center justify-between">
@@ -2895,26 +3028,24 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
                   매핑 추가
                 </Button>
               </div>
-              <p className="text-[10px] text-muted-foreground">
+              <p className="text-muted-foreground text-[10px]">
                 소스 필드를 타겟 필드에 매핑합니다. 비워두면 같은 이름의 필드로 자동 매핑됩니다.
               </p>
-              
-              {(!config.action?.dataTransfer?.sourceTable || !config.action?.dataTransfer?.targetTable) ? (
+
+              {!config.action?.dataTransfer?.sourceTable || !config.action?.dataTransfer?.targetTable ? (
                 <div className="rounded-md border border-dashed p-3 text-center">
-                  <p className="text-xs text-muted-foreground">
-                    먼저 소스 테이블과 타겟 테이블을 선택하세요.
-                  </p>
+                  <p className="text-muted-foreground text-xs">먼저 소스 테이블과 타겟 테이블을 선택하세요.</p>
                 </div>
               ) : (config.action?.dataTransfer?.mappingRules || []).length === 0 ? (
                 <div className="rounded-md border border-dashed p-3 text-center">
-                  <p className="text-xs text-muted-foreground">
+                  <p className="text-muted-foreground text-xs">
                     매핑 규칙이 없습니다. 같은 이름의 필드로 자동 매핑됩니다.
                   </p>
                 </div>
               ) : (
                 <div className="space-y-2">
                   {(config.action?.dataTransfer?.mappingRules || []).map((rule: any, index: number) => (
-                    <div key={index} className="flex items-center gap-2 rounded-md border bg-background p-2">
+                    <div key={index} className="bg-background flex items-center gap-2 rounded-md border p-2">
                       {/* 소스 필드 선택 (Combobox) */}
                       <div className="flex-1">
                         <Popover
@@ -2922,13 +3053,10 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
                           onOpenChange={(open) => setMappingSourcePopoverOpen((prev) => ({ ...prev, [index]: open }))}
                         >
                           <PopoverTrigger asChild>
-                            <Button
-                              variant="outline"
-                              role="combobox"
-                              className="h-7 w-full justify-between text-xs"
-                            >
+                            <Button variant="outline" role="combobox" className="h-7 w-full justify-between text-xs">
                               {rule.sourceField
-                                ? mappingSourceColumns.find((c) => c.name === rule.sourceField)?.label || rule.sourceField
+                                ? mappingSourceColumns.find((c) => c.name === rule.sourceField)?.label ||
+                                  rule.sourceField
                                 : "소스 필드"}
                               <ChevronsUpDown className="ml-1 h-3 w-3 shrink-0 opacity-50" />
                             </Button>
@@ -2939,10 +3067,14 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
                                 placeholder="컬럼 검색..."
                                 className="h-8 text-xs"
                                 value={mappingSourceSearch[index] || ""}
-                                onValueChange={(value) => setMappingSourceSearch((prev) => ({ ...prev, [index]: value }))}
+                                onValueChange={(value) =>
+                                  setMappingSourceSearch((prev) => ({ ...prev, [index]: value }))
+                                }
                               />
                               <CommandList>
-                                <CommandEmpty className="py-2 text-center text-xs">컬럼을 찾을 수 없습니다</CommandEmpty>
+                                <CommandEmpty className="py-2 text-center text-xs">
+                                  컬럼을 찾을 수 없습니다
+                                </CommandEmpty>
                                 <CommandGroup>
                                   {mappingSourceColumns.map((col) => (
                                     <CommandItem
@@ -2959,12 +3091,12 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
                                       <Check
                                         className={cn(
                                           "mr-2 h-3 w-3",
-                                          rule.sourceField === col.name ? "opacity-100" : "opacity-0"
+                                          rule.sourceField === col.name ? "opacity-100" : "opacity-0",
                                         )}
                                       />
                                       <span>{col.label}</span>
                                       {col.label !== col.name && (
-                                        <span className="ml-1 text-muted-foreground">({col.name})</span>
+                                        <span className="text-muted-foreground ml-1">({col.name})</span>
                                       )}
                                     </CommandItem>
                                   ))}
@@ -2974,9 +3106,9 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
                           </PopoverContent>
                         </Popover>
                       </div>
-                      
-                      <span className="text-xs text-muted-foreground">→</span>
-                      
+
+                      <span className="text-muted-foreground text-xs">→</span>
+
                       {/* 타겟 필드 선택 (Combobox) */}
                       <div className="flex-1">
                         <Popover
@@ -2984,13 +3116,10 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
                           onOpenChange={(open) => setMappingTargetPopoverOpen((prev) => ({ ...prev, [index]: open }))}
                         >
                           <PopoverTrigger asChild>
-                            <Button
-                              variant="outline"
-                              role="combobox"
-                              className="h-7 w-full justify-between text-xs"
-                            >
+                            <Button variant="outline" role="combobox" className="h-7 w-full justify-between text-xs">
                               {rule.targetField
-                                ? mappingTargetColumns.find((c) => c.name === rule.targetField)?.label || rule.targetField
+                                ? mappingTargetColumns.find((c) => c.name === rule.targetField)?.label ||
+                                  rule.targetField
                                 : "타겟 필드"}
                               <ChevronsUpDown className="ml-1 h-3 w-3 shrink-0 opacity-50" />
                             </Button>
@@ -3001,10 +3130,14 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
                                 placeholder="컬럼 검색..."
                                 className="h-8 text-xs"
                                 value={mappingTargetSearch[index] || ""}
-                                onValueChange={(value) => setMappingTargetSearch((prev) => ({ ...prev, [index]: value }))}
+                                onValueChange={(value) =>
+                                  setMappingTargetSearch((prev) => ({ ...prev, [index]: value }))
+                                }
                               />
                               <CommandList>
-                                <CommandEmpty className="py-2 text-center text-xs">컬럼을 찾을 수 없습니다</CommandEmpty>
+                                <CommandEmpty className="py-2 text-center text-xs">
+                                  컬럼을 찾을 수 없습니다
+                                </CommandEmpty>
                                 <CommandGroup>
                                   {mappingTargetColumns.map((col) => (
                                     <CommandItem
@@ -3021,12 +3154,12 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
                                       <Check
                                         className={cn(
                                           "mr-2 h-3 w-3",
-                                          rule.targetField === col.name ? "opacity-100" : "opacity-0"
+                                          rule.targetField === col.name ? "opacity-100" : "opacity-0",
                                         )}
                                       />
                                       <span>{col.label}</span>
                                       {col.label !== col.name && (
-                                        <span className="ml-1 text-muted-foreground">({col.name})</span>
+                                        <span className="text-muted-foreground ml-1">({col.name})</span>
                                       )}
                                     </CommandItem>
                                   ))}
@@ -3036,12 +3169,12 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
                           </PopoverContent>
                         </Popover>
                       </div>
-                      
+
                       <Button
                         type="button"
                         variant="ghost"
                         size="icon"
-                        className="h-7 w-7 text-destructive hover:bg-destructive/10"
+                        className="text-destructive hover:bg-destructive/10 h-7 w-7"
                         onClick={() => {
                           const rules = [...(config.action?.dataTransfer?.mappingRules || [])];
                           rules.splice(index, 1);
@@ -3082,18 +3215,16 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
       )}
 
       {/* 🆕 행 선택 시에만 활성화 설정 */}
-      <div className="mt-4 space-y-4 rounded-lg border bg-muted/50 p-4">
-        <h4 className="text-sm font-medium text-foreground">행 선택 활성화 조건</h4>
-        <p className="text-xs text-muted-foreground">
+      <div className="bg-muted/50 mt-4 space-y-4 rounded-lg border p-4">
+        <h4 className="text-foreground text-sm font-medium">행 선택 활성화 조건</h4>
+        <p className="text-muted-foreground text-xs">
           테이블 리스트나 분할 패널에서 데이터가 선택되었을 때만 버튼을 활성화합니다.
         </p>
-        
+
         <div className="flex items-center justify-between">
           <div className="space-y-0.5">
             <Label>행 선택 시에만 활성화</Label>
-            <p className="text-xs text-muted-foreground">
-              체크하면 테이블에서 행을 선택해야만 버튼이 활성화됩니다.
-            </p>
+            <p className="text-muted-foreground text-xs">체크하면 테이블에서 행을 선택해야만 버튼이 활성화됩니다.</p>
           </div>
           <Switch
             checked={component.componentConfig?.action?.requireRowSelection || false}
@@ -3104,7 +3235,7 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
         </div>
 
         {component.componentConfig?.action?.requireRowSelection && (
-          <div className="space-y-3 pl-4 border-l-2 border-primary/20">
+          <div className="border-primary/20 space-y-3 border-l-2 pl-4">
             <div>
               <Label htmlFor="row-selection-source">선택 데이터 소스</Label>
               <Select
@@ -3123,7 +3254,7 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
                   <SelectItem value="flowWidget">플로우 위젯 선택</SelectItem>
                 </SelectContent>
               </Select>
-              <p className="mt-1 text-xs text-muted-foreground">
+              <p className="text-muted-foreground mt-1 text-xs">
                 자동 감지: 테이블, 분할 패널, 플로우 위젯 중 선택된 항목이 있으면 활성화
               </p>
             </div>
@@ -3131,7 +3262,7 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
             <div className="flex items-center justify-between">
               <div className="space-y-0.5">
                 <Label>다중 선택 허용</Label>
-                <p className="text-xs text-muted-foreground">
+                <p className="text-muted-foreground text-xs">
                   여러 행이 선택되어도 활성화 (기본: 1개 이상 선택 시 활성화)
                 </p>
               </div>
@@ -3154,14 +3285,16 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
         )}
       </div>
 
-      {/* 제어 기능 섹션 */}
-      <div className="mt-8 border-t border-border pt-6">
-        <ImprovedButtonControlConfigPanel component={component} onUpdateProperty={onUpdateProperty} />
-      </div>
+      {/* 제어 기능 섹션 - 엑셀 업로드가 아닐 때만 표시 */}
+      {(component.componentConfig?.action?.type || "save") !== "excel_upload" && (
+        <div className="border-border mt-8 border-t pt-6">
+          <ImprovedButtonControlConfigPanel component={component} onUpdateProperty={onUpdateProperty} />
+        </div>
+      )}
 
       {/* 🆕 플로우 단계별 표시 제어 섹션 (플로우 위젯이 있을 때만 표시) */}
       {hasFlowWidget && (
-        <div className="mt-8 border-t border-border pt-6">
+        <div className="border-border mt-8 border-t pt-6">
           <FlowVisibilityConfigPanel
             component={component}
             allComponents={allComponents}
@@ -3172,3 +3305,844 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
     </div>
   );
 };
+
+/**
+ * 마스터-디테일 엑셀 업로드 설정 컴포넌트
+ * 분할 패널 + column_labels에서 관계를 자동 감지하고, 사용자는 채번 규칙만 선택
+ */
+const MasterDetailExcelUploadConfig: React.FC<{
+  config: any;
+  onUpdateProperty: (path: string, value: any) => void;
+  allComponents: ComponentData[];
+}> = ({ config, onUpdateProperty, allComponents }) => {
+  const [relationInfo, setRelationInfo] = useState<{
+    masterTable: string;
+    detailTable: string;
+    masterKeyColumn: string;
+    detailFkColumn: string;
+  } | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [masterColumns, setMasterColumns] = useState<
+    Array<{
+      columnName: string;
+      columnLabel: string;
+      inputType: string;
+      referenceTable?: string;
+      referenceColumn?: string;
+      displayColumn?: string;
+    }>
+  >([]);
+  // 참조 테이블별 컬럼 목록 캐시 (컬럼명 + 라벨)
+  const [refTableColumns, setRefTableColumns] = useState<Record<string, Array<{ name: string; label: string }>>>({});
+
+  // 마스터-디테일 설정
+  const masterDetailConfig = config.action?.masterDetailExcel || {};
+
+  // 분할 패널에서 마스터/디테일 테이블명 자동 감지
+  const splitPanelInfo = useMemo(() => {
+    const findSplitPanel = (components: any[]): any => {
+      for (const comp of components) {
+        const compId = comp.componentId || comp.componentType;
+        if (compId === "split-panel-layout") {
+          return comp.componentConfig;
+        }
+        if (comp.children && comp.children.length > 0) {
+          const found = findSplitPanel(comp.children);
+          if (found) return found;
+        }
+      }
+      return null;
+    };
+    return findSplitPanel(allComponents as any[]);
+  }, [allComponents]);
+
+  const masterTable = splitPanelInfo?.leftPanel?.tableName || "";
+  const detailTable = splitPanelInfo?.rightPanel?.tableName || "";
+
+  // 마스터 테이블 컬럼 로드
+  useEffect(() => {
+    if (!masterTable) {
+      setMasterColumns([]);
+      return;
+    }
+
+    const loadMasterColumns = async () => {
+      try {
+        const { apiClient } = await import("@/lib/api/client");
+        const response = await apiClient.get(`/table-management/tables/${masterTable}/columns`);
+        if (response.data?.success && response.data?.data?.columns) {
+          const cols = response.data.data.columns.map((col: any) => ({
+            columnName: col.columnName || col.column_name,
+            columnLabel: col.displayName || col.columnLabel || col.column_label || col.columnName || col.column_name,
+            inputType: col.inputType || col.input_type || "text",
+            referenceTable: col.referenceTable || col.reference_table,
+            referenceColumn: col.referenceColumn || col.reference_column,
+            displayColumn: col.displayColumn || col.display_column,
+          }));
+          setMasterColumns(cols);
+        }
+      } catch (error) {
+        console.error("마스터 테이블 컬럼 로드 실패:", error);
+      }
+    };
+    loadMasterColumns();
+  }, [masterTable]);
+
+  // 선택된 엔티티 필드들의 참조 테이블 컬럼 로드
+  useEffect(() => {
+    const entityFields = (masterDetailConfig.masterSelectFields || []).filter(
+      (f: any) => f.inputType === "entity" && f.referenceTable,
+    );
+
+    const loadRefTableColumns = async () => {
+      const { apiClient } = await import("@/lib/api/client");
+
+      for (const field of entityFields) {
+        // 이미 로드된 테이블은 스킵
+        if (refTableColumns[field.referenceTable]) continue;
+
+        try {
+          const response = await apiClient.get(`/table-management/tables/${field.referenceTable}/columns`);
+          if (response.data?.success && response.data?.data?.columns) {
+            const cols = response.data.data.columns.map((c: any) => ({
+              name: c.columnName || c.column_name,
+              label: c.displayName || c.columnLabel || c.column_label || c.columnName || c.column_name,
+            }));
+            setRefTableColumns((prev) => ({
+              ...prev,
+              [field.referenceTable]: cols,
+            }));
+          }
+        } catch (error) {
+          console.error("참조 테이블 컬럼 로드 실패:", field.referenceTable, error);
+        }
+      }
+    };
+
+    if (entityFields.length > 0) {
+      loadRefTableColumns();
+    }
+  }, [masterDetailConfig.masterSelectFields, refTableColumns]);
+
+  // column_labels에서 FK 관계 자동 감지
+  useEffect(() => {
+    if (!masterTable || !detailTable) {
+      setRelationInfo(null);
+      return;
+    }
+
+    const loadRelationInfo = async () => {
+      setLoading(true);
+      try {
+        const { apiClient } = await import("@/lib/api/client");
+        // 디테일 테이블의 컬럼 정보 조회 (referenceTable, referenceColumn 포함)
+        const response = await apiClient.get(`/table-management/tables/${detailTable}/columns`);
+
+        if (response.data?.success && response.data?.data?.columns) {
+          const columns = response.data.data.columns;
+          // referenceTable이 마스터 테이블인 컬럼 찾기
+          const fkColumn = columns.find((col: any) => col.referenceTable === masterTable);
+
+          if (fkColumn) {
+            const detailFk = fkColumn.columnName || fkColumn.column_name;
+            const masterKey = fkColumn.referenceColumn || fkColumn.reference_column;
+
+            setRelationInfo({
+              masterTable,
+              detailTable,
+              masterKeyColumn: masterKey,
+              detailFkColumn: detailFk,
+            });
+
+            // 설정에 자동으로 저장
+            onUpdateProperty("componentConfig.action.masterDetailExcel", {
+              ...masterDetailConfig,
+              masterTable,
+              detailTable,
+              masterKeyColumn: masterKey,
+              detailFkColumn: detailFk,
+            });
+          } else {
+            setRelationInfo(null);
+          }
+        }
+      } catch (error) {
+        console.error("FK 관계 로드 실패:", error);
+        setRelationInfo(null);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    loadRelationInfo();
+  }, [masterTable, detailTable]);
+
+  const updateMasterDetailConfig = (updates: Record<string, any>) => {
+    onUpdateProperty("componentConfig.action.masterDetailExcel", {
+      ...masterDetailConfig,
+      ...updates,
+    });
+  };
+
+  // 분할 패널이 없으면 표시하지 않음
+  if (!splitPanelInfo) {
+    return (
+      <div className="space-y-2 border-t pt-4">
+        <p className="text-muted-foreground text-xs">
+          이 화면에 분할 패널이 없습니다. 마스터-디테일 업로드는 분할 패널 화면에서만 사용할 수 있습니다.
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-4 border-t pt-4">
+      <h5 className="text-muted-foreground text-xs font-medium">마스터-디테일 설정 (자동 감지)</h5>
+
+      {/* 자동 감지된 정보 표시 */}
+      <div className="rounded-md bg-gray-50 p-3 dark:bg-gray-900">
+        <p className="mb-2 text-xs font-medium">분할 패널에서 감지된 정보:</p>
+        <div className="grid grid-cols-2 gap-2 text-xs">
+          <div>
+            <span className="text-muted-foreground">마스터:</span>{" "}
+            <span className="font-medium">{masterTable || "-"}</span>
+          </div>
+          <div>
+            <span className="text-muted-foreground">디테일:</span>{" "}
+            <span className="font-medium">{detailTable || "-"}</span>
+          </div>
+        </div>
+
+        {loading ? (
+          <p className="text-muted-foreground mt-2 text-xs">FK 관계 조회 중...</p>
+        ) : relationInfo ? (
+          <div className="mt-2 grid grid-cols-2 gap-2 text-xs">
+            <div>
+              <span className="text-muted-foreground">마스터 키:</span>{" "}
+              <span className="font-medium text-green-600">{relationInfo.masterKeyColumn}</span>
+            </div>
+            <div>
+              <span className="text-muted-foreground">디테일 FK:</span>{" "}
+              <span className="font-medium text-green-600">{relationInfo.detailFkColumn}</span>
+            </div>
+          </div>
+        ) : (
+          <p className="mt-2 text-xs text-amber-600">
+            FK 관계를 찾을 수 없습니다. 테이블 타입관리에서 reference_table을 설정해주세요.
+          </p>
+        )}
+      </div>
+
+      {/* 마스터 키 자동 생성 안내 */}
+      {relationInfo && (
+        <p className="text-muted-foreground border-t pt-2 text-xs">
+          마스터 테이블의 <strong>{relationInfo.masterKeyColumn}</strong> 값은 위에서 설정한 채번 규칙으로 자동
+          생성됩니다.
+        </p>
+      )}
+
+      {/* 마스터 필드 선택 - 사용자가 엑셀 업로드 시 입력할 필드 */}
+      {relationInfo && masterColumns.length > 0 && (
+        <div>
+          <Label className="text-xs">사용자 입력 필드 (마스터)</Label>
+          <p className="text-muted-foreground mb-2 text-xs">
+            엑셀 업로드 시 사용자가 직접 선택/입력할 마스터 테이블 필드를 선택하세요.
+          </p>
+          <div className="max-h-40 space-y-1 overflow-y-auto rounded-md border p-2">
+            {masterColumns
+              .filter((col) => col.columnName !== relationInfo.masterKeyColumn) // 채번으로 자동 생성되는 키는 제외
+              .map((col) => {
+                const selectedFields = masterDetailConfig.masterSelectFields || [];
+                const isSelected = selectedFields.some((f: any) => f.columnName === col.columnName);
+                return (
+                  <div key={col.columnName} className="flex items-center gap-2">
+                    <input
+                      type="checkbox"
+                      id={`master-field-${col.columnName}`}
+                      checked={isSelected}
+                      onChange={(e) => {
+                        const checked = e.target.checked;
+                        let newFields = [...selectedFields];
+                        if (checked) {
+                          newFields.push({
+                            columnName: col.columnName,
+                            columnLabel: col.columnLabel,
+                            inputType: col.inputType,
+                            referenceTable: col.referenceTable,
+                            referenceColumn: col.referenceColumn,
+                            displayColumn: col.displayColumn,
+                            required: true,
+                          });
+                        } else {
+                          newFields = newFields.filter((f: any) => f.columnName !== col.columnName);
+                        }
+                        updateMasterDetailConfig({ masterSelectFields: newFields });
+                      }}
+                      className="h-4 w-4 rounded border-gray-300"
+                    />
+                    <label htmlFor={`master-field-${col.columnName}`} className="flex-1 cursor-pointer text-xs">
+                      {col.columnLabel}
+                      <span className="text-muted-foreground ml-1">({col.columnName})</span>
+                      {col.inputType === "entity" && <span className="ml-1 text-blue-500">[엔티티]</span>}
+                    </label>
+                  </div>
+                );
+              })}
+          </div>
+          {(masterDetailConfig.masterSelectFields?.length || 0) > 0 && (
+            <p className="text-muted-foreground mt-1 text-xs">
+              선택된 필드: {masterDetailConfig.masterSelectFields.length}개
+            </p>
+          )}
+
+          {/* 엔티티 필드의 표시컬럼 설정 */}
+          {masterDetailConfig.masterSelectFields?.filter((f: any) => f.inputType === "entity").length > 0 && (
+            <div className="mt-3 space-y-2 border-t pt-3">
+              <Label className="text-xs">엔티티 필드 표시컬럼 설정</Label>
+              {masterDetailConfig.masterSelectFields
+                .filter((f: any) => f.inputType === "entity")
+                .map((field: any) => {
+                  const availableColumns = refTableColumns[field.referenceTable] || [];
+                  return (
+                    <div key={`display-${field.columnName}`} className="flex items-center gap-2">
+                      <span className="w-24 truncate text-xs">{field.columnLabel}:</span>
+                      <Select
+                        value={field.displayColumn || ""}
+                        onValueChange={(value) => {
+                          const newFields = masterDetailConfig.masterSelectFields.map((f: any) =>
+                            f.columnName === field.columnName ? { ...f, displayColumn: value } : f,
+                          );
+                          updateMasterDetailConfig({ masterSelectFields: newFields });
+                        }}
+                      >
+                        <SelectTrigger className="h-7 flex-1 text-xs">
+                          <SelectValue placeholder="표시컬럼 선택" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {availableColumns.length === 0 ? (
+                            <SelectItem value="__loading__" disabled>
+                              {field.referenceTable ? "로딩 중..." : "참조 테이블 없음"}
+                            </SelectItem>
+                          ) : (
+                            availableColumns.map((col) => (
+                              <SelectItem key={col.name} value={col.name} className="text-xs">
+                                {col.label}
+                              </SelectItem>
+                            ))
+                          )}
+                        </SelectContent>
+                      </Select>
+                    </div>
+                  );
+                })}
+              <p className="text-muted-foreground text-xs">참조 테이블에서 사용자에게 표시할 컬럼을 선택하세요.</p>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+/**
+ * 엑셀 업로드 채번 규칙 설정 (단일 테이블/마스터-디테일 모두 사용 가능)
+ */
+const ExcelNumberingRuleConfig: React.FC<{
+  config: { numberingRuleId?: string; numberingTargetColumn?: string };
+  updateConfig: (updates: { numberingRuleId?: string; numberingTargetColumn?: string }) => void;
+  tableName?: string; // 단일 테이블인 경우 테이블명
+  hasSplitPanel?: boolean; // 분할 패널 여부 (마스터-디테일)
+}> = ({ config, updateConfig, tableName, hasSplitPanel }) => {
+  const [numberingRules, setNumberingRules] = useState<any[]>([]);
+  const [ruleSelectOpen, setRuleSelectOpen] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [tableColumns, setTableColumns] = useState<Array<{ columnName: string; columnLabel: string }>>([]);
+  const [columnsLoading, setColumnsLoading] = useState(false);
+
+  // 채번 규칙 목록 로드
+  useEffect(() => {
+    const loadNumberingRules = async () => {
+      setIsLoading(true);
+      try {
+        const { apiClient } = await import("@/lib/api/client");
+        const response = await apiClient.get("/numbering-rules");
+        if (response.data?.success && response.data?.data) {
+          setNumberingRules(response.data.data);
+        }
+      } catch (error) {
+        console.error("채번 규칙 목록 로드 실패:", error);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    loadNumberingRules();
+  }, []);
+
+  // 단일 테이블인 경우 컬럼 목록 로드
+  useEffect(() => {
+    if (!tableName || hasSplitPanel) {
+      setTableColumns([]);
+      return;
+    }
+
+    const loadColumns = async () => {
+      setColumnsLoading(true);
+      try {
+        const { apiClient } = await import("@/lib/api/client");
+        const response = await apiClient.get(`/table-management/tables/${tableName}/columns`);
+        if (response.data?.success && response.data?.data?.columns) {
+          const cols = response.data.data.columns.map((col: any) => ({
+            columnName: col.columnName || col.column_name,
+            columnLabel: col.displayName || col.columnLabel || col.column_label || col.columnName || col.column_name,
+          }));
+          setTableColumns(cols);
+        }
+      } catch (error) {
+        console.error("컬럼 목록 로드 실패:", error);
+      } finally {
+        setColumnsLoading(false);
+      }
+    };
+
+    loadColumns();
+  }, [tableName, hasSplitPanel]);
+
+  const selectedRule = numberingRules.find((r) => String(r.rule_id || r.ruleId) === String(config.numberingRuleId));
+
+  return (
+    <div className="border-t pt-3">
+      <Label className="text-xs">채번 규칙</Label>
+      <p className="text-muted-foreground mb-2 text-xs">
+        업로드 시 자동으로 생성할 코드/번호의 채번 규칙을 선택하세요.
+      </p>
+
+      <Popover open={ruleSelectOpen} onOpenChange={setRuleSelectOpen}>
+        <PopoverTrigger asChild>
+          <Button
+            variant="outline"
+            role="combobox"
+            aria-expanded={ruleSelectOpen}
+            className="h-8 w-full justify-between text-xs"
+            disabled={isLoading}
+          >
+            {isLoading ? "로딩 중..." : selectedRule?.rule_name || selectedRule?.ruleName || "채번 없음"}
+            <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-[300px] p-0" align="start">
+          <Command>
+            <CommandInput placeholder="채번 규칙 검색..." className="text-xs" />
+            <CommandList>
+              <CommandEmpty className="py-2 text-center text-xs">검색 결과 없음</CommandEmpty>
+              <CommandGroup>
+                <CommandItem
+                  value="__none__"
+                  onSelect={() => {
+                    updateConfig({ numberingRuleId: undefined, numberingTargetColumn: undefined });
+                    setRuleSelectOpen(false);
+                  }}
+                  className="text-xs"
+                >
+                  <Check className={cn("mr-2 h-4 w-4", !config.numberingRuleId ? "opacity-100" : "opacity-0")} />
+                  채번 없음
+                </CommandItem>
+                {numberingRules.map((rule, idx) => {
+                  const ruleId = String(rule.rule_id || rule.ruleId || `rule-${idx}`);
+                  const ruleName = rule.rule_name || rule.ruleName || "(이름 없음)";
+                  return (
+                    <CommandItem
+                      key={ruleId}
+                      value={ruleName}
+                      onSelect={() => {
+                        updateConfig({ numberingRuleId: ruleId });
+                        setRuleSelectOpen(false);
+                      }}
+                      className="text-xs"
+                    >
+                      <Check
+                        className={cn(
+                          "mr-2 h-4 w-4",
+                          String(config.numberingRuleId) === ruleId ? "opacity-100" : "opacity-0",
+                        )}
+                      />
+                      {ruleName}
+                    </CommandItem>
+                  );
+                })}
+              </CommandGroup>
+            </CommandList>
+          </Command>
+        </PopoverContent>
+      </Popover>
+
+      {/* 단일 테이블이고 채번 규칙이 선택된 경우, 적용할 컬럼 선택 */}
+      {config.numberingRuleId && !hasSplitPanel && tableName && (
+        <div className="mt-2">
+          <Label className="text-xs">채번 적용 컬럼</Label>
+          <Select
+            value={config.numberingTargetColumn || ""}
+            onValueChange={(value) => updateConfig({ numberingTargetColumn: value || undefined })}
+            disabled={columnsLoading}
+          >
+            <SelectTrigger className="h-8 text-xs">
+              <SelectValue placeholder={columnsLoading ? "로딩 중..." : "컬럼 선택"} />
+            </SelectTrigger>
+            <SelectContent>
+              {tableColumns.map((col) => (
+                <SelectItem key={col.columnName} value={col.columnName}>
+                  {col.columnLabel} ({col.columnName})
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+          <p className="text-muted-foreground mt-1 text-xs">채번 값이 입력될 컬럼을 선택하세요.</p>
+        </div>
+      )}
+
+      {/* 분할 패널인 경우 안내 메시지 */}
+      {config.numberingRuleId && hasSplitPanel && (
+        <p className="text-muted-foreground mt-1 text-xs">마스터-디테일 구조에서는 마스터 키 컬럼에 자동 적용됩니다.</p>
+      )}
+    </div>
+  );
+};
+
+/**
+ * 엑셀 업로드 후 제어 실행 설정 (단일 테이블/마스터-디테일 모두 사용 가능)
+ */
+const ExcelAfterUploadControlConfig: React.FC<{
+  config: { afterUploadFlows?: Array<{ flowId: string; order: number }> };
+  updateConfig: (updates: { afterUploadFlows?: Array<{ flowId: string; order: number }> }) => void;
+}> = ({ config, updateConfig }) => {
+  const [nodeFlows, setNodeFlows] = useState<Array<{ flowId: number; flowName: string; flowDescription?: string }>>([]);
+  const [flowSelectOpen, setFlowSelectOpen] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const selectedFlows = config.afterUploadFlows || [];
+
+  // 노드 플로우 목록 로드
+  useEffect(() => {
+    const loadNodeFlows = async () => {
+      setIsLoading(true);
+      try {
+        const { apiClient } = await import("@/lib/api/client");
+        const response = await apiClient.get("/dataflow/node-flows");
+        if (response.data?.success && response.data?.data) {
+          setNodeFlows(response.data.data);
+        }
+      } catch (error) {
+        console.error("노드 플로우 목록 로드 실패:", error);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    loadNodeFlows();
+  }, []);
+
+  const addFlow = (flowId: string) => {
+    if (selectedFlows.some((f) => f.flowId === flowId)) return;
+    const newFlows = [...selectedFlows, { flowId, order: selectedFlows.length + 1 }];
+    updateConfig({ afterUploadFlows: newFlows });
+    setFlowSelectOpen(false);
+  };
+
+  const removeFlow = (flowId: string) => {
+    const newFlows = selectedFlows.filter((f) => f.flowId !== flowId).map((f, idx) => ({ ...f, order: idx + 1 }));
+    updateConfig({ afterUploadFlows: newFlows });
+  };
+
+  const moveUp = (index: number) => {
+    if (index === 0) return;
+    const newFlows = [...selectedFlows];
+    [newFlows[index - 1], newFlows[index]] = [newFlows[index], newFlows[index - 1]];
+    updateConfig({ afterUploadFlows: newFlows.map((f, idx) => ({ ...f, order: idx + 1 })) });
+  };
+
+  const moveDown = (index: number) => {
+    if (index === selectedFlows.length - 1) return;
+    const newFlows = [...selectedFlows];
+    [newFlows[index], newFlows[index + 1]] = [newFlows[index + 1], newFlows[index]];
+    updateConfig({ afterUploadFlows: newFlows.map((f, idx) => ({ ...f, order: idx + 1 })) });
+  };
+
+  const availableFlows = nodeFlows.filter((f) => !selectedFlows.some((s) => s.flowId === String(f.flowId)));
+
+  return (
+    <div className="border-t pt-3">
+      <Label className="text-xs">업로드 후 제어 실행</Label>
+      <p className="text-muted-foreground mb-2 text-xs">엑셀 업로드 완료 후 순서대로 실행할 제어를 추가하세요.</p>
+
+      {selectedFlows.length > 0 && (
+        <div className="mb-2 space-y-1">
+          {selectedFlows.map((selected, index) => {
+            const flow = nodeFlows.find((f) => String(f.flowId) === selected.flowId);
+            return (
+              <div key={selected.flowId} className="flex items-center gap-1 rounded border bg-white p-1.5">
+                <span className="text-muted-foreground w-5 text-center text-xs">{index + 1}</span>
+                <span className="flex-1 truncate text-xs">{flow?.flowName || `Flow ${selected.flowId}`}</span>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="h-5 w-5 p-0"
+                  onClick={() => moveUp(index)}
+                  disabled={index === 0}
+                >
+                  <ChevronUp className="h-3 w-3" />
+                </Button>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="h-5 w-5 p-0"
+                  onClick={() => moveDown(index)}
+                  disabled={index === selectedFlows.length - 1}
+                >
+                  <ChevronDown className="h-3 w-3" />
+                </Button>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="h-5 w-5 p-0 text-red-500"
+                  onClick={() => removeFlow(selected.flowId)}
+                >
+                  <X className="h-3 w-3" />
+                </Button>
+              </div>
+            );
+          })}
+        </div>
+      )}
+
+      <Popover open={flowSelectOpen} onOpenChange={setFlowSelectOpen}>
+        <PopoverTrigger asChild>
+          <Button
+            variant="outline"
+            className="h-8 w-full justify-between text-xs"
+            disabled={isLoading || availableFlows.length === 0}
+          >
+            {isLoading ? "로딩 중..." : availableFlows.length === 0 ? "추가 가능한 제어 없음" : "제어 추가..."}
+            <Plus className="ml-2 h-4 w-4" />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-[300px] p-0" align="start">
+          <Command>
+            <CommandInput placeholder="제어 검색..." className="text-xs" />
+            <CommandList>
+              <CommandEmpty className="py-2 text-center text-xs">검색 결과 없음</CommandEmpty>
+              <CommandGroup>
+                {availableFlows.map((flow) => (
+                  <CommandItem
+                    key={flow.flowId}
+                    value={flow.flowName}
+                    onSelect={() => addFlow(String(flow.flowId))}
+                    className="text-xs"
+                  >
+                    <div className="flex flex-col">
+                      <span>{flow.flowName}</span>
+                      {flow.flowDescription && (
+                        <span className="text-muted-foreground text-[10px]">{flow.flowDescription}</span>
+                      )}
+                    </div>
+                  </CommandItem>
+                ))}
+              </CommandGroup>
+            </CommandList>
+          </Command>
+        </PopoverContent>
+      </Popover>
+
+      {selectedFlows.length > 0 && (
+        <p className="text-muted-foreground mt-1 text-xs">
+          업로드 완료 후 위 순서대로 {selectedFlows.length}개의 제어가 실행됩니다.
+        </p>
+      )}
+    </div>
+  );
+};
+
+/**
+ * 엑셀 업로드 설정 섹션 컴포넌트
+ * 마스터-디테일 설정은 분할 패널 자동 감지
+ */
+const ExcelUploadConfigSection: React.FC<{
+  config: any;
+  onUpdateProperty: (path: string, value: any) => void;
+  allComponents: ComponentData[];
+  currentTableName?: string; // 현재 화면의 테이블명 (ButtonConfigPanel에서 전달)
+}> = ({ config, onUpdateProperty, allComponents, currentTableName: propTableName }) => {
+  // 엑셀 업로드 설정 상태 관리
+  const [excelUploadConfig, setExcelUploadConfig] = useState<{
+    numberingRuleId?: string;
+    numberingTargetColumn?: string;
+    afterUploadFlows?: Array<{ flowId: string; order: number }>;
+  }>({
+    numberingRuleId: config.action?.excelNumberingRuleId,
+    numberingTargetColumn: config.action?.excelNumberingTargetColumn,
+    afterUploadFlows: config.action?.excelAfterUploadFlows || [],
+  });
+
+  // 분할 패널 감지
+  const splitPanelInfo = useMemo(() => {
+    const findSplitPanel = (components: any[]): any => {
+      for (const comp of components) {
+        const compId = comp.componentId || comp.componentType;
+        if (compId === "split-panel-layout") {
+          return comp.componentConfig;
+        }
+        if (comp.children && comp.children.length > 0) {
+          const found = findSplitPanel(comp.children);
+          if (found) return found;
+        }
+      }
+      return null;
+    };
+    return findSplitPanel(allComponents as any[]);
+  }, [allComponents]);
+
+  const hasSplitPanel = !!splitPanelInfo;
+
+  // 단일 테이블 감지 (props 우선, 없으면 컴포넌트에서 탐색)
+  const singleTableName = useMemo(() => {
+    if (hasSplitPanel) return undefined;
+
+    // props로 전달된 테이블명 우선 사용
+    if (propTableName) return propTableName;
+
+    // 컴포넌트에서 테이블명 탐색
+    const findTableName = (components: any[]): string | undefined => {
+      for (const comp of components) {
+        const compId = comp.componentId || comp.componentType;
+        const compConfig = comp.componentConfig || comp.config || comp;
+
+        // 테이블 패널이나 데이터 테이블에서 테이블명 찾기
+        if (
+          compId === "table-panel" ||
+          compId === "data-table" ||
+          compId === "table-list" ||
+          compId === "simple-table"
+        ) {
+          const tableName = compConfig?.tableName || compConfig?.table;
+          if (tableName) return tableName;
+        }
+
+        // 폼 컴포넌트에서 테이블명 찾기
+        if (compId === "form-panel" || compId === "input-form" || compId === "form" || compId === "detail-form") {
+          const tableName = compConfig?.tableName || compConfig?.table;
+          if (tableName) return tableName;
+        }
+
+        // 범용적으로 tableName 속성이 있는 컴포넌트 찾기
+        if (compConfig?.tableName) {
+          return compConfig.tableName;
+        }
+
+        if (comp.children && comp.children.length > 0) {
+          const found = findTableName(comp.children);
+          if (found) return found;
+        }
+      }
+      return undefined;
+    };
+    return findTableName(allComponents as any[]);
+  }, [allComponents, hasSplitPanel, propTableName]);
+
+  // 디버깅: 감지된 테이블명 로그
+  useEffect(() => {
+    console.log(
+      "[ExcelUploadConfigSection] 분할 패널:",
+      hasSplitPanel,
+      "단일 테이블:",
+      singleTableName,
+      "(props:",
+      propTableName,
+      ")",
+    );
+  }, [hasSplitPanel, singleTableName, propTableName]);
+
+  // 설정 업데이트 함수
+  const updateExcelUploadConfig = (updates: Partial<typeof excelUploadConfig>) => {
+    const newConfig = { ...excelUploadConfig, ...updates };
+    setExcelUploadConfig(newConfig);
+
+    if (updates.numberingRuleId !== undefined) {
+      onUpdateProperty("componentConfig.action.excelNumberingRuleId", updates.numberingRuleId);
+    }
+    if (updates.numberingTargetColumn !== undefined) {
+      onUpdateProperty("componentConfig.action.excelNumberingTargetColumn", updates.numberingTargetColumn);
+    }
+    if (updates.afterUploadFlows !== undefined) {
+      onUpdateProperty("componentConfig.action.excelAfterUploadFlows", updates.afterUploadFlows);
+    }
+  };
+
+  // config 변경 시 로컬 상태 동기화
+  useEffect(() => {
+    setExcelUploadConfig({
+      numberingRuleId: config.action?.excelNumberingRuleId,
+      numberingTargetColumn: config.action?.excelNumberingTargetColumn,
+      afterUploadFlows: config.action?.excelAfterUploadFlows || [],
+    });
+  }, [
+    config.action?.excelNumberingRuleId,
+    config.action?.excelNumberingTargetColumn,
+    config.action?.excelAfterUploadFlows,
+  ]);
+
+  return (
+    <div className="bg-muted/50 mt-4 space-y-4 rounded-lg border p-4">
+      <h4 className="text-foreground text-sm font-medium">엑셀 업로드 설정</h4>
+
+      <div>
+        <Label htmlFor="excel-upload-mode">업로드 모드</Label>
+        <Select
+          value={config.action?.excelUploadMode || "insert"}
+          onValueChange={(value) => onUpdateProperty("componentConfig.action.excelUploadMode", value)}
+        >
+          <SelectTrigger className="h-8 text-xs">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="insert">신규 삽입 (INSERT)</SelectItem>
+            <SelectItem value="update">기존 수정 (UPDATE)</SelectItem>
+            <SelectItem value="upsert">삽입/수정 (UPSERT)</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+
+      {(config.action?.excelUploadMode === "update" || config.action?.excelUploadMode === "upsert") && (
+        <div>
+          <Label htmlFor="excel-key-column">
+            키 컬럼명 <span className="text-destructive">*</span>
+          </Label>
+          <Input
+            id="excel-key-column"
+            placeholder="예: id, code"
+            value={config.action?.excelKeyColumn || ""}
+            onChange={(e) => onUpdateProperty("componentConfig.action.excelKeyColumn", e.target.value)}
+            className="h-8 text-xs"
+          />
+          <p className="text-muted-foreground mt-1 text-xs">UPDATE/UPSERT 시 기준이 되는 컬럼명</p>
+        </div>
+      )}
+
+      {/* 채번 규칙 설정 (항상 표시) */}
+      <ExcelNumberingRuleConfig
+        config={excelUploadConfig}
+        updateConfig={updateExcelUploadConfig}
+        tableName={singleTableName}
+        hasSplitPanel={hasSplitPanel}
+      />
+
+      {/* 업로드 후 제어 실행 (항상 표시) */}
+      <ExcelAfterUploadControlConfig config={excelUploadConfig} updateConfig={updateExcelUploadConfig} />
+
+      {/* 마스터-디테일 설정 (분할 패널 자동 감지) */}
+      <MasterDetailExcelUploadConfig
+        config={config}
+        onUpdateProperty={onUpdateProperty}
+        allComponents={allComponents}
+      />
+    </div>
+  );
+};
diff --git a/frontend/components/screen/config-panels/DataFilterConfigPanel.tsx b/frontend/components/screen/config-panels/DataFilterConfigPanel.tsx
index 46b4d799..f3e65199 100644
--- a/frontend/components/screen/config-panels/DataFilterConfigPanel.tsx
+++ b/frontend/components/screen/config-panels/DataFilterConfigPanel.tsx
@@ -6,7 +6,8 @@ import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { Switch } from "@/components/ui/switch";
-import { Trash2, Plus } from "lucide-react";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
+import { Trash2, Plus, ChevronDown, ChevronRight } from "lucide-react";
 import { ColumnFilter, DataFilterConfig } from "@/types/screen-management";
 import { UnifiedColumnInfo } from "@/types/table-management";
 import { getCategoryValues } from "@/lib/api/tableCategoryValue";
@@ -19,6 +20,67 @@ interface DataFilterConfigPanelProps {
   menuObjid?: number; // 🆕 메뉴 OBJID (카테고리 값 조회 시 필요)
 }
 
+/**
+ * 접을 수 있는 필터 항목 컴포넌트
+ */
+interface FilterItemCollapsibleProps {
+  filter: ColumnFilter;
+  index: number;
+  filterSummary: string;
+  onRemove: () => void;
+  children: React.ReactNode;
+}
+
+const FilterItemCollapsible: React.FC<FilterItemCollapsibleProps> = ({
+  filter,
+  index,
+  filterSummary,
+  onRemove,
+  children,
+}) => {
+  const [isOpen, setIsOpen] = useState(!filter.columnName); // 설정 안 된 필터는 열린 상태로
+
+  return (
+    <Collapsible open={isOpen} onOpenChange={setIsOpen}>
+      <div className="rounded-lg border p-2">
+        <CollapsibleTrigger asChild>
+          <div className="hover:bg-muted/50 cursor-pointer rounded p-1">
+            {/* 상단: 필터 번호 + 삭제 버튼 */}
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-1">
+                {isOpen ? (
+                  <ChevronDown className="text-muted-foreground h-3 w-3 shrink-0" />
+                ) : (
+                  <ChevronRight className="text-muted-foreground h-3 w-3 shrink-0" />
+                )}
+                <span className="text-muted-foreground text-xs font-medium">필터 {index + 1}</span>
+              </div>
+              <Button
+                variant="ghost"
+                size="sm"
+                className="h-5 w-5 shrink-0 p-0"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onRemove();
+                }}
+              >
+                <Trash2 className="h-3 w-3" />
+              </Button>
+            </div>
+            {/* 하단: 필터 요약 (전체 너비 사용) */}
+            <div className="mt-1 pl-4">
+              <span className="text-xs font-medium text-blue-600" title={filterSummary}>
+                {filterSummary}
+              </span>
+            </div>
+          </div>
+        </CollapsibleTrigger>
+        <CollapsibleContent className="space-y-2 pt-2">{children}</CollapsibleContent>
+      </div>
+    </Collapsible>
+  );
+};
+
 /**
  * 데이터 필터 설정 패널
  * 테이블 리스트, 분할 패널, 플로우 위젯 등에서 사용
@@ -36,13 +98,13 @@ export function DataFilterConfigPanel({
     menuObjid,
     sampleColumns: columns.slice(0, 3),
   });
-  
+
   const [localConfig, setLocalConfig] = useState<DataFilterConfig>(
     config || {
       enabled: false,
       filters: [],
       matchType: "all",
-    }
+    },
   );
 
   // 카테고리 값 캐시 (컬럼명 -> 카테고리 값 목록)
@@ -52,7 +114,7 @@ export function DataFilterConfigPanel({
   useEffect(() => {
     if (config) {
       setLocalConfig(config);
-      
+
       // 🆕 기존 필터 중 카테고리 타입인 것들의 값을 로드
       config.filters?.forEach((filter) => {
         if (filter.valueType === "category" && filter.columnName) {
@@ -69,7 +131,7 @@ export function DataFilterConfigPanel({
       return; // 이미 로드되었거나 로딩 중이면 스킵
     }
 
-    setLoadingCategories(prev => ({ ...prev, [columnName]: true }));
+    setLoadingCategories((prev) => ({ ...prev, [columnName]: true }));
 
     try {
       console.log("🔍 카테고리 값 로드 시작:", {
@@ -82,7 +144,7 @@ export function DataFilterConfigPanel({
         tableName,
         columnName,
         false, // includeInactive
-        menuObjid // 🆕 메뉴 OBJID 전달
+        menuObjid, // 🆕 메뉴 OBJID 전달
       );
 
       console.log("📦 카테고리 값 로드 응답:", response);
@@ -92,16 +154,16 @@ export function DataFilterConfigPanel({
           value: item.valueCode,
           label: item.valueLabel,
         }));
-        
+
         console.log("✅ 카테고리 값 설정:", { columnName, valuesCount: values.length });
-        setCategoryValues(prev => ({ ...prev, [columnName]: values }));
+        setCategoryValues((prev) => ({ ...prev, [columnName]: values }));
       } else {
         console.warn("⚠️ 카테고리 값 로드 실패 또는 데이터 없음:", response);
       }
     } catch (error) {
       console.error(`❌ 카테고리 값 로드 실패 (${columnName}):`, error);
     } finally {
-      setLoadingCategories(prev => ({ ...prev, [columnName]: false }));
+      setLoadingCategories((prev) => ({ ...prev, [columnName]: false }));
     }
   };
 
@@ -145,9 +207,7 @@ export function DataFilterConfigPanel({
   const handleFilterChange = (filterId: string, field: keyof ColumnFilter, value: any) => {
     const newConfig = {
       ...localConfig,
-      filters: localConfig.filters.map((filter) =>
-        filter.id === filterId ? { ...filter, [field]: value } : filter
-      ),
+      filters: localConfig.filters.map((filter) => (filter.id === filterId ? { ...filter, [field]: value } : filter)),
     };
     setLocalConfig(newConfig);
     onConfigChange(newConfig);
@@ -178,7 +238,7 @@ export function DataFilterConfigPanel({
         <>
           {/* 테이블명 표시 */}
           {tableName && (
-            <div className="text-xs text-muted-foreground">
+            <div className="text-muted-foreground text-xs">
               테이블: <span className="font-medium">{tableName}</span>
             </div>
           )}
@@ -200,235 +260,127 @@ export function DataFilterConfigPanel({
           )}
 
           {/* 필터 목록 */}
-          <div className="space-y-3 max-h-[600px] overflow-y-auto pr-2">
-            {localConfig.filters.map((filter, index) => (
-              <div key={filter.id} className="rounded-lg border p-3 space-y-2">
-                <div className="flex items-center justify-between mb-2">
-                  <span className="text-xs font-medium text-muted-foreground">
-                    필터 {index + 1}
-                  </span>
-                  <Button
-                    variant="ghost"
-                    size="sm"
-                    className="h-6 w-6 p-0"
-                    onClick={() => handleRemoveFilter(filter.id)}
-                  >
-                    <Trash2 className="h-3 w-3" />
-                  </Button>
-                </div>
+          <div className="max-h-[600px] space-y-2 overflow-y-auto pr-2">
+            {localConfig.filters.map((filter, index) => {
+              // 연산자 표시 텍스트
+              const operatorLabels: Record<string, string> = {
+                equals: "=",
+                not_equals: "!=",
+                greater_than: ">",
+                less_than: "<",
+                greater_than_or_equal: ">=",
+                less_than_or_equal: "<=",
+                between: "BETWEEN",
+                in: "IN",
+                not_in: "NOT IN",
+                contains: "LIKE",
+                starts_with: "시작",
+                ends_with: "끝",
+                is_null: "IS NULL",
+                is_not_null: "IS NOT NULL",
+                date_range_contains: "기간 내",
+              };
 
-                {/* 컬럼 선택 (날짜 범위 포함이 아닐 때만 표시) */}
-                {filter.operator !== "date_range_contains" && (
-                  <div>
-                    <Label className="text-xs">컬럼</Label>
-                    <Select
-                      value={filter.columnName}
-                      onValueChange={(value) => {
-                        const column = columns.find((col) => col.columnName === value);
-                        
-                        console.log("🔍 컬럼 선택:", {
-                          columnName: value,
-                          input_type: column?.input_type,
-                          column,
-                        });
-                        
-                        // 컬럼 타입에 따라 valueType 자동 설정
-                        let valueType: "static" | "category" | "code" = "static";
-                        if (column?.input_type === "category") {
-                          valueType = "category";
-                          console.log("📦 카테고리 컬럼 감지, 값 로딩 시작:", value);
-                          loadCategoryValues(value); // 카테고리 값 로드
-                        } else if (column?.input_type === "code") {
-                          valueType = "code";
-                        }
-                        
-                        // 한 번에 모든 변경사항 적용
-                        const newConfig = {
-                          ...localConfig,
-                          filters: localConfig.filters.map((f) =>
-                            f.id === filter.id 
-                              ? { ...f, columnName: value, valueType, value: "" } 
-                              : f
-                          ),
-                        };
-                        
-                        console.log("✅ 필터 설정 업데이트:", {
-                          filterId: filter.id,
-                          columnName: value,
-                          valueType,
-                          newConfig,
-                        });
-                        
-                        setLocalConfig(newConfig);
-                        onConfigChange(newConfig);
-                      }}
-                    >
-                      <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm">
-                        <SelectValue placeholder="컬럼 선택" />
-                      </SelectTrigger>
-                      <SelectContent>
-                        {columns.map((col) => (
-                          <SelectItem key={col.columnName} value={col.columnName}>
-                            {col.columnLabel || col.columnName}
-                            {(col.input_type === "category" || col.input_type === "code") && (
-                              <span className="ml-2 text-xs text-muted-foreground">
-                                ({col.input_type})
-                              </span>
-                            )}
-                          </SelectItem>
-                        ))}
-                      </SelectContent>
-                    </Select>
-                  </div>
-                )}
+              // 컬럼 라벨 찾기
+              const columnLabel =
+                columns.find((c) => c.columnName === filter.columnName)?.columnLabel || filter.columnName;
 
-                {/* 연산자 선택 */}
-                <div>
-                  <Label className="text-xs">연산자</Label>
-                  <Select
-                    value={filter.operator}
-                    onValueChange={(value: any) => {
-                      // date_range_contains 선택 시 한 번에 모든 변경사항 적용
-                      if (value === "date_range_contains") {
-                        const newConfig = {
-                          ...localConfig,
-                          filters: localConfig.filters.map((f) =>
-                            f.id === filter.id
-                              ? { ...f, operator: value, valueType: "dynamic", value: "TODAY" }
-                              : f
-                          ),
-                        };
-                        setLocalConfig(newConfig);
-                        onConfigChange(newConfig);
-                      } else {
-                        handleFilterChange(filter.id, "operator", value);
-                      }
-                    }}
-                  >
-                    <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm">
-                      <SelectValue />
-                    </SelectTrigger>
-                    <SelectContent>
-                      <SelectItem value="equals">같음 (=)</SelectItem>
-                      <SelectItem value="not_equals">같지 않음 (≠)</SelectItem>
-                      <SelectItem value="greater_than">크다 (&gt;)</SelectItem>
-                      <SelectItem value="less_than">작다 (&lt;)</SelectItem>
-                      <SelectItem value="greater_than_or_equal">크거나 같다 (≥)</SelectItem>
-                      <SelectItem value="less_than_or_equal">작거나 같다 (≤)</SelectItem>
-                      <SelectItem value="between">사이 (BETWEEN)</SelectItem>
-                      <SelectItem value="in">포함됨 (IN)</SelectItem>
-                      <SelectItem value="not_in">포함되지 않음 (NOT IN)</SelectItem>
-                      <SelectItem value="contains">포함 (LIKE %value%)</SelectItem>
-                      <SelectItem value="starts_with">시작 (LIKE value%)</SelectItem>
-                      <SelectItem value="ends_with">끝 (LIKE %value)</SelectItem>
-                      <SelectItem value="is_null">NULL</SelectItem>
-                      <SelectItem value="is_not_null">NOT NULL</SelectItem>
-                      <SelectItem value="date_range_contains">날짜 범위 포함 (기간 내)</SelectItem>
-                    </SelectContent>
-                  </Select>
-                </div>
+              // 필터 요약 텍스트 생성
+              const filterSummary = filter.columnName
+                ? `${columnLabel} ${operatorLabels[filter.operator] || filter.operator}${
+                    filter.operator !== "is_null" && filter.operator !== "is_not_null" && filter.value
+                      ? ` ${filter.value}`
+                      : ""
+                  }`
+                : "설정 필요";
 
-                {/* 날짜 범위 포함 - 시작일/종료일 컬럼 선택 */}
-                {filter.operator === "date_range_contains" && (
-                  <>
-                    <div className="col-span-2">
-                      <p className="text-xs text-muted-foreground bg-muted/50 p-2 rounded">
-                        💡 날짜 범위 필터링 규칙:
-                        <br />• 시작일만 있고 종료일이 NULL → 시작일 이후 모든 데이터
-                        <br />• 종료일만 있고 시작일이 NULL → 종료일 이전 모든 데이터
-                        <br />• 둘 다 있으면 → 기간 내 데이터만
-                      </p>
-                    </div>
+              return (
+                <FilterItemCollapsible
+                  key={filter.id}
+                  filter={filter}
+                  index={index}
+                  filterSummary={filterSummary}
+                  onRemove={() => handleRemoveFilter(filter.id)}
+                >
+                  {/* 컬럼 선택 (날짜 범위 포함이 아닐 때만 표시) */}
+                  {filter.operator !== "date_range_contains" && (
                     <div>
-                      <Label className="text-xs">시작일 컬럼</Label>
+                      <Label className="text-xs">컬럼</Label>
                       <Select
-                        value={filter.rangeConfig?.startColumn || ""}
+                        value={filter.columnName}
                         onValueChange={(value) => {
-                          const newRangeConfig = {
-                            ...filter.rangeConfig,
-                            startColumn: value,
-                            endColumn: filter.rangeConfig?.endColumn || "",
-                          };
-                          handleFilterChange(filter.id, "rangeConfig", newRangeConfig);
-                        }}
-                      >
-                        <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm">
-                          <SelectValue placeholder="시작일 컬럼 선택" />
-                        </SelectTrigger>
-                        <SelectContent>
-                          {columns.filter(col => 
-                            col.dataType?.toLowerCase().includes('date') || 
-                            col.dataType?.toLowerCase().includes('time')
-                          ).map((col) => (
-                            <SelectItem key={col.columnName} value={col.columnName}>
-                              {col.columnLabel || col.columnName}
-                            </SelectItem>
-                          ))}
-                        </SelectContent>
-                      </Select>
-                    </div>
-                    <div>
-                      <Label className="text-xs">종료일 컬럼</Label>
-                      <Select
-                        value={filter.rangeConfig?.endColumn || ""}
-                        onValueChange={(value) => {
-                          const newRangeConfig = {
-                            ...filter.rangeConfig,
-                            startColumn: filter.rangeConfig?.startColumn || "",
-                            endColumn: value,
-                          };
-                          handleFilterChange(filter.id, "rangeConfig", newRangeConfig);
-                        }}
-                      >
-                        <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm">
-                          <SelectValue placeholder="종료일 컬럼 선택" />
-                        </SelectTrigger>
-                        <SelectContent>
-                          {columns.filter(col => 
-                            col.dataType?.toLowerCase().includes('date') || 
-                            col.dataType?.toLowerCase().includes('time')
-                          ).map((col) => (
-                            <SelectItem key={col.columnName} value={col.columnName}>
-                              {col.columnLabel || col.columnName}
-                            </SelectItem>
-                          ))}
-                        </SelectContent>
-                      </Select>
-                    </div>
-                  </>
-                )}
+                          const column = columns.find((col) => col.columnName === value);
 
-                {/* 값 타입 선택 (카테고리/코드 컬럼 또는 date_range_contains) */}
-                {(isCategoryOrCodeColumn(filter.columnName) || filter.operator === "date_range_contains") && (
-                  <div>
-                    <Label className="text-xs">값 타입</Label>
-                    <Select
-                      value={filter.valueType}
-                      onValueChange={(value: any) => {
-                        // dynamic 선택 시 한 번에 valueType과 value를 설정
-                        if (value === "dynamic" && filter.operator === "date_range_contains") {
+                          console.log("🔍 컬럼 선택:", {
+                            columnName: value,
+                            input_type: column?.input_type,
+                            column,
+                          });
+
+                          // 컬럼 타입에 따라 valueType 자동 설정
+                          let valueType: "static" | "category" | "code" = "static";
+                          if (column?.input_type === "category") {
+                            valueType = "category";
+                            console.log("📦 카테고리 컬럼 감지, 값 로딩 시작:", value);
+                            loadCategoryValues(value); // 카테고리 값 로드
+                          } else if (column?.input_type === "code") {
+                            valueType = "code";
+                          }
+
+                          // 한 번에 모든 변경사항 적용
                           const newConfig = {
                             ...localConfig,
                             filters: localConfig.filters.map((f) =>
-                              f.id === filter.id
-                                ? { ...f, valueType: value, value: "TODAY" }
-                                : f
+                              f.id === filter.id ? { ...f, columnName: value, valueType, value: "" } : f,
+                            ),
+                          };
+
+                          console.log("✅ 필터 설정 업데이트:", {
+                            filterId: filter.id,
+                            columnName: value,
+                            valueType,
+                            newConfig,
+                          });
+
+                          setLocalConfig(newConfig);
+                          onConfigChange(newConfig);
+                        }}
+                      >
+                        <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm">
+                          <SelectValue placeholder="컬럼 선택" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {columns.map((col) => (
+                            <SelectItem key={col.columnName} value={col.columnName}>
+                              {col.columnLabel || col.columnName}
+                              {(col.input_type === "category" || col.input_type === "code") && (
+                                <span className="text-muted-foreground ml-2 text-xs">({col.input_type})</span>
+                              )}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    </div>
+                  )}
+
+                  {/* 연산자 선택 */}
+                  <div>
+                    <Label className="text-xs">연산자</Label>
+                    <Select
+                      value={filter.operator}
+                      onValueChange={(value: any) => {
+                        // date_range_contains 선택 시 한 번에 모든 변경사항 적용
+                        if (value === "date_range_contains") {
+                          const newConfig = {
+                            ...localConfig,
+                            filters: localConfig.filters.map((f) =>
+                              f.id === filter.id ? { ...f, operator: value, valueType: "dynamic", value: "TODAY" } : f,
                             ),
                           };
                           setLocalConfig(newConfig);
                           onConfigChange(newConfig);
                         } else {
-                          // static이나 다른 타입은 value를 빈 문자열로 초기화
-                          const newConfig = {
-                            ...localConfig,
-                            filters: localConfig.filters.map((f) =>
-                              f.id === filter.id
-                                ? { ...f, valueType: value, value: "" }
-                                : f
-                            ),
-                          };
-                          setLocalConfig(newConfig);
-                          onConfigChange(newConfig);
+                          handleFilterChange(filter.id, "operator", value);
                         }
                       }}
                     >
@@ -436,106 +388,240 @@ export function DataFilterConfigPanel({
                         <SelectValue />
                       </SelectTrigger>
                       <SelectContent>
-                        <SelectItem value="static">직접 입력</SelectItem>
-                        {filter.operator === "date_range_contains" && (
-                          <SelectItem value="dynamic">동적 값 (오늘 날짜)</SelectItem>
-                        )}
-                        {isCategoryOrCodeColumn(filter.columnName) && (
-                          <>
-                            <SelectItem value="category">카테고리 선택</SelectItem>
-                            <SelectItem value="code">코드 선택</SelectItem>
-                          </>
-                        )}
+                        <SelectItem value="equals">같음 (=)</SelectItem>
+                        <SelectItem value="not_equals">같지 않음 (≠)</SelectItem>
+                        <SelectItem value="greater_than">크다 (&gt;)</SelectItem>
+                        <SelectItem value="less_than">작다 (&lt;)</SelectItem>
+                        <SelectItem value="greater_than_or_equal">크거나 같다 (≥)</SelectItem>
+                        <SelectItem value="less_than_or_equal">작거나 같다 (≤)</SelectItem>
+                        <SelectItem value="between">사이 (BETWEEN)</SelectItem>
+                        <SelectItem value="in">포함됨 (IN)</SelectItem>
+                        <SelectItem value="not_in">포함되지 않음 (NOT IN)</SelectItem>
+                        <SelectItem value="contains">포함 (LIKE %value%)</SelectItem>
+                        <SelectItem value="starts_with">시작 (LIKE value%)</SelectItem>
+                        <SelectItem value="ends_with">끝 (LIKE %value)</SelectItem>
+                        <SelectItem value="is_null">NULL</SelectItem>
+                        <SelectItem value="is_not_null">NOT NULL</SelectItem>
+                        <SelectItem value="date_range_contains">날짜 범위 포함 (기간 내)</SelectItem>
                       </SelectContent>
                     </Select>
                   </div>
-                )}
 
-                {/* 값 입력 (NULL 체크 및 date_range_contains의 dynamic 제외) */}
-                {filter.operator !== "is_null" && 
-                 filter.operator !== "is_not_null" && 
-                 !(filter.operator === "date_range_contains" && filter.valueType === "dynamic") && (
-                  <div>
-                    <Label className="text-xs">값</Label>
-                    {/* 카테고리 타입이고 값 타입이 category인 경우 셀렉트박스 */}
-                    {filter.valueType === "category" && categoryValues[filter.columnName] ? (
+                  {/* 날짜 범위 포함 - 시작일/종료일 컬럼 선택 */}
+                  {filter.operator === "date_range_contains" && (
+                    <>
+                      <div className="col-span-2">
+                        <p className="text-muted-foreground bg-muted/50 rounded p-2 text-xs">
+                          💡 날짜 범위 필터링 규칙:
+                          <br />• 시작일만 있고 종료일이 NULL → 시작일 이후 모든 데이터
+                          <br />• 종료일만 있고 시작일이 NULL → 종료일 이전 모든 데이터
+                          <br />• 둘 다 있으면 → 기간 내 데이터만
+                        </p>
+                      </div>
+                      <div>
+                        <Label className="text-xs">시작일 컬럼</Label>
+                        <Select
+                          value={filter.rangeConfig?.startColumn || ""}
+                          onValueChange={(value) => {
+                            const newRangeConfig = {
+                              ...filter.rangeConfig,
+                              startColumn: value,
+                              endColumn: filter.rangeConfig?.endColumn || "",
+                            };
+                            handleFilterChange(filter.id, "rangeConfig", newRangeConfig);
+                          }}
+                        >
+                          <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm">
+                            <SelectValue placeholder="시작일 컬럼 선택" />
+                          </SelectTrigger>
+                          <SelectContent>
+                            {columns
+                              .filter(
+                                (col) =>
+                                  col.dataType?.toLowerCase().includes("date") ||
+                                  col.dataType?.toLowerCase().includes("time"),
+                              )
+                              .map((col) => (
+                                <SelectItem key={col.columnName} value={col.columnName}>
+                                  {col.columnLabel || col.columnName}
+                                </SelectItem>
+                              ))}
+                          </SelectContent>
+                        </Select>
+                      </div>
+                      <div>
+                        <Label className="text-xs">종료일 컬럼</Label>
+                        <Select
+                          value={filter.rangeConfig?.endColumn || ""}
+                          onValueChange={(value) => {
+                            const newRangeConfig = {
+                              ...filter.rangeConfig,
+                              startColumn: filter.rangeConfig?.startColumn || "",
+                              endColumn: value,
+                            };
+                            handleFilterChange(filter.id, "rangeConfig", newRangeConfig);
+                          }}
+                        >
+                          <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm">
+                            <SelectValue placeholder="종료일 컬럼 선택" />
+                          </SelectTrigger>
+                          <SelectContent>
+                            {columns
+                              .filter(
+                                (col) =>
+                                  col.dataType?.toLowerCase().includes("date") ||
+                                  col.dataType?.toLowerCase().includes("time"),
+                              )
+                              .map((col) => (
+                                <SelectItem key={col.columnName} value={col.columnName}>
+                                  {col.columnLabel || col.columnName}
+                                </SelectItem>
+                              ))}
+                          </SelectContent>
+                        </Select>
+                      </div>
+                    </>
+                  )}
+
+                  {/* 값 타입 선택 (카테고리/코드 컬럼 또는 date_range_contains) */}
+                  {(isCategoryOrCodeColumn(filter.columnName) || filter.operator === "date_range_contains") && (
+                    <div>
+                      <Label className="text-xs">값 타입</Label>
                       <Select
-                        value={Array.isArray(filter.value) ? filter.value[0] : filter.value}
-                        onValueChange={(value) => handleFilterChange(filter.id, "value", value)}
+                        value={filter.valueType}
+                        onValueChange={(value: any) => {
+                          // dynamic 선택 시 한 번에 valueType과 value를 설정
+                          if (value === "dynamic" && filter.operator === "date_range_contains") {
+                            const newConfig = {
+                              ...localConfig,
+                              filters: localConfig.filters.map((f) =>
+                                f.id === filter.id ? { ...f, valueType: value, value: "TODAY" } : f,
+                              ),
+                            };
+                            setLocalConfig(newConfig);
+                            onConfigChange(newConfig);
+                          } else {
+                            // static이나 다른 타입은 value를 빈 문자열로 초기화
+                            const newConfig = {
+                              ...localConfig,
+                              filters: localConfig.filters.map((f) =>
+                                f.id === filter.id ? { ...f, valueType: value, value: "" } : f,
+                              ),
+                            };
+                            setLocalConfig(newConfig);
+                            onConfigChange(newConfig);
+                          }
+                        }}
                       >
                         <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm">
-                          <SelectValue placeholder={
-                            loadingCategories[filter.columnName] ? "로딩 중..." : "값 선택"
-                          } />
+                          <SelectValue />
                         </SelectTrigger>
                         <SelectContent>
-                          {categoryValues[filter.columnName].map((option) => (
-                            <SelectItem key={option.value} value={option.value}>
-                              {option.label}
-                            </SelectItem>
-                          ))}
+                          <SelectItem value="static">직접 입력</SelectItem>
+                          {filter.operator === "date_range_contains" && (
+                            <SelectItem value="dynamic">동적 값 (오늘 날짜)</SelectItem>
+                          )}
+                          {isCategoryOrCodeColumn(filter.columnName) && (
+                            <>
+                              <SelectItem value="category">카테고리 선택</SelectItem>
+                              <SelectItem value="code">코드 선택</SelectItem>
+                            </>
+                          )}
                         </SelectContent>
                       </Select>
-                    ) : filter.operator === "in" || filter.operator === "not_in" ? (
-                      <Input
-                        value={Array.isArray(filter.value) ? filter.value.join(", ") : filter.value}
-                        onChange={(e) => {
-                          const values = e.target.value.split(",").map((v) => v.trim());
-                          handleFilterChange(filter.id, "value", values);
-                        }}
-                        placeholder="쉼표로 구분 (예: 값1, 값2, 값3)"
-                        className="h-8 text-xs sm:h-10 sm:text-sm"
-                      />
-                    ) : filter.operator === "between" ? (
-                      <Input
-                        value={Array.isArray(filter.value) ? filter.value.join(" ~ ") : filter.value}
-                        onChange={(e) => {
-                          const values = e.target.value.split("~").map((v) => v.trim());
-                          handleFilterChange(filter.id, "value", values.length === 2 ? values : [values[0] || "", ""]);
-                        }}
-                        placeholder="시작 ~ 종료 (예: 2025-01-01 ~ 2025-12-31)"
-                        className="h-8 text-xs sm:h-10 sm:text-sm"
-                      />
-                    ) : (
-                      <Input
-                        type={filter.operator === "date_range_contains" ? "date" : "text"}
-                        value={Array.isArray(filter.value) ? filter.value[0] || "" : filter.value}
-                        onChange={(e) => handleFilterChange(filter.id, "value", e.target.value)}
-                        placeholder={filter.operator === "date_range_contains" ? "비교할 날짜 선택" : "필터 값 입력"}
-                        className="h-8 text-xs sm:h-10 sm:text-sm"
-                      />
+                    </div>
+                  )}
+
+                  {/* 값 입력 (NULL 체크 및 date_range_contains의 dynamic 제외) */}
+                  {filter.operator !== "is_null" &&
+                    filter.operator !== "is_not_null" &&
+                    !(filter.operator === "date_range_contains" && filter.valueType === "dynamic") && (
+                      <div>
+                        <Label className="text-xs">값</Label>
+                        {/* 카테고리 타입이고 값 타입이 category인 경우 셀렉트박스 */}
+                        {filter.valueType === "category" && categoryValues[filter.columnName] ? (
+                          <Select
+                            value={Array.isArray(filter.value) ? filter.value[0] : filter.value}
+                            onValueChange={(value) => handleFilterChange(filter.id, "value", value)}
+                          >
+                            <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm">
+                              <SelectValue
+                                placeholder={loadingCategories[filter.columnName] ? "로딩 중..." : "값 선택"}
+                              />
+                            </SelectTrigger>
+                            <SelectContent>
+                              {categoryValues[filter.columnName].map((option) => (
+                                <SelectItem key={option.value} value={option.value}>
+                                  {option.label}
+                                </SelectItem>
+                              ))}
+                            </SelectContent>
+                          </Select>
+                        ) : filter.operator === "in" || filter.operator === "not_in" ? (
+                          <Input
+                            value={Array.isArray(filter.value) ? filter.value.join(", ") : filter.value}
+                            onChange={(e) => {
+                              const values = e.target.value.split(",").map((v) => v.trim());
+                              handleFilterChange(filter.id, "value", values);
+                            }}
+                            placeholder="쉼표로 구분 (예: 값1, 값2, 값3)"
+                            className="h-8 text-xs sm:h-10 sm:text-sm"
+                          />
+                        ) : filter.operator === "between" ? (
+                          <Input
+                            value={Array.isArray(filter.value) ? filter.value.join(" ~ ") : filter.value}
+                            onChange={(e) => {
+                              const values = e.target.value.split("~").map((v) => v.trim());
+                              handleFilterChange(
+                                filter.id,
+                                "value",
+                                values.length === 2 ? values : [values[0] || "", ""],
+                              );
+                            }}
+                            placeholder="시작 ~ 종료 (예: 2025-01-01 ~ 2025-12-31)"
+                            className="h-8 text-xs sm:h-10 sm:text-sm"
+                          />
+                        ) : (
+                          <Input
+                            type={filter.operator === "date_range_contains" ? "date" : "text"}
+                            value={Array.isArray(filter.value) ? filter.value[0] || "" : filter.value}
+                            onChange={(e) => handleFilterChange(filter.id, "value", e.target.value)}
+                            placeholder={
+                              filter.operator === "date_range_contains" ? "비교할 날짜 선택" : "필터 값 입력"
+                            }
+                            className="h-8 text-xs sm:h-10 sm:text-sm"
+                          />
+                        )}
+                        <p className="text-muted-foreground mt-1 text-[10px]">
+                          {filter.valueType === "category" && categoryValues[filter.columnName]
+                            ? "카테고리 값을 선택하세요"
+                            : filter.operator === "in" || filter.operator === "not_in"
+                              ? "여러 값은 쉼표(,)로 구분하세요"
+                              : filter.operator === "between"
+                                ? "시작과 종료 값을 ~로 구분하세요"
+                                : filter.operator === "date_range_contains"
+                                  ? "기간 내에 포함되는지 확인할 날짜를 선택하세요"
+                                  : "필터링할 값을 입력하세요"}
+                        </p>
+                      </div>
                     )}
-                    <p className="text-[10px] text-muted-foreground mt-1">
-                      {filter.valueType === "category" && categoryValues[filter.columnName]
-                        ? "카테고리 값을 선택하세요"
-                        : filter.operator === "in" || filter.operator === "not_in"
-                        ? "여러 값은 쉼표(,)로 구분하세요"
-                        : filter.operator === "between"
-                        ? "시작과 종료 값을 ~로 구분하세요"
-                        : filter.operator === "date_range_contains"
-                        ? "기간 내에 포함되는지 확인할 날짜를 선택하세요"
-                        : "필터링할 값을 입력하세요"}
-                    </p>
-                  </div>
-                )}
-                
-                {/* date_range_contains의 dynamic 타입 안내 */}
-                {filter.operator === "date_range_contains" && filter.valueType === "dynamic" && (
-                  <div className="rounded-md bg-blue-50 p-2">
-                    <p className="text-[10px] text-blue-700">
-                      ℹ️ 오늘 날짜를 기준으로 기간 내 데이터를 필터링합니다.
-                    </p>
-                  </div>
-                )}
-              </div>
-            ))}
+
+                  {/* date_range_contains의 dynamic 타입 안내 */}
+                  {filter.operator === "date_range_contains" && filter.valueType === "dynamic" && (
+                    <div className="rounded-md bg-blue-50 p-2">
+                      <p className="text-[10px] text-blue-700">오늘 날짜를 기준으로 기간 내 데이터를 필터링합니다.</p>
+                    </div>
+                  )}
+                </FilterItemCollapsible>
+              );
+            })}
           </div>
 
           {/* 필터 추가 버튼 */}
           <Button
             variant="outline"
             size="sm"
-            className="w-full h-8 text-xs sm:h-10 sm:text-sm"
+            className="h-8 w-full text-xs sm:h-10 sm:text-sm"
             onClick={handleAddFilter}
             disabled={columns.length === 0}
           >
@@ -544,13 +630,10 @@ export function DataFilterConfigPanel({
           </Button>
 
           {columns.length === 0 && (
-            <p className="text-xs text-muted-foreground text-center">
-              테이블을 먼저 선택해주세요
-            </p>
+            <p className="text-muted-foreground text-center text-xs">테이블을 먼저 선택해주세요</p>
           )}
         </>
       )}
     </div>
   );
 }
-
diff --git a/frontend/components/screen/modals/MultilangSettingsModal.tsx b/frontend/components/screen/modals/MultilangSettingsModal.tsx
new file mode 100644
index 00000000..f9f365dc
--- /dev/null
+++ b/frontend/components/screen/modals/MultilangSettingsModal.tsx
@@ -0,0 +1,1435 @@
+"use client";
+
+import React, { useState, useEffect, useMemo, useCallback, useRef } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Badge } from "@/components/ui/badge";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command";
+import {
+  ChevronRight,
+  ChevronDown,
+  Search,
+  Check,
+  X,
+  Languages,
+  Table2,
+  LayoutPanelLeft,
+  Type,
+  MousePointer,
+  Filter,
+  FormInput,
+  ChevronsUpDown,
+  Loader2,
+  Circle,
+  CircleDot,
+  CheckCircle2,
+} from "lucide-react";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Progress } from "@/components/ui/progress";
+import { ComponentData } from "@/types/screen";
+import { cn } from "@/lib/utils";
+import { apiClient } from "@/lib/api/client";
+
+// 다국어 키 타입
+interface LangKey {
+  keyId: number;
+  langKey: string;
+  description?: string;
+  categoryName?: string;
+}
+
+// 번역 텍스트 타입
+interface LangText {
+  langCode: string;
+  langName: string;
+  langNative: string;
+  text: string;
+}
+
+// 입력 가능한 폼 컴포넌트 타입 목록
+const INPUT_COMPONENT_TYPES = new Set([
+  "text-input",
+  "number-input",
+  "date-input",
+  "datetime-input",
+  "select-input",
+  "textarea-input",
+  "checkbox-input",
+  "radio-input",
+  "file-input",
+  "email-input",
+  "phone-input",
+  "entity-input",
+  "code-input",
+  // 위젯 타입도 포함
+  "widget",
+  "input",
+  "field",
+]);
+
+// 입력 가능한 웹타입 목록
+const INPUT_WEB_TYPES = new Set([
+  "text",
+  "number",
+  "decimal",
+  "date",
+  "datetime",
+  "select",
+  "dropdown",
+  "textarea",
+  "boolean",
+  "checkbox",
+  "radio",
+  "code",
+  "entity",
+  "file",
+  "email",
+  "tel",
+]);
+
+// 추출된 라벨 항목 타입
+interface ExtractedLabel {
+  id: string;
+  componentId: string;
+  label: string;
+  type: "label" | "title" | "button" | "placeholder" | "column" | "filter" | "field" | "tab" | "action";
+  parentType?: string;
+  parentLabel?: string;
+  langKeyId?: number;
+  langKey?: string;
+}
+
+// 번역 상태 타입
+type TranslationStatus = "complete" | "partial" | "none";
+
+// 번역 필터 타입
+type TranslationFilter = "all" | "complete" | "incomplete";
+
+// 그룹화된 라벨 타입
+interface LabelGroup {
+  id: string;
+  label: string;
+  type: string;
+  icon: React.ReactNode;
+  items: ExtractedLabel[];
+  isExpanded: boolean;
+}
+
+interface MultilangSettingsModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  components: ComponentData[];
+  onSave: (updates: Array<{ componentId: string; path?: string; langKeyId: number; langKey: string }>) => void;
+}
+
+// 타입별 아이콘 매핑
+const getTypeIcon = (type: string) => {
+  switch (type) {
+    case "button":
+      return <MousePointer className="h-4 w-4" />;
+    case "table-list":
+      return <Table2 className="h-4 w-4" />;
+    case "split-panel-layout":
+      return <LayoutPanelLeft className="h-4 w-4" />;
+    case "filter":
+      return <Filter className="h-4 w-4" />;
+    case "field":
+    case "input":
+      return <FormInput className="h-4 w-4" />;
+    default:
+      return <Type className="h-4 w-4" />;
+  }
+};
+
+// 타입별 한글 라벨
+const getTypeLabel = (type: string) => {
+  switch (type) {
+    case "button":
+      return "버튼";
+    case "label":
+      return "라벨";
+    case "title":
+      return "제목";
+    case "column":
+      return "컬럼";
+    case "filter":
+      return "필터";
+    case "field":
+      return "필드";
+    case "placeholder":
+      return "플레이스홀더";
+    case "tab":
+      return "탭";
+    case "action":
+      return "액션";
+    default:
+      return type;
+  }
+};
+
+// 라벨 다국어 처리가 필요 없는 컴포넌트 타입 (테이블, 분할패널 등)
+const NON_INPUT_COMPONENT_TYPES = new Set([
+  "table-list",
+  "split-panel-layout",
+  "tab-panel",
+  "container",
+  "group",
+  "layout",
+  "panel",
+  "card",
+  "accordion",
+  "modal",
+  "drawer",
+  "form-layout",
+]);
+
+// 컴포넌트가 입력 폼인지 확인
+const isInputComponent = (comp: any): boolean => {
+  const compType = comp.componentType || comp.type;
+  const webType = comp.webType || comp.componentConfig?.webType;
+
+  // 명시적으로 제외되는 컴포넌트 타입
+  if (NON_INPUT_COMPONENT_TYPES.has(compType)) {
+    return false;
+  }
+
+  // 컴포넌트 타입으로 확인
+  if (INPUT_COMPONENT_TYPES.has(compType)) {
+    return true;
+  }
+
+  // 웹타입으로 확인
+  if (webType && INPUT_WEB_TYPES.has(webType)) {
+    return true;
+  }
+
+  return false;
+};
+
+// 키 선택 콤보박스 컴포넌트
+interface KeySelectComboboxProps {
+  value?: { keyId: number; langKey: string };
+  onChange: (value: { keyId: number; langKey: string } | null) => void;
+  langKeys: LangKey[];
+  isLoading: boolean;
+}
+
+const KeySelectCombobox: React.FC<KeySelectComboboxProps> = ({
+  value,
+  onChange,
+  langKeys,
+  isLoading,
+}) => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          role="combobox"
+          aria-expanded={open}
+          className="h-7 w-[180px] justify-between text-xs"
+          disabled={isLoading}
+        >
+          {isLoading ? (
+            <Loader2 className="h-3 w-3 animate-spin" />
+          ) : value ? (
+            <span className="truncate">{value.langKey}</span>
+          ) : (
+            <span className="text-muted-foreground">키 선택...</span>
+          )}
+          <ChevronsUpDown className="ml-1 h-3 w-3 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-[300px] p-0" align="end">
+        <Command>
+          <CommandInput placeholder="키 검색..." className="h-9" />
+          <CommandList>
+            <CommandEmpty>검색 결과가 없습니다.</CommandEmpty>
+            <CommandGroup>
+              {/* 연결 해제 옵션 */}
+              {value && (
+                <CommandItem
+                  onSelect={() => {
+                    onChange(null);
+                    setOpen(false);
+                  }}
+                  className="text-red-600"
+                >
+                  <X className="mr-2 h-4 w-4" />
+                  연결 해제
+                </CommandItem>
+              )}
+              {langKeys.map((key) => (
+                <CommandItem
+                  key={key.keyId}
+                  value={key.langKey}
+                  onSelect={() => {
+                    onChange({ keyId: key.keyId, langKey: key.langKey });
+                    setOpen(false);
+                  }}
+                >
+                  <Check
+                    className={cn(
+                      "mr-2 h-4 w-4",
+                      value?.keyId === key.keyId ? "opacity-100" : "opacity-0"
+                    )}
+                  />
+                  <div className="flex flex-col">
+                    <span className="text-sm font-medium">{key.langKey}</span>
+                    {key.description && (
+                      <span className="text-xs text-muted-foreground">{key.description}</span>
+                    )}
+                  </div>
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+};
+
+export const MultilangSettingsModal: React.FC<MultilangSettingsModalProps> = ({
+  isOpen,
+  onClose,
+  components,
+  onSave,
+}) => {
+  const [searchText, setSearchText] = useState("");
+  const [expandedGroups, setExpandedGroups] = useState<Set<string>>(new Set());
+  const [selectedItems, setSelectedItems] = useState<Map<string, { langKeyId?: number; langKey?: string }>>(new Map());
+  const [extractedLabels, setExtractedLabels] = useState<ExtractedLabel[]>([]);
+  const [langKeys, setLangKeys] = useState<LangKey[]>([]);
+  const [isLoadingKeys, setIsLoadingKeys] = useState(false);
+  // 테이블별 컬럼 라벨 매핑 (columnName -> displayName)
+  const [columnLabelMap, setColumnLabelMap] = useState<Record<string, Record<string, string>>>({});
+  // 번역 필터 상태
+  const [translationFilter, setTranslationFilter] = useState<TranslationFilter>("all");
+  // 항목별 번역 상태 캐시 (itemId -> status)
+  const [translationStatusCache, setTranslationStatusCache] = useState<Record<string, TranslationStatus>>({});
+  // 선택된 라벨 항목
+  const [selectedLabelItem, setSelectedLabelItem] = useState<ExtractedLabel | null>(null);
+  // 선택된 라벨의 번역 텍스트 로드
+  const [isLoadingTranslations, setIsLoadingTranslations] = useState(false);
+  // 모든 항목의 편집된 번역을 저장하는 맵 (itemId -> langCode -> text)
+  const [allEditedTranslations, setAllEditedTranslations] = useState<Record<string, Record<string, string>>>({});
+  // 저장 중 상태
+  const [isSaving, setIsSaving] = useState(false);
+  // 활성화된 언어 목록
+  const [activeLanguages, setActiveLanguages] = useState<Array<{ langCode: string; langName: string; langNative: string }>>([]);
+
+  // 컴포넌트에서 사용되는 테이블명 추출
+  const getTableNamesFromComponents = useCallback((comps: ComponentData[]): Set<string> => {
+    const tableNames = new Set<string>();
+    
+    const extractTableName = (comp: any) => {
+      const config = comp.componentConfig;
+      
+      // 1. 최상위 tableName
+      if (comp.tableName) tableNames.add(comp.tableName);
+      
+      // 2. componentConfig 직접 tableName
+      if (config?.tableName) tableNames.add(config.tableName);
+      
+      // 3. 테이블 리스트 컴포넌트 - selectedTable (주요!)
+      if (config?.selectedTable) tableNames.add(config.selectedTable);
+      
+      // 4. 테이블 리스트 컴포넌트 - table 속성
+      if (config?.table) tableNames.add(config.table);
+      
+      // 5. 분할 패널의 leftPanel/rightPanel
+      if (config?.leftPanel?.tableName) tableNames.add(config.leftPanel.tableName);
+      if (config?.rightPanel?.tableName) tableNames.add(config.rightPanel.tableName);
+      if (config?.leftPanel?.table) tableNames.add(config.leftPanel.table);
+      if (config?.rightPanel?.table) tableNames.add(config.rightPanel.table);
+      if (config?.leftPanel?.selectedTable) tableNames.add(config.leftPanel.selectedTable);
+      if (config?.rightPanel?.selectedTable) tableNames.add(config.rightPanel.selectedTable);
+      
+      // 6. 검색 필터의 tableName
+      if (config?.filter?.tableName) tableNames.add(config.filter.tableName);
+      
+      // 7. properties 안의 tableName
+      if (comp.properties?.tableName) tableNames.add(comp.properties.tableName);
+      if (comp.properties?.selectedTable) tableNames.add(comp.properties.selectedTable);
+      
+      // 자식 컴포넌트 탐색
+      if (comp.children && Array.isArray(comp.children)) {
+        comp.children.forEach(extractTableName);
+      }
+    };
+    
+    comps.forEach(extractTableName);
+    return tableNames;
+  }, []);
+
+  // 이미 로드한 테이블 추적 (무한 루프 방지)
+  const loadedTablesRef = useRef<Set<string>>(new Set());
+
+  // 다국어 키 목록 로드 및 테이블별 컬럼 라벨 조회
+  useEffect(() => {
+    if (!isOpen) return;
+    
+    // 다국어 키 목록 로드
+    const fetchLangKeys = async () => {
+      setIsLoadingKeys(true);
+      try {
+        const response = await apiClient.get("/multilang/keys");
+        if (response.data?.success && response.data?.data) {
+          setLangKeys(response.data.data.map((k: any) => ({
+            keyId: k.keyId,
+            langKey: k.langKey,
+            description: k.description,
+            categoryName: k.categoryName,
+          })));
+        }
+      } catch (error) {
+        console.error("다국어 키 목록 로드 실패:", error);
+      } finally {
+        setIsLoadingKeys(false);
+      }
+    };
+    fetchLangKeys();
+    
+    // 테이블별 컬럼 라벨 조회
+    const tableNames = getTableNamesFromComponents(components);
+    
+    // 이미 로드한 테이블은 제외
+    const tablesToLoad = Array.from(tableNames).filter((t) => !loadedTablesRef.current.has(t));
+    
+    if (tablesToLoad.length > 0) {
+      const fetchColumnLabelsForTables = async () => {
+        const newLabelMap: Record<string, Record<string, string>> = {};
+        
+        for (const tableName of tablesToLoad) {
+          try {
+            const response = await apiClient.get(`/table-management/tables/${tableName}/columns`);
+            if (response.data?.success && response.data?.data) {
+              const columns = response.data.data.columns || response.data.data;
+              if (Array.isArray(columns)) {
+                newLabelMap[tableName] = {};
+                columns.forEach((col: any) => {
+                  const colName = col.columnName || col.column_name || col.name;
+                  const colLabel = col.displayName || col.columnLabel || col.column_label || colName;
+                  if (colName) {
+                    newLabelMap[tableName][colName] = colLabel;
+                  }
+                });
+                loadedTablesRef.current.add(tableName);
+              }
+            }
+          } catch (error) {
+            console.error(`컬럼 라벨 조회 실패 (${tableName}):`, error);
+          }
+        }
+        
+        if (Object.keys(newLabelMap).length > 0) {
+          setColumnLabelMap((prev) => ({ ...prev, ...newLabelMap }));
+        }
+      };
+      fetchColumnLabelsForTables();
+    }
+  }, [isOpen, components, getTableNamesFromComponents]);
+
+  // 컴포넌트에서 라벨 추출
+  const extractLabelsFromComponents = useCallback((comps: ComponentData[]): ExtractedLabel[] => {
+    const labels: ExtractedLabel[] = [];
+    const addedLabels = new Set<string>();
+
+    const addLabel = (
+      componentId: string,
+      label: string,
+      type: ExtractedLabel["type"],
+      parentType?: string,
+      parentLabel?: string,
+      langKeyId?: number,
+      langKey?: string
+    ) => {
+      const key = `${componentId}_${type}_${label}`;
+      if (label && label.trim() && !addedLabels.has(key)) {
+        addedLabels.add(key);
+        labels.push({
+          id: key,
+          componentId,
+          label: label.trim(),
+          type,
+          parentType,
+          parentLabel,
+          langKeyId,
+          langKey,
+        });
+      }
+    };
+
+    const extractFromComponent = (comp: ComponentData, parentType?: string, parentLabel?: string) => {
+      const anyComp = comp as any;
+      const config = anyComp.componentConfig;
+      const compType = anyComp.componentType || anyComp.type;
+      const compLabel = anyComp.label || anyComp.title || compType;
+
+      // 1. 기본 라벨 - 입력 폼 컴포넌트인 경우에만 추출
+      if (isInputComponent(anyComp)) {
+        if (anyComp.label && typeof anyComp.label === "string") {
+          addLabel(comp.id, anyComp.label, "label", parentType, parentLabel, anyComp.langKeyId, anyComp.langKey);
+        }
+      }
+
+      // 2. 제목
+      if (anyComp.title && typeof anyComp.title === "string") {
+        addLabel(comp.id, anyComp.title, "title", parentType, parentLabel);
+      }
+
+      // 3. 버튼 텍스트 (componentId에 _button 접미사 추가하여 라벨과 구분)
+      if (config?.text && typeof config.text === "string") {
+        addLabel(
+          `${comp.id}_button`,
+          config.text,
+          "button",
+          parentType,
+          parentLabel,
+          config.langKeyId,
+          config.langKey
+        );
+      }
+
+      // 4. placeholder
+      if (anyComp.placeholder && typeof anyComp.placeholder === "string") {
+        addLabel(comp.id, anyComp.placeholder, "placeholder", parentType, parentLabel);
+      }
+
+      // 5. 테이블 컬럼 - columnLabelMap에서 한글 라벨 조회
+      const tableName = config?.selectedTable || config?.tableName || config?.table || anyComp.tableName;
+      if (config?.columns && Array.isArray(config.columns)) {
+        config.columns.forEach((col: any, index: number) => {
+          const colName = col.columnName || col.field || col.name;
+          // columnLabelMap에서 한글 라벨 조회, 없으면 displayName 사용
+          let colLabel = columnLabelMap[tableName]?.[colName] || col.displayName || col.label || colName;
+          
+          if (colLabel && typeof colLabel === "string") {
+            addLabel(
+              `${comp.id}_col_${index}`,
+              colLabel,
+              "column",
+              compType,
+              compLabel,
+              col.langKeyId,
+              col.langKey
+            );
+          }
+        });
+      }
+
+      // 6. 분할 패널 제목 및 컬럼 - columnLabelMap에서 한글 라벨 조회
+      // 6-1. 좌측 패널 제목
+      if (config?.leftPanel?.title && typeof config.leftPanel.title === "string") {
+        addLabel(
+          `${comp.id}_left_title`,
+          config.leftPanel.title,
+          "title",
+          compType,
+          `${compLabel} (좌측)`,
+          config.leftPanel.langKeyId,
+          config.leftPanel.langKey
+        );
+      }
+      // 6-2. 우측 패널 제목
+      if (config?.rightPanel?.title && typeof config.rightPanel.title === "string") {
+        addLabel(
+          `${comp.id}_right_title`,
+          config.rightPanel.title,
+          "title",
+          compType,
+          `${compLabel} (우측)`,
+          config.rightPanel.langKeyId,
+          config.rightPanel.langKey
+        );
+      }
+      // 6-3. 좌측 패널 컬럼
+      const leftTableName = config?.leftPanel?.selectedTable || config?.leftPanel?.tableName || tableName;
+      if (config?.leftPanel?.columns && Array.isArray(config.leftPanel.columns)) {
+        config.leftPanel.columns.forEach((col: any, index: number) => {
+          const colName = col.columnName || col.field || col.name;
+          const colLabel = columnLabelMap[leftTableName]?.[colName] || col.displayName || col.label || colName;
+          if (colLabel && typeof colLabel === "string") {
+            addLabel(
+              `${comp.id}_left_col_${index}`,
+              colLabel,
+              "column",
+              compType,
+              `${compLabel} (좌측)`,
+              col.langKeyId,
+              col.langKey
+            );
+          }
+        });
+      }
+      const rightTableName = config?.rightPanel?.selectedTable || config?.rightPanel?.tableName || tableName;
+      if (config?.rightPanel?.columns && Array.isArray(config.rightPanel.columns)) {
+        config.rightPanel.columns.forEach((col: any, index: number) => {
+          const colName = col.columnName || col.field || col.name;
+          const colLabel = columnLabelMap[rightTableName]?.[colName] || col.displayName || col.label || colName;
+          if (colLabel && typeof colLabel === "string") {
+            addLabel(
+              `${comp.id}_right_col_${index}`,
+              colLabel,
+              "column",
+              compType,
+              `${compLabel} (우측)`,
+              col.langKeyId,
+              col.langKey
+            );
+          }
+        });
+      }
+
+      // 6-5. 추가 탭 (additionalTabs) 제목 및 컬럼 - rightPanel.additionalTabs 확인
+      const additionalTabs = config?.rightPanel?.additionalTabs || config?.additionalTabs;
+      if (additionalTabs && Array.isArray(additionalTabs)) {
+        additionalTabs.forEach((tab: any, tabIndex: number) => {
+          // 탭 라벨
+          if (tab.label && typeof tab.label === "string") {
+            addLabel(
+              `${comp.id}_addtab_${tabIndex}_label`,
+              tab.label,
+              "tab",
+              compType,
+              compLabel,
+              tab.langKeyId,
+              tab.langKey
+            );
+          }
+          // 탭 제목
+          if (tab.title && typeof tab.title === "string") {
+            addLabel(
+              `${comp.id}_addtab_${tabIndex}_title`,
+              tab.title,
+              "title",
+              compType,
+              `${compLabel} (탭: ${tab.label || tabIndex})`,
+              tab.titleLangKeyId,
+              tab.titleLangKey
+            );
+          }
+          // 탭 컬럼
+          const tabTableName = tab.tableName || tab.selectedTable || rightTableName;
+          if (tab.columns && Array.isArray(tab.columns)) {
+            tab.columns.forEach((col: any, colIndex: number) => {
+              const colName = col.columnName || col.field || col.name;
+              const colLabel = columnLabelMap[tabTableName]?.[colName] || col.displayName || col.label || colName;
+              if (colLabel && typeof colLabel === "string") {
+                addLabel(
+                  `${comp.id}_addtab_${tabIndex}_col_${colIndex}`,
+                  colLabel,
+                  "column",
+                  compType,
+                  `${compLabel} (탭: ${tab.label || tabIndex})`,
+                  col.langKeyId,
+                  col.langKey
+                );
+              }
+            });
+          }
+        });
+      }
+
+      // 7. 검색 필터
+      if (config?.filter?.filters && Array.isArray(config.filter.filters)) {
+        config.filter.filters.forEach((filter: any, index: number) => {
+          if (filter.label && typeof filter.label === "string") {
+            addLabel(
+              `${comp.id}_filter_${index}`,
+              filter.label,
+              "filter",
+              compType,
+              compLabel,
+              filter.langKeyId,
+              filter.langKey
+            );
+          }
+        });
+      }
+
+      // 8. 폼 필드
+      if (config?.fields && Array.isArray(config.fields)) {
+        config.fields.forEach((field: any, index: number) => {
+          if (field.label && typeof field.label === "string") {
+            addLabel(
+              `${comp.id}_field_${index}`,
+              field.label,
+              "field",
+              compType,
+              compLabel,
+              field.langKeyId,
+              field.langKey
+            );
+          }
+        });
+      }
+
+      // 9. 탭
+      if (config?.tabs && Array.isArray(config.tabs)) {
+        config.tabs.forEach((tab: any, index: number) => {
+          if (tab.label && typeof tab.label === "string") {
+            addLabel(
+              `${comp.id}_tab_${index}`,
+              tab.label,
+              "tab",
+              compType,
+              compLabel,
+              tab.langKeyId,
+              tab.langKey
+            );
+          }
+        });
+      }
+
+      // 10. 액션 버튼
+      if (config?.actions?.actions && Array.isArray(config.actions.actions)) {
+        config.actions.actions.forEach((action: any, index: number) => {
+          if (action.label && typeof action.label === "string") {
+            addLabel(
+              `${comp.id}_action_${index}`,
+              action.label,
+              "action",
+              compType,
+              compLabel,
+              action.langKeyId,
+              action.langKey
+            );
+          }
+        });
+      }
+
+      // 자식 컴포넌트 재귀 탐색
+      if (anyComp.children && Array.isArray(anyComp.children)) {
+        anyComp.children.forEach((child: ComponentData) => {
+          extractFromComponent(child, compType, compLabel);
+        });
+      }
+    };
+
+    comps.forEach((comp) => extractFromComponent(comp));
+    return labels;
+  }, [columnLabelMap]);
+
+  // 컴포넌트 변경 시 또는 columnLabelMap 로드 후 라벨 재추출
+  useEffect(() => {
+    if (isOpen && Object.keys(columnLabelMap).length > 0) {
+      const labels = extractLabelsFromComponents(components);
+      setExtractedLabels(labels);
+
+      // 기존 langKeyId가 있는 항목들 선택 상태로 초기화
+      const initialSelected = new Map<string, { langKeyId?: number; langKey?: string }>();
+      labels.forEach((label) => {
+        if (label.langKeyId) {
+          initialSelected.set(label.id, { langKeyId: label.langKeyId, langKey: label.langKey });
+        }
+      });
+      setSelectedItems(initialSelected);
+
+      // 기본적으로 모든 그룹 펼치기
+      const groupIds = new Set<string>();
+      labels.forEach((l) => groupIds.add(l.parentType || l.type));
+      setExpandedGroups(groupIds);
+    } else if (isOpen) {
+      // columnLabelMap 로드 전이라도 일단 컴포넌트 라벨은 표시
+      const labels = extractLabelsFromComponents(components);
+      setExtractedLabels(labels);
+      
+      const initialSelected = new Map<string, { langKeyId?: number; langKey?: string }>();
+      labels.forEach((label) => {
+        if (label.langKeyId) {
+          initialSelected.set(label.id, { langKeyId: label.langKeyId, langKey: label.langKey });
+        }
+      });
+      setSelectedItems(initialSelected);
+
+      const groupIds = new Set<string>();
+      labels.forEach((l) => groupIds.add(l.parentType || l.type));
+      setExpandedGroups(groupIds);
+    }
+  }, [isOpen, components, extractLabelsFromComponents, columnLabelMap]);
+
+  // 모달 열릴 때 연결된 키들의 번역 상태 일괄 조회
+  useEffect(() => {
+    const loadAllTranslationStatuses = async () => {
+      if (!isOpen || activeLanguages.length === 0 || extractedLabels.length === 0) return;
+
+      // 연결된 키가 있는 항목들만 필터링
+      const itemsWithKeys = extractedLabels.filter((label) => label.langKeyId);
+      if (itemsWithKeys.length === 0) return;
+
+      const newTranslations: Record<string, Record<string, string>> = {};
+      const newStatusCache: Record<string, TranslationStatus> = {};
+
+      // 각 키의 번역 상태 조회
+      await Promise.all(
+        itemsWithKeys.map(async (label) => {
+          try {
+            const response = await apiClient.get(`/multilang/keys/${label.langKeyId}/texts`);
+            if (response.data?.success && response.data?.data) {
+              const textsMap: Record<string, string> = {};
+              response.data.data.forEach((t: any) => {
+                textsMap[t.langCode || t.lang_code] = t.langText || t.lang_text || "";
+              });
+
+              // 모든 활성 언어에 대해 번역 텍스트 생성
+              const loadedTranslations = activeLanguages.reduce((acc, lang) => {
+                acc[lang.langCode] = textsMap[lang.langCode] || "";
+                return acc;
+              }, {} as Record<string, string>);
+
+              newTranslations[label.id] = loadedTranslations;
+
+              // 번역 상태 계산
+              const filledCount = activeLanguages.filter(
+                (lang) => loadedTranslations[lang.langCode] && loadedTranslations[lang.langCode].trim() !== ""
+              ).length;
+
+              if (filledCount === activeLanguages.length) {
+                newStatusCache[label.id] = "complete";
+              } else if (filledCount > 0) {
+                newStatusCache[label.id] = "partial";
+              } else {
+                newStatusCache[label.id] = "none";
+              }
+            }
+          } catch (error) {
+            console.error(`번역 상태 조회 실패 (keyId: ${label.langKeyId}):`, error);
+          }
+        })
+      );
+
+      // 상태 업데이트
+      if (Object.keys(newTranslations).length > 0) {
+        setAllEditedTranslations((prev) => ({ ...prev, ...newTranslations }));
+      }
+      if (Object.keys(newStatusCache).length > 0) {
+        setTranslationStatusCache((prev) => ({ ...prev, ...newStatusCache }));
+      }
+    };
+
+    loadAllTranslationStatuses();
+  }, [isOpen, activeLanguages, extractedLabels]);
+
+  // 번역 상태 계산 함수
+  const getTranslationStatus = useCallback(
+    (itemId: string): TranslationStatus => {
+      // 캐시에 있으면 반환
+      if (translationStatusCache[itemId]) {
+        return translationStatusCache[itemId];
+      }
+
+      const connectedKey = selectedItems.get(itemId);
+      if (!connectedKey?.langKeyId) {
+        return "none"; // 키 미연결
+      }
+
+      const translations = allEditedTranslations[itemId];
+      if (!translations) {
+        return "none"; // 번역 정보 없음
+      }
+
+      const filledCount = activeLanguages.filter(
+        (lang) => translations[lang.langCode] && translations[lang.langCode].trim() !== ""
+      ).length;
+
+      if (filledCount === 0) {
+        return "none";
+      } else if (filledCount === activeLanguages.length) {
+        return "complete";
+      } else {
+        return "partial";
+      }
+    },
+    [selectedItems, allEditedTranslations, activeLanguages, translationStatusCache]
+  );
+
+  // 번역 상태 아이콘 컴포넌트
+  const TranslationStatusIcon: React.FC<{ status: TranslationStatus }> = ({ status }) => {
+    switch (status) {
+      case "complete":
+        return <CheckCircle2 className="h-4 w-4 text-green-500" />;
+      case "partial":
+        return <CircleDot className="h-4 w-4 text-yellow-500" />;
+      case "none":
+      default:
+        return <Circle className="h-4 w-4 text-gray-300" />;
+    }
+  };
+
+  // 번역 상태별 통계 계산
+  const translationStats = useMemo(() => {
+    let complete = 0;
+    let partial = 0;
+    let none = 0;
+
+    extractedLabels.forEach((label) => {
+      const status = getTranslationStatus(label.id);
+      if (status === "complete") complete++;
+      else if (status === "partial") partial++;
+      else none++;
+    });
+
+    return { complete, partial, none, total: extractedLabels.length };
+  }, [extractedLabels, getTranslationStatus]);
+
+  // 진행률 계산 (완료 + 부분완료*0.5)
+  const progressPercentage = useMemo(() => {
+    if (translationStats.total === 0) return 0;
+    const score = translationStats.complete + translationStats.partial * 0.5;
+    return Math.round((score / translationStats.total) * 100);
+  }, [translationStats]);
+
+  // 라벨을 부모 타입별로 그룹화
+  const groupedLabels = useMemo(() => {
+    const groups: LabelGroup[] = [];
+    const groupMap = new Map<string, ExtractedLabel[]>();
+
+    extractedLabels.forEach((label) => {
+      const groupKey = label.parentType || label.type;
+      if (!groupMap.has(groupKey)) {
+        groupMap.set(groupKey, []);
+      }
+      groupMap.get(groupKey)!.push(label);
+    });
+
+    groupMap.forEach((items, key) => {
+      // 검색 필터링
+      let filteredItems = searchText
+        ? items.filter(
+            (item) =>
+              item.label.toLowerCase().includes(searchText.toLowerCase()) ||
+              item.langKey?.toLowerCase().includes(searchText.toLowerCase())
+          )
+        : items;
+
+      // 번역 상태 필터링
+      if (translationFilter !== "all") {
+        filteredItems = filteredItems.filter((item) => {
+          const status = getTranslationStatus(item.id);
+          if (translationFilter === "complete") {
+            return status === "complete";
+          } else if (translationFilter === "incomplete") {
+            return status === "partial" || status === "none";
+          }
+          return true;
+        });
+      }
+
+      if (filteredItems.length > 0) {
+        groups.push({
+          id: key,
+          label: items[0].parentLabel || getTypeLabel(key),
+          type: key,
+          icon: getTypeIcon(key),
+          items: filteredItems,
+          isExpanded: expandedGroups.has(key),
+        });
+      }
+    });
+
+    return groups;
+  }, [extractedLabels, searchText, expandedGroups, translationFilter, getTranslationStatus]);
+
+  // 그룹 펼침/접기 토글
+  const toggleGroup = (groupId: string) => {
+    setExpandedGroups((prev) => {
+      const next = new Set(prev);
+      if (next.has(groupId)) {
+        next.delete(groupId);
+      } else {
+        next.add(groupId);
+      }
+      return next;
+    });
+  };
+
+  // 키 선택 핸들러
+  const handleKeySelect = (itemId: string, key: { keyId: number; langKey: string } | null) => {
+    setSelectedItems((prev) => {
+      const next = new Map(prev);
+      if (key) {
+        next.set(itemId, { langKeyId: key.keyId, langKey: key.langKey });
+      } else {
+        next.delete(itemId);
+      }
+      return next;
+    });
+  };
+
+  // 연결된 키 개수
+  const connectedCount = selectedItems.size;
+  const totalCount = extractedLabels.length;
+
+  // 현재 선택된 항목의 편집된 번역
+  const currentTranslations = selectedLabelItem ? (allEditedTranslations[selectedLabelItem.id] || {}) : {};
+
+  // 언어 목록 로드
+  useEffect(() => {
+    const loadLanguages = async () => {
+      try {
+        const response = await apiClient.get("/multilang/languages");
+        if (response.data?.success && Array.isArray(response.data.data)) {
+          const activeLangs = response.data.data
+            .filter((lang: any) => (lang.isActive || lang.is_active) === "Y")
+            .map((lang: any) => ({
+              langCode: lang.langCode || lang.lang_code,
+              langName: lang.langName || lang.lang_name,
+              langNative: lang.langNative || lang.lang_native,
+            }));
+          setActiveLanguages(activeLangs);
+        }
+      } catch (error) {
+        console.error("언어 목록 로드 실패:", error);
+      }
+    };
+    if (isOpen) {
+      loadLanguages();
+    }
+  }, [isOpen]);
+
+  // 선택된 라벨의 번역 텍스트 로드
+  useEffect(() => {
+    const loadTranslations = async () => {
+      if (!selectedLabelItem) {
+        return;
+      }
+
+      // 언어 목록이 아직 로드되지 않았으면 대기
+      if (activeLanguages.length === 0) {
+        return;
+      }
+
+      // 이미 이 항목의 번역을 로드한 적이 있으면 스킵
+      if (allEditedTranslations[selectedLabelItem.id]) {
+        return;
+      }
+
+      const connectedKey = selectedItems.get(selectedLabelItem.id);
+      if (!connectedKey?.langKeyId) {
+        // 키가 연결되지 않은 경우 빈 번역으로 초기화
+        const defaultTranslations = activeLanguages.reduce((acc, lang) => {
+          acc[lang.langCode] = lang.langCode === "KR" ? selectedLabelItem.label : "";
+          return acc;
+        }, {} as Record<string, string>);
+        
+        setAllEditedTranslations((prev) => ({
+          ...prev,
+          [selectedLabelItem.id]: defaultTranslations,
+        }));
+        return;
+      }
+
+      setIsLoadingTranslations(true);
+      try {
+        const response = await apiClient.get(`/multilang/keys/${connectedKey.langKeyId}/texts`);
+        if (response.data?.success && response.data?.data) {
+          const textsMap: Record<string, string> = {};
+          response.data.data.forEach((t: any) => {
+            textsMap[t.langCode || t.lang_code] = t.langText || t.lang_text || "";
+          });
+
+          // 모든 활성 언어에 대해 번역 텍스트 생성
+          const loadedTranslations = activeLanguages.reduce((acc, lang) => {
+            acc[lang.langCode] = textsMap[lang.langCode] || "";
+            return acc;
+          }, {} as Record<string, string>);
+
+          setAllEditedTranslations((prev) => ({
+            ...prev,
+            [selectedLabelItem.id]: loadedTranslations,
+          }));
+
+          // 번역 상태 캐시 업데이트
+          const filledCount = activeLanguages.filter(
+            (lang) => loadedTranslations[lang.langCode] && loadedTranslations[lang.langCode].trim() !== ""
+          ).length;
+          let status: TranslationStatus = "none";
+          if (filledCount === activeLanguages.length) {
+            status = "complete";
+          } else if (filledCount > 0) {
+            status = "partial";
+          }
+          setTranslationStatusCache((prev) => ({
+            ...prev,
+            [selectedLabelItem.id]: status,
+          }));
+        }
+      } catch (error) {
+        console.error("번역 텍스트 로드 실패:", error);
+      } finally {
+        setIsLoadingTranslations(false);
+      }
+    };
+
+    loadTranslations();
+  }, [selectedLabelItem, selectedItems, activeLanguages, allEditedTranslations]);
+
+  // 현재 항목의 번역 텍스트 변경
+  const handleTranslationChange = (langCode: string, text: string) => {
+    if (!selectedLabelItem) return;
+    
+    const updatedTranslations = {
+      ...(allEditedTranslations[selectedLabelItem.id] || {}),
+      [langCode]: text,
+    };
+    
+    setAllEditedTranslations((prev) => ({
+      ...prev,
+      [selectedLabelItem.id]: updatedTranslations,
+    }));
+
+    // 번역 상태 캐시 업데이트
+    const filledCount = activeLanguages.filter(
+      (lang) => {
+        const val = lang.langCode === langCode ? text : updatedTranslations[lang.langCode];
+        return val && val.trim() !== "";
+      }
+    ).length;
+    
+    let status: TranslationStatus = "none";
+    if (filledCount === activeLanguages.length) {
+      status = "complete";
+    } else if (filledCount > 0) {
+      status = "partial";
+    }
+    
+    setTranslationStatusCache((prev) => ({
+      ...prev,
+      [selectedLabelItem.id]: status,
+    }));
+  };
+
+  // 모든 번역 텍스트 저장 (최종 저장 시)
+  const handleSaveAllTranslations = async () => {
+    const savePromises: Promise<void>[] = [];
+    
+    // 키가 연결된 항목들의 번역만 저장
+    for (const [itemId, translations] of Object.entries(allEditedTranslations)) {
+      const connectedKey = selectedItems.get(itemId);
+      if (!connectedKey?.langKeyId) continue;
+      
+      const texts = activeLanguages.map((lang) => ({
+        langCode: lang.langCode,
+        langText: translations[lang.langCode] || "",
+      }));
+      
+      savePromises.push(
+        apiClient.post(`/multilang/keys/${connectedKey.langKeyId}/texts`, { texts })
+          .then(() => {})
+          .catch((error) => {
+            console.error(`번역 저장 실패 (keyId: ${connectedKey.langKeyId}):`, error);
+          })
+      );
+    }
+    
+    await Promise.all(savePromises);
+  };
+
+  // 모달 닫힐 때 선택 초기화
+  useEffect(() => {
+    if (!isOpen) {
+      setSelectedLabelItem(null);
+      setAllEditedTranslations({});
+      setTranslationFilter("all");
+      setTranslationStatusCache({});
+    }
+  }, [isOpen]);
+
+  return (
+    <Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
+      <DialogContent className="max-h-[85vh] max-w-5xl">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <Languages className="h-5 w-5" />
+            다국어 설정
+            <Badge variant="secondary" className="ml-2">
+              {connectedCount} / {totalCount} 연결됨
+            </Badge>
+          </DialogTitle>
+        </DialogHeader>
+
+        {/* 좌우 분할 레이아웃 */}
+        <div className="flex gap-4" style={{ height: "500px" }}>
+          {/* 왼쪽: 라벨 목록 */}
+          <div className="flex w-1/2 flex-col overflow-hidden">
+            {/* 검색 및 필터 */}
+            <div className="mb-2 flex shrink-0 gap-2">
+              <div className="relative flex-1">
+                <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+                <Input
+                  placeholder="라벨 또는 키로 검색..."
+                  value={searchText}
+                  onChange={(e) => setSearchText(e.target.value)}
+                  className="pl-10"
+                />
+              </div>
+              <Select
+                value={translationFilter}
+                onValueChange={(value) => setTranslationFilter(value as TranslationFilter)}
+              >
+                <SelectTrigger className="w-[120px]">
+                  <SelectValue placeholder="필터" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="all">전체</SelectItem>
+                  <SelectItem value="complete">번역완료</SelectItem>
+                  <SelectItem value="incomplete">번역필요</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+
+            {/* 라벨 목록 */}
+            <ScrollArea className="min-h-0 flex-1 rounded-md border">
+              <div className="p-2">
+                {groupedLabels.length === 0 ? (
+                  <div className="flex h-32 items-center justify-center text-sm text-muted-foreground">
+                    {searchText ? "검색 결과가 없습니다." : "다국어 대상이 없습니다."}
+                  </div>
+                ) : (
+                  groupedLabels.map((group) => (
+                    <div key={group.id} className="mb-2">
+                      {/* 그룹 헤더 */}
+                      <button
+                        onClick={() => toggleGroup(group.id)}
+                        className="flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-sm font-medium hover:bg-muted"
+                      >
+                        {group.isExpanded ? (
+                          <ChevronDown className="h-4 w-4" />
+                        ) : (
+                          <ChevronRight className="h-4 w-4" />
+                        )}
+                        {group.icon}
+                        <span>{group.label}</span>
+                        <Badge variant="outline" className="ml-auto">
+                          {group.items.filter((i) => selectedItems.has(i.id)).length} / {group.items.length}
+                        </Badge>
+                      </button>
+
+                      {/* 그룹 아이템 */}
+                      {group.isExpanded && (
+                        <div className="ml-6 mt-1 space-y-1">
+                          {group.items.map((item) => {
+                            const isConnected = selectedItems.has(item.id);
+                            const isSelected = selectedLabelItem?.id === item.id;
+                            const translationStatus = getTranslationStatus(item.id);
+
+                            return (
+                              <div
+                                key={item.id}
+                                onClick={() => setSelectedLabelItem(item)}
+                                className={cn(
+                                  "flex cursor-pointer items-center gap-2 rounded-md border px-3 py-2 text-sm transition-colors",
+                                  isSelected
+                                    ? "border-primary bg-primary/10 ring-1 ring-primary"
+                                    : translationStatus === "complete"
+                                      ? "border-green-200 bg-green-50 hover:bg-green-100"
+                                      : translationStatus === "partial"
+                                        ? "border-yellow-200 bg-yellow-50 hover:bg-yellow-100"
+                                        : "border-gray-200 bg-white hover:bg-gray-50"
+                                )}
+                              >
+                                {/* 번역 상태 아이콘 */}
+                                <div className="shrink-0">
+                                  <TranslationStatusIcon status={translationStatus} />
+                                </div>
+
+                                {/* 타입 배지 */}
+                                <Badge variant="outline" className="shrink-0 text-xs">
+                                  {getTypeLabel(item.type)}
+                                </Badge>
+
+                                {/* 라벨 텍스트 */}
+                                <span className="flex-1 truncate font-medium">{item.label}</span>
+                              </div>
+                            );
+                          })}
+                        </div>
+                      )}
+                    </div>
+                  ))
+                )}
+              </div>
+            </ScrollArea>
+          </div>
+
+          {/* 오른쪽: 선택된 항목 상세 및 번역 편집 */}
+          <div className="flex w-1/2 flex-col rounded-md border bg-gray-50 p-4">
+            {selectedLabelItem ? (
+              <>
+                {/* 선택된 항목 정보 */}
+                <div className="mb-4 rounded-md border bg-white p-3">
+                  <div className="mb-2 flex items-center gap-2">
+                    <Badge variant="outline">{getTypeLabel(selectedLabelItem.type)}</Badge>
+                    <span className="font-medium">{selectedLabelItem.label}</span>
+                  </div>
+
+                  {/* 키 선택 */}
+                  <div className="flex items-center gap-2">
+                    <span className="text-sm text-muted-foreground">다국어 키:</span>
+                    <KeySelectCombobox
+                      value={
+                        selectedItems.get(selectedLabelItem.id)?.langKeyId &&
+                        selectedItems.get(selectedLabelItem.id)?.langKey
+                          ? {
+                              keyId: selectedItems.get(selectedLabelItem.id)!.langKeyId!,
+                              langKey: selectedItems.get(selectedLabelItem.id)!.langKey!,
+                            }
+                          : undefined
+                      }
+                      onChange={(key) => handleKeySelect(selectedLabelItem.id, key)}
+                      langKeys={langKeys}
+                      isLoading={isLoadingKeys}
+                    />
+                  </div>
+                </div>
+
+                {/* 번역 텍스트 편집 */}
+                <div className="flex-1 overflow-hidden">
+                  <div className="mb-2">
+                    <h4 className="text-sm font-medium">번역 텍스트</h4>
+                  </div>
+
+                  {isLoadingTranslations || activeLanguages.length === 0 ? (
+                    <div className="flex h-32 items-center justify-center">
+                      <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+                    </div>
+                  ) : !selectedItems.get(selectedLabelItem.id)?.langKeyId ? (
+                    <div className="flex h-32 items-center justify-center text-sm text-muted-foreground">
+                      먼저 다국어 키를 선택해주세요
+                    </div>
+                  ) : (
+                    <ScrollArea className="h-[280px]">
+                      <div className="space-y-3 pr-4">
+                        {activeLanguages.map((lang) => (
+                          <div key={lang.langCode} className="rounded-md border bg-white p-3">
+                            <div className="mb-1.5 flex items-center gap-2">
+                              <Badge variant="secondary" className="text-xs">
+                                {lang.langCode}
+                              </Badge>
+                              <span className="text-xs text-muted-foreground">
+                                {lang.langNative || lang.langName}
+                              </span>
+                            </div>
+                            <Input
+                              value={currentTranslations[lang.langCode] || ""}
+                              onChange={(e) => handleTranslationChange(lang.langCode, e.target.value)}
+                              placeholder={`${lang.langName} 번역 입력...`}
+                              className="h-9 text-sm"
+                            />
+                          </div>
+                        ))}
+                      </div>
+                    </ScrollArea>
+                  )}
+                </div>
+              </>
+            ) : (
+              <div className="flex h-full flex-col items-center justify-center text-muted-foreground">
+                <Languages className="mb-2 h-12 w-12 opacity-20" />
+                <p className="text-sm">좌측에서 항목을 선택하세요</p>
+                <p className="text-xs">선택한 항목의 다국어 설정을 할 수 있습니다</p>
+              </div>
+            )}
+          </div>
+        </div>
+
+        {/* 하단 진행률 표시 */}
+        <div className="mb-2 rounded-md border bg-muted/30 p-3">
+          <div className="mb-2 flex items-center justify-between">
+            <div className="flex items-center gap-4 text-sm">
+              <span className="font-medium">번역 현황</span>
+              <div className="flex items-center gap-3 text-xs text-muted-foreground">
+                <span className="flex items-center gap-1">
+                  <CheckCircle2 className="h-3 w-3 text-green-500" />
+                  완료 {translationStats.complete}
+                </span>
+                <span className="flex items-center gap-1">
+                  <CircleDot className="h-3 w-3 text-yellow-500" />
+                  부분 {translationStats.partial}
+                </span>
+                <span className="flex items-center gap-1">
+                  <Circle className="h-3 w-3 text-gray-300" />
+                  미완료 {translationStats.none}
+                </span>
+              </div>
+            </div>
+            <span className="text-sm font-medium">{progressPercentage}%</span>
+          </div>
+          <Progress value={progressPercentage} className="h-2" />
+        </div>
+
+        <DialogFooter className="gap-2">
+          <Button variant="outline" onClick={onClose}>
+            닫기
+          </Button>
+          <Button
+            disabled={isSaving}
+            onClick={async () => {
+              setIsSaving(true);
+              try {
+                // 1. 번역 텍스트 저장
+                await handleSaveAllTranslations();
+                
+                // 2. 컴포넌트 매핑 저장
+                const updates = Array.from(selectedItems.entries())
+                  .filter(([, data]) => data.langKeyId && data.langKey)
+                  .map(([id, data]) => ({
+                    componentId: id,
+                    langKeyId: data.langKeyId!,
+                    langKey: data.langKey!,
+                  }));
+                onSave(updates);
+                onClose();
+              } catch (error) {
+                console.error("저장 실패:", error);
+              } finally {
+                setIsSaving(false);
+              }
+            }}
+          >
+            {isSaving ? (
+              <>
+                <Loader2 className="mr-1 h-4 w-4 animate-spin" />
+                저장 중...
+              </>
+            ) : (
+              "저장"
+            )}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default MultilangSettingsModal;
diff --git a/frontend/components/screen/panels/webtype-configs/EntityTypeConfigPanel.tsx b/frontend/components/screen/panels/webtype-configs/EntityTypeConfigPanel.tsx
index 05171d01..1cae7dce 100644
--- a/frontend/components/screen/panels/webtype-configs/EntityTypeConfigPanel.tsx
+++ b/frontend/components/screen/panels/webtype-configs/EntityTypeConfigPanel.tsx
@@ -6,6 +6,7 @@ import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { Checkbox } from "@/components/ui/checkbox";
+import { Switch } from "@/components/ui/switch";
 import { Badge } from "@/components/ui/badge";
 import { Search, Database, Link, X, Plus } from "lucide-react";
 import { EntityTypeConfig } from "@/types/screen";
@@ -26,6 +27,8 @@ export const EntityTypeConfigPanel: React.FC<EntityTypeConfigPanelProps> = ({ co
     placeholder: "",
     displayFormat: "simple",
     separator: " - ",
+    multiple: false, // 다중 선택
+    uiMode: "select", // UI 모드: select, combo, modal, autocomplete
     ...config,
   };
 
@@ -38,6 +41,8 @@ export const EntityTypeConfigPanel: React.FC<EntityTypeConfigPanelProps> = ({ co
     placeholder: safeConfig.placeholder,
     displayFormat: safeConfig.displayFormat,
     separator: safeConfig.separator,
+    multiple: safeConfig.multiple,
+    uiMode: safeConfig.uiMode,
   });
 
   const [newFilter, setNewFilter] = useState({ field: "", operator: "=", value: "" });
@@ -74,6 +79,8 @@ export const EntityTypeConfigPanel: React.FC<EntityTypeConfigPanelProps> = ({ co
       placeholder: safeConfig.placeholder,
       displayFormat: safeConfig.displayFormat,
       separator: safeConfig.separator,
+      multiple: safeConfig.multiple,
+      uiMode: safeConfig.uiMode,
     });
   }, [
     safeConfig.referenceTable,
@@ -83,8 +90,18 @@ export const EntityTypeConfigPanel: React.FC<EntityTypeConfigPanelProps> = ({ co
     safeConfig.placeholder,
     safeConfig.displayFormat,
     safeConfig.separator,
+    safeConfig.multiple,
+    safeConfig.uiMode,
   ]);
 
+  // UI 모드 옵션
+  const uiModes = [
+    { value: "select", label: "드롭다운 선택" },
+    { value: "combo", label: "입력 + 모달 버튼" },
+    { value: "modal", label: "모달 팝업" },
+    { value: "autocomplete", label: "자동완성" },
+  ];
+
   const updateConfig = (key: keyof EntityTypeConfig, value: any) => {
     // 로컬 상태 즉시 업데이트
     setLocalValues((prev) => ({ ...prev, [key]: value }));
@@ -260,6 +277,46 @@ export const EntityTypeConfigPanel: React.FC<EntityTypeConfigPanelProps> = ({ co
         />
       </div>
 
+      {/* UI 모드 */}
+      <div>
+        <Label htmlFor="uiMode" className="text-sm font-medium">
+          UI 모드
+        </Label>
+        <Select value={localValues.uiMode || "select"} onValueChange={(value) => updateConfig("uiMode", value)}>
+          <SelectTrigger className="mt-1 h-8 w-full text-xs">
+            <SelectValue placeholder="모드 선택" />
+          </SelectTrigger>
+          <SelectContent>
+            {uiModes.map((mode) => (
+              <SelectItem key={mode.value} value={mode.value}>
+                {mode.label}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+        <p className="text-muted-foreground mt-1 text-xs">
+          {localValues.uiMode === "select" && "검색 가능한 드롭다운 형태로 표시됩니다."}
+          {localValues.uiMode === "combo" && "입력 필드와 검색 버튼이 함께 표시됩니다."}
+          {localValues.uiMode === "modal" && "모달 팝업에서 데이터를 검색하고 선택합니다."}
+          {localValues.uiMode === "autocomplete" && "입력하면서 자동완성 목록이 표시됩니다."}
+        </p>
+      </div>
+
+      {/* 다중 선택 */}
+      <div className="flex items-center justify-between rounded-md border p-3">
+        <div className="space-y-1">
+          <Label htmlFor="multiple" className="text-sm font-medium">
+            다중 선택
+          </Label>
+          <p className="text-muted-foreground text-xs">여러 항목을 선택할 수 있습니다.</p>
+        </div>
+        <Switch
+          id="multiple"
+          checked={localValues.multiple || false}
+          onCheckedChange={(checked) => updateConfig("multiple", checked)}
+        />
+      </div>
+
       {/* 필터 관리 */}
       <div className="space-y-3">
         <Label className="text-sm font-medium">데이터 필터</Label>
diff --git a/frontend/components/screen/table-options/ColumnVisibilityPanel.tsx b/frontend/components/screen/table-options/ColumnVisibilityPanel.tsx
index 64acd942..67c11171 100644
--- a/frontend/components/screen/table-options/ColumnVisibilityPanel.tsx
+++ b/frontend/components/screen/table-options/ColumnVisibilityPanel.tsx
@@ -97,9 +97,13 @@ export const ColumnVisibilityPanel: React.FC<Props> = ({
       table.onColumnOrderChange(newOrder);
     }
     
-    // 틀고정 컬럼 수 변경 콜백 호출
+    // 틀고정 컬럼 수 변경 콜백 호출 (현재 컬럼 상태도 함께 전달)
     if (table?.onFrozenColumnCountChange) {
-      table.onFrozenColumnCountChange(frozenColumnCount);
+      const updatedColumns = localColumns.map((col) => ({
+        columnName: col.columnName,
+        visible: col.visible,
+      }));
+      table.onFrozenColumnCountChange(frozenColumnCount, updatedColumns);
     }
     
     onClose();
diff --git a/frontend/components/screen/toolbar/SlimToolbar.tsx b/frontend/components/screen/toolbar/SlimToolbar.tsx
index 2c6c7222..a6cbc1a6 100644
--- a/frontend/components/screen/toolbar/SlimToolbar.tsx
+++ b/frontend/components/screen/toolbar/SlimToolbar.tsx
@@ -2,7 +2,7 @@
 
 import React from "react";
 import { Button } from "@/components/ui/button";
-import { Database, ArrowLeft, Save, Monitor, Smartphone } from "lucide-react";
+import { Database, ArrowLeft, Save, Monitor, Smartphone, Languages, Settings2 } from "lucide-react";
 import { ScreenResolution } from "@/types/screen";
 
 interface SlimToolbarProps {
@@ -13,6 +13,9 @@ interface SlimToolbarProps {
   onSave: () => void;
   isSaving?: boolean;
   onPreview?: () => void;
+  onGenerateMultilang?: () => void;
+  isGeneratingMultilang?: boolean;
+  onOpenMultilangSettings?: () => void;
 }
 
 export const SlimToolbar: React.FC<SlimToolbarProps> = ({
@@ -23,6 +26,9 @@ export const SlimToolbar: React.FC<SlimToolbarProps> = ({
   onSave,
   isSaving = false,
   onPreview,
+  onGenerateMultilang,
+  isGeneratingMultilang = false,
+  onOpenMultilangSettings,
 }) => {
   return (
     <div className="flex h-14 items-center justify-between border-b border-gray-200 bg-gradient-to-r from-gray-50 to-white px-4 shadow-sm">
@@ -70,6 +76,29 @@ export const SlimToolbar: React.FC<SlimToolbarProps> = ({
             <span>반응형 미리보기</span>
           </Button>
         )}
+        {onGenerateMultilang && (
+          <Button
+            variant="outline"
+            onClick={onGenerateMultilang}
+            disabled={isGeneratingMultilang}
+            className="flex items-center space-x-2"
+            title="화면 라벨에 대한 다국어 키를 자동으로 생성합니다"
+          >
+            <Languages className="h-4 w-4" />
+            <span>{isGeneratingMultilang ? "생성 중..." : "다국어 생성"}</span>
+          </Button>
+        )}
+        {onOpenMultilangSettings && (
+          <Button
+            variant="outline"
+            onClick={onOpenMultilangSettings}
+            className="flex items-center space-x-2"
+            title="다국어 키 연결 및 설정을 관리합니다"
+          >
+            <Settings2 className="h-4 w-4" />
+            <span>다국어 설정</span>
+          </Button>
+        )}
         <Button onClick={onSave} disabled={isSaving} className="flex items-center space-x-2">
           <Save className="h-4 w-4" />
           <span>{isSaving ? "저장 중..." : "저장"}</span>
diff --git a/frontend/components/table-category/CategoryValueAddDialog.tsx b/frontend/components/table-category/CategoryValueAddDialog.tsx
index 9d962b22..303022bd 100644
--- a/frontend/components/table-category/CategoryValueAddDialog.tsx
+++ b/frontend/components/table-category/CategoryValueAddDialog.tsx
@@ -14,6 +14,7 @@ import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Textarea } from "@/components/ui/textarea";
 import { Badge } from "@/components/ui/badge";
+import { Checkbox } from "@/components/ui/checkbox";
 import { TableCategoryValue } from "@/types/tableCategoryValue";
 
 // 기본 색상 팔레트
@@ -51,6 +52,7 @@ export const CategoryValueAddDialog: React.FC<
   const [valueLabel, setValueLabel] = useState("");
   const [description, setDescription] = useState("");
   const [color, setColor] = useState("none");
+  const [continuousAdd, setContinuousAdd] = useState(false); // 연속 입력 체크박스
 
   // 라벨에서 코드 자동 생성 (항상 고유한 코드 생성)
   const generateCode = (): string => {
@@ -60,6 +62,12 @@ export const CategoryValueAddDialog: React.FC<
     return `CATEGORY_${timestamp}${random}`;
   };
 
+  const resetForm = () => {
+    setValueLabel("");
+    setDescription("");
+    setColor("none");
+  };
+
   const handleSubmit = () => {
     if (!valueLabel.trim()) {
       return;
@@ -77,14 +85,28 @@ export const CategoryValueAddDialog: React.FC<
       isDefault: false,
     } as TableCategoryValue);
 
-    // 초기화
-    setValueLabel("");
-    setDescription("");
-    setColor("none");
+    // 연속 입력 체크되어 있으면 폼만 초기화하고 모달 유지
+    if (continuousAdd) {
+      resetForm();
+    } else {
+      // 연속 입력 아니면 모달 닫기
+      resetForm();
+      onOpenChange(false);
+    }
+  };
+
+  const handleClose = () => {
+    resetForm();
+    onOpenChange(false);
   };
 
   return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
+    <Dialog open={open} onOpenChange={(isOpen) => {
+      if (!isOpen) {
+        resetForm();
+      }
+      onOpenChange(isOpen);
+    }}>
       <DialogContent className="max-w-[95vw] sm:max-w-[500px]">
         <DialogHeader>
           <DialogTitle className="text-base sm:text-lg">
@@ -165,24 +187,42 @@ export const CategoryValueAddDialog: React.FC<
           </div>
         </div>
 
-        <DialogFooter className="gap-2 sm:gap-0">
-          <Button
-            variant="outline"
-            onClick={() => onOpenChange(false)}
-            className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
-          >
-            취소
-          </Button>
-          <Button
-            onClick={handleSubmit}
-            disabled={!valueLabel.trim()}
-            className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
-          >
-            추가
-          </Button>
+        <DialogFooter className="flex-col gap-3 sm:flex-row sm:gap-0">
+          {/* 연속 입력 체크박스 */}
+          <div className="flex items-center gap-2 w-full sm:w-auto sm:mr-auto">
+            <Checkbox
+              id="continuousAdd"
+              checked={continuousAdd}
+              onCheckedChange={(checked) => setContinuousAdd(checked as boolean)}
+            />
+            <label
+              htmlFor="continuousAdd"
+              className="text-xs sm:text-sm text-muted-foreground cursor-pointer"
+            >
+              연속 입력
+            </label>
+          </div>
+          
+          <div className="flex gap-2 w-full sm:w-auto">
+            <Button
+              type="button"
+              variant="outline"
+              onClick={handleClose}
+              className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
+            >
+              취소
+            </Button>
+            <Button
+              type="button"
+              onClick={handleSubmit}
+              disabled={!valueLabel.trim()}
+              className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
+            >
+              추가
+            </Button>
+          </div>
         </DialogFooter>
       </DialogContent>
     </Dialog>
   );
 };
-
diff --git a/frontend/components/table-category/CategoryValueManager.tsx b/frontend/components/table-category/CategoryValueManager.tsx
index 98d23bae..aba04d6a 100644
--- a/frontend/components/table-category/CategoryValueManager.tsx
+++ b/frontend/components/table-category/CategoryValueManager.tsx
@@ -123,7 +123,7 @@ export const CategoryValueManager: React.FC<CategoryValueManagerProps> = ({
 
       if (response.success && response.data) {
         await loadCategoryValues();
-        setIsAddDialogOpen(false);
+        // 모달 닫기는 CategoryValueAddDialog에서 연속 입력 체크박스로 제어
         toast({
           title: "성공",
           description: "카테고리 값이 추가되었습니다",
@@ -142,7 +142,7 @@ export const CategoryValueManager: React.FC<CategoryValueManagerProps> = ({
         title: "오류",
         description: error.message || "카테고리 값 추가에 실패했습니다",
         variant: "destructive",
-        });
+      });
     }
   };
 
diff --git a/frontend/components/webtypes/RepeaterInput.tsx b/frontend/components/webtypes/RepeaterInput.tsx
index db9e1d6b..7cd4b279 100644
--- a/frontend/components/webtypes/RepeaterInput.tsx
+++ b/frontend/components/webtypes/RepeaterInput.tsx
@@ -16,7 +16,9 @@ import {
   RepeaterItemData,
   RepeaterFieldDefinition,
   CalculationFormula,
+  SubDataState,
 } from "@/types/repeater";
+import { SubDataLookupPanel } from "@/lib/registry/components/repeater-field-group/SubDataLookupPanel";
 import { cn } from "@/lib/utils";
 import { useBreakpoint } from "@/hooks/useBreakpoint";
 import { usePreviewBreakpoint } from "@/components/screen/ResponsivePreviewModal";
@@ -68,8 +70,12 @@ export const RepeaterInput: React.FC<RepeaterInputProps> = ({
     layout = "grid", // 기본값을 grid로 설정
     showDivider = true,
     emptyMessage = "항목이 없습니다. '항목 추가' 버튼을 클릭하세요.",
+    subDataLookup,
   } = config;
 
+  // 하위 데이터 조회 상태 관리 (각 항목별)
+  const [subDataStates, setSubDataStates] = useState<Map<number, SubDataState>>(new Map());
+
   // 반응형: 작은 화면(모바일/태블릿)에서는 카드 레이아웃 강제
   const effectiveLayout = breakpoint === "mobile" || breakpoint === "tablet" ? "card" : layout;
 
@@ -272,6 +278,111 @@ export const RepeaterInput: React.FC<RepeaterInputProps> = ({
   // 드래그 앤 드롭 (순서 변경)
   const [draggedIndex, setDraggedIndex] = useState<number | null>(null);
 
+  // 하위 데이터 선택 핸들러
+  const handleSubDataSelection = (itemIndex: number, selectedItem: any | null, maxValue: number | null) => {
+    console.log("[RepeaterInput] 하위 데이터 선택:", { itemIndex, selectedItem, maxValue });
+
+    // 상태 업데이트
+    setSubDataStates((prev) => {
+      const newMap = new Map(prev);
+      const currentState = newMap.get(itemIndex) || {
+        itemIndex,
+        data: [],
+        selectedItem: null,
+        isLoading: false,
+        error: null,
+        isExpanded: false,
+      };
+      newMap.set(itemIndex, {
+        ...currentState,
+        selectedItem,
+      });
+      return newMap;
+    });
+
+    // 선택된 항목 정보를 item에 저장
+    if (selectedItem && subDataLookup) {
+      const newItems = [...items];
+      newItems[itemIndex] = {
+        ...newItems[itemIndex],
+        _subDataSelection: selectedItem,
+        _subDataMaxValue: maxValue,
+      };
+
+      // 선택된 하위 데이터의 필드 값을 상위 item에 복사 (설정된 경우)
+      // 예: warehouse_code, location_code 등
+      if (subDataLookup.lookup.displayColumns) {
+        subDataLookup.lookup.displayColumns.forEach((col) => {
+          if (selectedItem[col] !== undefined) {
+            // 필드가 정의되어 있으면 복사
+            const fieldDef = fields.find((f) => f.name === col);
+            if (fieldDef || col.includes("_code") || col.includes("_id")) {
+              newItems[itemIndex][col] = selectedItem[col];
+            }
+          }
+        });
+      }
+
+      setItems(newItems);
+
+      // onChange 호출
+      const dataWithMeta = config.targetTable
+        ? newItems.map((item) => ({ ...item, _targetTable: config.targetTable }))
+        : newItems;
+      onChange?.(dataWithMeta);
+    }
+  };
+
+  // 조건부 입력 활성화 여부 확인
+  const isConditionalInputEnabled = (itemIndex: number, fieldName: string): boolean => {
+    if (!subDataLookup?.enabled) return true;
+    if (subDataLookup.conditionalInput?.targetField !== fieldName) return true;
+
+    const subState = subDataStates.get(itemIndex);
+    if (!subState?.selectedItem) return false;
+
+    const { requiredFields, requiredMode = "all" } = subDataLookup.selection;
+    if (!requiredFields || requiredFields.length === 0) return true;
+
+    if (requiredMode === "any") {
+      return requiredFields.some((field) => {
+        const value = subState.selectedItem[field];
+        return value !== undefined && value !== null && value !== "";
+      });
+    } else {
+      return requiredFields.every((field) => {
+        const value = subState.selectedItem[field];
+        return value !== undefined && value !== null && value !== "";
+      });
+    }
+  };
+
+  // 최대값 가져오기
+  const getMaxValueForField = (itemIndex: number, fieldName: string): number | null => {
+    if (!subDataLookup?.enabled) return null;
+    if (subDataLookup.conditionalInput?.targetField !== fieldName) return null;
+    if (!subDataLookup.conditionalInput?.maxValueField) return null;
+
+    const subState = subDataStates.get(itemIndex);
+    if (!subState?.selectedItem) return null;
+
+    const maxVal = subState.selectedItem[subDataLookup.conditionalInput.maxValueField];
+    return typeof maxVal === "number" ? maxVal : parseFloat(maxVal) || null;
+  };
+
+  // 경고 임계값 체크
+  const checkWarningThreshold = (itemIndex: number, fieldName: string, value: number): boolean => {
+    if (!subDataLookup?.enabled) return false;
+    if (subDataLookup.conditionalInput?.targetField !== fieldName) return false;
+
+    const maxValue = getMaxValueForField(itemIndex, fieldName);
+    if (maxValue === null || maxValue === 0) return false;
+
+    const threshold = subDataLookup.conditionalInput?.warningThreshold ?? 90;
+    const percentage = (value / maxValue) * 100;
+    return percentage >= threshold;
+  };
+
   const handleDragStart = (index: number) => {
     if (!allowReorder || readonly || disabled) return;
     setDraggedIndex(index);
@@ -389,14 +500,26 @@ export const RepeaterInput: React.FC<RepeaterInputProps> = ({
   const renderField = (field: RepeaterFieldDefinition, itemIndex: number, value: any) => {
     const isReadonly = disabled || readonly || field.readonly;
 
+    // 조건부 입력 비활성화 체크
+    const isConditionalDisabled =
+      subDataLookup?.enabled &&
+      subDataLookup.conditionalInput?.targetField === field.name &&
+      !isConditionalInputEnabled(itemIndex, field.name);
+
+    // 최대값 및 경고 체크
+    const maxValue = getMaxValueForField(itemIndex, field.name);
+    const numValue = parseFloat(value) || 0;
+    const showWarning = checkWarningThreshold(itemIndex, field.name, numValue);
+    const exceedsMax = maxValue !== null && numValue > maxValue;
+
     // 🆕 placeholder 기본값: 필드에 설정된 값 > 필드 라벨 기반 자동 생성
     // "id(를) 입력하세요" 같은 잘못된 기본값 방지
     const defaultPlaceholder = field.placeholder || `${field.label || field.name}`;
 
     const commonProps = {
       value: value || "",
-      disabled: isReadonly,
-      placeholder: defaultPlaceholder,
+      disabled: isReadonly || isConditionalDisabled,
+      placeholder: isConditionalDisabled ? "재고 선택 필요" : defaultPlaceholder,
       required: field.required,
     };
 
@@ -569,23 +692,37 @@ export const RepeaterInput: React.FC<RepeaterInputProps> = ({
                 type="number"
                 onChange={(e) => handleFieldChange(itemIndex, field.name, e.target.value)}
                 min={field.validation?.min}
-                max={field.validation?.max}
-                className="pr-1"
+                max={maxValue !== null ? maxValue : field.validation?.max}
+                className={cn("pr-1", exceedsMax && "border-red-500", showWarning && !exceedsMax && "border-amber-500")}
               />
               {value && <div className="text-muted-foreground mt-0.5 text-[10px]">{formattedDisplay}</div>}
+              {exceedsMax && (
+                <div className="mt-0.5 text-[10px] text-red-500">최대 {maxValue}까지 입력 가능</div>
+              )}
+              {showWarning && !exceedsMax && (
+                <div className="mt-0.5 text-[10px] text-amber-600">재고의 {subDataLookup?.conditionalInput?.warningThreshold ?? 90}% 이상</div>
+              )}
             </div>
           );
         }
 
         return (
-          <Input
-            {...commonProps}
-            type="number"
-            onChange={(e) => handleFieldChange(itemIndex, field.name, e.target.value)}
-            min={field.validation?.min}
-            max={field.validation?.max}
-            className="min-w-[80px]"
-          />
+          <div className="relative min-w-[80px]">
+            <Input
+              {...commonProps}
+              type="number"
+              onChange={(e) => handleFieldChange(itemIndex, field.name, e.target.value)}
+              min={field.validation?.min}
+              max={maxValue !== null ? maxValue : field.validation?.max}
+              className={cn(exceedsMax && "border-red-500", showWarning && !exceedsMax && "border-amber-500")}
+            />
+            {exceedsMax && (
+              <div className="mt-0.5 text-[10px] text-red-500">최대 {maxValue}까지 입력 가능</div>
+            )}
+            {showWarning && !exceedsMax && (
+              <div className="mt-0.5 text-[10px] text-amber-600">재고의 {subDataLookup?.conditionalInput?.warningThreshold ?? 90}% 이상</div>
+            )}
+          </div>
         );
 
       case "email":
@@ -754,6 +891,9 @@ export const RepeaterInput: React.FC<RepeaterInputProps> = ({
 
   // 그리드/테이블 형식 렌더링
   const renderGridLayout = () => {
+    // 하위 데이터 조회 설정이 있으면 연결 컬럼 찾기
+    const linkColumn = subDataLookup?.lookup?.linkColumn;
+
     return (
       <div className="bg-card">
         <Table>
@@ -775,55 +915,83 @@ export const RepeaterInput: React.FC<RepeaterInputProps> = ({
             </TableRow>
           </TableHeader>
           <TableBody>
-            {items.map((item, itemIndex) => (
-              <TableRow
-                key={itemIndex}
-                className={cn(
-                  "bg-background hover:bg-muted/50 transition-colors",
-                  draggedIndex === itemIndex && "opacity-50",
-                )}
-                draggable={allowReorder && !readonly && !disabled}
-                onDragStart={() => handleDragStart(itemIndex)}
-                onDragOver={(e) => handleDragOver(e, itemIndex)}
-                onDrop={(e) => handleDrop(e, itemIndex)}
-                onDragEnd={handleDragEnd}
-              >
-                {/* 인덱스 번호 */}
-                {showIndex && (
-                  <TableCell className="h-12 px-2.5 py-2 text-center text-sm font-medium">{itemIndex + 1}</TableCell>
-                )}
+            {items.map((item, itemIndex) => {
+              // 하위 데이터 조회용 연결 값
+              const linkValue = linkColumn ? item[linkColumn] : null;
 
-                {/* 드래그 핸들 */}
-                {allowReorder && !readonly && !disabled && (
-                  <TableCell className="h-12 px-2.5 py-2 text-center">
-                    <GripVertical className="text-muted-foreground h-4 w-4 cursor-move" />
-                  </TableCell>
-                )}
+              return (
+                <React.Fragment key={itemIndex}>
+                  <TableRow
+                    className={cn(
+                      "bg-background hover:bg-muted/50 transition-colors",
+                      draggedIndex === itemIndex && "opacity-50",
+                    )}
+                    draggable={allowReorder && !readonly && !disabled}
+                    onDragStart={() => handleDragStart(itemIndex)}
+                    onDragOver={(e) => handleDragOver(e, itemIndex)}
+                    onDrop={(e) => handleDrop(e, itemIndex)}
+                    onDragEnd={handleDragEnd}
+                  >
+                    {/* 인덱스 번호 */}
+                    {showIndex && (
+                      <TableCell className="h-12 px-2.5 py-2 text-center text-sm font-medium">{itemIndex + 1}</TableCell>
+                    )}
 
-                {/* 필드들 */}
-                {fields.map((field) => (
-                  <TableCell key={field.name} className="h-12 px-2.5 py-2">
-                    {renderField(field, itemIndex, item[field.name])}
-                  </TableCell>
-                ))}
+                    {/* 드래그 핸들 */}
+                    {allowReorder && !readonly && !disabled && (
+                      <TableCell className="h-12 px-2.5 py-2 text-center">
+                        <GripVertical className="text-muted-foreground h-4 w-4 cursor-move" />
+                      </TableCell>
+                    )}
 
-                {/* 삭제 버튼 */}
-                <TableCell className="h-12 px-2.5 py-2 text-center">
-                  {!readonly && !disabled && (
-                    <Button
-                      type="button"
-                      variant="ghost"
-                      size="icon"
-                      onClick={() => handleRemoveItem(itemIndex)}
-                      className="text-destructive hover:bg-destructive/10 hover:text-destructive h-8 w-8"
-                      title="항목 제거"
-                    >
-                      <X className="h-4 w-4" />
-                    </Button>
+                    {/* 필드들 */}
+                    {fields.map((field) => (
+                      <TableCell key={field.name} className="h-12 px-2.5 py-2">
+                        {renderField(field, itemIndex, item[field.name])}
+                      </TableCell>
+                    ))}
+
+                    {/* 삭제 버튼 */}
+                    <TableCell className="h-12 px-2.5 py-2 text-center">
+                      {!readonly && !disabled && (
+                        <Button
+                          type="button"
+                          variant="ghost"
+                          size="icon"
+                          onClick={() => handleRemoveItem(itemIndex)}
+                          className="text-destructive hover:bg-destructive/10 hover:text-destructive h-8 w-8"
+                          title="항목 제거"
+                        >
+                          <X className="h-4 w-4" />
+                        </Button>
+                      )}
+                    </TableCell>
+                  </TableRow>
+
+                  {/* 하위 데이터 조회 패널 (인라인) */}
+                  {subDataLookup?.enabled && linkValue && (
+                    <TableRow className="bg-gray-50/50">
+                      <TableCell
+                        colSpan={
+                          fields.length + (showIndex ? 1 : 0) + (allowReorder && !readonly && !disabled ? 1 : 0) + 1
+                        }
+                        className="px-2.5 py-2"
+                      >
+                        <SubDataLookupPanel
+                          config={subDataLookup}
+                          linkValue={linkValue}
+                          itemIndex={itemIndex}
+                          onSelectionChange={(selectedItem, maxValue) =>
+                            handleSubDataSelection(itemIndex, selectedItem, maxValue)
+                          }
+                          disabled={readonly || disabled}
+                        />
+                      </TableCell>
+                    </TableRow>
                   )}
-                </TableCell>
-              </TableRow>
-            ))}
+                </React.Fragment>
+              );
+            })}
           </TableBody>
         </Table>
       </div>
@@ -832,10 +1000,15 @@ export const RepeaterInput: React.FC<RepeaterInputProps> = ({
 
   // 카드 형식 렌더링 (기존 방식)
   const renderCardLayout = () => {
+    // 하위 데이터 조회 설정이 있으면 연결 컬럼 찾기
+    const linkColumn = subDataLookup?.lookup?.linkColumn;
+
     return (
       <>
         {items.map((item, itemIndex) => {
           const isCollapsed = collapsible && collapsedItems.has(itemIndex);
+          // 하위 데이터 조회용 연결 값
+          const linkValue = linkColumn ? item[linkColumn] : null;
 
           return (
             <Card
@@ -907,6 +1080,21 @@ export const RepeaterInput: React.FC<RepeaterInputProps> = ({
                       </div>
                     ))}
                   </div>
+
+                  {/* 하위 데이터 조회 패널 (인라인) */}
+                  {subDataLookup?.enabled && linkValue && (
+                    <div className="mt-3 border-t pt-3">
+                      <SubDataLookupPanel
+                        config={subDataLookup}
+                        linkValue={linkValue}
+                        itemIndex={itemIndex}
+                        onSelectionChange={(selectedItem, maxValue) =>
+                          handleSubDataSelection(itemIndex, selectedItem, maxValue)
+                        }
+                        disabled={readonly || disabled}
+                      />
+                    </div>
+                  )}
                 </CardContent>
               )}
 
diff --git a/frontend/components/webtypes/config/RepeaterConfigPanel.tsx b/frontend/components/webtypes/config/RepeaterConfigPanel.tsx
index 00c8f5a7..97e20574 100644
--- a/frontend/components/webtypes/config/RepeaterConfigPanel.tsx
+++ b/frontend/components/webtypes/config/RepeaterConfigPanel.tsx
@@ -9,14 +9,17 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@
 import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem } from "@/components/ui/command";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { Plus, X, GripVertical, Check, ChevronsUpDown, Calculator } from "lucide-react";
+import { Switch } from "@/components/ui/switch";
+import { Plus, X, GripVertical, Check, ChevronsUpDown, Calculator, Database, ArrowUp, ArrowDown } from "lucide-react";
 import {
   RepeaterFieldGroupConfig,
   RepeaterFieldDefinition,
   RepeaterFieldType,
   CalculationOperator,
   CalculationFormula,
+  SubDataLookupConfig,
 } from "@/types/repeater";
+import { apiClient } from "@/lib/api/client";
 import { ColumnInfo } from "@/types/screen";
 import { cn } from "@/lib/utils";
 
@@ -93,6 +96,56 @@ export const RepeaterConfigPanel: React.FC<RepeaterConfigPanelProps> = ({
     handleFieldsChange(localFields.filter((_, i) => i !== index));
   };
 
+  // 필드 순서 변경 (위로)
+  const moveFieldUp = (index: number) => {
+    if (index <= 0) return;
+    const newFields = [...localFields];
+    [newFields[index - 1], newFields[index]] = [newFields[index], newFields[index - 1]];
+    handleFieldsChange(newFields);
+  };
+
+  // 필드 순서 변경 (아래로)
+  const moveFieldDown = (index: number) => {
+    if (index >= localFields.length - 1) return;
+    const newFields = [...localFields];
+    [newFields[index], newFields[index + 1]] = [newFields[index + 1], newFields[index]];
+    handleFieldsChange(newFields);
+  };
+
+  // 드래그 앤 드롭 상태
+  const [draggedFieldIndex, setDraggedFieldIndex] = useState<number | null>(null);
+
+  // 필드 드래그 시작
+  const handleFieldDragStart = (index: number) => {
+    setDraggedFieldIndex(index);
+  };
+
+  // 필드 드래그 오버
+  const handleFieldDragOver = (e: React.DragEvent, index: number) => {
+    e.preventDefault();
+  };
+
+  // 필드 드롭
+  const handleFieldDrop = (e: React.DragEvent, targetIndex: number) => {
+    e.preventDefault();
+    if (draggedFieldIndex === null || draggedFieldIndex === targetIndex) {
+      setDraggedFieldIndex(null);
+      return;
+    }
+
+    const newFields = [...localFields];
+    const draggedField = newFields[draggedFieldIndex];
+    newFields.splice(draggedFieldIndex, 1);
+    newFields.splice(targetIndex, 0, draggedField);
+    handleFieldsChange(newFields);
+    setDraggedFieldIndex(null);
+  };
+
+  // 필드 드래그 종료
+  const handleFieldDragEnd = () => {
+    setDraggedFieldIndex(null);
+  };
+
   // 필드 수정 (입력 중 - 로컬 상태만)
   const updateFieldLocal = (index: number, field: "label" | "placeholder", value: string) => {
     setLocalInputs((prev) => ({
@@ -129,6 +182,46 @@ export const RepeaterConfigPanel: React.FC<RepeaterConfigPanelProps> = ({
   const [tableSelectOpen, setTableSelectOpen] = useState(false);
   const [tableSearchValue, setTableSearchValue] = useState("");
 
+  // 하위 데이터 조회 설정 상태
+  const [subDataTableSelectOpen, setSubDataTableSelectOpen] = useState(false);
+  const [subDataTableSearchValue, setSubDataTableSearchValue] = useState("");
+  const [subDataTableColumns, setSubDataTableColumns] = useState<ColumnInfo[]>([]);
+  const [subDataLinkColumnOpen, setSubDataLinkColumnOpen] = useState(false);
+  const [subDataLinkColumnSearch, setSubDataLinkColumnSearch] = useState("");
+
+  // 하위 데이터 조회 테이블 컬럼 로드
+  const loadSubDataTableColumns = async (tableName: string) => {
+    if (!tableName) {
+      setSubDataTableColumns([]);
+      return;
+    }
+    try {
+      const response = await apiClient.get(`/table-management/tables/${tableName}/columns`);
+      let columns: ColumnInfo[] = [];
+      if (response.data?.success && response.data?.data) {
+        if (Array.isArray(response.data.data.columns)) {
+          columns = response.data.data.columns;
+        } else if (Array.isArray(response.data.data)) {
+          columns = response.data.data;
+        }
+      } else if (Array.isArray(response.data)) {
+        columns = response.data;
+      }
+      setSubDataTableColumns(columns);
+      console.log("[RepeaterConfigPanel] 하위 데이터 테이블 컬럼 로드:", { tableName, count: columns.length });
+    } catch (error) {
+      console.error("[RepeaterConfigPanel] 하위 데이터 테이블 컬럼 로드 실패:", error);
+      setSubDataTableColumns([]);
+    }
+  };
+
+  // 하위 데이터 테이블이 설정되어 있으면 컬럼 로드
+  useEffect(() => {
+    if (config.subDataLookup?.lookup?.tableName) {
+      loadSubDataTableColumns(config.subDataLookup.lookup.tableName);
+    }
+  }, [config.subDataLookup?.lookup?.tableName]);
+
   // 필터링된 테이블 목록
   const filteredTables = useMemo(() => {
     if (!tableSearchValue) return allTables;
@@ -146,6 +239,86 @@ export const RepeaterConfigPanel: React.FC<RepeaterConfigPanelProps> = ({
     return table ? table.displayName || table.tableName : config.targetTable;
   }, [config.targetTable, allTables]);
 
+  // 하위 데이터 조회 테이블 표시명
+  const selectedSubDataTableLabel = useMemo(() => {
+    const tableName = config.subDataLookup?.lookup?.tableName;
+    if (!tableName) return "테이블을 선택하세요";
+    const table = allTables.find((t) => t.tableName === tableName);
+    return table ? `${table.displayName || table.tableName} (${tableName})` : tableName;
+  }, [config.subDataLookup?.lookup?.tableName, allTables]);
+
+  // 필터링된 하위 데이터 테이블 컬럼
+  const filteredSubDataColumns = useMemo(() => {
+    if (!subDataLinkColumnSearch) return subDataTableColumns;
+    const searchLower = subDataLinkColumnSearch.toLowerCase();
+    return subDataTableColumns.filter(
+      (col) =>
+        col.columnName.toLowerCase().includes(searchLower) ||
+        (col.columnLabel && col.columnLabel.toLowerCase().includes(searchLower)),
+    );
+  }, [subDataTableColumns, subDataLinkColumnSearch]);
+
+  // 하위 데이터 조회 설정 변경 핸들러
+  const handleSubDataLookupChange = (path: string, value: any) => {
+    const currentConfig = config.subDataLookup || {
+      enabled: false,
+      lookup: { tableName: "", linkColumn: "", displayColumns: [] },
+      selection: { mode: "single", requiredFields: [], requiredMode: "all" },
+      conditionalInput: { targetField: "" },
+      ui: { expandMode: "inline", maxHeight: "150px", showSummary: true },
+    };
+
+    // 경로를 따라 중첩 객체 업데이트
+    const pathParts = path.split(".");
+    let target: any = { ...currentConfig };
+    const newConfig = target;
+
+    for (let i = 0; i < pathParts.length - 1; i++) {
+      const part = pathParts[i];
+      target[part] = { ...target[part] };
+      target = target[part];
+    }
+    target[pathParts[pathParts.length - 1]] = value;
+
+    onChange({
+      ...config,
+      subDataLookup: newConfig as SubDataLookupConfig,
+    });
+  };
+
+  // 표시 컬럼 토글 핸들러
+  const handleDisplayColumnToggle = (columnName: string, checked: boolean) => {
+    const currentColumns = config.subDataLookup?.lookup?.displayColumns || [];
+    let newColumns: string[];
+    if (checked) {
+      newColumns = [...currentColumns, columnName];
+    } else {
+      newColumns = currentColumns.filter((c) => c !== columnName);
+    }
+    handleSubDataLookupChange("lookup.displayColumns", newColumns);
+  };
+
+  // 필수 선택 필드 토글 핸들러
+  const handleRequiredFieldToggle = (fieldName: string, checked: boolean) => {
+    const currentFields = config.subDataLookup?.selection?.requiredFields || [];
+    let newFields: string[];
+    if (checked) {
+      newFields = [...currentFields, fieldName];
+    } else {
+      newFields = currentFields.filter((f) => f !== fieldName);
+    }
+    handleSubDataLookupChange("selection.requiredFields", newFields);
+  };
+
+  // 컬럼 라벨 업데이트 핸들러
+  const handleColumnLabelChange = (columnName: string, label: string) => {
+    const currentLabels = config.subDataLookup?.lookup?.columnLabels || {};
+    handleSubDataLookupChange("lookup.columnLabels", {
+      ...currentLabels,
+      [columnName]: label,
+    });
+  };
+
   return (
     <div className="space-y-4">
       {/* 대상 테이블 선택 */}
@@ -250,24 +423,485 @@ export const RepeaterConfigPanel: React.FC<RepeaterConfigPanelProps> = ({
         </p>
       </div>
 
+      {/* 하위 데이터 조회 설정 */}
+      <div className="space-y-3 rounded-lg border-2 border-purple-200 bg-purple-50/30 p-3">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <Database className="h-4 w-4 text-purple-600" />
+            <Label className="text-sm font-semibold text-purple-800">하위 데이터 조회</Label>
+          </div>
+          <Switch
+            checked={config.subDataLookup?.enabled ?? false}
+            onCheckedChange={(checked) => handleSubDataLookupChange("enabled", checked)}
+          />
+        </div>
+        <p className="text-xs text-purple-600">
+          품목 선택 시 재고/단가 등 관련 데이터를 조회하고 선택할 수 있습니다.
+        </p>
+
+        {config.subDataLookup?.enabled && (
+          <div className="space-y-4 pt-2">
+            {/* 조회 테이블 선택 */}
+            <div className="space-y-2">
+              <Label className="text-xs font-medium text-purple-700">조회 테이블</Label>
+              <Popover open={subDataTableSelectOpen} onOpenChange={setSubDataTableSelectOpen}>
+                <PopoverTrigger asChild>
+                  <Button
+                    variant="outline"
+                    role="combobox"
+                    aria-expanded={subDataTableSelectOpen}
+                    className="h-9 w-full justify-between text-xs"
+                  >
+                    {selectedSubDataTableLabel}
+                    <ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
+                  </Button>
+                </PopoverTrigger>
+                <PopoverContent className="w-full p-0" align="start">
+                  <Command>
+                    <CommandInput
+                      placeholder="테이블 검색..."
+                      value={subDataTableSearchValue}
+                      onValueChange={setSubDataTableSearchValue}
+                      className="h-8 text-xs"
+                    />
+                    <CommandEmpty>테이블을 찾을 수 없습니다.</CommandEmpty>
+                    <CommandGroup className="max-h-48 overflow-auto">
+                      {allTables
+                        .filter((table) => {
+                          if (!subDataTableSearchValue) return true;
+                          const searchLower = subDataTableSearchValue.toLowerCase();
+                          return (
+                            table.tableName.toLowerCase().includes(searchLower) ||
+                            (table.displayName && table.displayName.toLowerCase().includes(searchLower))
+                          );
+                        })
+                        .map((table) => (
+                          <CommandItem
+                            key={table.tableName}
+                            value={table.tableName}
+                            onSelect={(currentValue) => {
+                              handleSubDataLookupChange("lookup.tableName", currentValue);
+                              loadSubDataTableColumns(currentValue);
+                              setSubDataTableSelectOpen(false);
+                              setSubDataTableSearchValue("");
+                            }}
+                            className="text-xs"
+                          >
+                            <Check
+                              className={cn(
+                                "mr-2 h-3 w-3",
+                                config.subDataLookup?.lookup?.tableName === table.tableName
+                                  ? "opacity-100"
+                                  : "opacity-0",
+                              )}
+                            />
+                            <div>
+                              <div className="font-medium">{table.displayName || table.tableName}</div>
+                              <div className="text-gray-500">{table.tableName}</div>
+                            </div>
+                          </CommandItem>
+                        ))}
+                    </CommandGroup>
+                  </Command>
+                </PopoverContent>
+              </Popover>
+              <p className="text-[10px] text-purple-500">예: inventory (재고), price_list (단가표)</p>
+            </div>
+
+            {/* 연결 컬럼 선택 */}
+            {config.subDataLookup?.lookup?.tableName && (
+              <div className="space-y-2">
+                <Label className="text-xs font-medium text-purple-700">연결 컬럼</Label>
+                <Popover open={subDataLinkColumnOpen} onOpenChange={setSubDataLinkColumnOpen}>
+                  <PopoverTrigger asChild>
+                    <Button
+                      variant="outline"
+                      role="combobox"
+                      aria-expanded={subDataLinkColumnOpen}
+                      className="h-9 w-full justify-between text-xs"
+                    >
+                      {config.subDataLookup?.lookup?.linkColumn
+                        ? (() => {
+                            const col = subDataTableColumns.find(
+                              (c) => c.columnName === config.subDataLookup?.lookup?.linkColumn,
+                            );
+                            return col
+                              ? `${col.columnLabel || col.columnName} (${col.columnName})`
+                              : config.subDataLookup?.lookup?.linkColumn;
+                          })()
+                        : "연결 컬럼 선택"}
+                      <ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
+                    </Button>
+                  </PopoverTrigger>
+                  <PopoverContent className="w-full p-0" align="start">
+                    <Command>
+                      <CommandInput
+                        placeholder="컬럼 검색..."
+                        value={subDataLinkColumnSearch}
+                        onValueChange={setSubDataLinkColumnSearch}
+                        className="h-8 text-xs"
+                      />
+                      <CommandEmpty>컬럼을 찾을 수 없습니다.</CommandEmpty>
+                      <CommandGroup className="max-h-48 overflow-auto">
+                        {filteredSubDataColumns.map((col) => (
+                          <CommandItem
+                            key={col.columnName}
+                            value={col.columnName}
+                            onSelect={(currentValue) => {
+                              handleSubDataLookupChange("lookup.linkColumn", currentValue);
+                              setSubDataLinkColumnOpen(false);
+                              setSubDataLinkColumnSearch("");
+                            }}
+                            className="text-xs"
+                          >
+                            <Check
+                              className={cn(
+                                "mr-2 h-3 w-3",
+                                config.subDataLookup?.lookup?.linkColumn === col.columnName
+                                  ? "opacity-100"
+                                  : "opacity-0",
+                              )}
+                            />
+                            <div>
+                              <div className="font-medium">{col.columnLabel || col.columnName}</div>
+                              <div className="text-gray-500">{col.columnName}</div>
+                            </div>
+                          </CommandItem>
+                        ))}
+                      </CommandGroup>
+                    </Command>
+                  </PopoverContent>
+                </Popover>
+                <p className="text-[10px] text-purple-500">상위 데이터와 연결할 컬럼 (예: item_code)</p>
+              </div>
+            )}
+
+            {/* 표시 컬럼 선택 */}
+            {config.subDataLookup?.lookup?.tableName && subDataTableColumns.length > 0 && (
+              <div className="space-y-2">
+                <Label className="text-xs font-medium text-purple-700">표시 컬럼</Label>
+                <div className="max-h-32 space-y-1 overflow-y-auto rounded border bg-white p-2">
+                  {subDataTableColumns.map((col) => {
+                    const isSelected = config.subDataLookup?.lookup?.displayColumns?.includes(col.columnName);
+                    return (
+                      <div key={col.columnName} className="flex items-center gap-2">
+                        <Checkbox
+                          id={`display-col-${col.columnName}`}
+                          checked={isSelected}
+                          onCheckedChange={(checked) => handleDisplayColumnToggle(col.columnName, checked as boolean)}
+                        />
+                        <Label
+                          htmlFor={`display-col-${col.columnName}`}
+                          className="flex-1 cursor-pointer text-xs font-normal"
+                        >
+                          {col.columnLabel || col.columnName}
+                          <span className="ml-1 text-gray-400">({col.columnName})</span>
+                        </Label>
+                      </div>
+                    );
+                  })}
+                </div>
+                <p className="text-[10px] text-purple-500">조회 결과에 표시할 컬럼들 (예: 창고, 위치, 수량)</p>
+              </div>
+            )}
+
+            {/* 선택 설정 */}
+            {(config.subDataLookup?.lookup?.displayColumns?.length || 0) > 0 && (
+              <div className="space-y-3 border-t border-purple-200 pt-3">
+                <Label className="text-xs font-medium text-purple-700">선택 설정</Label>
+
+                {/* 선택 모드 */}
+                <div className="space-y-2">
+                  <Label className="text-[10px] text-purple-600">선택 모드</Label>
+                  <Select
+                    value={config.subDataLookup?.selection?.mode || "single"}
+                    onValueChange={(v) => handleSubDataLookupChange("selection.mode", v)}
+                  >
+                    <SelectTrigger className="h-8 text-xs">
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="single" className="text-xs">
+                        단일 선택
+                      </SelectItem>
+                      <SelectItem value="multiple" className="text-xs">
+                        다중 선택
+                      </SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+
+                {/* 필수 선택 필드 */}
+                <div className="space-y-2">
+                  <Label className="text-[10px] text-purple-600">필수 선택 필드</Label>
+                  <div className="flex flex-wrap gap-2">
+                    {config.subDataLookup?.lookup?.displayColumns?.map((colName) => {
+                      const col = subDataTableColumns.find((c) => c.columnName === colName);
+                      const isRequired = config.subDataLookup?.selection?.requiredFields?.includes(colName);
+                      return (
+                        <div key={colName} className="flex items-center gap-1">
+                          <Checkbox
+                            id={`required-field-${colName}`}
+                            checked={isRequired}
+                            onCheckedChange={(checked) => handleRequiredFieldToggle(colName, checked as boolean)}
+                          />
+                          <Label htmlFor={`required-field-${colName}`} className="cursor-pointer text-xs font-normal">
+                            {col?.columnLabel || colName}
+                          </Label>
+                        </div>
+                      );
+                    })}
+                  </div>
+                  <p className="text-[10px] text-purple-500">이 필드들이 선택되어야 입력이 활성화됩니다</p>
+                </div>
+
+                {/* 필수 조건 */}
+                {(config.subDataLookup?.selection?.requiredFields?.length || 0) > 1 && (
+                  <div className="space-y-2">
+                    <Label className="text-[10px] text-purple-600">필수 조건</Label>
+                    <Select
+                      value={config.subDataLookup?.selection?.requiredMode || "all"}
+                      onValueChange={(v) => handleSubDataLookupChange("selection.requiredMode", v)}
+                    >
+                      <SelectTrigger className="h-8 text-xs">
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="all" className="text-xs">
+                          모두 선택해야 함
+                        </SelectItem>
+                        <SelectItem value="any" className="text-xs">
+                          하나만 선택해도 됨
+                        </SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </div>
+                )}
+              </div>
+            )}
+
+            {/* 조건부 입력 설정 */}
+            {(config.subDataLookup?.lookup?.displayColumns?.length || 0) > 0 && (
+              <div className="space-y-3 border-t border-purple-200 pt-3">
+                <Label className="text-xs font-medium text-purple-700">조건부 입력 설정</Label>
+
+                {/* 활성화 대상 필드 */}
+                <div className="space-y-2">
+                  <Label className="text-[10px] text-purple-600">활성화 대상 필드</Label>
+                  <Select
+                    value={config.subDataLookup?.conditionalInput?.targetField || "__none__"}
+                    onValueChange={(v) =>
+                      handleSubDataLookupChange("conditionalInput.targetField", v === "__none__" ? "" : v)
+                    }
+                  >
+                    <SelectTrigger className="h-8 text-xs">
+                      <SelectValue placeholder="필드 선택" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="__none__" className="text-xs">
+                        선택 안함
+                      </SelectItem>
+                      {localFields.length === 0 ? (
+                        <SelectItem value="__empty__" disabled className="text-xs text-gray-400">
+                          필드 정의에서 먼저 필드를 추가하세요
+                        </SelectItem>
+                      ) : (
+                        localFields.map((f) => (
+                          <SelectItem key={f.name} value={f.name} className="text-xs">
+                            {f.label || f.name} ({f.name})
+                          </SelectItem>
+                        ))
+                      )}
+                    </SelectContent>
+                  </Select>
+                  <p className="text-[10px] text-purple-500">
+                    하위 데이터 선택 후 입력이 활성화될 필드 (예: 출고수량)
+                    {localFields.length === 0 && (
+                      <span className="ml-1 text-amber-600">* 필드 정의 필요</span>
+                    )}
+                  </p>
+                </div>
+
+                {/* 최대값 참조 필드 */}
+                <div className="space-y-2">
+                  <Label className="text-[10px] text-purple-600">최대값 참조 필드 (선택)</Label>
+                  <Select
+                    value={config.subDataLookup?.conditionalInput?.maxValueField || "__none__"}
+                    onValueChange={(v) =>
+                      handleSubDataLookupChange("conditionalInput.maxValueField", v === "__none__" ? undefined : v)
+                    }
+                  >
+                    <SelectTrigger className="h-8 text-xs">
+                      <SelectValue placeholder="필드 선택" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="__none__" className="text-xs">
+                        사용 안함
+                      </SelectItem>
+                      {subDataTableColumns.map((col) => (
+                        <SelectItem key={col.columnName} value={col.columnName} className="text-xs">
+                          {col.columnLabel || col.columnName} ({col.columnName})
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                  <p className="text-[10px] text-purple-500">입력 최대값을 제한할 하위 데이터 필드 (예: 재고수량)</p>
+                </div>
+
+                {/* 경고 임계값 */}
+                {config.subDataLookup?.conditionalInput?.maxValueField && (
+                  <div className="space-y-2">
+                    <Label className="text-[10px] text-purple-600">경고 임계값 (%)</Label>
+                    <Input
+                      type="number"
+                      min={0}
+                      max={100}
+                      value={config.subDataLookup?.conditionalInput?.warningThreshold ?? 90}
+                      onChange={(e) =>
+                        handleSubDataLookupChange("conditionalInput.warningThreshold", parseInt(e.target.value) || 90)
+                      }
+                      className="h-8 text-xs"
+                    />
+                    <p className="text-[10px] text-purple-500">이 비율 이상 입력 시 경고 표시 (예: 90%)</p>
+                  </div>
+                )}
+              </div>
+            )}
+
+            {/* UI 설정 */}
+            {(config.subDataLookup?.lookup?.displayColumns?.length || 0) > 0 && (
+              <div className="space-y-3 border-t border-purple-200 pt-3">
+                <Label className="text-xs font-medium text-purple-700">UI 설정</Label>
+
+                {/* 확장 방식 */}
+                <div className="space-y-2">
+                  <Label className="text-[10px] text-purple-600">확장 방식</Label>
+                  <Select
+                    value={config.subDataLookup?.ui?.expandMode || "inline"}
+                    onValueChange={(v) => handleSubDataLookupChange("ui.expandMode", v)}
+                  >
+                    <SelectTrigger className="h-8 text-xs">
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="inline" className="text-xs">
+                        인라인 (행 아래 확장)
+                      </SelectItem>
+                      <SelectItem value="modal" className="text-xs">
+                        모달 (팝업)
+                      </SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+
+                {/* 최대 높이 */}
+                {config.subDataLookup?.ui?.expandMode === "inline" && (
+                  <div className="space-y-2">
+                    <Label className="text-[10px] text-purple-600">최대 높이</Label>
+                    <Input
+                      value={config.subDataLookup?.ui?.maxHeight || "150px"}
+                      onChange={(e) => handleSubDataLookupChange("ui.maxHeight", e.target.value)}
+                      placeholder="150px"
+                      className="h-8 text-xs"
+                    />
+                  </div>
+                )}
+
+                {/* 요약 정보 표시 */}
+                <div className="flex items-center space-x-2">
+                  <Checkbox
+                    id="sub-data-show-summary"
+                    checked={config.subDataLookup?.ui?.showSummary ?? true}
+                    onCheckedChange={(checked) => handleSubDataLookupChange("ui.showSummary", checked)}
+                  />
+                  <Label htmlFor="sub-data-show-summary" className="cursor-pointer text-xs font-normal">
+                    요약 정보 표시
+                  </Label>
+                </div>
+              </div>
+            )}
+
+            {/* 설정 요약 */}
+            {config.subDataLookup?.lookup?.tableName && (
+              <div className="rounded bg-purple-100 p-2 text-xs">
+                <p className="font-medium text-purple-800">설정 요약</p>
+                <ul className="mt-1 space-y-0.5 text-purple-700">
+                  <li>조회 테이블: {config.subDataLookup?.lookup?.tableName || "-"}</li>
+                  <li>연결 컬럼: {config.subDataLookup?.lookup?.linkColumn || "-"}</li>
+                  <li>표시 컬럼: {config.subDataLookup?.lookup?.displayColumns?.join(", ") || "-"}</li>
+                  <li>필수 선택: {config.subDataLookup?.selection?.requiredFields?.join(", ") || "-"}</li>
+                  <li>활성화 필드: {config.subDataLookup?.conditionalInput?.targetField || "-"}</li>
+                </ul>
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+
       {/* 필드 정의 */}
       <div className="space-y-3">
-        <Label className="text-sm font-semibold">필드 정의</Label>
+        <div className="flex items-center justify-between">
+          <Label className="text-sm font-semibold">필드 정의</Label>
+          <span className="text-xs text-gray-500">드래그하거나 화살표로 순서 변경</span>
+        </div>
 
         {localFields.map((field, index) => (
-          <Card key={`${field.name}-${index}`} className="border-2">
+          <Card
+            key={`${field.name}-${index}`}
+            className={cn(
+              "border-2 transition-all",
+              draggedFieldIndex === index && "opacity-50 border-blue-400",
+              draggedFieldIndex !== null && draggedFieldIndex !== index && "border-dashed",
+            )}
+            draggable
+            onDragStart={() => handleFieldDragStart(index)}
+            onDragOver={(e) => handleFieldDragOver(e, index)}
+            onDrop={(e) => handleFieldDrop(e, index)}
+            onDragEnd={handleFieldDragEnd}
+          >
             <CardContent className="space-y-3 pt-4">
               <div className="flex items-center justify-between">
-                <span className="text-sm font-semibold text-gray-700">필드 {index + 1}</span>
-                <Button
-                  type="button"
-                  variant="ghost"
-                  size="icon"
-                  onClick={() => removeField(index)}
-                  className="h-6 w-6 text-red-500 hover:bg-red-50"
-                >
-                  <X className="h-3 w-3" />
-                </Button>
+                <div className="flex items-center gap-2">
+                  {/* 드래그 핸들 */}
+                  <GripVertical className="h-4 w-4 cursor-move text-gray-400 hover:text-gray-600" />
+                  <span className="text-sm font-semibold text-gray-700">필드 {index + 1}</span>
+                </div>
+                <div className="flex items-center gap-1">
+                  {/* 순서 변경 버튼 */}
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="icon"
+                    onClick={() => moveFieldUp(index)}
+                    disabled={index === 0}
+                    className="h-6 w-6 text-gray-500 hover:bg-gray-100 disabled:opacity-30"
+                    title="위로 이동"
+                  >
+                    <ArrowUp className="h-3 w-3" />
+                  </Button>
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="icon"
+                    onClick={() => moveFieldDown(index)}
+                    disabled={index === localFields.length - 1}
+                    className="h-6 w-6 text-gray-500 hover:bg-gray-100 disabled:opacity-30"
+                    title="아래로 이동"
+                  >
+                    <ArrowDown className="h-3 w-3" />
+                  </Button>
+                  {/* 삭제 버튼 */}
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="icon"
+                    onClick={() => removeField(index)}
+                    className="h-6 w-6 text-red-500 hover:bg-red-50"
+                    title="삭제"
+                  >
+                    <X className="h-3 w-3" />
+                  </Button>
+                </div>
               </div>
 
               <div className="grid grid-cols-2 gap-3">
diff --git a/frontend/contexts/ActiveTabContext.tsx b/frontend/contexts/ActiveTabContext.tsx
index 228dc990..72e06525 100644
--- a/frontend/contexts/ActiveTabContext.tsx
+++ b/frontend/contexts/ActiveTabContext.tsx
@@ -140,3 +140,5 @@ export const useActiveTabOptional = () => {
 
 
 
+
+
diff --git a/frontend/contexts/ScreenContext.tsx b/frontend/contexts/ScreenContext.tsx
index 0bb6a32c..5e9bb2f1 100644
--- a/frontend/contexts/ScreenContext.tsx
+++ b/frontend/contexts/ScreenContext.tsx
@@ -13,6 +13,7 @@ import type { SplitPanelPosition } from "@/contexts/SplitPanelContext";
 interface ScreenContextValue {
   screenId?: number;
   tableName?: string;
+  menuObjid?: number; // 메뉴 OBJID (카테고리 값 조회 시 필요)
   splitPanelPosition?: SplitPanelPosition; // 🆕 분할 패널 위치 (left/right)
 
   // 🆕 폼 데이터 (RepeaterFieldGroup 등 컴포넌트 데이터 저장)
@@ -39,6 +40,7 @@ const ScreenContext = createContext<ScreenContextValue | null>(null);
 interface ScreenContextProviderProps {
   screenId?: number;
   tableName?: string;
+  menuObjid?: number; // 메뉴 OBJID
   splitPanelPosition?: SplitPanelPosition; // 🆕 분할 패널 위치
   children: React.ReactNode;
 }
@@ -49,6 +51,7 @@ interface ScreenContextProviderProps {
 export function ScreenContextProvider({
   screenId,
   tableName,
+  menuObjid,
   splitPanelPosition,
   children,
 }: ScreenContextProviderProps) {
@@ -112,6 +115,7 @@ export function ScreenContextProvider({
     () => ({
       screenId,
       tableName,
+      menuObjid,
       splitPanelPosition,
       formData,
       updateFormData,
@@ -127,6 +131,7 @@ export function ScreenContextProvider({
     [
       screenId,
       tableName,
+      menuObjid,
       splitPanelPosition,
       formData,
       updateFormData,
diff --git a/frontend/contexts/ScreenMultiLangContext.tsx b/frontend/contexts/ScreenMultiLangContext.tsx
new file mode 100644
index 00000000..296a0ab6
--- /dev/null
+++ b/frontend/contexts/ScreenMultiLangContext.tsx
@@ -0,0 +1,182 @@
+"use client";
+
+import React, { createContext, useContext, useState, useEffect, useMemo, ReactNode } from "react";
+import { apiClient } from "@/lib/api/client";
+import { useMultiLang } from "@/hooks/useMultiLang";
+import { ComponentData } from "@/types/screen";
+
+interface ScreenMultiLangContextValue {
+  translations: Record<string, string>;
+  loading: boolean;
+  getTranslatedText: (langKey: string | undefined, fallback: string) => string;
+}
+
+const ScreenMultiLangContext = createContext<ScreenMultiLangContextValue | null>(null);
+
+interface ScreenMultiLangProviderProps {
+  children: ReactNode;
+  components: ComponentData[];
+  companyCode?: string;
+}
+
+/**
+ * 화면 컴포넌트들의 다국어 번역을 제공하는 Provider
+ * 모든 langKey를 수집하여 한 번에 배치 조회하고, 하위 컴포넌트에서 번역 텍스트를 사용할 수 있게 함
+ */
+export const ScreenMultiLangProvider: React.FC<ScreenMultiLangProviderProps> = ({
+  children,
+  components,
+  companyCode = "*",
+}) => {
+  const { userLang } = useMultiLang();
+  const [translations, setTranslations] = useState<Record<string, string>>({});
+  const [loading, setLoading] = useState(false);
+
+  // 모든 컴포넌트에서 langKey 수집
+  const langKeys = useMemo(() => {
+    const keys: string[] = [];
+
+    const collectLangKeys = (comps: ComponentData[]) => {
+      comps.forEach((comp) => {
+        // 컴포넌트 라벨의 langKey
+        if ((comp as any).langKey) {
+          keys.push((comp as any).langKey);
+        }
+        // componentConfig 내의 langKey (버튼 텍스트 등)
+        if ((comp as any).componentConfig?.langKey) {
+          keys.push((comp as any).componentConfig.langKey);
+        }
+        // properties 내의 langKey (레거시)
+        if ((comp as any).properties?.langKey) {
+          keys.push((comp as any).properties.langKey);
+        }
+        // 테이블 리스트 컬럼의 langKey 수집
+        if ((comp as any).componentConfig?.columns) {
+          (comp as any).componentConfig.columns.forEach((col: any) => {
+            if (col.langKey) {
+              keys.push(col.langKey);
+            }
+          });
+        }
+        // 분할패널 좌측/우측 제목 langKey 수집
+        const config = (comp as any).componentConfig;
+        if (config?.leftPanel?.langKey) {
+          keys.push(config.leftPanel.langKey);
+        }
+        if (config?.rightPanel?.langKey) {
+          keys.push(config.rightPanel.langKey);
+        }
+        // 분할패널 좌측/우측 컬럼 langKey 수집
+        if (config?.leftPanel?.columns) {
+          config.leftPanel.columns.forEach((col: any) => {
+            if (col.langKey) {
+              keys.push(col.langKey);
+            }
+          });
+        }
+        if (config?.rightPanel?.columns) {
+          config.rightPanel.columns.forEach((col: any) => {
+            if (col.langKey) {
+              keys.push(col.langKey);
+            }
+          });
+        }
+        // 추가 탭 langKey 수집
+        if (config?.additionalTabs) {
+          config.additionalTabs.forEach((tab: any) => {
+            if (tab.langKey) {
+              keys.push(tab.langKey);
+            }
+            if (tab.titleLangKey) {
+              keys.push(tab.titleLangKey);
+            }
+            if (tab.columns) {
+              tab.columns.forEach((col: any) => {
+                if (col.langKey) {
+                  keys.push(col.langKey);
+                }
+              });
+            }
+          });
+        }
+        // 자식 컴포넌트 재귀 처리
+        if ((comp as any).children) {
+          collectLangKeys((comp as any).children);
+        }
+      });
+    };
+
+    collectLangKeys(components);
+    return [...new Set(keys)]; // 중복 제거
+  }, [components]);
+
+  // langKey가 있으면 배치 조회
+  useEffect(() => {
+    const loadTranslations = async () => {
+      if (langKeys.length === 0 || !userLang) {
+        return;
+      }
+
+      setLoading(true);
+      try {
+        console.log("🌐 [ScreenMultiLang] 다국어 배치 로드:", { langKeys: langKeys.length, userLang, companyCode });
+
+        const response = await apiClient.post(
+          "/multilang/batch",
+          { langKeys },
+          {
+            params: {
+              userLang,
+              companyCode,
+            },
+          }
+        );
+
+        if (response.data?.success && response.data?.data) {
+          console.log("✅ [ScreenMultiLang] 다국어 로드 완료:", Object.keys(response.data.data).length, "개");
+          setTranslations(response.data.data);
+        }
+      } catch (error) {
+        console.error("❌ [ScreenMultiLang] 다국어 로드 실패:", error);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    loadTranslations();
+  }, [langKeys, userLang, companyCode]);
+
+  // 번역 텍스트 가져오기 헬퍼
+  const getTranslatedText = (langKey: string | undefined, fallback: string): string => {
+    if (!langKey) return fallback;
+    return translations[langKey] || fallback;
+  };
+
+  const value = useMemo(
+    () => ({
+      translations,
+      loading,
+      getTranslatedText,
+    }),
+    [translations, loading]
+  );
+
+  return <ScreenMultiLangContext.Provider value={value}>{children}</ScreenMultiLangContext.Provider>;
+};
+
+/**
+ * 화면 다국어 컨텍스트 사용 훅
+ */
+export const useScreenMultiLang = (): ScreenMultiLangContextValue => {
+  const context = useContext(ScreenMultiLangContext);
+  if (!context) {
+    // 컨텍스트가 없으면 기본값 반환 (fallback)
+    return {
+      translations: {},
+      loading: false,
+      getTranslatedText: (_, fallback) => fallback,
+    };
+  }
+  return context;
+};
+
diff --git a/frontend/hooks/useAutoFill.ts b/frontend/hooks/useAutoFill.ts
index caa1e826..381f1840 100644
--- a/frontend/hooks/useAutoFill.ts
+++ b/frontend/hooks/useAutoFill.ts
@@ -197,3 +197,5 @@ export function applyAutoFillToFormData(
 
 
 
+
+
diff --git a/frontend/lib/api/client.ts b/frontend/lib/api/client.ts
index 967e43ca..9b5b7aea 100644
--- a/frontend/lib/api/client.ts
+++ b/frontend/lib/api/client.ts
@@ -34,7 +34,11 @@ const getApiBaseUrl = (): string => {
 export const API_BASE_URL = getApiBaseUrl();
 
 // 이미지 URL을 완전한 URL로 변환하는 함수
+// 주의: 모듈 로드 시점이 아닌 런타임에 hostname을 확인해야 SSR 문제 방지
 export const getFullImageUrl = (imagePath: string): string => {
+  // 빈 값 체크
+  if (!imagePath) return "";
+  
   // 이미 전체 URL인 경우 그대로 반환
   if (imagePath.startsWith("http://") || imagePath.startsWith("https://")) {
     return imagePath;
@@ -42,8 +46,29 @@ export const getFullImageUrl = (imagePath: string): string => {
 
   // /uploads로 시작하는 상대 경로인 경우 API 서버 주소 추가
   if (imagePath.startsWith("/uploads")) {
-    const baseUrl = API_BASE_URL.replace("/api", ""); // /api 제거
-    return `${baseUrl}${imagePath}`;
+    // 런타임에 현재 hostname 확인 (SSR 시점이 아닌 클라이언트에서 실행될 때)
+    if (typeof window !== "undefined") {
+      const currentHost = window.location.hostname;
+      
+      // 프로덕션 환경: v1.vexplor.com → api.vexplor.com
+      if (currentHost === "v1.vexplor.com") {
+        return `https://api.vexplor.com${imagePath}`;
+      }
+      
+      // 로컬 개발환경
+      if (currentHost === "localhost" || currentHost === "127.0.0.1") {
+        return `http://localhost:8080${imagePath}`;
+      }
+    }
+    
+    // SSR 또는 알 수 없는 환경에서는 API_BASE_URL 사용 (fallback)
+    const baseUrl = API_BASE_URL.replace("/api", "");
+    if (baseUrl.startsWith("http://") || baseUrl.startsWith("https://")) {
+      return `${baseUrl}${imagePath}`;
+    }
+    
+    // 최종 fallback
+    return imagePath;
   }
 
   return imagePath;
diff --git a/frontend/lib/api/dynamicForm.ts b/frontend/lib/api/dynamicForm.ts
index a5a3b2eb..c9e4cf33 100644
--- a/frontend/lib/api/dynamicForm.ts
+++ b/frontend/lib/api/dynamicForm.ts
@@ -93,10 +93,15 @@ export class DynamicFormApi {
   ): Promise<ApiResponse<SaveFormDataResponse>> {
     try {
       console.log("🔄 폼 데이터 업데이트 요청:", { id, formData });
+      console.log("🌐 API URL:", `/dynamic-form/${id}`);
+      console.log("📦 요청 본문:", JSON.stringify(formData, null, 2));
 
       const response = await apiClient.put(`/dynamic-form/${id}`, formData);
 
       console.log("✅ 폼 데이터 업데이트 성공:", response.data);
+      console.log("📊 응답 상태:", response.status);
+      console.log("📋 응답 헤더:", response.headers);
+      
       return {
         success: true,
         data: response.data,
@@ -104,6 +109,8 @@ export class DynamicFormApi {
       };
     } catch (error: any) {
       console.error("❌ 폼 데이터 업데이트 실패:", error);
+      console.error("📊 에러 응답:", error.response?.data);
+      console.error("📊 에러 상태:", error.response?.status);
 
       const errorMessage = error.response?.data?.message || error.message || "데이터 업데이트 중 오류가 발생했습니다.";
 
@@ -195,14 +202,19 @@ export class DynamicFormApi {
    * 실제 테이블에서 폼 데이터 삭제
    * @param id 레코드 ID
    * @param tableName 테이블명
+   * @param screenId 화면 ID (제어관리 실행용, 선택사항)
    * @returns 삭제 결과
    */
-  static async deleteFormDataFromTable(id: string | number, tableName: string): Promise<ApiResponse<void>> {
+  static async deleteFormDataFromTable(
+    id: string | number,
+    tableName: string,
+    screenId?: number
+  ): Promise<ApiResponse<void>> {
     try {
-      console.log("🗑️ 실제 테이블에서 폼 데이터 삭제 요청:", { id, tableName });
+      console.log("🗑️ 실제 테이블에서 폼 데이터 삭제 요청:", { id, tableName, screenId });
 
       await apiClient.delete(`/dynamic-form/${id}`, {
-        data: { tableName },
+        data: { tableName, screenId },
       });
 
       console.log("✅ 실제 테이블에서 폼 데이터 삭제 성공");
@@ -549,6 +561,192 @@ export class DynamicFormApi {
       };
     }
   }
+
+  // ================================
+  // 마스터-디테일 엑셀 API
+  // ================================
+
+  /**
+   * 마스터-디테일 관계 정보 조회
+   * @param screenId 화면 ID
+   * @returns 마스터-디테일 관계 정보 (null이면 마스터-디테일 구조 아님)
+   */
+  static async getMasterDetailRelation(screenId: number): Promise<ApiResponse<MasterDetailRelation | null>> {
+    try {
+      console.log("🔍 마스터-디테일 관계 조회:", screenId);
+
+      const response = await apiClient.get(`/data/master-detail/relation/${screenId}`);
+
+      return {
+        success: true,
+        data: response.data?.data || null,
+        message: response.data?.message || "조회 완료",
+      };
+    } catch (error: any) {
+      console.error("❌ 마스터-디테일 관계 조회 실패:", error);
+      return {
+        success: false,
+        data: null,
+        message: error.response?.data?.message || error.message,
+      };
+    }
+  }
+
+  /**
+   * 마스터-디테일 엑셀 다운로드 데이터 조회
+   * @param screenId 화면 ID
+   * @param filters 필터 조건
+   * @returns JOIN된 플랫 데이터
+   */
+  static async getMasterDetailDownloadData(
+    screenId: number,
+    filters?: Record<string, any>
+  ): Promise<ApiResponse<MasterDetailDownloadData>> {
+    try {
+      console.log("📥 마스터-디테일 다운로드 데이터 조회:", { screenId, filters });
+
+      const response = await apiClient.post(`/data/master-detail/download`, {
+        screenId,
+        filters,
+      });
+
+      return {
+        success: true,
+        data: response.data?.data,
+        message: "데이터 조회 완료",
+      };
+    } catch (error: any) {
+      console.error("❌ 마스터-디테일 다운로드 실패:", error);
+      return {
+        success: false,
+        message: error.response?.data?.message || error.message,
+      };
+    }
+  }
+
+  /**
+   * 마스터-디테일 엑셀 업로드
+   * @param screenId 화면 ID
+   * @param data 엑셀에서 읽은 플랫 데이터
+   * @returns 업로드 결과
+   */
+  static async uploadMasterDetailData(
+    screenId: number,
+    data: Record<string, any>[]
+  ): Promise<ApiResponse<MasterDetailUploadResult>> {
+    try {
+      console.log("📤 마스터-디테일 업로드:", { screenId, rowCount: data.length });
+
+      const response = await apiClient.post(`/data/master-detail/upload`, {
+        screenId,
+        data,
+      });
+
+      return {
+        success: response.data?.success,
+        data: response.data?.data,
+        message: response.data?.message,
+      };
+    } catch (error: any) {
+      console.error("❌ 마스터-디테일 업로드 실패:", error);
+      return {
+        success: false,
+        message: error.response?.data?.message || error.message,
+      };
+    }
+  }
+
+  /**
+   * 마스터-디테일 간단 모드 엑셀 업로드
+   * - 마스터 정보는 UI에서 선택
+   * - 디테일 정보만 엑셀에서 업로드
+   * - 채번 규칙을 통해 마스터 키 자동 생성
+   * @param screenId 화면 ID
+   * @param detailData 디테일 데이터 배열
+   * @param masterFieldValues UI에서 선택한 마스터 필드 값
+   * @param numberingRuleId 채번 규칙 ID (optional)
+   * @param afterUploadFlowId 업로드 후 실행할 제어 ID (optional, 하위 호환성)
+   * @param afterUploadFlows 업로드 후 실행할 제어 목록 (optional)
+   * @returns 업로드 결과
+   */
+  static async uploadMasterDetailSimple(
+    screenId: number,
+    detailData: Record<string, any>[],
+    masterFieldValues: Record<string, any>,
+    numberingRuleId?: string,
+    afterUploadFlowId?: string,
+    afterUploadFlows?: Array<{ flowId: string; order: number }>
+  ): Promise<ApiResponse<MasterDetailSimpleUploadResult>> {
+    try {
+      console.log("📤 마스터-디테일 간단 모드 업로드:", {
+        screenId,
+        detailRowCount: detailData.length,
+        masterFieldValues,
+        numberingRuleId,
+        afterUploadFlows: afterUploadFlows?.length || 0,
+      });
+
+      const response = await apiClient.post(`/data/master-detail/upload-simple`, {
+        screenId,
+        detailData,
+        masterFieldValues,
+        numberingRuleId,
+        afterUploadFlowId,
+        afterUploadFlows,
+      });
+
+      return {
+        success: response.data?.success,
+        data: response.data?.data,
+        message: response.data?.message,
+      };
+    } catch (error: any) {
+      console.error("❌ 마스터-디테일 간단 모드 업로드 실패:", error);
+      return {
+        success: false,
+        message: error.response?.data?.message || error.message,
+      };
+    }
+  }
+}
+
+// 마스터-디테일 관계 타입
+export interface MasterDetailRelation {
+  masterTable: string;
+  detailTable: string;
+  masterKeyColumn: string;
+  detailFkColumn: string;
+  masterColumns: Array<{ name: string; label: string; inputType: string; isFromMaster: boolean }>;
+  detailColumns: Array<{ name: string; label: string; inputType: string; isFromMaster: boolean }>;
+}
+
+// 마스터-디테일 다운로드 데이터 타입
+export interface MasterDetailDownloadData {
+  headers: string[];
+  columns: string[];
+  data: Record<string, any>[];
+  masterColumns: string[];
+  detailColumns: string[];
+  joinKey: string;
+}
+
+// 마스터-디테일 업로드 결과 타입
+export interface MasterDetailUploadResult {
+  success: boolean;
+  masterInserted: number;
+  masterUpdated: number;
+  detailInserted: number;
+  detailDeleted: number;
+  errors: string[];
+}
+
+// 🆕 마스터-디테일 간단 모드 업로드 결과 타입
+export interface MasterDetailSimpleUploadResult {
+  success: boolean;
+  masterInserted: number;
+  detailInserted: number;
+  generatedKey: string; // 생성된 마스터 키
+  errors?: string[];
 }
 
 // 편의를 위한 기본 export
diff --git a/frontend/lib/api/entityJoin.ts b/frontend/lib/api/entityJoin.ts
index cbcab931..ddb00ac7 100644
--- a/frontend/lib/api/entityJoin.ts
+++ b/frontend/lib/api/entityJoin.ts
@@ -77,6 +77,12 @@ export const entityJoinApi = {
         filterColumn?: string;
         filterValue?: any;
       }; // 🆕 제외 필터 (다른 테이블에 이미 존재하는 데이터 제외)
+      deduplication?: {
+        enabled: boolean;
+        groupByColumn: string;
+        keepStrategy: "latest" | "earliest" | "base_price" | "current_date";
+        sortColumn?: string;
+      }; // 🆕 중복 제거 설정
       companyCodeOverride?: string; // 🆕 프리뷰용 회사 코드 오버라이드 (최고 관리자만 사용 가능)
     } = {},
   ): Promise<EntityJoinResponse> => {
@@ -110,6 +116,7 @@ export const entityJoinApi = {
         autoFilter: JSON.stringify(autoFilter), // 🔒 멀티테넌시 필터링 (오버라이드 포함)
         dataFilter: params.dataFilter ? JSON.stringify(params.dataFilter) : undefined, // 🆕 데이터 필터
         excludeFilter: params.excludeFilter ? JSON.stringify(params.excludeFilter) : undefined, // 🆕 제외 필터
+        deduplication: params.deduplication ? JSON.stringify(params.deduplication) : undefined, // 🆕 중복 제거 설정
       },
     });
     return response.data.data;
diff --git a/frontend/lib/api/excelMapping.ts b/frontend/lib/api/excelMapping.ts
new file mode 100644
index 00000000..50b046ed
--- /dev/null
+++ b/frontend/lib/api/excelMapping.ts
@@ -0,0 +1,106 @@
+import { apiClient } from "./client";
+
+export interface ExcelMappingTemplate {
+  id?: number;
+  tableName: string;
+  excelColumns: string[];
+  excelColumnsHash: string;
+  columnMappings: Record<string, string | null>; // { "엑셀컬럼": "시스템컬럼" }
+  companyCode: string;
+  createdDate?: string;
+  updatedDate?: string;
+}
+
+export interface ApiResponse<T> {
+  success: boolean;
+  data?: T;
+  message?: string;
+  error?: string;
+}
+
+/**
+ * 엑셀 컬럼 구조로 매핑 템플릿 조회
+ * 동일한 엑셀 컬럼 구조가 있으면 기존 매핑 반환
+ */
+export async function findMappingByColumns(
+  tableName: string,
+  excelColumns: string[]
+): Promise<ApiResponse<ExcelMappingTemplate | null>> {
+  try {
+    const response = await apiClient.post("/excel-mapping/find", {
+      tableName,
+      excelColumns,
+    });
+    return response.data;
+  } catch (error: any) {
+    console.error("매핑 템플릿 조회 실패:", error);
+    return {
+      success: false,
+      error: error.message || "매핑 템플릿 조회 실패",
+    };
+  }
+}
+
+/**
+ * 매핑 템플릿 저장 (UPSERT)
+ * 동일한 테이블+컬럼구조가 있으면 업데이트, 없으면 삽입
+ */
+export async function saveMappingTemplate(
+  tableName: string,
+  excelColumns: string[],
+  columnMappings: Record<string, string | null>
+): Promise<ApiResponse<ExcelMappingTemplate>> {
+  try {
+    const response = await apiClient.post("/excel-mapping/save", {
+      tableName,
+      excelColumns,
+      columnMappings,
+    });
+    return response.data;
+  } catch (error: any) {
+    console.error("매핑 템플릿 저장 실패:", error);
+    return {
+      success: false,
+      error: error.message || "매핑 템플릿 저장 실패",
+    };
+  }
+}
+
+/**
+ * 테이블의 매핑 템플릿 목록 조회
+ */
+export async function getMappingTemplates(
+  tableName: string
+): Promise<ApiResponse<ExcelMappingTemplate[]>> {
+  try {
+    const response = await apiClient.get(
+      `/excel-mapping/list/${encodeURIComponent(tableName)}`
+    );
+    return response.data;
+  } catch (error: any) {
+    console.error("매핑 템플릿 목록 조회 실패:", error);
+    return {
+      success: false,
+      error: error.message || "매핑 템플릿 목록 조회 실패",
+    };
+  }
+}
+
+/**
+ * 매핑 템플릿 삭제
+ */
+export async function deleteMappingTemplate(
+  id: number
+): Promise<ApiResponse<void>> {
+  try {
+    const response = await apiClient.delete(`/excel-mapping/${id}`);
+    return response.data;
+  } catch (error: any) {
+    console.error("매핑 템플릿 삭제 실패:", error);
+    return {
+      success: false,
+      error: error.message || "매핑 템플릿 삭제 실패",
+    };
+  }
+}
+
diff --git a/frontend/lib/api/file.ts b/frontend/lib/api/file.ts
index 4908b381..e6cab8ae 100644
--- a/frontend/lib/api/file.ts
+++ b/frontend/lib/api/file.ts
@@ -247,10 +247,40 @@ export const getFileDownloadUrl = (fileId: string): string => {
 
 /**
  * 직접 파일 경로 URL 생성 (정적 파일 서빙)
+ * 주의: 모듈 로드 시점이 아닌 런타임에 hostname을 확인해야 SSR 문제 방지
  */
 export const getDirectFileUrl = (filePath: string): string => {
+  // 빈 값 체크
+  if (!filePath) return "";
+  
+  // 이미 전체 URL인 경우 그대로 반환
+  if (filePath.startsWith("http://") || filePath.startsWith("https://")) {
+    return filePath;
+  }
+  
+  // 런타임에 현재 hostname 확인 (SSR 시점이 아닌 클라이언트에서 실행될 때)
+  if (typeof window !== "undefined") {
+    const currentHost = window.location.hostname;
+    
+    // 프로덕션 환경: v1.vexplor.com → api.vexplor.com
+    if (currentHost === "v1.vexplor.com") {
+      return `https://api.vexplor.com${filePath}`;
+    }
+    
+    // 로컬 개발환경
+    if (currentHost === "localhost" || currentHost === "127.0.0.1") {
+      return `http://localhost:8080${filePath}`;
+    }
+  }
+  
+  // SSR 또는 알 수 없는 환경에서는 환경변수 사용 (fallback)
   const baseUrl = process.env.NEXT_PUBLIC_API_URL?.replace("/api", "") || "";
-  return `${baseUrl}${filePath}`;
+  if (baseUrl.startsWith("http://") || baseUrl.startsWith("https://")) {
+    return `${baseUrl}${filePath}`;
+  }
+  
+  // 최종 fallback
+  return filePath;
 };
 
 /**
diff --git a/frontend/lib/api/multilang.ts b/frontend/lib/api/multilang.ts
new file mode 100644
index 00000000..076a4948
--- /dev/null
+++ b/frontend/lib/api/multilang.ts
@@ -0,0 +1,402 @@
+/**
+ * 다국어 관리 API 클라이언트
+ * 카테고리, 키 자동 생성, 오버라이드 등 확장 기능 포함
+ */
+
+import { apiClient } from "./client";
+
+// =====================================================
+// 타입 정의
+// =====================================================
+
+export interface Language {
+  langCode: string;
+  langName: string;
+  langNative: string;
+  isActive: string;
+  sortOrder?: number;
+}
+
+export interface LangCategory {
+  categoryId: number;
+  categoryCode: string;
+  categoryName: string;
+  parentId?: number | null;
+  level: number;
+  keyPrefix: string;
+  description?: string;
+  sortOrder: number;
+  isActive: string;
+  children?: LangCategory[];
+}
+
+export interface LangKey {
+  keyId?: number;
+  companyCode: string;
+  menuName?: string;
+  langKey: string;
+  description?: string;
+  isActive: string;
+  categoryId?: number;
+  keyMeaning?: string;
+  usageNote?: string;
+  baseKeyId?: number;
+  createdDate?: Date;
+}
+
+export interface LangText {
+  textId?: number;
+  keyId: number;
+  langCode: string;
+  langText: string;
+  isActive: string;
+}
+
+export interface GenerateKeyRequest {
+  companyCode: string;
+  categoryId: number;
+  keyMeaning: string;
+  usageNote?: string;
+  texts: Array<{
+    langCode: string;
+    langText: string;
+  }>;
+}
+
+export interface CreateOverrideKeyRequest {
+  companyCode: string;
+  baseKeyId: number;
+  texts: Array<{
+    langCode: string;
+    langText: string;
+  }>;
+}
+
+export interface KeyPreview {
+  langKey: string;
+  exists: boolean;
+  isOverride: boolean;
+  baseKeyId?: number;
+}
+
+export interface ApiResponse<T> {
+  success: boolean;
+  message?: string;
+  data?: T;
+  error?: {
+    code: string;
+    details?: any;
+  };
+}
+
+// =====================================================
+// 카테고리 관련 API
+// =====================================================
+
+/**
+ * 카테고리 트리 조회
+ */
+export async function getCategories(): Promise<ApiResponse<LangCategory[]>> {
+  try {
+    const response = await apiClient.get("/multilang/categories");
+    return response.data;
+  } catch (error: any) {
+    return {
+      success: false,
+      error: {
+        code: "CATEGORY_FETCH_ERROR",
+        details: error.message,
+      },
+    };
+  }
+}
+
+/**
+ * 카테고리 상세 조회
+ */
+export async function getCategoryById(categoryId: number): Promise<ApiResponse<LangCategory>> {
+  try {
+    const response = await apiClient.get(`/multilang/categories/${categoryId}`);
+    return response.data;
+  } catch (error: any) {
+    return {
+      success: false,
+      error: {
+        code: "CATEGORY_FETCH_ERROR",
+        details: error.message,
+      },
+    };
+  }
+}
+
+/**
+ * 카테고리 경로 조회 (부모 포함)
+ */
+export async function getCategoryPath(categoryId: number): Promise<ApiResponse<LangCategory[]>> {
+  try {
+    const response = await apiClient.get(`/multilang/categories/${categoryId}/path`);
+    return response.data;
+  } catch (error: any) {
+    return {
+      success: false,
+      error: {
+        code: "CATEGORY_PATH_ERROR",
+        details: error.message,
+      },
+    };
+  }
+}
+
+// =====================================================
+// 언어 관련 API
+// =====================================================
+
+/**
+ * 언어 목록 조회
+ */
+export async function getLanguages(): Promise<ApiResponse<Language[]>> {
+  try {
+    const response = await apiClient.get("/multilang/languages");
+    return response.data;
+  } catch (error: any) {
+    return {
+      success: false,
+      error: {
+        code: "LANGUAGE_FETCH_ERROR",
+        details: error.message,
+      },
+    };
+  }
+}
+
+// =====================================================
+// 키 관련 API
+// =====================================================
+
+/**
+ * 다국어 키 목록 조회
+ */
+export async function getLangKeys(params?: {
+  companyCode?: string;
+  menuCode?: string;
+  categoryId?: number;
+  searchText?: string;
+}): Promise<ApiResponse<LangKey[]>> {
+  try {
+    const queryParams = new URLSearchParams();
+    if (params?.companyCode) queryParams.append("companyCode", params.companyCode);
+    if (params?.menuCode) queryParams.append("menuCode", params.menuCode);
+    if (params?.categoryId) queryParams.append("categoryId", params.categoryId.toString());
+    if (params?.searchText) queryParams.append("searchText", params.searchText);
+
+    const url = `/multilang/keys${queryParams.toString() ? `?${queryParams.toString()}` : ""}`;
+    const response = await apiClient.get(url);
+    return response.data;
+  } catch (error: any) {
+    return {
+      success: false,
+      error: {
+        code: "KEYS_FETCH_ERROR",
+        details: error.message,
+      },
+    };
+  }
+}
+
+/**
+ * 키의 텍스트 조회
+ */
+export async function getLangTexts(keyId: number): Promise<ApiResponse<LangText[]>> {
+  try {
+    const response = await apiClient.get(`/multilang/keys/${keyId}/texts`);
+    return response.data;
+  } catch (error: any) {
+    return {
+      success: false,
+      error: {
+        code: "TEXTS_FETCH_ERROR",
+        details: error.message,
+      },
+    };
+  }
+}
+
+/**
+ * 키 자동 생성
+ */
+export async function generateKey(data: GenerateKeyRequest): Promise<ApiResponse<number>> {
+  try {
+    const response = await apiClient.post("/multilang/keys/generate", data);
+    return response.data;
+  } catch (error: any) {
+    return {
+      success: false,
+      error: {
+        code: "KEY_GENERATE_ERROR",
+        details: error.response?.data?.error?.details || error.message,
+      },
+    };
+  }
+}
+
+/**
+ * 키 미리보기
+ */
+export async function previewKey(
+  categoryId: number,
+  keyMeaning: string,
+  companyCode: string
+): Promise<ApiResponse<KeyPreview>> {
+  try {
+    const response = await apiClient.post("/multilang/keys/preview", {
+      categoryId,
+      keyMeaning,
+      companyCode,
+    });
+    return response.data;
+  } catch (error: any) {
+    return {
+      success: false,
+      error: {
+        code: "KEY_PREVIEW_ERROR",
+        details: error.message,
+      },
+    };
+  }
+}
+
+/**
+ * 오버라이드 키 생성
+ */
+export async function createOverrideKey(
+  data: CreateOverrideKeyRequest
+): Promise<ApiResponse<number>> {
+  try {
+    const response = await apiClient.post("/multilang/keys/override", data);
+    return response.data;
+  } catch (error: any) {
+    return {
+      success: false,
+      error: {
+        code: "OVERRIDE_CREATE_ERROR",
+        details: error.response?.data?.error?.details || error.message,
+      },
+    };
+  }
+}
+
+/**
+ * 회사별 오버라이드 키 목록 조회
+ */
+export async function getOverrideKeys(companyCode: string): Promise<ApiResponse<LangKey[]>> {
+  try {
+    const response = await apiClient.get(`/multilang/keys/overrides/${companyCode}`);
+    return response.data;
+  } catch (error: any) {
+    return {
+      success: false,
+      error: {
+        code: "OVERRIDE_KEYS_FETCH_ERROR",
+        details: error.message,
+      },
+    };
+  }
+}
+
+/**
+ * 키 텍스트 저장
+ */
+export async function saveLangTexts(
+  keyId: number,
+  texts: Array<{ langCode: string; langText: string }>
+): Promise<ApiResponse<string>> {
+  try {
+    const response = await apiClient.post(`/multilang/keys/${keyId}/texts`, { texts });
+    return response.data;
+  } catch (error: any) {
+    return {
+      success: false,
+      error: {
+        code: "TEXTS_SAVE_ERROR",
+        details: error.message,
+      },
+    };
+  }
+}
+
+/**
+ * 키 삭제
+ */
+export async function deleteLangKey(keyId: number): Promise<ApiResponse<string>> {
+  try {
+    const response = await apiClient.delete(`/multilang/keys/${keyId}`);
+    return response.data;
+  } catch (error: any) {
+    return {
+      success: false,
+      error: {
+        code: "KEY_DELETE_ERROR",
+        details: error.message,
+      },
+    };
+  }
+}
+
+/**
+ * 키 상태 토글
+ */
+export async function toggleLangKey(keyId: number): Promise<ApiResponse<string>> {
+  try {
+    const response = await apiClient.put(`/multilang/keys/${keyId}/toggle`);
+    return response.data;
+  } catch (error: any) {
+    return {
+      success: false,
+      error: {
+        code: "KEY_TOGGLE_ERROR",
+        details: error.message,
+      },
+    };
+  }
+}
+
+// =====================================================
+// 화면 라벨 다국어 자동 생성 API
+// =====================================================
+
+export interface ScreenLabelKeyResult {
+  componentId: string;
+  keyId: number;
+  langKey: string;
+}
+
+export interface GenerateScreenLabelKeysRequest {
+  screenId: number;
+  menuObjId?: string;
+  labels: Array<{
+    componentId: string;
+    label: string;
+    type?: string;
+  }>;
+}
+
+/**
+ * 화면 라벨 다국어 키 자동 생성
+ */
+export async function generateScreenLabelKeys(
+  params: GenerateScreenLabelKeysRequest
+): Promise<ApiResponse<ScreenLabelKeyResult[]>> {
+  try {
+    const response = await apiClient.post("/multilang/screen-labels", params);
+    return response.data;
+  } catch (error: any) {
+    return {
+      success: false,
+      error: {
+        code: "SCREEN_LABEL_KEY_GENERATION_ERROR",
+        details: error.message,
+      },
+    };
+  }
+}
+
diff --git a/frontend/lib/api/tableManagement.ts b/frontend/lib/api/tableManagement.ts
index d03d83bf..5953fd82 100644
--- a/frontend/lib/api/tableManagement.ts
+++ b/frontend/lib/api/tableManagement.ts
@@ -328,6 +328,40 @@ class TableManagementApi {
       };
     }
   }
+
+  /**
+   * 두 테이블 간의 엔티티 관계 자동 감지
+   * column_labels에서 정의된 엔티티/카테고리 타입 설정을 기반으로
+   * 두 테이블 간의 외래키 관계를 자동으로 감지합니다.
+   */
+  async getTableEntityRelations(
+    leftTable: string,
+    rightTable: string
+  ): Promise<ApiResponse<{
+    leftTable: string;
+    rightTable: string;
+    relations: Array<{
+      leftColumn: string;
+      rightColumn: string;
+      direction: "left_to_right" | "right_to_left";
+      inputType: string;
+      displayColumn?: string;
+    }>;
+  }>> {
+    try {
+      const response = await apiClient.get(
+        `${this.basePath}/tables/entity-relations?leftTable=${encodeURIComponent(leftTable)}&rightTable=${encodeURIComponent(rightTable)}`
+      );
+      return response.data;
+    } catch (error: any) {
+      console.error(`❌ 테이블 엔티티 관계 조회 실패: ${leftTable} <-> ${rightTable}`, error);
+      return {
+        success: false,
+        message: error.response?.data?.message || error.message || "테이블 엔티티 관계를 조회할 수 없습니다.",
+        errorCode: error.response?.data?.errorCode,
+      };
+    }
+  }
 }
 
 // 싱글톤 인스턴스 생성
diff --git a/frontend/lib/registry/DynamicComponentRenderer.tsx b/frontend/lib/registry/DynamicComponentRenderer.tsx
index f9d7a7d5..3d8b2d4e 100644
--- a/frontend/lib/registry/DynamicComponentRenderer.tsx
+++ b/frontend/lib/registry/DynamicComponentRenderer.tsx
@@ -281,10 +281,12 @@ export const DynamicComponentRenderer: React.FC<DynamicComponentRendererProps> =
         // 컴포넌트의 columnName에 해당하는 formData 값 추출
         const fieldName = (component as any).columnName || component.id;
         
-        // modal-repeater-table은 배열 데이터를 다루므로 빈 배열로 초기화
+        // 다중 레코드를 다루는 컴포넌트는 배열 데이터로 초기화
         let currentValue;
-        if (componentType === "modal-repeater-table" || componentType === "repeat-screen-modal") {
-          // EditModal에서 전달된 groupedData가 있으면 우선 사용
+        if (componentType === "modal-repeater-table" || 
+            componentType === "repeat-screen-modal" ||
+            componentType === "selected-items-detail-input") {
+          // EditModal/ScreenModal에서 전달된 groupedData가 있으면 우선 사용
           currentValue = props.groupedData || formData?.[fieldName] || [];
         } else {
           currentValue = formData?.[fieldName] || "";
@@ -413,10 +415,12 @@ export const DynamicComponentRenderer: React.FC<DynamicComponentRendererProps> =
           groupedData: props.groupedData, // ✅ 언더스코어 제거하여 직접 전달
           _groupedData: props.groupedData, // 하위 호환성 유지
           // 🆕 UniversalFormModal용 initialData 전달
-          // originalData가 비어있지 않으면 originalData 사용, 아니면 formData 사용
-          // 생성 모드에서는 originalData가 빈 객체이므로 formData를 사용해야 함
-          _initialData: (originalData && Object.keys(originalData).length > 0) ? originalData : formData,
+          // 우선순위: props.initialData > originalData > formData
+          // 조건부 컨테이너에서 전달된 initialData가 있으면 그것을 사용
+          _initialData: props.initialData || ((originalData && Object.keys(originalData).length > 0) ? originalData : formData),
           _originalData: originalData,
+          // 🆕 initialData도 직접 전달 (조건부 컨테이너 → 내부 컴포넌트)
+          initialData: props.initialData,
           // 🆕 탭 관련 정보 전달 (탭 내부의 테이블 컴포넌트에서 사용)
           parentTabId: props.parentTabId,
           parentTabsComponentId: props.parentTabsComponentId,
diff --git a/frontend/lib/registry/components/autocomplete-search-input/AutocompleteSearchInputComponent.tsx b/frontend/lib/registry/components/autocomplete-search-input/AutocompleteSearchInputComponent.tsx
index 7a115ea3..cbd2744c 100644
--- a/frontend/lib/registry/components/autocomplete-search-input/AutocompleteSearchInputComponent.tsx
+++ b/frontend/lib/registry/components/autocomplete-search-input/AutocompleteSearchInputComponent.tsx
@@ -44,7 +44,42 @@ export function AutocompleteSearchInputComponent({
   const displayField = config?.displayField || propDisplayField || "";
   const displayFields = config?.displayFields || (displayField ? [displayField] : []); // 다중 표시 필드
   const displaySeparator = config?.displaySeparator || " → "; // 구분자
-  const valueField = config?.valueField || propValueField || "";
+  
+  // valueField 결정: fieldMappings 기반으로 추론 (config.valueField가 fieldMappings에 없으면 무시)
+  const getValueField = () => {
+    // fieldMappings가 있으면 그 안에서 추론 (가장 신뢰할 수 있는 소스)
+    if (config?.fieldMappings && config.fieldMappings.length > 0) {
+      // config.valueField가 fieldMappings의 sourceField에 있으면 사용
+      if (config?.valueField) {
+        const hasValueFieldInMappings = config.fieldMappings.some(
+          (m: any) => m.sourceField === config.valueField
+        );
+        if (hasValueFieldInMappings) {
+          return config.valueField;
+        }
+        // fieldMappings에 없으면 무시하고 추론
+      }
+      
+      // _code 또는 _id로 끝나는 필드 우선 (보통 PK나 코드 필드)
+      const codeMapping = config.fieldMappings.find(
+        (m: any) => m.sourceField?.endsWith("_code") || m.sourceField?.endsWith("_id")
+      );
+      if (codeMapping) {
+        return codeMapping.sourceField;
+      }
+      
+      // 없으면 첫 번째 매핑 사용
+      return config.fieldMappings[0].sourceField || "";
+    }
+    
+    // fieldMappings가 없으면 기존 방식
+    if (config?.valueField) return config.valueField;
+    if (propValueField) return propValueField;
+    
+    return "";
+  };
+  const valueField = getValueField();
+  
   const searchFields = config?.searchFields || propSearchFields || displayFields; // 검색 필드도 다중 표시 필드 사용
   const placeholder = config?.placeholder || propPlaceholder || "검색...";
   
@@ -76,11 +111,39 @@ export function AutocompleteSearchInputComponent({
   // 선택된 데이터를 ref로도 유지 (리렌더링 시 초기화 방지)
   const selectedDataRef = useRef<EntitySearchResult | null>(null);
   const inputValueRef = useRef<string>("");
+  const initialValueLoadedRef = useRef<string | null>(null); // 초기값 로드 추적
 
   // formData에서 현재 값 가져오기 (isInteractive 모드)
-  const currentValue = isInteractive && formData && component?.columnName 
-    ? formData[component.columnName] 
-    : value;
+  // 우선순위: 1) component.columnName, 2) fieldMappings에서 valueField에 매핑된 targetField
+  const getCurrentValue = () => {
+    if (!isInteractive || !formData) {
+      return value;
+    }
+    
+    // 1. component.columnName으로 직접 바인딩된 경우
+    if (component?.columnName && formData[component.columnName] !== undefined) {
+      return formData[component.columnName];
+    }
+    
+    // 2. fieldMappings에서 valueField와 매핑된 targetField에서 값 가져오기
+    if (config?.fieldMappings && Array.isArray(config.fieldMappings)) {
+      const valueFieldMapping = config.fieldMappings.find(
+        (mapping: any) => mapping.sourceField === valueField
+      );
+      
+      if (valueFieldMapping) {
+        const targetField = valueFieldMapping.targetField || valueFieldMapping.targetColumn;
+        
+        if (targetField && formData[targetField] !== undefined) {
+          return formData[targetField];
+        }
+      }
+    }
+    
+    return value;
+  };
+  
+  const currentValue = getCurrentValue();
 
   // selectedData 변경 시 ref도 업데이트
   useEffect(() => {
@@ -98,6 +161,79 @@ export function AutocompleteSearchInputComponent({
     }
   }, []);
 
+  // 초기값이 있을 때 해당 값의 표시 텍스트를 조회하여 설정
+  useEffect(() => {
+    const loadInitialDisplayValue = async () => {
+      // 이미 로드된 값이거나, 값이 없거나, 이미 선택된 데이터가 있으면 스킵
+      if (!currentValue || selectedData || selectedDataRef.current) {
+        return;
+      }
+      
+      // 이미 같은 값을 로드한 적이 있으면 스킵
+      if (initialValueLoadedRef.current === currentValue) {
+        return;
+      }
+      
+      // 테이블명과 필드 정보가 없으면 스킵
+      if (!tableName || !valueField) {
+        return;
+      }
+      
+      console.log("🔄 AutocompleteSearchInput 초기값 로드:", {
+        currentValue,
+        tableName,
+        valueField,
+        displayFields,
+      });
+      
+      try {
+        // API를 통해 해당 값의 표시 텍스트 조회
+        const { apiClient } = await import("@/lib/api/client");
+        const filterConditionWithValue = {
+          ...filterCondition,
+          [valueField]: currentValue,
+        };
+        
+        const params = new URLSearchParams({
+          searchText: "",
+          searchFields: searchFields.join(","),
+          filterCondition: JSON.stringify(filterConditionWithValue),
+          page: "1",
+          limit: "10",
+        });
+        
+        const response = await apiClient.get<{ success: boolean; data: EntitySearchResult[] }>(
+          `/entity-search/${tableName}?${params.toString()}`
+        );
+        
+        if (response.data.success && response.data.data && response.data.data.length > 0) {
+          const matchedItem = response.data.data.find((item: EntitySearchResult) => 
+            String(item[valueField]) === String(currentValue)
+          );
+          
+          if (matchedItem) {
+            const displayText = getDisplayValue(matchedItem);
+            console.log("✅ 초기값 표시 텍스트 로드 성공:", {
+              currentValue,
+              displayText,
+              matchedItem,
+            });
+            
+            setSelectedData(matchedItem);
+            setInputValue(displayText);
+            selectedDataRef.current = matchedItem;
+            inputValueRef.current = displayText;
+            initialValueLoadedRef.current = currentValue;
+          }
+        }
+      } catch (error) {
+        console.error("❌ 초기값 표시 텍스트 로드 실패:", error);
+      }
+    };
+    
+    loadInitialDisplayValue();
+  }, [currentValue, tableName, valueField, displayFields, filterCondition, searchFields, selectedData]);
+
   // value가 변경되면 표시값 업데이트 - 단, selectedData가 있으면 유지
   useEffect(() => {
     // selectedData가 있으면 표시값 유지 (사용자가 방금 선택한 경우)
@@ -107,6 +243,7 @@ export function AutocompleteSearchInputComponent({
     
     if (!currentValue) {
       setInputValue("");
+      initialValueLoadedRef.current = null; // 값이 없어지면 초기화
     }
   }, [currentValue, selectedData]);
 
diff --git a/frontend/lib/registry/components/button-primary/ButtonPrimaryComponent.tsx b/frontend/lib/registry/components/button-primary/ButtonPrimaryComponent.tsx
index fc6c2263..e9bd91cb 100644
--- a/frontend/lib/registry/components/button-primary/ButtonPrimaryComponent.tsx
+++ b/frontend/lib/registry/components/button-primary/ButtonPrimaryComponent.tsx
@@ -27,6 +27,7 @@ import { useScreenContextOptional } from "@/contexts/ScreenContext";
 import { useSplitPanelContext, SplitPanelPosition } from "@/contexts/SplitPanelContext";
 import { applyMappingRules } from "@/lib/utils/dataMapping";
 import { apiClient } from "@/lib/api/client";
+import { useScreenMultiLang } from "@/contexts/ScreenMultiLangContext";
 
 export interface ButtonPrimaryComponentProps extends ComponentRendererProps {
   config?: ButtonPrimaryConfig;
@@ -107,6 +108,7 @@ export const ButtonPrimaryComponent: React.FC<ButtonPrimaryComponentProps> = ({
   const { isPreviewMode } = useScreenPreview(); // 프리뷰 모드 확인
   const screenContext = useScreenContextOptional(); // 화면 컨텍스트
   const splitPanelContext = useSplitPanelContext(); // 분할 패널 컨텍스트
+  const { getTranslatedText } = useScreenMultiLang(); // 다국어 컨텍스트
   // 🆕 ScreenContext에서 splitPanelPosition 가져오기 (중첩 화면에서도 작동)
   const splitPanelPosition = screenContext?.splitPanelPosition;
 
@@ -299,6 +301,20 @@ export const ButtonPrimaryComponent: React.FC<ButtonPrimaryComponentProps> = ({
   // 🆕 modalDataStore에서 선택된 데이터 확인 (분할 패널 등에서 저장됨)
   const [modalStoreData, setModalStoreData] = useState<Record<string, any[]>>({});
 
+  // 🆕 splitPanelContext?.selectedLeftData를 로컬 상태로 추적 (리렌더링 보장)
+  const [trackedSelectedLeftData, setTrackedSelectedLeftData] = useState<Record<string, any> | null>(null);
+
+  // splitPanelContext?.selectedLeftData 변경 감지 및 로컬 상태 동기화
+  useEffect(() => {
+    const newData = splitPanelContext?.selectedLeftData ?? null;
+    setTrackedSelectedLeftData(newData);
+    // console.log("🔄 [ButtonPrimary] selectedLeftData 변경 감지:", {
+    //   label: component.label,
+    //   hasData: !!newData,
+    //   dataKeys: newData ? Object.keys(newData) : [],
+    // });
+  }, [splitPanelContext?.selectedLeftData, component.label]);
+
   // modalDataStore 상태 구독 (실시간 업데이트)
   useEffect(() => {
     const actionConfig = component.componentConfig?.action;
@@ -357,8 +373,8 @@ export const ButtonPrimaryComponent: React.FC<ButtonPrimaryComponentProps> = ({
 
     // 2. 분할 패널 좌측 선택 데이터 확인
     if (rowSelectionSource === "auto" || rowSelectionSource === "splitPanelLeft") {
-      // SplitPanelContext에서 확인
-      if (splitPanelContext?.selectedLeftData && Object.keys(splitPanelContext.selectedLeftData).length > 0) {
+      // SplitPanelContext에서 확인 (trackedSelectedLeftData 사용으로 리렌더링 보장)
+      if (trackedSelectedLeftData && Object.keys(trackedSelectedLeftData).length > 0) {
         if (!hasSelection) {
           hasSelection = true;
           selectionCount = 1;
@@ -397,7 +413,7 @@ export const ButtonPrimaryComponent: React.FC<ButtonPrimaryComponentProps> = ({
       selectionCount,
       selectionSource,
       hasSplitPanelContext: !!splitPanelContext,
-      selectedLeftData: splitPanelContext?.selectedLeftData,
+      trackedSelectedLeftData: trackedSelectedLeftData,
       selectedRowsData: selectedRowsData?.length,
       selectedRows: selectedRows?.length,
       flowSelectedData: flowSelectedData?.length,
@@ -429,7 +445,7 @@ export const ButtonPrimaryComponent: React.FC<ButtonPrimaryComponentProps> = ({
     component.label,
     selectedRows,
     selectedRowsData,
-    splitPanelContext?.selectedLeftData,
+    trackedSelectedLeftData,
     flowSelectedData,
     splitPanelContext,
     modalStoreData,
@@ -721,61 +737,99 @@ export const ButtonPrimaryComponent: React.FC<ButtonPrimaryComponentProps> = ({
       return;
     }
 
-    if (!screenContext) {
-      toast.error("화면 컨텍스트를 찾을 수 없습니다.");
-      return;
-    }
-
     try {
-      // 1. 소스 컴포넌트에서 데이터 가져오기
-      let sourceProvider = screenContext.getDataProvider(dataTransferConfig.sourceComponentId);
+      let sourceData: any[] = [];
 
-      // 🆕 소스 컴포넌트를 찾을 수 없으면, 현재 화면에서 테이블 리스트 자동 탐색
-      // (조건부 컨테이너의 다른 섹션으로 전환했을 때 이전 컴포넌트 ID가 남아있는 경우 대응)
-      if (!sourceProvider) {
-        console.log(`⚠️ [ButtonPrimary] 지정된 소스 컴포넌트를 찾을 수 없음: ${dataTransferConfig.sourceComponentId}`);
-        console.log(`🔍 [ButtonPrimary] 현재 화면에서 DataProvider 자동 탐색...`);
-
-        const allProviders = screenContext.getAllDataProviders();
-
-        // 테이블 리스트 우선 탐색
-        for (const [id, provider] of allProviders) {
-          if (provider.componentType === "table-list") {
-            sourceProvider = provider;
-            console.log(`✅ [ButtonPrimary] 테이블 리스트 자동 발견: ${id}`);
-            break;
-          }
-        }
-
-        // 테이블 리스트가 없으면 첫 번째 DataProvider 사용
-        if (!sourceProvider && allProviders.size > 0) {
-          const firstEntry = allProviders.entries().next().value;
-          if (firstEntry) {
-            sourceProvider = firstEntry[1];
-            console.log(
-              `✅ [ButtonPrimary] 첫 번째 DataProvider 사용: ${firstEntry[0]} (${sourceProvider.componentType})`,
-            );
-          }
-        }
+      // 1. ScreenContext에서 DataProvider를 통해 데이터 가져오기 시도
+      if (screenContext) {
+        let sourceProvider = screenContext.getDataProvider(dataTransferConfig.sourceComponentId);
 
+        // 소스 컴포넌트를 찾을 수 없으면, 현재 화면에서 테이블 리스트 자동 탐색
         if (!sourceProvider) {
-          toast.error("데이터를 제공할 수 있는 컴포넌트를 찾을 수 없습니다.");
-          return;
+          console.log(`⚠️ [ButtonPrimary] 지정된 소스 컴포넌트를 찾을 수 없음: ${dataTransferConfig.sourceComponentId}`);
+          console.log(`🔍 [ButtonPrimary] 현재 화면에서 DataProvider 자동 탐색...`);
+
+          const allProviders = screenContext.getAllDataProviders();
+          console.log(`📋 [ButtonPrimary] 등록된 DataProvider 목록:`, Array.from(allProviders.keys()));
+
+          // 테이블 리스트 우선 탐색
+          for (const [id, provider] of allProviders) {
+            if (provider.componentType === "table-list") {
+              sourceProvider = provider;
+              console.log(`✅ [ButtonPrimary] 테이블 리스트 자동 발견: ${id}`);
+              break;
+            }
+          }
+
+          // 테이블 리스트가 없으면 첫 번째 DataProvider 사용
+          if (!sourceProvider && allProviders.size > 0) {
+            const firstEntry = allProviders.entries().next().value;
+            if (firstEntry) {
+              sourceProvider = firstEntry[1];
+              console.log(
+                `✅ [ButtonPrimary] 첫 번째 DataProvider 사용: ${firstEntry[0]} (${sourceProvider.componentType})`,
+              );
+            }
+          }
+        }
+
+        if (sourceProvider) {
+          const rawSourceData = sourceProvider.getSelectedData();
+          sourceData = Array.isArray(rawSourceData) ? rawSourceData : rawSourceData ? [rawSourceData] : [];
+          console.log("📦 [ButtonPrimary] ScreenContext에서 소스 데이터 획득:", { 
+            rawSourceData, 
+            sourceData, 
+            count: sourceData.length 
+          });
+        }
+      } else {
+        console.log("⚠️ [ButtonPrimary] ScreenContext가 없습니다. modalDataStore에서 데이터를 찾습니다.");
+      }
+
+      // 2. ScreenContext에서 데이터를 찾지 못한 경우, modalDataStore에서 fallback 조회
+      if (sourceData.length === 0) {
+        console.log("🔍 [ButtonPrimary] modalDataStore에서 데이터 탐색 시도...");
+        
+        try {
+          const { useModalDataStore } = await import("@/stores/modalDataStore");
+          const dataRegistry = useModalDataStore.getState().dataRegistry;
+          
+          console.log("📋 [ButtonPrimary] modalDataStore 전체 키:", Object.keys(dataRegistry));
+
+          // sourceTableName이 지정되어 있으면 해당 테이블에서 조회
+          const sourceTableName = dataTransferConfig.sourceTableName || tableName;
+          
+          if (sourceTableName && dataRegistry[sourceTableName]) {
+            const modalData = dataRegistry[sourceTableName];
+            sourceData = modalData.map((item: any) => item.originalData || item);
+            console.log(`✅ [ButtonPrimary] modalDataStore에서 데이터 발견 (${sourceTableName}):`, sourceData.length, "건");
+          } else {
+            // 테이블명으로 못 찾으면 첫 번째 데이터 사용
+            const firstKey = Object.keys(dataRegistry)[0];
+            if (firstKey && dataRegistry[firstKey]?.length > 0) {
+              const modalData = dataRegistry[firstKey];
+              sourceData = modalData.map((item: any) => item.originalData || item);
+              console.log(`✅ [ButtonPrimary] modalDataStore 첫 번째 키에서 데이터 발견 (${firstKey}):`, sourceData.length, "건");
+            }
+          }
+        } catch (err) {
+          console.warn("⚠️ [ButtonPrimary] modalDataStore 접근 실패:", err);
         }
       }
 
-      const rawSourceData = sourceProvider.getSelectedData();
-
-      // 🆕 배열이 아닌 경우 배열로 변환
-      const sourceData = Array.isArray(rawSourceData) ? rawSourceData : rawSourceData ? [rawSourceData] : [];
-
-      console.log("📦 소스 데이터:", { rawSourceData, sourceData, isArray: Array.isArray(rawSourceData) });
-
+      // 3. 여전히 데이터가 없으면 에러
       if (!sourceData || sourceData.length === 0) {
-        toast.warning("선택된 데이터가 없습니다.");
+        console.error("❌ [ButtonPrimary] 선택된 데이터를 찾을 수 없습니다.", {
+          hasScreenContext: !!screenContext,
+          sourceComponentId: dataTransferConfig.sourceComponentId,
+          sourceTableName: dataTransferConfig.sourceTableName || tableName,
+        });
+        toast.warning("선택된 데이터가 없습니다. 항목을 먼저 선택해주세요.");
         return;
       }
 
+      console.log("📦 [ButtonPrimary] 최종 소스 데이터:", { sourceData, count: sourceData.length });
+
       // 1.5. 추가 데이터 소스 처리 (예: 조건부 컨테이너의 카테고리 값)
       let additionalData: Record<string, any> = {};
 
@@ -1306,7 +1360,10 @@ export const ButtonPrimaryComponent: React.FC<ButtonPrimaryComponentProps> = ({
     ...userStyle,
   };
 
-  const buttonContent = processedConfig.text !== undefined ? processedConfig.text : component.label || "버튼";
+  // 다국어 적용: componentConfig.langKey가 있으면 번역 텍스트 사용
+  const langKey = (component as any).componentConfig?.langKey;
+  const originalButtonText = processedConfig.text !== undefined ? processedConfig.text : component.label || "버튼";
+  const buttonContent = getTranslatedText(langKey, originalButtonText);
 
   return (
     <>
diff --git a/frontend/lib/registry/components/conditional-container/ConditionalContainerComponent.tsx b/frontend/lib/registry/components/conditional-container/ConditionalContainerComponent.tsx
index db3fde4c..e3d84d43 100644
--- a/frontend/lib/registry/components/conditional-container/ConditionalContainerComponent.tsx
+++ b/frontend/lib/registry/components/conditional-container/ConditionalContainerComponent.tsx
@@ -42,7 +42,16 @@ export function ConditionalContainerComponent({
   className,
   groupedData, // 🆕 그룹 데이터
   onSave, // 🆕 EditModal의 handleSave 콜백
+  initialData, // 🆕 수정 모드: 초기 데이터 (발주일, 담당자, 메모 등)
 }: ConditionalContainerProps) {
+  // 🔍 디버그: initialData 수신 확인
+  React.useEffect(() => {
+    console.log("[ConditionalContainer] initialData 수신:", {
+      hasInitialData: !!initialData,
+      initialDataKeys: initialData ? Object.keys(initialData) : [],
+      initialData,
+    });
+  }, [initialData]);
   
   // 화면 컨텍스트 (데이터 제공자로 등록)
   const screenContext = useScreenContextOptional();
@@ -221,6 +230,7 @@ export function ConditionalContainerComponent({
                 onSave={onSave}
                 controlField={controlField}
                 selectedCondition={selectedValue}
+                initialData={initialData}
               />
             ))}
           </div>
@@ -244,6 +254,7 @@ export function ConditionalContainerComponent({
                 onSave={onSave}
                 controlField={controlField}
                 selectedCondition={selectedValue}
+                initialData={initialData}
               />
             ) : null
           )
diff --git a/frontend/lib/registry/components/conditional-container/ConditionalSectionViewer.tsx b/frontend/lib/registry/components/conditional-container/ConditionalSectionViewer.tsx
index 59c82421..1338f40b 100644
--- a/frontend/lib/registry/components/conditional-container/ConditionalSectionViewer.tsx
+++ b/frontend/lib/registry/components/conditional-container/ConditionalSectionViewer.tsx
@@ -29,7 +29,17 @@ export function ConditionalSectionViewer({
   onSave, // 🆕 EditModal의 handleSave 콜백
   controlField, // 🆕 조건부 컨테이너의 제어 필드명
   selectedCondition, // 🆕 현재 선택된 조건 값
+  initialData, // 🆕 수정 모드: 초기 데이터 (발주일, 담당자, 메모 등)
 }: ConditionalSectionViewerProps) {
+  // 🔍 디버그: initialData 수신 확인
+  React.useEffect(() => {
+    console.log("[ConditionalSectionViewer] initialData 수신:", {
+      sectionId,
+      hasInitialData: !!initialData,
+      initialDataKeys: initialData ? Object.keys(initialData) : [],
+      initialData,
+    });
+  }, [initialData, sectionId]);
   const { userId, userName, user } = useAuth();
   const [isLoading, setIsLoading] = useState(false);
   const [components, setComponents] = useState<ComponentData[]>([]);
@@ -191,6 +201,7 @@ export function ConditionalSectionViewer({
                             onFormDataChange={onFormDataChange}
                             groupedData={groupedData}
                             onSave={hasUniversalFormModal ? undefined : onSave}
+                            initialData={initialData}
                           />
                         </div>
                       );
diff --git a/frontend/lib/registry/components/conditional-container/types.ts b/frontend/lib/registry/components/conditional-container/types.ts
index 284e0855..24ba2033 100644
--- a/frontend/lib/registry/components/conditional-container/types.ts
+++ b/frontend/lib/registry/components/conditional-container/types.ts
@@ -47,6 +47,7 @@ export interface ConditionalContainerProps {
   onFormDataChange?: (fieldName: string, value: any) => void;
   groupedData?: Record<string, any>[]; // 🆕 그룹 데이터 (EditModal → ModalRepeaterTable)
   onSave?: () => Promise<void>; // 🆕 EditModal의 handleSave 콜백
+  initialData?: Record<string, any>; // 🆕 수정 모드: 초기 데이터 (발주일, 담당자, 메모 등)
   
   // 화면 편집기 관련
   isDesignMode?: boolean; // 디자인 모드 여부
@@ -82,5 +83,7 @@ export interface ConditionalSectionViewerProps {
   // 🆕 조건부 컨테이너 정보 (자식 화면에 전달)
   controlField?: string; // 제어 필드명 (예: "inbound_type")
   selectedCondition?: string; // 현재 선택된 조건 값 (예: "PURCHASE_IN")
+  // 🆕 수정 모드: 초기 데이터 전달 (발주일, 담당자, 메모 등)
+  initialData?: Record<string, any>;
 }
 
diff --git a/frontend/lib/registry/components/entity-search-input/EntitySearchInputComponent.tsx b/frontend/lib/registry/components/entity-search-input/EntitySearchInputComponent.tsx
index 8bdd5758..5045a43b 100644
--- a/frontend/lib/registry/components/entity-search-input/EntitySearchInputComponent.tsx
+++ b/frontend/lib/registry/components/entity-search-input/EntitySearchInputComponent.tsx
@@ -35,7 +35,9 @@ export function EntitySearchInputComponent({
   parentValue: parentValueProp,
   parentFieldId,
   formData,
-  // 🆕 추가 props
+  // 다중선택 props
+  multiple: multipleProp,
+  // 추가 props
   component,
   isInteractive,
   onFormDataChange,
@@ -49,10 +51,14 @@ export function EntitySearchInputComponent({
   // uiMode가 있으면 우선 사용, 없으면 modeProp 사용, 기본값 "combo"
   const mode = (uiMode || modeProp || "combo") as "select" | "modal" | "combo" | "autocomplete";
 
-  // 연쇄관계 설정 추출 (webTypeConfig 또는 component.componentConfig에서)
-  const config = component?.componentConfig || {};
+  // 다중선택 및 연쇄관계 설정 (props > webTypeConfig > componentConfig 순서)
+  const config = component?.componentConfig || component?.webTypeConfig || {};
+  const isMultiple = multipleProp ?? config.multiple ?? false;
+
+  // 연쇄관계 설정 추출
   const effectiveCascadingRelationCode = cascadingRelationCode || config.cascadingRelationCode;
-  const effectiveParentFieldId = parentFieldId || config.parentFieldId;
+  // cascadingParentField: ConfigPanel에서 저장되는 필드명
+  const effectiveParentFieldId = parentFieldId || config.cascadingParentField || config.parentFieldId;
   const effectiveCascadingRole = config.cascadingRole; // "parent" | "child" | undefined
 
   // 부모 역할이면 연쇄관계 로직 적용 안함 (자식만 부모 값에 따라 필터링됨)
@@ -67,11 +73,27 @@ export function EntitySearchInputComponent({
   const [isLoadingOptions, setIsLoadingOptions] = useState(false);
   const [optionsLoaded, setOptionsLoaded] = useState(false);
 
+  // 다중선택 상태 (콤마로 구분된 값들)
+  const [selectedValues, setSelectedValues] = useState<string[]>([]);
+  const [selectedDataList, setSelectedDataList] = useState<EntitySearchResult[]>([]);
+
   // 연쇄관계 상태
   const [cascadingOptions, setCascadingOptions] = useState<EntitySearchResult[]>([]);
   const [isCascadingLoading, setIsCascadingLoading] = useState(false);
   const previousParentValue = useRef<any>(null);
 
+  // 다중선택 초기값 설정
+  useEffect(() => {
+    if (isMultiple && value) {
+      const vals =
+        typeof value === "string" ? value.split(",").filter(Boolean) : Array.isArray(value) ? value : [value];
+      setSelectedValues(vals.map(String));
+    } else if (isMultiple && !value) {
+      setSelectedValues([]);
+      setSelectedDataList([]);
+    }
+  }, [isMultiple, value]);
+
   // 부모 필드 값 결정 (직접 전달 또는 formData에서 추출) - 자식 역할일 때만 필요
   const parentValue = isChildRole
     ? (parentValueProp ?? (effectiveParentFieldId && formData ? formData[effectiveParentFieldId] : undefined))
@@ -248,23 +270,75 @@ export function EntitySearchInputComponent({
   }, [value, displayField, effectiveOptions, mode, valueField, tableName, selectedData]);
 
   const handleSelect = (newValue: any, fullData: EntitySearchResult) => {
-    setSelectedData(fullData);
-    setDisplayValue(fullData[displayField] || "");
-    onChange?.(newValue, fullData);
+    if (isMultiple) {
+      // 다중선택 모드
+      const valueStr = String(newValue);
+      const isAlreadySelected = selectedValues.includes(valueStr);
+
+      let newSelectedValues: string[];
+      let newSelectedDataList: EntitySearchResult[];
+
+      if (isAlreadySelected) {
+        // 이미 선택된 항목이면 제거
+        newSelectedValues = selectedValues.filter((v) => v !== valueStr);
+        newSelectedDataList = selectedDataList.filter((d) => String(d[valueField]) !== valueStr);
+      } else {
+        // 선택되지 않은 항목이면 추가
+        newSelectedValues = [...selectedValues, valueStr];
+        newSelectedDataList = [...selectedDataList, fullData];
+      }
+
+      setSelectedValues(newSelectedValues);
+      setSelectedDataList(newSelectedDataList);
+
+      const joinedValue = newSelectedValues.join(",");
+      onChange?.(joinedValue, newSelectedDataList);
+
+      if (isInteractive && onFormDataChange && component?.columnName) {
+        onFormDataChange(component.columnName, joinedValue);
+        console.log("📤 EntitySearchInput (multiple) -> onFormDataChange:", component.columnName, joinedValue);
+      }
+    } else {
+      // 단일선택 모드
+      setSelectedData(fullData);
+      setDisplayValue(fullData[displayField] || "");
+      onChange?.(newValue, fullData);
+
+      if (isInteractive && onFormDataChange && component?.columnName) {
+        onFormDataChange(component.columnName, newValue);
+        console.log("📤 EntitySearchInput -> onFormDataChange:", component.columnName, newValue);
+      }
+    }
+  };
+
+  // 다중선택 모드에서 개별 항목 제거
+  const handleRemoveValue = (valueToRemove: string) => {
+    const newSelectedValues = selectedValues.filter((v) => v !== valueToRemove);
+    const newSelectedDataList = selectedDataList.filter((d) => String(d[valueField]) !== valueToRemove);
+
+    setSelectedValues(newSelectedValues);
+    setSelectedDataList(newSelectedDataList);
+
+    const joinedValue = newSelectedValues.join(",");
+    onChange?.(joinedValue || null, newSelectedDataList);
 
-    // 🆕 onFormDataChange 호출 (formData에 값 저장)
     if (isInteractive && onFormDataChange && component?.columnName) {
-      onFormDataChange(component.columnName, newValue);
-      console.log("📤 EntitySearchInput -> onFormDataChange:", component.columnName, newValue);
+      onFormDataChange(component.columnName, joinedValue || null);
+      console.log("📤 EntitySearchInput (remove) -> onFormDataChange:", component.columnName, joinedValue);
     }
   };
 
   const handleClear = () => {
-    setDisplayValue("");
-    setSelectedData(null);
-    onChange?.(null, null);
+    if (isMultiple) {
+      setSelectedValues([]);
+      setSelectedDataList([]);
+      onChange?.(null, []);
+    } else {
+      setDisplayValue("");
+      setSelectedData(null);
+      onChange?.(null, null);
+    }
 
-    // 🆕 onFormDataChange 호출 (formData에서 값 제거)
     if (isInteractive && onFormDataChange && component?.columnName) {
       onFormDataChange(component.columnName, null);
       console.log("📤 EntitySearchInput -> onFormDataChange (clear):", component.columnName, null);
@@ -279,7 +353,10 @@ export function EntitySearchInputComponent({
 
   const handleSelectOption = (option: EntitySearchResult) => {
     handleSelect(option[valueField], option);
-    setSelectOpen(false);
+    // 다중선택이 아닌 경우에만 드롭다운 닫기
+    if (!isMultiple) {
+      setSelectOpen(false);
+    }
   };
 
   // 높이 계산 (style에서 height가 있으면 사용, 없으면 기본값)
@@ -288,6 +365,111 @@ export function EntitySearchInputComponent({
 
   // select 모드: 검색 가능한 드롭다운
   if (mode === "select") {
+    // 다중선택 모드
+    if (isMultiple) {
+      return (
+        <div className={cn("relative flex flex-col", className)} style={style}>
+          {/* 라벨 렌더링 */}
+          {component?.label && component?.style?.labelDisplay !== false && (
+            <label className="text-muted-foreground absolute -top-6 left-0 text-sm font-medium">
+              {component.label}
+              {component.required && <span className="text-destructive">*</span>}
+            </label>
+          )}
+
+          {/* 선택된 항목들 표시 (태그 형식) */}
+          <div
+            className={cn(
+              "box-border flex min-h-[40px] w-full flex-wrap items-center gap-2 rounded-md border bg-white px-3 py-2",
+              !disabled && "hover:border-primary/50",
+              disabled && "cursor-not-allowed bg-gray-100 opacity-60",
+            )}
+            onClick={() => !disabled && !isLoading && setSelectOpen(true)}
+            style={{ cursor: disabled ? "not-allowed" : "pointer" }}
+          >
+            {selectedValues.length > 0 ? (
+              selectedValues.map((val) => {
+                const opt = effectiveOptions.find((o) => String(o[valueField]) === val);
+                const label = opt?.[displayField] || val;
+                return (
+                  <span
+                    key={val}
+                    className="flex items-center gap-1 rounded bg-blue-100 px-2 py-1 text-sm text-blue-800"
+                  >
+                    {label}
+                    {!disabled && (
+                      <button
+                        type="button"
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          handleRemoveValue(val);
+                        }}
+                        className="ml-1 text-blue-600 hover:text-blue-800"
+                      >
+                        ×
+                      </button>
+                    )}
+                  </span>
+                );
+              })
+            ) : (
+              <span className="text-muted-foreground text-sm">
+                {isLoading
+                  ? "로딩 중..."
+                  : shouldApplyCascading && !parentValue
+                    ? "상위 항목을 먼저 선택하세요"
+                    : placeholder}
+              </span>
+            )}
+            <ChevronsUpDown className="ml-auto h-4 w-4 shrink-0 opacity-50" />
+          </div>
+
+          {/* 옵션 드롭다운 */}
+          {selectOpen && !disabled && (
+            <div className="absolute top-full left-0 z-50 mt-1 w-full rounded-md border bg-white shadow-md">
+              <Command>
+                <CommandInput placeholder={`${displayField} 검색...`} className="text-xs sm:text-sm" />
+                <CommandList className="max-h-60">
+                  <CommandEmpty className="py-4 text-center text-xs sm:text-sm">항목을 찾을 수 없습니다.</CommandEmpty>
+                  <CommandGroup>
+                    {effectiveOptions.map((option, index) => {
+                      const isSelected = selectedValues.includes(String(option[valueField]));
+                      return (
+                        <CommandItem
+                          key={option[valueField] || index}
+                          value={`${option[displayField] || ""}-${option[valueField] || ""}`}
+                          onSelect={() => handleSelectOption(option)}
+                          className="text-xs sm:text-sm"
+                        >
+                          <Check className={cn("mr-2 h-4 w-4", isSelected ? "opacity-100" : "opacity-0")} />
+                          <div className="flex flex-col">
+                            <span className="font-medium">{option[displayField]}</span>
+                            {valueField !== displayField && (
+                              <span className="text-muted-foreground text-[10px]">{option[valueField]}</span>
+                            )}
+                          </div>
+                        </CommandItem>
+                      );
+                    })}
+                  </CommandGroup>
+                </CommandList>
+              </Command>
+              {/* 닫기 버튼 */}
+              <div className="border-t p-2">
+                <Button variant="outline" size="sm" onClick={() => setSelectOpen(false)} className="w-full text-xs">
+                  닫기
+                </Button>
+              </div>
+            </div>
+          )}
+
+          {/* 외부 클릭 시 닫기 */}
+          {selectOpen && <div className="fixed inset-0 z-40" onClick={() => setSelectOpen(false)} />}
+        </div>
+      );
+    }
+
+    // 단일선택 모드 (기존 로직)
     return (
       <div className={cn("relative flex flex-col", className)} style={style}>
         {/* 라벨 렌더링 */}
@@ -365,6 +547,95 @@ export function EntitySearchInputComponent({
   }
 
   // modal, combo, autocomplete 모드
+  // 다중선택 모드
+  if (isMultiple) {
+    return (
+      <div className={cn("relative flex flex-col", className)} style={style}>
+        {/* 라벨 렌더링 */}
+        {component?.label && component?.style?.labelDisplay !== false && (
+          <label className="text-muted-foreground absolute -top-6 left-0 text-sm font-medium">
+            {component.label}
+            {component.required && <span className="text-destructive">*</span>}
+          </label>
+        )}
+
+        {/* 선택된 항목들 표시 (태그 형식) + 검색 버튼 */}
+        <div className="flex h-full gap-2">
+          <div
+            className={cn(
+              "box-border flex min-h-[40px] flex-1 flex-wrap items-center gap-2 rounded-md border bg-white px-3 py-2",
+              !disabled && "hover:border-primary/50",
+              disabled && "cursor-not-allowed bg-gray-100 opacity-60",
+            )}
+          >
+            {selectedValues.length > 0 ? (
+              selectedValues.map((val) => {
+                // selectedDataList에서 먼저 찾고, 없으면 effectiveOptions에서 찾기
+                const dataFromList = selectedDataList.find((d) => String(d[valueField]) === val);
+                const opt = dataFromList || effectiveOptions.find((o) => String(o[valueField]) === val);
+                const label = opt?.[displayField] || val;
+                return (
+                  <span
+                    key={val}
+                    className="flex items-center gap-1 rounded bg-blue-100 px-2 py-1 text-sm text-blue-800"
+                  >
+                    {label}
+                    {!disabled && (
+                      <button
+                        type="button"
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          handleRemoveValue(val);
+                        }}
+                        className="ml-1 text-blue-600 hover:text-blue-800"
+                      >
+                        ×
+                      </button>
+                    )}
+                  </span>
+                );
+              })
+            ) : (
+              <span className="text-muted-foreground text-sm">{placeholder}</span>
+            )}
+          </div>
+
+          {/* 모달 버튼: modal 또는 combo 모드일 때만 표시 */}
+          {(mode === "modal" || mode === "combo") && (
+            <Button
+              type="button"
+              onClick={handleOpenModal}
+              disabled={disabled}
+              className={cn(!componentHeight && "h-8 text-xs sm:h-10 sm:text-sm")}
+              style={inputStyle}
+            >
+              <Search className="h-4 w-4" />
+            </Button>
+          )}
+        </div>
+
+        {/* 검색 모달: modal 또는 combo 모드일 때만 렌더링 */}
+        {(mode === "modal" || mode === "combo") && (
+          <EntitySearchModal
+            open={modalOpen}
+            onOpenChange={setModalOpen}
+            tableName={tableName}
+            displayField={displayField}
+            valueField={valueField}
+            searchFields={searchFields}
+            filterCondition={filterCondition}
+            modalTitle={modalTitle}
+            modalColumns={modalColumns}
+            onSelect={handleSelect}
+            multiple={isMultiple}
+            selectedValues={selectedValues}
+          />
+        )}
+      </div>
+    );
+  }
+
+  // 단일선택 모드 (기존 로직)
   return (
     <div className={cn("relative flex flex-col", className)} style={style}>
       {/* 라벨 렌더링 */}
diff --git a/frontend/lib/registry/components/entity-search-input/EntitySearchInputConfigPanel.tsx b/frontend/lib/registry/components/entity-search-input/EntitySearchInputConfigPanel.tsx
index 3cd4d35a..fb75daa4 100644
--- a/frontend/lib/registry/components/entity-search-input/EntitySearchInputConfigPanel.tsx
+++ b/frontend/lib/registry/components/entity-search-input/EntitySearchInputConfigPanel.tsx
@@ -747,6 +747,23 @@ export function EntitySearchInputConfigPanel({
         </p>
       </div>
 
+      <div className="space-y-2">
+        <div className="flex items-center justify-between">
+          <Label className="text-xs sm:text-sm">다중 선택</Label>
+          <Switch
+            checked={localConfig.multiple || false}
+            onCheckedChange={(checked) =>
+              updateConfig({ multiple: checked })
+            }
+          />
+        </div>
+        <p className="text-[10px] text-muted-foreground">
+          {localConfig.multiple 
+            ? "여러 항목을 선택할 수 있습니다. 값은 콤마로 구분됩니다."
+            : "하나의 항목만 선택할 수 있습니다."}
+        </p>
+      </div>
+
       <div className="space-y-2">
         <Label className="text-xs sm:text-sm">플레이스홀더</Label>
         <Input
diff --git a/frontend/lib/registry/components/entity-search-input/EntitySearchInputWrapper.tsx b/frontend/lib/registry/components/entity-search-input/EntitySearchInputWrapper.tsx
new file mode 100644
index 00000000..dd6ed5c4
--- /dev/null
+++ b/frontend/lib/registry/components/entity-search-input/EntitySearchInputWrapper.tsx
@@ -0,0 +1,83 @@
+"use client";
+
+import React from "react";
+import { EntitySearchInputComponent } from "./EntitySearchInputComponent";
+import { WebTypeComponentProps } from "@/lib/registry/types";
+
+/**
+ * EntitySearchInput 래퍼 컴포넌트
+ * WebTypeRegistry에서 사용하기 위한 래퍼로,
+ * 레지스트리 props를 EntitySearchInputComponent에 맞게 변환합니다.
+ */
+export const EntitySearchInputWrapper: React.FC<WebTypeComponentProps> = ({
+  component,
+  value,
+  onChange,
+  readonly = false,
+  ...props
+}) => {
+  // component에서 필요한 설정 추출
+  const widget = component as any;
+  const webTypeConfig = widget?.webTypeConfig || {};
+  const componentConfig = widget?.componentConfig || {};
+  
+  // 설정 우선순위: webTypeConfig > componentConfig > component 직접 속성
+  const config = { ...componentConfig, ...webTypeConfig };
+  
+  // 테이블 타입 관리에서 설정된 참조 테이블 정보 사용
+  const tableName = config.referenceTable || widget?.referenceTable || "";
+  const displayField = config.labelField || config.displayColumn || config.displayField || "name";
+  const valueField = config.valueField || config.referenceColumn || "id";
+  
+  // UI 모드: uiMode > mode 순서
+  const uiMode = config.uiMode || config.mode || "select";
+  
+  // 다중선택 설정
+  const multiple = config.multiple ?? false;
+
+  // placeholder
+  const placeholder = config.placeholder || widget?.placeholder || "항목을 선택하세요";
+
+  console.log("🏢 EntitySearchInputWrapper 렌더링:", {
+    tableName,
+    displayField,
+    valueField,
+    uiMode,
+    multiple,
+    value,
+    config,
+  });
+
+  // 테이블 정보가 없으면 안내 메시지 표시
+  if (!tableName) {
+    return (
+      <div className="text-muted-foreground flex h-full w-full items-center rounded-md border border-dashed px-3 py-2 text-sm">
+        테이블 타입 관리에서 참조 테이블을 설정해주세요
+      </div>
+    );
+  }
+
+  return (
+    <EntitySearchInputComponent
+      tableName={tableName}
+      displayField={displayField}
+      valueField={valueField}
+      uiMode={uiMode}
+      placeholder={placeholder}
+      disabled={readonly}
+      value={value}
+      onChange={onChange}
+      multiple={multiple}
+      component={component}
+      isInteractive={props.isInteractive}
+      onFormDataChange={props.onFormDataChange}
+      formData={props.formData}
+      className="h-full w-full"
+      style={widget?.style}
+      {...props}
+    />
+  );
+};
+
+EntitySearchInputWrapper.displayName = "EntitySearchInputWrapper";
+
diff --git a/frontend/lib/registry/components/entity-search-input/EntitySearchModal.tsx b/frontend/lib/registry/components/entity-search-input/EntitySearchModal.tsx
index 7f841ec3..555efe9b 100644
--- a/frontend/lib/registry/components/entity-search-input/EntitySearchModal.tsx
+++ b/frontend/lib/registry/components/entity-search-input/EntitySearchModal.tsx
@@ -11,7 +11,9 @@ import {
 } from "@/components/ui/dialog";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
-import { Search, Loader2 } from "lucide-react";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Search, Loader2, Check } from "lucide-react";
+import { cn } from "@/lib/utils";
 import { useEntitySearch } from "./useEntitySearch";
 import { EntitySearchResult } from "./types";
 
@@ -26,6 +28,9 @@ interface EntitySearchModalProps {
   modalTitle?: string;
   modalColumns?: string[];
   onSelect: (value: any, fullData: EntitySearchResult) => void;
+  // 다중선택 관련
+  multiple?: boolean;
+  selectedValues?: string[]; // 이미 선택된 값들
 }
 
 export function EntitySearchModal({
@@ -39,6 +44,8 @@ export function EntitySearchModal({
   modalTitle = "검색",
   modalColumns = [],
   onSelect,
+  multiple = false,
+  selectedValues = [],
 }: EntitySearchModalProps) {
   const [localSearchText, setLocalSearchText] = useState("");
   const {
@@ -71,7 +78,15 @@ export function EntitySearchModal({
 
   const handleSelect = (item: EntitySearchResult) => {
     onSelect(item[valueField], item);
-    onOpenChange(false);
+    // 다중선택이 아닌 경우에만 모달 닫기
+    if (!multiple) {
+      onOpenChange(false);
+    }
+  };
+
+  // 항목이 선택되어 있는지 확인
+  const isItemSelected = (item: EntitySearchResult): boolean => {
+    return selectedValues.includes(String(item[valueField]));
   };
 
   // 표시할 컬럼 결정
@@ -123,10 +138,16 @@ export function EntitySearchModal({
 
         {/* 검색 결과 테이블 */}
         <div className="border rounded-md overflow-hidden">
-          <div className="overflow-x-auto">
+          <div className="overflow-x-auto max-h-[400px] overflow-y-auto">
             <table className="w-full text-xs sm:text-sm">
-              <thead className="bg-muted">
+              <thead className="bg-muted sticky top-0">
                 <tr>
+                  {/* 다중선택 시 체크박스 컬럼 */}
+                  {multiple && (
+                    <th className="px-4 py-2 text-left font-medium text-muted-foreground w-12">
+                      선택
+                    </th>
+                  )}
                   {displayColumns.map((col) => (
                     <th
                       key={col}
@@ -135,54 +156,72 @@ export function EntitySearchModal({
                       {col}
                     </th>
                   ))}
-                  <th className="px-4 py-2 text-left font-medium text-muted-foreground w-24">
-                    선택
-                  </th>
+                  {!multiple && (
+                    <th className="px-4 py-2 text-left font-medium text-muted-foreground w-24">
+                      선택
+                    </th>
+                  )}
                 </tr>
               </thead>
               <tbody>
                 {loading && results.length === 0 ? (
                   <tr>
-                    <td colSpan={displayColumns.length + 1} className="px-4 py-8 text-center">
+                    <td colSpan={displayColumns.length + (multiple ? 1 : 2)} className="px-4 py-8 text-center">
                       <Loader2 className="h-6 w-6 animate-spin mx-auto" />
                       <p className="mt-2 text-muted-foreground">검색 중...</p>
                     </td>
                   </tr>
                 ) : results.length === 0 ? (
                   <tr>
-                    <td colSpan={displayColumns.length + 1} className="px-4 py-8 text-center text-muted-foreground">
+                    <td colSpan={displayColumns.length + (multiple ? 1 : 2)} className="px-4 py-8 text-center text-muted-foreground">
                       검색 결과가 없습니다
                     </td>
                   </tr>
                 ) : (
                   results.map((item, index) => {
                     const uniqueKey = item[valueField] !== undefined ? `${item[valueField]}` : `row-${index}`;
+                    const isSelected = isItemSelected(item);
                     return (
-                    <tr
+                      <tr
                         key={uniqueKey}
-                      className="border-t hover:bg-accent cursor-pointer transition-colors"
-                      onClick={() => handleSelect(item)}
-                    >
+                        className={cn(
+                          "border-t cursor-pointer transition-colors",
+                          isSelected ? "bg-blue-50 hover:bg-blue-100" : "hover:bg-accent"
+                        )}
+                        onClick={() => handleSelect(item)}
+                      >
+                        {/* 다중선택 시 체크박스 */}
+                        {multiple && (
+                          <td className="px-4 py-2">
+                            <Checkbox
+                              checked={isSelected}
+                              onCheckedChange={() => handleSelect(item)}
+                              onClick={(e) => e.stopPropagation()}
+                            />
+                          </td>
+                        )}
                         {displayColumns.map((col) => (
                           <td key={`${uniqueKey}-${col}`} className="px-4 py-2">
-                          {item[col] || "-"}
-                        </td>
-                      ))}
-                      <td className="px-4 py-2">
-                        <Button
-                          size="sm"
-                          variant="outline"
-                          onClick={(e) => {
-                            e.stopPropagation();
-                            handleSelect(item);
-                          }}
-                          className="h-7 text-xs"
-                        >
-                          선택
-                        </Button>
-                      </td>
-                    </tr>
-                  );
+                            {item[col] || "-"}
+                          </td>
+                        ))}
+                        {!multiple && (
+                          <td className="px-4 py-2">
+                            <Button
+                              size="sm"
+                              variant="outline"
+                              onClick={(e) => {
+                                e.stopPropagation();
+                                handleSelect(item);
+                              }}
+                              className="h-7 text-xs"
+                            >
+                              선택
+                            </Button>
+                          </td>
+                        )}
+                      </tr>
+                    );
                   })
                 )}
               </tbody>
@@ -211,12 +250,18 @@ export function EntitySearchModal({
         )}
 
         <DialogFooter className="gap-2 sm:gap-0">
+          {/* 다중선택 시 선택된 항목 수 표시 */}
+          {multiple && selectedValues.length > 0 && (
+            <div className="flex-1 text-sm text-muted-foreground">
+              {selectedValues.length}개 항목 선택됨
+            </div>
+          )}
           <Button
             variant="outline"
             onClick={() => onOpenChange(false)}
             className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
           >
-            취소
+            {multiple ? "완료" : "취소"}
           </Button>
         </DialogFooter>
       </DialogContent>
diff --git a/frontend/lib/registry/components/entity-search-input/config.ts b/frontend/lib/registry/components/entity-search-input/config.ts
index e147736f..fab81c9f 100644
--- a/frontend/lib/registry/components/entity-search-input/config.ts
+++ b/frontend/lib/registry/components/entity-search-input/config.ts
@@ -11,6 +11,9 @@ export interface EntitySearchInputConfig {
   showAdditionalInfo?: boolean;
   additionalFields?: string[];
   
+  // 다중 선택 설정
+  multiple?: boolean; // 여러 항목 선택 가능 여부 (기본: false)
+  
   // 연쇄관계 설정 (cascading_relation 테이블과 연동)
   cascadingRelationCode?: string; // 연쇄관계 코드 (WAREHOUSE_LOCATION 등)
   cascadingRole?: "parent" | "child"; // 역할 (부모/자식)
diff --git a/frontend/lib/registry/components/entity-search-input/index.ts b/frontend/lib/registry/components/entity-search-input/index.ts
index 3f70d0fe..5d1bf7d4 100644
--- a/frontend/lib/registry/components/entity-search-input/index.ts
+++ b/frontend/lib/registry/components/entity-search-input/index.ts
@@ -42,6 +42,7 @@ export type { EntitySearchInputConfig } from "./config";
 
 // 컴포넌트 내보내기
 export { EntitySearchInputComponent } from "./EntitySearchInputComponent";
+export { EntitySearchInputWrapper } from "./EntitySearchInputWrapper";
 export { EntitySearchInputRenderer } from "./EntitySearchInputRenderer";
 export { EntitySearchModal } from "./EntitySearchModal";
 export { useEntitySearch } from "./useEntitySearch";
diff --git a/frontend/lib/registry/components/entity-search-input/types.ts b/frontend/lib/registry/components/entity-search-input/types.ts
index d29268b6..73abd9dd 100644
--- a/frontend/lib/registry/components/entity-search-input/types.ts
+++ b/frontend/lib/registry/components/entity-search-input/types.ts
@@ -19,6 +19,9 @@ export interface EntitySearchInputProps {
   placeholder?: string;
   disabled?: boolean;
 
+  // 다중선택
+  multiple?: boolean; // 여러 항목 선택 가능 여부 (기본: false)
+
   // 필터링
   filterCondition?: Record<string, any>; // 추가 WHERE 조건
   companyCode?: string; // 멀티테넌시
diff --git a/frontend/lib/registry/components/entity-search-input/useEntitySearch.ts b/frontend/lib/registry/components/entity-search-input/useEntitySearch.ts
index 1fac26d6..a118cffe 100644
--- a/frontend/lib/registry/components/entity-search-input/useEntitySearch.ts
+++ b/frontend/lib/registry/components/entity-search-input/useEntitySearch.ts
@@ -53,6 +53,12 @@ export function useEntitySearch({
           limit: pagination.limit.toString(),
         });
 
+        // console.log("[useEntitySearch] 검색 실행:", {
+        //   tableName,
+        //   filterCondition: filterConditionRef.current,
+        //   searchText: text,
+        // });
+
         const response = await apiClient.get<EntitySearchResponse>(
           `/entity-search/${tableName}?${params.toString()}`
         );
diff --git a/frontend/lib/registry/components/index.ts b/frontend/lib/registry/components/index.ts
index e28e1755..b72b5154 100644
--- a/frontend/lib/registry/components/index.ts
+++ b/frontend/lib/registry/components/index.ts
@@ -88,6 +88,9 @@ import "./mail-recipient-selector/MailRecipientSelectorRenderer"; // 내부 인
 // 🆕 연관 데이터 버튼 컴포넌트
 import "./related-data-buttons/RelatedDataButtonsRenderer"; // 좌측 선택 데이터 기반 연관 테이블 버튼 표시
 
+// 🆕 피벗 그리드 컴포넌트
+import "./pivot-grid/PivotGridRenderer"; // 피벗 테이블 (행/열 그룹화, 집계, 드릴다운)
+
 /**
  * 컴포넌트 초기화 함수
  */
diff --git a/frontend/lib/registry/components/location-swap-selector/LocationSwapSelectorComponent.tsx b/frontend/lib/registry/components/location-swap-selector/LocationSwapSelectorComponent.tsx
index 7a693ad5..88e9002a 100644
--- a/frontend/lib/registry/components/location-swap-selector/LocationSwapSelectorComponent.tsx
+++ b/frontend/lib/registry/components/location-swap-selector/LocationSwapSelectorComponent.tsx
@@ -107,10 +107,10 @@ export function LocationSwapSelectorComponent(props: LocationSwapSelectorProps)
   const dbTableName = config.dbTableName || "vehicles";
   const dbKeyField = config.dbKeyField || "user_id";
 
-  // 기본 옵션 (포항/광양)
+  // 기본 옵션 (포항/광양) - 한글로 저장
   const DEFAULT_OPTIONS: LocationOption[] = [
-    { value: "pohang", label: "포항" },
-    { value: "gwangyang", label: "광양" },
+    { value: "포항", label: "포항" },
+    { value: "광양", label: "광양" },
   ];
 
   // 상태
diff --git a/frontend/lib/registry/components/location-swap-selector/index.ts b/frontend/lib/registry/components/location-swap-selector/index.ts
index c4c30418..7f7447cf 100644
--- a/frontend/lib/registry/components/location-swap-selector/index.ts
+++ b/frontend/lib/registry/components/location-swap-selector/index.ts
@@ -26,9 +26,9 @@ export const LocationSwapSelectorDefinition = createComponentDefinition({
       labelField: "location_name", // 표시 필드
       codeCategory: "", // 코드 관리 카테고리 (type이 "code"일 때)
       staticOptions: [
-        { value: "pohang", label: "포항" },
-        { value: "gwangyang", label: "광양" },
-      ], // 정적 옵션 (type이 "static"일 때)
+        { value: "포항", label: "포항" },
+        { value: "광양", label: "광양" },
+      ], // 정적 옵션 (type이 "static"일 때) - 한글로 저장
     },
     // 필드 매핑
     departureField: "departure", // 출발지 저장 필드
diff --git a/frontend/lib/registry/components/modal-repeater-table/ItemSelectionModal.tsx b/frontend/lib/registry/components/modal-repeater-table/ItemSelectionModal.tsx
index ad73c317..7bf7a81d 100644
--- a/frontend/lib/registry/components/modal-repeater-table/ItemSelectionModal.tsx
+++ b/frontend/lib/registry/components/modal-repeater-table/ItemSelectionModal.tsx
@@ -17,6 +17,7 @@ import { Search, Loader2 } from "lucide-react";
 import { useEntitySearch } from "../entity-search-input/useEntitySearch";
 import { ItemSelectionModalProps, ModalFilterConfig } from "./types";
 import { apiClient } from "@/lib/api/client";
+import { getCategoryLabelsByCodes } from "@/lib/api/tableCategoryValue";
 
 export function ItemSelectionModal({
   open,
@@ -32,6 +33,7 @@ export function ItemSelectionModal({
   onSelect,
   columnLabels = {},
   modalFilters = [],
+  categoryColumns = [],
 }: ItemSelectionModalProps) {
   const [localSearchText, setLocalSearchText] = useState("");
   const [selectedItems, setSelectedItems] = useState<any[]>([]);
@@ -41,6 +43,9 @@ export function ItemSelectionModal({
   
   // 카테고리 옵션 상태 (categoryRef별로 로드된 옵션)
   const [categoryOptions, setCategoryOptions] = useState<Record<string, { value: string; label: string }[]>>({});
+  
+  // 카테고리 코드 → 라벨 매핑 (테이블 데이터 표시용)
+  const [categoryLabelMap, setCategoryLabelMap] = useState<Record<string, string>>({});
 
   // 모달 필터 값과 기본 filterCondition을 합친 최종 필터 조건
   const combinedFilterCondition = useMemo(() => {
@@ -95,13 +100,44 @@ export function ItemSelectionModal({
             }
           }
           
-          // 정렬 후 옵션으로 변환
+          // 🆕 CATEGORY_ 코드가 있는지 확인하고 라벨 조회
+          const allCodes = new Set<string>();
+          for (const val of uniqueValues) {
+            // 콤마로 구분된 다중 값도 처리
+            const codes = val.split(",").map(c => c.trim());
+            codes.forEach(code => {
+              if (code.startsWith("CATEGORY_")) {
+                allCodes.add(code);
+              }
+            });
+          }
+
+          // CATEGORY_ 코드가 있으면 라벨 조회
+          let labelMap: Record<string, string> = {};
+          if (allCodes.size > 0) {
+            try {
+              const labelResponse = await getCategoryLabelsByCodes(Array.from(allCodes));
+              if (labelResponse.success && labelResponse.data) {
+                labelMap = labelResponse.data;
+              }
+            } catch (labelError) {
+              console.error("카테고리 라벨 조회 실패:", labelError);
+            }
+          }
+
+          // 정렬 후 옵션으로 변환 (라벨 적용)
           const options = Array.from(uniqueValues)
             .sort()
-            .map((val) => ({
-              value: val,
-              label: val,
-            }));
+            .map((val) => {
+              // 콤마로 구분된 다중 값 처리
+              if (val.includes(",")) {
+                const codes = val.split(",").map(c => c.trim());
+                const labels = codes.map(code => labelMap[code] || code);
+                return { value: val, label: labels.join(", ") };
+              }
+              // 단일 값
+              return { value: val, label: labelMap[val] || val };
+            });
           
           setCategoryOptions((prev) => ({
             ...prev,
@@ -152,6 +188,54 @@ export function ItemSelectionModal({
     }
   }, [modalFilterValues]);
   
+  // 검색 결과가 변경되면 카테고리 값들의 라벨 조회
+  useEffect(() => {
+    const loadCategoryLabels = async () => {
+      if (!open || categoryColumns.length === 0 || results.length === 0) {
+        return;
+      }
+      
+      // 현재 결과에서 카테고리 컬럼의 모든 고유한 값 수집
+      // 쉼표로 구분된 다중 값도 개별적으로 수집
+      const allCodes = new Set<string>();
+      for (const row of results) {
+        for (const col of categoryColumns) {
+          const val = row[col];
+          if (val && typeof val === "string") {
+            // 쉼표로 구분된 다중 값 처리
+            const codes = val.split(",").map((c) => c.trim()).filter(Boolean);
+            for (const code of codes) {
+              if (!categoryLabelMap[code]) {
+                allCodes.add(code);
+              }
+            }
+          }
+        }
+      }
+      
+      if (allCodes.size === 0) {
+        return;
+      }
+      
+      try {
+        const response = await apiClient.post("/table-categories/labels-by-codes", {
+          valueCodes: Array.from(allCodes),
+        });
+        
+        if (response.data?.success && response.data.data) {
+          setCategoryLabelMap((prev) => ({
+            ...prev,
+            ...response.data.data,
+          }));
+        }
+      } catch (error) {
+        console.error("카테고리 라벨 조회 실패:", error);
+      }
+    };
+    
+    loadCategoryLabels();
+  }, [open, results, categoryColumns]);
+  
   // 모달 필터 값 변경 핸들러
   const handleModalFilterChange = (column: string, value: any) => {
     setModalFilterValues((prev) => ({
@@ -450,11 +534,25 @@ export function ItemSelectionModal({
                             </div>
                           </td>
                         )}
-                        {validColumns.map((col) => (
-                          <td key={col} className="px-4 py-2">
-                            {item[col] || "-"}
-                          </td>
-                        ))}
+                        {validColumns.map((col) => {
+                          const rawValue = item[col];
+                          // 카테고리 컬럼이면 라벨로 변환
+                          const isCategory = categoryColumns.includes(col);
+                          let displayValue = rawValue;
+                          
+                          if (isCategory && rawValue && typeof rawValue === "string") {
+                            // 쉼표로 구분된 다중 값 처리
+                            const codes = rawValue.split(",").map((c) => c.trim()).filter(Boolean);
+                            const labels = codes.map((code) => categoryLabelMap[code] || code);
+                            displayValue = labels.join(", ");
+                          }
+                          
+                          return (
+                            <td key={col} className="px-4 py-2">
+                              {displayValue || "-"}
+                            </td>
+                          );
+                        })}
                       </tr>
                     );
                   })
diff --git a/frontend/lib/registry/components/modal-repeater-table/types.ts b/frontend/lib/registry/components/modal-repeater-table/types.ts
index ad373200..ba23c60e 100644
--- a/frontend/lib/registry/components/modal-repeater-table/types.ts
+++ b/frontend/lib/registry/components/modal-repeater-table/types.ts
@@ -202,4 +202,7 @@ export interface ItemSelectionModalProps {
   
   // 모달 내부 필터 (사용자 선택 가능)
   modalFilters?: ModalFilterConfig[];
+  
+  // 카테고리 타입 컬럼 목록 (해당 컬럼은 코드 → 라벨로 변환하여 표시)
+  categoryColumns?: string[];
 }
diff --git a/frontend/lib/registry/components/pivot-grid/PLAN.md b/frontend/lib/registry/components/pivot-grid/PLAN.md
new file mode 100644
index 00000000..7b96ab38
--- /dev/null
+++ b/frontend/lib/registry/components/pivot-grid/PLAN.md
@@ -0,0 +1,159 @@
+# PivotGrid 컴포넌트 전체 구현 계획
+
+## 개요
+DevExtreme PivotGrid (https://js.devexpress.com/React/Demos/WidgetsGallery/Demo/PivotGrid/Overview/FluentBlueLight/) 수준의 다차원 데이터 분석 컴포넌트 구현
+
+## 현재 상태: ✅ 모든 기능 구현 완료!
+
+---
+
+## 구현된 기능 목록
+
+### 1. 기본 피벗 테이블 ✅
+- [x] 피벗 테이블 렌더링
+- [x] 행/열 확장/축소
+- [x] 합계/소계 표시
+- [x] 전체 확장/축소 버튼
+
+### 2. 필드 패널 (드래그앤드롭) ✅
+- [x] 상단에 4개 영역 표시 (필터, 열, 행, 데이터)
+- [x] 각 영역에 배치된 필드 칩/태그 표시
+- [x] 필드 제거 버튼 (X)
+- [x] 필드 간 드래그 앤 드롭 지원 (@dnd-kit 사용)
+- [x] 영역 간 필드 이동
+- [x] 같은 영역 내 순서 변경
+- [x] 드래그 시 시각적 피드백
+
+### 3. 필드 선택기 (모달) ✅
+- [x] 모달 열기/닫기
+- [x] 사용 가능한 필드 목록
+- [x] 필드 검색 기능
+- [x] 필드별 영역 선택 드롭다운
+- [x] 데이터 타입 아이콘 표시
+- [x] 집계 함수 선택 (데이터 영역)
+- [x] 표시 모드 선택 (데이터 영역)
+
+### 4. 데이터 요약 (누계, % 모드) ✅
+- [x] 절대값 표시 (기본)
+- [x] 행 총계 대비 %
+- [x] 열 총계 대비 %
+- [x] 전체 총계 대비 %
+- [x] 행/열 방향 누계
+- [x] 이전 대비 차이
+- [x] 이전 대비 % 차이
+
+### 5. 필터링 ✅
+- [x] 필터 팝업 컴포넌트 (FilterPopup)
+- [x] 값 검색 기능
+- [x] 체크박스 기반 값 선택
+- [x] 포함/제외 모드
+- [x] 전체 선택/해제
+- [x] 선택된 항목 수 표시
+
+### 6. Drill Down ✅
+- [x] 셀 더블클릭 시 상세 데이터 모달
+- [x] 원본 데이터 테이블 표시
+- [x] 검색 기능
+- [x] 정렬 기능
+- [x] 페이지네이션
+- [x] CSV/Excel 내보내기
+
+### 7. Virtual Scrolling ✅
+- [x] useVirtualScroll 훅 (행)
+- [x] useVirtualColumnScroll 훅 (열)
+- [x] useVirtual2DScroll 훅 (행+열)
+- [x] overscan 버퍼 지원
+
+### 8. Excel 내보내기 ✅
+- [x] xlsx 라이브러리 사용
+- [x] 피벗 데이터 Excel 내보내기
+- [x] Drill Down 데이터 Excel 내보내기
+- [x] CSV 내보내기 (기본)
+- [x] 스타일링 (헤더, 데이터, 총계)
+- [x] 숫자 포맷
+
+### 9. 차트 통합 ✅
+- [x] recharts 라이브러리 사용
+- [x] 막대 차트
+- [x] 누적 막대 차트
+- [x] 선 차트
+- [x] 영역 차트
+- [x] 파이 차트
+- [x] 범례 표시
+- [x] 커스텀 툴팁
+- [x] 차트 토글 버튼
+
+### 10. 조건부 서식 (Conditional Formatting) ✅
+- [x] Color Scale (색상 그라데이션)
+- [x] Data Bar (데이터 막대)
+- [x] Icon Set (아이콘)
+- [x] Cell Value (조건 기반 스타일)
+- [x] ConfigPanel에서 설정 UI
+
+### 11. 상태 저장/복원 ✅
+- [x] usePivotState 훅
+- [x] localStorage/sessionStorage 지원
+- [x] 자동 저장 (디바운스)
+
+### 12. ConfigPanel 고도화 ✅
+- [x] 데이터 소스 설정 (테이블 선택)
+- [x] 필드별 영역 설정 (행, 열, 데이터, 필터)
+- [x] 총계 옵션 설정
+- [x] 스타일 설정 (테마, 교차 색상 등)
+- [x] 내보내기 설정 (Excel/CSV)
+- [x] 차트 설정 UI
+- [x] 필드 선택기 설정 UI
+- [x] 조건부 서식 설정 UI
+- [x] 크기 설정
+
+---
+
+## 파일 구조
+
+```
+pivot-grid/
+├── components/
+│   ├── FieldPanel.tsx         # 필드 패널 (드래그앤드롭)
+│   ├── FieldChooser.tsx       # 필드 선택기 모달
+│   ├── DrillDownModal.tsx     # Drill Down 모달
+│   ├── FilterPopup.tsx        # 필터 팝업
+│   ├── PivotChart.tsx         # 차트 컴포넌트
+│   └── index.ts               # 내보내기
+├── hooks/
+│   ├── useVirtualScroll.ts    # 가상 스크롤 훅
+│   ├── usePivotState.ts       # 상태 저장 훅
+│   └── index.ts               # 내보내기
+├── utils/
+│   ├── aggregation.ts         # 집계 함수
+│   ├── pivotEngine.ts         # 피벗 엔진
+│   ├── exportExcel.ts         # Excel 내보내기
+│   ├── conditionalFormat.ts   # 조건부 서식
+│   └── index.ts               # 내보내기
+├── types.ts                   # 타입 정의
+├── PivotGridComponent.tsx     # 메인 컴포넌트
+├── PivotGridConfigPanel.tsx   # 설정 패널
+├── PivotGridRenderer.tsx      # 렌더러
+├── index.ts                   # 모듈 내보내기
+└── PLAN.md                    # 이 파일
+```
+
+---
+
+## 후순위 기능 (선택적)
+
+다음 기능들은 필요 시 추가 구현 가능:
+
+### 데이터 바인딩 확장
+- [ ] OLAP Data Source 연동 (복잡)
+- [ ] GraphQL 연동
+- [ ] 실시간 데이터 업데이트 (WebSocket)
+
+### 고급 기능
+- [ ] 피벗 테이블 병합 (여러 데이터 소스)
+- [ ] 계산 필드 (커스텀 수식)
+- [ ] 데이터 정렬 옵션 강화
+- [ ] 그룹핑 옵션 (날짜 그룹핑 등)
+
+---
+
+## 완료일: 2026-01-08
diff --git a/frontend/lib/registry/components/pivot-grid/PivotGridComponent.tsx b/frontend/lib/registry/components/pivot-grid/PivotGridComponent.tsx
new file mode 100644
index 00000000..4f4595ff
--- /dev/null
+++ b/frontend/lib/registry/components/pivot-grid/PivotGridComponent.tsx
@@ -0,0 +1,1913 @@
+"use client";
+
+/**
+ * PivotGrid 메인 컴포넌트
+ * 다차원 데이터 분석을 위한 피벗 테이블
+ */
+
+import React, { useState, useMemo, useCallback, useEffect, useRef } from "react";
+import { cn } from "@/lib/utils";
+import {
+  PivotGridProps,
+  PivotResult,
+  PivotFieldConfig,
+  PivotCellData,
+  PivotFlatRow,
+  PivotCellValue,
+  PivotGridState,
+} from "./types";
+import { processPivotData, pathToKey } from "./utils/pivotEngine";
+import { exportPivotToExcel } from "./utils/exportExcel";
+import { getConditionalStyle, formatStyleToReact, CellFormatStyle } from "./utils/conditionalFormat";
+import { FieldPanel } from "./components/FieldPanel";
+import { FieldChooser } from "./components/FieldChooser";
+import { DrillDownModal } from "./components/DrillDownModal";
+import { PivotChart } from "./components/PivotChart";
+import { FilterPopup } from "./components/FilterPopup";
+import { useVirtualScroll } from "./hooks/useVirtualScroll";
+import {
+  ChevronRight,
+  ChevronDown,
+  Download,
+  Settings,
+  RefreshCw,
+  Maximize2,
+  Minimize2,
+  LayoutGrid,
+  FileSpreadsheet,
+  BarChart3,
+  Filter,
+  ArrowUp,
+  ArrowDown,
+  ArrowUpDown,
+  Printer,
+  Save,
+  RotateCcw,
+  FileText,
+  Loader2,
+  Eye,
+  EyeOff,
+} from "lucide-react";
+import { Button } from "@/components/ui/button";
+
+// ==================== 유틸리티 함수 ====================
+
+// 셀 병합 정보 계산
+interface MergeCellInfo {
+  rowSpan: number;
+  skip: boolean; // 병합된 셀에서 건너뛸지 여부
+}
+
+const calculateMergeCells = (
+  rows: PivotFlatRow[],
+  mergeCells: boolean
+): Map<number, MergeCellInfo> => {
+  const mergeInfo = new Map<number, MergeCellInfo>();
+  
+  if (!mergeCells || rows.length === 0) {
+    rows.forEach((_, idx) => mergeInfo.set(idx, { rowSpan: 1, skip: false }));
+    return mergeInfo;
+  }
+  
+  let i = 0;
+  while (i < rows.length) {
+    const currentPath = rows[i].path.join("|||");
+    let spanCount = 1;
+    
+    // 같은 path를 가진 연속 행 찾기
+    while (
+      i + spanCount < rows.length &&
+      rows[i + spanCount].path.join("|||") === currentPath
+    ) {
+      spanCount++;
+    }
+    
+    // 첫 번째 행은 rowSpan 설정
+    mergeInfo.set(i, { rowSpan: spanCount, skip: false });
+    
+    // 나머지 행은 skip
+    for (let j = 1; j < spanCount; j++) {
+      mergeInfo.set(i + j, { rowSpan: 1, skip: true });
+    }
+    
+    i += spanCount;
+  }
+  
+  return mergeInfo;
+};
+
+// ==================== 서브 컴포넌트 ====================
+
+// 행 헤더 셀
+interface RowHeaderCellProps {
+  row: PivotFlatRow;
+  rowFields: PivotFieldConfig[];
+  onToggleExpand: (path: string[]) => void;
+  rowSpan?: number;
+}
+
+const RowHeaderCell: React.FC<RowHeaderCellProps> = ({
+  row,
+  rowFields,
+  onToggleExpand,
+  rowSpan = 1,
+}) => {
+  const indentSize = row.level * 20;
+
+  return (
+    <td
+      className={cn(
+        "border-r border-b border-border bg-muted/50",
+        "px-2 py-1.5 text-left text-sm",
+        "whitespace-nowrap font-medium",
+        row.isExpanded && "bg-muted/70"
+      )}
+      style={{ paddingLeft: `${8 + indentSize}px` }}
+      rowSpan={rowSpan > 1 ? rowSpan : undefined}
+    >
+      <div className="flex items-center gap-1">
+        {row.hasChildren && (
+          <button
+            onClick={() => onToggleExpand(row.path)}
+            className="p-0.5 hover:bg-accent rounded"
+          >
+            {row.isExpanded ? (
+              <ChevronDown className="h-3.5 w-3.5" />
+            ) : (
+              <ChevronRight className="h-3.5 w-3.5" />
+            )}
+          </button>
+        )}
+        {!row.hasChildren && <span className="w-4" />}
+        <span>{row.caption}</span>
+      </div>
+    </td>
+  );
+};
+
+// 데이터 셀
+interface DataCellProps {
+  values: PivotCellValue[];
+  isTotal?: boolean;
+  isSelected?: boolean;
+  onClick?: (e?: React.MouseEvent) => void;
+  onDoubleClick?: () => void;
+  conditionalStyle?: CellFormatStyle;
+}
+
+const DataCell: React.FC<DataCellProps> = ({
+  values,
+  isTotal = false,
+  isSelected = false,
+  onClick,
+  onDoubleClick,
+  conditionalStyle,
+}) => {
+  // 조건부 서식 스타일 계산
+  const cellStyle = conditionalStyle ? formatStyleToReact(conditionalStyle) : {};
+  const hasDataBar = conditionalStyle?.dataBarWidth !== undefined;
+  const icon = conditionalStyle?.icon;
+  
+  // 선택 상태 스타일
+  const selectedClass = isSelected && "ring-2 ring-primary ring-inset bg-primary/10";
+
+  if (!values || values.length === 0) {
+    return (
+      <td
+        className={cn(
+          "border-r border-b border-border",
+          "px-2 py-1.5 text-right text-sm",
+          isTotal && "bg-primary/5 font-medium",
+          selectedClass
+        )}
+        style={cellStyle}
+        onClick={onClick}
+        onDoubleClick={onDoubleClick}
+      >
+        -
+      </td>
+    );
+  }
+
+  // 툴팁 내용 생성
+  const tooltipContent = values.map((v) => 
+    `${v.field || "값"}: ${v.formattedValue || v.value}`
+  ).join("\n");
+
+  // 단일 데이터 필드인 경우
+  if (values.length === 1) {
+    return (
+      <td
+        className={cn(
+          "border-r border-b border-border relative group/cell",
+          "px-2 py-1.5 text-right text-sm tabular-nums",
+          isTotal && "bg-primary/5 font-medium",
+          (onClick || onDoubleClick) && "cursor-pointer hover:bg-accent/50",
+          selectedClass
+        )}
+        style={cellStyle}
+        onClick={onClick}
+        onDoubleClick={onDoubleClick}
+        title={tooltipContent}
+      >
+        {/* Data Bar */}
+        {hasDataBar && (
+          <div
+            className="absolute inset-y-0 left-0 opacity-30"
+            style={{
+              width: `${conditionalStyle?.dataBarWidth}%`,
+              backgroundColor: conditionalStyle?.dataBarColor || "#3b82f6",
+            }}
+          />
+        )}
+        <span className="relative z-10 flex items-center justify-end gap-1">
+          {icon && <span>{icon}</span>}
+          {values[0].formattedValue}
+        </span>
+      </td>
+    );
+  }
+
+  // 다중 데이터 필드인 경우
+  return (
+    <>
+      {values.map((val, idx) => (
+        <td
+          key={idx}
+          className={cn(
+            "border-r border-b border-border relative",
+            "px-2 py-1.5 text-right text-sm tabular-nums",
+            isTotal && "bg-primary/5 font-medium",
+            (onClick || onDoubleClick) && "cursor-pointer hover:bg-accent/50",
+            selectedClass
+          )}
+          style={cellStyle}
+          onClick={onClick}
+          onDoubleClick={onDoubleClick}
+          title={`${val.field || "값"}: ${val.formattedValue || val.value}`}
+        >
+          {hasDataBar && (
+            <div
+              className="absolute inset-y-0 left-0 opacity-30"
+              style={{
+                width: `${conditionalStyle?.dataBarWidth}%`,
+                backgroundColor: conditionalStyle?.dataBarColor || "#3b82f6",
+              }}
+            />
+          )}
+          <span className="relative z-10 flex items-center justify-end gap-1">
+            {icon && <span>{icon}</span>}
+            {val.formattedValue}
+          </span>
+        </td>
+      ))}
+    </>
+  );
+};
+
+// ==================== 메인 컴포넌트 ====================
+
+export const PivotGridComponent: React.FC<PivotGridProps> = ({
+  title,
+  fields: initialFields = [],
+  totals = {
+    showRowGrandTotals: true,
+    showColumnGrandTotals: true,
+    showRowTotals: true,
+    showColumnTotals: true,
+  },
+  style = {
+    theme: "default",
+    headerStyle: "default",
+    cellPadding: "normal",
+    borderStyle: "light",
+    alternateRowColors: true,
+    highlightTotals: true,
+  },
+  fieldChooser,
+  chart: chartConfig,
+  allowExpandAll = true,
+  height = "auto",
+  maxHeight,
+  exportConfig,
+  data: externalData,
+  onCellClick,
+  onCellDoubleClick,
+  onFieldDrop,
+  onExpandChange,
+}) => {
+  // 디버깅 로그
+  console.log("🔶 PivotGridComponent props:", {
+    title,
+    hasExternalData: !!externalData,
+    externalDataLength: externalData?.length,
+    initialFieldsLength: initialFields?.length,
+  });
+  // ==================== 상태 ====================
+
+  const [fields, setFields] = useState<PivotFieldConfig[]>(initialFields);
+  const [pivotState, setPivotState] = useState<PivotGridState>({
+    expandedRowPaths: [],
+    expandedColumnPaths: [],
+    sortConfig: null,
+    filterConfig: {},
+  });
+  const [isFullscreen, setIsFullscreen] = useState(false);
+  const [showFieldPanel, setShowFieldPanel] = useState(false); // 기본적으로 접힌 상태
+  const [showFieldChooser, setShowFieldChooser] = useState(false);
+  const [drillDownData, setDrillDownData] = useState<{
+    open: boolean;
+    cellData: PivotCellData | null;
+  }>({ open: false, cellData: null });
+  const [showChart, setShowChart] = useState(chartConfig?.enabled || false);
+  const [containerHeight, setContainerHeight] = useState(400);
+  const tableContainerRef = useRef<HTMLDivElement>(null);
+  
+  // 셀 선택 상태 (범위 선택 지원)
+  const [selectedCell, setSelectedCell] = useState<{
+    rowIndex: number;
+    colIndex: number;
+  } | null>(null);
+  const [selectionRange, setSelectionRange] = useState<{
+    startRow: number;
+    startCol: number;
+    endRow: number;
+    endCol: number;
+  } | null>(null);
+  const tableRef = useRef<HTMLTableElement>(null);
+  
+  // 정렬 상태
+  const [sortConfig, setSortConfig] = useState<{
+    field: string;
+    direction: "asc" | "desc";
+  } | null>(null);
+  
+  // 열 너비 상태
+  const [columnWidths, setColumnWidths] = useState<Record<number, number>>({});
+  const [resizingColumn, setResizingColumn] = useState<number | null>(null);
+  const [resizeStartX, setResizeStartX] = useState<number>(0);
+  const [resizeStartWidth, setResizeStartWidth] = useState<number>(0);
+
+  // 외부 fields 변경 시 동기화
+  useEffect(() => {
+    if (initialFields.length > 0) {
+      setFields(initialFields);
+    }
+  }, [initialFields]);
+
+  // 상태 저장 키
+  const stateStorageKey = `pivot-state-${title || "default"}`;
+  
+  // 상태 저장 (localStorage)
+  const saveStateToStorage = useCallback(() => {
+    if (typeof window === "undefined") return;
+    const stateToSave = {
+      fields,
+      pivotState,
+      sortConfig,
+      columnWidths,
+    };
+    localStorage.setItem(stateStorageKey, JSON.stringify(stateToSave));
+  }, [fields, pivotState, sortConfig, columnWidths, stateStorageKey]);
+  
+  // 상태 복원 (localStorage)
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    const savedState = localStorage.getItem(stateStorageKey);
+    if (savedState) {
+      try {
+        const parsed = JSON.parse(savedState);
+        if (parsed.fields) setFields(parsed.fields);
+        if (parsed.pivotState) setPivotState(parsed.pivotState);
+        if (parsed.sortConfig) setSortConfig(parsed.sortConfig);
+        if (parsed.columnWidths) setColumnWidths(parsed.columnWidths);
+      } catch (e) {
+        console.warn("피벗 상태 복원 실패:", e);
+      }
+    }
+  }, [stateStorageKey]);
+
+  // 데이터
+  const data = externalData || [];
+
+  // ==================== 필드 분류 ====================
+
+  const rowFields = useMemo(
+    () =>
+      fields
+        .filter((f) => f.area === "row" && f.visible !== false)
+        .sort((a, b) => (a.areaIndex || 0) - (b.areaIndex || 0)),
+    [fields]
+  );
+
+  const columnFields = useMemo(
+    () =>
+      fields
+        .filter((f) => f.area === "column" && f.visible !== false)
+        .sort((a, b) => (a.areaIndex || 0) - (b.areaIndex || 0)),
+    [fields]
+  );
+
+  const dataFields = useMemo(
+    () =>
+      fields
+        .filter((f) => f.area === "data" && f.visible !== false)
+        .sort((a, b) => (a.areaIndex || 0) - (b.areaIndex || 0)),
+    [fields]
+  );
+
+  // 필터 영역 필드
+  const filterFields = useMemo(
+    () =>
+      fields
+        .filter((f) => f.area === "filter" && f.visible !== false)
+        .sort((a, b) => (a.areaIndex || 0) - (b.areaIndex || 0)),
+    [fields]
+  );
+
+  // 사용 가능한 필드 목록 (FieldChooser용)
+  const availableFields = useMemo(() => {
+    if (data.length === 0) return [];
+
+    const sampleRow = data[0];
+    return Object.keys(sampleRow).map((key) => {
+      const existingField = fields.find((f) => f.field === key);
+      const value = sampleRow[key];
+
+      // 데이터 타입 추론
+      let dataType: "string" | "number" | "date" | "boolean" = "string";
+      if (typeof value === "number") dataType = "number";
+      else if (typeof value === "boolean") dataType = "boolean";
+      else if (value instanceof Date) dataType = "date";
+      else if (typeof value === "string") {
+        // 날짜 문자열 감지
+        if (/^\d{4}-\d{2}-\d{2}/.test(value)) dataType = "date";
+      }
+
+      return {
+        field: key,
+        caption: existingField?.caption || key,
+        dataType,
+        isSelected: existingField?.visible !== false,
+        currentArea: existingField?.area,
+      };
+    });
+  }, [data, fields]);
+
+  // ==================== 필터 적용 ====================
+
+  const filteredData = useMemo(() => {
+    if (!data || data.length === 0) return data;
+
+    // 필터 영역의 필드들로 데이터 필터링
+    const activeFilters = fields.filter(
+      (f) => f.area === "filter" && f.filterValues && f.filterValues.length > 0
+    );
+
+    if (activeFilters.length === 0) return data;
+
+    return data.filter((row) => {
+      return activeFilters.every((filter) => {
+        const value = row[filter.field];
+        const filterValues = filter.filterValues || [];
+        const filterType = filter.filterType || "include";
+
+        if (filterType === "include") {
+          return filterValues.includes(value);
+        } else {
+          return !filterValues.includes(value);
+        }
+      });
+    });
+  }, [data, fields]);
+
+  // ==================== 피벗 처리 ====================
+
+  const pivotResult = useMemo<PivotResult | null>(() => {
+    if (!filteredData || filteredData.length === 0 || fields.length === 0) {
+      return null;
+    }
+
+    const visibleFields = fields.filter((f) => f.visible !== false);
+    // 행, 열, 데이터 영역에 필드가 하나도 없으면 null 반환 (필터는 제외)
+    if (visibleFields.filter((f) => ["row", "column", "data"].includes(f.area)).length === 0) {
+      return null;
+    }
+
+    return processPivotData(
+      filteredData,
+      visibleFields,
+      pivotState.expandedRowPaths,
+      pivotState.expandedColumnPaths
+    );
+  }, [filteredData, fields, pivotState.expandedRowPaths, pivotState.expandedColumnPaths]);
+
+  // 조건부 서식용 전체 값 수집
+  const allCellValues = useMemo(() => {
+    if (!pivotResult) return new Map<string, number[]>();
+
+    const valuesByField = new Map<string, number[]>();
+
+    // 데이터 매트릭스에서 모든 값 수집
+    pivotResult.dataMatrix.forEach((values) => {
+      values.forEach((val) => {
+        if (val.field && typeof val.value === "number" && !isNaN(val.value)) {
+          const existing = valuesByField.get(val.field) || [];
+          existing.push(val.value);
+          valuesByField.set(val.field, existing);
+        }
+      });
+    });
+
+    // 행 총계 값 수집
+    pivotResult.grandTotals.row.forEach((values) => {
+      values.forEach((val) => {
+        if (val.field && typeof val.value === "number" && !isNaN(val.value)) {
+          const existing = valuesByField.get(val.field) || [];
+          existing.push(val.value);
+          valuesByField.set(val.field, existing);
+        }
+      });
+    });
+
+    // 열 총계 값 수집
+    pivotResult.grandTotals.column.forEach((values) => {
+      values.forEach((val) => {
+        if (val.field && typeof val.value === "number" && !isNaN(val.value)) {
+          const existing = valuesByField.get(val.field) || [];
+          existing.push(val.value);
+          valuesByField.set(val.field, existing);
+        }
+      });
+    });
+
+    return valuesByField;
+  }, [pivotResult]);
+
+  // ==================== 가상 스크롤 ====================
+  
+  const ROW_HEIGHT = 32; // 행 높이 (px)
+  const VIRTUAL_SCROLL_THRESHOLD = 50; // 이 행 수 이상이면 가상 스크롤 활성화
+  
+  // 컨테이너 높이 측정
+  useEffect(() => {
+    if (!tableContainerRef.current) return;
+    
+    const observer = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        setContainerHeight(entry.contentRect.height);
+      }
+    });
+    
+    observer.observe(tableContainerRef.current);
+    return () => observer.disconnect();
+  }, []);
+  
+  // 열 크기 조절 중
+  useEffect(() => {
+    if (resizingColumn === null) return;
+    
+    const handleMouseMove = (e: MouseEvent) => {
+      const diff = e.clientX - resizeStartX;
+      const newWidth = Math.max(50, resizeStartWidth + diff); // 최소 50px
+      setColumnWidths((prev) => ({
+        ...prev,
+        [resizingColumn]: newWidth,
+      }));
+    };
+    
+    const handleMouseUp = () => {
+      setResizingColumn(null);
+    };
+    
+    document.addEventListener("mousemove", handleMouseMove);
+    document.addEventListener("mouseup", handleMouseUp);
+    
+    return () => {
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseup", handleMouseUp);
+    };
+  }, [resizingColumn, resizeStartX, resizeStartWidth]);
+  
+  // 가상 스크롤 훅 사용
+  const flatRows = pivotResult?.flatRows || [];
+  
+  // 정렬된 행 데이터
+  const sortedFlatRows = useMemo(() => {
+    if (!sortConfig || !pivotResult) return flatRows;
+    
+    const { field, direction } = sortConfig;
+    const { dataMatrix, flatColumns } = pivotResult;
+    
+    // 각 행의 정렬 기준 값 계산
+    const rowsWithSortValue = flatRows.map((row) => {
+      let sortValue = 0;
+      // 모든 열에 대해 해당 필드의 합계 계산
+      flatColumns.forEach((col) => {
+        const cellKey = `${pathToKey(row.path)}|||${pathToKey(col.path)}`;
+        const values = dataMatrix.get(cellKey) || [];
+        const targetValue = values.find((v) => v.field === field);
+        if (targetValue?.value != null) {
+          sortValue += targetValue.value;
+        }
+      });
+      return { row, sortValue };
+    });
+    
+    // 정렬
+    rowsWithSortValue.sort((a, b) => {
+      if (direction === "asc") {
+        return a.sortValue - b.sortValue;
+      }
+      return b.sortValue - a.sortValue;
+    });
+    
+    return rowsWithSortValue.map((item) => item.row);
+  }, [flatRows, sortConfig, pivotResult]);
+  
+  const enableVirtualScroll = sortedFlatRows.length > VIRTUAL_SCROLL_THRESHOLD;
+  
+  const virtualScroll = useVirtualScroll({
+    itemCount: sortedFlatRows.length,
+    itemHeight: ROW_HEIGHT,
+    containerHeight: containerHeight,
+    overscan: 10,
+  });
+  
+  // 가상 스크롤 적용된 행 데이터
+  const visibleFlatRows = useMemo(() => {
+    if (!enableVirtualScroll) return sortedFlatRows;
+    return sortedFlatRows.slice(virtualScroll.startIndex, virtualScroll.endIndex + 1);
+  }, [enableVirtualScroll, sortedFlatRows, virtualScroll.startIndex, virtualScroll.endIndex]);
+
+  // 조건부 서식 스타일 계산 헬퍼
+  const getCellConditionalStyle = useCallback(
+    (value: number | undefined, field: string): CellFormatStyle => {
+      if (!style?.conditionalFormats || style.conditionalFormats.length === 0) {
+        return {};
+      }
+      const allValues = allCellValues.get(field) || [];
+      return getConditionalStyle(value, field, style.conditionalFormats, allValues);
+    },
+    [style?.conditionalFormats, allCellValues]
+  );
+
+  // ==================== 이벤트 핸들러 ====================
+
+  // 필드 변경
+  const handleFieldsChange = useCallback(
+    (newFields: PivotFieldConfig[]) => {
+      setFields(newFields);
+    },
+    []
+  );
+
+  // 행 확장/축소
+  const handleToggleRowExpand = useCallback(
+    (path: string[]) => {
+      setPivotState((prev) => {
+        const pathKey = pathToKey(path);
+        const existingIndex = prev.expandedRowPaths.findIndex(
+          (p) => pathToKey(p) === pathKey
+        );
+
+        let newPaths: string[][];
+        if (existingIndex >= 0) {
+          newPaths = prev.expandedRowPaths.filter(
+            (_, i) => i !== existingIndex
+          );
+        } else {
+          newPaths = [...prev.expandedRowPaths, path];
+        }
+
+        onExpandChange?.(newPaths);
+
+        return {
+          ...prev,
+          expandedRowPaths: newPaths,
+        };
+      });
+    },
+    [onExpandChange]
+  );
+
+  // 전체 확장
+  const handleExpandAll = useCallback(() => {
+    if (!pivotResult) return;
+
+    const allRowPaths: string[][] = [];
+    pivotResult.flatRows.forEach((row) => {
+      if (row.hasChildren) {
+        allRowPaths.push(row.path);
+      }
+    });
+
+    setPivotState((prev) => ({
+      ...prev,
+      expandedRowPaths: allRowPaths,
+      expandedColumnPaths: [],
+    }));
+  }, [pivotResult]);
+
+  // 전체 축소
+  const handleCollapseAll = useCallback(() => {
+    setPivotState((prev) => ({
+      ...prev,
+      expandedRowPaths: [],
+      expandedColumnPaths: [],
+    }));
+  }, []);
+
+  // 셀 클릭
+  const handleCellClick = useCallback(
+    (rowPath: string[], colPath: string[], values: PivotCellValue[]) => {
+      if (!onCellClick) return;
+
+      const cellData: PivotCellData = {
+        value: values[0]?.value,
+        rowPath,
+        columnPath: colPath,
+        field: values[0]?.field,
+      };
+
+      onCellClick(cellData);
+    },
+    [onCellClick]
+  );
+
+  // 셀 더블클릭 (Drill Down)
+  const handleCellDoubleClick = useCallback(
+    (rowPath: string[], colPath: string[], values: PivotCellValue[]) => {
+      const cellData: PivotCellData = {
+        value: values[0]?.value,
+        rowPath,
+        columnPath: colPath,
+        field: values[0]?.field,
+      };
+
+      // Drill Down 모달 열기
+      setDrillDownData({ open: true, cellData });
+
+      // 외부 콜백 호출
+      if (onCellDoubleClick) {
+        onCellDoubleClick(cellData);
+      }
+    },
+    [onCellDoubleClick]
+  );
+
+  // CSV 내보내기
+  const handleExportCSV = useCallback(() => {
+    if (!pivotResult) return;
+
+    const { flatRows, flatColumns, dataMatrix, grandTotals } = pivotResult;
+
+    let csv = "";
+
+    // 헤더 행
+    const headerRow = [""].concat(
+      flatColumns.map((col) => col.caption || "총계")
+    );
+    if (totals?.showRowGrandTotals) {
+      headerRow.push("총계");
+    }
+    csv += headerRow.join(",") + "\n";
+
+    // 데이터 행
+    flatRows.forEach((row) => {
+      const rowData = [row.caption];
+
+      flatColumns.forEach((col) => {
+        const cellKey = `${pathToKey(row.path)}|||${pathToKey(col.path)}`;
+        const values = dataMatrix.get(cellKey);
+        rowData.push(values?.[0]?.value?.toString() || "");
+      });
+
+      if (totals?.showRowGrandTotals) {
+        const rowTotal = grandTotals.row.get(pathToKey(row.path));
+        rowData.push(rowTotal?.[0]?.value?.toString() || "");
+      }
+
+      csv += rowData.join(",") + "\n";
+    });
+
+    // 열 총계 행
+    if (totals?.showColumnGrandTotals) {
+      const totalRow = ["총계"];
+      flatColumns.forEach((col) => {
+        const colTotal = grandTotals.column.get(pathToKey(col.path));
+        totalRow.push(colTotal?.[0]?.value?.toString() || "");
+      });
+      if (totals?.showRowGrandTotals) {
+        totalRow.push(grandTotals.grand[0]?.value?.toString() || "");
+      }
+      csv += totalRow.join(",") + "\n";
+    }
+
+    // 다운로드
+    const blob = new Blob(["\uFEFF" + csv], {
+      type: "text/csv;charset=utf-8;",
+    });
+    const link = document.createElement("a");
+    link.href = URL.createObjectURL(blob);
+    link.download = `${title || "pivot"}_export.csv`;
+    link.click();
+  }, [pivotResult, totals, title]);
+
+  // Excel 내보내기
+  const handleExportExcel = useCallback(async () => {
+    if (!pivotResult) return;
+
+    try {
+      await exportPivotToExcel(pivotResult, fields, totals, {
+        fileName: title || "pivot_export",
+        title: title,
+      });
+    } catch (error) {
+      console.error("Excel 내보내기 실패:", error);
+    }
+  }, [pivotResult, fields, totals, title]);
+  
+  // 인쇄 기능 (PDF 내보내기보다 먼저 정의해야 함)
+  const handlePrint = useCallback(() => {
+    const printContent = tableRef.current;
+    if (!printContent) return;
+    
+    const printWindow = window.open("", "_blank");
+    if (!printWindow) return;
+    
+    printWindow.document.write(`
+      <!DOCTYPE html>
+      <html>
+        <head>
+          <title>${title || "피벗 테이블"}</title>
+          <style>
+            body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; padding: 20px; }
+            h1 { font-size: 18px; margin-bottom: 16px; }
+            table { border-collapse: collapse; width: 100%; font-size: 12px; }
+            th, td { border: 1px solid #ddd; padding: 6px 8px; text-align: left; }
+            th { background-color: #f5f5f5; font-weight: 600; }
+            td { text-align: right; }
+            td:first-child { text-align: left; font-weight: 500; }
+            tr:nth-child(even) { background-color: #fafafa; }
+            .total-row { background-color: #e8e8e8 !important; font-weight: 600; }
+            @media print {
+              body { padding: 0; }
+              table { page-break-inside: auto; }
+              tr { page-break-inside: avoid; }
+            }
+          </style>
+        </head>
+        <body>
+          <h1>${title || "피벗 테이블"}</h1>
+          ${printContent.outerHTML}
+        </body>
+      </html>
+    `);
+    
+    printWindow.document.close();
+    printWindow.focus();
+    setTimeout(() => {
+      printWindow.print();
+      printWindow.close();
+    }, 250);
+  }, [title]);
+  
+  // PDF 내보내기
+  const handleExportPDF = useCallback(async () => {
+    if (!pivotResult || !tableRef.current) return;
+    
+    try {
+      // 동적 import로 jspdf와 html2canvas 로드
+      const [{ default: jsPDF }, { default: html2canvas }] = await Promise.all([
+        import("jspdf"),
+        import("html2canvas"),
+      ]);
+      
+      const canvas = await html2canvas(tableRef.current, {
+        scale: 2,
+        useCORS: true,
+        logging: false,
+      });
+      
+      const imgData = canvas.toDataURL("image/png");
+      const pdf = new jsPDF({
+        orientation: canvas.width > canvas.height ? "landscape" : "portrait",
+        unit: "px",
+        format: [canvas.width, canvas.height],
+      });
+      
+      pdf.addImage(imgData, "PNG", 0, 0, canvas.width, canvas.height);
+      pdf.save(`${title || "pivot"}_export.pdf`);
+    } catch (error) {
+      console.error("PDF 내보내기 실패:", error);
+      // jspdf가 없으면 인쇄 대화상자로 대체
+      handlePrint();
+    }
+  }, [pivotResult, title, handlePrint]);
+  
+  // 데이터 새로고침
+  const [isRefreshing, setIsRefreshing] = useState(false);
+  const handleRefreshData = useCallback(async () => {
+    setIsRefreshing(true);
+    // 외부 데이터 소스가 있으면 새로고침
+    // 여기서는 상태만 초기화
+    setPivotState({
+      expandedRowPaths: [],
+      expandedColumnPaths: [],
+      sortConfig: null,
+      filterConfig: {},
+    });
+    setSortConfig(null);
+    setSelectedCell(null);
+    setSelectionRange(null);
+    setTimeout(() => setIsRefreshing(false), 500);
+  }, []);
+  
+  // 상태 저장 버튼 핸들러
+  const handleSaveState = useCallback(() => {
+    saveStateToStorage();
+    console.log("피벗 상태가 저장되었습니다.");
+  }, [saveStateToStorage]);
+  
+  // 상태 초기화
+  const handleResetState = useCallback(() => {
+    localStorage.removeItem(stateStorageKey);
+    setFields(initialFields);
+    setPivotState({
+      expandedRowPaths: [],
+      expandedColumnPaths: [],
+      sortConfig: null,
+      filterConfig: {},
+    });
+    setSortConfig(null);
+    setColumnWidths({});
+    setSelectedCell(null);
+    setSelectionRange(null);
+  }, [stateStorageKey, initialFields]);
+  
+  // 필드 숨기기/표시 상태
+  const [hiddenFields, setHiddenFields] = useState<Set<string>>(new Set());
+  
+  const toggleFieldVisibility = useCallback((fieldName: string) => {
+    setHiddenFields((prev) => {
+      const newSet = new Set(prev);
+      if (newSet.has(fieldName)) {
+        newSet.delete(fieldName);
+      } else {
+        newSet.add(fieldName);
+      }
+      return newSet;
+    });
+  }, []);
+  
+  // 숨겨진 필드 제외한 활성 필드들
+  const visibleFields = useMemo(() => {
+    return fields.filter((f) => !hiddenFields.has(f.field));
+  }, [fields, hiddenFields]);
+  
+  // 숨겨진 필드 목록
+  const hiddenFieldsList = useMemo(() => {
+    return fields.filter((f) => hiddenFields.has(f.field));
+  }, [fields, hiddenFields]);
+  
+  // 모든 필드 표시
+  const showAllFields = useCallback(() => {
+    setHiddenFields(new Set());
+  }, []);
+
+  // ==================== 렌더링 ====================
+
+  // 빈 상태
+  if (!data || data.length === 0) {
+    return (
+      <div
+        className={cn(
+          "flex flex-col items-center justify-center",
+          "p-8 text-center text-muted-foreground",
+          "border border-dashed border-border rounded-lg"
+        )}
+      >
+        <RefreshCw className="h-8 w-8 mb-2 opacity-50" />
+        <p className="text-sm">데이터가 없습니다</p>
+        <p className="text-xs mt-1">데이터를 로드하거나 필드를 설정해주세요</p>
+      </div>
+    );
+  }
+
+  // 필드 미설정 (행, 열, 데이터 영역에 필드가 있는지 확인)
+  const hasActiveFields = fields.some(
+    (f) => f.visible !== false && ["row", "column", "data"].includes(f.area)
+  );
+  if (!hasActiveFields) {
+    return (
+      <div
+        className={cn(
+          "flex flex-col",
+          "border border-border rounded-lg overflow-hidden bg-background"
+        )}
+      >
+        {/* 필드 패널 */}
+        <FieldPanel
+          fields={fields}
+          onFieldsChange={handleFieldsChange}
+          collapsed={!showFieldPanel}
+          onToggleCollapse={() => setShowFieldPanel(!showFieldPanel)}
+        />
+
+        {/* 안내 메시지 */}
+        <div className="flex flex-col items-center justify-center p-8 text-center text-muted-foreground">
+          <Settings className="h-8 w-8 mb-2 opacity-50" />
+          <p className="text-sm">필드가 설정되지 않았습니다</p>
+          <p className="text-xs mt-1">
+            행, 열, 데이터 영역에 필드를 배치해주세요
+          </p>
+          <Button
+            variant="outline"
+            size="sm"
+            className="mt-4"
+            onClick={() => setShowFieldChooser(true)}
+          >
+            <LayoutGrid className="h-4 w-4 mr-2" />
+            필드 선택기 열기
+          </Button>
+        </div>
+
+        {/* 필드 선택기 모달 */}
+        <FieldChooser
+          open={showFieldChooser}
+          onOpenChange={setShowFieldChooser}
+          availableFields={availableFields}
+          selectedFields={fields}
+          onFieldsChange={handleFieldsChange}
+        />
+      </div>
+    );
+  }
+
+  // 피벗 결과 없음
+  if (!pivotResult) {
+    return (
+      <div className="flex items-center justify-center p-8">
+        <RefreshCw className="h-5 w-5 animate-spin" />
+      </div>
+    );
+  }
+
+  const { flatColumns, dataMatrix, grandTotals } = pivotResult;
+
+  // ==================== 키보드 네비게이션 ====================
+  
+  // 키보드 핸들러
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (!selectedCell) return;
+    
+    const { rowIndex, colIndex } = selectedCell;
+    const maxRowIndex = visibleFlatRows.length - 1;
+    const maxColIndex = flatColumns.length - 1;
+    
+    let newRowIndex = rowIndex;
+    let newColIndex = colIndex;
+    
+    switch (e.key) {
+      case "ArrowUp":
+        e.preventDefault();
+        newRowIndex = Math.max(0, rowIndex - 1);
+        break;
+      case "ArrowDown":
+        e.preventDefault();
+        newRowIndex = Math.min(maxRowIndex, rowIndex + 1);
+        break;
+      case "ArrowLeft":
+        e.preventDefault();
+        newColIndex = Math.max(0, colIndex - 1);
+        break;
+      case "ArrowRight":
+        e.preventDefault();
+        newColIndex = Math.min(maxColIndex, colIndex + 1);
+        break;
+      case "Home":
+        e.preventDefault();
+        if (e.ctrlKey) {
+          newRowIndex = 0;
+          newColIndex = 0;
+        } else {
+          newColIndex = 0;
+        }
+        break;
+      case "End":
+        e.preventDefault();
+        if (e.ctrlKey) {
+          newRowIndex = maxRowIndex;
+          newColIndex = maxColIndex;
+        } else {
+          newColIndex = maxColIndex;
+        }
+        break;
+      case "PageUp":
+        e.preventDefault();
+        newRowIndex = Math.max(0, rowIndex - 10);
+        break;
+      case "PageDown":
+        e.preventDefault();
+        newRowIndex = Math.min(maxRowIndex, rowIndex + 10);
+        break;
+      case "Enter":
+        e.preventDefault();
+        // 셀 더블클릭과 동일한 동작 (드릴다운)
+        if (visibleFlatRows[rowIndex] && flatColumns[colIndex]) {
+          const row = visibleFlatRows[rowIndex];
+          const col = flatColumns[colIndex];
+          const cellKey = `${pathToKey(row.path)}|||${pathToKey(col.path)}`;
+          const values = dataMatrix.get(cellKey) || [];
+          // 드릴다운 모달 열기
+          const cellData: PivotCellData = {
+            value: values[0]?.value,
+            rowPath: row.path,
+            columnPath: col.path,
+            field: values[0]?.field,
+          };
+          setDrillDownData({ open: true, cellData });
+        }
+        break;
+      case "Escape":
+        e.preventDefault();
+        setSelectedCell(null);
+        setSelectionRange(null);
+        break;
+      case "c":
+        // Ctrl+C: 클립보드 복사
+        if (e.ctrlKey || e.metaKey) {
+          e.preventDefault();
+          copySelectionToClipboard();
+        }
+        return;
+      case "a":
+        // Ctrl+A: 전체 선택
+        if (e.ctrlKey || e.metaKey) {
+          e.preventDefault();
+          setSelectionRange({
+            startRow: 0,
+            startCol: 0,
+            endRow: visibleFlatRows.length - 1,
+            endCol: flatColumns.length - 1,
+          });
+        }
+        return;
+      default:
+        return;
+    }
+    
+    if (newRowIndex !== rowIndex || newColIndex !== colIndex) {
+      setSelectedCell({ rowIndex: newRowIndex, colIndex: newColIndex });
+    }
+  };
+  
+  // 셀 클릭으로 선택 (Shift+클릭으로 범위 선택)
+  const handleCellSelect = (rowIndex: number, colIndex: number, shiftKey: boolean = false) => {
+    if (shiftKey && selectedCell) {
+      // Shift+클릭: 범위 선택
+      setSelectionRange({
+        startRow: Math.min(selectedCell.rowIndex, rowIndex),
+        startCol: Math.min(selectedCell.colIndex, colIndex),
+        endRow: Math.max(selectedCell.rowIndex, rowIndex),
+        endCol: Math.max(selectedCell.colIndex, colIndex),
+      });
+    } else {
+      // 일반 클릭: 단일 선택
+      setSelectedCell({ rowIndex, colIndex });
+      setSelectionRange(null);
+    }
+  };
+  
+  // 셀이 선택 범위 내에 있는지 확인
+  const isCellInRange = (rowIndex: number, colIndex: number): boolean => {
+    if (selectionRange) {
+      return (
+        rowIndex >= selectionRange.startRow &&
+        rowIndex <= selectionRange.endRow &&
+        colIndex >= selectionRange.startCol &&
+        colIndex <= selectionRange.endCol
+      );
+    }
+    if (selectedCell) {
+      return selectedCell.rowIndex === rowIndex && selectedCell.colIndex === colIndex;
+    }
+    return false;
+  };
+  
+  // 열 크기 조절 시작
+  const handleResizeStart = (colIdx: number, e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setResizingColumn(colIdx);
+    setResizeStartX(e.clientX);
+    setResizeStartWidth(columnWidths[colIdx] || 100);
+  };
+  
+  // 클립보드에 선택 영역 복사
+  const copySelectionToClipboard = () => {
+    const range = selectionRange || (selectedCell ? {
+      startRow: selectedCell.rowIndex,
+      startCol: selectedCell.colIndex,
+      endRow: selectedCell.rowIndex,
+      endCol: selectedCell.colIndex,
+    } : null);
+    
+    if (!range) return;
+    
+    const lines: string[] = [];
+    
+    for (let rowIdx = range.startRow; rowIdx <= range.endRow; rowIdx++) {
+      const row = visibleFlatRows[rowIdx];
+      if (!row) continue;
+      
+      const rowValues: string[] = [];
+      for (let colIdx = range.startCol; colIdx <= range.endCol; colIdx++) {
+        const col = flatColumns[colIdx];
+        if (!col) continue;
+        
+        const cellKey = `${pathToKey(row.path)}|||${pathToKey(col.path)}`;
+        const values = dataMatrix.get(cellKey) || [];
+        const cellValue = values.map((v) => v.formattedValue || v.value || "").join(", ");
+        rowValues.push(cellValue);
+      }
+      lines.push(rowValues.join("\t"));
+    }
+    
+    const text = lines.join("\n");
+    navigator.clipboard.writeText(text).then(() => {
+      // 복사 성공 피드백 (선택적)
+      console.log("클립보드에 복사됨:", text);
+    }).catch((err) => {
+      console.error("클립보드 복사 실패:", err);
+    });
+  };
+  
+  // 정렬 토글
+  const handleSort = (field: string) => {
+    setSortConfig((prev) => {
+      if (prev?.field === field) {
+        // 같은 필드 클릭: asc -> desc -> null 순환
+        if (prev.direction === "asc") {
+          return { field, direction: "desc" };
+        }
+        return null; // 정렬 해제
+      }
+      // 새로운 필드: asc로 시작
+      return { field, direction: "asc" };
+    });
+  };
+  
+  // 정렬 아이콘 렌더링
+  const SortIcon = ({ field }: { field: string }) => {
+    if (sortConfig?.field !== field) {
+      return <ArrowUpDown className="h-3 w-3 opacity-30" />;
+    }
+    if (sortConfig.direction === "asc") {
+      return <ArrowUp className="h-3 w-3 text-primary" />;
+    }
+    return <ArrowDown className="h-3 w-3 text-primary" />;
+  };
+
+  return (
+    <div
+      className={cn(
+        "flex flex-col",
+        "border border-border rounded-lg overflow-hidden",
+        "bg-background",
+        isFullscreen && "fixed inset-4 z-50 shadow-2xl"
+      )}
+      style={{
+        height: isFullscreen ? "auto" : height,
+        maxHeight: isFullscreen ? "none" : maxHeight,
+      }}
+    >
+      {/* 필드 패널 - 항상 렌더링 (collapsed 상태로 접기/펼치기 제어) */}
+      <FieldPanel
+        fields={fields}
+        onFieldsChange={handleFieldsChange}
+        collapsed={!showFieldPanel}
+        onToggleCollapse={() => setShowFieldPanel(!showFieldPanel)}
+      />
+
+      {/* 헤더 툴바 */}
+      <div className="flex items-center justify-between px-3 py-2 border-b border-border bg-muted/30">
+        <div className="flex items-center gap-2">
+          {title && <h3 className="text-sm font-medium">{title}</h3>}
+          <span className="text-xs text-muted-foreground">
+            ({filteredData.length !== data.length 
+              ? `${filteredData.length} / ${data.length}건` 
+              : `${data.length}건`})
+          </span>
+        </div>
+
+        <div className="flex items-center gap-1">
+          {/* 필드 선택기 버튼 */}
+          {fieldChooser?.enabled !== false && (
+            <Button
+              variant="ghost"
+              size="sm"
+              className="h-7 px-2"
+              onClick={() => setShowFieldChooser(true)}
+              title="필드 선택기"
+            >
+              <LayoutGrid className="h-4 w-4" />
+            </Button>
+          )}
+
+          {/* 필드 패널 토글 */}
+          <Button
+            variant="ghost"
+            size="sm"
+            className="h-7 px-2"
+            onClick={() => setShowFieldPanel(!showFieldPanel)}
+            title={showFieldPanel ? "필드 패널 숨기기" : "필드 패널 보기"}
+          >
+            <Settings className="h-4 w-4" />
+          </Button>
+
+          {allowExpandAll && (
+            <>
+              <Button
+                variant="ghost"
+                size="sm"
+                className="h-7 px-2"
+                onClick={handleExpandAll}
+                title="전체 확장"
+              >
+                <ChevronDown className="h-4 w-4" />
+              </Button>
+
+              <Button
+                variant="ghost"
+                size="sm"
+                className="h-7 px-2"
+                onClick={handleCollapseAll}
+                title="전체 축소"
+              >
+                <ChevronRight className="h-4 w-4" />
+              </Button>
+            </>
+          )}
+
+          {/* 차트 토글 */}
+          {chartConfig && (
+            <Button
+              variant={showChart ? "secondary" : "ghost"}
+              size="sm"
+              className="h-7 px-2"
+              onClick={() => setShowChart(!showChart)}
+              title={showChart ? "차트 숨기기" : "차트 보기"}
+            >
+              <BarChart3 className="h-4 w-4" />
+            </Button>
+          )}
+
+          {/* 내보내기 버튼들 */}
+          {exportConfig?.excel && (
+            <>
+              <Button
+                variant="ghost"
+                size="sm"
+                className="h-7 px-2"
+                onClick={handleExportCSV}
+                title="CSV 내보내기"
+              >
+                <Download className="h-4 w-4" />
+              </Button>
+              <Button
+                variant="ghost"
+                size="sm"
+                className="h-7 px-2"
+                onClick={handleExportExcel}
+                title="Excel 내보내기"
+              >
+                <FileSpreadsheet className="h-4 w-4" />
+              </Button>
+              <Button
+                variant="ghost"
+                size="sm"
+                className="h-7 px-2"
+                onClick={handlePrint}
+                title="인쇄"
+              >
+                <Printer className="h-4 w-4" />
+              </Button>
+              <Button
+                variant="ghost"
+                size="sm"
+                className="h-7 px-2"
+                onClick={handleExportPDF}
+                title="PDF 내보내기"
+              >
+                <FileText className="h-4 w-4" />
+              </Button>
+            </>
+          )}
+          
+          <Button
+            variant="ghost"
+            size="sm"
+            className="h-7 px-2"
+            onClick={handleRefreshData}
+            disabled={isRefreshing}
+            title="새로고침"
+          >
+            {isRefreshing ? (
+              <Loader2 className="h-4 w-4 animate-spin" />
+            ) : (
+              <RefreshCw className="h-4 w-4" />
+            )}
+          </Button>
+          
+          <Button
+            variant="ghost"
+            size="sm"
+            className="h-7 px-2"
+            onClick={handleSaveState}
+            title="상태 저장"
+          >
+            <Save className="h-4 w-4" />
+          </Button>
+          
+          <Button
+            variant="ghost"
+            size="sm"
+            className="h-7 px-2"
+            onClick={handleResetState}
+            title="상태 초기화"
+          >
+            <RotateCcw className="h-4 w-4" />
+          </Button>
+
+          {/* 숨겨진 필드 표시 드롭다운 */}
+          {hiddenFieldsList.length > 0 && (
+            <div className="relative group">
+              <Button
+                variant="ghost"
+                size="sm"
+                className="h-7 px-2"
+                title={`숨겨진 필드: ${hiddenFieldsList.length}개`}
+              >
+                <EyeOff className="h-4 w-4" />
+                <span className="ml-1 text-xs">{hiddenFieldsList.length}</span>
+              </Button>
+              <div className="absolute right-0 top-full mt-1 hidden group-hover:block z-50 bg-popover border border-border rounded-md shadow-lg min-w-[160px]">
+                <div className="p-2 border-b border-border">
+                  <span className="text-xs font-medium text-muted-foreground">숨겨진 필드</span>
+                </div>
+                <div className="max-h-[200px] overflow-y-auto">
+                  {hiddenFieldsList.map((field) => (
+                    <button
+                      key={field.field}
+                      className="w-full px-3 py-1.5 text-xs text-left hover:bg-accent flex items-center gap-2"
+                      onClick={() => toggleFieldVisibility(field.field)}
+                    >
+                      <Eye className="h-3 w-3" />
+                      <span>{field.caption || field.field}</span>
+                    </button>
+                  ))}
+                </div>
+                <div className="p-1 border-t border-border">
+                  <button
+                    className="w-full px-3 py-1.5 text-xs text-left hover:bg-accent text-primary"
+                    onClick={showAllFields}
+                  >
+                    모두 표시
+                  </button>
+                </div>
+              </div>
+            </div>
+          )}
+
+          <Button
+            variant="ghost"
+            size="sm"
+            className="h-7 px-2"
+            onClick={() => setIsFullscreen(!isFullscreen)}
+            title={isFullscreen ? "원래 크기" : "전체 화면"}
+          >
+            {isFullscreen ? (
+              <Minimize2 className="h-4 w-4" />
+            ) : (
+              <Maximize2 className="h-4 w-4" />
+            )}
+          </Button>
+        </div>
+      </div>
+
+      {/* 필터 바 - 필터 영역에 필드가 있을 때만 표시 */}
+      {filterFields.length > 0 && (
+        <div className="flex items-center gap-2 px-3 py-1.5 border-b border-border bg-orange-50/50 dark:bg-orange-950/10">
+          <Filter className="h-3.5 w-3.5 text-orange-600 dark:text-orange-400" />
+          <span className="text-xs font-medium text-orange-700 dark:text-orange-300">필터:</span>
+          <div className="flex items-center gap-2 flex-wrap">
+            {filterFields.map((filterField) => {
+              const selectedValues = filterField.filterValues || [];
+              const isFiltered = selectedValues.length > 0;
+
+              return (
+                <FilterPopup
+                  key={filterField.field}
+                  field={filterField}
+                  data={data}
+                  onFilterChange={(field, values, type) => {
+                    const newFields = fields.map((f) =>
+                      f.field === field.field && f.area === field.area
+                        ? { ...f, filterValues: values, filterType: type }
+                        : f
+                    );
+                    handleFieldsChange(newFields);
+                  }}
+                  trigger={
+                    <button
+                      className={cn(
+                        "flex items-center gap-1.5 px-2 py-1 rounded text-xs",
+                        "border transition-colors",
+                        isFiltered
+                          ? "bg-orange-100 border-orange-300 text-orange-800 dark:bg-orange-900/30 dark:border-orange-700 dark:text-orange-200"
+                          : "bg-background border-border hover:bg-accent"
+                      )}
+                    >
+                      <span>{filterField.caption}</span>
+                      {isFiltered && (
+                        <span className="bg-orange-500 text-white px-1 rounded text-[10px]">
+                          {selectedValues.length}
+                        </span>
+                      )}
+                      <ChevronDown className="h-3 w-3" />
+                    </button>
+                  }
+                />
+              );
+            })}
+          </div>
+        </div>
+      )}
+
+      {/* 피벗 테이블 */}
+      <div 
+        ref={tableContainerRef}
+        className="flex-1 overflow-auto focus:outline-none"
+        style={{ maxHeight: enableVirtualScroll ? containerHeight : undefined }}
+        tabIndex={0}
+        onKeyDown={handleKeyDown}
+      >
+        <table ref={tableRef} className="w-full border-collapse">
+          <thead>
+            {/* 열 헤더 */}
+            <tr className="bg-muted/50">
+              {/* 좌상단 코너 (행 필드 라벨 + 필터) */}
+              <th
+                className={cn(
+                  "border-r border-b border-border",
+                  "px-2 py-2 text-left text-xs font-medium",
+                  "bg-muted sticky left-0 top-0 z-20"
+                )}
+                rowSpan={columnFields.length > 0 ? 2 : 1}
+              >
+                <div className="flex items-center gap-1 flex-wrap">
+                  {rowFields.map((f, idx) => (
+                    <div key={f.field} className="flex items-center gap-0.5 group">
+                      <span>{f.caption}</span>
+                      <FilterPopup
+                        field={f}
+                        data={data}
+                        onFilterChange={(field, values, type) => {
+                          const newFields = fields.map((fld) =>
+                            fld.field === field.field && fld.area === "row"
+                              ? { ...fld, filterValues: values, filterType: type }
+                              : fld
+                          );
+                          handleFieldsChange(newFields);
+                        }}
+                        trigger={
+                          <button
+                            className={cn(
+                              "p-0.5 rounded opacity-0 group-hover:opacity-100 transition-opacity",
+                              "hover:bg-accent",
+                              f.filterValues && f.filterValues.length > 0 && "opacity-100 text-primary"
+                            )}
+                          >
+                            <Filter className="h-3 w-3" />
+                          </button>
+                        }
+                      />
+                      {idx < rowFields.length - 1 && <span className="mx-0.5 text-muted-foreground">/</span>}
+                    </div>
+                  ))}
+                  {rowFields.length === 0 && <span>항목</span>}
+                </div>
+              </th>
+
+              {/* 열 헤더 셀 */}
+              {flatColumns.map((col, idx) => (
+                <th
+                  key={idx}
+                  className={cn(
+                    "border-r border-b border-border relative group",
+                    "px-2 py-1.5 text-center text-xs font-medium",
+                    "bg-muted/70 sticky top-0 z-10",
+                    dataFields.length === 1 && "cursor-pointer hover:bg-accent/50"
+                  )}
+                  colSpan={dataFields.length || 1}
+                  style={{ width: columnWidths[idx] || "auto", minWidth: 50 }}
+                  onClick={dataFields.length === 1 ? () => handleSort(dataFields[0].field) : undefined}
+                >
+                  <div className="flex items-center justify-center gap-1">
+                    <span>{col.caption || "(전체)"}</span>
+                    {dataFields.length === 1 && <SortIcon field={dataFields[0].field} />}
+                  </div>
+                  {/* 열 리사이즈 핸들 */}
+                  <div
+                    className={cn(
+                      "absolute right-0 top-0 bottom-0 w-1 cursor-col-resize",
+                      "hover:bg-primary/50 transition-colors",
+                      resizingColumn === idx && "bg-primary"
+                    )}
+                    onMouseDown={(e) => handleResizeStart(idx, e)}
+                  />
+                </th>
+              ))}
+              
+              {/* 열 필드 필터 (헤더 왼쪽에 표시) */}
+              {columnFields.length > 0 && (
+                <th
+                  className={cn(
+                    "border-b border-border",
+                    "px-1 py-1.5 text-center text-xs",
+                    "bg-muted/50 sticky top-0 z-10"
+                  )}
+                  rowSpan={columnFields.length > 0 ? 2 : 1}
+                >
+                  <div className="flex flex-col gap-0.5">
+                    {columnFields.map((f) => (
+                      <FilterPopup
+                        key={f.field}
+                        field={f}
+                        data={data}
+                        onFilterChange={(field, values, type) => {
+                          const newFields = fields.map((fld) =>
+                            fld.field === field.field && fld.area === "column"
+                              ? { ...fld, filterValues: values, filterType: type }
+                              : fld
+                          );
+                          handleFieldsChange(newFields);
+                        }}
+                        trigger={
+                          <button
+                            className={cn(
+                              "p-0.5 rounded hover:bg-accent",
+                              f.filterValues && f.filterValues.length > 0 && "text-primary"
+                            )}
+                            title={`${f.caption} 필터`}
+                          >
+                            <Filter className="h-3 w-3" />
+                          </button>
+                        }
+                      />
+                    ))}
+                  </div>
+                </th>
+              )}
+
+              {/* 행 총계 헤더 */}
+              {totals?.showRowGrandTotals && (
+                <th
+                  className={cn(
+                    "border-b border-border",
+                    "px-2 py-1.5 text-center text-xs font-medium",
+                    "bg-primary/10 sticky top-0 z-10"
+                  )}
+                  colSpan={dataFields.length || 1}
+                >
+                  총계
+                </th>
+              )}
+            </tr>
+
+            {/* 데이터 필드 라벨 (다중 데이터 필드인 경우) */}
+            {dataFields.length > 1 && (
+              <tr className="bg-muted/30">
+                {flatColumns.map((col, colIdx) => (
+                  <React.Fragment key={colIdx}>
+                    {dataFields.map((df, dfIdx) => (
+                      <th
+                        key={`${colIdx}-${dfIdx}`}
+                        className={cn(
+                          "border-r border-b border-border",
+                          "px-2 py-1 text-center text-xs font-normal",
+                          "text-muted-foreground cursor-pointer hover:bg-accent/50"
+                        )}
+                        onClick={() => handleSort(df.field)}
+                      >
+                        <div className="flex items-center justify-center gap-1">
+                          <span>{df.caption}</span>
+                          <SortIcon field={df.field} />
+                        </div>
+                      </th>
+                    ))}
+                  </React.Fragment>
+                ))}
+                {totals?.showRowGrandTotals &&
+                  dataFields.map((df, dfIdx) => (
+                    <th
+                      key={`total-${dfIdx}`}
+                      className={cn(
+                        "border-r border-b border-border",
+                        "px-2 py-1 text-center text-xs font-normal",
+                        "bg-primary/5 text-muted-foreground"
+                      )}
+                    >
+                      {df.caption}
+                    </th>
+                  ))}
+              </tr>
+            )}
+          </thead>
+
+          <tbody>
+            {/* 열 총계 행 (상단 위치) */}
+            {totals?.showColumnGrandTotals && totals?.rowGrandTotalPosition === "top" && (
+              <tr className="bg-primary/5 font-medium">
+                <td
+                  className={cn(
+                    "border-r border-b border-border",
+                    "px-2 py-1.5 text-left text-sm",
+                    "bg-primary/10 sticky left-0"
+                  )}
+                >
+                  총계
+                </td>
+
+                {flatColumns.map((col, colIdx) => (
+                  <DataCell
+                    key={colIdx}
+                    values={grandTotals.column.get(pathToKey(col.path)) || []}
+                    isTotal
+                  />
+                ))}
+
+                {/* 대총합 */}
+                {totals?.showRowGrandTotals && (
+                  <DataCell values={grandTotals.grand} isTotal />
+                )}
+              </tr>
+            )}
+            
+            {/* 가상 스크롤 상단 여백 */}
+            {enableVirtualScroll && virtualScroll.offsetTop > 0 && (
+              <tr style={{ height: virtualScroll.offsetTop }}>
+                <td colSpan={rowFields.length + flatColumns.length + (totals?.showRowGrandTotals ? dataFields.length : 0)} />
+              </tr>
+            )}
+            
+            {(() => {
+              // 셀 병합 정보 계산
+              const mergeInfo = calculateMergeCells(visibleFlatRows, style?.mergeCells || false);
+              
+              return visibleFlatRows.map((row, idx) => {
+                // 실제 행 인덱스 계산
+                const rowIdx = enableVirtualScroll ? virtualScroll.startIndex + idx : idx;
+                const cellMerge = mergeInfo.get(idx) || { rowSpan: 1, skip: false };
+                
+                return (
+                  <tr
+                    key={rowIdx}
+                    className={cn(
+                      style?.alternateRowColors &&
+                        rowIdx % 2 === 1 &&
+                        "bg-muted/20"
+                    )}
+                    style={{ height: ROW_HEIGHT }}
+                  >
+                    {/* 행 헤더 (병합되면 skip) */}
+                    {!cellMerge.skip && (
+                      <RowHeaderCell
+                        row={row}
+                        rowFields={rowFields}
+                        onToggleExpand={handleToggleRowExpand}
+                        rowSpan={cellMerge.rowSpan}
+                      />
+                    )}
+
+                  {/* 데이터 셀 */}
+                  {flatColumns.map((col, colIdx) => {
+                    const cellKey = `${pathToKey(row.path)}|||${pathToKey(col.path)}`;
+                    const values = dataMatrix.get(cellKey) || [];
+
+                    // 조건부 서식 (첫 번째 값 기준)
+                    const conditionalStyle =
+                      values.length > 0 && values[0].field
+                        ? getCellConditionalStyle(values[0].value ?? undefined, values[0].field)
+                        : undefined;
+                    
+                    // 선택 상태 확인 (범위 선택 포함)
+                    const isCellSelected = isCellInRange(rowIdx, colIdx);
+
+                    return (
+                      <DataCell
+                        key={colIdx}
+                        values={values}
+                        conditionalStyle={conditionalStyle}
+                        isSelected={isCellSelected}
+                        onClick={(e?: React.MouseEvent) => {
+                          handleCellSelect(rowIdx, colIdx, e?.shiftKey || false);
+                          if (onCellClick) {
+                            handleCellClick(row.path, col.path, values);
+                          }
+                        }}
+                        onDoubleClick={() =>
+                          handleCellDoubleClick(row.path, col.path, values)
+                        }
+                      />
+                    );
+                  })}
+
+                  {/* 행 총계 */}
+                  {totals?.showRowGrandTotals && (
+                    <DataCell
+                      values={grandTotals.row.get(pathToKey(row.path)) || []}
+                      isTotal
+                    />
+                  )}
+                </tr>
+                );
+              });
+            })()}
+            
+            {/* 가상 스크롤 하단 여백 */}
+            {enableVirtualScroll && (
+              <tr style={{ height: virtualScroll.totalHeight - virtualScroll.offsetTop - (visibleFlatRows.length * ROW_HEIGHT) }}>
+                <td colSpan={rowFields.length + flatColumns.length + (totals?.showRowGrandTotals ? dataFields.length : 0)} />
+              </tr>
+            )}
+
+            {/* 열 총계 행 (하단 위치 - 기본값) */}
+            {totals?.showColumnGrandTotals && totals?.rowGrandTotalPosition !== "top" && (
+              <tr className="bg-primary/5 font-medium">
+                <td
+                  className={cn(
+                    "border-r border-b border-border",
+                    "px-2 py-1.5 text-left text-sm",
+                    "bg-primary/10 sticky left-0"
+                  )}
+                >
+                  총계
+                </td>
+
+                {flatColumns.map((col, colIdx) => (
+                  <DataCell
+                    key={colIdx}
+                    values={grandTotals.column.get(pathToKey(col.path)) || []}
+                    isTotal
+                  />
+                ))}
+
+                {/* 대총합 */}
+                {totals?.showRowGrandTotals && (
+                  <DataCell values={grandTotals.grand} isTotal />
+                )}
+              </tr>
+            )}
+          </tbody>
+        </table>
+      </div>
+
+      {/* 차트 */}
+      {showChart && chartConfig && pivotResult && (
+        <PivotChart
+          pivotResult={pivotResult}
+          config={{
+            ...chartConfig,
+            enabled: true,
+          }}
+          dataFields={dataFields}
+        />
+      )}
+
+      {/* 필드 선택기 모달 */}
+      <FieldChooser
+        open={showFieldChooser}
+        onOpenChange={setShowFieldChooser}
+        availableFields={availableFields}
+        selectedFields={fields}
+        onFieldsChange={handleFieldsChange}
+      />
+
+      {/* Drill Down 모달 */}
+      <DrillDownModal
+        open={drillDownData.open}
+        onOpenChange={(open) => setDrillDownData((prev) => ({ ...prev, open }))}
+        cellData={drillDownData.cellData}
+        data={data}
+        fields={fields}
+        rowFields={rowFields}
+        columnFields={columnFields}
+      />
+    </div>
+  );
+};
+
+export default PivotGridComponent;
diff --git a/frontend/lib/registry/components/pivot-grid/PivotGridConfigPanel.tsx b/frontend/lib/registry/components/pivot-grid/PivotGridConfigPanel.tsx
new file mode 100644
index 00000000..37f0862b
--- /dev/null
+++ b/frontend/lib/registry/components/pivot-grid/PivotGridConfigPanel.tsx
@@ -0,0 +1,798 @@
+"use client";
+
+/**
+ * PivotGrid 설정 패널 - 간소화 버전
+ * 
+ * 피벗 테이블 설정 방법:
+ * 1. 테이블 선택
+ * 2. 컬럼을 드래그하여 행/열/값 영역에 배치
+ */
+
+import React, { useState, useEffect, useCallback } from "react";
+import { cn } from "@/lib/utils";
+import {
+  PivotGridComponentConfig,
+  PivotFieldConfig,
+  PivotAreaType,
+  AggregationType,
+  FieldDataType,
+} from "./types";
+import { Label } from "@/components/ui/label";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { Switch } from "@/components/ui/switch";
+import { Badge } from "@/components/ui/badge";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  Rows,
+  Columns,
+  Calculator,
+  X,
+  Plus,
+  GripVertical,
+  Table2,
+  BarChart3,
+  Settings,
+  ChevronDown,
+  ChevronUp,
+  Info,
+} from "lucide-react";
+import { tableTypeApi } from "@/lib/api/screen";
+
+// ==================== 타입 ====================
+
+interface TableInfo {
+  table_name: string;
+  table_comment?: string;
+}
+
+interface ColumnInfo {
+  column_name: string;
+  data_type: string;
+  column_comment?: string;
+}
+
+interface PivotGridConfigPanelProps {
+  config: PivotGridComponentConfig;
+  onChange: (config: PivotGridComponentConfig) => void;
+}
+
+// DB 타입을 FieldDataType으로 변환
+function mapDbTypeToFieldType(dbType: string): FieldDataType {
+  const type = dbType.toLowerCase();
+  if (type.includes("int") || type.includes("numeric") || type.includes("decimal") || type.includes("float")) {
+    return "number";
+  }
+  if (type.includes("date") || type.includes("time") || type.includes("timestamp")) {
+    return "date";
+  }
+  if (type.includes("bool")) {
+    return "boolean";
+  }
+  return "string";
+}
+
+// ==================== 컬럼 칩 컴포넌트 ====================
+
+interface ColumnChipProps {
+  column: ColumnInfo;
+  isUsed: boolean;
+  onClick: () => void;
+}
+
+const ColumnChip: React.FC<ColumnChipProps> = ({ column, isUsed, onClick }) => {
+  const dataType = mapDbTypeToFieldType(column.data_type);
+  const typeColor = {
+    number: "bg-blue-100 text-blue-700 border-blue-200",
+    string: "bg-green-100 text-green-700 border-green-200",
+    date: "bg-purple-100 text-purple-700 border-purple-200",
+    boolean: "bg-orange-100 text-orange-700 border-orange-200",
+  }[dataType];
+
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      disabled={isUsed}
+      className={cn(
+        "inline-flex items-center gap-1 px-2 py-1 rounded-md text-xs border transition-all",
+        isUsed
+          ? "bg-muted text-muted-foreground border-muted cursor-not-allowed opacity-50"
+          : cn(typeColor, "hover:shadow-sm cursor-pointer")
+      )}
+    >
+      <span className="font-medium truncate max-w-[120px]">
+        {column.column_comment || column.column_name}
+      </span>
+    </button>
+  );
+};
+
+// ==================== 영역 드롭존 컴포넌트 ====================
+
+interface AreaDropZoneProps {
+  area: PivotAreaType;
+  label: string;
+  description: string;
+  icon: React.ReactNode;
+  fields: PivotFieldConfig[];
+  columns: ColumnInfo[];
+  onAddField: (column: ColumnInfo) => void;
+  onRemoveField: (index: number) => void;
+  onUpdateField: (index: number, updates: Partial<PivotFieldConfig>) => void;
+  color: string;
+}
+
+const AreaDropZone: React.FC<AreaDropZoneProps> = ({
+  area,
+  label,
+  description,
+  icon,
+  fields,
+  columns,
+  onAddField,
+  onRemoveField,
+  onUpdateField,
+  color,
+}) => {
+  const [isExpanded, setIsExpanded] = useState(true);
+  
+  // 사용 가능한 컬럼 (이미 추가된 컬럼 제외)
+  const availableColumns = columns.filter(
+    (col) => !fields.some((f) => f.field === col.column_name)
+  );
+
+  return (
+    <div className={cn("rounded-lg border-2 p-3", color)}>
+      {/* 헤더 */}
+      <div 
+        className="flex items-center justify-between cursor-pointer"
+        onClick={() => setIsExpanded(!isExpanded)}
+      >
+        <div className="flex items-center gap-2">
+          {icon}
+          <span className="font-medium text-sm">{label}</span>
+          <Badge variant="secondary" className="text-xs">
+            {fields.length}
+          </Badge>
+        </div>
+        {isExpanded ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
+      </div>
+      
+      {/* 설명 */}
+      <p className="text-xs text-muted-foreground mt-1">{description}</p>
+
+      {isExpanded && (
+        <div className="mt-3 space-y-2">
+          {/* 추가된 필드 목록 */}
+          {fields.length > 0 ? (
+            <div className="space-y-1">
+              {fields.map((field, idx) => (
+                <div
+                  key={`${field.field}-${idx}`}
+                  className="flex items-center gap-2 bg-background rounded-md px-2 py-1.5 border"
+                >
+                  <GripVertical className="h-3 w-3 text-muted-foreground" />
+                  <span className="flex-1 text-xs font-medium truncate">
+                    {field.caption || field.field}
+                  </span>
+                  
+                  {/* 데이터 영역일 때 집계 함수 선택 */}
+                  {area === "data" && (
+                    <Select
+                      value={field.summaryType || "sum"}
+                      onValueChange={(v) => onUpdateField(idx, { summaryType: v as AggregationType })}
+                    >
+                      <SelectTrigger className="h-6 w-20 text-xs">
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="sum">합계</SelectItem>
+                        <SelectItem value="count">개수</SelectItem>
+                        <SelectItem value="avg">평균</SelectItem>
+                        <SelectItem value="min">최소</SelectItem>
+                        <SelectItem value="max">최대</SelectItem>
+                      </SelectContent>
+                    </Select>
+                  )}
+                  
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className="h-5 w-5"
+                    onClick={() => onRemoveField(idx)}
+                  >
+                    <X className="h-3 w-3" />
+                  </Button>
+                </div>
+              ))}
+            </div>
+          ) : (
+            <div className="text-xs text-muted-foreground text-center py-2 border border-dashed rounded-md">
+              아래에서 컬럼을 선택하세요
+            </div>
+          )}
+
+          {/* 컬럼 추가 드롭다운 */}
+          {availableColumns.length > 0 && (
+            <Select onValueChange={(v) => {
+              const col = columns.find(c => c.column_name === v);
+              if (col) onAddField(col);
+            }}>
+              <SelectTrigger className="h-8 text-xs">
+                <Plus className="h-3 w-3 mr-1" />
+                <span>컬럼 추가</span>
+              </SelectTrigger>
+              <SelectContent>
+                {availableColumns.map((col) => (
+                  <SelectItem key={col.column_name} value={col.column_name}>
+                    <div className="flex items-center gap-2">
+                      <span>{col.column_comment || col.column_name}</span>
+                      <span className="text-muted-foreground text-xs">
+                        ({mapDbTypeToFieldType(col.data_type)})
+                      </span>
+                    </div>
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+// ==================== 메인 컴포넌트 ====================
+
+export const PivotGridConfigPanel: React.FC<PivotGridConfigPanelProps> = ({
+  config,
+  onChange,
+}) => {
+  const [tables, setTables] = useState<TableInfo[]>([]);
+  const [columns, setColumns] = useState<ColumnInfo[]>([]);
+  const [loadingTables, setLoadingTables] = useState(false);
+  const [loadingColumns, setLoadingColumns] = useState(false);
+  const [showAdvanced, setShowAdvanced] = useState(false);
+
+  // 테이블 목록 로드
+  useEffect(() => {
+    const loadTables = async () => {
+      setLoadingTables(true);
+      try {
+        const tableList = await tableTypeApi.getTables();
+        const mappedTables: TableInfo[] = tableList.map((t: any) => ({
+          table_name: t.tableName,
+          table_comment: t.tableLabel || t.displayName || t.tableName,
+        }));
+        setTables(mappedTables);
+      } catch (error) {
+        console.error("테이블 목록 로드 실패:", error);
+      } finally {
+        setLoadingTables(false);
+      }
+    };
+    loadTables();
+  }, []);
+
+  // 테이블 선택 시 컬럼 로드
+  useEffect(() => {
+    const loadColumns = async () => {
+      if (!config.dataSource?.tableName) {
+        setColumns([]);
+        return;
+      }
+
+      setLoadingColumns(true);
+      try {
+        const columnList = await tableTypeApi.getColumns(config.dataSource.tableName);
+        const mappedColumns: ColumnInfo[] = columnList.map((c: any) => ({
+          column_name: c.columnName || c.column_name,
+          data_type: c.dataType || c.data_type || "text",
+          column_comment: c.columnLabel || c.column_label || c.columnName || c.column_name,
+        }));
+        setColumns(mappedColumns);
+      } catch (error) {
+        console.error("컬럼 목록 로드 실패:", error);
+      } finally {
+        setLoadingColumns(false);
+      }
+    };
+    loadColumns();
+  }, [config.dataSource?.tableName]);
+
+  // 설정 업데이트 헬퍼
+  const updateConfig = useCallback(
+    (updates: Partial<PivotGridComponentConfig>) => {
+      onChange({ ...config, ...updates });
+    },
+    [config, onChange]
+  );
+
+  // 필드 추가
+  const handleAddField = (area: PivotAreaType, column: ColumnInfo) => {
+    const currentFields = config.fields || [];
+    const areaFields = currentFields.filter(f => f.area === area);
+    
+    const newField: PivotFieldConfig = {
+      field: column.column_name,
+      caption: column.column_comment || column.column_name,
+      area,
+      areaIndex: areaFields.length,
+      dataType: mapDbTypeToFieldType(column.data_type),
+      visible: true,
+    };
+    
+    if (area === "data") {
+      newField.summaryType = "sum";
+    }
+    
+    updateConfig({ fields: [...currentFields, newField] });
+  };
+
+  // 필드 제거
+  const handleRemoveField = (area: PivotAreaType, index: number) => {
+    const currentFields = config.fields || [];
+    const newFields = currentFields.filter(
+      (f) => !(f.area === area && f.areaIndex === index)
+    );
+    
+    // 인덱스 재정렬
+    let idx = 0;
+    newFields.forEach((f) => {
+      if (f.area === area) {
+        f.areaIndex = idx++;
+      }
+    });
+    
+    updateConfig({ fields: newFields });
+  };
+
+  // 필드 업데이트
+  const handleUpdateField = (area: PivotAreaType, index: number, updates: Partial<PivotFieldConfig>) => {
+    const currentFields = config.fields || [];
+    const newFields = currentFields.map((f) => {
+      if (f.area === area && f.areaIndex === index) {
+        return { ...f, ...updates };
+      }
+      return f;
+    });
+    updateConfig({ fields: newFields });
+  };
+
+  // 영역별 필드 가져오기
+  const getFieldsByArea = (area: PivotAreaType) => {
+    return (config.fields || [])
+      .filter(f => f.area === area)
+      .sort((a, b) => (a.areaIndex || 0) - (b.areaIndex || 0));
+  };
+
+  return (
+    <div className="space-y-4">
+      {/* 사용 가이드 */}
+      <div className="bg-blue-50 border border-blue-200 rounded-lg p-3">
+        <div className="flex items-start gap-2">
+          <Info className="h-4 w-4 text-blue-600 mt-0.5" />
+          <div className="text-xs text-blue-800">
+            <p className="font-medium mb-1">피벗 테이블 설정 방법</p>
+            <ol className="list-decimal list-inside space-y-0.5 text-blue-700">
+              <li>데이터를 가져올 <strong>테이블</strong>을 선택하세요</li>
+              <li><strong>행 그룹</strong>에 그룹화할 컬럼을 추가하세요 (예: 지역, 부서)</li>
+              <li><strong>열 그룹</strong>에 가로로 펼칠 컬럼을 추가하세요 (예: 월, 분기)</li>
+              <li><strong>값</strong>에 집계할 숫자 컬럼을 추가하세요 (예: 매출, 수량)</li>
+            </ol>
+          </div>
+        </div>
+      </div>
+
+      {/* STEP 1: 테이블 선택 */}
+      <div className="space-y-2">
+        <div className="flex items-center gap-2">
+          <Table2 className="h-4 w-4 text-primary" />
+          <Label className="text-sm font-semibold">STEP 1. 테이블 선택</Label>
+        </div>
+        
+        <Select
+          value={config.dataSource?.tableName || "__none__"}
+          onValueChange={(v) =>
+            updateConfig({
+              dataSource: {
+                ...config.dataSource,
+                type: "table",
+                tableName: v === "__none__" ? undefined : v,
+              },
+              fields: [], // 테이블 변경 시 필드 초기화
+            })
+          }
+        >
+          <SelectTrigger className="h-10">
+            <SelectValue placeholder={loadingTables ? "로딩 중..." : "테이블을 선택하세요"} />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="__none__">선택 안 함</SelectItem>
+            {tables.map((table) => (
+              <SelectItem key={table.table_name} value={table.table_name}>
+                <div className="flex items-center gap-2">
+                  <span className="font-medium">{table.table_comment || table.table_name}</span>
+                  {table.table_comment && (
+                    <span className="text-muted-foreground text-xs">({table.table_name})</span>
+                  )}
+                </div>
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
+
+      {/* STEP 2: 필드 배치 */}
+      {config.dataSource?.tableName && (
+        <div className="space-y-3">
+          <div className="flex items-center gap-2">
+            <BarChart3 className="h-4 w-4 text-primary" />
+            <Label className="text-sm font-semibold">STEP 2. 필드 배치</Label>
+            {loadingColumns && <span className="text-xs text-muted-foreground">(컬럼 로딩 중...)</span>}
+          </div>
+
+          {/* 사용 가능한 컬럼 목록 */}
+          {columns.length > 0 && (
+            <div className="bg-muted/30 rounded-lg p-3 space-y-2">
+              <Label className="text-xs text-muted-foreground">사용 가능한 컬럼</Label>
+              <div className="flex flex-wrap gap-1">
+                {columns.map((col) => {
+                  const isUsed = (config.fields || []).some(f => f.field === col.column_name);
+                  return (
+                    <ColumnChip
+                      key={col.column_name}
+                      column={col}
+                      isUsed={isUsed}
+                      onClick={() => {/* 클릭 시 아무것도 안함 - 드롭존에서 추가 */}}
+                    />
+                  );
+                })}
+              </div>
+            </div>
+          )}
+
+          {/* 영역별 드롭존 */}
+          <div className="grid gap-3">
+            <AreaDropZone
+              area="row"
+              label="행 그룹"
+              description="세로로 그룹화할 항목 (예: 지역, 부서, 제품)"
+              icon={<Rows className="h-4 w-4 text-emerald-600" />}
+              fields={getFieldsByArea("row")}
+              columns={columns}
+              onAddField={(col) => handleAddField("row", col)}
+              onRemoveField={(idx) => handleRemoveField("row", idx)}
+              onUpdateField={(idx, updates) => handleUpdateField("row", idx, updates)}
+              color="border-emerald-200 bg-emerald-50/50"
+            />
+
+            <AreaDropZone
+              area="column"
+              label="열 그룹"
+              description="가로로 펼칠 항목 (예: 월, 분기, 연도)"
+              icon={<Columns className="h-4 w-4 text-blue-600" />}
+              fields={getFieldsByArea("column")}
+              columns={columns}
+              onAddField={(col) => handleAddField("column", col)}
+              onRemoveField={(idx) => handleRemoveField("column", idx)}
+              onUpdateField={(idx, updates) => handleUpdateField("column", idx, updates)}
+              color="border-blue-200 bg-blue-50/50"
+            />
+
+            <AreaDropZone
+              area="data"
+              label="값 (집계)"
+              description="합계, 평균 등을 계산할 숫자 항목 (예: 매출, 수량)"
+              icon={<Calculator className="h-4 w-4 text-amber-600" />}
+              fields={getFieldsByArea("data")}
+              columns={columns}
+              onAddField={(col) => handleAddField("data", col)}
+              onRemoveField={(idx) => handleRemoveField("data", idx)}
+              onUpdateField={(idx, updates) => handleUpdateField("data", idx, updates)}
+              color="border-amber-200 bg-amber-50/50"
+            />
+          </div>
+        </div>
+      )}
+
+      {/* 고급 설정 토글 */}
+      <div className="pt-2">
+        <Button
+          variant="ghost"
+          size="sm"
+          className="w-full justify-between"
+          onClick={() => setShowAdvanced(!showAdvanced)}
+        >
+          <div className="flex items-center gap-2">
+            <Settings className="h-4 w-4" />
+            <span>고급 설정</span>
+          </div>
+          {showAdvanced ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
+        </Button>
+      </div>
+
+      {/* 고급 설정 */}
+      {showAdvanced && (
+        <div className="space-y-4 pt-2 border-t">
+          {/* 표시 설정 */}
+          <div className="space-y-3">
+            <Label className="text-xs font-medium text-muted-foreground">표시 설정</Label>
+            
+            <div className="grid grid-cols-2 gap-2">
+              <div className="flex items-center justify-between p-2 rounded-md bg-muted/30">
+                <Label className="text-xs">행 총계</Label>
+                <Switch
+                  checked={config.totals?.showRowGrandTotals !== false}
+                  onCheckedChange={(v) =>
+                    updateConfig({ totals: { ...config.totals, showRowGrandTotals: v } })
+                  }
+                />
+              </div>
+              
+              <div className="flex items-center justify-between p-2 rounded-md bg-muted/30">
+                <Label className="text-xs">열 총계</Label>
+                <Switch
+                  checked={config.totals?.showColumnGrandTotals !== false}
+                  onCheckedChange={(v) =>
+                    updateConfig({ totals: { ...config.totals, showColumnGrandTotals: v } })
+                  }
+                />
+              </div>
+              
+              <div className="flex items-center justify-between p-2 rounded-md bg-muted/30">
+                <Label className="text-xs">행 총계 위치</Label>
+                <Select
+                  value={config.totals?.rowGrandTotalPosition || "bottom"}
+                  onValueChange={(v) =>
+                    updateConfig({ totals: { ...config.totals, rowGrandTotalPosition: v as "top" | "bottom" } })
+                  }
+                >
+                  <SelectTrigger className="h-6 w-16 text-xs">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="top">상단</SelectItem>
+                    <SelectItem value="bottom">하단</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+              
+              <div className="flex items-center justify-between p-2 rounded-md bg-muted/30">
+                <Label className="text-xs">열 총계 위치</Label>
+                <Select
+                  value={config.totals?.columnGrandTotalPosition || "right"}
+                  onValueChange={(v) =>
+                    updateConfig({ totals: { ...config.totals, columnGrandTotalPosition: v as "left" | "right" } })
+                  }
+                >
+                  <SelectTrigger className="h-6 w-16 text-xs">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="left">좌측</SelectItem>
+                    <SelectItem value="right">우측</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+              
+              <div className="flex items-center justify-between p-2 rounded-md bg-muted/30">
+                <Label className="text-xs">행 소계</Label>
+                <Switch
+                  checked={config.totals?.showRowTotals !== false}
+                  onCheckedChange={(v) =>
+                    updateConfig({ totals: { ...config.totals, showRowTotals: v } })
+                  }
+                />
+              </div>
+              
+              <div className="flex items-center justify-between p-2 rounded-md bg-muted/30">
+                <Label className="text-xs">열 소계</Label>
+                <Switch
+                  checked={config.totals?.showColumnTotals !== false}
+                  onCheckedChange={(v) =>
+                    updateConfig({ totals: { ...config.totals, showColumnTotals: v } })
+                  }
+                />
+              </div>
+              
+              <div className="flex items-center justify-between p-2 rounded-md bg-muted/30">
+                <Label className="text-xs">줄무늬</Label>
+                <Switch
+                  checked={config.style?.alternateRowColors !== false}
+                  onCheckedChange={(v) =>
+                    updateConfig({ style: { ...config.style, alternateRowColors: v } })
+                  }
+                />
+              </div>
+              
+              <div className="flex items-center justify-between p-2 rounded-md bg-muted/30">
+                <Label className="text-xs">셀 병합</Label>
+                <Switch
+                  checked={config.style?.mergeCells === true}
+                  onCheckedChange={(v) =>
+                    updateConfig({ style: { ...config.style, mergeCells: v } })
+                  }
+                />
+              </div>
+              
+              <div className="flex items-center justify-between p-2 rounded-md bg-muted/30">
+                <Label className="text-xs">CSV 내보내기</Label>
+                <Switch
+                  checked={config.exportConfig?.excel === true}
+                  onCheckedChange={(v) =>
+                    updateConfig({ exportConfig: { ...config.exportConfig, excel: v } })
+                  }
+                />
+              </div>
+              
+              <div className="flex items-center justify-between p-2 rounded-md bg-muted/30">
+                <Label className="text-xs">상태 저장</Label>
+                <Switch
+                  checked={config.saveState === true}
+                  onCheckedChange={(v) =>
+                    updateConfig({ saveState: v })
+                  }
+                />
+              </div>
+            </div>
+          </div>
+
+          {/* 크기 설정 */}
+          <div className="space-y-2">
+            <Label className="text-xs font-medium text-muted-foreground">크기 설정</Label>
+            <div className="grid grid-cols-2 gap-2">
+              <div>
+                <Label className="text-xs">높이</Label>
+                <Input
+                  value={config.height || ""}
+                  onChange={(e) => updateConfig({ height: e.target.value })}
+                  placeholder="400px"
+                  className="h-8 text-xs"
+                />
+              </div>
+              <div>
+                <Label className="text-xs">최대 높이</Label>
+                <Input
+                  value={config.maxHeight || ""}
+                  onChange={(e) => updateConfig({ maxHeight: e.target.value })}
+                  placeholder="600px"
+                  className="h-8 text-xs"
+                />
+              </div>
+            </div>
+          </div>
+          
+          {/* 조건부 서식 */}
+          <div className="space-y-2">
+            <Label className="text-xs font-medium text-muted-foreground">조건부 서식</Label>
+            <div className="space-y-2">
+              {(config.style?.conditionalFormats || []).map((rule, index) => (
+                <div key={rule.id} className="flex items-center gap-2 p-2 rounded-md bg-muted/30">
+                  <Select
+                    value={rule.type}
+                    onValueChange={(v) => {
+                      const newFormats = [...(config.style?.conditionalFormats || [])];
+                      newFormats[index] = { ...rule, type: v as any };
+                      updateConfig({ style: { ...config.style, conditionalFormats: newFormats } });
+                    }}
+                  >
+                    <SelectTrigger className="h-7 w-24 text-xs">
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="colorScale">색상 스케일</SelectItem>
+                      <SelectItem value="dataBar">데이터 바</SelectItem>
+                      <SelectItem value="iconSet">아이콘 세트</SelectItem>
+                      <SelectItem value="cellValue">셀 값 조건</SelectItem>
+                    </SelectContent>
+                  </Select>
+                  
+                  {rule.type === "colorScale" && (
+                    <div className="flex items-center gap-1">
+                      <input
+                        type="color"
+                        value={rule.colorScale?.minColor || "#ff0000"}
+                        onChange={(e) => {
+                          const newFormats = [...(config.style?.conditionalFormats || [])];
+                          newFormats[index] = { ...rule, colorScale: { ...rule.colorScale, minColor: e.target.value, maxColor: rule.colorScale?.maxColor || "#00ff00" } };
+                          updateConfig({ style: { ...config.style, conditionalFormats: newFormats } });
+                        }}
+                        className="w-6 h-6 rounded cursor-pointer"
+                        title="최소값 색상"
+                      />
+                      <span className="text-xs">→</span>
+                      <input
+                        type="color"
+                        value={rule.colorScale?.maxColor || "#00ff00"}
+                        onChange={(e) => {
+                          const newFormats = [...(config.style?.conditionalFormats || [])];
+                          newFormats[index] = { ...rule, colorScale: { ...rule.colorScale, minColor: rule.colorScale?.minColor || "#ff0000", maxColor: e.target.value } };
+                          updateConfig({ style: { ...config.style, conditionalFormats: newFormats } });
+                        }}
+                        className="w-6 h-6 rounded cursor-pointer"
+                        title="최대값 색상"
+                      />
+                    </div>
+                  )}
+                  
+                  {rule.type === "dataBar" && (
+                    <input
+                      type="color"
+                      value={rule.dataBar?.color || "#3b82f6"}
+                      onChange={(e) => {
+                        const newFormats = [...(config.style?.conditionalFormats || [])];
+                        newFormats[index] = { ...rule, dataBar: { color: e.target.value } };
+                        updateConfig({ style: { ...config.style, conditionalFormats: newFormats } });
+                      }}
+                      className="w-6 h-6 rounded cursor-pointer"
+                      title="바 색상"
+                    />
+                  )}
+                  
+                  {rule.type === "iconSet" && (
+                    <Select
+                      value={rule.iconSet?.type || "traffic"}
+                      onValueChange={(v) => {
+                        const newFormats = [...(config.style?.conditionalFormats || [])];
+                        newFormats[index] = { ...rule, iconSet: { type: v as any, thresholds: [33, 67] } };
+                        updateConfig({ style: { ...config.style, conditionalFormats: newFormats } });
+                      }}
+                    >
+                      <SelectTrigger className="h-7 w-20 text-xs">
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="arrows">화살표</SelectItem>
+                        <SelectItem value="traffic">신호등</SelectItem>
+                        <SelectItem value="rating">별점</SelectItem>
+                        <SelectItem value="flags">깃발</SelectItem>
+                      </SelectContent>
+                    </Select>
+                  )}
+                  
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className="h-6 w-6 ml-auto"
+                    onClick={() => {
+                      const newFormats = (config.style?.conditionalFormats || []).filter((_, i) => i !== index);
+                      updateConfig({ style: { ...config.style, conditionalFormats: newFormats } });
+                    }}
+                  >
+                    <X className="h-3 w-3" />
+                  </Button>
+                </div>
+              ))}
+              
+              <Button
+                variant="outline"
+                size="sm"
+                className="w-full"
+                onClick={() => {
+                  const newFormats = [
+                    ...(config.style?.conditionalFormats || []),
+                    { id: `cf_${Date.now()}`, type: "colorScale" as const, colorScale: { minColor: "#ff0000", maxColor: "#00ff00" } }
+                  ];
+                  updateConfig({ style: { ...config.style, conditionalFormats: newFormats } });
+                }}
+              >
+                <Plus className="h-3 w-3 mr-1" />
+                조건부 서식 추가
+              </Button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default PivotGridConfigPanel;
diff --git a/frontend/lib/registry/components/pivot-grid/PivotGridRenderer.tsx b/frontend/lib/registry/components/pivot-grid/PivotGridRenderer.tsx
new file mode 100644
index 00000000..8e3563d9
--- /dev/null
+++ b/frontend/lib/registry/components/pivot-grid/PivotGridRenderer.tsx
@@ -0,0 +1,306 @@
+"use client";
+
+import React from "react";
+import { AutoRegisteringComponentRenderer } from "../../AutoRegisteringComponentRenderer";
+import { createComponentDefinition } from "../../utils/createComponentDefinition";
+import { ComponentCategory } from "@/types/component";
+import { PivotGridComponent } from "./PivotGridComponent";
+import { PivotGridConfigPanel } from "./PivotGridConfigPanel";
+import { PivotFieldConfig } from "./types";
+
+// ==================== 샘플 데이터 (미리보기용) ====================
+
+const SAMPLE_DATA = [
+  { region: "서울", product: "노트북", quarter: "Q1", sales: 1500000, quantity: 15 },
+  { region: "서울", product: "노트북", quarter: "Q2", sales: 1800000, quantity: 18 },
+  { region: "서울", product: "노트북", quarter: "Q3", sales: 2100000, quantity: 21 },
+  { region: "서울", product: "노트북", quarter: "Q4", sales: 2500000, quantity: 25 },
+  { region: "서울", product: "스마트폰", quarter: "Q1", sales: 2000000, quantity: 40 },
+  { region: "서울", product: "스마트폰", quarter: "Q2", sales: 2200000, quantity: 44 },
+  { region: "서울", product: "스마트폰", quarter: "Q3", sales: 2500000, quantity: 50 },
+  { region: "서울", product: "스마트폰", quarter: "Q4", sales: 3000000, quantity: 60 },
+  { region: "서울", product: "태블릿", quarter: "Q1", sales: 800000, quantity: 10 },
+  { region: "서울", product: "태블릿", quarter: "Q2", sales: 900000, quantity: 11 },
+  { region: "서울", product: "태블릿", quarter: "Q3", sales: 1000000, quantity: 12 },
+  { region: "서울", product: "태블릿", quarter: "Q4", sales: 1200000, quantity: 15 },
+  { region: "부산", product: "노트북", quarter: "Q1", sales: 1000000, quantity: 10 },
+  { region: "부산", product: "노트북", quarter: "Q2", sales: 1200000, quantity: 12 },
+  { region: "부산", product: "노트북", quarter: "Q3", sales: 1400000, quantity: 14 },
+  { region: "부산", product: "노트북", quarter: "Q4", sales: 1600000, quantity: 16 },
+  { region: "부산", product: "스마트폰", quarter: "Q1", sales: 1500000, quantity: 30 },
+  { region: "부산", product: "스마트폰", quarter: "Q2", sales: 1700000, quantity: 34 },
+  { region: "부산", product: "스마트폰", quarter: "Q3", sales: 1900000, quantity: 38 },
+  { region: "부산", product: "스마트폰", quarter: "Q4", sales: 2200000, quantity: 44 },
+  { region: "부산", product: "태블릿", quarter: "Q1", sales: 500000, quantity: 6 },
+  { region: "부산", product: "태블릿", quarter: "Q2", sales: 600000, quantity: 7 },
+  { region: "부산", product: "태블릿", quarter: "Q3", sales: 700000, quantity: 8 },
+  { region: "부산", product: "태블릿", quarter: "Q4", sales: 800000, quantity: 10 },
+  { region: "대구", product: "노트북", quarter: "Q1", sales: 700000, quantity: 7 },
+  { region: "대구", product: "노트북", quarter: "Q2", sales: 850000, quantity: 8 },
+  { region: "대구", product: "노트북", quarter: "Q3", sales: 900000, quantity: 9 },
+  { region: "대구", product: "노트북", quarter: "Q4", sales: 1100000, quantity: 11 },
+  { region: "대구", product: "스마트폰", quarter: "Q1", sales: 1000000, quantity: 20 },
+  { region: "대구", product: "스마트폰", quarter: "Q2", sales: 1200000, quantity: 24 },
+  { region: "대구", product: "스마트폰", quarter: "Q3", sales: 1300000, quantity: 26 },
+  { region: "대구", product: "스마트폰", quarter: "Q4", sales: 1500000, quantity: 30 },
+  { region: "대구", product: "태블릿", quarter: "Q1", sales: 400000, quantity: 5 },
+  { region: "대구", product: "태블릿", quarter: "Q2", sales: 450000, quantity: 5 },
+  { region: "대구", product: "태블릿", quarter: "Q3", sales: 500000, quantity: 6 },
+  { region: "대구", product: "태블릿", quarter: "Q4", sales: 600000, quantity: 7 },
+];
+
+const SAMPLE_FIELDS: PivotFieldConfig[] = [
+  {
+    field: "region",
+    caption: "지역",
+    area: "row",
+    areaIndex: 0,
+    dataType: "string",
+    visible: true,
+  },
+  {
+    field: "product",
+    caption: "제품",
+    area: "row",
+    areaIndex: 1,
+    dataType: "string",
+    visible: true,
+  },
+  {
+    field: "quarter",
+    caption: "분기",
+    area: "column",
+    areaIndex: 0,
+    dataType: "string",
+    visible: true,
+  },
+  {
+    field: "sales",
+    caption: "매출",
+    area: "data",
+    areaIndex: 0,
+    dataType: "number",
+    summaryType: "sum",
+    format: { type: "number", precision: 0 },
+    visible: true,
+  },
+];
+
+/**
+ * PivotGrid 래퍼 컴포넌트 (디자인 모드에서 샘플 데이터 주입)
+ */
+const PivotGridWrapper: React.FC<any> = (props) => {
+  // 컴포넌트 설정에서 값 추출
+  const componentConfig = props.componentConfig || props.config || {};
+  const configFields = componentConfig.fields || props.fields;
+  const configData = props.data;
+  
+  // 디버깅 로그
+  console.log("🔷 PivotGridWrapper props:", {
+    isDesignMode: props.isDesignMode,
+    isInteractive: props.isInteractive,
+    hasComponentConfig: !!props.componentConfig,
+    hasConfig: !!props.config,
+    hasData: !!configData,
+    dataLength: configData?.length,
+    hasFields: !!configFields,
+    fieldsLength: configFields?.length,
+  });
+
+  // 디자인 모드 판단:
+  // 1. isDesignMode === true
+  // 2. isInteractive === false (편집 모드)
+  // 3. 데이터가 없는 경우
+  const isDesignMode = props.isDesignMode === true || props.isInteractive === false;
+  const hasValidData = configData && Array.isArray(configData) && configData.length > 0;
+  const hasValidFields = configFields && Array.isArray(configFields) && configFields.length > 0;
+  
+  // 디자인 모드이거나 데이터가 없으면 샘플 데이터 사용
+  const usePreviewData = isDesignMode || !hasValidData;
+
+  // 최종 데이터/필드 결정
+  const finalData = usePreviewData ? SAMPLE_DATA : configData;
+  const finalFields = hasValidFields ? configFields : SAMPLE_FIELDS;
+  const finalTitle = usePreviewData 
+    ? (componentConfig.title || props.title || "피벗 그리드") + " (미리보기)"
+    : (componentConfig.title || props.title);
+
+  console.log("🔷 PivotGridWrapper final:", {
+    isDesignMode,
+    usePreviewData,
+    finalDataLength: finalData?.length,
+    finalFieldsLength: finalFields?.length,
+  });
+
+  // 총계 설정
+  const totalsConfig = componentConfig.totals || props.totals || {
+    showRowGrandTotals: true,
+    showColumnGrandTotals: true,
+    showRowTotals: true,
+    showColumnTotals: true,
+  };
+
+  return (
+    <PivotGridComponent
+      title={finalTitle}
+      data={finalData}
+      fields={finalFields}
+      totals={totalsConfig}
+      style={componentConfig.style || props.style}
+      fieldChooser={componentConfig.fieldChooser || props.fieldChooser}
+      chart={componentConfig.chart || props.chart}
+      allowExpandAll={componentConfig.allowExpandAll !== false}
+      height={componentConfig.height || props.height || "400px"}
+      maxHeight={componentConfig.maxHeight || props.maxHeight}
+      exportConfig={componentConfig.exportConfig || props.exportConfig || { excel: true }}
+      onCellClick={props.onCellClick}
+      onCellDoubleClick={props.onCellDoubleClick}
+      onFieldDrop={props.onFieldDrop}
+      onExpandChange={props.onExpandChange}
+    />
+  );
+};
+
+/**
+ * PivotGrid 컴포넌트 정의
+ */
+const PivotGridDefinition = createComponentDefinition({
+  id: "pivot-grid",
+  name: "피벗 그리드",
+  nameEng: "PivotGrid Component",
+  description: "다차원 데이터 분석을 위한 피벗 테이블 컴포넌트",
+  category: ComponentCategory.DISPLAY,
+  webType: "text",
+  component: PivotGridWrapper, // 래퍼 컴포넌트 사용
+  defaultConfig: {
+    dataSource: {
+      type: "table",
+      tableName: "",
+    },
+    fields: SAMPLE_FIELDS,
+    // 미리보기용 샘플 데이터
+    sampleData: SAMPLE_DATA,
+    totals: {
+      showRowGrandTotals: true,
+      showColumnGrandTotals: true,
+      showRowTotals: true,
+      showColumnTotals: true,
+    },
+    style: {
+      theme: "default",
+      headerStyle: "default",
+      cellPadding: "normal",
+      borderStyle: "light",
+      alternateRowColors: true,
+      highlightTotals: true,
+    },
+    allowExpandAll: true,
+    exportConfig: {
+      excel: true,
+    },
+    height: "400px",
+  },
+  defaultSize: { width: 800, height: 500 },
+  configPanel: PivotGridConfigPanel,
+  icon: "BarChart3",
+  tags: ["피벗", "분석", "집계", "그리드", "데이터"],
+  version: "1.0.0",
+  author: "개발팀",
+  documentation: "",
+});
+
+/**
+ * PivotGrid 렌더러
+ * 자동 등록 시스템을 사용하여 컴포넌트를 레지스트리에 등록
+ */
+export class PivotGridRenderer extends AutoRegisteringComponentRenderer {
+  static componentDefinition = PivotGridDefinition;
+
+  render(): React.ReactElement {
+    const props = this.props as any;
+    
+    // 컴포넌트 설정에서 값 추출
+    const componentConfig = props.componentConfig || props.config || {};
+    const configFields = componentConfig.fields || props.fields;
+    const configData = props.data;
+    
+    // 디버깅 로그
+    console.log("🔷 PivotGridRenderer props:", {
+      isDesignMode: props.isDesignMode,
+      isInteractive: props.isInteractive,
+      hasComponentConfig: !!props.componentConfig,
+      hasConfig: !!props.config,
+      hasData: !!configData,
+      dataLength: configData?.length,
+      hasFields: !!configFields,
+      fieldsLength: configFields?.length,
+    });
+
+    // 디자인 모드 판단:
+    // 1. isDesignMode === true
+    // 2. isInteractive === false (편집 모드)
+    // 3. 데이터가 없는 경우
+    const isDesignMode = props.isDesignMode === true || props.isInteractive === false;
+    const hasValidData = configData && Array.isArray(configData) && configData.length > 0;
+    const hasValidFields = configFields && Array.isArray(configFields) && configFields.length > 0;
+    
+    // 디자인 모드이거나 데이터가 없으면 샘플 데이터 사용
+    const usePreviewData = isDesignMode || !hasValidData;
+
+    // 최종 데이터/필드 결정
+    const finalData = usePreviewData ? SAMPLE_DATA : configData;
+    const finalFields = hasValidFields ? configFields : SAMPLE_FIELDS;
+    const finalTitle = usePreviewData 
+      ? (componentConfig.title || props.title || "피벗 그리드") + " (미리보기)"
+      : (componentConfig.title || props.title);
+
+    console.log("🔷 PivotGridRenderer final:", {
+      isDesignMode,
+      usePreviewData,
+      finalDataLength: finalData?.length,
+      finalFieldsLength: finalFields?.length,
+    });
+
+    // 총계 설정
+    const totalsConfig = componentConfig.totals || props.totals || {
+      showRowGrandTotals: true,
+      showColumnGrandTotals: true,
+      showRowTotals: true,
+      showColumnTotals: true,
+    };
+
+    return (
+      <PivotGridComponent
+        title={finalTitle}
+        data={finalData}
+        fields={finalFields}
+        totals={totalsConfig}
+        style={componentConfig.style || props.style}
+        fieldChooser={componentConfig.fieldChooser || props.fieldChooser}
+        chart={componentConfig.chart || props.chart}
+        allowExpandAll={componentConfig.allowExpandAll !== false}
+        height={componentConfig.height || props.height || "400px"}
+        maxHeight={componentConfig.maxHeight || props.maxHeight}
+        exportConfig={componentConfig.exportConfig || props.exportConfig || { excel: true }}
+        onCellClick={props.onCellClick}
+        onCellDoubleClick={props.onCellDoubleClick}
+        onFieldDrop={props.onFieldDrop}
+        onExpandChange={props.onExpandChange}
+      />
+    );
+  }
+}
+
+// 자동 등록 실행
+PivotGridRenderer.registerSelf();
+
+// 강제 등록 (디버깅용)
+if (typeof window !== "undefined") {
+  setTimeout(() => {
+    try {
+      PivotGridRenderer.registerSelf();
+    } catch (error) {
+      console.error("❌ PivotGrid 강제 등록 실패:", error);
+    }
+  }, 1000);
+}
diff --git a/frontend/lib/registry/components/pivot-grid/README.md b/frontend/lib/registry/components/pivot-grid/README.md
new file mode 100644
index 00000000..bc6fba52
--- /dev/null
+++ b/frontend/lib/registry/components/pivot-grid/README.md
@@ -0,0 +1,239 @@
+# PivotGrid 컴포넌트
+
+다차원 데이터 분석을 위한 피벗 테이블 컴포넌트입니다.
+
+## 주요 기능
+
+### 1. 다차원 데이터 배치
+
+- **행 영역(Row Area)**: 데이터를 행으로 그룹화 (예: 지역 → 도시)
+- **열 영역(Column Area)**: 데이터를 열로 그룹화 (예: 연도 → 분기)
+- **데이터 영역(Data Area)**: 집계될 수치 필드 (예: 매출액, 수량)
+- **필터 영역(Filter Area)**: 전체 데이터 필터링
+
+### 2. 집계 함수
+
+| 함수 | 설명 | 사용 예 |
+|------|------|---------|
+| `sum` | 합계 | 매출 합계 |
+| `count` | 개수 | 건수 |
+| `avg` | 평균 | 평균 단가 |
+| `min` | 최소값 | 최저가 |
+| `max` | 최대값 | 최고가 |
+| `countDistinct` | 고유값 개수 | 거래처 수 |
+
+### 3. 날짜 그룹화
+
+날짜 필드를 다양한 단위로 그룹화할 수 있습니다:
+
+- `year`: 연도별
+- `quarter`: 분기별
+- `month`: 월별
+- `week`: 주별
+- `day`: 일별
+
+### 4. 드릴다운
+
+계층적 데이터를 확장/축소하여 상세 내용을 볼 수 있습니다.
+
+### 5. 총합계/소계
+
+- 행 총합계 (Row Grand Total)
+- 열 총합계 (Column Grand Total)
+- 행 소계 (Row Subtotal)
+- 열 소계 (Column Subtotal)
+
+### 6. 내보내기
+
+CSV 형식으로 데이터를 내보낼 수 있습니다.
+
+## 사용법
+
+### 기본 사용
+
+```tsx
+import { PivotGridComponent } from "@/lib/registry/components/pivot-grid";
+
+const salesData = [
+  { region: "북미", city: "뉴욕", year: 2024, quarter: "Q1", amount: 15000 },
+  { region: "북미", city: "LA", year: 2024, quarter: "Q1", amount: 12000 },
+  // ...
+];
+
+<PivotGridComponent
+  title="매출 분석"
+  data={salesData}
+  fields={[
+    { field: "region", caption: "지역", area: "row", areaIndex: 0 },
+    { field: "city", caption: "도시", area: "row", areaIndex: 1 },
+    { field: "year", caption: "연도", area: "column", areaIndex: 0 },
+    { field: "quarter", caption: "분기", area: "column", areaIndex: 1 },
+    { field: "amount", caption: "매출액", area: "data", summaryType: "sum" },
+  ]}
+/>
+```
+
+### 날짜 그룹화
+
+```tsx
+<PivotGridComponent
+  data={orderData}
+  fields={[
+    { field: "customer", caption: "거래처", area: "row" },
+    {
+      field: "orderDate",
+      caption: "주문일",
+      area: "column",
+      dataType: "date",
+      groupInterval: "month", // 월별 그룹화
+    },
+    { field: "totalAmount", caption: "주문금액", area: "data", summaryType: "sum" },
+  ]}
+/>
+```
+
+### 포맷 설정
+
+```tsx
+<PivotGridComponent
+  data={salesData}
+  fields={[
+    { field: "region", caption: "지역", area: "row" },
+    { field: "year", caption: "연도", area: "column" },
+    {
+      field: "amount",
+      caption: "매출액",
+      area: "data",
+      summaryType: "sum",
+      format: {
+        type: "currency",
+        prefix: "₩",
+        thousandSeparator: true,
+      },
+    },
+    {
+      field: "ratio",
+      caption: "비율",
+      area: "data",
+      summaryType: "avg",
+      format: {
+        type: "percent",
+        precision: 1,
+        suffix: "%",
+      },
+    },
+  ]}
+/>
+```
+
+### 화면 관리에서 사용
+
+설정 패널을 통해 테이블 선택, 필드 배치, 집계 함수 등을 GUI로 설정할 수 있습니다.
+
+```tsx
+import { PivotGridRenderer } from "@/lib/registry/components/pivot-grid";
+
+<PivotGridRenderer
+  id="pivot1"
+  config={{
+    dataSource: {
+      type: "table",
+      tableName: "sales_data",
+    },
+    fields: [...],
+    totals: {
+      showRowGrandTotals: true,
+      showColumnGrandTotals: true,
+    },
+    exportConfig: {
+      excel: true,
+    },
+  }}
+  autoFilter={{ companyCode: "COMPANY_A" }}
+/>
+```
+
+## 설정 옵션
+
+### PivotGridProps
+
+| 속성 | 타입 | 기본값 | 설명 |
+|------|------|--------|------|
+| `title` | `string` | - | 피벗 테이블 제목 |
+| `data` | `any[]` | `[]` | 원본 데이터 배열 |
+| `fields` | `PivotFieldConfig[]` | `[]` | 필드 설정 목록 |
+| `totals` | `PivotTotalsConfig` | - | 총합계/소계 표시 설정 |
+| `style` | `PivotStyleConfig` | - | 스타일 설정 |
+| `allowExpandAll` | `boolean` | `true` | 전체 확장/축소 버튼 |
+| `exportConfig` | `PivotExportConfig` | - | 내보내기 설정 |
+| `height` | `string | number` | `"auto"` | 높이 |
+| `maxHeight` | `string` | - | 최대 높이 |
+
+### PivotFieldConfig
+
+| 속성 | 타입 | 필수 | 설명 |
+|------|------|------|------|
+| `field` | `string` | O | 데이터 필드명 |
+| `caption` | `string` | O | 표시 라벨 |
+| `area` | `"row" | "column" | "data" | "filter"` | O | 배치 영역 |
+| `areaIndex` | `number` | - | 영역 내 순서 |
+| `dataType` | `"string" | "number" | "date" | "boolean"` | - | 데이터 타입 |
+| `summaryType` | `AggregationType` | - | 집계 함수 (data 영역) |
+| `groupInterval` | `DateGroupInterval` | - | 날짜 그룹 단위 |
+| `format` | `PivotFieldFormat` | - | 값 포맷 |
+| `visible` | `boolean` | - | 표시 여부 |
+
+### PivotTotalsConfig
+
+| 속성 | 타입 | 기본값 | 설명 |
+|------|------|--------|------|
+| `showRowGrandTotals` | `boolean` | `true` | 행 총합계 표시 |
+| `showColumnGrandTotals` | `boolean` | `true` | 열 총합계 표시 |
+| `showRowTotals` | `boolean` | `true` | 행 소계 표시 |
+| `showColumnTotals` | `boolean` | `true` | 열 소계 표시 |
+
+## 파일 구조
+
+```
+pivot-grid/
+├── index.ts                    # 모듈 진입점
+├── types.ts                    # 타입 정의
+├── PivotGridComponent.tsx      # 메인 컴포넌트
+├── PivotGridRenderer.tsx       # 화면 관리 렌더러
+├── PivotGridConfigPanel.tsx    # 설정 패널
+├── README.md                   # 문서
+└── utils/
+    ├── index.ts                # 유틸리티 모듈 진입점
+    ├── aggregation.ts          # 집계 함수
+    └── pivotEngine.ts          # 피벗 데이터 처리 엔진
+```
+
+## 사용 시나리오
+
+### 1. 매출 분석
+
+지역별/기간별/제품별 매출 현황을 분석합니다.
+
+### 2. 재고 현황
+
+창고별/품목별 재고 수량을 한눈에 파악합니다.
+
+### 3. 생산 실적
+
+생산라인별/일자별 생산량을 분석합니다.
+
+### 4. 비용 분석
+
+부서별/계정별 비용을 집계하여 분석합니다.
+
+### 5. 수주 현황
+
+거래처별/품목별/월별 수주 현황을 분석합니다.
+
+## 주의사항
+
+1. **대량 데이터**: 데이터가 많을 경우 성능에 영향을 줄 수 있습니다. 적절한 필터링을 사용하세요.
+2. **멀티테넌시**: `autoFilter.companyCode`를 통해 회사별 데이터 격리가 적용됩니다.
+3. **필드 순서**: `areaIndex`를 통해 영역 내 필드 순서를 지정하세요.
+
+
diff --git a/frontend/lib/registry/components/pivot-grid/components/ContextMenu.tsx b/frontend/lib/registry/components/pivot-grid/components/ContextMenu.tsx
new file mode 100644
index 00000000..1dac623b
--- /dev/null
+++ b/frontend/lib/registry/components/pivot-grid/components/ContextMenu.tsx
@@ -0,0 +1,213 @@
+"use client";
+
+/**
+ * PivotGrid 컨텍스트 메뉴 컴포넌트
+ * 우클릭 시 정렬, 필터, 확장/축소 등의 옵션 제공
+ */
+
+import React from "react";
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuSeparator,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuTrigger,
+} from "@/components/ui/context-menu";
+import {
+  ArrowUpAZ,
+  ArrowDownAZ,
+  Filter,
+  ChevronDown,
+  ChevronRight,
+  Copy,
+  Eye,
+  EyeOff,
+  BarChart3,
+} from "lucide-react";
+import { PivotFieldConfig, AggregationType } from "../types";
+
+interface PivotContextMenuProps {
+  children: React.ReactNode;
+  // 현재 컨텍스트 정보
+  cellType: "header" | "data" | "rowHeader" | "columnHeader";
+  field?: PivotFieldConfig;
+  rowPath?: string[];
+  columnPath?: string[];
+  value?: any;
+  // 콜백
+  onSort?: (field: string, direction: "asc" | "desc") => void;
+  onFilter?: (field: string) => void;
+  onExpand?: (path: string[]) => void;
+  onCollapse?: (path: string[]) => void;
+  onExpandAll?: () => void;
+  onCollapseAll?: () => void;
+  onCopy?: (value: any) => void;
+  onHideField?: (field: string) => void;
+  onChangeSummary?: (field: string, summaryType: AggregationType) => void;
+  onDrillDown?: (rowPath: string[], columnPath: string[]) => void;
+}
+
+export const PivotContextMenu: React.FC<PivotContextMenuProps> = ({
+  children,
+  cellType,
+  field,
+  rowPath,
+  columnPath,
+  value,
+  onSort,
+  onFilter,
+  onExpand,
+  onCollapse,
+  onExpandAll,
+  onCollapseAll,
+  onCopy,
+  onHideField,
+  onChangeSummary,
+  onDrillDown,
+}) => {
+  const handleCopy = () => {
+    if (value !== undefined && value !== null) {
+      navigator.clipboard.writeText(String(value));
+      onCopy?.(value);
+    }
+  };
+
+  return (
+    <ContextMenu>
+      <ContextMenuTrigger asChild>{children}</ContextMenuTrigger>
+      <ContextMenuContent className="w-48">
+        {/* 정렬 옵션 (헤더에서만) */}
+        {(cellType === "rowHeader" || cellType === "columnHeader") && field && (
+          <>
+            <ContextMenuSub>
+              <ContextMenuSubTrigger>
+                <ArrowUpAZ className="mr-2 h-4 w-4" />
+                정렬
+              </ContextMenuSubTrigger>
+              <ContextMenuSubContent>
+                <ContextMenuItem onClick={() => onSort?.(field.field, "asc")}>
+                  <ArrowUpAZ className="mr-2 h-4 w-4" />
+                  오름차순
+                </ContextMenuItem>
+                <ContextMenuItem onClick={() => onSort?.(field.field, "desc")}>
+                  <ArrowDownAZ className="mr-2 h-4 w-4" />
+                  내림차순
+                </ContextMenuItem>
+              </ContextMenuSubContent>
+            </ContextMenuSub>
+            <ContextMenuSeparator />
+          </>
+        )}
+
+        {/* 확장/축소 옵션 */}
+        {(cellType === "rowHeader" || cellType === "columnHeader") && (
+          <>
+            {rowPath && rowPath.length > 0 && (
+              <>
+                <ContextMenuItem onClick={() => onExpand?.(rowPath)}>
+                  <ChevronDown className="mr-2 h-4 w-4" />
+                  확장
+                </ContextMenuItem>
+                <ContextMenuItem onClick={() => onCollapse?.(rowPath)}>
+                  <ChevronRight className="mr-2 h-4 w-4" />
+                  축소
+                </ContextMenuItem>
+              </>
+            )}
+            <ContextMenuItem onClick={onExpandAll}>
+              <ChevronDown className="mr-2 h-4 w-4" />
+              전체 확장
+            </ContextMenuItem>
+            <ContextMenuItem onClick={onCollapseAll}>
+              <ChevronRight className="mr-2 h-4 w-4" />
+              전체 축소
+            </ContextMenuItem>
+            <ContextMenuSeparator />
+          </>
+        )}
+
+        {/* 필터 옵션 */}
+        {field && onFilter && (
+          <>
+            <ContextMenuItem onClick={() => onFilter(field.field)}>
+              <Filter className="mr-2 h-4 w-4" />
+              필터
+            </ContextMenuItem>
+            <ContextMenuSeparator />
+          </>
+        )}
+
+        {/* 집계 함수 변경 (데이터 필드에서만) */}
+        {cellType === "data" && field && onChangeSummary && (
+          <>
+            <ContextMenuSub>
+              <ContextMenuSubTrigger>
+                <BarChart3 className="mr-2 h-4 w-4" />
+                집계 함수
+              </ContextMenuSubTrigger>
+              <ContextMenuSubContent>
+                <ContextMenuItem
+                  onClick={() => onChangeSummary(field.field, "sum")}
+                >
+                  합계
+                </ContextMenuItem>
+                <ContextMenuItem
+                  onClick={() => onChangeSummary(field.field, "count")}
+                >
+                  개수
+                </ContextMenuItem>
+                <ContextMenuItem
+                  onClick={() => onChangeSummary(field.field, "avg")}
+                >
+                  평균
+                </ContextMenuItem>
+                <ContextMenuItem
+                  onClick={() => onChangeSummary(field.field, "min")}
+                >
+                  최소
+                </ContextMenuItem>
+                <ContextMenuItem
+                  onClick={() => onChangeSummary(field.field, "max")}
+                >
+                  최대
+                </ContextMenuItem>
+              </ContextMenuSubContent>
+            </ContextMenuSub>
+            <ContextMenuSeparator />
+          </>
+        )}
+
+        {/* 드릴다운 (데이터 셀에서만) */}
+        {cellType === "data" && rowPath && columnPath && onDrillDown && (
+          <>
+            <ContextMenuItem onClick={() => onDrillDown(rowPath, columnPath)}>
+              <Eye className="mr-2 h-4 w-4" />
+              상세 데이터 보기
+            </ContextMenuItem>
+            <ContextMenuSeparator />
+          </>
+        )}
+
+        {/* 필드 숨기기 */}
+        {field && onHideField && (
+          <ContextMenuItem onClick={() => onHideField(field.field)}>
+            <EyeOff className="mr-2 h-4 w-4" />
+            필드 숨기기
+          </ContextMenuItem>
+        )}
+
+        {/* 복사 */}
+        <ContextMenuItem onClick={handleCopy}>
+          <Copy className="mr-2 h-4 w-4" />
+          복사
+        </ContextMenuItem>
+      </ContextMenuContent>
+    </ContextMenu>
+  );
+};
+
+export default PivotContextMenu;
+
diff --git a/frontend/lib/registry/components/pivot-grid/components/DrillDownModal.tsx b/frontend/lib/registry/components/pivot-grid/components/DrillDownModal.tsx
new file mode 100644
index 00000000..994d782f
--- /dev/null
+++ b/frontend/lib/registry/components/pivot-grid/components/DrillDownModal.tsx
@@ -0,0 +1,429 @@
+"use client";
+
+/**
+ * DrillDownModal 컴포넌트
+ * 피벗 셀 클릭 시 해당 셀의 상세 원본 데이터를 표시하는 모달
+ */
+
+import React, { useState, useMemo } from "react";
+import { cn } from "@/lib/utils";
+import { PivotCellData, PivotFieldConfig } from "../types";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  Search,
+  Download,
+  ChevronLeft,
+  ChevronRight,
+  ChevronsLeft,
+  ChevronsRight,
+  ArrowUpDown,
+  ArrowUp,
+  ArrowDown,
+} from "lucide-react";
+
+// ==================== 타입 ====================
+
+interface DrillDownModalProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  cellData: PivotCellData | null;
+  data: any[]; // 전체 원본 데이터
+  fields: PivotFieldConfig[];
+  rowFields: PivotFieldConfig[];
+  columnFields: PivotFieldConfig[];
+}
+
+interface SortConfig {
+  field: string;
+  direction: "asc" | "desc";
+}
+
+// ==================== 메인 컴포넌트 ====================
+
+export const DrillDownModal: React.FC<DrillDownModalProps> = ({
+  open,
+  onOpenChange,
+  cellData,
+  data,
+  fields,
+  rowFields,
+  columnFields,
+}) => {
+  const [searchQuery, setSearchQuery] = useState("");
+  const [currentPage, setCurrentPage] = useState(1);
+  const [pageSize, setPageSize] = useState(20);
+  const [sortConfig, setSortConfig] = useState<SortConfig | null>(null);
+
+  // 드릴다운 데이터 필터링
+  const filteredData = useMemo(() => {
+    if (!cellData || !data) return [];
+
+    // 행/열 경로에 해당하는 데이터 필터링
+    let result = data.filter((row) => {
+      // 행 경로 매칭
+      for (let i = 0; i < cellData.rowPath.length; i++) {
+        const field = rowFields[i];
+        if (field && String(row[field.field]) !== cellData.rowPath[i]) {
+          return false;
+        }
+      }
+
+      // 열 경로 매칭
+      for (let i = 0; i < cellData.columnPath.length; i++) {
+        const field = columnFields[i];
+        if (field && String(row[field.field]) !== cellData.columnPath[i]) {
+          return false;
+        }
+      }
+
+      return true;
+    });
+
+    // 검색 필터
+    if (searchQuery) {
+      const query = searchQuery.toLowerCase();
+      result = result.filter((row) =>
+        Object.values(row).some((val) =>
+          String(val).toLowerCase().includes(query)
+        )
+      );
+    }
+
+    // 정렬
+    if (sortConfig) {
+      result = [...result].sort((a, b) => {
+        const aVal = a[sortConfig.field];
+        const bVal = b[sortConfig.field];
+
+        if (aVal === null || aVal === undefined) return 1;
+        if (bVal === null || bVal === undefined) return -1;
+
+        let comparison = 0;
+        if (typeof aVal === "number" && typeof bVal === "number") {
+          comparison = aVal - bVal;
+        } else {
+          comparison = String(aVal).localeCompare(String(bVal));
+        }
+
+        return sortConfig.direction === "asc" ? comparison : -comparison;
+      });
+    }
+
+    return result;
+  }, [cellData, data, rowFields, columnFields, searchQuery, sortConfig]);
+
+  // 페이지네이션
+  const totalPages = Math.ceil(filteredData.length / pageSize);
+  const paginatedData = useMemo(() => {
+    const start = (currentPage - 1) * pageSize;
+    return filteredData.slice(start, start + pageSize);
+  }, [filteredData, currentPage, pageSize]);
+
+  // 표시할 컬럼 결정
+  const displayColumns = useMemo(() => {
+    // 모든 필드의 field명 수집
+    const fieldNames = new Set<string>();
+    
+    // fields에서 가져오기
+    fields.forEach((f) => fieldNames.add(f.field));
+    
+    // 데이터에서 추가 컬럼 가져오기
+    if (data.length > 0) {
+      Object.keys(data[0]).forEach((key) => fieldNames.add(key));
+    }
+
+    return Array.from(fieldNames).map((fieldName) => {
+      const fieldConfig = fields.find((f) => f.field === fieldName);
+      return {
+        field: fieldName,
+        caption: fieldConfig?.caption || fieldName,
+        dataType: fieldConfig?.dataType || "string",
+      };
+    });
+  }, [fields, data]);
+
+  // 정렬 토글
+  const handleSort = (field: string) => {
+    setSortConfig((prev) => {
+      if (!prev || prev.field !== field) {
+        return { field, direction: "asc" };
+      }
+      if (prev.direction === "asc") {
+        return { field, direction: "desc" };
+      }
+      return null;
+    });
+  };
+
+  // CSV 내보내기
+  const handleExportCSV = () => {
+    if (filteredData.length === 0) return;
+
+    const headers = displayColumns.map((c) => c.caption);
+    const rows = filteredData.map((row) =>
+      displayColumns.map((c) => {
+        const val = row[c.field];
+        if (val === null || val === undefined) return "";
+        if (typeof val === "string" && val.includes(",")) {
+          return `"${val}"`;
+        }
+        return String(val);
+      })
+    );
+
+    const csv = [headers.join(","), ...rows.map((r) => r.join(","))].join("\n");
+
+    const blob = new Blob(["\uFEFF" + csv], {
+      type: "text/csv;charset=utf-8;",
+    });
+    const link = document.createElement("a");
+    link.href = URL.createObjectURL(blob);
+    link.download = `drilldown_${cellData?.rowPath.join("_") || "data"}.csv`;
+    link.click();
+  };
+
+  // 페이지 변경
+  const goToPage = (page: number) => {
+    setCurrentPage(Math.max(1, Math.min(page, totalPages)));
+  };
+
+  // 경로 표시
+  const pathDisplay = cellData
+    ? [
+        ...(cellData.rowPath.length > 0
+          ? [`행: ${cellData.rowPath.join(" > ")}`]
+          : []),
+        ...(cellData.columnPath.length > 0
+          ? [`열: ${cellData.columnPath.join(" > ")}`]
+          : []),
+      ].join(" | ")
+    : "";
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-5xl max-h-[85vh] flex flex-col">
+        <DialogHeader>
+          <DialogTitle>상세 데이터</DialogTitle>
+          <DialogDescription>
+            {pathDisplay || "선택한 셀의 원본 데이터"}
+            <span className="ml-2 text-primary font-medium">
+              ({filteredData.length}건)
+            </span>
+          </DialogDescription>
+        </DialogHeader>
+
+        {/* 툴바 */}
+        <div className="flex items-center gap-2 py-2 border-b border-border">
+          <div className="relative flex-1">
+            <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+            <Input
+              placeholder="검색..."
+              value={searchQuery}
+              onChange={(e) => {
+                setSearchQuery(e.target.value);
+                setCurrentPage(1);
+              }}
+              className="pl-9 h-9"
+            />
+          </div>
+
+          <Select
+            value={String(pageSize)}
+            onValueChange={(v) => {
+              setPageSize(Number(v));
+              setCurrentPage(1);
+            }}
+          >
+            <SelectTrigger className="w-28 h-9">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="10">10개씩</SelectItem>
+              <SelectItem value="20">20개씩</SelectItem>
+              <SelectItem value="50">50개씩</SelectItem>
+              <SelectItem value="100">100개씩</SelectItem>
+            </SelectContent>
+          </Select>
+
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={handleExportCSV}
+            disabled={filteredData.length === 0}
+            className="h-9"
+          >
+            <Download className="h-4 w-4 mr-1" />
+            CSV
+          </Button>
+        </div>
+
+        {/* 테이블 */}
+        <ScrollArea className="flex-1 -mx-6">
+          <div className="px-6">
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  {displayColumns.map((col) => (
+                    <TableHead
+                      key={col.field}
+                      className="whitespace-nowrap cursor-pointer hover:bg-muted/50"
+                      onClick={() => handleSort(col.field)}
+                    >
+                      <div className="flex items-center gap-1">
+                        <span>{col.caption}</span>
+                        {sortConfig?.field === col.field ? (
+                          sortConfig.direction === "asc" ? (
+                            <ArrowUp className="h-3 w-3" />
+                          ) : (
+                            <ArrowDown className="h-3 w-3" />
+                          )
+                        ) : (
+                          <ArrowUpDown className="h-3 w-3 opacity-30" />
+                        )}
+                      </div>
+                    </TableHead>
+                  ))}
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {paginatedData.length === 0 ? (
+                  <TableRow>
+                    <TableCell
+                      colSpan={displayColumns.length}
+                      className="text-center py-8 text-muted-foreground"
+                    >
+                      데이터가 없습니다.
+                    </TableCell>
+                  </TableRow>
+                ) : (
+                  paginatedData.map((row, idx) => (
+                    <TableRow key={idx}>
+                      {displayColumns.map((col) => (
+                        <TableCell
+                          key={col.field}
+                          className={cn(
+                            "whitespace-nowrap",
+                            col.dataType === "number" && "text-right tabular-nums"
+                          )}
+                        >
+                          {formatCellValue(row[col.field], col.dataType)}
+                        </TableCell>
+                      ))}
+                    </TableRow>
+                  ))
+                )}
+              </TableBody>
+            </Table>
+          </div>
+        </ScrollArea>
+
+        {/* 페이지네이션 */}
+        {totalPages > 1 && (
+          <div className="flex items-center justify-between pt-4 border-t border-border">
+            <div className="text-sm text-muted-foreground">
+              {(currentPage - 1) * pageSize + 1} -{" "}
+              {Math.min(currentPage * pageSize, filteredData.length)} /{" "}
+              {filteredData.length}건
+            </div>
+
+            <div className="flex items-center gap-1">
+              <Button
+                variant="outline"
+                size="icon"
+                className="h-8 w-8"
+                onClick={() => goToPage(1)}
+                disabled={currentPage === 1}
+              >
+                <ChevronsLeft className="h-4 w-4" />
+              </Button>
+              <Button
+                variant="outline"
+                size="icon"
+                className="h-8 w-8"
+                onClick={() => goToPage(currentPage - 1)}
+                disabled={currentPage === 1}
+              >
+                <ChevronLeft className="h-4 w-4" />
+              </Button>
+
+              <span className="px-3 text-sm">
+                {currentPage} / {totalPages}
+              </span>
+
+              <Button
+                variant="outline"
+                size="icon"
+                className="h-8 w-8"
+                onClick={() => goToPage(currentPage + 1)}
+                disabled={currentPage === totalPages}
+              >
+                <ChevronRight className="h-4 w-4" />
+              </Button>
+              <Button
+                variant="outline"
+                size="icon"
+                className="h-8 w-8"
+                onClick={() => goToPage(totalPages)}
+                disabled={currentPage === totalPages}
+              >
+                <ChevronsRight className="h-4 w-4" />
+              </Button>
+            </div>
+          </div>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+// ==================== 유틸리티 ====================
+
+function formatCellValue(value: any, dataType: string): string {
+  if (value === null || value === undefined) return "-";
+
+  if (dataType === "number") {
+    const num = Number(value);
+    if (isNaN(num)) return String(value);
+    return num.toLocaleString();
+  }
+
+  if (dataType === "date") {
+    try {
+      const date = new Date(value);
+      if (!isNaN(date.getTime())) {
+        return date.toLocaleDateString("ko-KR");
+      }
+    } catch {
+      // 변환 실패 시 원본 반환
+    }
+  }
+
+  return String(value);
+}
+
+export default DrillDownModal;
+
diff --git a/frontend/lib/registry/components/pivot-grid/components/FieldChooser.tsx b/frontend/lib/registry/components/pivot-grid/components/FieldChooser.tsx
new file mode 100644
index 00000000..de4a8948
--- /dev/null
+++ b/frontend/lib/registry/components/pivot-grid/components/FieldChooser.tsx
@@ -0,0 +1,450 @@
+"use client";
+
+/**
+ * FieldChooser 컴포넌트
+ * 사용 가능한 필드 목록을 표시하고 영역에 배치할 수 있는 모달
+ */
+
+import React, { useState, useMemo } from "react";
+import { cn } from "@/lib/utils";
+import { PivotFieldConfig, PivotAreaType, AggregationType, SummaryDisplayMode } from "../types";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Checkbox } from "@/components/ui/checkbox";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import {
+  Search,
+  Filter,
+  Columns,
+  Rows,
+  BarChart3,
+  GripVertical,
+  Plus,
+  Minus,
+  Type,
+  Hash,
+  Calendar,
+  ToggleLeft,
+} from "lucide-react";
+
+// ==================== 타입 ====================
+
+interface AvailableField {
+  field: string;
+  caption: string;
+  dataType: "string" | "number" | "date" | "boolean";
+  isSelected: boolean;
+  currentArea?: PivotAreaType;
+}
+
+interface FieldChooserProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  availableFields: AvailableField[];
+  selectedFields: PivotFieldConfig[];
+  onFieldsChange: (fields: PivotFieldConfig[]) => void;
+}
+
+// ==================== 영역 설정 ====================
+
+const AREA_OPTIONS: {
+  value: PivotAreaType | "none";
+  label: string;
+  icon: React.ReactNode;
+}[] = [
+  { value: "none", label: "사용 안함", icon: <Minus className="h-3.5 w-3.5" /> },
+  { value: "filter", label: "필터", icon: <Filter className="h-3.5 w-3.5" /> },
+  { value: "row", label: "행", icon: <Rows className="h-3.5 w-3.5" /> },
+  { value: "column", label: "열", icon: <Columns className="h-3.5 w-3.5" /> },
+  { value: "data", label: "데이터", icon: <BarChart3 className="h-3.5 w-3.5" /> },
+];
+
+const SUMMARY_OPTIONS: { value: AggregationType; label: string }[] = [
+  { value: "sum", label: "합계" },
+  { value: "count", label: "개수" },
+  { value: "avg", label: "평균" },
+  { value: "min", label: "최소" },
+  { value: "max", label: "최대" },
+  { value: "countDistinct", label: "고유 개수" },
+];
+
+const DISPLAY_MODE_OPTIONS: { value: SummaryDisplayMode; label: string }[] = [
+  { value: "absoluteValue", label: "절대값" },
+  { value: "percentOfRowTotal", label: "행 총계 %" },
+  { value: "percentOfColumnTotal", label: "열 총계 %" },
+  { value: "percentOfGrandTotal", label: "전체 총계 %" },
+  { value: "runningTotalByRow", label: "행 누계" },
+  { value: "runningTotalByColumn", label: "열 누계" },
+  { value: "differenceFromPrevious", label: "이전 대비 차이" },
+  { value: "percentDifferenceFromPrevious", label: "이전 대비 % 차이" },
+];
+
+const DATE_GROUP_OPTIONS: { value: string; label: string }[] = [
+  { value: "none", label: "그룹 없음" },
+  { value: "year", label: "년" },
+  { value: "quarter", label: "분기" },
+  { value: "month", label: "월" },
+  { value: "week", label: "주" },
+  { value: "day", label: "일" },
+];
+
+const DATA_TYPE_ICONS: Record<string, React.ReactNode> = {
+  string: <Type className="h-3.5 w-3.5" />,
+  number: <Hash className="h-3.5 w-3.5" />,
+  date: <Calendar className="h-3.5 w-3.5" />,
+  boolean: <ToggleLeft className="h-3.5 w-3.5" />,
+};
+
+// ==================== 필드 아이템 ====================
+
+interface FieldItemProps {
+  field: AvailableField;
+  config?: PivotFieldConfig;
+  onAreaChange: (area: PivotAreaType | "none") => void;
+  onSummaryChange?: (summary: AggregationType) => void;
+  onDisplayModeChange?: (displayMode: SummaryDisplayMode) => void;
+}
+
+const FieldItem: React.FC<FieldItemProps> = ({
+  field,
+  config,
+  onAreaChange,
+  onSummaryChange,
+  onDisplayModeChange,
+}) => {
+  const currentArea = config?.area || "none";
+  const isSelected = currentArea !== "none";
+
+  return (
+    <div
+      className={cn(
+        "flex items-center gap-3 p-2 rounded-md border",
+        "transition-colors",
+        isSelected
+          ? "bg-primary/5 border-primary/30"
+          : "bg-background border-border hover:bg-muted/50"
+      )}
+    >
+      {/* 데이터 타입 아이콘 */}
+      <div className="text-muted-foreground">
+        {DATA_TYPE_ICONS[field.dataType] || <Type className="h-3.5 w-3.5" />}
+      </div>
+
+      {/* 필드명 */}
+      <div className="flex-1 min-w-0">
+        <div className="text-sm font-medium truncate">{field.caption}</div>
+        <div className="text-xs text-muted-foreground truncate">
+          {field.field}
+        </div>
+      </div>
+
+      {/* 영역 선택 */}
+      <Select
+        value={currentArea}
+        onValueChange={(value) => onAreaChange(value as PivotAreaType | "none")}
+      >
+        <SelectTrigger className="w-28 h-8 text-xs">
+          <SelectValue />
+        </SelectTrigger>
+        <SelectContent>
+          {AREA_OPTIONS.map((option) => (
+            <SelectItem key={option.value} value={option.value}>
+              <div className="flex items-center gap-2">
+                {option.icon}
+                <span>{option.label}</span>
+              </div>
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+
+      {/* 집계 함수 선택 (데이터 영역인 경우) */}
+      {currentArea === "data" && onSummaryChange && (
+        <Select
+          value={config?.summaryType || "sum"}
+          onValueChange={(value) => onSummaryChange(value as AggregationType)}
+        >
+          <SelectTrigger className="w-24 h-8 text-xs">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            {SUMMARY_OPTIONS.map((option) => (
+              <SelectItem key={option.value} value={option.value}>
+                {option.label}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      )}
+
+      {/* 표시 모드 선택 (데이터 영역인 경우) */}
+      {currentArea === "data" && onDisplayModeChange && (
+        <Select
+          value={config?.summaryDisplayMode || "absoluteValue"}
+          onValueChange={(value) => onDisplayModeChange(value as SummaryDisplayMode)}
+        >
+          <SelectTrigger className="w-28 h-8 text-xs">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            {DISPLAY_MODE_OPTIONS.map((option) => (
+              <SelectItem key={option.value} value={option.value}>
+                {option.label}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      )}
+    </div>
+  );
+};
+
+// ==================== 메인 컴포넌트 ====================
+
+export const FieldChooser: React.FC<FieldChooserProps> = ({
+  open,
+  onOpenChange,
+  availableFields,
+  selectedFields,
+  onFieldsChange,
+}) => {
+  const [searchQuery, setSearchQuery] = useState("");
+  const [filterType, setFilterType] = useState<"all" | "selected" | "unselected">(
+    "all"
+  );
+
+  // 필터링된 필드 목록
+  const filteredFields = useMemo(() => {
+    let result = availableFields;
+
+    // 검색어 필터
+    if (searchQuery) {
+      const query = searchQuery.toLowerCase();
+      result = result.filter(
+        (f) =>
+          f.caption.toLowerCase().includes(query) ||
+          f.field.toLowerCase().includes(query)
+      );
+    }
+
+    // 선택 상태 필터
+    if (filterType === "selected") {
+      result = result.filter((f) =>
+        selectedFields.some((sf) => sf.field === f.field && sf.visible !== false)
+      );
+    } else if (filterType === "unselected") {
+      result = result.filter(
+        (f) =>
+          !selectedFields.some(
+            (sf) => sf.field === f.field && sf.visible !== false
+          )
+      );
+    }
+
+    return result;
+  }, [availableFields, selectedFields, searchQuery, filterType]);
+
+  // 필드 영역 변경
+  const handleAreaChange = (
+    field: AvailableField,
+    area: PivotAreaType | "none"
+  ) => {
+    const existingConfig = selectedFields.find((f) => f.field === field.field);
+
+    if (area === "none") {
+      // 필드 제거 또는 숨기기
+      if (existingConfig) {
+        const newFields = selectedFields.map((f) =>
+          f.field === field.field ? { ...f, visible: false } : f
+        );
+        onFieldsChange(newFields);
+      }
+    } else {
+      // 필드 추가 또는 영역 변경
+      if (existingConfig) {
+        const newFields = selectedFields.map((f) =>
+          f.field === field.field
+            ? { ...f, area, visible: true }
+            : f
+        );
+        onFieldsChange(newFields);
+      } else {
+        // 새 필드 추가
+        const newField: PivotFieldConfig = {
+          field: field.field,
+          caption: field.caption,
+          area,
+          dataType: field.dataType,
+          visible: true,
+          summaryType: area === "data" ? "sum" : undefined,
+          areaIndex: selectedFields.filter((f) => f.area === area).length,
+        };
+        onFieldsChange([...selectedFields, newField]);
+      }
+    }
+  };
+
+  // 집계 함수 변경
+  const handleSummaryChange = (
+    field: AvailableField,
+    summaryType: AggregationType
+  ) => {
+    const newFields = selectedFields.map((f) =>
+      f.field === field.field ? { ...f, summaryType } : f
+    );
+    onFieldsChange(newFields);
+  };
+
+  // 표시 모드 변경
+  const handleDisplayModeChange = (
+    field: AvailableField,
+    displayMode: SummaryDisplayMode
+  ) => {
+    const newFields = selectedFields.map((f) =>
+      f.field === field.field ? { ...f, summaryDisplayMode: displayMode } : f
+    );
+    onFieldsChange(newFields);
+  };
+
+  // 모든 필드 선택 해제
+  const handleClearAll = () => {
+    const newFields = selectedFields.map((f) => ({ ...f, visible: false }));
+    onFieldsChange(newFields);
+  };
+
+  // 통계
+  const stats = useMemo(() => {
+    const visible = selectedFields.filter((f) => f.visible !== false);
+    return {
+      total: availableFields.length,
+      selected: visible.length,
+      filter: visible.filter((f) => f.area === "filter").length,
+      row: visible.filter((f) => f.area === "row").length,
+      column: visible.filter((f) => f.area === "column").length,
+      data: visible.filter((f) => f.area === "data").length,
+    };
+  }, [availableFields, selectedFields]);
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-2xl max-h-[80vh] flex flex-col">
+        <DialogHeader>
+          <DialogTitle>필드 선택기</DialogTitle>
+          <DialogDescription>
+            피벗 테이블에 표시할 필드를 선택하고 영역을 지정하세요.
+          </DialogDescription>
+        </DialogHeader>
+
+        {/* 통계 */}
+        <div className="flex items-center gap-4 py-2 px-1 text-xs text-muted-foreground border-b border-border">
+          <span>전체: {stats.total}</span>
+          <span className="text-primary font-medium">
+            선택됨: {stats.selected}
+          </span>
+          <span>필터: {stats.filter}</span>
+          <span>행: {stats.row}</span>
+          <span>열: {stats.column}</span>
+          <span>데이터: {stats.data}</span>
+        </div>
+
+        {/* 검색 및 필터 */}
+        <div className="flex items-center gap-2 py-2">
+          <div className="relative flex-1">
+            <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+            <Input
+              placeholder="필드 검색..."
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              className="pl-9 h-9"
+            />
+          </div>
+
+          <Select
+            value={filterType}
+            onValueChange={(v) =>
+              setFilterType(v as "all" | "selected" | "unselected")
+            }
+          >
+            <SelectTrigger className="w-32 h-9">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">전체</SelectItem>
+              <SelectItem value="selected">선택됨</SelectItem>
+              <SelectItem value="unselected">미선택</SelectItem>
+            </SelectContent>
+          </Select>
+
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={handleClearAll}
+            className="h-9"
+          >
+            초기화
+          </Button>
+        </div>
+
+        {/* 필드 목록 */}
+        <ScrollArea className="flex-1 -mx-6 px-6">
+          <div className="space-y-2 py-2">
+            {filteredFields.length === 0 ? (
+              <div className="text-center py-8 text-muted-foreground">
+                검색 결과가 없습니다.
+              </div>
+            ) : (
+              filteredFields.map((field) => {
+                const config = selectedFields.find(
+                  (f) => f.field === field.field && f.visible !== false
+                );
+                return (
+                  <FieldItem
+                    key={field.field}
+                    field={field}
+                    config={config}
+                    onAreaChange={(area) => handleAreaChange(field, area)}
+                    onSummaryChange={
+                      config?.area === "data"
+                        ? (summary) => handleSummaryChange(field, summary)
+                        : undefined
+                    }
+                    onDisplayModeChange={
+                      config?.area === "data"
+                        ? (mode) => handleDisplayModeChange(field, mode)
+                        : undefined
+                    }
+                  />
+                );
+              })
+            )}
+          </div>
+        </ScrollArea>
+
+        {/* 푸터 */}
+        <div className="flex justify-end gap-2 pt-4 border-t border-border">
+          <Button variant="outline" onClick={() => onOpenChange(false)}>
+            닫기
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default FieldChooser;
+
diff --git a/frontend/lib/registry/components/pivot-grid/components/FieldPanel.tsx b/frontend/lib/registry/components/pivot-grid/components/FieldPanel.tsx
new file mode 100644
index 00000000..fed43afb
--- /dev/null
+++ b/frontend/lib/registry/components/pivot-grid/components/FieldPanel.tsx
@@ -0,0 +1,577 @@
+"use client";
+
+/**
+ * FieldPanel 컴포넌트
+ * 피벗 그리드 상단의 필드 배치 영역 (열, 행, 데이터)
+ * 드래그 앤 드롭으로 필드 재배치 가능
+ */
+
+import React, { useState } from "react";
+import {
+  DndContext,
+  DragOverlay,
+  closestCenter,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors,
+  DragStartEvent,
+  DragEndEvent,
+  DragOverEvent,
+} from "@dnd-kit/core";
+import {
+  SortableContext,
+  sortableKeyboardCoordinates,
+  horizontalListSortingStrategy,
+  useSortable,
+} from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { cn } from "@/lib/utils";
+import { PivotFieldConfig, PivotAreaType } from "../types";
+import {
+  X,
+  Filter,
+  Columns,
+  Rows,
+  BarChart3,
+  GripVertical,
+  ChevronDown,
+} from "lucide-react";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+
+// ==================== 타입 ====================
+
+interface FieldPanelProps {
+  fields: PivotFieldConfig[];
+  onFieldsChange: (fields: PivotFieldConfig[]) => void;
+  onFieldRemove?: (field: PivotFieldConfig) => void;
+  onFieldSettingsChange?: (field: PivotFieldConfig) => void;
+  collapsed?: boolean;
+  onToggleCollapse?: () => void;
+}
+
+interface FieldChipProps {
+  field: PivotFieldConfig;
+  onRemove: () => void;
+  onSettingsChange?: (field: PivotFieldConfig) => void;
+}
+
+interface DroppableAreaProps {
+  area: PivotAreaType;
+  fields: PivotFieldConfig[];
+  title: string;
+  icon: React.ReactNode;
+  onFieldRemove: (field: PivotFieldConfig) => void;
+  onFieldSettingsChange?: (field: PivotFieldConfig) => void;
+  isOver?: boolean;
+}
+
+// ==================== 영역 설정 ====================
+
+const AREA_CONFIG: Record<
+  PivotAreaType,
+  { title: string; icon: React.ReactNode; color: string }
+> = {
+  filter: {
+    title: "필터",
+    icon: <Filter className="h-3.5 w-3.5" />,
+    color: "bg-orange-50 border-orange-200 dark:bg-orange-950/20 dark:border-orange-800",
+  },
+  column: {
+    title: "열",
+    icon: <Columns className="h-3.5 w-3.5" />,
+    color: "bg-blue-50 border-blue-200 dark:bg-blue-950/20 dark:border-blue-800",
+  },
+  row: {
+    title: "행",
+    icon: <Rows className="h-3.5 w-3.5" />,
+    color: "bg-green-50 border-green-200 dark:bg-green-950/20 dark:border-green-800",
+  },
+  data: {
+    title: "데이터",
+    icon: <BarChart3 className="h-3.5 w-3.5" />,
+    color: "bg-purple-50 border-purple-200 dark:bg-purple-950/20 dark:border-purple-800",
+  },
+};
+
+// ==================== 필드 칩 (드래그 가능) ====================
+
+const SortableFieldChip: React.FC<FieldChipProps> = ({
+  field,
+  onRemove,
+  onSettingsChange,
+}) => {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({ id: `${field.area}-${field.field}` });
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+  };
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={style}
+      className={cn(
+        "inline-flex items-center gap-1 px-2 py-1 rounded-md text-xs",
+        "bg-background border border-border shadow-sm",
+        "hover:bg-accent/50 transition-colors",
+        isDragging && "opacity-50 shadow-lg"
+      )}
+    >
+      {/* 드래그 핸들 */}
+      <button
+        {...attributes}
+        {...listeners}
+        className="cursor-grab active:cursor-grabbing text-muted-foreground hover:text-foreground"
+      >
+        <GripVertical className="h-3 w-3" />
+      </button>
+
+      {/* 필드 라벨 */}
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <button className="flex items-center gap-1 hover:text-primary">
+            <span className="font-medium">{field.caption}</span>
+            {field.area === "data" && field.summaryType && (
+              <span className="text-muted-foreground">
+                ({getSummaryLabel(field.summaryType)})
+              </span>
+            )}
+            <ChevronDown className="h-3 w-3 text-muted-foreground" />
+          </button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="start" className="w-48">
+          {field.area === "data" && (
+            <>
+              <DropdownMenuItem
+                onClick={() =>
+                  onSettingsChange?.({ ...field, summaryType: "sum" })
+                }
+              >
+                합계
+              </DropdownMenuItem>
+              <DropdownMenuItem
+                onClick={() =>
+                  onSettingsChange?.({ ...field, summaryType: "count" })
+                }
+              >
+                개수
+              </DropdownMenuItem>
+              <DropdownMenuItem
+                onClick={() =>
+                  onSettingsChange?.({ ...field, summaryType: "avg" })
+                }
+              >
+                평균
+              </DropdownMenuItem>
+              <DropdownMenuItem
+                onClick={() =>
+                  onSettingsChange?.({ ...field, summaryType: "min" })
+                }
+              >
+                최소
+              </DropdownMenuItem>
+              <DropdownMenuItem
+                onClick={() =>
+                  onSettingsChange?.({ ...field, summaryType: "max" })
+                }
+              >
+                최대
+              </DropdownMenuItem>
+              <DropdownMenuSeparator />
+            </>
+          )}
+          <DropdownMenuItem
+            onClick={() =>
+              onSettingsChange?.({
+                ...field,
+                sortOrder: field.sortOrder === "asc" ? "desc" : "asc",
+              })
+            }
+          >
+            {field.sortOrder === "asc" ? "내림차순 정렬" : "오름차순 정렬"}
+          </DropdownMenuItem>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem
+            onClick={() => onSettingsChange?.({ ...field, visible: false })}
+          >
+            필드 숨기기
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+
+      {/* 삭제 버튼 */}
+      <button
+        onClick={(e) => {
+          e.stopPropagation();
+          onRemove();
+        }}
+        className="text-muted-foreground hover:text-destructive transition-colors"
+      >
+        <X className="h-3 w-3" />
+      </button>
+    </div>
+  );
+};
+
+// ==================== 드롭 영역 ====================
+
+const DroppableArea: React.FC<DroppableAreaProps> = ({
+  area,
+  fields,
+  title,
+  icon,
+  onFieldRemove,
+  onFieldSettingsChange,
+  isOver,
+}) => {
+  const config = AREA_CONFIG[area];
+  const areaFields = fields.filter((f) => f.area === area && f.visible !== false);
+  const fieldIds = areaFields.map((f) => `${area}-${f.field}`);
+
+  return (
+    <div
+      className={cn(
+        "flex-1 min-h-[44px] rounded border border-dashed p-1.5",
+        "transition-colors duration-200",
+        config.color,
+        isOver && "border-primary bg-primary/5"
+      )}
+      data-area={area}
+    >
+      {/* 영역 헤더 */}
+      <div className="flex items-center gap-1 mb-1 text-[11px] font-medium text-muted-foreground">
+        {icon}
+        <span>{title}</span>
+        {areaFields.length > 0 && (
+          <span className="text-[10px] bg-muted px-1 rounded">
+            {areaFields.length}
+          </span>
+        )}
+      </div>
+
+      {/* 필드 목록 */}
+      <SortableContext items={fieldIds} strategy={horizontalListSortingStrategy}>
+        <div className="flex flex-wrap gap-1 min-h-[22px]">
+          {areaFields.length === 0 ? (
+            <span className="text-[10px] text-muted-foreground/50 italic">
+              필드를 여기로 드래그
+            </span>
+          ) : (
+            areaFields.map((field) => (
+              <SortableFieldChip
+                key={`${area}-${field.field}`}
+                field={field}
+                onRemove={() => onFieldRemove(field)}
+                onSettingsChange={onFieldSettingsChange}
+              />
+            ))
+          )}
+        </div>
+      </SortableContext>
+    </div>
+  );
+};
+
+// ==================== 유틸리티 ====================
+
+function getSummaryLabel(type: string): string {
+  const labels: Record<string, string> = {
+    sum: "합계",
+    count: "개수",
+    avg: "평균",
+    min: "최소",
+    max: "최대",
+    countDistinct: "고유",
+  };
+  return labels[type] || type;
+}
+
+// ==================== 메인 컴포넌트 ====================
+
+export const FieldPanel: React.FC<FieldPanelProps> = ({
+  fields,
+  onFieldsChange,
+  onFieldRemove,
+  onFieldSettingsChange,
+  collapsed = false,
+  onToggleCollapse,
+}) => {
+  const [activeId, setActiveId] = useState<string | null>(null);
+  const [overArea, setOverArea] = useState<PivotAreaType | null>(null);
+
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: {
+        distance: 8,
+      },
+    }),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    })
+  );
+
+  // 드래그 시작
+  const handleDragStart = (event: DragStartEvent) => {
+    setActiveId(event.active.id as string);
+  };
+
+  // 드래그 오버
+  const handleDragOver = (event: DragOverEvent) => {
+    const { over } = event;
+    if (!over) {
+      setOverArea(null);
+      return;
+    }
+
+    // 드롭 영역 감지
+    const overId = over.id as string;
+    const targetArea = overId.split("-")[0] as PivotAreaType;
+    if (["filter", "column", "row", "data"].includes(targetArea)) {
+      setOverArea(targetArea);
+    }
+  };
+
+  // 드래그 종료
+  const handleDragEnd = (event: DragEndEvent) => {
+    const { active, over } = event;
+    setActiveId(null);
+    setOverArea(null);
+
+    if (!over) return;
+
+    const activeId = active.id as string;
+    const overId = over.id as string;
+
+    // 필드 정보 파싱
+    const [sourceArea, sourceField] = activeId.split("-") as [
+      PivotAreaType,
+      string
+    ];
+    const [targetArea] = overId.split("-") as [PivotAreaType, string];
+
+    // 같은 영역 내 정렬
+    if (sourceArea === targetArea) {
+      const areaFields = fields.filter((f) => f.area === sourceArea);
+      const sourceIndex = areaFields.findIndex((f) => f.field === sourceField);
+      const targetIndex = areaFields.findIndex(
+        (f) => `${f.area}-${f.field}` === overId
+      );
+
+      if (sourceIndex !== targetIndex && targetIndex >= 0) {
+        // 순서 변경
+        const newFields = [...fields];
+        const fieldToMove = newFields.find(
+          (f) => f.field === sourceField && f.area === sourceArea
+        );
+        if (fieldToMove) {
+          fieldToMove.areaIndex = targetIndex;
+          // 다른 필드들 인덱스 조정
+          newFields
+            .filter((f) => f.area === sourceArea && f.field !== sourceField)
+            .sort((a, b) => (a.areaIndex || 0) - (b.areaIndex || 0))
+            .forEach((f, idx) => {
+              f.areaIndex = idx >= targetIndex ? idx + 1 : idx;
+            });
+        }
+        onFieldsChange(newFields);
+      }
+      return;
+    }
+
+    // 다른 영역으로 이동
+    if (["filter", "column", "row", "data"].includes(targetArea)) {
+      const newFields = fields.map((f) => {
+        if (f.field === sourceField && f.area === sourceArea) {
+          return {
+            ...f,
+            area: targetArea as PivotAreaType,
+            areaIndex: fields.filter((ff) => ff.area === targetArea).length,
+          };
+        }
+        return f;
+      });
+      onFieldsChange(newFields);
+    }
+  };
+
+  // 필드 제거
+  const handleFieldRemove = (field: PivotFieldConfig) => {
+    if (onFieldRemove) {
+      onFieldRemove(field);
+    } else {
+      // 기본 동작: visible을 false로 설정
+      const newFields = fields.map((f) =>
+        f.field === field.field && f.area === field.area
+          ? { ...f, visible: false }
+          : f
+      );
+      onFieldsChange(newFields);
+    }
+  };
+
+  // 필드 설정 변경
+  const handleFieldSettingsChange = (updatedField: PivotFieldConfig) => {
+    if (onFieldSettingsChange) {
+      onFieldSettingsChange(updatedField);
+    }
+    const newFields = fields.map((f) =>
+      f.field === updatedField.field && f.area === updatedField.area
+        ? updatedField
+        : f
+    );
+    onFieldsChange(newFields);
+  };
+
+  // 활성 필드 찾기 (드래그 중인 필드)
+  const activeField = activeId
+    ? fields.find((f) => `${f.area}-${f.field}` === activeId)
+    : null;
+
+  // 각 영역의 필드 수 계산
+  const filterCount = fields.filter((f) => f.area === "filter" && f.visible !== false).length;
+  const columnCount = fields.filter((f) => f.area === "column" && f.visible !== false).length;
+  const rowCount = fields.filter((f) => f.area === "row" && f.visible !== false).length;
+  const dataCount = fields.filter((f) => f.area === "data" && f.visible !== false).length;
+
+  if (collapsed) {
+    return (
+      <div className="border-b border-border px-3 py-1.5 flex items-center justify-between bg-muted/10">
+        <div className="flex items-center gap-3 text-xs text-muted-foreground">
+          {filterCount > 0 && (
+            <span className="flex items-center gap-1">
+              <Filter className="h-3 w-3" />
+              필터 {filterCount}
+            </span>
+          )}
+          <span className="flex items-center gap-1">
+            <Columns className="h-3 w-3" />
+            열 {columnCount}
+          </span>
+          <span className="flex items-center gap-1">
+            <Rows className="h-3 w-3" />
+            행 {rowCount}
+          </span>
+          <span className="flex items-center gap-1">
+            <BarChart3 className="h-3 w-3" />
+            데이터 {dataCount}
+          </span>
+        </div>
+        <Button
+          variant="ghost"
+          size="sm"
+          onClick={onToggleCollapse}
+          className="text-xs h-6 px-2"
+        >
+          필드 설정
+        </Button>
+      </div>
+    );
+  }
+
+  return (
+    <DndContext
+      sensors={sensors}
+      collisionDetection={closestCenter}
+      onDragStart={handleDragStart}
+      onDragOver={handleDragOver}
+      onDragEnd={handleDragEnd}
+    >
+      <div className="border-b border-border bg-muted/20 p-2">
+        {/* 4개 영역 배치: 2x2 그리드 */}
+        <div className="grid grid-cols-2 gap-1.5">
+          {/* 필터 영역 */}
+          <DroppableArea
+            area="filter"
+            fields={fields}
+            title={AREA_CONFIG.filter.title}
+            icon={AREA_CONFIG.filter.icon}
+            onFieldRemove={handleFieldRemove}
+            onFieldSettingsChange={handleFieldSettingsChange}
+            isOver={overArea === "filter"}
+          />
+
+          {/* 열 영역 */}
+          <DroppableArea
+            area="column"
+            fields={fields}
+            title={AREA_CONFIG.column.title}
+            icon={AREA_CONFIG.column.icon}
+            onFieldRemove={handleFieldRemove}
+            onFieldSettingsChange={handleFieldSettingsChange}
+            isOver={overArea === "column"}
+          />
+
+          {/* 행 영역 */}
+          <DroppableArea
+            area="row"
+            fields={fields}
+            title={AREA_CONFIG.row.title}
+            icon={AREA_CONFIG.row.icon}
+            onFieldRemove={handleFieldRemove}
+            onFieldSettingsChange={handleFieldSettingsChange}
+            isOver={overArea === "row"}
+          />
+
+          {/* 데이터 영역 */}
+          <DroppableArea
+            area="data"
+            fields={fields}
+            title={AREA_CONFIG.data.title}
+            icon={AREA_CONFIG.data.icon}
+            onFieldRemove={handleFieldRemove}
+            onFieldSettingsChange={handleFieldSettingsChange}
+            isOver={overArea === "data"}
+          />
+        </div>
+
+        {/* 접기 버튼 */}
+        {onToggleCollapse && (
+          <div className="flex justify-center mt-1.5">
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={onToggleCollapse}
+              className="text-xs h-5 px-2"
+            >
+              필드 패널 접기
+            </Button>
+          </div>
+        )}
+      </div>
+
+      {/* 드래그 오버레이 */}
+      <DragOverlay>
+        {activeField ? (
+          <div
+            className={cn(
+              "inline-flex items-center gap-1 px-2 py-1 rounded-md text-xs",
+              "bg-background border border-primary shadow-lg"
+            )}
+          >
+            <GripVertical className="h-3 w-3 text-muted-foreground" />
+            <span className="font-medium">{activeField.caption}</span>
+          </div>
+        ) : null}
+      </DragOverlay>
+    </DndContext>
+  );
+};
+
+export default FieldPanel;
+
diff --git a/frontend/lib/registry/components/pivot-grid/components/FilterPopup.tsx b/frontend/lib/registry/components/pivot-grid/components/FilterPopup.tsx
new file mode 100644
index 00000000..e3185f5a
--- /dev/null
+++ b/frontend/lib/registry/components/pivot-grid/components/FilterPopup.tsx
@@ -0,0 +1,265 @@
+"use client";
+
+/**
+ * FilterPopup 컴포넌트
+ * 피벗 필드의 값을 필터링하는 팝업
+ */
+
+import React, { useState, useMemo } from "react";
+import { cn } from "@/lib/utils";
+import { PivotFieldConfig } from "../types";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Checkbox } from "@/components/ui/checkbox";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Label } from "@/components/ui/label";
+import {
+  Search,
+  Filter,
+  Check,
+  X,
+  CheckSquare,
+  Square,
+} from "lucide-react";
+
+// ==================== 타입 ====================
+
+interface FilterPopupProps {
+  field: PivotFieldConfig;
+  data: any[];
+  onFilterChange: (field: PivotFieldConfig, values: any[], type: "include" | "exclude") => void;
+  trigger?: React.ReactNode;
+}
+
+// ==================== 메인 컴포넌트 ====================
+
+export const FilterPopup: React.FC<FilterPopupProps> = ({
+  field,
+  data,
+  onFilterChange,
+  trigger,
+}) => {
+  const [open, setOpen] = useState(false);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [selectedValues, setSelectedValues] = useState<Set<any>>(
+    new Set(field.filterValues || [])
+  );
+  const [filterType, setFilterType] = useState<"include" | "exclude">(
+    field.filterType || "include"
+  );
+
+  // 고유 값 추출
+  const uniqueValues = useMemo(() => {
+    const values = new Set<any>();
+    data.forEach((row) => {
+      const value = row[field.field];
+      if (value !== null && value !== undefined) {
+        values.add(value);
+      }
+    });
+    return Array.from(values).sort((a, b) => {
+      if (typeof a === "number" && typeof b === "number") return a - b;
+      return String(a).localeCompare(String(b), "ko");
+    });
+  }, [data, field.field]);
+
+  // 필터링된 값 목록
+  const filteredValues = useMemo(() => {
+    if (!searchQuery) return uniqueValues;
+    const query = searchQuery.toLowerCase();
+    return uniqueValues.filter((val) =>
+      String(val).toLowerCase().includes(query)
+    );
+  }, [uniqueValues, searchQuery]);
+
+  // 값 토글
+  const handleValueToggle = (value: any) => {
+    const newSelected = new Set(selectedValues);
+    if (newSelected.has(value)) {
+      newSelected.delete(value);
+    } else {
+      newSelected.add(value);
+    }
+    setSelectedValues(newSelected);
+  };
+
+  // 모두 선택
+  const handleSelectAll = () => {
+    setSelectedValues(new Set(filteredValues));
+  };
+
+  // 모두 해제
+  const handleClearAll = () => {
+    setSelectedValues(new Set());
+  };
+
+  // 적용
+  const handleApply = () => {
+    onFilterChange(field, Array.from(selectedValues), filterType);
+    setOpen(false);
+  };
+
+  // 초기화
+  const handleReset = () => {
+    setSelectedValues(new Set());
+    setFilterType("include");
+    onFilterChange(field, [], "include");
+    setOpen(false);
+  };
+
+  // 필터 활성 상태
+  const isFilterActive = field.filterValues && field.filterValues.length > 0;
+
+  // 선택된 항목 수
+  const selectedCount = selectedValues.size;
+  const totalCount = uniqueValues.length;
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        {trigger || (
+          <button
+            className={cn(
+              "p-1 rounded hover:bg-accent",
+              isFilterActive && "text-primary"
+            )}
+          >
+            <Filter className="h-3.5 w-3.5" />
+          </button>
+        )}
+      </PopoverTrigger>
+      <PopoverContent className="w-72 p-0" align="start">
+        <div className="p-3 border-b border-border">
+          <div className="flex items-center justify-between mb-2">
+            <span className="text-sm font-medium">{field.caption} 필터</span>
+            <div className="flex gap-1">
+              <button
+                onClick={() => setFilterType("include")}
+                className={cn(
+                  "px-2 py-0.5 text-xs rounded",
+                  filterType === "include"
+                    ? "bg-primary text-primary-foreground"
+                    : "bg-muted hover:bg-accent"
+                )}
+              >
+                포함
+              </button>
+              <button
+                onClick={() => setFilterType("exclude")}
+                className={cn(
+                  "px-2 py-0.5 text-xs rounded",
+                  filterType === "exclude"
+                    ? "bg-destructive text-destructive-foreground"
+                    : "bg-muted hover:bg-accent"
+                )}
+              >
+                제외
+              </button>
+            </div>
+          </div>
+
+          {/* 검색 */}
+          <div className="relative">
+            <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground" />
+            <Input
+              placeholder="검색..."
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              className="pl-8 h-8 text-sm"
+            />
+          </div>
+
+          {/* 전체 선택/해제 */}
+          <div className="flex items-center justify-between mt-2 text-xs text-muted-foreground">
+            <span>
+              {selectedCount} / {totalCount} 선택됨
+            </span>
+            <div className="flex gap-2">
+              <button
+                onClick={handleSelectAll}
+                className="flex items-center gap-1 hover:text-foreground"
+              >
+                <CheckSquare className="h-3 w-3" />
+                전체 선택
+              </button>
+              <button
+                onClick={handleClearAll}
+                className="flex items-center gap-1 hover:text-foreground"
+              >
+                <Square className="h-3 w-3" />
+                전체 해제
+              </button>
+            </div>
+          </div>
+        </div>
+
+        {/* 값 목록 */}
+        <ScrollArea className="h-48">
+          <div className="p-2 space-y-1">
+            {filteredValues.length === 0 ? (
+              <div className="text-center py-4 text-sm text-muted-foreground">
+                결과가 없습니다
+              </div>
+            ) : (
+              filteredValues.map((value) => (
+                <label
+                  key={String(value)}
+                  className={cn(
+                    "flex items-center gap-2 px-2 py-1.5 rounded cursor-pointer",
+                    "hover:bg-muted text-sm"
+                  )}
+                >
+                  <Checkbox
+                    checked={selectedValues.has(value)}
+                    onCheckedChange={() => handleValueToggle(value)}
+                  />
+                  <span className="truncate">{String(value)}</span>
+                  <span className="ml-auto text-xs text-muted-foreground">
+                    ({data.filter((r) => r[field.field] === value).length})
+                  </span>
+                </label>
+              ))
+            )}
+          </div>
+        </ScrollArea>
+
+        {/* 버튼 */}
+        <div className="flex items-center justify-between p-2 border-t border-border">
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={handleReset}
+            className="h-7 text-xs"
+          >
+            초기화
+          </Button>
+          <div className="flex gap-2">
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => setOpen(false)}
+              className="h-7 text-xs"
+            >
+              취소
+            </Button>
+            <Button
+              size="sm"
+              onClick={handleApply}
+              className="h-7 text-xs"
+            >
+              적용
+            </Button>
+          </div>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+};
+
+export default FilterPopup;
+
diff --git a/frontend/lib/registry/components/pivot-grid/components/PivotChart.tsx b/frontend/lib/registry/components/pivot-grid/components/PivotChart.tsx
new file mode 100644
index 00000000..6f7c3708
--- /dev/null
+++ b/frontend/lib/registry/components/pivot-grid/components/PivotChart.tsx
@@ -0,0 +1,386 @@
+"use client";
+
+/**
+ * PivotChart 컴포넌트
+ * 피벗 데이터를 차트로 시각화
+ */
+
+import React, { useMemo } from "react";
+import { cn } from "@/lib/utils";
+import { PivotResult, PivotChartConfig, PivotFieldConfig } from "../types";
+import { pathToKey } from "../utils/pivotEngine";
+import {
+  BarChart,
+  Bar,
+  LineChart,
+  Line,
+  AreaChart,
+  Area,
+  PieChart,
+  Pie,
+  Cell,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  Legend,
+  ResponsiveContainer,
+} from "recharts";
+
+// ==================== 타입 ====================
+
+interface PivotChartProps {
+  pivotResult: PivotResult;
+  config: PivotChartConfig;
+  dataFields: PivotFieldConfig[];
+  className?: string;
+}
+
+// ==================== 색상 ====================
+
+const COLORS = [
+  "#4472C4", // 파랑
+  "#ED7D31", // 주황
+  "#A5A5A5", // 회색
+  "#FFC000", // 노랑
+  "#5B9BD5", // 하늘
+  "#70AD47", // 초록
+  "#264478", // 진한 파랑
+  "#9E480E", // 진한 주황
+  "#636363", // 진한 회색
+  "#997300", // 진한 노랑
+];
+
+// ==================== 데이터 변환 ====================
+
+function transformDataForChart(
+  pivotResult: PivotResult,
+  dataFields: PivotFieldConfig[]
+): any[] {
+  const { flatRows, flatColumns, dataMatrix, grandTotals } = pivotResult;
+
+  // 행 기준 차트 데이터 생성
+  return flatRows.map((row) => {
+    const dataPoint: any = {
+      name: row.caption,
+      path: row.path,
+    };
+
+    // 각 열에 대한 데이터 추가
+    flatColumns.forEach((col) => {
+      const cellKey = `${pathToKey(row.path)}|||${pathToKey(col.path)}`;
+      const values = dataMatrix.get(cellKey);
+
+      if (values && values.length > 0) {
+        const columnName = col.caption || "전체";
+        dataPoint[columnName] = values[0].value;
+      }
+    });
+
+    // 총계 추가
+    const rowTotal = grandTotals.row.get(pathToKey(row.path));
+    if (rowTotal && rowTotal.length > 0) {
+      dataPoint["총계"] = rowTotal[0].value;
+    }
+
+    return dataPoint;
+  });
+}
+
+function transformDataForPie(
+  pivotResult: PivotResult,
+  dataFields: PivotFieldConfig[]
+): any[] {
+  const { flatRows, grandTotals } = pivotResult;
+
+  return flatRows.map((row, idx) => {
+    const rowTotal = grandTotals.row.get(pathToKey(row.path));
+    return {
+      name: row.caption,
+      value: rowTotal?.[0]?.value || 0,
+      color: COLORS[idx % COLORS.length],
+    };
+  });
+}
+
+// ==================== 차트 컴포넌트 ====================
+
+const CustomTooltip: React.FC<any> = ({ active, payload, label }) => {
+  if (!active || !payload || !payload.length) return null;
+
+  return (
+    <div className="bg-background border border-border rounded-lg shadow-lg p-2">
+      <p className="text-sm font-medium mb-1">{label}</p>
+      {payload.map((entry: any, idx: number) => (
+        <p key={idx} className="text-xs" style={{ color: entry.color }}>
+          {entry.name}: {entry.value?.toLocaleString()}
+        </p>
+      ))}
+    </div>
+  );
+};
+
+// 막대 차트
+const PivotBarChart: React.FC<{
+  data: any[];
+  columns: string[];
+  height: number;
+  showLegend: boolean;
+  stacked?: boolean;
+}> = ({ data, columns, height, showLegend, stacked }) => {
+  return (
+    <ResponsiveContainer width="100%" height={height}>
+      <BarChart data={data} margin={{ top: 20, right: 30, left: 20, bottom: 5 }}>
+        <CartesianGrid strokeDasharray="3 3" className="opacity-30" />
+        <XAxis
+          dataKey="name"
+          tick={{ fontSize: 11 }}
+          tickLine={false}
+          axisLine={{ stroke: "#e5e5e5" }}
+        />
+        <YAxis
+          tick={{ fontSize: 11 }}
+          tickLine={false}
+          axisLine={{ stroke: "#e5e5e5" }}
+          tickFormatter={(value) => value.toLocaleString()}
+        />
+        <Tooltip content={<CustomTooltip />} />
+        {showLegend && (
+          <Legend
+            wrapperStyle={{ fontSize: 11, paddingTop: 10 }}
+            iconType="square"
+          />
+        )}
+        {columns.map((col, idx) => (
+          <Bar
+            key={col}
+            dataKey={col}
+            fill={COLORS[idx % COLORS.length]}
+            stackId={stacked ? "stack" : undefined}
+            radius={stacked ? 0 : [4, 4, 0, 0]}
+          />
+        ))}
+      </BarChart>
+    </ResponsiveContainer>
+  );
+};
+
+// 선 차트
+const PivotLineChart: React.FC<{
+  data: any[];
+  columns: string[];
+  height: number;
+  showLegend: boolean;
+}> = ({ data, columns, height, showLegend }) => {
+  return (
+    <ResponsiveContainer width="100%" height={height}>
+      <LineChart data={data} margin={{ top: 20, right: 30, left: 20, bottom: 5 }}>
+        <CartesianGrid strokeDasharray="3 3" className="opacity-30" />
+        <XAxis
+          dataKey="name"
+          tick={{ fontSize: 11 }}
+          tickLine={false}
+          axisLine={{ stroke: "#e5e5e5" }}
+        />
+        <YAxis
+          tick={{ fontSize: 11 }}
+          tickLine={false}
+          axisLine={{ stroke: "#e5e5e5" }}
+          tickFormatter={(value) => value.toLocaleString()}
+        />
+        <Tooltip content={<CustomTooltip />} />
+        {showLegend && (
+          <Legend
+            wrapperStyle={{ fontSize: 11, paddingTop: 10 }}
+            iconType="line"
+          />
+        )}
+        {columns.map((col, idx) => (
+          <Line
+            key={col}
+            type="monotone"
+            dataKey={col}
+            stroke={COLORS[idx % COLORS.length]}
+            strokeWidth={2}
+            dot={{ r: 4, fill: COLORS[idx % COLORS.length] }}
+            activeDot={{ r: 6 }}
+          />
+        ))}
+      </LineChart>
+    </ResponsiveContainer>
+  );
+};
+
+// 영역 차트
+const PivotAreaChart: React.FC<{
+  data: any[];
+  columns: string[];
+  height: number;
+  showLegend: boolean;
+}> = ({ data, columns, height, showLegend }) => {
+  return (
+    <ResponsiveContainer width="100%" height={height}>
+      <AreaChart data={data} margin={{ top: 20, right: 30, left: 20, bottom: 5 }}>
+        <CartesianGrid strokeDasharray="3 3" className="opacity-30" />
+        <XAxis
+          dataKey="name"
+          tick={{ fontSize: 11 }}
+          tickLine={false}
+          axisLine={{ stroke: "#e5e5e5" }}
+        />
+        <YAxis
+          tick={{ fontSize: 11 }}
+          tickLine={false}
+          axisLine={{ stroke: "#e5e5e5" }}
+          tickFormatter={(value) => value.toLocaleString()}
+        />
+        <Tooltip content={<CustomTooltip />} />
+        {showLegend && (
+          <Legend
+            wrapperStyle={{ fontSize: 11, paddingTop: 10 }}
+            iconType="square"
+          />
+        )}
+        {columns.map((col, idx) => (
+          <Area
+            key={col}
+            type="monotone"
+            dataKey={col}
+            fill={COLORS[idx % COLORS.length]}
+            stroke={COLORS[idx % COLORS.length]}
+            fillOpacity={0.3}
+          />
+        ))}
+      </AreaChart>
+    </ResponsiveContainer>
+  );
+};
+
+// 파이 차트
+const PivotPieChart: React.FC<{
+  data: any[];
+  height: number;
+  showLegend: boolean;
+}> = ({ data, height, showLegend }) => {
+  return (
+    <ResponsiveContainer width="100%" height={height}>
+      <PieChart>
+        <Pie
+          data={data}
+          dataKey="value"
+          nameKey="name"
+          cx="50%"
+          cy="50%"
+          outerRadius={height / 3}
+          label={({ name, percent }) =>
+            `${name} (${(percent * 100).toFixed(1)}%)`
+          }
+          labelLine
+        >
+          {data.map((entry, idx) => (
+            <Cell key={idx} fill={entry.color || COLORS[idx % COLORS.length]} />
+          ))}
+        </Pie>
+        <Tooltip content={<CustomTooltip />} />
+        {showLegend && (
+          <Legend
+            wrapperStyle={{ fontSize: 11, paddingTop: 10 }}
+            iconType="circle"
+          />
+        )}
+      </PieChart>
+    </ResponsiveContainer>
+  );
+};
+
+// ==================== 메인 컴포넌트 ====================
+
+export const PivotChart: React.FC<PivotChartProps> = ({
+  pivotResult,
+  config,
+  dataFields,
+  className,
+}) => {
+  // 차트 데이터 변환
+  const chartData = useMemo(() => {
+    if (config.type === "pie") {
+      return transformDataForPie(pivotResult, dataFields);
+    }
+    return transformDataForChart(pivotResult, dataFields);
+  }, [pivotResult, dataFields, config.type]);
+
+  // 열 이름 목록 (파이 차트 제외)
+  const columns = useMemo(() => {
+    if (config.type === "pie" || chartData.length === 0) return [];
+
+    const firstItem = chartData[0];
+    return Object.keys(firstItem).filter(
+      (key) => key !== "name" && key !== "path"
+    );
+  }, [chartData, config.type]);
+
+  const height = config.height || 300;
+  const showLegend = config.showLegend !== false;
+
+  if (!config.enabled) {
+    return null;
+  }
+
+  return (
+    <div
+      className={cn(
+        "border-t border-border bg-background p-4",
+        className
+      )}
+    >
+      {/* 차트 렌더링 */}
+      {config.type === "bar" && (
+        <PivotBarChart
+          data={chartData}
+          columns={columns}
+          height={height}
+          showLegend={showLegend}
+        />
+      )}
+
+      {config.type === "stackedBar" && (
+        <PivotBarChart
+          data={chartData}
+          columns={columns}
+          height={height}
+          showLegend={showLegend}
+          stacked
+        />
+      )}
+
+      {config.type === "line" && (
+        <PivotLineChart
+          data={chartData}
+          columns={columns}
+          height={height}
+          showLegend={showLegend}
+        />
+      )}
+
+      {config.type === "area" && (
+        <PivotAreaChart
+          data={chartData}
+          columns={columns}
+          height={height}
+          showLegend={showLegend}
+        />
+      )}
+
+      {config.type === "pie" && (
+        <PivotPieChart
+          data={chartData}
+          height={height}
+          showLegend={showLegend}
+        />
+      )}
+    </div>
+  );
+};
+
+export default PivotChart;
+
diff --git a/frontend/lib/registry/components/pivot-grid/components/index.ts b/frontend/lib/registry/components/pivot-grid/components/index.ts
new file mode 100644
index 00000000..9272e7db
--- /dev/null
+++ b/frontend/lib/registry/components/pivot-grid/components/index.ts
@@ -0,0 +1,11 @@
+/**
+ * PivotGrid 서브 컴포넌트 내보내기
+ */
+
+export { FieldPanel } from "./FieldPanel";
+export { FieldChooser } from "./FieldChooser";
+export { DrillDownModal } from "./DrillDownModal";
+export { FilterPopup } from "./FilterPopup";
+export { PivotChart } from "./PivotChart";
+export { PivotContextMenu } from "./ContextMenu";
+
diff --git a/frontend/lib/registry/components/pivot-grid/hooks/index.ts b/frontend/lib/registry/components/pivot-grid/hooks/index.ts
new file mode 100644
index 00000000..a9a1a4eb
--- /dev/null
+++ b/frontend/lib/registry/components/pivot-grid/hooks/index.ts
@@ -0,0 +1,27 @@
+/**
+ * PivotGrid 커스텀 훅 내보내기
+ */
+
+export {
+  useVirtualScroll,
+  useVirtualColumnScroll,
+  useVirtual2DScroll,
+} from "./useVirtualScroll";
+
+export type {
+  VirtualScrollOptions,
+  VirtualScrollResult,
+  VirtualColumnScrollOptions,
+  VirtualColumnScrollResult,
+  Virtual2DScrollOptions,
+  Virtual2DScrollResult,
+} from "./useVirtualScroll";
+
+export { usePivotState } from "./usePivotState";
+
+export type {
+  PivotStateConfig,
+  SavedPivotState,
+  UsePivotStateResult,
+} from "./usePivotState";
+
diff --git a/frontend/lib/registry/components/pivot-grid/hooks/usePivotState.ts b/frontend/lib/registry/components/pivot-grid/hooks/usePivotState.ts
new file mode 100644
index 00000000..9b001377
--- /dev/null
+++ b/frontend/lib/registry/components/pivot-grid/hooks/usePivotState.ts
@@ -0,0 +1,231 @@
+"use client";
+
+/**
+ * PivotState 훅
+ * 피벗 그리드 상태 저장/복원 관리
+ */
+
+import { useState, useEffect, useCallback } from "react";
+import { PivotFieldConfig, PivotGridState } from "../types";
+
+// ==================== 타입 ====================
+
+export interface PivotStateConfig {
+  enabled: boolean;
+  storageKey?: string;
+  storageType?: "localStorage" | "sessionStorage";
+}
+
+export interface SavedPivotState {
+  version: string;
+  timestamp: number;
+  fields: PivotFieldConfig[];
+  expandedRowPaths: string[][];
+  expandedColumnPaths: string[][];
+  filterConfig: Record<string, any[]>;
+  sortConfig: {
+    field: string;
+    direction: "asc" | "desc";
+  } | null;
+}
+
+export interface UsePivotStateResult {
+  // 상태
+  fields: PivotFieldConfig[];
+  pivotState: PivotGridState;
+
+  // 상태 변경
+  setFields: (fields: PivotFieldConfig[]) => void;
+  setPivotState: (state: PivotGridState | ((prev: PivotGridState) => PivotGridState)) => void;
+
+  // 저장/복원
+  saveState: () => void;
+  loadState: () => boolean;
+  clearState: () => void;
+  hasStoredState: () => boolean;
+
+  // 상태 정보
+  lastSaved: Date | null;
+  isDirty: boolean;
+}
+
+// ==================== 상수 ====================
+
+const STATE_VERSION = "1.0.0";
+const DEFAULT_STORAGE_KEY = "pivot-grid-state";
+
+// ==================== 훅 ====================
+
+export function usePivotState(
+  initialFields: PivotFieldConfig[],
+  config: PivotStateConfig
+): UsePivotStateResult {
+  const {
+    enabled,
+    storageKey = DEFAULT_STORAGE_KEY,
+    storageType = "localStorage",
+  } = config;
+
+  // 상태
+  const [fields, setFieldsInternal] = useState<PivotFieldConfig[]>(initialFields);
+  const [pivotState, setPivotStateInternal] = useState<PivotGridState>({
+    expandedRowPaths: [],
+    expandedColumnPaths: [],
+    sortConfig: null,
+    filterConfig: {},
+  });
+  const [lastSaved, setLastSaved] = useState<Date | null>(null);
+  const [isDirty, setIsDirty] = useState(false);
+  const [initialStateLoaded, setInitialStateLoaded] = useState(false);
+
+  // 스토리지 가져오기
+  const getStorage = useCallback(() => {
+    if (typeof window === "undefined") return null;
+    return storageType === "localStorage" ? localStorage : sessionStorage;
+  }, [storageType]);
+
+  // 저장된 상태 확인
+  const hasStoredState = useCallback((): boolean => {
+    const storage = getStorage();
+    if (!storage) return false;
+    return storage.getItem(storageKey) !== null;
+  }, [getStorage, storageKey]);
+
+  // 상태 저장
+  const saveState = useCallback(() => {
+    if (!enabled) return;
+
+    const storage = getStorage();
+    if (!storage) return;
+
+    const stateToSave: SavedPivotState = {
+      version: STATE_VERSION,
+      timestamp: Date.now(),
+      fields,
+      expandedRowPaths: pivotState.expandedRowPaths,
+      expandedColumnPaths: pivotState.expandedColumnPaths,
+      filterConfig: pivotState.filterConfig,
+      sortConfig: pivotState.sortConfig,
+    };
+
+    try {
+      storage.setItem(storageKey, JSON.stringify(stateToSave));
+      setLastSaved(new Date());
+      setIsDirty(false);
+      console.log("✅ 피벗 상태 저장됨:", storageKey);
+    } catch (error) {
+      console.error("❌ 피벗 상태 저장 실패:", error);
+    }
+  }, [enabled, getStorage, storageKey, fields, pivotState]);
+
+  // 상태 불러오기
+  const loadState = useCallback((): boolean => {
+    if (!enabled) return false;
+
+    const storage = getStorage();
+    if (!storage) return false;
+
+    try {
+      const saved = storage.getItem(storageKey);
+      if (!saved) return false;
+
+      const parsedState: SavedPivotState = JSON.parse(saved);
+
+      // 버전 체크
+      if (parsedState.version !== STATE_VERSION) {
+        console.warn("⚠️ 저장된 상태 버전이 다름, 무시됨");
+        return false;
+      }
+
+      // 상태 복원
+      setFieldsInternal(parsedState.fields);
+      setPivotStateInternal({
+        expandedRowPaths: parsedState.expandedRowPaths,
+        expandedColumnPaths: parsedState.expandedColumnPaths,
+        sortConfig: parsedState.sortConfig,
+        filterConfig: parsedState.filterConfig,
+      });
+      setLastSaved(new Date(parsedState.timestamp));
+      setIsDirty(false);
+
+      console.log("✅ 피벗 상태 복원됨:", storageKey);
+      return true;
+    } catch (error) {
+      console.error("❌ 피벗 상태 복원 실패:", error);
+      return false;
+    }
+  }, [enabled, getStorage, storageKey]);
+
+  // 상태 초기화
+  const clearState = useCallback(() => {
+    const storage = getStorage();
+    if (!storage) return;
+
+    try {
+      storage.removeItem(storageKey);
+      setLastSaved(null);
+      console.log("🗑️ 피벗 상태 삭제됨:", storageKey);
+    } catch (error) {
+      console.error("❌ 피벗 상태 삭제 실패:", error);
+    }
+  }, [getStorage, storageKey]);
+
+  // 필드 변경 (dirty 플래그 설정)
+  const setFields = useCallback((newFields: PivotFieldConfig[]) => {
+    setFieldsInternal(newFields);
+    setIsDirty(true);
+  }, []);
+
+  // 피벗 상태 변경 (dirty 플래그 설정)
+  const setPivotState = useCallback(
+    (newState: PivotGridState | ((prev: PivotGridState) => PivotGridState)) => {
+      setPivotStateInternal(newState);
+      setIsDirty(true);
+    },
+    []
+  );
+
+  // 초기 로드
+  useEffect(() => {
+    if (!initialStateLoaded && enabled && hasStoredState()) {
+      loadState();
+      setInitialStateLoaded(true);
+    }
+  }, [enabled, hasStoredState, loadState, initialStateLoaded]);
+
+  // 초기 필드 동기화 (저장된 상태가 없을 때)
+  useEffect(() => {
+    if (initialStateLoaded) return;
+    if (!hasStoredState() && initialFields.length > 0) {
+      setFieldsInternal(initialFields);
+      setInitialStateLoaded(true);
+    }
+  }, [initialFields, hasStoredState, initialStateLoaded]);
+
+  // 자동 저장 (변경 시)
+  useEffect(() => {
+    if (!enabled || !isDirty) return;
+
+    const timeout = setTimeout(() => {
+      saveState();
+    }, 1000); // 1초 디바운스
+
+    return () => clearTimeout(timeout);
+  }, [enabled, isDirty, saveState]);
+
+  return {
+    fields,
+    pivotState,
+    setFields,
+    setPivotState,
+    saveState,
+    loadState,
+    clearState,
+    hasStoredState,
+    lastSaved,
+    isDirty,
+  };
+}
+
+export default usePivotState;
+
diff --git a/frontend/lib/registry/components/pivot-grid/hooks/useVirtualScroll.ts b/frontend/lib/registry/components/pivot-grid/hooks/useVirtualScroll.ts
new file mode 100644
index 00000000..152cb2df
--- /dev/null
+++ b/frontend/lib/registry/components/pivot-grid/hooks/useVirtualScroll.ts
@@ -0,0 +1,312 @@
+"use client";
+
+/**
+ * Virtual Scroll 훅
+ * 대용량 피벗 데이터의 가상 스크롤 처리
+ */
+
+import { useState, useEffect, useRef, useMemo, useCallback } from "react";
+
+// ==================== 타입 ====================
+
+export interface VirtualScrollOptions {
+  itemCount: number; // 전체 아이템 수
+  itemHeight: number; // 각 아이템 높이 (px)
+  containerHeight: number; // 컨테이너 높이 (px)
+  overscan?: number; // 버퍼 아이템 수 (기본: 5)
+}
+
+export interface VirtualScrollResult {
+  // 현재 보여야 할 아이템 범위
+  startIndex: number;
+  endIndex: number;
+
+  // 가상 스크롤 관련 값
+  totalHeight: number; // 전체 높이
+  offsetTop: number; // 상단 오프셋
+
+  // 보여지는 아이템 목록
+  visibleItems: number[];
+
+  // 이벤트 핸들러
+  onScroll: (scrollTop: number) => void;
+
+  // 컨테이너 ref
+  containerRef: React.RefObject<HTMLDivElement>;
+}
+
+// ==================== 훅 ====================
+
+export function useVirtualScroll(options: VirtualScrollOptions): VirtualScrollResult {
+  const {
+    itemCount,
+    itemHeight,
+    containerHeight,
+    overscan = 5,
+  } = options;
+
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [scrollTop, setScrollTop] = useState(0);
+
+  // 보이는 아이템 수
+  const visibleCount = Math.ceil(containerHeight / itemHeight);
+
+  // 시작/끝 인덱스 계산
+  const { startIndex, endIndex } = useMemo(() => {
+    const start = Math.max(0, Math.floor(scrollTop / itemHeight) - overscan);
+    const end = Math.min(
+      itemCount - 1,
+      Math.ceil((scrollTop + containerHeight) / itemHeight) + overscan
+    );
+    return { startIndex: start, endIndex: end };
+  }, [scrollTop, itemHeight, containerHeight, itemCount, overscan]);
+
+  // 전체 높이
+  const totalHeight = itemCount * itemHeight;
+
+  // 상단 오프셋
+  const offsetTop = startIndex * itemHeight;
+
+  // 보이는 아이템 인덱스 배열
+  const visibleItems = useMemo(() => {
+    const items: number[] = [];
+    for (let i = startIndex; i <= endIndex; i++) {
+      items.push(i);
+    }
+    return items;
+  }, [startIndex, endIndex]);
+
+  // 스크롤 핸들러
+  const onScroll = useCallback((newScrollTop: number) => {
+    setScrollTop(newScrollTop);
+  }, []);
+
+  // 스크롤 이벤트 리스너
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+
+    const handleScroll = () => {
+      setScrollTop(container.scrollTop);
+    };
+
+    container.addEventListener("scroll", handleScroll, { passive: true });
+
+    return () => {
+      container.removeEventListener("scroll", handleScroll);
+    };
+  }, []);
+
+  return {
+    startIndex,
+    endIndex,
+    totalHeight,
+    offsetTop,
+    visibleItems,
+    onScroll,
+    containerRef,
+  };
+}
+
+// ==================== 열 가상 스크롤 ====================
+
+export interface VirtualColumnScrollOptions {
+  columnCount: number; // 전체 열 수
+  columnWidth: number; // 각 열 너비 (px)
+  containerWidth: number; // 컨테이너 너비 (px)
+  overscan?: number;
+}
+
+export interface VirtualColumnScrollResult {
+  startIndex: number;
+  endIndex: number;
+  totalWidth: number;
+  offsetLeft: number;
+  visibleColumns: number[];
+  onScroll: (scrollLeft: number) => void;
+}
+
+export function useVirtualColumnScroll(
+  options: VirtualColumnScrollOptions
+): VirtualColumnScrollResult {
+  const {
+    columnCount,
+    columnWidth,
+    containerWidth,
+    overscan = 3,
+  } = options;
+
+  const [scrollLeft, setScrollLeft] = useState(0);
+
+  const { startIndex, endIndex } = useMemo(() => {
+    const start = Math.max(0, Math.floor(scrollLeft / columnWidth) - overscan);
+    const end = Math.min(
+      columnCount - 1,
+      Math.ceil((scrollLeft + containerWidth) / columnWidth) + overscan
+    );
+    return { startIndex: start, endIndex: end };
+  }, [scrollLeft, columnWidth, containerWidth, columnCount, overscan]);
+
+  const totalWidth = columnCount * columnWidth;
+  const offsetLeft = startIndex * columnWidth;
+
+  const visibleColumns = useMemo(() => {
+    const cols: number[] = [];
+    for (let i = startIndex; i <= endIndex; i++) {
+      cols.push(i);
+    }
+    return cols;
+  }, [startIndex, endIndex]);
+
+  const onScroll = useCallback((newScrollLeft: number) => {
+    setScrollLeft(newScrollLeft);
+  }, []);
+
+  return {
+    startIndex,
+    endIndex,
+    totalWidth,
+    offsetLeft,
+    visibleColumns,
+    onScroll,
+  };
+}
+
+// ==================== 2D 가상 스크롤 (행 + 열) ====================
+
+export interface Virtual2DScrollOptions {
+  rowCount: number;
+  columnCount: number;
+  rowHeight: number;
+  columnWidth: number;
+  containerHeight: number;
+  containerWidth: number;
+  rowOverscan?: number;
+  columnOverscan?: number;
+}
+
+export interface Virtual2DScrollResult {
+  // 행 범위
+  rowStartIndex: number;
+  rowEndIndex: number;
+  totalHeight: number;
+  offsetTop: number;
+  visibleRows: number[];
+
+  // 열 범위
+  columnStartIndex: number;
+  columnEndIndex: number;
+  totalWidth: number;
+  offsetLeft: number;
+  visibleColumns: number[];
+
+  // 스크롤 핸들러
+  onScroll: (scrollTop: number, scrollLeft: number) => void;
+
+  // 컨테이너 ref
+  containerRef: React.RefObject<HTMLDivElement>;
+}
+
+export function useVirtual2DScroll(
+  options: Virtual2DScrollOptions
+): Virtual2DScrollResult {
+  const {
+    rowCount,
+    columnCount,
+    rowHeight,
+    columnWidth,
+    containerHeight,
+    containerWidth,
+    rowOverscan = 5,
+    columnOverscan = 3,
+  } = options;
+
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [scrollTop, setScrollTop] = useState(0);
+  const [scrollLeft, setScrollLeft] = useState(0);
+
+  // 행 계산
+  const { rowStartIndex, rowEndIndex, visibleRows } = useMemo(() => {
+    const start = Math.max(0, Math.floor(scrollTop / rowHeight) - rowOverscan);
+    const end = Math.min(
+      rowCount - 1,
+      Math.ceil((scrollTop + containerHeight) / rowHeight) + rowOverscan
+    );
+
+    const rows: number[] = [];
+    for (let i = start; i <= end; i++) {
+      rows.push(i);
+    }
+
+    return {
+      rowStartIndex: start,
+      rowEndIndex: end,
+      visibleRows: rows,
+    };
+  }, [scrollTop, rowHeight, containerHeight, rowCount, rowOverscan]);
+
+  // 열 계산
+  const { columnStartIndex, columnEndIndex, visibleColumns } = useMemo(() => {
+    const start = Math.max(0, Math.floor(scrollLeft / columnWidth) - columnOverscan);
+    const end = Math.min(
+      columnCount - 1,
+      Math.ceil((scrollLeft + containerWidth) / columnWidth) + columnOverscan
+    );
+
+    const cols: number[] = [];
+    for (let i = start; i <= end; i++) {
+      cols.push(i);
+    }
+
+    return {
+      columnStartIndex: start,
+      columnEndIndex: end,
+      visibleColumns: cols,
+    };
+  }, [scrollLeft, columnWidth, containerWidth, columnCount, columnOverscan]);
+
+  const totalHeight = rowCount * rowHeight;
+  const totalWidth = columnCount * columnWidth;
+  const offsetTop = rowStartIndex * rowHeight;
+  const offsetLeft = columnStartIndex * columnWidth;
+
+  const onScroll = useCallback((newScrollTop: number, newScrollLeft: number) => {
+    setScrollTop(newScrollTop);
+    setScrollLeft(newScrollLeft);
+  }, []);
+
+  // 스크롤 이벤트 리스너
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+
+    const handleScroll = () => {
+      setScrollTop(container.scrollTop);
+      setScrollLeft(container.scrollLeft);
+    };
+
+    container.addEventListener("scroll", handleScroll, { passive: true });
+
+    return () => {
+      container.removeEventListener("scroll", handleScroll);
+    };
+  }, []);
+
+  return {
+    rowStartIndex,
+    rowEndIndex,
+    totalHeight,
+    offsetTop,
+    visibleRows,
+    columnStartIndex,
+    columnEndIndex,
+    totalWidth,
+    offsetLeft,
+    visibleColumns,
+    onScroll,
+    containerRef,
+  };
+}
+
+export default useVirtualScroll;
+
diff --git a/frontend/lib/registry/components/pivot-grid/index.ts b/frontend/lib/registry/components/pivot-grid/index.ts
new file mode 100644
index 00000000..b1bbe99b
--- /dev/null
+++ b/frontend/lib/registry/components/pivot-grid/index.ts
@@ -0,0 +1,62 @@
+/**
+ * PivotGrid 컴포넌트 모듈
+ * 다차원 데이터 분석을 위한 피벗 테이블
+ */
+
+// 타입 내보내기
+export type {
+  // 기본 타입
+  PivotAreaType,
+  AggregationType,
+  SummaryDisplayMode,
+  SortDirection,
+  DateGroupInterval,
+  FieldDataType,
+  DataSourceType,
+  // 필드 설정
+  PivotFieldFormat,
+  PivotFieldConfig,
+  // 데이터 소스
+  PivotFilterCondition,
+  PivotJoinConfig,
+  PivotDataSourceConfig,
+  // 표시 설정
+  PivotTotalsConfig,
+  FieldChooserConfig,
+  PivotChartConfig,
+  PivotStyleConfig,
+  PivotExportConfig,
+  // Props
+  PivotGridProps,
+  // 결과 데이터
+  PivotCellData,
+  PivotHeaderNode,
+  PivotCellValue,
+  PivotResult,
+  PivotFlatRow,
+  PivotFlatColumn,
+  // 상태
+  PivotGridState,
+  // Config
+  PivotGridComponentConfig,
+} from "./types";
+
+// 컴포넌트 내보내기
+export { PivotGridComponent } from "./PivotGridComponent";
+export { PivotGridConfigPanel } from "./PivotGridConfigPanel";
+
+// 유틸리티
+export {
+  aggregate,
+  sum,
+  count,
+  avg,
+  min,
+  max,
+  countDistinct,
+  formatNumber,
+  formatDate,
+  getAggregationLabel,
+} from "./utils/aggregation";
+
+export { processPivotData, pathToKey, keyToPath } from "./utils/pivotEngine";
diff --git a/frontend/lib/registry/components/pivot-grid/types.ts b/frontend/lib/registry/components/pivot-grid/types.ts
new file mode 100644
index 00000000..87ba2414
--- /dev/null
+++ b/frontend/lib/registry/components/pivot-grid/types.ts
@@ -0,0 +1,408 @@
+/**
+ * PivotGrid 컴포넌트 타입 정의
+ * 다차원 데이터 분석을 위한 피벗 테이블 컴포넌트
+ */
+
+// ==================== 기본 타입 ====================
+
+// 필드 영역 타입
+export type PivotAreaType = "row" | "column" | "data" | "filter";
+
+// 집계 함수 타입
+export type AggregationType = "sum" | "count" | "avg" | "min" | "max" | "countDistinct";
+
+// 요약 표시 모드
+export type SummaryDisplayMode = 
+  | "absoluteValue"      // 절대값 (기본)
+  | "percentOfColumnTotal"   // 열 총계 대비 %
+  | "percentOfRowTotal"      // 행 총계 대비 %
+  | "percentOfGrandTotal"    // 전체 총계 대비 %
+  | "percentOfColumnGrandTotal" // 열 대총계 대비 %
+  | "percentOfRowGrandTotal"    // 행 대총계 대비 %
+  | "runningTotalByRow"      // 행 방향 누계
+  | "runningTotalByColumn"   // 열 방향 누계
+  | "differenceFromPrevious" // 이전 대비 차이
+  | "percentDifferenceFromPrevious"; // 이전 대비 % 차이
+
+// 정렬 방향
+export type SortDirection = "asc" | "desc" | "none";
+
+// 날짜 그룹 간격
+export type DateGroupInterval = "year" | "quarter" | "month" | "week" | "day";
+
+// 필드 데이터 타입
+export type FieldDataType = "string" | "number" | "date" | "boolean";
+
+// 데이터 소스 타입
+export type DataSourceType = "table" | "api" | "static";
+
+// ==================== 필드 설정 ====================
+
+// 필드 포맷 설정
+export interface PivotFieldFormat {
+  type: "number" | "currency" | "percent" | "date" | "text";
+  precision?: number; // 소수점 자릿수
+  thousandSeparator?: boolean; // 천단위 구분자
+  prefix?: string; // 접두사 (예: "$", "₩")
+  suffix?: string; // 접미사 (예: "%", "원")
+  dateFormat?: string; // 날짜 형식 (예: "YYYY-MM-DD")
+}
+
+// 필드 설정
+export interface PivotFieldConfig {
+  // 기본 정보
+  field: string; // 데이터 필드명
+  caption: string; // 표시 라벨
+  area: PivotAreaType; // 배치 영역
+  areaIndex?: number; // 영역 내 순서
+
+  // 데이터 타입
+  dataType?: FieldDataType; // 데이터 타입
+
+  // 집계 설정 (data 영역용)
+  summaryType?: AggregationType; // 집계 함수
+  summaryDisplayMode?: SummaryDisplayMode; // 요약 표시 모드
+  showValuesAs?: SummaryDisplayMode; // 값 표시 방식 (summaryDisplayMode 별칭)
+
+  // 정렬 설정
+  sortBy?: "value" | "caption"; // 정렬 기준
+  sortOrder?: SortDirection; // 정렬 방향
+  sortBySummary?: string; // 요약값 기준 정렬 (data 필드명)
+
+  // 날짜 그룹화 설정
+  groupInterval?: DateGroupInterval; // 날짜 그룹 간격
+  groupName?: string; // 그룹 이름 (같은 그룹끼리 계층 형성)
+
+  // 표시 설정
+  visible?: boolean; // 표시 여부
+  width?: number; // 컬럼 너비
+  expanded?: boolean; // 기본 확장 상태
+
+  // 포맷 설정
+  format?: PivotFieldFormat; // 값 포맷
+
+  // 필터 설정
+  filterValues?: any[]; // 선택된 필터 값
+  filterType?: "include" | "exclude"; // 필터 타입
+  allowFiltering?: boolean; // 필터링 허용
+  allowSorting?: boolean; // 정렬 허용
+
+  // 계층 관련
+  displayFolder?: string; // 필드 선택기에서 폴더 구조
+  isMeasure?: boolean; // 측정값 전용 필드 (data 영역만 가능)
+  
+  // 계산 필드
+  isCalculated?: boolean; // 계산 필드 여부
+  calculateFormula?: string; // 계산 수식 (예: "[Sales] / [Quantity]")
+}
+
+// ==================== 데이터 소스 설정 ====================
+
+// 필터 조건
+export interface PivotFilterCondition {
+  field: string;
+  operator: "=" | "!=" | ">" | "<" | ">=" | "<=" | "LIKE" | "IN";
+  value?: any;
+  valueFromField?: string; // formData에서 값 가져오기
+}
+
+// 조인 설정
+export interface PivotJoinConfig {
+  joinType: "INNER" | "LEFT" | "RIGHT";
+  targetTable: string;
+  sourceColumn: string;
+  targetColumn: string;
+  columns: string[]; // 가져올 컬럼들
+}
+
+// 데이터 소스 설정
+export interface PivotDataSourceConfig {
+  type: DataSourceType;
+
+  // 테이블 기반
+  tableName?: string; // 테이블명
+
+  // API 기반
+  apiEndpoint?: string; // API 엔드포인트
+  apiMethod?: "GET" | "POST"; // HTTP 메서드
+
+  // 정적 데이터
+  staticData?: any[]; // 정적 데이터
+
+  // 필터 조건
+  filterConditions?: PivotFilterCondition[];
+
+  // 조인 설정
+  joinConfigs?: PivotJoinConfig[];
+}
+
+// ==================== 표시 설정 ====================
+
+// 총합계 표시 설정
+export interface PivotTotalsConfig {
+  // 행 총합계
+  showRowGrandTotals?: boolean; // 행 총합계 표시
+  showRowTotals?: boolean; // 행 소계 표시
+  rowTotalsPosition?: "first" | "last"; // 소계 위치
+  rowGrandTotalPosition?: "top" | "bottom"; // 행 총계 위치 (상단/하단)
+
+  // 열 총합계
+  showColumnGrandTotals?: boolean; // 열 총합계 표시
+  showColumnTotals?: boolean; // 열 소계 표시
+  columnTotalsPosition?: "first" | "last"; // 소계 위치
+  columnGrandTotalPosition?: "left" | "right"; // 열 총계 위치 (좌측/우측)
+}
+
+// 필드 선택기 설정
+export interface FieldChooserConfig {
+  enabled: boolean; // 활성화 여부
+  allowSearch?: boolean; // 검색 허용
+  layout?: "default" | "simplified"; // 레이아웃
+  height?: number; // 높이
+  applyChangesMode?: "instantly" | "onDemand"; // 변경 적용 시점
+}
+
+// 차트 연동 설정
+export interface PivotChartConfig {
+  enabled: boolean; // 차트 표시 여부
+  type: "bar" | "line" | "area" | "pie" | "stackedBar";
+  position: "top" | "bottom" | "left" | "right";
+  height?: number;
+  showLegend?: boolean;
+  animate?: boolean;
+}
+
+// 조건부 서식 규칙
+export interface ConditionalFormatRule {
+  id: string;
+  type: "colorScale" | "dataBar" | "iconSet" | "cellValue";
+  field?: string; // 적용할 데이터 필드 (없으면 전체)
+
+  // colorScale: 값 범위에 따른 색상 그라데이션
+  colorScale?: {
+    minColor: string; // 최소값 색상 (예: "#ff0000")
+    midColor?: string; // 중간값 색상 (선택)
+    maxColor: string; // 최대값 색상 (예: "#00ff00")
+  };
+
+  // dataBar: 값에 따른 막대 표시
+  dataBar?: {
+    color: string; // 막대 색상
+    showValue?: boolean; // 값 표시 여부
+    minValue?: number; // 최소값 (없으면 자동)
+    maxValue?: number; // 최대값 (없으면 자동)
+  };
+
+  // iconSet: 값에 따른 아이콘 표시
+  iconSet?: {
+    type: "arrows" | "traffic" | "rating" | "flags";
+    thresholds: number[]; // 경계값 (예: [30, 70] = 0-30, 30-70, 70-100)
+    reverse?: boolean; // 아이콘 순서 반전
+  };
+
+  // cellValue: 조건에 따른 스타일
+  cellValue?: {
+    operator: ">" | ">=" | "<" | "<=" | "=" | "!=" | "between";
+    value1: number;
+    value2?: number; // between 연산자용
+    backgroundColor?: string;
+    textColor?: string;
+    bold?: boolean;
+  };
+}
+
+// 스타일 설정
+export interface PivotStyleConfig {
+  theme: "default" | "compact" | "modern";
+  headerStyle: "default" | "dark" | "light";
+  cellPadding: "compact" | "normal" | "comfortable";
+  borderStyle: "none" | "light" | "heavy";
+  alternateRowColors?: boolean;
+  highlightTotals?: boolean; // 총합계 강조
+  conditionalFormats?: ConditionalFormatRule[]; // 조건부 서식 규칙
+  mergeCells?: boolean; // 같은 값 셀 병합
+}
+
+// ==================== 내보내기 설정 ====================
+
+export interface PivotExportConfig {
+  excel?: boolean;
+  pdf?: boolean;
+  fileName?: string;
+}
+
+// ==================== 메인 Props ====================
+
+export interface PivotGridProps {
+  // 기본 설정
+  id?: string;
+  title?: string;
+
+  // 데이터 소스
+  dataSource?: PivotDataSourceConfig;
+
+  // 필드 설정
+  fields?: PivotFieldConfig[];
+
+  // 표시 설정
+  totals?: PivotTotalsConfig;
+  style?: PivotStyleConfig;
+
+  // 필드 선택기
+  fieldChooser?: FieldChooserConfig;
+
+  // 차트 연동
+  chart?: PivotChartConfig;
+
+  // 기능 설정
+  allowSortingBySummary?: boolean; // 요약값 기준 정렬
+  allowFiltering?: boolean; // 필터링 허용
+  allowExpandAll?: boolean; // 전체 확장/축소 허용
+  wordWrapEnabled?: boolean; // 텍스트 줄바꿈
+
+  // 크기 설정
+  height?: string | number;
+  maxHeight?: string;
+
+  // 상태 저장
+  stateStoring?: {
+    enabled: boolean;
+    storageKey?: string; // localStorage 키
+  };
+
+  // 내보내기
+  exportConfig?: PivotExportConfig;
+
+  // 데이터 (외부 주입용)
+  data?: any[];
+
+  // 이벤트
+  onCellClick?: (cellData: PivotCellData) => void;
+  onCellDoubleClick?: (cellData: PivotCellData) => void;
+  onFieldDrop?: (field: PivotFieldConfig, targetArea: PivotAreaType) => void;
+  onExpandChange?: (expandedPaths: string[][]) => void;
+  onDataChange?: (data: any[]) => void;
+}
+
+// ==================== 결과 데이터 구조 ====================
+
+// 셀 데이터
+export interface PivotCellData {
+  value: any; // 셀 값
+  rowPath: string[]; // 행 경로 (예: ["북미", "뉴욕"])
+  columnPath: string[]; // 열 경로 (예: ["2024", "Q1"])
+  field?: string; // 데이터 필드명
+  aggregationType?: AggregationType;
+  isTotal?: boolean; // 총합계 여부
+  isGrandTotal?: boolean; // 대총합 여부
+}
+
+// 헤더 노드 (트리 구조)
+export interface PivotHeaderNode {
+  value: any; // 원본 값
+  caption: string; // 표시 텍스트
+  level: number; // 깊이
+  children?: PivotHeaderNode[]; // 자식 노드
+  isExpanded: boolean; // 확장 상태
+  path: string[]; // 경로 (드릴다운용)
+  subtotal?: PivotCellValue[]; // 소계
+  span?: number; // colspan/rowspan
+}
+
+// 셀 값
+export interface PivotCellValue {
+  field: string; // 데이터 필드
+  value: number | null; // 집계 값
+  formattedValue: string; // 포맷된 값
+}
+
+// 피벗 결과 데이터 구조
+export interface PivotResult {
+  // 행 헤더 트리
+  rowHeaders: PivotHeaderNode[];
+
+  // 열 헤더 트리
+  columnHeaders: PivotHeaderNode[];
+
+  // 데이터 매트릭스 (rowPath + columnPath → values)
+  dataMatrix: Map<string, PivotCellValue[]>;
+
+  // 플랫 행 목록 (렌더링용)
+  flatRows: PivotFlatRow[];
+
+  // 플랫 열 목록 (렌더링용)
+  flatColumns: PivotFlatColumn[];
+
+  // 총합계
+  grandTotals: {
+    row: Map<string, PivotCellValue[]>; // 행별 총합
+    column: Map<string, PivotCellValue[]>; // 열별 총합
+    grand: PivotCellValue[]; // 대총합
+  };
+}
+
+// 플랫 행 (렌더링용)
+export interface PivotFlatRow {
+  path: string[];
+  level: number;
+  caption: string;
+  isExpanded: boolean;
+  hasChildren: boolean;
+  isTotal?: boolean;
+}
+
+// 플랫 열 (렌더링용)
+export interface PivotFlatColumn {
+  path: string[];
+  level: number;
+  caption: string;
+  span: number;
+  isTotal?: boolean;
+}
+
+// ==================== 상태 관리 ====================
+
+export interface PivotGridState {
+  expandedRowPaths: string[][]; // 확장된 행 경로들
+  expandedColumnPaths: string[][]; // 확장된 열 경로들
+  sortConfig: {
+    field: string;
+    direction: SortDirection;
+  } | null;
+  filterConfig: Record<string, any[]>; // 필드별 필터값
+}
+
+// ==================== 컴포넌트 Config (화면관리용) ====================
+
+export interface PivotGridComponentConfig {
+  // 데이터 소스
+  dataSource?: PivotDataSourceConfig;
+
+  // 필드 설정
+  fields?: PivotFieldConfig[];
+
+  // 표시 설정
+  totals?: PivotTotalsConfig;
+  style?: PivotStyleConfig;
+
+  // 필드 선택기
+  fieldChooser?: FieldChooserConfig;
+
+  // 차트 연동
+  chart?: PivotChartConfig;
+
+  // 기능 설정
+  allowSortingBySummary?: boolean;
+  allowFiltering?: boolean;
+  allowExpandAll?: boolean;
+  wordWrapEnabled?: boolean;
+
+  // 크기 설정
+  height?: string | number;
+  maxHeight?: string;
+
+  // 내보내기
+  exportConfig?: PivotExportConfig;
+}
+
+
diff --git a/frontend/lib/registry/components/pivot-grid/utils/aggregation.ts b/frontend/lib/registry/components/pivot-grid/utils/aggregation.ts
new file mode 100644
index 00000000..39aa1c5f
--- /dev/null
+++ b/frontend/lib/registry/components/pivot-grid/utils/aggregation.ts
@@ -0,0 +1,176 @@
+/**
+ * PivotGrid 집계 함수 유틸리티
+ * 다양한 집계 연산을 수행합니다.
+ */
+
+import { AggregationType, PivotFieldFormat } from "../types";
+
+// ==================== 집계 함수 ====================
+
+/**
+ * 합계 계산
+ */
+export function sum(values: number[]): number {
+  return values.reduce((acc, val) => acc + (val || 0), 0);
+}
+
+/**
+ * 개수 계산
+ */
+export function count(values: any[]): number {
+  return values.length;
+}
+
+/**
+ * 평균 계산
+ */
+export function avg(values: number[]): number {
+  if (values.length === 0) return 0;
+  return sum(values) / values.length;
+}
+
+/**
+ * 최소값 계산
+ */
+export function min(values: number[]): number {
+  if (values.length === 0) return 0;
+  return Math.min(...values.filter((v) => v !== null && v !== undefined));
+}
+
+/**
+ * 최대값 계산
+ */
+export function max(values: number[]): number {
+  if (values.length === 0) return 0;
+  return Math.max(...values.filter((v) => v !== null && v !== undefined));
+}
+
+/**
+ * 고유값 개수 계산
+ */
+export function countDistinct(values: any[]): number {
+  return new Set(values.filter((v) => v !== null && v !== undefined)).size;
+}
+
+/**
+ * 집계 타입에 따른 집계 수행
+ */
+export function aggregate(
+  values: any[],
+  type: AggregationType = "sum"
+): number {
+  const numericValues = values
+    .map((v) => (typeof v === "number" ? v : parseFloat(v)))
+    .filter((v) => !isNaN(v));
+
+  switch (type) {
+    case "sum":
+      return sum(numericValues);
+    case "count":
+      return count(values);
+    case "avg":
+      return avg(numericValues);
+    case "min":
+      return min(numericValues);
+    case "max":
+      return max(numericValues);
+    case "countDistinct":
+      return countDistinct(values);
+    default:
+      return sum(numericValues);
+  }
+}
+
+// ==================== 포맷 함수 ====================
+
+/**
+ * 숫자 포맷팅
+ */
+export function formatNumber(
+  value: number | null | undefined,
+  format?: PivotFieldFormat
+): string {
+  if (value === null || value === undefined) return "-";
+
+  const {
+    type = "number",
+    precision = 0,
+    thousandSeparator = true,
+    prefix = "",
+    suffix = "",
+  } = format || {};
+
+  let formatted: string;
+
+  switch (type) {
+    case "currency":
+      formatted = value.toLocaleString("ko-KR", {
+        minimumFractionDigits: precision,
+        maximumFractionDigits: precision,
+      });
+      break;
+
+    case "percent":
+      formatted = (value * 100).toLocaleString("ko-KR", {
+        minimumFractionDigits: precision,
+        maximumFractionDigits: precision,
+      });
+      break;
+
+    case "number":
+    default:
+      if (thousandSeparator) {
+        formatted = value.toLocaleString("ko-KR", {
+          minimumFractionDigits: precision,
+          maximumFractionDigits: precision,
+        });
+      } else {
+        formatted = value.toFixed(precision);
+      }
+      break;
+  }
+
+  return `${prefix}${formatted}${suffix}`;
+}
+
+/**
+ * 날짜 포맷팅
+ */
+export function formatDate(
+  value: Date | string | null | undefined,
+  format: string = "YYYY-MM-DD"
+): string {
+  if (!value) return "-";
+
+  const date = typeof value === "string" ? new Date(value) : value;
+
+  if (isNaN(date.getTime())) return "-";
+
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, "0");
+  const day = String(date.getDate()).padStart(2, "0");
+  const quarter = Math.ceil((date.getMonth() + 1) / 3);
+
+  return format
+    .replace("YYYY", String(year))
+    .replace("MM", month)
+    .replace("DD", day)
+    .replace("Q", `Q${quarter}`);
+}
+
+/**
+ * 집계 타입 라벨 반환
+ */
+export function getAggregationLabel(type: AggregationType): string {
+  const labels: Record<AggregationType, string> = {
+    sum: "합계",
+    count: "개수",
+    avg: "평균",
+    min: "최소",
+    max: "최대",
+    countDistinct: "고유값",
+  };
+  return labels[type] || "합계";
+}
+
+
diff --git a/frontend/lib/registry/components/pivot-grid/utils/conditionalFormat.ts b/frontend/lib/registry/components/pivot-grid/utils/conditionalFormat.ts
new file mode 100644
index 00000000..a9195d92
--- /dev/null
+++ b/frontend/lib/registry/components/pivot-grid/utils/conditionalFormat.ts
@@ -0,0 +1,311 @@
+/**
+ * 조건부 서식 유틸리티
+ * 셀 값에 따른 스타일 계산
+ */
+
+import { ConditionalFormatRule } from "../types";
+
+// ==================== 타입 ====================
+
+export interface CellFormatStyle {
+  backgroundColor?: string;
+  textColor?: string;
+  fontWeight?: string;
+  dataBarWidth?: number; // 0-100%
+  dataBarColor?: string;
+  icon?: string; // 이모지 또는 아이콘 이름
+}
+
+// ==================== 색상 유틸리티 ====================
+
+/**
+ * HEX 색상을 RGB로 변환
+ */
+function hexToRgb(hex: string): { r: number; g: number; b: number } | null {
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  return result
+    ? {
+        r: parseInt(result[1], 16),
+        g: parseInt(result[2], 16),
+        b: parseInt(result[3], 16),
+      }
+    : null;
+}
+
+/**
+ * RGB를 HEX로 변환
+ */
+function rgbToHex(r: number, g: number, b: number): string {
+  return (
+    "#" +
+    [r, g, b]
+      .map((x) => {
+        const hex = Math.round(x).toString(16);
+        return hex.length === 1 ? "0" + hex : hex;
+      })
+      .join("")
+  );
+}
+
+/**
+ * 두 색상 사이의 보간
+ */
+function interpolateColor(
+  color1: string,
+  color2: string,
+  factor: number
+): string {
+  const rgb1 = hexToRgb(color1);
+  const rgb2 = hexToRgb(color2);
+
+  if (!rgb1 || !rgb2) return color1;
+
+  const r = rgb1.r + (rgb2.r - rgb1.r) * factor;
+  const g = rgb1.g + (rgb2.g - rgb1.g) * factor;
+  const b = rgb1.b + (rgb2.b - rgb1.b) * factor;
+
+  return rgbToHex(r, g, b);
+}
+
+// ==================== 조건부 서식 계산 ====================
+
+/**
+ * Color Scale 스타일 계산
+ */
+function applyColorScale(
+  value: number,
+  minValue: number,
+  maxValue: number,
+  rule: ConditionalFormatRule
+): CellFormatStyle {
+  if (!rule.colorScale) return {};
+
+  const { minColor, midColor, maxColor } = rule.colorScale;
+  const range = maxValue - minValue;
+
+  if (range === 0) {
+    return { backgroundColor: minColor };
+  }
+
+  const normalizedValue = (value - minValue) / range;
+
+  let backgroundColor: string;
+
+  if (midColor) {
+    // 3색 그라데이션
+    if (normalizedValue <= 0.5) {
+      backgroundColor = interpolateColor(minColor, midColor, normalizedValue * 2);
+    } else {
+      backgroundColor = interpolateColor(midColor, maxColor, (normalizedValue - 0.5) * 2);
+    }
+  } else {
+    // 2색 그라데이션
+    backgroundColor = interpolateColor(minColor, maxColor, normalizedValue);
+  }
+
+  // 배경색에 따른 텍스트 색상 결정
+  const rgb = hexToRgb(backgroundColor);
+  const textColor =
+    rgb && rgb.r * 0.299 + rgb.g * 0.587 + rgb.b * 0.114 > 186
+      ? "#000000"
+      : "#ffffff";
+
+  return { backgroundColor, textColor };
+}
+
+/**
+ * Data Bar 스타일 계산
+ */
+function applyDataBar(
+  value: number,
+  minValue: number,
+  maxValue: number,
+  rule: ConditionalFormatRule
+): CellFormatStyle {
+  if (!rule.dataBar) return {};
+
+  const { color, minValue: ruleMin, maxValue: ruleMax } = rule.dataBar;
+
+  const min = ruleMin ?? minValue;
+  const max = ruleMax ?? maxValue;
+  const range = max - min;
+
+  if (range === 0) {
+    return { dataBarWidth: 100, dataBarColor: color };
+  }
+
+  const width = Math.max(0, Math.min(100, ((value - min) / range) * 100));
+
+  return {
+    dataBarWidth: width,
+    dataBarColor: color,
+  };
+}
+
+/**
+ * Icon Set 스타일 계산
+ */
+function applyIconSet(
+  value: number,
+  minValue: number,
+  maxValue: number,
+  rule: ConditionalFormatRule
+): CellFormatStyle {
+  if (!rule.iconSet) return {};
+
+  const { type, thresholds, reverse } = rule.iconSet;
+  const range = maxValue - minValue;
+  const percentage = range === 0 ? 100 : ((value - minValue) / range) * 100;
+
+  // 아이콘 정의
+  const iconSets: Record<string, string[]> = {
+    arrows: ["↓", "→", "↑"],
+    traffic: ["🔴", "🟡", "🟢"],
+    rating: ["⭐", "⭐⭐", "⭐⭐⭐"],
+    flags: ["🚩", "🏳️", "🏁"],
+  };
+
+  const icons = iconSets[type] || iconSets.arrows;
+  const sortedIcons = reverse ? [...icons].reverse() : icons;
+
+  // 임계값에 따른 아이콘 선택
+  let iconIndex = 0;
+  for (let i = 0; i < thresholds.length; i++) {
+    if (percentage >= thresholds[i]) {
+      iconIndex = i + 1;
+    }
+  }
+  iconIndex = Math.min(iconIndex, sortedIcons.length - 1);
+
+  return {
+    icon: sortedIcons[iconIndex],
+  };
+}
+
+/**
+ * Cell Value 조건 스타일 계산
+ */
+function applyCellValue(
+  value: number,
+  rule: ConditionalFormatRule
+): CellFormatStyle {
+  if (!rule.cellValue) return {};
+
+  const { operator, value1, value2, backgroundColor, textColor, bold } =
+    rule.cellValue;
+
+  let matches = false;
+
+  switch (operator) {
+    case ">":
+      matches = value > value1;
+      break;
+    case ">=":
+      matches = value >= value1;
+      break;
+    case "<":
+      matches = value < value1;
+      break;
+    case "<=":
+      matches = value <= value1;
+      break;
+    case "=":
+      matches = value === value1;
+      break;
+    case "!=":
+      matches = value !== value1;
+      break;
+    case "between":
+      matches = value2 !== undefined && value >= value1 && value <= value2;
+      break;
+  }
+
+  if (!matches) return {};
+
+  return {
+    backgroundColor,
+    textColor,
+    fontWeight: bold ? "bold" : undefined,
+  };
+}
+
+// ==================== 메인 함수 ====================
+
+/**
+ * 조건부 서식 적용
+ */
+export function getConditionalStyle(
+  value: number | null | undefined,
+  field: string,
+  rules: ConditionalFormatRule[],
+  allValues: number[] // 해당 필드의 모든 값 (min/max 계산용)
+): CellFormatStyle {
+  if (value === null || value === undefined || isNaN(value)) {
+    return {};
+  }
+
+  if (!rules || rules.length === 0) {
+    return {};
+  }
+
+  // min/max 계산
+  const numericValues = allValues.filter((v) => !isNaN(v));
+  const minValue = Math.min(...numericValues);
+  const maxValue = Math.max(...numericValues);
+
+  let resultStyle: CellFormatStyle = {};
+
+  // 해당 필드에 적용되는 규칙 필터링 및 적용
+  for (const rule of rules) {
+    // 필드 필터 확인
+    if (rule.field && rule.field !== field) {
+      continue;
+    }
+
+    let ruleStyle: CellFormatStyle = {};
+
+    switch (rule.type) {
+      case "colorScale":
+        ruleStyle = applyColorScale(value, minValue, maxValue, rule);
+        break;
+      case "dataBar":
+        ruleStyle = applyDataBar(value, minValue, maxValue, rule);
+        break;
+      case "iconSet":
+        ruleStyle = applyIconSet(value, minValue, maxValue, rule);
+        break;
+      case "cellValue":
+        ruleStyle = applyCellValue(value, rule);
+        break;
+    }
+
+    // 스타일 병합 (나중 규칙이 우선)
+    resultStyle = { ...resultStyle, ...ruleStyle };
+  }
+
+  return resultStyle;
+}
+
+/**
+ * 조건부 서식 스타일을 React 스타일 객체로 변환
+ */
+export function formatStyleToReact(
+  style: CellFormatStyle
+): React.CSSProperties {
+  const result: React.CSSProperties = {};
+
+  if (style.backgroundColor) {
+    result.backgroundColor = style.backgroundColor;
+  }
+  if (style.textColor) {
+    result.color = style.textColor;
+  }
+  if (style.fontWeight) {
+    result.fontWeight = style.fontWeight as any;
+  }
+
+  return result;
+}
+
+export default getConditionalStyle;
+
diff --git a/frontend/lib/registry/components/pivot-grid/utils/exportExcel.ts b/frontend/lib/registry/components/pivot-grid/utils/exportExcel.ts
new file mode 100644
index 00000000..6069a3a5
--- /dev/null
+++ b/frontend/lib/registry/components/pivot-grid/utils/exportExcel.ts
@@ -0,0 +1,202 @@
+/**
+ * Excel 내보내기 유틸리티
+ * 피벗 테이블 데이터를 Excel 파일로 내보내기
+ * xlsx 라이브러리 사용 (브라우저 호환)
+ */
+
+import * as XLSX from "xlsx";
+import {
+  PivotResult,
+  PivotFieldConfig,
+  PivotTotalsConfig,
+} from "../types";
+import { pathToKey } from "./pivotEngine";
+
+// ==================== 타입 ====================
+
+export interface ExportOptions {
+  fileName?: string;
+  sheetName?: string;
+  title?: string;
+  subtitle?: string;
+  includeHeaders?: boolean;
+  includeTotals?: boolean;
+}
+
+// ==================== 메인 함수 ====================
+
+/**
+ * 피벗 데이터를 Excel로 내보내기
+ */
+export async function exportPivotToExcel(
+  pivotResult: PivotResult,
+  fields: PivotFieldConfig[],
+  totals: PivotTotalsConfig,
+  options: ExportOptions = {}
+): Promise<void> {
+  const {
+    fileName = "pivot_export",
+    sheetName = "Pivot",
+    title,
+    includeHeaders = true,
+    includeTotals = true,
+  } = options;
+
+  // 필드 분류
+  const rowFields = fields
+    .filter((f) => f.area === "row" && f.visible !== false)
+    .sort((a, b) => (a.areaIndex || 0) - (b.areaIndex || 0));
+
+  // 데이터 배열 생성
+  const data: any[][] = [];
+
+  // 제목 추가
+  if (title) {
+    data.push([title]);
+    data.push([]); // 빈 행
+  }
+
+  // 헤더 행
+  if (includeHeaders) {
+    const headerRow: any[] = [
+      rowFields.map((f) => f.caption).join(" / ") || "항목",
+    ];
+
+    // 열 헤더
+    for (const col of pivotResult.flatColumns) {
+      headerRow.push(col.caption || "(전체)");
+    }
+
+    // 총계 헤더
+    if (totals?.showRowGrandTotals && includeTotals) {
+      headerRow.push("총계");
+    }
+
+    data.push(headerRow);
+  }
+
+  // 데이터 행
+  for (const row of pivotResult.flatRows) {
+    const excelRow: any[] = [];
+
+    // 행 헤더 (들여쓰기 포함)
+    const indent = "  ".repeat(row.level);
+    excelRow.push(indent + row.caption);
+
+    // 데이터 셀
+    for (const col of pivotResult.flatColumns) {
+      const cellKey = `${pathToKey(row.path)}|||${pathToKey(col.path)}`;
+      const values = pivotResult.dataMatrix.get(cellKey);
+
+      if (values && values.length > 0) {
+        excelRow.push(values[0].value);
+      } else {
+        excelRow.push("");
+      }
+    }
+
+    // 행 총계
+    if (totals?.showRowGrandTotals && includeTotals) {
+      const rowTotal = pivotResult.grandTotals.row.get(pathToKey(row.path));
+      if (rowTotal && rowTotal.length > 0) {
+        excelRow.push(rowTotal[0].value);
+      } else {
+        excelRow.push("");
+      }
+    }
+
+    data.push(excelRow);
+  }
+
+  // 열 총계 행
+  if (totals?.showColumnGrandTotals && includeTotals) {
+    const totalRow: any[] = ["총계"];
+
+    for (const col of pivotResult.flatColumns) {
+      const colTotal = pivotResult.grandTotals.column.get(pathToKey(col.path));
+      if (colTotal && colTotal.length > 0) {
+        totalRow.push(colTotal[0].value);
+      } else {
+        totalRow.push("");
+      }
+    }
+
+    // 대총합
+    if (totals?.showRowGrandTotals) {
+      const grandTotal = pivotResult.grandTotals.grand;
+      if (grandTotal && grandTotal.length > 0) {
+        totalRow.push(grandTotal[0].value);
+      } else {
+        totalRow.push("");
+      }
+    }
+
+    data.push(totalRow);
+  }
+
+  // 워크시트 생성
+  const worksheet = XLSX.utils.aoa_to_sheet(data);
+
+  // 컬럼 너비 설정
+  const colWidths: XLSX.ColInfo[] = [];
+  const maxCols = data.reduce((max, row) => Math.max(max, row.length), 0);
+  for (let i = 0; i < maxCols; i++) {
+    colWidths.push({ wch: i === 0 ? 25 : 15 });
+  }
+  worksheet["!cols"] = colWidths;
+
+  // 워크북 생성
+  const workbook = XLSX.utils.book_new();
+  XLSX.utils.book_append_sheet(workbook, worksheet, sheetName);
+
+  // 파일 다운로드
+  XLSX.writeFile(workbook, `${fileName}.xlsx`);
+}
+
+/**
+ * Drill Down 데이터를 Excel로 내보내기
+ */
+export async function exportDrillDownToExcel(
+  data: any[],
+  columns: { field: string; caption: string }[],
+  options: ExportOptions = {}
+): Promise<void> {
+  const {
+    fileName = "drilldown_export",
+    sheetName = "Data",
+    title,
+  } = options;
+
+  // 데이터 배열 생성
+  const sheetData: any[][] = [];
+
+  // 제목
+  if (title) {
+    sheetData.push([title]);
+    sheetData.push([]); // 빈 행
+  }
+
+  // 헤더
+  const headerRow = columns.map((col) => col.caption);
+  sheetData.push(headerRow);
+
+  // 데이터
+  for (const row of data) {
+    const dataRow = columns.map((col) => row[col.field] ?? "");
+    sheetData.push(dataRow);
+  }
+
+  // 워크시트 생성
+  const worksheet = XLSX.utils.aoa_to_sheet(sheetData);
+
+  // 컬럼 너비 설정
+  const colWidths: XLSX.ColInfo[] = columns.map(() => ({ wch: 15 }));
+  worksheet["!cols"] = colWidths;
+
+  // 워크북 생성
+  const workbook = XLSX.utils.book_new();
+  XLSX.utils.book_append_sheet(workbook, worksheet, sheetName);
+
+  // 파일 다운로드
+  XLSX.writeFile(workbook, `${fileName}.xlsx`);
+}
diff --git a/frontend/lib/registry/components/pivot-grid/utils/index.ts b/frontend/lib/registry/components/pivot-grid/utils/index.ts
new file mode 100644
index 00000000..2c0a83d6
--- /dev/null
+++ b/frontend/lib/registry/components/pivot-grid/utils/index.ts
@@ -0,0 +1,6 @@
+export * from "./aggregation";
+export * from "./pivotEngine";
+export * from "./exportExcel";
+export * from "./conditionalFormat";
+
+
diff --git a/frontend/lib/registry/components/pivot-grid/utils/pivotEngine.ts b/frontend/lib/registry/components/pivot-grid/utils/pivotEngine.ts
new file mode 100644
index 00000000..4d3fecfd
--- /dev/null
+++ b/frontend/lib/registry/components/pivot-grid/utils/pivotEngine.ts
@@ -0,0 +1,812 @@
+/**
+ * PivotGrid 데이터 처리 엔진
+ * 원시 데이터를 피벗 구조로 변환합니다.
+ */
+
+import {
+  PivotFieldConfig,
+  PivotResult,
+  PivotHeaderNode,
+  PivotFlatRow,
+  PivotFlatColumn,
+  PivotCellValue,
+  DateGroupInterval,
+  AggregationType,
+  SummaryDisplayMode,
+} from "../types";
+import { aggregate, formatNumber, formatDate } from "./aggregation";
+
+// ==================== 헬퍼 함수 ====================
+
+/**
+ * 필드 값 추출 (날짜 그룹핑 포함)
+ */
+function getFieldValue(
+  row: Record<string, any>,
+  field: PivotFieldConfig
+): string {
+  const rawValue = row[field.field];
+
+  if (rawValue === null || rawValue === undefined) {
+    return "(빈 값)";
+  }
+
+  // 날짜 그룹핑 처리
+  if (field.groupInterval && field.dataType === "date") {
+    const date = new Date(rawValue);
+    if (isNaN(date.getTime())) return String(rawValue);
+
+    switch (field.groupInterval) {
+      case "year":
+        return String(date.getFullYear());
+      case "quarter":
+        return `Q${Math.ceil((date.getMonth() + 1) / 3)}`;
+      case "month":
+        return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}`;
+      case "week":
+        const weekNum = getWeekNumber(date);
+        return `${date.getFullYear()}-W${String(weekNum).padStart(2, "0")}`;
+      case "day":
+        return formatDate(date, "YYYY-MM-DD");
+      default:
+        return String(rawValue);
+    }
+  }
+
+  return String(rawValue);
+}
+
+/**
+ * 주차 계산
+ */
+function getWeekNumber(date: Date): number {
+  const d = new Date(
+    Date.UTC(date.getFullYear(), date.getMonth(), date.getDate())
+  );
+  const dayNum = d.getUTCDay() || 7;
+  d.setUTCDate(d.getUTCDate() + 4 - dayNum);
+  const yearStart = new Date(Date.UTC(d.getUTCFullYear(), 0, 1));
+  return Math.ceil(((d.getTime() - yearStart.getTime()) / 86400000 + 1) / 7);
+}
+
+/**
+ * 경로를 키로 변환
+ */
+export function pathToKey(path: string[]): string {
+  return path.join("||");
+}
+
+/**
+ * 키를 경로로 변환
+ */
+export function keyToPath(key: string): string[] {
+  return key.split("||");
+}
+
+// ==================== 헤더 생성 ====================
+
+/**
+ * 계층적 헤더 노드 생성
+ */
+function buildHeaderTree(
+  data: Record<string, any>[],
+  fields: PivotFieldConfig[],
+  expandedPaths: Set<string>
+): PivotHeaderNode[] {
+  if (fields.length === 0) return [];
+
+  // 첫 번째 필드로 그룹화
+  const firstField = fields[0];
+  const groups = new Map<string, Record<string, any>[]>();
+
+  data.forEach((row) => {
+    const value = getFieldValue(row, firstField);
+    if (!groups.has(value)) {
+      groups.set(value, []);
+    }
+    groups.get(value)!.push(row);
+  });
+
+  // 정렬
+  const sortedKeys = Array.from(groups.keys()).sort((a, b) => {
+    if (firstField.sortOrder === "desc") {
+      return b.localeCompare(a, "ko");
+    }
+    return a.localeCompare(b, "ko");
+  });
+
+  // 노드 생성
+  const nodes: PivotHeaderNode[] = [];
+  const remainingFields = fields.slice(1);
+
+  for (const key of sortedKeys) {
+    const groupData = groups.get(key)!;
+    const path = [key];
+    const pathKey = pathToKey(path);
+
+    const node: PivotHeaderNode = {
+      value: key,
+      caption: key,
+      level: 0,
+      isExpanded: expandedPaths.has(pathKey),
+      path: path,
+      span: 1,
+    };
+
+    // 자식 노드 생성 (확장된 경우만)
+    if (remainingFields.length > 0 && node.isExpanded) {
+      node.children = buildChildNodes(
+        groupData,
+        remainingFields,
+        path,
+        expandedPaths,
+        1
+      );
+      // span 계산
+      node.span = calculateSpan(node.children);
+    }
+
+    nodes.push(node);
+  }
+
+  return nodes;
+}
+
+/**
+ * 자식 노드 재귀 생성
+ */
+function buildChildNodes(
+  data: Record<string, any>[],
+  fields: PivotFieldConfig[],
+  parentPath: string[],
+  expandedPaths: Set<string>,
+  level: number
+): PivotHeaderNode[] {
+  if (fields.length === 0) return [];
+
+  const field = fields[0];
+  const groups = new Map<string, Record<string, any>[]>();
+
+  data.forEach((row) => {
+    const value = getFieldValue(row, field);
+    if (!groups.has(value)) {
+      groups.set(value, []);
+    }
+    groups.get(value)!.push(row);
+  });
+
+  const sortedKeys = Array.from(groups.keys()).sort((a, b) => {
+    if (field.sortOrder === "desc") {
+      return b.localeCompare(a, "ko");
+    }
+    return a.localeCompare(b, "ko");
+  });
+
+  const nodes: PivotHeaderNode[] = [];
+  const remainingFields = fields.slice(1);
+
+  for (const key of sortedKeys) {
+    const groupData = groups.get(key)!;
+    const path = [...parentPath, key];
+    const pathKey = pathToKey(path);
+
+    const node: PivotHeaderNode = {
+      value: key,
+      caption: key,
+      level: level,
+      isExpanded: expandedPaths.has(pathKey),
+      path: path,
+      span: 1,
+    };
+
+    if (remainingFields.length > 0 && node.isExpanded) {
+      node.children = buildChildNodes(
+        groupData,
+        remainingFields,
+        path,
+        expandedPaths,
+        level + 1
+      );
+      node.span = calculateSpan(node.children);
+    }
+
+    nodes.push(node);
+  }
+
+  return nodes;
+}
+
+/**
+ * span 계산 (colspan/rowspan)
+ */
+function calculateSpan(children?: PivotHeaderNode[]): number {
+  if (!children || children.length === 0) return 1;
+  return children.reduce((sum, child) => sum + child.span, 0);
+}
+
+// ==================== 플랫 구조 변환 ====================
+
+/**
+ * 헤더 트리를 플랫 행으로 변환
+ */
+function flattenRows(nodes: PivotHeaderNode[]): PivotFlatRow[] {
+  const result: PivotFlatRow[] = [];
+
+  function traverse(node: PivotHeaderNode) {
+    result.push({
+      path: node.path,
+      level: node.level,
+      caption: node.caption,
+      isExpanded: node.isExpanded,
+      hasChildren: !!(node.children && node.children.length > 0),
+    });
+
+    if (node.isExpanded && node.children) {
+      for (const child of node.children) {
+        traverse(child);
+      }
+    }
+  }
+
+  for (const node of nodes) {
+    traverse(node);
+  }
+
+  return result;
+}
+
+/**
+ * 헤더 트리를 플랫 열로 변환 (각 레벨별)
+ */
+function flattenColumns(
+  nodes: PivotHeaderNode[],
+  maxLevel: number
+): PivotFlatColumn[][] {
+  const levels: PivotFlatColumn[][] = Array.from(
+    { length: maxLevel + 1 },
+    () => []
+  );
+
+  function traverse(node: PivotHeaderNode, currentLevel: number) {
+    levels[currentLevel].push({
+      path: node.path,
+      level: currentLevel,
+      caption: node.caption,
+      span: node.span,
+    });
+
+    if (node.children && node.isExpanded) {
+      for (const child of node.children) {
+        traverse(child, currentLevel + 1);
+      }
+    } else if (currentLevel < maxLevel) {
+      // 확장되지 않은 노드는 다음 레벨들에서 span으로 처리
+      for (let i = currentLevel + 1; i <= maxLevel; i++) {
+        levels[i].push({
+          path: node.path,
+          level: i,
+          caption: "",
+          span: node.span,
+        });
+      }
+    }
+  }
+
+  for (const node of nodes) {
+    traverse(node, 0);
+  }
+
+  return levels;
+}
+
+/**
+ * 열 헤더의 최대 깊이 계산
+ */
+function getMaxColumnLevel(
+  nodes: PivotHeaderNode[],
+  totalFields: number
+): number {
+  let maxLevel = 0;
+
+  function traverse(node: PivotHeaderNode, level: number) {
+    maxLevel = Math.max(maxLevel, level);
+    if (node.children && node.isExpanded) {
+      for (const child of node.children) {
+        traverse(child, level + 1);
+      }
+    }
+  }
+
+  for (const node of nodes) {
+    traverse(node, 0);
+  }
+
+  return Math.min(maxLevel, totalFields - 1);
+}
+
+// ==================== 데이터 매트릭스 생성 ====================
+
+/**
+ * 데이터 매트릭스 생성
+ */
+function buildDataMatrix(
+  data: Record<string, any>[],
+  rowFields: PivotFieldConfig[],
+  columnFields: PivotFieldConfig[],
+  dataFields: PivotFieldConfig[],
+  flatRows: PivotFlatRow[],
+  flatColumnLeaves: string[][]
+): Map<string, PivotCellValue[]> {
+  const matrix = new Map<string, PivotCellValue[]>();
+
+  // 각 셀에 대해 해당하는 데이터 집계
+  for (const row of flatRows) {
+    for (const colPath of flatColumnLeaves) {
+      const cellKey = `${pathToKey(row.path)}|||${pathToKey(colPath)}`;
+
+      // 해당 행/열 경로에 맞는 데이터 필터링
+      const filteredData = data.filter((record) => {
+        // 행 조건 확인
+        for (let i = 0; i < row.path.length; i++) {
+          const field = rowFields[i];
+          if (!field) continue;
+          const value = getFieldValue(record, field);
+          if (value !== row.path[i]) return false;
+        }
+
+        // 열 조건 확인
+        for (let i = 0; i < colPath.length; i++) {
+          const field = columnFields[i];
+          if (!field) continue;
+          const value = getFieldValue(record, field);
+          if (value !== colPath[i]) return false;
+        }
+
+        return true;
+      });
+
+      // 데이터 필드별 집계
+      const cellValues: PivotCellValue[] = dataFields.map((dataField) => {
+        const values = filteredData.map((r) => r[dataField.field]);
+        const aggregatedValue = aggregate(
+          values,
+          dataField.summaryType || "sum"
+        );
+        const formattedValue = formatNumber(
+          aggregatedValue,
+          dataField.format
+        );
+
+        return {
+          field: dataField.field,
+          value: aggregatedValue,
+          formattedValue,
+        };
+      });
+
+      matrix.set(cellKey, cellValues);
+    }
+  }
+
+  return matrix;
+}
+
+/**
+ * 열 leaf 노드 경로 추출
+ */
+function getColumnLeaves(nodes: PivotHeaderNode[]): string[][] {
+  const leaves: string[][] = [];
+
+  function traverse(node: PivotHeaderNode) {
+    if (!node.isExpanded || !node.children || node.children.length === 0) {
+      leaves.push(node.path);
+    } else {
+      for (const child of node.children) {
+        traverse(child);
+      }
+    }
+  }
+
+  for (const node of nodes) {
+    traverse(node);
+  }
+
+  // 열 필드가 없을 경우 빈 경로 추가
+  if (leaves.length === 0) {
+    leaves.push([]);
+  }
+
+  return leaves;
+}
+
+// ==================== Summary Display Mode 적용 ====================
+
+/**
+ * Summary Display Mode에 따른 값 변환
+ */
+function applyDisplayMode(
+  value: number,
+  displayMode: SummaryDisplayMode | undefined,
+  rowTotal: number,
+  columnTotal: number,
+  grandTotal: number,
+  prevValue: number | null,
+  runningTotal: number,
+  format?: PivotFieldConfig["format"]
+): { value: number; formattedValue: string } {
+  if (!displayMode || displayMode === "absoluteValue") {
+    return {
+      value,
+      formattedValue: formatNumber(value, format),
+    };
+  }
+
+  let resultValue: number;
+  let formatOverride: PivotFieldConfig["format"] | undefined;
+
+  switch (displayMode) {
+    case "percentOfRowTotal":
+      resultValue = rowTotal === 0 ? 0 : (value / rowTotal) * 100;
+      formatOverride = { type: "percent", precision: 2, suffix: "%" };
+      break;
+
+    case "percentOfColumnTotal":
+      resultValue = columnTotal === 0 ? 0 : (value / columnTotal) * 100;
+      formatOverride = { type: "percent", precision: 2, suffix: "%" };
+      break;
+
+    case "percentOfGrandTotal":
+      resultValue = grandTotal === 0 ? 0 : (value / grandTotal) * 100;
+      formatOverride = { type: "percent", precision: 2, suffix: "%" };
+      break;
+
+    case "percentOfRowGrandTotal":
+      resultValue = rowTotal === 0 ? 0 : (value / rowTotal) * 100;
+      formatOverride = { type: "percent", precision: 2, suffix: "%" };
+      break;
+
+    case "percentOfColumnGrandTotal":
+      resultValue = columnTotal === 0 ? 0 : (value / columnTotal) * 100;
+      formatOverride = { type: "percent", precision: 2, suffix: "%" };
+      break;
+
+    case "runningTotalByRow":
+    case "runningTotalByColumn":
+      resultValue = runningTotal;
+      break;
+
+    case "differenceFromPrevious":
+      resultValue = prevValue === null ? 0 : value - prevValue;
+      break;
+
+    case "percentDifferenceFromPrevious":
+      resultValue = prevValue === null || prevValue === 0 
+        ? 0 
+        : ((value - prevValue) / Math.abs(prevValue)) * 100;
+      formatOverride = { type: "percent", precision: 2, suffix: "%" };
+      break;
+
+    default:
+      resultValue = value;
+  }
+
+  return {
+    value: resultValue,
+    formattedValue: formatNumber(resultValue, formatOverride || format),
+  };
+}
+
+/**
+ * 데이터 매트릭스에 Summary Display Mode 적용
+ */
+function applyDisplayModeToMatrix(
+  matrix: Map<string, PivotCellValue[]>,
+  dataFields: PivotFieldConfig[],
+  flatRows: PivotFlatRow[],
+  flatColumnLeaves: string[][],
+  rowTotals: Map<string, PivotCellValue[]>,
+  columnTotals: Map<string, PivotCellValue[]>,
+  grandTotals: PivotCellValue[]
+): Map<string, PivotCellValue[]> {
+  // displayMode가 있는 데이터 필드가 있는지 확인
+  const hasDisplayMode = dataFields.some(
+    (df) => df.summaryDisplayMode || df.showValuesAs
+  );
+  if (!hasDisplayMode) return matrix;
+
+  const newMatrix = new Map<string, PivotCellValue[]>();
+
+  // 누계를 위한 추적 (행별, 열별)
+  const rowRunningTotals: Map<string, number[]> = new Map(); // fieldIndex -> 누계
+  const colRunningTotals: Map<string, Map<number, number>> = new Map(); // colKey -> fieldIndex -> 누계
+
+  // 행 순서대로 처리
+  for (const row of flatRows) {
+    // 이전 열 값 추적 (차이 계산용)
+    const prevColValues: (number | null)[] = dataFields.map(() => null);
+    
+    for (let colIdx = 0; colIdx < flatColumnLeaves.length; colIdx++) {
+      const colPath = flatColumnLeaves[colIdx];
+      const cellKey = `${pathToKey(row.path)}|||${pathToKey(colPath)}`;
+      const values = matrix.get(cellKey);
+
+      if (!values) {
+        newMatrix.set(cellKey, []);
+        continue;
+      }
+
+      const rowKey = pathToKey(row.path);
+      const colKey = pathToKey(colPath);
+      
+      // 총합 가져오기
+      const rowTotal = rowTotals.get(rowKey);
+      const colTotal = columnTotals.get(colKey);
+
+      const newValues: PivotCellValue[] = values.map((val, fieldIdx) => {
+        const dataField = dataFields[fieldIdx];
+        const displayMode = dataField.summaryDisplayMode || dataField.showValuesAs;
+
+        if (!displayMode || displayMode === "absoluteValue") {
+          prevColValues[fieldIdx] = val.value;
+          return val;
+        }
+
+        // 누계 계산
+        // 행 방향 누계
+        if (!rowRunningTotals.has(rowKey)) {
+          rowRunningTotals.set(rowKey, dataFields.map(() => 0));
+        }
+        const rowRunning = rowRunningTotals.get(rowKey)!;
+        rowRunning[fieldIdx] += val.value || 0;
+
+        // 열 방향 누계
+        if (!colRunningTotals.has(colKey)) {
+          colRunningTotals.set(colKey, new Map());
+        }
+        const colRunning = colRunningTotals.get(colKey)!;
+        if (!colRunning.has(fieldIdx)) {
+          colRunning.set(fieldIdx, 0);
+        }
+        colRunning.set(fieldIdx, (colRunning.get(fieldIdx) || 0) + (val.value || 0));
+
+        const result = applyDisplayMode(
+          val.value || 0,
+          displayMode,
+          rowTotal?.[fieldIdx]?.value || 0,
+          colTotal?.[fieldIdx]?.value || 0,
+          grandTotals[fieldIdx]?.value || 0,
+          prevColValues[fieldIdx],
+          displayMode === "runningTotalByRow" 
+            ? rowRunning[fieldIdx] 
+            : colRunning.get(fieldIdx) || 0,
+          dataField.format
+        );
+
+        prevColValues[fieldIdx] = val.value;
+
+        return {
+          field: val.field,
+          value: result.value,
+          formattedValue: result.formattedValue,
+        };
+      });
+
+      newMatrix.set(cellKey, newValues);
+    }
+  }
+
+  return newMatrix;
+}
+
+// ==================== 총합계 계산 ====================
+
+/**
+ * 총합계 계산
+ */
+function calculateGrandTotals(
+  data: Record<string, any>[],
+  rowFields: PivotFieldConfig[],
+  columnFields: PivotFieldConfig[],
+  dataFields: PivotFieldConfig[],
+  flatRows: PivotFlatRow[],
+  flatColumnLeaves: string[][]
+): {
+  row: Map<string, PivotCellValue[]>;
+  column: Map<string, PivotCellValue[]>;
+  grand: PivotCellValue[];
+} {
+  const rowTotals = new Map<string, PivotCellValue[]>();
+  const columnTotals = new Map<string, PivotCellValue[]>();
+
+  // 행별 총합 (각 행의 모든 열 합계)
+  for (const row of flatRows) {
+    const filteredData = data.filter((record) => {
+      for (let i = 0; i < row.path.length; i++) {
+        const field = rowFields[i];
+        if (!field) continue;
+        const value = getFieldValue(record, field);
+        if (value !== row.path[i]) return false;
+      }
+      return true;
+    });
+
+    const cellValues: PivotCellValue[] = dataFields.map((dataField) => {
+      const values = filteredData.map((r) => r[dataField.field]);
+      const aggregatedValue = aggregate(values, dataField.summaryType || "sum");
+      return {
+        field: dataField.field,
+        value: aggregatedValue,
+        formattedValue: formatNumber(aggregatedValue, dataField.format),
+      };
+    });
+
+    rowTotals.set(pathToKey(row.path), cellValues);
+  }
+
+  // 열별 총합 (각 열의 모든 행 합계)
+  for (const colPath of flatColumnLeaves) {
+    const filteredData = data.filter((record) => {
+      for (let i = 0; i < colPath.length; i++) {
+        const field = columnFields[i];
+        if (!field) continue;
+        const value = getFieldValue(record, field);
+        if (value !== colPath[i]) return false;
+      }
+      return true;
+    });
+
+    const cellValues: PivotCellValue[] = dataFields.map((dataField) => {
+      const values = filteredData.map((r) => r[dataField.field]);
+      const aggregatedValue = aggregate(values, dataField.summaryType || "sum");
+      return {
+        field: dataField.field,
+        value: aggregatedValue,
+        formattedValue: formatNumber(aggregatedValue, dataField.format),
+      };
+    });
+
+    columnTotals.set(pathToKey(colPath), cellValues);
+  }
+
+  // 대총합
+  const grandValues: PivotCellValue[] = dataFields.map((dataField) => {
+    const values = data.map((r) => r[dataField.field]);
+    const aggregatedValue = aggregate(values, dataField.summaryType || "sum");
+    return {
+      field: dataField.field,
+      value: aggregatedValue,
+      formattedValue: formatNumber(aggregatedValue, dataField.format),
+    };
+  });
+
+  return {
+    row: rowTotals,
+    column: columnTotals,
+    grand: grandValues,
+  };
+}
+
+// ==================== 메인 함수 ====================
+
+/**
+ * 피벗 데이터 처리
+ */
+export function processPivotData(
+  data: Record<string, any>[],
+  fields: PivotFieldConfig[],
+  expandedRowPaths: string[][] = [],
+  expandedColumnPaths: string[][] = []
+): PivotResult {
+  // 영역별 필드 분리
+  const rowFields = fields
+    .filter((f) => f.area === "row" && f.visible !== false)
+    .sort((a, b) => (a.areaIndex || 0) - (b.areaIndex || 0));
+
+  const columnFields = fields
+    .filter((f) => f.area === "column" && f.visible !== false)
+    .sort((a, b) => (a.areaIndex || 0) - (b.areaIndex || 0));
+
+  const dataFields = fields
+    .filter((f) => f.area === "data" && f.visible !== false)
+    .sort((a, b) => (a.areaIndex || 0) - (b.areaIndex || 0));
+
+  const filterFields = fields.filter(
+    (f) => f.area === "filter" && f.visible !== false
+  );
+
+  // 필터 적용
+  let filteredData = data;
+  for (const filterField of filterFields) {
+    if (filterField.filterValues && filterField.filterValues.length > 0) {
+      filteredData = filteredData.filter((row) => {
+        const value = getFieldValue(row, filterField);
+        if (filterField.filterType === "exclude") {
+          return !filterField.filterValues!.includes(value);
+        }
+        return filterField.filterValues!.includes(value);
+      });
+    }
+  }
+
+  // 확장 경로 Set 변환
+  const expandedRowSet = new Set(expandedRowPaths.map(pathToKey));
+  const expandedColSet = new Set(expandedColumnPaths.map(pathToKey));
+
+  // 기본 확장: 첫 번째 레벨 모두 확장
+  if (expandedRowPaths.length === 0 && rowFields.length > 0) {
+    const firstField = rowFields[0];
+    const uniqueValues = new Set(
+      filteredData.map((row) => getFieldValue(row, firstField))
+    );
+    uniqueValues.forEach((val) => expandedRowSet.add(val));
+  }
+
+  if (expandedColumnPaths.length === 0 && columnFields.length > 0) {
+    const firstField = columnFields[0];
+    const uniqueValues = new Set(
+      filteredData.map((row) => getFieldValue(row, firstField))
+    );
+    uniqueValues.forEach((val) => expandedColSet.add(val));
+  }
+
+  // 헤더 트리 생성
+  const rowHeaders = buildHeaderTree(filteredData, rowFields, expandedRowSet);
+  const columnHeaders = buildHeaderTree(
+    filteredData,
+    columnFields,
+    expandedColSet
+  );
+
+  // 플랫 구조 변환
+  const flatRows = flattenRows(rowHeaders);
+  const flatColumnLeaves = getColumnLeaves(columnHeaders);
+  const maxColumnLevel = getMaxColumnLevel(columnHeaders, columnFields.length);
+  const flatColumns = flattenColumns(columnHeaders, maxColumnLevel);
+
+  // 데이터 매트릭스 생성
+  let dataMatrix = buildDataMatrix(
+    filteredData,
+    rowFields,
+    columnFields,
+    dataFields,
+    flatRows,
+    flatColumnLeaves
+  );
+
+  // 총합계 계산
+  const grandTotals = calculateGrandTotals(
+    filteredData,
+    rowFields,
+    columnFields,
+    dataFields,
+    flatRows,
+    flatColumnLeaves
+  );
+
+  // Summary Display Mode 적용
+  dataMatrix = applyDisplayModeToMatrix(
+    dataMatrix,
+    dataFields,
+    flatRows,
+    flatColumnLeaves,
+    grandTotals.row,
+    grandTotals.column,
+    grandTotals.grand
+  );
+
+  return {
+    rowHeaders,
+    columnHeaders,
+    dataMatrix,
+    flatRows,
+    flatColumns: flatColumnLeaves.map((path, idx) => ({
+      path,
+      level: path.length - 1,
+      caption: path[path.length - 1] || "",
+      span: 1,
+    })),
+    grandTotals,
+  };
+}
+
+
diff --git a/frontend/lib/registry/components/rack-structure/RackStructureComponent.tsx b/frontend/lib/registry/components/rack-structure/RackStructureComponent.tsx
index d80fd2c7..ea946531 100644
--- a/frontend/lib/registry/components/rack-structure/RackStructureComponent.tsx
+++ b/frontend/lib/registry/components/rack-structure/RackStructureComponent.tsx
@@ -5,21 +5,8 @@ import { Plus, X, Save, FolderOpen, RefreshCw, Eye, AlertCircle } from "lucide-r
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogFooter,
-} from "@/components/ui/dialog";
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import { Alert, AlertDescription } from "@/components/ui/alert";
 import { cn } from "@/lib/utils";
@@ -100,9 +87,9 @@ const ConditionCard: React.FC<ConditionCardProps> = ({
   const handleBlur = (field: keyof typeof localValues) => {
     const numValue = parseInt(localValues[field]) || 0;
     const clampedValue = Math.max(0, Math.min(numValue, field === "levels" ? maxLevels : maxRows));
-    
+
     setLocalValues((prev) => ({ ...prev, [field]: clampedValue.toString() }));
-    
+
     const updateField = field === "startRow" ? "startRow" : field === "endRow" ? "endRow" : "levels";
     onUpdate(condition.id, { [updateField]: clampedValue });
   };
@@ -113,10 +100,7 @@ const ConditionCard: React.FC<ConditionCardProps> = ({
       <div className="flex items-center justify-between rounded-t-lg bg-blue-600 px-4 py-2 text-white">
         <span className="font-medium">조건 {index + 1}</span>
         {!readonly && (
-          <button
-            onClick={() => onRemove(condition.id)}
-            className="rounded p-1 transition-colors hover:bg-blue-700"
-          >
+          <button onClick={() => onRemove(condition.id)} className="rounded p-1 transition-colors hover:bg-blue-700">
             <X className="h-4 w-4" />
           </button>
         )}
@@ -198,20 +182,18 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
   tableName,
 }) => {
   // 조건 목록
-  const [conditions, setConditions] = useState<RackLineCondition[]>(
-    config.initialConditions || []
-  );
-  
+  const [conditions, setConditions] = useState<RackLineCondition[]>(config.initialConditions || []);
+
   // 템플릿 관련 상태
   const [templates, setTemplates] = useState<RackStructureTemplate[]>([]);
   const [isTemplateDialogOpen, setIsTemplateDialogOpen] = useState(false);
   const [templateName, setTemplateName] = useState("");
   const [isSaveMode, setIsSaveMode] = useState(false);
-  
+
   // 미리보기 데이터
   const [previewData, setPreviewData] = useState<GeneratedLocation[]>([]);
   const [isPreviewGenerated, setIsPreviewGenerated] = useState(false);
-  
+
   // 기존 데이터 중복 체크 관련 상태
   const [existingLocations, setExistingLocations] = useState<ExistingLocation[]>([]);
   const [isCheckingDuplicates, setIsCheckingDuplicates] = useState(false);
@@ -270,19 +252,22 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
   }, [formData, fieldMapping]);
 
   // 카테고리 코드를 라벨로 변환하는 헬퍼 함수
-  const getCategoryLabel = useCallback((value: string | undefined): string | undefined => {
-    if (!value) return undefined;
-    if (isCategoryCode(value)) {
-      return categoryLabels[value] || value;
-    }
-    return value;
-  }, [categoryLabels]);
+  const getCategoryLabel = useCallback(
+    (value: string | undefined): string | undefined => {
+      if (!value) return undefined;
+      if (isCategoryCode(value)) {
+        return categoryLabels[value] || value;
+      }
+      return value;
+    },
+    [categoryLabels],
+  );
 
   // 필드 매핑을 통해 formData에서 컨텍스트 추출
   const context: RackStructureContext = useMemo(() => {
     // propContext가 있으면 우선 사용
     if (propContext) return propContext;
-    
+
     // formData와 fieldMapping을 사용하여 컨텍스트 생성
     if (!formData) return {};
 
@@ -292,12 +277,8 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
     const rawStatus = fieldMapping.statusField ? formData[fieldMapping.statusField] : undefined;
 
     const ctx = {
-      warehouseCode: fieldMapping.warehouseCodeField 
-        ? formData[fieldMapping.warehouseCodeField] 
-        : undefined,
-      warehouseName: fieldMapping.warehouseNameField 
-        ? formData[fieldMapping.warehouseNameField] 
-        : undefined,
+      warehouseCode: fieldMapping.warehouseCodeField ? formData[fieldMapping.warehouseCodeField] : undefined,
+      warehouseName: fieldMapping.warehouseNameField ? formData[fieldMapping.warehouseNameField] : undefined,
       // 카테고리 값은 라벨로 변환
       floor: getCategoryLabel(rawFloor?.toString()),
       zone: getCategoryLabel(rawZone),
@@ -332,26 +313,24 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
   // 조건 추가
   const addCondition = useCallback(() => {
     if (conditions.length >= maxConditions) return;
-    
+
     // 마지막 조건의 다음 열부터 시작
     const lastCondition = conditions[conditions.length - 1];
     const startRow = lastCondition ? lastCondition.endRow + 1 : 1;
-    
+
     const newCondition: RackLineCondition = {
       id: generateId(),
       startRow,
       endRow: startRow + 2,
       levels: 3,
     };
-    
+
     setConditions((prev) => [...prev, newCondition]);
   }, [conditions, maxConditions]);
 
   // 조건 업데이트
   const updateCondition = useCallback((id: string, updates: Partial<RackLineCondition>) => {
-    setConditions((prev) =>
-      prev.map((cond) => (cond.id === id ? { ...cond, ...updates } : cond))
-    );
+    setConditions((prev) => prev.map((cond) => (cond.id === id ? { ...cond, ...updates } : cond)));
   }, []);
 
   // 조건 삭제
@@ -362,26 +341,26 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
   // 열 범위 중복 검사
   const rowOverlapErrors = useMemo(() => {
     const errors: { conditionIndex: number; overlappingWith: number; overlappingRows: number[] }[] = [];
-    
+
     for (let i = 0; i < conditions.length; i++) {
       const cond1 = conditions[i];
       if (cond1.startRow <= 0 || cond1.endRow < cond1.startRow) continue;
-      
+
       for (let j = i + 1; j < conditions.length; j++) {
         const cond2 = conditions[j];
         if (cond2.startRow <= 0 || cond2.endRow < cond2.startRow) continue;
-        
+
         // 범위 겹침 확인
         const overlapStart = Math.max(cond1.startRow, cond2.startRow);
         const overlapEnd = Math.min(cond1.endRow, cond2.endRow);
-        
+
         if (overlapStart <= overlapEnd) {
           // 겹치는 열 목록
           const overlappingRows: number[] = [];
           for (let r = overlapStart; r <= overlapEnd; r++) {
             overlappingRows.push(r);
           }
-          
+
           errors.push({
             conditionIndex: i,
             overlappingWith: j,
@@ -390,7 +369,7 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
         }
       }
     }
-    
+
     return errors;
   }, [conditions]);
 
@@ -399,8 +378,8 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
 
   // 기존 데이터 조회를 위한 값 추출 (useMemo 객체 참조 문제 방지)
   const warehouseCodeForQuery = context.warehouseCode;
-  const floorForQuery = context.floor;  // 라벨 값 (예: "1층")
-  const zoneForQuery = context.zone;    // 라벨 값 (예: "A구역")
+  const floorForQuery = context.floor; // 라벨 값 (예: "1층")
+  const zoneForQuery = context.zone; // 라벨 값 (예: "A구역")
 
   // 기존 데이터 조회 (창고/층/구역이 변경될 때마다)
   useEffect(() => {
@@ -426,7 +405,7 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
         // DB에는 라벨 값으로 저장되어 있으므로 라벨 값으로 필터링
         // equals 연산자를 사용하여 정확한 일치 검색 (ILIKE가 아닌 = 연산자 사용)
         const searchParams = {
-          warehouse_id: { value: warehouseCodeForQuery, operator: "equals" },
+          warehouse_code: { value: warehouseCodeForQuery, operator: "equals" },
           floor: { value: floorForQuery, operator: "equals" },
           zone: { value: zoneForQuery, operator: "equals" },
         };
@@ -434,19 +413,19 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
 
         // 직접 apiClient 사용하여 정확한 형식으로 요청
         // 백엔드는 search를 객체로 받아서 각 필드를 WHERE 조건으로 처리
-        const response = await apiClient.post(`/table-management/tables/warehouse_location/data`, {
+        // autoFilter: true로 회사별 데이터 필터링 적용
+        const response = await apiClient.post("/table-management/tables/warehouse_location/data", {
           page: 1,
           size: 1000, // 충분히 큰 값
-          search: searchParams,  // 백엔드가 기대하는 형식 (equals 연산자로 정확한 일치)
+          search: searchParams, // 백엔드가 기대하는 형식 (equals 연산자로 정확한 일치)
+          autoFilter: true, // 회사별 데이터 필터링 (멀티테넌시)
         });
 
         console.log("🔍 기존 위치 데이터 응답:", response.data);
 
         // API 응답 구조: { success: true, data: { data: [...], total, ... } }
         const responseData = response.data?.data || response.data;
-        const dataArray = Array.isArray(responseData) 
-          ? responseData 
-          : (responseData?.data || []);
+        const dataArray = Array.isArray(responseData) ? responseData : responseData?.data || [];
 
         if (dataArray.length > 0) {
           const existing = dataArray.map((item: any) => ({
@@ -495,9 +474,7 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
     // 기존 데이터와 중복 체크
     const errors: { row: number; existingLevels: number[] }[] = [];
     plannedRows.forEach((levels, row) => {
-      const existingForRow = existingLocations.filter(
-        (loc) => parseInt(loc.row_num) === row
-      );
+      const existingForRow = existingLocations.filter((loc) => parseInt(loc.row_num) === row);
       if (existingForRow.length > 0) {
         const existingLevels = existingForRow.map((loc) => parseInt(loc.level_num));
         const duplicateLevels = levels.filter((l) => existingLevels.includes(l));
@@ -544,14 +521,14 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
 
       // 코드 생성 (예: WH001-1층D구역-01-1)
       const code = `${warehouseCode}-${floor}${zone}-${row.toString().padStart(2, "0")}-${level}`;
-      
+
       // 이름 생성 - zone에 이미 "구역"이 포함되어 있으면 그대로 사용
       const zoneName = zone.includes("구역") ? zone : `${zone}구역`;
       const name = `${zoneName}-${row.toString().padStart(2, "0")}열-${level}단`;
 
       return { code, name };
     },
-    [context]
+    [context],
   );
 
   // 미리보기 생성
@@ -572,20 +549,26 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
 
     // 열 범위 중복 검증
     if (hasRowOverlap) {
-      const overlapInfo = rowOverlapErrors.map((err) => {
-        const rows = err.overlappingRows.join(", ");
-        return `조건 ${err.conditionIndex + 1}과 조건 ${err.overlappingWith + 1}의 ${rows}열`;
-      }).join("\n");
+      const overlapInfo = rowOverlapErrors
+        .map((err) => {
+          const rows = err.overlappingRows.join(", ");
+          return `조건 ${err.conditionIndex + 1}과 조건 ${err.overlappingWith + 1}의 ${rows}열`;
+        })
+        .join("\n");
       alert(`열 범위가 중복됩니다:\n${overlapInfo}\n\n중복된 열을 수정해주세요.`);
       return;
     }
 
     // 기존 데이터와 중복 검증 - duplicateErrors 직접 체크
     if (duplicateErrors.length > 0) {
-      const duplicateInfo = duplicateErrors.map((err) => {
-        return `${err.row}열 ${err.existingLevels.join(", ")}단`;
-      }).join(", ");
-      alert(`이미 등록된 위치가 있습니다:\n${duplicateInfo}\n\n해당 열/단을 제외하고 등록하거나, 기존 데이터를 삭제해주세요.`);
+      const duplicateInfo = duplicateErrors
+        .map((err) => {
+          return `${err.row}열 ${err.existingLevels.join(", ")}단`;
+        })
+        .join(", ");
+      alert(
+        `이미 등록된 위치가 있습니다:\n${duplicateInfo}\n\n해당 열/단을 제외하고 등록하거나, 기존 데이터를 삭제해주세요.`,
+      );
       return;
     }
 
@@ -605,7 +588,7 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
               location_type: context?.locationType || "선반",
               status: context?.status || "사용",
               // 추가 필드 (테이블 컬럼명과 동일)
-              warehouse_id: context?.warehouseCode,
+              warehouse_code: context?.warehouseCode,
               warehouse_name: context?.warehouseName,
               floor: context?.floor,
               zone: context?.zone,
@@ -623,8 +606,30 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
 
     setPreviewData(locations);
     setIsPreviewGenerated(true);
+
+    console.log("🏗️ [RackStructure] 생성된 위치 데이터:", {
+      locationsCount: locations.length,
+      firstLocation: locations[0],
+      context: {
+        warehouseCode: context?.warehouseCode,
+        warehouseName: context?.warehouseName,
+        floor: context?.floor,
+        zone: context?.zone,
+      },
+    });
+
     onChange?.(locations);
-  }, [conditions, context, generateLocationCode, onChange, missingFields, hasRowOverlap, duplicateErrors, existingLocations, rowOverlapErrors]);
+  }, [
+    conditions,
+    context,
+    generateLocationCode,
+    onChange,
+    missingFields,
+    hasRowOverlap,
+    duplicateErrors,
+    existingLocations,
+    rowOverlapErrors,
+  ]);
 
   // 템플릿 저장
   const saveTemplate = useCallback(() => {
@@ -659,8 +664,7 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
       <Card>
         <CardHeader className="flex flex-row items-center justify-between pb-2">
           <CardTitle className="flex items-center gap-2 text-base">
-            <div className="h-4 w-1 rounded bg-gradient-to-b from-green-500 to-blue-500" />
-            렉 라인 구조 설정
+            <div className="h-4 w-1 rounded bg-gradient-to-b from-green-500 to-blue-500" />렉 라인 구조 설정
           </CardTitle>
           {!readonly && (
             <div className="flex items-center gap-2">
@@ -701,9 +705,7 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
               <AlertDescription>
                 다음 필드를 먼저 입력해주세요: <strong>{missingFields.join(", ")}</strong>
                 <br />
-                <span className="text-xs">
-                  (설정 패널에서 필드 매핑을 확인하세요)
-                </span>
+                <span className="text-xs">(설정 패널에서 필드 매핑을 확인하세요)</span>
               </AlertDescription>
             </Alert>
           )}
@@ -717,13 +719,12 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
                 <ul className="mt-1 list-inside list-disc text-xs">
                   {rowOverlapErrors.map((err, idx) => (
                     <li key={idx}>
-                      조건 {err.conditionIndex + 1}과 조건 {err.overlappingWith + 1}: {err.overlappingRows.join(", ")}열 중복
+                      조건 {err.conditionIndex + 1}과 조건 {err.overlappingWith + 1}: {err.overlappingRows.join(", ")}열
+                      중복
                     </li>
                   ))}
                 </ul>
-                <span className="mt-1 block text-xs">
-                  중복된 열 범위를 수정해주세요.
-                </span>
+                <span className="mt-1 block text-xs">중복된 열 범위를 수정해주세요.</span>
               </AlertDescription>
             </Alert>
           )}
@@ -741,9 +742,7 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
                     </li>
                   ))}
                 </ul>
-                <span className="mt-1 block text-xs">
-                  해당 열/단을 제외하거나 기존 데이터를 삭제해주세요.
-                </span>
+                <span className="mt-1 block text-xs">해당 열/단을 제외하거나 기존 데이터를 삭제해주세요.</span>
               </AlertDescription>
             </Alert>
           )}
@@ -752,9 +751,7 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
           {isCheckingDuplicates && (
             <Alert className="mb-4">
               <AlertCircle className="h-4 w-4 animate-spin" />
-              <AlertDescription>
-                기존 위치 데이터를 확인하는 중...
-              </AlertDescription>
+              <AlertDescription>기존 위치 데이터를 확인하는 중...</AlertDescription>
             </Alert>
           )}
 
@@ -778,14 +775,10 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
                 </span>
               )}
               {context.floor && (
-                <span className="rounded bg-green-100 px-2 py-1 text-xs text-green-800">
-                  층: {context.floor}
-                </span>
+                <span className="rounded bg-green-100 px-2 py-1 text-xs text-green-800">층: {context.floor}</span>
               )}
               {context.zone && (
-                <span className="rounded bg-purple-100 px-2 py-1 text-xs text-purple-800">
-                  구역: {context.zone}
-                </span>
+                <span className="rounded bg-purple-100 px-2 py-1 text-xs text-purple-800">구역: {context.zone}</span>
               )}
               {context.locationType && (
                 <span className="rounded bg-orange-100 px-2 py-1 text-xs text-orange-800">
@@ -793,9 +786,7 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
                 </span>
               )}
               {context.status && (
-                <span className="rounded bg-gray-200 px-2 py-1 text-xs text-gray-800">
-                  상태: {context.status}
-                </span>
+                <span className="rounded bg-gray-200 px-2 py-1 text-xs text-gray-800">상태: {context.status}</span>
               )}
             </div>
           )}
@@ -831,8 +822,7 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
               <p className="mb-4 text-gray-500">조건을 추가하여 렉 구조를 설정하세요</p>
               {!readonly && (
                 <Button onClick={addCondition} className="gap-1">
-                  <Plus className="h-4 w-4" />
-                  첫 번째 조건 추가
+                  <Plus className="h-4 w-4" />첫 번째 조건 추가
                 </Button>
               )}
             </div>
@@ -920,9 +910,7 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
                           <TableCell>{loc.location_name}</TableCell>
                           <TableCell className="text-center">{loc.floor || context?.floor || "1"}</TableCell>
                           <TableCell className="text-center">{loc.zone || context?.zone || "A"}</TableCell>
-                          <TableCell className="text-center">
-                            {loc.row_num.padStart(2, "0")}
-                          </TableCell>
+                          <TableCell className="text-center">{loc.row_num.padStart(2, "0")}</TableCell>
                           <TableCell className="text-center">{loc.level_num}</TableCell>
                           <TableCell className="text-center">{loc.location_type}</TableCell>
                           <TableCell className="text-center">-</TableCell>
@@ -946,9 +934,7 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
       <Dialog open={isTemplateDialogOpen} onOpenChange={setIsTemplateDialogOpen}>
         <DialogContent className="max-w-md">
           <DialogHeader>
-            <DialogTitle>
-              {isSaveMode ? "템플릿 저장" : "템플릿 관리"}
-            </DialogTitle>
+            <DialogTitle>{isSaveMode ? "템플릿 저장" : "템플릿 관리"}</DialogTitle>
           </DialogHeader>
 
           {isSaveMode ? (
@@ -974,11 +960,7 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
             <div className="space-y-4">
               {/* 저장 버튼 */}
               {conditions.length > 0 && (
-                <Button
-                  variant="outline"
-                  className="w-full gap-2"
-                  onClick={() => setIsSaveMode(true)}
-                >
+                <Button variant="outline" className="w-full gap-2" onClick={() => setIsSaveMode(true)}>
                   <Save className="h-4 w-4" />
                   현재 조건을 템플릿으로 저장
                 </Button>
@@ -996,23 +978,13 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
                       >
                         <div>
                           <div className="font-medium">{template.name}</div>
-                          <div className="text-xs text-gray-500">
-                            {template.conditions.length}개 조건
-                          </div>
+                          <div className="text-xs text-gray-500">{template.conditions.length}개 조건</div>
                         </div>
                         <div className="flex gap-2">
-                          <Button
-                            variant="outline"
-                            size="sm"
-                            onClick={() => loadTemplate(template)}
-                          >
+                          <Button variant="outline" size="sm" onClick={() => loadTemplate(template)}>
                             불러오기
                           </Button>
-                          <Button
-                            variant="ghost"
-                            size="sm"
-                            onClick={() => deleteTemplate(template.id)}
-                          >
+                          <Button variant="ghost" size="sm" onClick={() => deleteTemplate(template.id)}>
                             <X className="h-4 w-4" />
                           </Button>
                         </div>
@@ -1021,9 +993,7 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
                   </ScrollArea>
                 </div>
               ) : (
-                <div className="py-8 text-center text-gray-500">
-                  저장된 템플릿이 없습니다
-                </div>
+                <div className="py-8 text-center text-gray-500">저장된 템플릿이 없습니다</div>
               )}
             </div>
           )}
@@ -1041,5 +1011,3 @@ export const RackStructureWrapper: React.FC<RackStructureComponentProps> = (prop
     </div>
   );
 };
-
-
diff --git a/frontend/lib/registry/components/rack-structure/types.ts b/frontend/lib/registry/components/rack-structure/types.ts
index 5ab7bd7e..76214972 100644
--- a/frontend/lib/registry/components/rack-structure/types.ts
+++ b/frontend/lib/registry/components/rack-structure/types.ts
@@ -27,7 +27,7 @@ export interface GeneratedLocation {
   location_type?: string;    // 위치 유형
   status?: string;           // 사용 여부
   // 추가 필드 (상위 폼에서 매핑된 값)
-  warehouse_id?: string;     // 창고 ID/코드
+  warehouse_code?: string;   // 창고 코드 (DB 컬럼명과 동일)
   warehouse_name?: string;   // 창고명
   floor?: string;            // 층
   zone?: string;             // 구역
@@ -72,10 +72,15 @@ export interface RackStructureContext {
   warehouseId?: string;          // 창고 ID
   warehouseCode?: string;        // 창고 코드 (예: WH001)
   warehouseName?: string;        // 창고명 (예: 제1창고)
-  floor?: string;                // 층 (예: 1)
-  zone?: string;                 // 구역 (예: A)
-  locationType?: string;         // 위치 유형 (예: 선반)
-  status?: string;               // 사용 여부 (예: 사용)
+  floor?: string;                // 층 라벨 (예: 1층) - 화면 표시용
+  zone?: string;                 // 구역 라벨 (예: A구역) - 화면 표시용
+  locationType?: string;         // 위치 유형 라벨 (예: 선반)
+  status?: string;               // 사용 여부 라벨 (예: 사용)
+  // 카테고리 코드 (DB 저장/쿼리용)
+  floorCode?: string;            // 층 카테고리 코드 (예: CATEGORY_767659DCUF)
+  zoneCode?: string;             // 구역 카테고리 코드 (예: CATEGORY_82925656Q8)
+  locationTypeCode?: string;     // 위치 유형 카테고리 코드
+  statusCode?: string;           // 사용 여부 카테고리 코드
 }
 
 // 컴포넌트 Props
diff --git a/frontend/lib/registry/components/repeat-screen-modal/RepeatScreenModalRenderer.tsx b/frontend/lib/registry/components/repeat-screen-modal/RepeatScreenModalRenderer.tsx
index b43722d3..814e3545 100644
--- a/frontend/lib/registry/components/repeat-screen-modal/RepeatScreenModalRenderer.tsx
+++ b/frontend/lib/registry/components/repeat-screen-modal/RepeatScreenModalRenderer.tsx
@@ -6,7 +6,7 @@ import { RepeatScreenModalDefinition } from "./index";
 // 컴포넌트 자동 등록
 if (typeof window !== "undefined") {
   ComponentRegistry.registerComponent(RepeatScreenModalDefinition);
-  console.log("✅ RepeatScreenModal 컴포넌트 등록 완료");
+  // console.log("✅ RepeatScreenModal 컴포넌트 등록 완료");
 }
 
 export {};
diff --git a/frontend/lib/registry/components/repeater-field-group/RepeaterFieldGroupRenderer.tsx b/frontend/lib/registry/components/repeater-field-group/RepeaterFieldGroupRenderer.tsx
index c0327303..2aefb047 100644
--- a/frontend/lib/registry/components/repeater-field-group/RepeaterFieldGroupRenderer.tsx
+++ b/frontend/lib/registry/components/repeater-field-group/RepeaterFieldGroupRenderer.tsx
@@ -285,11 +285,14 @@ const RepeaterFieldGroupComponent: React.FC<ComponentRendererProps> = (props) =>
 
           // onChange 호출하여 부모에게 알림
           if (onChange && items.length > 0) {
+            // 🆕 RepeaterFieldGroup이 관리하는 필드 목록 추출
+            const repeaterFieldNames = (configRef.current.fields || []).map((f: any) => f.name);
             const dataWithMeta = items.map((item: any) => ({
               ...item,
               _targetTable: targetTable,
               _originalItemIds: itemIds, // 🆕 원본 ID 목록도 함께 전달
               _existingRecord: !!item.id, // 🆕 기존 레코드 플래그 (id가 있으면 기존 레코드)
+              _repeaterFields: repeaterFieldNames, // 🆕 품목 고유 필드 목록
             }));
             onChange(dataWithMeta);
           }
@@ -388,10 +391,13 @@ const RepeaterFieldGroupComponent: React.FC<ComponentRendererProps> = (props) =>
           // onChange 호출 (effectiveTargetTable 사용)
           if (onChange) {
             if (items.length > 0) {
+              // 🆕 RepeaterFieldGroup이 관리하는 필드 목록 추출
+              const repeaterFieldNames = (configRef.current.fields || []).map((f: any) => f.name);
               const dataWithMeta = items.map((item: any) => ({
                 ...item,
                 _targetTable: effectiveTargetTable,
                 _existingRecord: !!item.id,
+                _repeaterFields: repeaterFieldNames, // 🆕 품목 고유 필드 목록
               }));
               onChange(dataWithMeta);
             } else {
@@ -673,26 +679,25 @@ const RepeaterFieldGroupComponent: React.FC<ComponentRendererProps> = (props) =>
   // 🆕 RepeaterInput에서 항목 변경 시 SplitPanelContext의 addedItemIds 동기화
   const handleRepeaterChange = useCallback(
     (newValue: any[]) => {
-      // 🆕 분할 패널에서 우측인 경우, 새 항목에 FK 값과 targetTable 추가
-      let valueWithMeta = newValue;
+      // 🆕 RepeaterFieldGroup이 관리하는 필드 목록 추출
+      const repeaterFieldNames = (configRef.current.fields || []).map((f: any) => f.name);
+      
+      // 🆕 모든 항목에 메타데이터 추가
+      let valueWithMeta = newValue.map((item: any) => ({
+        ...item,
+        _targetTable: effectiveTargetTable || targetTable,
+        _existingRecord: !!item.id,
+        _repeaterFields: repeaterFieldNames, // 🆕 품목 고유 필드 목록
+      }));
 
-      if (isRightPanel && effectiveTargetTable) {
-        valueWithMeta = newValue.map((item: any) => {
-          const itemWithMeta = {
-            ...item,
-            _targetTable: effectiveTargetTable,
-          };
-
-          // 🆕 FK 값이 있고 새 항목이면 FK 컬럼에 값 추가
-          if (fkColumn && fkValue && item._isNewItem) {
-            itemWithMeta[fkColumn] = fkValue;
-            console.log("🔗 [RepeaterFieldGroup] 새 항목에 FK 값 추가:", {
-              fkColumn,
-              fkValue,
-            });
+      // 🆕 분할 패널에서 우측인 경우, FK 값 추가
+      if (isRightPanel && fkColumn && fkValue) {
+        valueWithMeta = valueWithMeta.map((item: any) => {
+          if (item._isNewItem) {
+            console.log("🔗 [RepeaterFieldGroup] 새 항목에 FK 값 추가:", { fkColumn, fkValue });
+            return { ...item, [fkColumn]: fkValue };
           }
-
-          return itemWithMeta;
+          return item;
         });
       }
 
@@ -754,6 +759,7 @@ const RepeaterFieldGroupComponent: React.FC<ComponentRendererProps> = (props) =>
       screenContext?.updateFormData,
       isRightPanel,
       effectiveTargetTable,
+      targetTable,
       fkColumn,
       fkValue,
       fieldName,
diff --git a/frontend/lib/registry/components/repeater-field-group/SubDataLookupPanel.tsx b/frontend/lib/registry/components/repeater-field-group/SubDataLookupPanel.tsx
new file mode 100644
index 00000000..5baf0fe0
--- /dev/null
+++ b/frontend/lib/registry/components/repeater-field-group/SubDataLookupPanel.tsx
@@ -0,0 +1,422 @@
+"use client";
+
+import React, { useMemo, useState } from "react";
+import { ChevronDown, ChevronUp, Loader2, AlertCircle, Check, Package, Search } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { cn } from "@/lib/utils";
+import { SubDataLookupConfig } from "@/types/repeater";
+import { useSubDataLookup } from "./useSubDataLookup";
+
+export interface SubDataLookupPanelProps {
+  config: SubDataLookupConfig;
+  linkValue: string | number | null; // 상위 항목의 연결 값 (예: item_code)
+  itemIndex: number; // 상위 항목 인덱스
+  onSelectionChange: (selectedItem: any | null, maxValue: number | null) => void;
+  disabled?: boolean;
+  className?: string;
+}
+
+/**
+ * 하위 데이터 조회 패널
+ * 품목 선택 시 재고/단가 등 관련 데이터를 표시하고 선택할 수 있는 패널
+ */
+export const SubDataLookupPanel: React.FC<SubDataLookupPanelProps> = ({
+  config,
+  linkValue,
+  itemIndex,
+  onSelectionChange,
+  disabled = false,
+  className,
+}) => {
+  const {
+    data,
+    isLoading,
+    error,
+    selectedItem,
+    setSelectedItem,
+    isInputEnabled,
+    maxValue,
+    isExpanded,
+    setIsExpanded,
+    refetch,
+    getSelectionSummary,
+  } = useSubDataLookup({
+    config,
+    linkValue,
+    itemIndex,
+    enabled: !disabled,
+  });
+
+  // 선택 핸들러
+  const handleSelect = (item: any) => {
+    if (disabled) return;
+
+    // 이미 선택된 항목이면 선택 해제
+    const newSelectedItem = selectedItem?.id === item.id ? null : item;
+    setSelectedItem(newSelectedItem);
+
+    // 최대값 계산
+    let newMaxValue: number | null = null;
+    if (newSelectedItem && config.conditionalInput.maxValueField) {
+      const val = newSelectedItem[config.conditionalInput.maxValueField];
+      newMaxValue = typeof val === "number" ? val : parseFloat(val) || null;
+    }
+
+    onSelectionChange(newSelectedItem, newMaxValue);
+  };
+
+  // 컬럼 라벨 가져오기
+  const getColumnLabel = (columnName: string): string => {
+    return config.lookup.columnLabels?.[columnName] || columnName;
+  };
+
+  // 표시할 컬럼 목록
+  const displayColumns = config.lookup.displayColumns || [];
+
+  // 요약 정보 표시용 선택 상태
+  const summaryText = useMemo(() => {
+    if (!selectedItem) return null;
+    return getSelectionSummary();
+  }, [selectedItem, getSelectionSummary]);
+
+  // linkValue가 없으면 렌더링하지 않음
+  if (!linkValue) {
+    return null;
+  }
+
+  // 인라인 모드 렌더링
+  if (config.ui?.expandMode === "inline" || !config.ui?.expandMode) {
+    return (
+      <div className={cn("w-full", className)}>
+        {/* 토글 버튼 및 요약 */}
+        <div className="flex items-center gap-2">
+          <Button
+            type="button"
+            variant="ghost"
+            size="sm"
+            onClick={() => {
+              const willExpand = !isExpanded;
+              setIsExpanded(willExpand);
+              if (willExpand) {
+                refetch(); // 펼칠 때 데이터 재조회
+              }
+            }}
+            disabled={disabled || isLoading}
+            className="h-7 gap-1 px-2 text-xs"
+          >
+            {isLoading ? (
+              <Loader2 className="h-3 w-3 animate-spin" />
+            ) : isExpanded ? (
+              <ChevronUp className="h-3 w-3" />
+            ) : (
+              <ChevronDown className="h-3 w-3" />
+            )}
+            <Package className="h-3 w-3" />
+            <span>재고 조회</span>
+            {data.length > 0 && <span className="text-muted-foreground">({data.length})</span>}
+          </Button>
+
+          {/* 선택 요약 표시 */}
+          {selectedItem && summaryText && (
+            <div className="flex items-center gap-1 text-xs">
+              <Check className="h-3 w-3 text-green-600" />
+              <span className="text-green-700">{summaryText}</span>
+            </div>
+          )}
+        </div>
+
+        {/* 확장된 패널 */}
+        {isExpanded && (
+          <div
+            className="mt-2 rounded-md border bg-gray-50"
+            style={{ maxHeight: config.ui?.maxHeight || "150px", overflowY: "auto" }}
+          >
+            {/* 에러 상태 */}
+            {error && (
+              <div className="flex items-center gap-2 p-3 text-xs text-red-600">
+                <AlertCircle className="h-4 w-4" />
+                <span>{error}</span>
+                <Button type="button" variant="ghost" size="sm" onClick={refetch} className="ml-auto h-6 text-xs">
+                  재시도
+                </Button>
+              </div>
+            )}
+
+            {/* 로딩 상태 */}
+            {isLoading && (
+              <div className="flex items-center justify-center gap-2 p-4 text-xs text-gray-500">
+                <Loader2 className="h-4 w-4 animate-spin" />
+                <span>조회 중...</span>
+              </div>
+            )}
+
+            {/* 데이터 없음 */}
+            {!isLoading && !error && data.length === 0 && (
+              <div className="p-4 text-center text-xs text-gray-500">
+                {config.ui?.emptyMessage || "재고 데이터가 없습니다"}
+              </div>
+            )}
+
+            {/* 데이터 테이블 */}
+            {!isLoading && !error && data.length > 0 && (
+              <table className="w-full text-xs">
+                <thead className="sticky top-0 bg-gray-100">
+                  <tr>
+                    <th className="w-8 p-2 text-center">선택</th>
+                    {displayColumns.map((col) => (
+                      <th key={col} className="p-2 text-left font-medium">
+                        {getColumnLabel(col)}
+                      </th>
+                    ))}
+                  </tr>
+                </thead>
+                <tbody>
+                  {data.map((item, idx) => {
+                    const isSelected = selectedItem?.id === item.id;
+                    return (
+                      <tr
+                        key={item.id || idx}
+                        onClick={() => handleSelect(item)}
+                        className={cn(
+                          "cursor-pointer border-t transition-colors",
+                          isSelected ? "bg-blue-50" : "hover:bg-gray-100",
+                          disabled && "cursor-not-allowed opacity-50",
+                        )}
+                      >
+                        <td className="p-2 text-center">
+                          <div
+                            className={cn(
+                              "mx-auto flex h-4 w-4 items-center justify-center rounded-full border",
+                              isSelected ? "border-blue-600 bg-blue-600" : "border-gray-300",
+                            )}
+                          >
+                            {isSelected && <Check className="h-3 w-3 text-white" />}
+                          </div>
+                        </td>
+                        {displayColumns.map((col) => (
+                          <td key={col} className="p-2">
+                            {item[col] ?? "-"}
+                          </td>
+                        ))}
+                      </tr>
+                    );
+                  })}
+                </tbody>
+              </table>
+            )}
+          </div>
+        )}
+
+        {/* 필수 선택 안내 */}
+        {!isInputEnabled && selectedItem && config.selection.requiredFields.length > 0 && (
+          <p className="mt-1 text-[10px] text-amber-600">
+            {config.selection.requiredFields.map((f) => getColumnLabel(f)).join(", ")}을(를) 선택해주세요
+          </p>
+        )}
+      </div>
+    );
+  }
+
+  // 모달 모드 렌더링
+  if (config.ui?.expandMode === "modal") {
+    return (
+      <div className={cn("w-full", className)}>
+        {/* 재고 조회 버튼 및 요약 */}
+        <div className="flex items-center gap-2">
+          <Button
+            type="button"
+            variant="outline"
+            size="sm"
+            onClick={() => {
+              setIsExpanded(true);
+              refetch(); // 모달 열 때 데이터 재조회
+            }}
+            disabled={disabled || isLoading}
+            className="h-7 gap-1 px-2 text-xs"
+          >
+            {isLoading ? (
+              <Loader2 className="h-3 w-3 animate-spin" />
+            ) : (
+              <Search className="h-3 w-3" />
+            )}
+            <Package className="h-3 w-3" />
+            <span>재고 조회</span>
+            {data.length > 0 && <span className="text-muted-foreground">({data.length})</span>}
+          </Button>
+
+          {/* 선택 요약 표시 */}
+          {selectedItem && summaryText && (
+            <div className="flex items-center gap-1 text-xs">
+              <Check className="h-3 w-3 text-green-600" />
+              <span className="text-green-700">{summaryText}</span>
+            </div>
+          )}
+        </div>
+
+        {/* 필수 선택 안내 */}
+        {!isInputEnabled && selectedItem && config.selection.requiredFields.length > 0 && (
+          <p className="mt-1 text-[10px] text-amber-600">
+            {config.selection.requiredFields.map((f) => getColumnLabel(f)).join(", ")}을(를) 선택해주세요
+          </p>
+        )}
+
+        {/* 모달 */}
+        <Dialog open={isExpanded} onOpenChange={setIsExpanded}>
+          <DialogContent className="max-w-[95vw] sm:max-w-[600px]">
+            <DialogHeader>
+              <DialogTitle className="text-base sm:text-lg">재고 현황</DialogTitle>
+              <DialogDescription className="text-xs sm:text-sm">
+                출고할 재고를 선택하세요. 창고/위치별 재고 수량을 확인할 수 있습니다.
+              </DialogDescription>
+            </DialogHeader>
+
+            <div
+              className="rounded-md border"
+              style={{ maxHeight: config.ui?.maxHeight || "300px", overflowY: "auto" }}
+            >
+              {/* 에러 상태 */}
+              {error && (
+                <div className="flex items-center gap-2 p-3 text-xs text-red-600">
+                  <AlertCircle className="h-4 w-4" />
+                  <span>{error}</span>
+                  <Button type="button" variant="ghost" size="sm" onClick={refetch} className="ml-auto h-6 text-xs">
+                    재시도
+                  </Button>
+                </div>
+              )}
+
+              {/* 로딩 상태 */}
+              {isLoading && (
+                <div className="flex items-center justify-center gap-2 p-8 text-sm text-gray-500">
+                  <Loader2 className="h-5 w-5 animate-spin" />
+                  <span>재고 조회 중...</span>
+                </div>
+              )}
+
+              {/* 데이터 없음 */}
+              {!isLoading && !error && data.length === 0 && (
+                <div className="p-8 text-center text-sm text-gray-500">
+                  {config.ui?.emptyMessage || "해당 품목의 재고가 없습니다"}
+                </div>
+              )}
+
+              {/* 데이터 테이블 */}
+              {!isLoading && !error && data.length > 0 && (
+                <table className="w-full text-sm">
+                  <thead className="sticky top-0 bg-gray-100">
+                    <tr>
+                      <th className="w-12 p-3 text-center">선택</th>
+                      {displayColumns.map((col) => (
+                        <th key={col} className="p-3 text-left font-medium">
+                          {getColumnLabel(col)}
+                        </th>
+                      ))}
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {data.map((item, idx) => {
+                      const isSelected = selectedItem?.id === item.id;
+                      return (
+                        <tr
+                          key={item.id || idx}
+                          onClick={() => handleSelect(item)}
+                          className={cn(
+                            "cursor-pointer border-t transition-colors",
+                            isSelected ? "bg-blue-50" : "hover:bg-gray-50",
+                            disabled && "cursor-not-allowed opacity-50",
+                          )}
+                        >
+                          <td className="p-3 text-center">
+                            <div
+                              className={cn(
+                                "mx-auto flex h-5 w-5 items-center justify-center rounded-full border-2",
+                                isSelected ? "border-blue-600 bg-blue-600" : "border-gray-300",
+                              )}
+                            >
+                              {isSelected && <Check className="h-3 w-3 text-white" />}
+                            </div>
+                          </td>
+                          {displayColumns.map((col) => (
+                            <td key={col} className="p-3">
+                              {item[col] ?? "-"}
+                            </td>
+                          ))}
+                        </tr>
+                      );
+                    })}
+                  </tbody>
+                </table>
+              )}
+            </div>
+
+            <DialogFooter className="gap-2 sm:gap-0">
+              <Button
+                variant="outline"
+                onClick={() => setIsExpanded(false)}
+                className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
+              >
+                닫기
+              </Button>
+              <Button
+                onClick={() => setIsExpanded(false)}
+                disabled={!selectedItem}
+                className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
+              >
+                선택 완료
+              </Button>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
+      </div>
+    );
+  }
+
+  // 기본값: inline 모드로 폴백 (설정이 없거나 알 수 없는 모드인 경우)
+  return (
+    <div className={cn("w-full", className)}>
+      <div className="flex items-center gap-2">
+        <Button
+          type="button"
+          variant="ghost"
+          size="sm"
+          onClick={() => {
+            const willExpand = !isExpanded;
+            setIsExpanded(willExpand);
+            if (willExpand) {
+              refetch(); // 펼칠 때 데이터 재조회
+            }
+          }}
+          disabled={disabled || isLoading}
+          className="h-7 gap-1 px-2 text-xs"
+        >
+          {isLoading ? (
+            <Loader2 className="h-3 w-3 animate-spin" />
+          ) : isExpanded ? (
+            <ChevronUp className="h-3 w-3" />
+          ) : (
+            <ChevronDown className="h-3 w-3" />
+          )}
+          <Package className="h-3 w-3" />
+          <span>재고 조회</span>
+          {data.length > 0 && <span className="text-muted-foreground">({data.length})</span>}
+        </Button>
+        {selectedItem && summaryText && (
+          <div className="flex items-center gap-1 text-xs">
+            <Check className="h-3 w-3 text-green-600" />
+            <span className="text-green-700">{summaryText}</span>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+SubDataLookupPanel.displayName = "SubDataLookupPanel";
diff --git a/frontend/lib/registry/components/repeater-field-group/useSubDataLookup.ts b/frontend/lib/registry/components/repeater-field-group/useSubDataLookup.ts
new file mode 100644
index 00000000..b2c44e3d
--- /dev/null
+++ b/frontend/lib/registry/components/repeater-field-group/useSubDataLookup.ts
@@ -0,0 +1,227 @@
+"use client";
+
+import { useState, useEffect, useCallback, useRef } from "react";
+import { apiClient } from "@/lib/api/client";
+import { SubDataLookupConfig, SubDataState } from "@/types/repeater";
+
+const LOG_PREFIX = {
+  INFO: "[SubDataLookup]",
+  DEBUG: "[SubDataLookup]",
+  WARN: "[SubDataLookup]",
+  ERROR: "[SubDataLookup]",
+};
+
+export interface UseSubDataLookupProps {
+  config: SubDataLookupConfig;
+  linkValue: string | number | null; // 상위 항목의 연결 값 (예: item_code)
+  itemIndex: number; // 상위 항목 인덱스
+  enabled?: boolean; // 기능 활성화 여부
+}
+
+export interface UseSubDataLookupReturn {
+  data: any[]; // 조회된 하위 데이터
+  isLoading: boolean; // 로딩 상태
+  error: string | null; // 에러 메시지
+  selectedItem: any | null; // 선택된 하위 항목
+  setSelectedItem: (item: any | null) => void; // 선택 항목 설정
+  isInputEnabled: boolean; // 조건부 입력 활성화 여부
+  maxValue: number | null; // 최대 입력 가능 값
+  isExpanded: boolean; // 확장 상태
+  setIsExpanded: (expanded: boolean) => void; // 확장 상태 설정
+  refetch: () => void; // 데이터 재조회
+  getSelectionSummary: () => string; // 선택 요약 텍스트
+}
+
+/**
+ * 하위 데이터 조회 훅
+ * 품목 선택 시 재고/단가 등 관련 데이터를 조회하고 관리
+ */
+export function useSubDataLookup(props: UseSubDataLookupProps): UseSubDataLookupReturn {
+  const { config, linkValue, itemIndex, enabled = true } = props;
+
+  // 상태
+  const [data, setData] = useState<any[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [selectedItem, setSelectedItem] = useState<any | null>(null);
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  // 이전 linkValue 추적 (중복 호출 방지)
+  const prevLinkValueRef = useRef<string | number | null>(null);
+
+  // 데이터 조회 함수
+  const fetchData = useCallback(async () => {
+    // 비활성화 또는 linkValue 없으면 스킵
+    if (!enabled || !config?.enabled || !linkValue) {
+      console.log(`${LOG_PREFIX.DEBUG} 조회 스킵:`, {
+        enabled,
+        configEnabled: config?.enabled,
+        linkValue,
+        itemIndex,
+      });
+      setData([]);
+      setSelectedItem(null);
+      return;
+    }
+
+    const { tableName, linkColumn, additionalFilters } = config.lookup;
+
+    if (!tableName || !linkColumn) {
+      console.warn(`${LOG_PREFIX.WARN} 필수 설정 누락:`, { tableName, linkColumn });
+      return;
+    }
+
+    console.log(`${LOG_PREFIX.INFO} 하위 데이터 조회 시작:`, {
+      tableName,
+      linkColumn,
+      linkValue,
+      itemIndex,
+    });
+
+    setIsLoading(true);
+    setError(null);
+
+    try {
+      // 검색 조건 구성 - 정확한 값 매칭을 위해 equals 연산자 사용
+      const searchCondition: Record<string, any> = {
+        [linkColumn]: { value: linkValue, operator: "equals" },
+        ...additionalFilters,
+      };
+
+      console.log(`${LOG_PREFIX.DEBUG} API 요청 조건:`, {
+        tableName,
+        linkColumn,
+        linkValue,
+        searchCondition,
+      });
+
+      const response = await apiClient.post(`/table-management/tables/${tableName}/data`, {
+        page: 1,
+        size: 100,
+        search: searchCondition,
+        autoFilter: { enabled: true },
+      });
+
+      if (response.data?.success) {
+        const items = response.data?.data?.data || response.data?.data || [];
+        console.log(`${LOG_PREFIX.DEBUG} API 응답:`, {
+          dataCount: items.length,
+          firstItem: items[0],
+          tableName,
+        });
+        setData(items);
+      } else {
+        console.warn(`${LOG_PREFIX.WARN} API 응답 실패:`, response.data);
+        setData([]);
+        setError("데이터 조회에 실패했습니다");
+      }
+    } catch (err: any) {
+      console.error(`${LOG_PREFIX.ERROR} 하위 데이터 조회 실패:`, {
+        error: err.message,
+        config,
+        linkValue,
+      });
+      setError(err.message || "데이터 조회 중 오류가 발생했습니다");
+      setData([]);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [enabled, config, linkValue, itemIndex]);
+
+  // linkValue 변경 시 데이터 조회
+  useEffect(() => {
+    // 같은 값이면 스킵
+    if (prevLinkValueRef.current === linkValue) {
+      return;
+    }
+    prevLinkValueRef.current = linkValue;
+
+    // linkValue가 없으면 초기화
+    if (!linkValue) {
+      setData([]);
+      setSelectedItem(null);
+      setIsExpanded(false);
+      return;
+    }
+
+    fetchData();
+  }, [linkValue, fetchData]);
+
+  // 조건부 입력 활성화 여부 계산
+  const isInputEnabled = useCallback((): boolean => {
+    if (!config?.enabled || !selectedItem) {
+      return false;
+    }
+
+    const { requiredFields, requiredMode = "all" } = config.selection;
+
+    if (!requiredFields || requiredFields.length === 0) {
+      // 필수 필드가 없으면 선택만 하면 활성화
+      return true;
+    }
+
+    // 선택된 항목에서 필수 필드 값 확인
+    if (requiredMode === "any") {
+      // 하나라도 있으면 OK
+      return requiredFields.some((field) => {
+        const value = selectedItem[field];
+        return value !== undefined && value !== null && value !== "";
+      });
+    } else {
+      // 모두 있어야 OK
+      return requiredFields.every((field) => {
+        const value = selectedItem[field];
+        return value !== undefined && value !== null && value !== "";
+      });
+    }
+  }, [config, selectedItem]);
+
+  // 최대값 계산
+  const getMaxValue = useCallback((): number | null => {
+    if (!config?.enabled || !selectedItem) {
+      return null;
+    }
+
+    const { maxValueField } = config.conditionalInput;
+    if (!maxValueField) {
+      return null;
+    }
+
+    const maxValue = selectedItem[maxValueField];
+    return typeof maxValue === "number" ? maxValue : parseFloat(maxValue) || null;
+  }, [config, selectedItem]);
+
+  // 선택 요약 텍스트 생성
+  const getSelectionSummary = useCallback((): string => {
+    if (!selectedItem) {
+      return "선택 안됨";
+    }
+
+    const { displayColumns, columnLabels } = config.lookup;
+    const parts: string[] = [];
+
+    displayColumns.forEach((col) => {
+      const value = selectedItem[col];
+      if (value !== undefined && value !== null && value !== "") {
+        const label = columnLabels?.[col] || col;
+        parts.push(`${label}: ${value}`);
+      }
+    });
+
+    return parts.length > 0 ? parts.join(", ") : "선택됨";
+  }, [selectedItem, config?.lookup]);
+
+  return {
+    data,
+    isLoading,
+    error,
+    selectedItem,
+    setSelectedItem,
+    isInputEnabled: isInputEnabled(),
+    maxValue: getMaxValue(),
+    isExpanded,
+    setIsExpanded,
+    refetch: fetchData,
+    getSelectionSummary,
+  };
+}
diff --git a/frontend/lib/registry/components/screen-split-panel/ScreenSplitPanelRenderer.tsx b/frontend/lib/registry/components/screen-split-panel/ScreenSplitPanelRenderer.tsx
index 5dc1830c..adeb9e20 100644
--- a/frontend/lib/registry/components/screen-split-panel/ScreenSplitPanelRenderer.tsx
+++ b/frontend/lib/registry/components/screen-split-panel/ScreenSplitPanelRenderer.tsx
@@ -66,7 +66,7 @@ class ScreenSplitPanelRenderer extends AutoRegisteringComponentRenderer {
   };
 
   render() {
-    const { component, style = {}, componentConfig, config, screenId, formData } = this.props as any;
+    const { component, style = {}, componentConfig, config, screenId, formData, groupedData } = this.props as any;
     
     // componentConfig 또는 config 또는 component.componentConfig 사용
     const finalConfig = componentConfig || config || component?.componentConfig || {};
@@ -77,6 +77,7 @@ class ScreenSplitPanelRenderer extends AutoRegisteringComponentRenderer {
           screenId={screenId || finalConfig.screenId} 
           config={finalConfig} 
           initialFormData={formData} // 🆕 수정 데이터 전달
+          groupedData={groupedData} // 🆕 그룹 데이터 전달 (수정 모드에서 원본 데이터 추적용)
         />
       </div>
     );
diff --git a/frontend/lib/registry/components/selected-items-detail-input/SelectedItemsDetailInputComponent.tsx b/frontend/lib/registry/components/selected-items-detail-input/SelectedItemsDetailInputComponent.tsx
index 925ca174..285c655d 100644
--- a/frontend/lib/registry/components/selected-items-detail-input/SelectedItemsDetailInputComponent.tsx
+++ b/frontend/lib/registry/components/selected-items-detail-input/SelectedItemsDetailInputComponent.tsx
@@ -42,6 +42,8 @@ export const SelectedItemsDetailInputComponent: React.FC<SelectedItemsDetailInpu
   screenId,
   ...props
 }) => {
+  // 🆕 groupedData 추출 (DynamicComponentRenderer에서 전달)
+  const groupedData = (props as any).groupedData || (props as any)._groupedData;
   // 🆕 URL 파라미터에서 dataSourceId 읽기
   const searchParams = useSearchParams();
   const urlDataSourceId = searchParams?.get("dataSourceId") || undefined;
@@ -225,24 +227,32 @@ export const SelectedItemsDetailInputComponent: React.FC<SelectedItemsDetailInpu
 
   // 🆕 모달 데이터를 ItemData 구조로 변환 (그룹별 구조)
   useEffect(() => {
-    // 🆕 수정 모드: formData에서 데이터 로드 (URL에 mode=edit이 있으면)
+    // 🆕 수정 모드: groupedData 또는 formData에서 데이터 로드 (URL에 mode=edit이 있으면)
     const urlParams = new URLSearchParams(window.location.search);
     const mode = urlParams.get("mode");
 
-    if (mode === "edit" && formData) {
+    // 🔧 데이터 소스 우선순위: groupedData > formData (배열) > formData (객체)
+    const sourceData = groupedData && Array.isArray(groupedData) && groupedData.length > 0
+      ? groupedData
+      : formData;
+
+    if (mode === "edit" && sourceData) {
       // 배열인지 단일 객체인지 확인
-      const isArray = Array.isArray(formData);
-      const dataArray = isArray ? formData : [formData];
+      const isArray = Array.isArray(sourceData);
+      const dataArray = isArray ? sourceData : [sourceData];
 
       if (dataArray.length === 0 || (dataArray.length === 1 && Object.keys(dataArray[0]).length === 0)) {
-        console.warn("⚠️ [SelectedItemsDetailInput] formData가 비어있음");
+        console.warn("⚠️ [SelectedItemsDetailInput] 데이터가 비어있음");
         return;
       }
 
       console.log(
         `📝 [SelectedItemsDetailInput] 수정 모드 - ${isArray ? "그룹 레코드" : "단일 레코드"} (${dataArray.length}개)`,
       );
-      console.log("📝 [SelectedItemsDetailInput] formData (JSON):", JSON.stringify(dataArray, null, 2));
+      console.log("📝 [SelectedItemsDetailInput] 데이터 소스:", {
+        fromGroupedData: groupedData && Array.isArray(groupedData) && groupedData.length > 0,
+        dataArray: JSON.stringify(dataArray, null, 2),
+      });
 
       const groups = componentConfig.fieldGroups || [];
       const additionalFields = componentConfig.additionalFields || [];
@@ -423,7 +433,7 @@ export const SelectedItemsDetailInputComponent: React.FC<SelectedItemsDetailInpu
       });
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [modalData, component.id, componentConfig.fieldGroups, formData]); // formData 의존성 추가
+  }, [modalData, component.id, componentConfig.fieldGroups, formData, groupedData]); // groupedData 의존성 추가
 
   // 🆕 Cartesian Product 생성 함수 (items에서 모든 그룹의 조합을 생성)
   const generateCartesianProduct = useCallback(
@@ -432,9 +442,54 @@ export const SelectedItemsDetailInputComponent: React.FC<SelectedItemsDetailInpu
       const groups = componentConfig.fieldGroups || [];
       const additionalFields = componentConfig.additionalFields || [];
 
-      itemsList.forEach((item) => {
+      itemsList.forEach((item, itemIndex) => {
         // 각 그룹의 엔트리 배열들을 준비
-        const groupEntriesArrays: GroupEntry[][] = groups.map((group) => item.fieldGroups[group.id] || []);
+        // 🔧 빈 엔트리 필터링: id만 있고 실제 필드 값이 없는 엔트리는 제외
+        const groupEntriesArrays: GroupEntry[][] = groups.map((group) => {
+          const entries = item.fieldGroups[group.id] || [];
+          const groupFields = additionalFields.filter((f) => f.groupId === group.id);
+          
+          // 실제 필드 값이 하나라도 있는 엔트리만 포함
+          return entries.filter((entry) => {
+            const hasAnyFieldValue = groupFields.some((field) => {
+              const value = entry[field.name];
+              return value !== undefined && value !== null && value !== "";
+            });
+            
+            if (!hasAnyFieldValue && Object.keys(entry).length <= 1) {
+              console.log("⏭️ [generateCartesianProduct] 빈 엔트리 필터링:", {
+                entryId: entry.id,
+                groupId: group.id,
+                entryKeys: Object.keys(entry),
+              });
+            }
+            
+            return hasAnyFieldValue;
+          });
+        });
+
+        // 🆕 모든 그룹이 비어있는지 확인
+        const allGroupsEmpty = groupEntriesArrays.every((arr) => arr.length === 0);
+
+        if (allGroupsEmpty) {
+          // 🔧 아이템이 1개뿐이면 기본 레코드 생성 (첫 저장 시)
+          // 아이템이 여러 개면 빈 아이템은 건너뛰기 (불필요한 NULL 레코드 방지)
+          if (itemsList.length === 1) {
+            console.log("📝 [generateCartesianProduct] 단일 아이템, 모든 그룹 비어있음 - 기본 레코드 생성", {
+              itemIndex,
+              itemId: item.id,
+            });
+            // 빈 객체를 추가하면 parentKeys와 합쳐져서 기본 레코드가 됨
+            allRecords.push({});
+          } else {
+            console.log("⏭️ [generateCartesianProduct] 다중 아이템 중 빈 아이템 - 건너뜀", {
+              itemIndex,
+              itemId: item.id,
+              totalItems: itemsList.length,
+            });
+          }
+          return;
+        }
 
         // Cartesian Product 재귀 함수
         const cartesian = (arrays: GroupEntry[][], currentIndex: number, currentCombination: Record<string, any>) => {
@@ -446,7 +501,8 @@ export const SelectedItemsDetailInputComponent: React.FC<SelectedItemsDetailInpu
 
           const currentGroupEntries = arrays[currentIndex];
           if (currentGroupEntries.length === 0) {
-            // 현재 그룹에 데이터가 없으면 빈 조합으로 다음 그룹 진행
+            // 🆕 현재 그룹에 데이터가 없으면 빈 조합으로 다음 그룹 진행
+            // (그룹이 비어있어도 다른 그룹의 데이터로 레코드 생성)
             cartesian(arrays, currentIndex + 1, currentCombination);
             return;
           }
@@ -455,6 +511,11 @@ export const SelectedItemsDetailInputComponent: React.FC<SelectedItemsDetailInpu
           currentGroupEntries.forEach((entry) => {
             const newCombination = { ...currentCombination };
 
+            // 🆕 기존 레코드의 id가 있으면 포함 (UPDATE를 위해)
+            if (entry.id) {
+              newCombination.id = entry.id;
+            }
+
             // 현재 그룹의 필드들을 조합에 추가
             const groupFields = additionalFields.filter((f) => f.groupId === groups[currentIndex].id);
             groupFields.forEach((field) => {
@@ -557,6 +618,27 @@ export const SelectedItemsDetailInputComponent: React.FC<SelectedItemsDetailInpu
 
           console.log("🔑 [SelectedItemsDetailInput] 부모 키:", parentKeys);
 
+          // 🔒 parentKeys 유효성 검증 - 빈 값이 있으면 저장 중단
+          const parentKeyValues = Object.values(parentKeys);
+          const hasEmptyParentKey = parentKeyValues.length === 0 || 
+            parentKeyValues.some(v => v === null || v === undefined || v === "");
+          
+          if (hasEmptyParentKey) {
+            console.error("❌ [SelectedItemsDetailInput] parentKeys가 비어있거나 유효하지 않습니다!", parentKeys);
+            window.dispatchEvent(
+              new CustomEvent("formSaveError", {
+                detail: { message: "부모 키 값이 비어있어 저장할 수 없습니다. 먼저 상위 데이터를 선택해주세요." },
+              }),
+            );
+
+            // 🔧 기본 저장 건너뛰기 - event.detail 객체 직접 수정
+            if (event instanceof CustomEvent && event.detail) {
+              (event.detail as any).skipDefaultSave = true;
+              console.log("🚫 [SelectedItemsDetailInput] skipDefaultSave = true (parentKeys 검증 실패)");
+            }
+            return;
+          }
+
           // items를 Cartesian Product로 변환
           const records = generateCartesianProduct(items);
 
@@ -575,24 +657,21 @@ export const SelectedItemsDetailInputComponent: React.FC<SelectedItemsDetailInpu
               }),
             );
 
-            // 🆕 기본 저장 건너뛰기
+            // 🔧 기본 저장 건너뛰기 - event.detail 객체 직접 수정
             if (event instanceof CustomEvent && event.detail) {
-              event.detail.skipDefaultSave = true;
+              (event.detail as any).skipDefaultSave = true;
+              console.log("🚫 [SelectedItemsDetailInput] skipDefaultSave = true (targetTable 없음)");
             }
             return;
           }
 
-          // 🆕 먼저 기본 저장 로직 건너뛰기 설정 (UPSERT 전에!)
-          if (event instanceof CustomEvent) {
-            if (!event.detail) {
-              console.warn("⚠️ [SelectedItemsDetailInput] event.detail이 없습니다! 새로 생성합니다.");
-              // @ts-ignore - detail 재정의
-              event.detail = {};
-            }
-            event.detail.skipDefaultSave = true;
-            console.log("🚫 [SelectedItemsDetailInput] skipDefaultSave = true (UPSERT 전)", event.detail);
+          // 🔧 먼저 기본 저장 로직 건너뛰기 설정 (UPSERT 전에!)
+          // buttonActions.ts에서 beforeSaveEventDetail 객체를 event.detail로 전달하므로 직접 수정 가능
+          if (event instanceof CustomEvent && event.detail) {
+            (event.detail as any).skipDefaultSave = true;
+            console.log("🚫 [SelectedItemsDetailInput] skipDefaultSave = true (UPSERT 처리)", event.detail);
           } else {
-            console.error("❌ [SelectedItemsDetailInput] event가 CustomEvent가 아닙니다!", event);
+            console.error("❌ [SelectedItemsDetailInput] event.detail이 없습니다! 기본 저장이 실행될 수 있습니다.", event);
           }
 
           console.log("🎯 [SelectedItemsDetailInput] targetTable:", componentConfig.targetTable);
diff --git a/frontend/lib/registry/components/split-panel-layout/SplitPanelLayoutComponent.tsx b/frontend/lib/registry/components/split-panel-layout/SplitPanelLayoutComponent.tsx
index cbc7ea4f..a84c90fd 100644
--- a/frontend/lib/registry/components/split-panel-layout/SplitPanelLayoutComponent.tsx
+++ b/frontend/lib/registry/components/split-panel-layout/SplitPanelLayoutComponent.tsx
@@ -32,11 +32,13 @@ import {
   DialogFooter,
   DialogDescription,
 } from "@/components/ui/dialog";
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { Label } from "@/components/ui/label";
 import { useTableOptions } from "@/contexts/TableOptionsContext";
 import { TableFilter, ColumnVisibility, GroupSumConfig } from "@/types/table-options";
 import { useAuth } from "@/hooks/useAuth";
 import { useSplitPanel } from "./SplitPanelContext";
+import { useScreenMultiLang } from "@/contexts/ScreenMultiLangContext";
 
 export interface SplitPanelLayoutComponentProps extends ComponentRendererProps {
   // 추가 props
@@ -57,6 +59,8 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
   const componentConfig = (component.componentConfig || {}) as SplitPanelLayoutConfig;
   // 🆕 프리뷰용 회사 코드 오버라이드 (최고 관리자만 사용 가능)
   const companyCode = (props as any).companyCode as string | undefined;
+  // 🌐 다국어 컨텍스트
+  const { getTranslatedText } = useScreenMultiLang();
 
   // 기본 설정값
   const splitRatio = componentConfig.splitRatio || 30;
@@ -137,6 +141,13 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
         if (item[underscoreKey] !== undefined) {
           return item[underscoreKey];
         }
+
+        // 6️⃣ 🆕 모든 키에서 _fieldName으로 끝나는 키 찾기
+        // 예: partner_id_customer_name (프론트엔드가 customer_id로 추론했지만 실제는 partner_id인 경우)
+        const matchingKey = Object.keys(item).find((key) => key.endsWith(`_${fieldName}`));
+        if (matchingKey && item[matchingKey] !== undefined) {
+          return item[matchingKey];
+        }
       }
 
       return undefined;
@@ -164,6 +175,11 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
   const [rightSearchQuery, setRightSearchQuery] = useState("");
   const [isLoadingLeft, setIsLoadingLeft] = useState(false);
   const [isLoadingRight, setIsLoadingRight] = useState(false);
+
+  // 🆕 추가 탭 관련 상태
+  const [activeTabIndex, setActiveTabIndex] = useState(0); // 0 = 기본 탭 (우측 패널), 1+ = 추가 탭
+  const [tabsData, setTabsData] = useState<Record<number, any[]>>({}); // 탭별 데이터 캐시
+  const [tabsLoading, setTabsLoading] = useState<Record<number, boolean>>({}); // 탭별 로딩 상태
   const [rightTableColumns, setRightTableColumns] = useState<any[]>([]); // 우측 테이블 컬럼 정보
   const [expandedItems, setExpandedItems] = useState<Set<any>>(new Set()); // 펼쳐진 항목들
   const [leftColumnLabels, setLeftColumnLabels] = useState<Record<string, string>>({}); // 좌측 컬럼 라벨
@@ -174,6 +190,10 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
   const [rightCategoryMappings, setRightCategoryMappings] = useState<
     Record<string, Record<string, { label: string; color?: string }>>
   >({}); // 우측 카테고리 매핑
+
+  // 카테고리 코드 라벨 캐시 (CATEGORY_* 코드 -> 라벨)
+  const [categoryCodeLabels, setCategoryCodeLabels] = useState<Record<string, string>>({});
+
   const { toast } = useToast();
 
   // 추가 모달 상태
@@ -207,12 +227,12 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
   const splitPanelId = `split-panel-${component.id}`;
 
   // 디버깅: Context 연결 상태 확인
-  console.log("🔗 [SplitPanelLayout] Context 연결 상태:", {
-    componentId: component.id,
-    splitPanelId,
-    hasRegisterFunc: typeof ctxRegisterSplitPanel === "function",
-    splitPanelsSize: splitPanelContext.splitPanels?.size ?? "없음",
-  });
+  // console.log("🔗 [SplitPanelLayout] Context 연결 상태:", {
+  //   componentId: component.id,
+  //   splitPanelId,
+  //   hasRegisterFunc: typeof ctxRegisterSplitPanel === "function",
+  //   splitPanelsSize: splitPanelContext.splitPanels?.size ?? "없음",
+  // });
 
   // Context에 분할 패널 등록 (좌표 정보 포함) - 마운트 시 1회만 실행
   const ctxRegisterRef = useRef(ctxRegisterSplitPanel);
@@ -237,15 +257,15 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
       isDragging: false,
     };
 
-    console.log("📦 [SplitPanelLayout] Context에 분할 패널 등록:", {
-      splitPanelId,
-      panelInfo,
-    });
+    // console.log("📦 [SplitPanelLayout] Context에 분할 패널 등록:", {
+    //   splitPanelId,
+    //   panelInfo,
+    // });
 
     ctxRegisterRef.current(splitPanelId, panelInfo);
 
     return () => {
-      console.log("📦 [SplitPanelLayout] Context에서 분할 패널 해제:", splitPanelId);
+      // console.log("📦 [SplitPanelLayout] Context에서 분할 패널 해제:", splitPanelId);
       ctxUnregisterRef.current(splitPanelId);
     };
     // 마운트/언마운트 시에만 실행, 위치/크기 변경은 별도 업데이트로 처리
@@ -313,11 +333,11 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
 
   // 🆕 그룹별 합산된 데이터 계산
   const summedLeftData = useMemo(() => {
-    console.log("🔍 [그룹합산] leftGroupSumConfig:", leftGroupSumConfig);
+    // console.log("🔍 [그룹합산] leftGroupSumConfig:", leftGroupSumConfig);
 
     // 그룹핑이 비활성화되었거나 그룹 기준 컬럼이 없으면 원본 데이터 반환
     if (!leftGroupSumConfig?.enabled || !leftGroupSumConfig?.groupByColumn) {
-      console.log("🔍 [그룹합산] 그룹핑 비활성화 - 원본 데이터 반환");
+      // console.log("🔍 [그룹합산] 그룹핑 비활성화 - 원본 데이터 반환");
       return leftData;
     }
 
@@ -605,6 +625,41 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
     return result;
   }, []);
 
+  // 🆕 간단한 값 포맷팅 함수 (추가 탭용)
+  const formatValue = useCallback(
+    (
+      value: any,
+      format?: {
+        type?: "number" | "currency" | "date" | "text";
+        thousandSeparator?: boolean;
+        decimalPlaces?: number;
+        prefix?: string;
+        suffix?: string;
+        dateFormat?: string;
+      },
+    ): 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);
+      }
+
+      return String(value);
+    },
+    [formatDateValue, formatNumberValue],
+  );
+
   // 셀 값 포맷팅 함수 (카테고리 타입 처리 + 날짜/숫자 포맷)
   const formatCellValue = useCallback(
     (
@@ -667,6 +722,14 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
         );
       }
 
+      // 🆕 카테고리 코드 패턴 감지 (CATEGORY_로 시작하는 값)
+      if (typeof value === "string" && value.startsWith("CATEGORY_")) {
+        const cachedLabel = categoryCodeLabels[value];
+        if (cachedLabel) {
+          return <span className="text-sm">{cachedLabel}</span>;
+        }
+      }
+
       // 🆕 자동 날짜 감지 (ISO 8601 형식 또는 Date 객체)
       if (typeof value === "string" && value.match(/^\d{4}-\d{2}-\d{2}(T|\s)/)) {
         return formatDateValue(value, "YYYY-MM-DD");
@@ -688,7 +751,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
       // 일반 값
       return String(value);
     },
-    [formatDateValue, formatNumberValue],
+    [formatDateValue, formatNumberValue, categoryCodeLabels],
   );
 
   // 좌측 데이터 로드
@@ -758,8 +821,8 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
         }
       });
 
-      console.log("🔗 [분할패널] additionalJoinColumns:", additionalJoinColumns);
-      console.log("🔗 [분할패널] configuredColumns:", configuredColumns);
+      // console.log("🔗 [분할패널] additionalJoinColumns:", additionalJoinColumns);
+      // console.log("🔗 [분할패널] configuredColumns:", configuredColumns);
 
       const result = await entityJoinApi.getTableDataWithJoins(leftTableName, {
         page: 1,
@@ -772,10 +835,10 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
       });
 
       // 🔍 디버깅: API 응답 데이터의 키 확인
-      if (result.data && result.data.length > 0) {
-        console.log("🔗 [분할패널] API 응답 첫 번째 데이터 키:", Object.keys(result.data[0]));
-        console.log("🔗 [분할패널] API 응답 첫 번째 데이터:", result.data[0]);
-      }
+      // if (result.data && result.data.length > 0) {
+      //   console.log("🔗 [분할패널] API 응답 첫 번째 데이터 키:", Object.keys(result.data[0]));
+      //   console.log("🔗 [분할패널] API 응답 첫 번째 데이터:", result.data[0]);
+      // }
 
       // 가나다순 정렬 (좌측 패널의 표시 컬럼 기준)
       const leftColumn = componentConfig.rightPanel?.relation?.leftColumn;
@@ -834,7 +897,8 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
             companyCodeOverride: companyCode, // 🆕 프리뷰용 회사 코드 오버라이드
           });
 
-          const detail = result.items && result.items.length > 0 ? result.items[0] : null;
+          // result.data가 EntityJoinResponse의 실제 배열 필드
+          const detail = result.data && result.data.length > 0 ? result.data[0] : null;
           setRightData(detail);
         } else if (relationshipType === "join") {
           // 조인 모드: 다른 테이블의 관련 데이터 (여러 개)
@@ -904,26 +968,68 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
             return;
           }
 
-          // 🆕 복합키 지원
-          if (keys && keys.length > 0 && leftTable) {
+          // 🆕 엔티티 관계 자동 감지 로직 개선
+          // 1. 설정된 keys가 있으면 사용
+          // 2. 없으면 테이블 타입관리에서 정의된 엔티티 관계를 자동으로 조회
+          let effectiveKeys = keys || [];
+
+          if (effectiveKeys.length === 0 && leftTable && rightTableName) {
+            // 엔티티 관계 자동 감지
+            console.log("🔍 [분할패널] 엔티티 관계 자동 감지 시작:", leftTable, "->", rightTableName);
+            const { tableManagementApi } = await import("@/lib/api/tableManagement");
+            const relResponse = await tableManagementApi.getTableEntityRelations(leftTable, rightTableName);
+
+            if (relResponse.success && relResponse.data?.relations && relResponse.data.relations.length > 0) {
+              effectiveKeys = relResponse.data.relations.map((rel) => ({
+                leftColumn: rel.leftColumn,
+                rightColumn: rel.rightColumn,
+              }));
+              console.log("✅ [분할패널] 자동 감지된 관계:", effectiveKeys);
+            }
+          }
+
+          if (effectiveKeys.length > 0 && leftTable) {
             // 복합키: 여러 조건으로 필터링
             const { entityJoinApi } = await import("@/lib/api/entityJoin");
 
-            // 복합키 조건 생성
+            // 복합키 조건 생성 (다중 값 지원)
+            // 🆕 항상 배열로 전달하여 백엔드에서 다중 값 컬럼 검색을 지원하도록 함
+            // 예: 좌측에서 "2"를 선택해도, 우측에서 "2,3"을 가진 행이 표시되도록
             const searchConditions: Record<string, any> = {};
-            keys.forEach((key) => {
+            effectiveKeys.forEach((key) => {
               if (key.leftColumn && key.rightColumn && leftItem[key.leftColumn] !== undefined) {
-                searchConditions[key.rightColumn] = leftItem[key.leftColumn];
+                const leftValue = leftItem[key.leftColumn];
+                // 다중 값 지원: 모든 값을 배열로 변환하여 다중 값 컬럼 검색 활성화
+                if (typeof leftValue === "string") {
+                  if (leftValue.includes(",")) {
+                    // "2,3" 형태면 분리해서 배열로
+                    const values = leftValue
+                      .split(",")
+                      .map((v: string) => v.trim())
+                      .filter((v: string) => v);
+                    searchConditions[key.rightColumn] = values;
+                    console.log("🔗 [분할패널] 다중 값 검색 (분리):", key.rightColumn, "=", values);
+                  } else {
+                    // 단일 값도 배열로 변환 (우측에 "2,3" 같은 다중 값이 있을 수 있으므로)
+                    searchConditions[key.rightColumn] = [leftValue.trim()];
+                    console.log("🔗 [분할패널] 다중 값 검색 (단일):", key.rightColumn, "=", [leftValue.trim()]);
+                  }
+                } else {
+                  // 숫자나 다른 타입은 배열로 감싸기
+                  searchConditions[key.rightColumn] = [leftValue];
+                  console.log("🔗 [분할패널] 다중 값 검색 (기타):", key.rightColumn, "=", [leftValue]);
+                }
               }
             });
 
             console.log("🔗 [분할패널] 복합키 조건:", searchConditions);
 
-            // 엔티티 조인 API로 데이터 조회
+            // 엔티티 조인 API로 데이터 조회 (🆕 deduplication 전달)
             const result = await entityJoinApi.getTableDataWithJoins(rightTableName, {
               search: searchConditions,
               enableEntityJoin: true,
               size: 1000,
+              deduplication: componentConfig.rightPanel?.deduplication, // 🆕 중복 제거 설정 전달
               companyCodeOverride: companyCode, // 🆕 프리뷰용 회사 코드 오버라이드
             });
 
@@ -932,10 +1038,14 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
             // 추가 dataFilter 적용
             let filteredData = result.data || [];
             const dataFilter = componentConfig.rightPanel?.dataFilter;
-            if (dataFilter?.enabled && dataFilter.conditions?.length > 0) {
+            // filters 또는 conditions 배열 지원 (DataFilterConfigPanel은 filters 사용)
+            const filterConditions = dataFilter?.filters || dataFilter?.conditions || [];
+            if (dataFilter?.enabled && filterConditions.length > 0) {
               filteredData = filteredData.filter((item: any) => {
-                return dataFilter.conditions.every((cond: any) => {
-                  const value = item[cond.column];
+                return filterConditions.every((cond: any) => {
+                  // columnName 또는 column 지원
+                  const columnName = cond.columnName || cond.column;
+                  const value = item[columnName];
                   const condValue = cond.value;
                   switch (cond.operator) {
                     case "equals":
@@ -944,6 +1054,12 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                       return value !== condValue;
                     case "contains":
                       return String(value).includes(String(condValue));
+                    case "is_null":
+                    case "NULL":
+                      return value === null || value === undefined || value === "";
+                    case "is_not_null":
+                    case "NOT NULL":
+                      return value !== null && value !== undefined && value !== "";
                     default:
                       return true;
                   }
@@ -953,7 +1069,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
 
             setRightData(filteredData);
           } else {
-            // 단일키 (하위 호환성)
+            // 단일키 (하위 호환성) 또는 관계를 찾지 못한 경우
             const leftColumn = componentConfig.rightPanel?.relation?.leftColumn;
             const rightColumn = componentConfig.rightPanel?.relation?.foreignKey;
 
@@ -971,6 +1087,9 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                 componentConfig.rightPanel?.deduplication, // 🆕 중복 제거 설정 전달
               );
               setRightData(joinedData || []); // 모든 관련 레코드 (배열)
+            } else {
+              console.warn("⚠️ [분할패널] 테이블 관계를 찾을 수 없습니다:", leftTable, "->", rightTableName);
+              setRightData([]);
             }
           }
         }
@@ -994,23 +1113,294 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
     ],
   );
 
+  // 🆕 카테고리 코드 라벨 로드 (rightData 변경 시)
+  useEffect(() => {
+    const loadCategoryCodeLabels = async () => {
+      if (!rightData) return;
+
+      const categoryCodes = new Set<string>();
+
+      // rightData가 배열인 경우 (조인 모드)
+      const dataArray = Array.isArray(rightData) ? rightData : [rightData];
+
+      dataArray.forEach((row: Record<string, any>) => {
+        if (row) {
+          Object.values(row).forEach((value) => {
+            if (typeof value === "string" && value.startsWith("CATEGORY_")) {
+              categoryCodes.add(value);
+            }
+          });
+        }
+      });
+
+      // 새로운 카테고리 코드만 필터링 (이미 캐시된 것 제외)
+      const newCodes = Array.from(categoryCodes).filter((code) => !categoryCodeLabels[code]);
+
+      if (newCodes.length > 0) {
+        try {
+          console.log("🏷️ [SplitPanel] 카테고리 코드 라벨 조회:", newCodes);
+          const response = await apiClient.post("/table-categories/labels-by-codes", { valueCodes: newCodes });
+          if (response.data.success && response.data.data) {
+            console.log("🏷️ [SplitPanel] 카테고리 라벨 조회 결과:", response.data.data);
+            setCategoryCodeLabels((prev) => ({
+              ...prev,
+              ...response.data.data,
+            }));
+          }
+        } catch (error) {
+          console.error("카테고리 라벨 조회 실패:", error);
+        }
+      }
+    };
+
+    loadCategoryCodeLabels();
+  }, [rightData]);
+
+  // 🆕 추가 탭 데이터 로딩 함수
+  const loadTabData = useCallback(
+    async (tabIndex: number, leftItem: any) => {
+      console.log(`📥 loadTabData 호출됨: tabIndex=${tabIndex}`, {
+        leftItem: leftItem ? Object.keys(leftItem) : null,
+        additionalTabs: componentConfig.rightPanel?.additionalTabs?.length,
+        isDesignMode,
+      });
+
+      const tabConfig = componentConfig.rightPanel?.additionalTabs?.[tabIndex - 1];
+
+      console.log("📥 tabConfig:", {
+        tabIndex,
+        configIndex: tabIndex - 1,
+        tabConfig: tabConfig
+          ? {
+              tableName: tabConfig.tableName,
+              relation: tabConfig.relation,
+              dataFilter: tabConfig.dataFilter,
+            }
+          : null,
+      });
+
+      if (!tabConfig || !leftItem || isDesignMode) {
+        console.log("⚠️ loadTabData 중단:", { hasTabConfig: !!tabConfig, hasLeftItem: !!leftItem, isDesignMode });
+        return;
+      }
+
+      const tabTableName = tabConfig.tableName;
+      if (!tabTableName) return;
+
+      setTabsLoading((prev) => ({ ...prev, [tabIndex]: true }));
+      try {
+        // 조인 키 확인
+        const keys = tabConfig.relation?.keys;
+        const leftColumn = tabConfig.relation?.leftColumn || keys?.[0]?.leftColumn;
+        const rightColumn = tabConfig.relation?.foreignKey || keys?.[0]?.rightColumn;
+
+        console.log(`🔑 [추가탭 ${tabIndex}] 조인 키 분석:`, {
+          hasRelation: !!tabConfig.relation,
+          keys,
+          leftColumn,
+          rightColumn,
+          willUseJoin: !!(leftColumn && rightColumn),
+        });
+
+        let resultData: any[] = [];
+
+        if (leftColumn && rightColumn) {
+          // 조인 조건이 있는 경우
+          const { entityJoinApi } = await import("@/lib/api/entityJoin");
+          const searchConditions: Record<string, any> = {};
+
+          if (keys && keys.length > 0) {
+            // 복합키
+            keys.forEach((key) => {
+              if (key.leftColumn && key.rightColumn && leftItem[key.leftColumn] !== undefined) {
+                // operator: "equals"를 추가하여 정확한 값 매칭 (entity 타입 컬럼에서 코드값으로 검색)
+                searchConditions[key.rightColumn] = {
+                  value: leftItem[key.leftColumn],
+                  operator: "equals",
+                };
+              }
+            });
+          } else {
+            // 단일키
+            const leftValue = leftItem[leftColumn];
+            if (leftValue !== undefined) {
+              // operator: "equals"를 추가하여 정확한 값 매칭 (entity 타입 컬럼에서 코드값으로 검색)
+              searchConditions[rightColumn] = {
+                value: leftValue,
+                operator: "equals",
+              };
+            }
+          }
+
+          console.log(`🔗 [추가탭 ${tabIndex}] 조회 조건:`, searchConditions);
+
+          const result = await entityJoinApi.getTableDataWithJoins(tabTableName, {
+            search: searchConditions,
+            enableEntityJoin: true,
+            size: 1000,
+          });
+
+          resultData = result.data || [];
+        } else {
+          // 조인 조건이 없는 경우: 전체 데이터 조회 (독립 탭)
+          console.log(`📋 [추가탭 ${tabIndex}] 조인 없이 전체 데이터 조회: ${tabTableName}`);
+          const { entityJoinApi } = await import("@/lib/api/entityJoin");
+          const result = await entityJoinApi.getTableDataWithJoins(tabTableName, {
+            enableEntityJoin: true,
+            size: 1000,
+          });
+          resultData = result.data || [];
+          console.log(`📋 [추가탭 ${tabIndex}] 전체 데이터 조회 결과:`, resultData.length);
+        }
+
+        // 데이터 필터 적용
+        const dataFilter = tabConfig.dataFilter;
+        // filters 또는 conditions 배열 지원 (DataFilterConfigPanel은 filters 사용)
+        const filterConditions = dataFilter?.filters || dataFilter?.conditions || [];
+
+        console.log(`🔍 [추가탭 ${tabIndex}] 필터 설정:`, {
+          enabled: dataFilter?.enabled,
+          filterConditions,
+          dataBeforeFilter: resultData.length,
+        });
+
+        if (dataFilter?.enabled && filterConditions.length > 0) {
+          const beforeCount = resultData.length;
+          resultData = resultData.filter((item: any) => {
+            return filterConditions.every((cond: any) => {
+              // columnName 또는 column 지원
+              const columnName = cond.columnName || cond.column;
+              const value = item[columnName];
+              const condValue = cond.value;
+
+              let result = true;
+              switch (cond.operator) {
+                case "equals":
+                  result = value === condValue;
+                  break;
+                case "notEquals":
+                  result = value !== condValue;
+                  break;
+                case "contains":
+                  result = String(value).includes(String(condValue));
+                  break;
+                case "is_null":
+                case "NULL":
+                  result = value === null || value === undefined || value === "";
+                  break;
+                case "is_not_null":
+                case "NOT NULL":
+                  result = value !== null && value !== undefined && value !== "";
+                  break;
+                default:
+                  result = true;
+              }
+
+              // 첫 5개 항목만 로그 출력
+              if (resultData.indexOf(item) < 5) {
+                console.log(`   필터 체크: ${columnName}=${value}, operator=${cond.operator}, result=${result}`);
+              }
+
+              return result;
+            });
+          });
+          console.log(`🔍 [추가탭 ${tabIndex}] 필터 적용 후: ${beforeCount} → ${resultData.length}`);
+        }
+
+        // 중복 제거 적용
+        const deduplication = tabConfig.deduplication;
+        if (deduplication?.enabled && deduplication.groupByColumn) {
+          const groupedMap = new Map<string, any>();
+          resultData.forEach((item) => {
+            const key = String(item[deduplication.groupByColumn] || "");
+            const existing = groupedMap.get(key);
+            if (!existing) {
+              groupedMap.set(key, item);
+            } else {
+              // keepStrategy에 따라 유지할 항목 결정
+              const sortCol = deduplication.sortColumn || "start_date";
+              const existingVal = existing[sortCol];
+              const newVal = item[sortCol];
+              if (deduplication.keepStrategy === "latest" && newVal > existingVal) {
+                groupedMap.set(key, item);
+              } else if (deduplication.keepStrategy === "earliest" && newVal < existingVal) {
+                groupedMap.set(key, item);
+              }
+            }
+          });
+          resultData = Array.from(groupedMap.values());
+        }
+
+        console.log(`🔗 [추가탭 ${tabIndex}] 결과 데이터:`, resultData.length);
+        setTabsData((prev) => ({ ...prev, [tabIndex]: resultData }));
+      } catch (error) {
+        console.error(`추가탭 ${tabIndex} 데이터 로드 실패:`, error);
+        toast({
+          title: "데이터 로드 실패",
+          description: "탭 데이터를 불러올 수 없습니다.",
+          variant: "destructive",
+        });
+      } finally {
+        setTabsLoading((prev) => ({ ...prev, [tabIndex]: false }));
+      }
+    },
+    [componentConfig.rightPanel?.additionalTabs, isDesignMode, toast],
+  );
+
   // 좌측 항목 선택 핸들러
   const handleLeftItemSelect = useCallback(
     (item: any) => {
       setSelectedLeftItem(item);
       setExpandedRightItems(new Set()); // 좌측 항목 변경 시 우측 확장 초기화
-      loadRightData(item);
+      setTabsData({}); // 모든 탭 데이터 초기화
+
+      // 현재 활성 탭에 따라 데이터 로드
+      if (activeTabIndex === 0) {
+        loadRightData(item);
+      } else {
+        loadTabData(activeTabIndex, item);
+      }
 
       // 🆕 modalDataStore에 선택된 좌측 항목 저장 (단일 선택)
       const leftTableName = componentConfig.leftPanel?.tableName;
       if (leftTableName && !isDesignMode) {
         import("@/stores/modalDataStore").then(({ useModalDataStore }) => {
           useModalDataStore.getState().setData(leftTableName, [item]);
-          console.log(`✅ 분할 패널 좌측 선택: ${leftTableName}`, item);
+          // console.log(`✅ 분할 패널 좌측 선택: ${leftTableName}`, item);
         });
       }
     },
-    [loadRightData, componentConfig.leftPanel?.tableName, isDesignMode],
+    [loadRightData, loadTabData, activeTabIndex, componentConfig.leftPanel?.tableName, isDesignMode],
+  );
+
+  // 🆕 탭 변경 핸들러
+  const handleTabChange = useCallback(
+    (newTabIndex: number) => {
+      console.log(`🔄 탭 변경: ${activeTabIndex} → ${newTabIndex}`, {
+        selectedLeftItem: !!selectedLeftItem,
+        tabsData: Object.keys(tabsData),
+        hasTabData: !!tabsData[newTabIndex],
+      });
+
+      setActiveTabIndex(newTabIndex);
+
+      // 선택된 좌측 항목이 있으면 해당 탭의 데이터 로드
+      if (selectedLeftItem) {
+        if (newTabIndex === 0) {
+          // 기본 탭: 우측 패널 데이터가 없으면 로드
+          if (!rightData || (Array.isArray(rightData) && rightData.length === 0)) {
+            loadRightData(selectedLeftItem);
+          }
+        } else {
+          // 추가 탭: 항상 새로 로드 (필터 설정 변경 반영을 위해)
+          console.log(`🔄 추가 탭 ${newTabIndex} 데이터 로드 (항상 새로고침)`);
+          loadTabData(newTabIndex, selectedLeftItem);
+        }
+      } else {
+        console.log("⚠️ 좌측 항목이 선택되지 않아 탭 데이터를 로드하지 않음");
+      }
+    },
+    [selectedLeftItem, rightData, tabsData, loadRightData, loadTabData, activeTabIndex],
   );
 
   // 우측 항목 확장/축소 토글
@@ -1204,7 +1594,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
           }
         });
         setLeftColumnLabels(labels);
-        console.log("✅ 좌측 컬럼 라벨 로드:", labels);
+        // console.log("✅ 좌측 컬럼 라벨 로드:", labels);
       } catch (error) {
         console.error("좌측 테이블 컬럼 라벨 로드 실패:", error);
       }
@@ -1233,7 +1623,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
           }
         });
         setRightColumnLabels(labels);
-        console.log("✅ 우측 컬럼 라벨 로드:", labels);
+        // console.log("✅ 우측 컬럼 라벨 로드:", labels);
       } catch (error) {
         console.error("우측 테이블 컬럼 정보 로드 실패:", error);
       }
@@ -1275,7 +1665,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                 };
               });
               mappings[columnName] = valueMap;
-              console.log(`✅ 좌측 카테고리 매핑 로드 [${columnName}]:`, valueMap);
+              // console.log(`✅ 좌측 카테고리 매핑 로드 [${columnName}]:`, valueMap);
             }
           } catch (error) {
             console.error(`좌측 카테고리 값 조회 실패 [${columnName}]:`, error);
@@ -1313,7 +1703,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
           }
         });
 
-        console.log("🔍 우측 패널 카테고리 로드 대상 테이블:", Array.from(tablesToLoad));
+        // console.log("🔍 우측 패널 카테고리 로드 대상 테이블:", Array.from(tablesToLoad));
 
         // 각 테이블에 대해 카테고리 매핑 로드
         for (const tableName of tablesToLoad) {
@@ -1406,36 +1796,22 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
 
   // 수정 버튼 핸들러
   const handleEditClick = useCallback(
-    (panel: "left" | "right", item: any) => {
+    async (panel: "left" | "right", item: any) => {
+      // 🆕 현재 활성 탭의 설정 가져오기
+      const currentTabConfig =
+        activeTabIndex === 0
+          ? componentConfig.rightPanel
+          : componentConfig.rightPanel?.additionalTabs?.[activeTabIndex - 1];
       // 🆕 우측 패널 수정 버튼 설정 확인
-      if (panel === "right" && componentConfig.rightPanel?.editButton?.mode === "modal") {
-        const modalScreenId = componentConfig.rightPanel?.editButton?.modalScreenId;
+      if (panel === "right" && currentTabConfig?.editButton?.mode === "modal") {
+        const modalScreenId = currentTabConfig?.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;
-          } else if (item.ID !== undefined && item.ID !== null) {
-            primaryKeyName = "ID";
-            primaryKeyValue = item.ID;
-          } else {
-            // 첫 번째 필드를 Primary Key로 간주
-            const firstKey = Object.keys(item)[0];
-            primaryKeyName = firstKey;
-            primaryKeyValue = item[firstKey];
-          }
+          const rightTableName = currentTabConfig?.tableName || "";
 
           console.log("✅ 수정 모달 열기:", {
             tableName: rightTableName,
-            primaryKeyName,
-            primaryKeyValue,
             screenId: modalScreenId,
             fullItem: item,
           });
@@ -1446,23 +1822,99 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
           });
 
           // 🆕 groupByColumns 추출
-          const groupByColumns = componentConfig.rightPanel?.editButton?.groupByColumns || [];
+          const groupByColumns = currentTabConfig?.editButton?.groupByColumns || [];
 
           console.log("🔧 [SplitPanel] 수정 버튼 클릭 - groupByColumns 확인:", {
             groupByColumns,
-            editButtonConfig: componentConfig.rightPanel?.editButton,
+            editButtonConfig: currentTabConfig?.editButton,
             hasGroupByColumns: groupByColumns.length > 0,
           });
 
-          // ScreenModal 열기 이벤트 발생 (URL 파라미터로 ID + groupByColumns 전달)
+          // 🆕 groupByColumns 기준으로 모든 관련 레코드 조회 (API 직접 호출)
+          let allRelatedRecords = [item]; // 기본값: 현재 아이템만
+
+          if (groupByColumns.length > 0) {
+            // groupByColumns 값으로 검색 조건 생성
+            const matchConditions: Record<string, any> = {};
+            groupByColumns.forEach((col: string) => {
+              if (item[col] !== undefined && item[col] !== null) {
+                matchConditions[col] = item[col];
+              }
+            });
+
+            console.log("🔍 [SplitPanel] 그룹 레코드 조회 시작:", {
+              테이블: rightTableName,
+              조건: matchConditions,
+            });
+
+            if (Object.keys(matchConditions).length > 0) {
+              // 🆕 deduplication 없이 원본 데이터 다시 조회 (API 직접 호출)
+              try {
+                const { entityJoinApi } = await import("@/lib/api/entityJoin");
+
+                // 🔧 dataFilter로 정확 매칭 조건 생성 (search는 LIKE 검색이라 부정확)
+                const exactMatchFilters = Object.entries(matchConditions).map(([key, value]) => ({
+                  id: `exact-${key}`,
+                  columnName: key,
+                  operator: "equals",
+                  value: value,
+                  valueType: "text",
+                }));
+
+                console.log("🔍 [SplitPanel] 정확 매칭 필터:", exactMatchFilters);
+
+                const result = await entityJoinApi.getTableDataWithJoins(rightTableName, {
+                  // search 대신 dataFilter 사용 (정확 매칭)
+                  dataFilter: {
+                    enabled: true,
+                    matchType: "all",
+                    filters: exactMatchFilters,
+                  },
+                  enableEntityJoin: true,
+                  size: 1000,
+                  // 🔧 명시적으로 deduplication 비활성화 (모든 레코드 가져오기)
+                  deduplication: { enabled: false, groupByColumn: "", keepStrategy: "latest" },
+                });
+
+                // 🔍 디버깅: API 응답 구조 확인
+                console.log("🔍 [SplitPanel] API 응답 전체:", result);
+                console.log("🔍 [SplitPanel] result.data:", result.data);
+                console.log("🔍 [SplitPanel] result 타입:", typeof result);
+
+                // result 자체가 배열일 수도 있음 (entityJoinApi 응답 구조에 따라)
+                const dataArray = Array.isArray(result) ? result : result.data || [];
+
+                if (dataArray.length > 0) {
+                  allRelatedRecords = dataArray;
+                  console.log("✅ [SplitPanel] 그룹 레코드 조회 완료:", {
+                    조건: matchConditions,
+                    결과수: allRelatedRecords.length,
+                    레코드들: allRelatedRecords.map((r: any) => ({
+                      id: r.id,
+                      supplier_item_code: r.supplier_item_code,
+                    })),
+                  });
+                } else {
+                  console.warn("⚠️ [SplitPanel] 그룹 레코드 조회 결과 없음, 현재 아이템만 사용");
+                }
+              } catch (error) {
+                console.error("❌ [SplitPanel] 그룹 레코드 조회 실패:", error);
+                allRelatedRecords = [item];
+              }
+            } else {
+              console.warn("⚠️ [SplitPanel] groupByColumns 값이 없음, 현재 아이템만 사용");
+            }
+          }
+
+          // 🔧 수정: URL 파라미터 대신 editData로 직접 전달
+          // 이렇게 하면 테이블의 Primary Key가 무엇이든 상관없이 데이터가 정확히 전달됨
           window.dispatchEvent(
             new CustomEvent("openScreenModal", {
               detail: {
                 screenId: modalScreenId,
+                editData: allRelatedRecords, // 🆕 모든 관련 레코드 전달 (배열)
                 urlParams: {
-                  mode: "edit",
-                  editId: primaryKeyValue,
-                  tableName: rightTableName,
+                  mode: "edit", // 🆕 수정 모드 표시
                   ...(groupByColumns.length > 0 && {
                     groupByColumns: JSON.stringify(groupByColumns),
                   }),
@@ -1471,10 +1923,10 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
             }),
           );
 
-          console.log("✅ [SplitPanel] openScreenModal 이벤트 발생:", {
+          console.log("✅ [SplitPanel] openScreenModal 이벤트 발생 (editData 직접 전달):", {
             screenId: modalScreenId,
-            editId: primaryKeyValue,
-            tableName: rightTableName,
+            editData: allRelatedRecords,
+            recordCount: allRelatedRecords.length,
             groupByColumns: groupByColumns.length > 0 ? JSON.stringify(groupByColumns) : "없음",
           });
 
@@ -1488,7 +1940,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
       setEditModalFormData({ ...item });
       setShowEditModal(true);
     },
-    [componentConfig],
+    [componentConfig, activeTabIndex],
   );
 
   // 수정 모달 저장
@@ -1588,13 +2040,18 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
 
   // 삭제 확인
   const handleDeleteConfirm = useCallback(async () => {
+    // 🆕 현재 활성 탭의 설정 가져오기
+    const currentTabConfig =
+      activeTabIndex === 0
+        ? componentConfig.rightPanel
+        : componentConfig.rightPanel?.additionalTabs?.[activeTabIndex - 1];
+
     // 우측 패널 삭제 시 중계 테이블 확인
-    let tableName =
-      deleteModalPanel === "left" ? componentConfig.leftPanel?.tableName : componentConfig.rightPanel?.tableName;
+    let tableName = deleteModalPanel === "left" ? componentConfig.leftPanel?.tableName : currentTabConfig?.tableName;
 
     // 우측 패널 + 중계 테이블 모드인 경우
-    if (deleteModalPanel === "right" && componentConfig.rightPanel?.addConfig?.targetTable) {
-      tableName = componentConfig.rightPanel.addConfig.targetTable;
+    if (deleteModalPanel === "right" && currentTabConfig?.addConfig?.targetTable) {
+      tableName = currentTabConfig.addConfig.targetTable;
       console.log("🔗 중계 테이블 모드: 삭제 대상 테이블 =", tableName);
     }
 
@@ -1619,47 +2076,89 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
     try {
       console.log("🗑️ 데이터 삭제:", { tableName, primaryKey });
 
-      // 🔍 중복 제거 설정 디버깅
-      console.log("🔍 중복 제거 디버깅:", {
+      // 🔍 그룹 삭제 설정 확인 (editButton.groupByColumns 또는 deduplication)
+      const groupByColumns = componentConfig.rightPanel?.editButton?.groupByColumns || [];
+      const deduplication = componentConfig.rightPanel?.dataFilter?.deduplication;
+
+      console.log("🔍 삭제 설정 디버깅:", {
         panel: deleteModalPanel,
-        dataFilter: componentConfig.rightPanel?.dataFilter,
-        deduplication: componentConfig.rightPanel?.dataFilter?.deduplication,
-        enabled: componentConfig.rightPanel?.dataFilter?.deduplication?.enabled,
+        groupByColumns,
+        deduplication,
+        deduplicationEnabled: deduplication?.enabled,
       });
 
       let result;
 
-      // 🔧 중복 제거가 활성화된 경우, groupByColumn 기준으로 모든 관련 레코드 삭제
-      if (deleteModalPanel === "right" && componentConfig.rightPanel?.dataFilter?.deduplication?.enabled) {
-        const deduplication = componentConfig.rightPanel.dataFilter.deduplication;
-        const groupByColumn = deduplication.groupByColumn;
+      // 🔧 우측 패널 삭제 시 그룹 삭제 조건 확인
+      if (deleteModalPanel === "right") {
+        // 1. groupByColumns가 설정된 경우 (패널 설정에서 선택된 컬럼들)
+        if (groupByColumns.length > 0) {
+          const filterConditions: Record<string, any> = {};
 
-        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];
+          // 선택된 컬럼들의 값을 필터 조건으로 추가
+          for (const col of groupByColumns) {
+            if (deleteModalItem[col] !== undefined && deleteModalItem[col] !== null) {
+              filterConditions[col] = deleteModalItem[col];
+            }
           }
 
-          console.log("🗑️ 그룹 삭제 조건:", filterConditions);
+          // 🔒 안전장치: 조인 모드에서 좌측 패널의 키 값도 필터 조건에 포함
+          // (다른 거래처의 같은 품목이 삭제되는 것을 방지)
+          if (selectedLeftItem && componentConfig.rightPanel?.mode === "join") {
+            const leftColumn = componentConfig.rightPanel.join?.leftColumn;
+            const rightColumn = componentConfig.rightPanel.join?.rightColumn;
+            if (leftColumn && rightColumn && selectedLeftItem[leftColumn]) {
+              // rightColumn이 filterConditions에 없으면 추가
+              if (!filterConditions[rightColumn]) {
+                filterConditions[rightColumn] = selectedLeftItem[leftColumn];
+                console.log(`🔒 안전장치: ${rightColumn} = ${selectedLeftItem[leftColumn]} 추가`);
+              }
+            }
+          }
 
-          // 그룹 삭제 API 호출
-          result = await dataApi.deleteGroupRecords(tableName, filterConditions);
-        } else {
-          // 단일 레코드 삭제
+          // 필터 조건이 있으면 그룹 삭제
+          if (Object.keys(filterConditions).length > 0) {
+            console.log(`🔗 그룹 삭제 (groupByColumns): ${groupByColumns.join(", ")} 기준`);
+            console.log("🗑️ 그룹 삭제 조건:", filterConditions);
+
+            result = await dataApi.deleteGroupRecords(tableName, filterConditions);
+          } else {
+            // 필터 조건이 없으면 단일 삭제
+            console.log("⚠️ groupByColumns 값이 없어 단일 삭제로 전환");
+            result = await dataApi.deleteRecord(tableName, primaryKey);
+          }
+        }
+        // 2. 중복 제거(deduplication)가 활성화된 경우
+        else if (deduplication?.enabled && deduplication?.groupByColumn) {
+          const groupByColumn = deduplication.groupByColumn;
+          const groupValue = deleteModalItem[groupByColumn];
+
+          if (groupValue) {
+            console.log(`🔗 중복 제거 활성화: ${groupByColumn} = ${groupValue} 기준으로 모든 레코드 삭제`);
+
+            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);
+            result = await dataApi.deleteGroupRecords(tableName, filterConditions);
+          } else {
+            result = await dataApi.deleteRecord(tableName, primaryKey);
+          }
+        }
+        // 3. 그 외: 단일 레코드 삭제
+        else {
           result = await dataApi.deleteRecord(tableName, primaryKey);
         }
       } else {
-        // 단일 레코드 삭제
+        // 좌측 패널: 단일 레코드 삭제
         result = await dataApi.deleteRecord(tableName, primaryKey);
       }
 
@@ -1682,7 +2181,12 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
             setRightData(null);
           }
         } else if (deleteModalPanel === "right" && selectedLeftItem) {
-          loadRightData(selectedLeftItem);
+          // 🆕 현재 활성 탭에 따라 새로고침
+          if (activeTabIndex === 0) {
+            loadRightData(selectedLeftItem);
+          } else {
+            loadTabData(activeTabIndex, selectedLeftItem);
+          }
         }
       } else {
         toast({
@@ -1706,7 +2210,17 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
         variant: "destructive",
       });
     }
-  }, [deleteModalPanel, componentConfig, deleteModalItem, toast, selectedLeftItem, loadLeftData, loadRightData]);
+  }, [
+    deleteModalPanel,
+    componentConfig,
+    deleteModalItem,
+    toast,
+    selectedLeftItem,
+    loadLeftData,
+    loadRightData,
+    activeTabIndex,
+    loadTabData,
+  ]);
 
   // 항목별 추가 버튼 핸들러 (좌측 항목의 + 버튼 - 하위 항목 추가)
   const handleItemAddClick = useCallback(
@@ -1946,7 +2460,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
   useEffect(() => {
     const handleRefreshTable = () => {
       if (!isDesignMode) {
-        console.log("🔄 [SplitPanel] refreshTable 이벤트 수신 - 데이터 새로고침");
+        // console.log("🔄 [SplitPanel] refreshTable 이벤트 수신 - 데이터 새로고침");
         loadLeftData();
         // 선택된 항목이 있으면 우측 패널도 새로고침
         if (selectedLeftItem) {
@@ -2048,7 +2562,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
           >
             <div className="flex w-full items-center justify-between">
               <CardTitle className="text-base font-semibold">
-                {componentConfig.leftPanel?.title || "좌측 패널"}
+                {getTranslatedText(componentConfig.leftPanel?.langKey, componentConfig.leftPanel?.title || "좌측 패널")}
               </CardTitle>
               {!isDesignMode && componentConfig.leftPanel?.showAdd && (
                 <Button size="sm" variant="outline" onClick={() => handleAddClick("left")}>
@@ -2082,9 +2596,9 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                     <table className="min-w-full divide-y divide-gray-200">
                       <thead className="bg-gray-50">
                         <tr>
-                          <th className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase">컬럼 1</th>
-                          <th className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase">컬럼 2</th>
-                          <th className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase">컬럼 3</th>
+                          <th className="px-3 py-2 text-left text-xs font-medium text-gray-500">컬럼 1</th>
+                          <th className="px-3 py-2 text-left text-xs font-medium text-gray-500">컬럼 2</th>
+                          <th className="px-3 py-2 text-left text-xs font-medium text-gray-500">컬럼 3</th>
                         </tr>
                       </thead>
                       <tbody className="divide-y divide-gray-200 bg-white">
@@ -2110,12 +2624,12 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                   (() => {
                     // 🆕 그룹별 합산된 데이터 사용
                     const dataSource = summedLeftData;
-                    console.log(
-                      "🔍 [테이블모드 렌더링] dataSource 개수:",
-                      dataSource.length,
-                      "leftGroupSumConfig:",
-                      leftGroupSumConfig,
-                    );
+                    // console.log(
+                    //   "🔍 [테이블모드 렌더링] dataSource 개수:",
+                    //   dataSource.length,
+                    //   "leftGroupSumConfig:",
+                    //   leftGroupSumConfig,
+                    // );
 
                     // 🔧 로컬 검색 필터 적용
                     const filteredData = leftSearchQuery
@@ -2133,10 +2647,12 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                       visibleLeftColumns.length > 0
                         ? visibleLeftColumns.map((col: any) => {
                             const colName = typeof col === "string" ? col : col.name || col.columnName;
+                            const originalLabel =
+                              leftColumnLabels[colName] || (typeof col === "object" ? col.label : null) || colName;
+                            const colLangKey = typeof col === "object" ? col.langKey : undefined;
                             return {
                               name: colName,
-                              label:
-                                leftColumnLabels[colName] || (typeof col === "object" ? col.label : null) || colName,
+                              label: colLangKey ? getTranslatedText(colLangKey, originalLabel) : originalLabel,
                               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, // 🆕 포맷 설정 포함
@@ -2168,7 +2684,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                                     {columnsToShow.map((col, idx) => (
                                       <th
                                         key={idx}
-                                        className="px-3 py-2 text-left text-xs font-medium tracking-wider text-gray-500 uppercase"
+                                        className="px-3 py-2 text-left text-xs font-medium tracking-wider text-gray-500"
                                         style={{
                                           width: col.width ? `${col.width}px` : "auto",
                                           textAlign: col.align || "left",
@@ -2229,7 +2745,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                               {columnsToShow.map((col, idx) => (
                                 <th
                                   key={idx}
-                                  className="px-3 py-2 text-left text-xs font-medium tracking-wider text-gray-500 uppercase"
+                                  className="px-3 py-2 text-left text-xs font-medium tracking-wider text-gray-500"
                                   style={{
                                     width: col.width ? `${col.width}px` : "auto",
                                     textAlign: col.align || "left",
@@ -2527,6 +3043,34 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
         className="flex flex-shrink-0 flex-col"
       >
         <Card className="flex flex-col border-0 shadow-none" style={{ height: "100%" }}>
+          {/* 🆕 탭 바 (추가 탭이 있을 때만 표시) */}
+          {(componentConfig.rightPanel?.additionalTabs?.length || 0) > 0 && (
+            <div className="flex-shrink-0 border-b">
+              <Tabs
+                value={String(activeTabIndex)}
+                onValueChange={(value) => handleTabChange(Number(value))}
+                className="w-full"
+              >
+                <TabsList className="h-9 w-full justify-start rounded-none border-b-0 bg-transparent p-0 px-2">
+                  <TabsTrigger
+                    value="0"
+                    className="data-[state=active]:border-primary h-8 rounded-none border-b-2 border-transparent px-4 data-[state=active]:bg-transparent data-[state=active]:shadow-none"
+                  >
+                    {componentConfig.rightPanel?.title || "기본"}
+                  </TabsTrigger>
+                  {componentConfig.rightPanel?.additionalTabs?.map((tab, index) => (
+                    <TabsTrigger
+                      key={tab.tabId}
+                      value={String(index + 1)}
+                      className="data-[state=active]:border-primary h-8 rounded-none border-b-2 border-transparent px-4 data-[state=active]:bg-transparent data-[state=active]:shadow-none"
+                    >
+                      {tab.label || `탭 ${index + 1}`}
+                    </TabsTrigger>
+                  ))}
+                </TabsList>
+              </Tabs>
+            </div>
+          )}
           <CardHeader
             className="flex-shrink-0 border-b"
             style={{
@@ -2539,16 +3083,34 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
           >
             <div className="flex w-full items-center justify-between">
               <CardTitle className="text-base font-semibold">
-                {componentConfig.rightPanel?.title || "우측 패널"}
+                {activeTabIndex === 0
+                  ? getTranslatedText(
+                      componentConfig.rightPanel?.langKey,
+                      componentConfig.rightPanel?.title || "우측 패널",
+                    )
+                  : getTranslatedText(
+                      componentConfig.rightPanel?.additionalTabs?.[activeTabIndex - 1]?.titleLangKey,
+                      componentConfig.rightPanel?.additionalTabs?.[activeTabIndex - 1]?.title ||
+                        componentConfig.rightPanel?.additionalTabs?.[activeTabIndex - 1]?.label ||
+                        "우측 패널",
+                    )}
               </CardTitle>
               {!isDesignMode && (
                 <div className="flex items-center gap-2">
-                  {componentConfig.rightPanel?.showAdd && (
-                    <Button size="sm" variant="outline" onClick={() => handleAddClick("right")}>
-                      <Plus className="mr-1 h-4 w-4" />
-                      추가
-                    </Button>
-                  )}
+                  {/* 현재 활성 탭에 따른 추가 버튼 */}
+                  {activeTabIndex === 0
+                    ? componentConfig.rightPanel?.showAdd && (
+                        <Button size="sm" variant="outline" onClick={() => handleAddClick("right")}>
+                          <Plus className="mr-1 h-4 w-4" />
+                          추가
+                        </Button>
+                      )
+                    : componentConfig.rightPanel?.additionalTabs?.[activeTabIndex - 1]?.showAdd && (
+                        <Button size="sm" variant="outline" onClick={() => handleAddClick("right")}>
+                          <Plus className="mr-1 h-4 w-4" />
+                          추가
+                        </Button>
+                      )}
                   {/* 우측 패널 수정/삭제는 각 카드에서 처리 */}
                 </div>
               )}
@@ -2568,347 +3130,203 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
             </div>
           )}
           <CardContent className="flex-1 overflow-auto p-4">
-            {/* 우측 데이터 */}
-            {isLoadingRight ? (
-              // 로딩 중
-              <div className="flex h-full items-center justify-center">
-                <div className="text-center">
-                  <Loader2 className="text-primary mx-auto h-8 w-8 animate-spin" />
-                  <p className="text-muted-foreground mt-2 text-sm">데이터를 불러오는 중...</p>
-                </div>
-              </div>
-            ) : rightData ? (
-              // 실제 데이터 표시
-              Array.isArray(rightData) ? (
-                // 조인 모드: 여러 데이터를 테이블/리스트로 표시
-                (() => {
-                  // 검색 필터링
-                  const filteredData = rightSearchQuery
-                    ? rightData.filter((item) => {
-                        const searchLower = rightSearchQuery.toLowerCase();
-                        return Object.entries(item).some(([key, value]) => {
-                          if (value === null || value === undefined) return false;
-                          return String(value).toLowerCase().includes(searchLower);
-                        });
-                      })
-                    : rightData;
+            {/* 🆕 추가 탭 데이터 렌더링 */}
+            {activeTabIndex > 0 ? (
+              // 추가 탭 컨텐츠
+              (() => {
+                const currentTabConfig = componentConfig.rightPanel?.additionalTabs?.[activeTabIndex - 1];
+                const currentTabData = tabsData[activeTabIndex] || [];
+                const isTabLoading = tabsLoading[activeTabIndex];
 
-                  // 테이블 모드 체크
-                  const isTableMode = componentConfig.rightPanel?.displayMode === "table";
+                if (isTabLoading) {
+                  return (
+                    <div className="flex h-full items-center justify-center">
+                      <div className="text-center">
+                        <Loader2 className="text-primary mx-auto h-8 w-8 animate-spin" />
+                        <p className="text-muted-foreground mt-2 text-sm">데이터를 불러오는 중...</p>
+                      </div>
+                    </div>
+                  );
+                }
 
-                  if (isTableMode) {
-                    // 테이블 모드 렌더링
-                    const displayColumns = componentConfig.rightPanel?.columns || [];
+                if (!selectedLeftItem) {
+                  return (
+                    <div className="flex h-full items-center justify-center">
+                      <p className="text-muted-foreground text-sm">좌측에서 항목을 선택하세요</p>
+                    </div>
+                  );
+                }
 
-                    // 🆕 그룹 합산 모드일 때: 복합키 컬럼을 우선 표시
-                    const relationKeys = componentConfig.rightPanel?.relation?.keys || [];
-                    const keyColumns = relationKeys.map((k: any) => k.leftColumn).filter(Boolean);
-                    const isGroupedMode = selectedLeftItem?._originalItems?.length > 0;
+                if (currentTabData.length === 0) {
+                  return (
+                    <div className="flex h-full items-center justify-center">
+                      <p className="text-muted-foreground text-sm">데이터가 없습니다</p>
+                    </div>
+                  );
+                }
 
-                    let columnsToShow: any[] = [];
+                // 탭 데이터 렌더링 (목록/테이블 모드)
+                const isTableMode = currentTabConfig?.displayMode === "table";
 
-                    if (displayColumns.length > 0) {
-                      // 설정된 컬럼 사용
-                      columnsToShow = displayColumns.map((col) => ({
-                        ...col,
-                        label: rightColumnLabels[col.name] || col.label || col.name,
-                        format: col.format,
-                      }));
+                if (isTableMode) {
+                  // 테이블 모드
+                  const displayColumns = currentTabConfig?.columns || [];
+                  const columnsToShow =
+                    displayColumns.length > 0
+                      ? displayColumns.map((col) => ({
+                          ...col,
+                          label: col.label || col.name,
+                        }))
+                      : Object.keys(currentTabData[0] || {})
+                          .filter(shouldShowField)
+                          .slice(0, 8)
+                          .map((key) => ({ name: key, label: key }));
 
-                      // 🆕 그룹 합산 모드이고, 키 컬럼이 표시 목록에 없으면 맨 앞에 추가
-                      if (isGroupedMode && keyColumns.length > 0) {
-                        const existingColNames = columnsToShow.map((c) => c.name);
-                        const missingKeyColumns = keyColumns.filter((k: string) => !existingColNames.includes(k));
-
-                        if (missingKeyColumns.length > 0) {
-                          const keyColsToAdd = missingKeyColumns.map((colName: string) => ({
-                            name: colName,
-                            label: rightColumnLabels[colName] || colName,
-                            width: 120,
-                            align: "left" as const,
-                            format: undefined,
-                            _isKeyColumn: true, // 구분용 플래그
-                          }));
-                          columnsToShow = [...keyColsToAdd, ...columnsToShow];
-                          console.log("🔗 [우측패널] 그룹모드 - 키 컬럼 추가:", missingKeyColumns);
-                        }
-                      }
-                    } else {
-                      // 기본 컬럼 자동 생성
-                      columnsToShow = Object.keys(filteredData[0] || {})
-                        .filter((key) => shouldShowField(key))
-                        .slice(0, 5)
-                        .map((key) => ({
-                          name: key,
-                          label: rightColumnLabels[key] || key,
-                          width: 150,
-                          align: "left" as const,
-                          format: undefined,
-                        }));
-                    }
-
-                    return (
-                      <div className="w-full">
-                        <div className="text-muted-foreground mb-2 text-xs">
-                          {filteredData.length}개의 관련 데이터
-                          {rightSearchQuery && filteredData.length !== rightData.length && (
-                            <span className="text-primary ml-1">(전체 {rightData.length}개 중)</span>
-                          )}
-                        </div>
-                        <div className="overflow-auto">
-                          <table className="min-w-full divide-y divide-gray-200">
-                            <thead className="sticky top-0 z-10 bg-gray-50">
-                              <tr>
-                                {columnsToShow.map((col, idx) => (
-                                  <th
-                                    key={idx}
-                                    className="px-3 py-2 text-left text-xs font-medium tracking-wider text-gray-500 uppercase"
-                                    style={{
-                                      width: col.width ? `${col.width}px` : "auto",
-                                      textAlign: col.align || "left",
-                                    }}
-                                  >
-                                    {col.label}
-                                  </th>
-                                ))}
-                                {/* 수정 또는 삭제 버튼이 하나라도 활성화되어 있을 때만 작업 컬럼 표시 */}
-                                {!isDesignMode &&
-                                  ((componentConfig.rightPanel?.editButton?.enabled ?? true) ||
-                                    (componentConfig.rightPanel?.deleteButton?.enabled ?? true)) && (
-                                    <th className="px-3 py-2 text-right text-xs font-medium text-gray-500 uppercase">
-                                      작업
-                                    </th>
-                                  )}
-                              </tr>
-                            </thead>
-                            <tbody className="divide-y divide-gray-200 bg-white">
-                              {filteredData.map((item, idx) => {
-                                const itemId = item.id || item.ID || idx;
-
-                                return (
-                                  <tr key={itemId} className="hover:bg-accent transition-colors">
-                                    {columnsToShow.map((col, colIdx) => (
-                                      <td
-                                        key={colIdx}
-                                        className="px-3 py-2 text-sm whitespace-nowrap text-gray-900"
-                                        style={{ textAlign: col.align || "left" }}
+                  return (
+                    <div className="overflow-auto rounded-lg border">
+                      <table className="w-full text-sm">
+                        <thead className="bg-muted/50 sticky top-0">
+                          <tr>
+                            {columnsToShow.map((col: any) => (
+                              <th
+                                key={col.name}
+                                className="px-3 py-2 text-left font-medium"
+                                style={{ width: col.width ? `${col.width}px` : "auto" }}
+                              >
+                                {col.label}
+                              </th>
+                            ))}
+                            {(currentTabConfig?.showEdit || currentTabConfig?.showDelete) && (
+                              <th className="w-20 px-3 py-2 text-center font-medium">작업</th>
+                            )}
+                          </tr>
+                        </thead>
+                        <tbody>
+                          {currentTabData.map((item: any, idx: number) => (
+                            <tr key={item.id || idx} className="hover:bg-muted/30 border-t">
+                              {columnsToShow.map((col: any) => (
+                                <td key={col.name} className="px-3 py-2">
+                                  {formatValue(item[col.name], col.format)}
+                                </td>
+                              ))}
+                              {(currentTabConfig?.showEdit || currentTabConfig?.showDelete) && (
+                                <td className="px-3 py-2 text-center">
+                                  <div className="flex items-center justify-center gap-1">
+                                    {currentTabConfig?.showEdit && (
+                                      <Button
+                                        variant="ghost"
+                                        size="sm"
+                                        className="h-7 w-7 p-0"
+                                        onClick={() => handleEditClick("right", item)}
                                       >
-                                        {formatCellValue(
-                                          col.name,
-                                          getEntityJoinValue(item, col.name),
-                                          rightCategoryMappings,
-                                          col.format,
-                                        )}
-                                      </td>
-                                    ))}
-                                    {/* 수정 또는 삭제 버튼이 하나라도 활성화되어 있을 때만 작업 셀 표시 */}
-                                    {!isDesignMode &&
-                                      ((componentConfig.rightPanel?.editButton?.enabled ?? true) ||
-                                        (componentConfig.rightPanel?.deleteButton?.enabled ?? true)) && (
-                                        <td className="px-3 py-2 text-right text-sm whitespace-nowrap">
-                                          <div className="flex justify-end gap-1">
-                                            {(componentConfig.rightPanel?.editButton?.enabled ?? true) && (
-                                              <Button
-                                                variant={
-                                                  componentConfig.rightPanel?.editButton?.buttonVariant || "outline"
-                                                }
-                                                size="sm"
-                                                onClick={(e) => {
-                                                  e.stopPropagation();
-                                                  handleEditClick("right", item);
-                                                }}
-                                                className="h-7"
-                                              >
-                                                <Pencil className="mr-1 h-3 w-3" />
-                                                {componentConfig.rightPanel?.editButton?.buttonLabel || "수정"}
-                                              </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>
-                                      )}
-                                  </tr>
-                                );
-                              })}
-                            </tbody>
-                          </table>
-                        </div>
-                      </div>
-                    );
-                  }
+                                        <Pencil className="h-3.5 w-3.5" />
+                                      </Button>
+                                    )}
+                                    {currentTabConfig?.showDelete && (
+                                      <Button
+                                        variant="ghost"
+                                        size="sm"
+                                        className="h-7 w-7 p-0 text-red-500 hover:text-red-600"
+                                        onClick={() => handleDeleteClick("right", item)}
+                                      >
+                                        <Trash2 className="h-3.5 w-3.5" />
+                                      </Button>
+                                    )}
+                                  </div>
+                                </td>
+                              )}
+                            </tr>
+                          ))}
+                        </tbody>
+                      </table>
+                    </div>
+                  );
+                } else {
+                  // 목록 (카드) 모드
+                  const displayColumns = currentTabConfig?.columns || [];
+                  const summaryCount = currentTabConfig?.summaryColumnCount ?? 3;
+                  const showLabel = currentTabConfig?.summaryShowLabel ?? true;
 
-                  // 목록 모드 (기존)
-                  return filteredData.length > 0 ? (
+                  return (
                     <div className="space-y-2">
-                      <div className="text-muted-foreground mb-2 text-xs">
-                        {filteredData.length}개의 관련 데이터
-                        {rightSearchQuery && filteredData.length !== rightData.length && (
-                          <span className="text-primary ml-1">(전체 {rightData.length}개 중)</span>
-                        )}
-                      </div>
-                      {filteredData.map((item, index) => {
-                        const itemId = item.id || item.ID || index;
+                      {currentTabData.map((item: any, idx: number) => {
+                        const itemId = item.id || idx;
                         const isExpanded = expandedRightItems.has(itemId);
 
-                        // 우측 패널 표시 컬럼 설정 확인
-                        const rightColumns = componentConfig.rightPanel?.columns;
-                        let firstValues: [string, any, string][] = [];
-                        let allValues: [string, any, string][] = [];
+                        // 표시할 컬럼 결정
+                        const columnsToShow =
+                          displayColumns.length > 0
+                            ? displayColumns
+                            : Object.keys(item)
+                                .filter(shouldShowField)
+                                .slice(0, 8)
+                                .map((key) => ({ name: key, label: key }));
 
-                        if (rightColumns && rightColumns.length > 0) {
-                          // 설정된 컬럼만 표시 (엔티티 조인 컬럼 처리)
-                          const summaryCount = componentConfig.rightPanel?.summaryColumnCount ?? 3;
-                          firstValues = rightColumns
-                            .slice(0, summaryCount)
-                            .map((col) => {
-                              // 🆕 엔티티 조인 컬럼 처리 (getEntityJoinValue 사용)
-                              const value = getEntityJoinValue(item, col.name);
-                              return [col.name, value, col.label] as [string, any, string];
-                            })
-                            .filter(([_, value]) => value !== null && value !== undefined && value !== "");
-
-                          allValues = rightColumns
-                            .map((col) => {
-                              // 🆕 엔티티 조인 컬럼 처리 (getEntityJoinValue 사용)
-                              const value = getEntityJoinValue(item, col.name);
-                              return [col.name, value, col.label] as [string, any, string];
-                            })
-                            .filter(([_, value]) => value !== null && value !== undefined && value !== "");
-                        } else {
-                          // 설정 없으면 모든 컬럼 표시 (기존 로직)
-                          const summaryCount = componentConfig.rightPanel?.summaryColumnCount ?? 3;
-                          firstValues = Object.entries(item)
-                            .filter(([key]) => !key.toLowerCase().includes("id"))
-                            .slice(0, summaryCount)
-                            .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]);
-                        }
+                        const summaryColumns = columnsToShow.slice(0, summaryCount);
+                        const detailColumns = columnsToShow.slice(summaryCount);
 
                         return (
-                          <div
-                            key={itemId}
-                            className="bg-card overflow-hidden rounded-lg border shadow-sm transition-all hover:shadow-md"
-                          >
-                            {/* 요약 정보 */}
-                            <div className="p-3">
-                              <div className="flex items-start justify-between gap-2">
-                                <div
-                                  className="min-w-0 flex-1 cursor-pointer"
-                                  onClick={() => toggleRightItemExpansion(itemId)}
-                                >
-                                  <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 format = colConfig?.format;
-                                      const boldValue = colConfig?.bold ?? false;
-
-                                      // 🆕 포맷 적용 (날짜/숫자/카테고리)
-                                      const displayValue = formatCellValue(key, value, rightCategoryMappings, format);
-
-                                      const showLabel = componentConfig.rightPanel?.summaryShowLabel ?? true;
-
-                                      return (
-                                        <div key={key} className="flex items-baseline gap-1">
-                                          {showLabel && (
-                                            <span className="text-muted-foreground text-xs font-medium whitespace-nowrap">
-                                              {label || getColumnLabel(key)}:
-                                            </span>
-                                          )}
-                                          <span
-                                            className={`text-foreground text-sm ${boldValue ? "font-semibold" : ""}`}
-                                          >
-                                            {displayValue}
-                                          </span>
-                                        </div>
-                                      );
-                                    })}
-                                  </div>
-                                </div>
-                                <div className="flex flex-shrink-0 items-start gap-1 pt-1">
-                                  {/* 수정 버튼 */}
-                                  {!isDesignMode && (componentConfig.rightPanel?.editButton?.enabled ?? true) && (
-                                    <Button
-                                      variant={componentConfig.rightPanel?.editButton?.buttonVariant || "outline"}
-                                      size="sm"
-                                      onClick={(e) => {
-                                        e.stopPropagation();
-                                        handleEditClick("right", item);
-                                      }}
-                                      className="h-7"
-                                    >
-                                      <Pencil className="mr-1 h-3 w-3" />
-                                      {componentConfig.rightPanel?.editButton?.buttonLabel || "수정"}
-                                    </Button>
-                                  )}
-                                  {/* 삭제 버튼 */}
-                                  {!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={componentConfig.rightPanel?.deleteButton?.buttonLabel || "삭제"}
-                                    >
-                                      <Trash2 className="h-4 w-4 text-red-600" />
-                                    </button>
-                                  )}
-                                  {/* 확장/접기 버튼 */}
-                                  <button
-                                    onClick={() => toggleRightItemExpansion(itemId)}
-                                    className="rounded p-1 transition-colors hover:bg-gray-200"
-                                  >
-                                    {isExpanded ? (
-                                      <ChevronUp className="text-muted-foreground h-5 w-5" />
-                                    ) : (
-                                      <ChevronDown className="text-muted-foreground h-5 w-5" />
-                                    )}
-                                  </button>
+                          <div key={itemId} className="rounded-lg border bg-white p-3">
+                            <div
+                              className="flex cursor-pointer items-start justify-between"
+                              onClick={() => toggleRightItemExpansion(itemId)}
+                            >
+                              <div className="flex-1">
+                                <div className="flex flex-wrap gap-x-4 gap-y-1">
+                                  {summaryColumns.map((col: any) => (
+                                    <div key={col.name} className="text-sm">
+                                      {showLabel && <span className="text-muted-foreground mr-1">{col.label}:</span>}
+                                      <span className={col.bold ? "font-semibold" : ""}>
+                                        {formatValue(item[col.name], col.format)}
+                                      </span>
+                                    </div>
+                                  ))}
                                 </div>
                               </div>
+                              <div className="ml-2 flex items-center gap-1">
+                                {currentTabConfig?.showEdit && (
+                                  <Button
+                                    variant="ghost"
+                                    size="sm"
+                                    className="h-7 w-7 p-0"
+                                    onClick={(e) => {
+                                      e.stopPropagation();
+                                      handleEditClick("right", item);
+                                    }}
+                                  >
+                                    <Pencil className="h-3.5 w-3.5" />
+                                  </Button>
+                                )}
+                                {currentTabConfig?.showDelete && (
+                                  <Button
+                                    variant="ghost"
+                                    size="sm"
+                                    className="h-7 w-7 p-0 text-red-500 hover:text-red-600"
+                                    onClick={(e) => {
+                                      e.stopPropagation();
+                                      handleDeleteClick("right", item);
+                                    }}
+                                  >
+                                    <Trash2 className="h-3.5 w-3.5" />
+                                  </Button>
+                                )}
+                                {detailColumns.length > 0 &&
+                                  (isExpanded ? (
+                                    <ChevronUp className="h-4 w-4 text-gray-400" />
+                                  ) : (
+                                    <ChevronDown className="h-4 w-4 text-gray-400" />
+                                  ))}
+                              </div>
                             </div>
-
-                            {/* 상세 정보 (확장 시 표시) */}
-                            {isExpanded && (
-                              <div className="bg-muted/50 border-t px-3 py-2">
-                                <div className="mb-2 text-xs font-semibold">전체 상세 정보</div>
-                                <div className="bg-card overflow-auto rounded-md border">
-                                  <table className="w-full text-sm">
-                                    <tbody className="divide-border divide-y">
-                                      {allValues.map(([key, value, label]) => {
-                                        // 포맷 설정 찾기
-                                        const colConfig = rightColumns?.find((c) => c.name === key);
-                                        const format = colConfig?.format;
-
-                                        // 🆕 포맷 적용 (날짜/숫자/카테고리)
-                                        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">
-                                              {label || getColumnLabel(key)}
-                                            </td>
-                                            <td className="text-foreground px-3 py-2 break-all">{displayValue}</td>
-                                          </tr>
-                                        );
-                                      })}
-                                    </tbody>
-                                  </table>
+                            {isExpanded && detailColumns.length > 0 && (
+                              <div className="mt-2 border-t pt-2">
+                                <div className="grid grid-cols-2 gap-2">
+                                  {detailColumns.map((col: any) => (
+                                    <div key={col.name} className="text-sm">
+                                      <span className="text-muted-foreground">{col.label}:</span>
+                                      <span className="ml-1">{formatValue(item[col.name], col.format)}</span>
+                                    </div>
+                                  ))}
                                 </div>
                               </div>
                             )}
@@ -2916,109 +3334,478 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                         );
                       })}
                     </div>
-                  ) : (
-                    <div className="text-muted-foreground py-8 text-center text-sm">
-                      {rightSearchQuery ? (
-                        <>
-                          <p>검색 결과가 없습니다.</p>
-                          <p className="text-muted-foreground/70 mt-1 text-xs">다른 검색어를 입력해보세요.</p>
-                        </>
-                      ) : (
-                        "관련 데이터가 없습니다."
-                      )}
-                    </div>
                   );
-                })()
-              ) : (
-                // 상세 모드: 단일 객체를 상세 정보로 표시
-                (() => {
-                  const rightColumns = componentConfig.rightPanel?.columns;
-                  let displayEntries: [string, any, string][] = [];
-
-                  if (rightColumns && rightColumns.length > 0) {
-                    console.log("🔍 [디버깅] 상세 모드 표시 로직:");
-                    console.log("  📋 rightData 전체:", rightData);
-                    console.log("  📋 rightData keys:", Object.keys(rightData));
-                    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 || ""];
-                          console.log(`    → 변환 후 "${columnName}" 접근 = ${value}`);
-                        }
-
-                        return [col.name, value, col.label] as [string, any, string];
-                      })
-                      .filter(([key, value]) => {
-                        const filtered = value === null || value === undefined || value === "";
-                        if (filtered) {
-                          console.log(`  ❌ 필터링됨: "${key}" (값: ${value})`);
-                        }
-                        return !filtered;
-                      });
-
-                    console.log("  ✅ 최종 표시할 항목:", displayEntries.length, "개");
-                  } else {
-                    // 설정 없으면 모든 컬럼 표시
-                    displayEntries = Object.entries(rightData)
-                      .filter(([_, value]) => value !== null && value !== undefined && value !== "")
-                      .map(([key, value]) => [key, value, ""] as [string, any, string]);
-                    console.log("  ⚠️ 컬럼 설정 없음, 모든 컬럼 표시");
-                  }
-
-                  return (
-                    <div className="space-y-2">
-                      {displayEntries.map(([key, value, label]) => (
-                        <div key={key} className="bg-card rounded-lg border p-4 shadow-sm">
-                          <div className="text-muted-foreground mb-1 text-xs font-semibold tracking-wide uppercase">
-                            {label || getColumnLabel(key)}
-                          </div>
-                          <div className="text-sm">{String(value)}</div>
-                        </div>
-                      ))}
-                    </div>
-                  );
-                })()
-              )
-            ) : selectedLeftItem && isDesignMode ? (
-              // 디자인 모드: 샘플 데이터
-              <div className="space-y-4">
-                <div className="rounded-lg border p-4">
-                  <h3 className="mb-2 font-medium">{selectedLeftItem.name} 상세 정보</h3>
-                  <div className="space-y-2 text-sm">
-                    <div className="flex justify-between">
-                      <span className="text-muted-foreground">항목 1:</span>
-                      <span className="font-medium">값 1</span>
-                    </div>
-                    <div className="flex justify-between">
-                      <span className="text-muted-foreground">항목 2:</span>
-                      <span className="font-medium">값 2</span>
-                    </div>
-                    <div className="flex justify-between">
-                      <span className="text-muted-foreground">항목 3:</span>
-                      <span className="font-medium">값 3</span>
+                }
+              })()
+            ) : (
+              /* 기본 탭 (우측 패널) 데이터 */
+              <>
+                {isLoadingRight ? (
+                  // 로딩 중
+                  <div className="flex h-full items-center justify-center">
+                    <div className="text-center">
+                      <Loader2 className="text-primary mx-auto h-8 w-8 animate-spin" />
+                      <p className="text-muted-foreground mt-2 text-sm">데이터를 불러오는 중...</p>
                     </div>
                   </div>
-                </div>
-              </div>
-            ) : (
-              // 선택 없음
-              <div className="flex h-full items-center justify-center">
-                <div className="text-muted-foreground text-center text-sm">
-                  <p className="mb-2">좌측에서 항목을 선택하세요</p>
-                  <p className="text-xs">선택한 항목의 상세 정보가 여기에 표시됩니다</p>
-                </div>
-              </div>
+                ) : rightData ? (
+                  // 실제 데이터 표시
+                  Array.isArray(rightData) ? (
+                    // 조인 모드: 여러 데이터를 테이블/리스트로 표시
+                    (() => {
+                      // 검색 필터링
+                      const filteredData = rightSearchQuery
+                        ? rightData.filter((item) => {
+                            const searchLower = rightSearchQuery.toLowerCase();
+                            return Object.entries(item).some(([key, value]) => {
+                              if (value === null || value === undefined) return false;
+                              return String(value).toLowerCase().includes(searchLower);
+                            });
+                          })
+                        : rightData;
+
+                      // 테이블 모드 체크
+                      const isTableMode = componentConfig.rightPanel?.displayMode === "table";
+
+                      if (isTableMode) {
+                        // 테이블 모드 렌더링
+                        const displayColumns = componentConfig.rightPanel?.columns || [];
+
+                        // 🆕 그룹 합산 모드일 때: 복합키 컬럼을 우선 표시
+                        const relationKeys = componentConfig.rightPanel?.relation?.keys || [];
+                        const keyColumns = relationKeys.map((k: any) => k.leftColumn).filter(Boolean);
+                        const isGroupedMode = selectedLeftItem?._originalItems?.length > 0;
+
+                        let columnsToShow: any[] = [];
+
+                        if (displayColumns.length > 0) {
+                          // 설정된 컬럼 사용 - 🌐 다국어 처리 추가
+                          columnsToShow = displayColumns.map((col) => {
+                            const originalLabel = rightColumnLabels[col.name] || col.label || col.name;
+                            const colLangKey = (col as any).langKey;
+                            return {
+                              ...col,
+                              label: colLangKey ? getTranslatedText(colLangKey, originalLabel) : originalLabel,
+                              format: col.format,
+                            };
+                          });
+
+                          // 🆕 그룹 합산 모드이고, 키 컬럼이 표시 목록에 없으면 맨 앞에 추가
+                          if (isGroupedMode && keyColumns.length > 0) {
+                            const existingColNames = columnsToShow.map((c) => c.name);
+                            const missingKeyColumns = keyColumns.filter((k: string) => !existingColNames.includes(k));
+
+                            if (missingKeyColumns.length > 0) {
+                              const keyColsToAdd = missingKeyColumns.map((colName: string) => ({
+                                name: colName,
+                                label: rightColumnLabels[colName] || colName,
+                                width: 120,
+                                align: "left" as const,
+                                format: undefined,
+                                _isKeyColumn: true, // 구분용 플래그
+                              }));
+                              columnsToShow = [...keyColsToAdd, ...columnsToShow];
+                              console.log("🔗 [우측패널] 그룹모드 - 키 컬럼 추가:", missingKeyColumns);
+                            }
+                          }
+                        } else {
+                          // 기본 컬럼 자동 생성
+                          columnsToShow = Object.keys(filteredData[0] || {})
+                            .filter((key) => shouldShowField(key))
+                            .slice(0, 5)
+                            .map((key) => ({
+                              name: key,
+                              label: rightColumnLabels[key] || key,
+                              width: 150,
+                              align: "left" as const,
+                              format: undefined,
+                            }));
+                        }
+
+                        return (
+                          <div className="w-full">
+                            <div className="text-muted-foreground mb-2 text-xs">
+                              {filteredData.length}개의 관련 데이터
+                              {rightSearchQuery && filteredData.length !== rightData.length && (
+                                <span className="text-primary ml-1">(전체 {rightData.length}개 중)</span>
+                              )}
+                            </div>
+                            <div className="overflow-auto">
+                              <table className="min-w-full divide-y divide-gray-200">
+                                <thead className="sticky top-0 z-10 bg-gray-50">
+                                  <tr>
+                                    {columnsToShow.map((col, idx) => (
+                                      <th
+                                        key={idx}
+                                        className="px-3 py-2 text-left text-xs font-medium tracking-wider text-gray-500"
+                                        style={{
+                                          width: col.width ? `${col.width}px` : "auto",
+                                          textAlign: col.align || "left",
+                                        }}
+                                      >
+                                        {col.label}
+                                      </th>
+                                    ))}
+                                    {/* 수정 또는 삭제 버튼이 하나라도 활성화되어 있을 때만 작업 컬럼 표시 */}
+                                    {!isDesignMode &&
+                                      ((componentConfig.rightPanel?.editButton?.enabled ?? true) ||
+                                        (componentConfig.rightPanel?.deleteButton?.enabled ?? true)) && (
+                                        <th className="px-3 py-2 text-right text-xs font-medium text-gray-500">작업</th>
+                                      )}
+                                  </tr>
+                                </thead>
+                                <tbody className="divide-y divide-gray-200 bg-white">
+                                  {filteredData.map((item, idx) => {
+                                    const itemId = item.id || item.ID || idx;
+
+                                    return (
+                                      <tr key={itemId} className="hover:bg-accent transition-colors">
+                                        {columnsToShow.map((col, colIdx) => (
+                                          <td
+                                            key={colIdx}
+                                            className="px-3 py-2 text-sm whitespace-nowrap text-gray-900"
+                                            style={{ textAlign: col.align || "left" }}
+                                          >
+                                            {formatCellValue(
+                                              col.name,
+                                              getEntityJoinValue(item, col.name),
+                                              rightCategoryMappings,
+                                              col.format,
+                                            )}
+                                          </td>
+                                        ))}
+                                        {/* 수정 또는 삭제 버튼이 하나라도 활성화되어 있을 때만 작업 셀 표시 */}
+                                        {!isDesignMode &&
+                                          ((componentConfig.rightPanel?.editButton?.enabled ?? true) ||
+                                            (componentConfig.rightPanel?.deleteButton?.enabled ?? true)) && (
+                                            <td className="px-3 py-2 text-right text-sm whitespace-nowrap">
+                                              <div className="flex justify-end gap-1">
+                                                {(componentConfig.rightPanel?.editButton?.enabled ?? true) && (
+                                                  <Button
+                                                    variant={
+                                                      componentConfig.rightPanel?.editButton?.buttonVariant || "outline"
+                                                    }
+                                                    size="sm"
+                                                    onClick={(e) => {
+                                                      e.stopPropagation();
+                                                      handleEditClick("right", item);
+                                                    }}
+                                                    className="h-7"
+                                                  >
+                                                    <Pencil className="mr-1 h-3 w-3" />
+                                                    {componentConfig.rightPanel?.editButton?.buttonLabel || "수정"}
+                                                  </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>
+                                          )}
+                                      </tr>
+                                    );
+                                  })}
+                                </tbody>
+                              </table>
+                            </div>
+                          </div>
+                        );
+                      }
+
+                      // 목록 모드 (기존)
+                      return filteredData.length > 0 ? (
+                        <div className="space-y-2">
+                          <div className="text-muted-foreground mb-2 text-xs">
+                            {filteredData.length}개의 관련 데이터
+                            {rightSearchQuery && filteredData.length !== rightData.length && (
+                              <span className="text-primary ml-1">(전체 {rightData.length}개 중)</span>
+                            )}
+                          </div>
+                          {filteredData.map((item, index) => {
+                            const itemId = item.id || item.ID || index;
+                            const isExpanded = expandedRightItems.has(itemId);
+
+                            // 우측 패널 표시 컬럼 설정 확인
+                            const rightColumns = componentConfig.rightPanel?.columns;
+                            let firstValues: [string, any, string][] = [];
+                            let allValues: [string, any, string][] = [];
+
+                            if (rightColumns && rightColumns.length > 0) {
+                              // 설정된 컬럼만 표시 (엔티티 조인 컬럼 처리)
+                              const summaryCount = componentConfig.rightPanel?.summaryColumnCount ?? 3;
+                              firstValues = rightColumns
+                                .slice(0, summaryCount)
+                                .map((col) => {
+                                  // 🆕 엔티티 조인 컬럼 처리 (getEntityJoinValue 사용)
+                                  const value = getEntityJoinValue(item, col.name);
+                                  return [col.name, value, col.label] as [string, any, string];
+                                })
+                                .filter(([_, value]) => value !== null && value !== undefined && value !== "");
+
+                              allValues = rightColumns
+                                .map((col) => {
+                                  // 🆕 엔티티 조인 컬럼 처리 (getEntityJoinValue 사용)
+                                  const value = getEntityJoinValue(item, col.name);
+                                  return [col.name, value, col.label] as [string, any, string];
+                                })
+                                .filter(([_, value]) => value !== null && value !== undefined && value !== "");
+                            } else {
+                              // 설정 없으면 모든 컬럼 표시 (기존 로직)
+                              const summaryCount = componentConfig.rightPanel?.summaryColumnCount ?? 3;
+                              firstValues = Object.entries(item)
+                                .filter(([key]) => !key.toLowerCase().includes("id"))
+                                .slice(0, summaryCount)
+                                .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]);
+                            }
+
+                            return (
+                              <div
+                                key={itemId}
+                                className="bg-card overflow-hidden rounded-lg border shadow-sm transition-all hover:shadow-md"
+                              >
+                                {/* 요약 정보 */}
+                                <div className="p-3">
+                                  <div className="flex items-start justify-between gap-2">
+                                    <div
+                                      className="min-w-0 flex-1 cursor-pointer"
+                                      onClick={() => toggleRightItemExpansion(itemId)}
+                                    >
+                                      <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 format = colConfig?.format;
+                                          const boldValue = colConfig?.bold ?? false;
+
+                                          // 🆕 포맷 적용 (날짜/숫자/카테고리)
+                                          const displayValue = formatCellValue(
+                                            key,
+                                            value,
+                                            rightCategoryMappings,
+                                            format,
+                                          );
+
+                                          const showLabel = componentConfig.rightPanel?.summaryShowLabel ?? true;
+
+                                          return (
+                                            <div key={key} className="flex items-baseline gap-1">
+                                              {showLabel && (
+                                                <span className="text-muted-foreground text-xs font-medium whitespace-nowrap">
+                                                  {label || getColumnLabel(key)}:
+                                                </span>
+                                              )}
+                                              <span
+                                                className={`text-foreground text-sm ${boldValue ? "font-semibold" : ""}`}
+                                              >
+                                                {displayValue}
+                                              </span>
+                                            </div>
+                                          );
+                                        })}
+                                      </div>
+                                    </div>
+                                    <div className="flex flex-shrink-0 items-start gap-1 pt-1">
+                                      {/* 수정 버튼 */}
+                                      {!isDesignMode && (componentConfig.rightPanel?.editButton?.enabled ?? true) && (
+                                        <Button
+                                          variant={componentConfig.rightPanel?.editButton?.buttonVariant || "outline"}
+                                          size="sm"
+                                          onClick={(e) => {
+                                            e.stopPropagation();
+                                            handleEditClick("right", item);
+                                          }}
+                                          className="h-7"
+                                        >
+                                          <Pencil className="mr-1 h-3 w-3" />
+                                          {componentConfig.rightPanel?.editButton?.buttonLabel || "수정"}
+                                        </Button>
+                                      )}
+                                      {/* 삭제 버튼 */}
+                                      {!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={componentConfig.rightPanel?.deleteButton?.buttonLabel || "삭제"}
+                                        >
+                                          <Trash2 className="h-4 w-4 text-red-600" />
+                                        </button>
+                                      )}
+                                      {/* 확장/접기 버튼 */}
+                                      <button
+                                        onClick={() => toggleRightItemExpansion(itemId)}
+                                        className="rounded p-1 transition-colors hover:bg-gray-200"
+                                      >
+                                        {isExpanded ? (
+                                          <ChevronUp className="text-muted-foreground h-5 w-5" />
+                                        ) : (
+                                          <ChevronDown className="text-muted-foreground h-5 w-5" />
+                                        )}
+                                      </button>
+                                    </div>
+                                  </div>
+                                </div>
+
+                                {/* 상세 정보 (확장 시 표시) */}
+                                {isExpanded && (
+                                  <div className="bg-muted/50 border-t px-3 py-2">
+                                    <div className="mb-2 text-xs font-semibold">전체 상세 정보</div>
+                                    <div className="bg-card overflow-auto rounded-md border">
+                                      <table className="w-full text-sm">
+                                        <tbody className="divide-border divide-y">
+                                          {allValues.map(([key, value, label]) => {
+                                            // 포맷 설정 찾기
+                                            const colConfig = rightColumns?.find((c) => c.name === key);
+                                            const format = colConfig?.format;
+
+                                            // 🆕 포맷 적용 (날짜/숫자/카테고리)
+                                            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">
+                                                  {label || getColumnLabel(key)}
+                                                </td>
+                                                <td className="text-foreground px-3 py-2 break-all">{displayValue}</td>
+                                              </tr>
+                                            );
+                                          })}
+                                        </tbody>
+                                      </table>
+                                    </div>
+                                  </div>
+                                )}
+                              </div>
+                            );
+                          })}
+                        </div>
+                      ) : (
+                        <div className="text-muted-foreground py-8 text-center text-sm">
+                          {rightSearchQuery ? (
+                            <>
+                              <p>검색 결과가 없습니다.</p>
+                              <p className="text-muted-foreground/70 mt-1 text-xs">다른 검색어를 입력해보세요.</p>
+                            </>
+                          ) : (
+                            "관련 데이터가 없습니다."
+                          )}
+                        </div>
+                      );
+                    })()
+                  ) : (
+                    // 상세 모드: 단일 객체를 상세 정보로 표시
+                    (() => {
+                      const rightColumns = componentConfig.rightPanel?.columns;
+                      let displayEntries: [string, any, string][] = [];
+
+                      if (rightColumns && rightColumns.length > 0) {
+                        console.log("🔍 [디버깅] 상세 모드 표시 로직:");
+                        console.log("  📋 rightData 전체:", rightData);
+                        console.log("  📋 rightData keys:", Object.keys(rightData));
+                        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 || ""];
+                              console.log(`    → 변환 후 "${columnName}" 접근 = ${value}`);
+                            }
+
+                            return [col.name, value, col.label] as [string, any, string];
+                          })
+                          .filter(([key, value]) => {
+                            const filtered = value === null || value === undefined || value === "";
+                            if (filtered) {
+                              console.log(`  ❌ 필터링됨: "${key}" (값: ${value})`);
+                            }
+                            return !filtered;
+                          });
+
+                        console.log("  ✅ 최종 표시할 항목:", displayEntries.length, "개");
+                      } else {
+                        // 설정 없으면 모든 컬럼 표시
+                        displayEntries = Object.entries(rightData)
+                          .filter(([_, value]) => value !== null && value !== undefined && value !== "")
+                          .map(([key, value]) => [key, value, ""] as [string, any, string]);
+                        console.log("  ⚠️ 컬럼 설정 없음, 모든 컬럼 표시");
+                      }
+
+                      return (
+                        <div className="space-y-2">
+                          {displayEntries.map(([key, value, label]) => (
+                            <div key={key} className="bg-card rounded-lg border p-4 shadow-sm">
+                              <div className="text-muted-foreground mb-1 text-xs font-semibold tracking-wide">
+                                {label || getColumnLabel(key)}
+                              </div>
+                              <div className="text-sm">{String(value)}</div>
+                            </div>
+                          ))}
+                        </div>
+                      );
+                    })()
+                  )
+                ) : selectedLeftItem && isDesignMode ? (
+                  // 디자인 모드: 샘플 데이터
+                  <div className="space-y-4">
+                    <div className="rounded-lg border p-4">
+                      <h3 className="mb-2 font-medium">{selectedLeftItem.name} 상세 정보</h3>
+                      <div className="space-y-2 text-sm">
+                        <div className="flex justify-between">
+                          <span className="text-muted-foreground">항목 1:</span>
+                          <span className="font-medium">값 1</span>
+                        </div>
+                        <div className="flex justify-between">
+                          <span className="text-muted-foreground">항목 2:</span>
+                          <span className="font-medium">값 2</span>
+                        </div>
+                        <div className="flex justify-between">
+                          <span className="text-muted-foreground">항목 3:</span>
+                          <span className="font-medium">값 3</span>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                ) : (
+                  // 선택 없음
+                  <div className="flex h-full items-center justify-center">
+                    <div className="text-muted-foreground text-center text-sm">
+                      <p className="mb-2">좌측에서 항목을 선택하세요</p>
+                      <p className="text-xs">선택한 항목의 상세 정보가 여기에 표시됩니다</p>
+                    </div>
+                  </div>
+                )}
+              </>
             )}
           </CardContent>
         </Card>
diff --git a/frontend/lib/registry/components/split-panel-layout/SplitPanelLayoutConfigPanel.tsx b/frontend/lib/registry/components/split-panel-layout/SplitPanelLayoutConfigPanel.tsx
index 5ca50ffb..048fb385 100644
--- a/frontend/lib/registry/components/split-panel-layout/SplitPanelLayoutConfigPanel.tsx
+++ b/frontend/lib/registry/components/split-panel-layout/SplitPanelLayoutConfigPanel.tsx
@@ -11,10 +11,11 @@ import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, Command
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import { Button } from "@/components/ui/button";
 // Accordion 제거 - 단순 섹션으로 변경
-import { Check, ChevronsUpDown, ArrowRight, Plus, X, ArrowUp, ArrowDown } from "lucide-react";
+import { Check, ChevronsUpDown, ArrowRight, Plus, X, ArrowUp, ArrowDown, Trash2, GripVertical } from "lucide-react";
 import { cn } from "@/lib/utils";
-import { SplitPanelLayoutConfig } from "./types";
+import { SplitPanelLayoutConfig, AdditionalTabConfig } from "./types";
 import { TableInfo, ColumnInfo } from "@/types/screen";
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";
 import { tableTypeApi } from "@/lib/api/screen";
 import { DataFilterConfigPanel } from "@/components/screen/config-panels/DataFilterConfigPanel";
 
@@ -189,6 +190,873 @@ const ScreenSelector: React.FC<{
   );
 };
 
+/**
+ * 추가 탭 설정 패널 (우측 패널과 동일한 구조)
+ */
+interface AdditionalTabConfigPanelProps {
+  tab: AdditionalTabConfig;
+  tabIndex: number;
+  config: SplitPanelLayoutConfig;
+  updateRightPanel: (updates: Partial<SplitPanelLayoutConfig["rightPanel"]>) => void;
+  availableRightTables: TableInfo[];
+  leftTableColumns: ColumnInfo[];
+  menuObjid?: number;
+  // 공유 컬럼 로드 상태
+  loadedTableColumns: Record<string, ColumnInfo[]>;
+  loadTableColumns: (tableName: string) => Promise<void>;
+  loadingColumns: Record<string, boolean>;
+}
+
+const AdditionalTabConfigPanel: React.FC<AdditionalTabConfigPanelProps> = ({
+  tab,
+  tabIndex,
+  config,
+  updateRightPanel,
+  availableRightTables,
+  leftTableColumns,
+  menuObjid,
+  loadedTableColumns,
+  loadTableColumns,
+  loadingColumns,
+}) => {
+  // 탭 테이블 변경 시 컬럼 로드
+  useEffect(() => {
+    if (tab.tableName && !loadedTableColumns[tab.tableName] && !loadingColumns[tab.tableName]) {
+      loadTableColumns(tab.tableName);
+    }
+  }, [tab.tableName, loadedTableColumns, loadingColumns, loadTableColumns]);
+
+  // 현재 탭의 컬럼 목록
+  const tabColumns = useMemo(() => {
+    return tab.tableName ? loadedTableColumns[tab.tableName] || [] : [];
+  }, [tab.tableName, loadedTableColumns]);
+
+  // 로딩 상태
+  const loadingTabColumns = tab.tableName ? loadingColumns[tab.tableName] || false : false;
+
+  // 탭 업데이트 헬퍼
+  const updateTab = (updates: Partial<AdditionalTabConfig>) => {
+    const newTabs = [...(config.rightPanel?.additionalTabs || [])];
+    // undefined 값도 명시적으로 덮어쓰기 위해 Object.assign 대신 직접 처리
+    const updatedTab = { ...tab };
+    Object.keys(updates).forEach((key) => {
+      (updatedTab as any)[key] = (updates as any)[key];
+    });
+    newTabs[tabIndex] = updatedTab;
+    updateRightPanel({ additionalTabs: newTabs });
+  };
+
+  return (
+    <AccordionItem
+      key={tab.tabId}
+      value={tab.tabId}
+      className="rounded-lg border bg-gray-50"
+    >
+      <AccordionTrigger className="px-3 py-2 hover:no-underline">
+        <div className="flex flex-1 items-center gap-2">
+          <GripVertical className="h-4 w-4 text-gray-400" />
+          <span className="text-sm font-medium">
+            {tab.label || `탭 ${tabIndex + 1}`}
+          </span>
+          {tab.tableName && (
+            <span className="text-xs text-gray-500">({tab.tableName})</span>
+          )}
+        </div>
+      </AccordionTrigger>
+      <AccordionContent className="px-3 pb-3">
+        <div className="space-y-4">
+          {/* ===== 1. 기본 정보 ===== */}
+          <div className="space-y-3 rounded-lg border bg-white p-3">
+            <Label className="text-xs font-semibold text-blue-600">기본 정보</Label>
+            <div className="grid grid-cols-2 gap-3">
+              <div className="space-y-1">
+                <Label className="text-xs">탭 라벨</Label>
+                <Input
+                  value={tab.label}
+                  onChange={(e) => updateTab({ label: e.target.value })}
+                  placeholder="탭 이름"
+                  className="h-8 text-xs"
+                />
+              </div>
+              <div className="space-y-1">
+                <Label className="text-xs">패널 제목</Label>
+                <Input
+                  value={tab.title}
+                  onChange={(e) => updateTab({ title: e.target.value })}
+                  placeholder="패널 제목"
+                  className="h-8 text-xs"
+                />
+              </div>
+            </div>
+            <div className="space-y-1">
+              <Label className="text-xs">패널 헤더 높이</Label>
+              <Input
+                type="number"
+                value={tab.panelHeaderHeight ?? 48}
+                onChange={(e) => updateTab({ panelHeaderHeight: parseInt(e.target.value) || 48 })}
+                placeholder="48"
+                className="h-8 w-24 text-xs"
+              />
+            </div>
+          </div>
+
+          {/* ===== 2. 테이블 선택 ===== */}
+          <div className="space-y-3 rounded-lg border bg-white p-3">
+            <Label className="text-xs font-semibold text-blue-600">테이블 설정</Label>
+            <div className="space-y-1">
+              <Label className="text-xs">테이블 선택</Label>
+              <Popover>
+                <PopoverTrigger asChild>
+                  <Button
+                    variant="outline"
+                    role="combobox"
+                    className="h-8 w-full justify-between text-xs"
+                  >
+                    {tab.tableName || "테이블을 선택하세요"}
+                    <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>테이블을 찾을 수 없습니다.</CommandEmpty>
+                    <CommandGroup className="max-h-[200px] overflow-auto">
+                      {availableRightTables.map((table) => (
+                        <CommandItem
+                          key={table.tableName}
+                          value={`${table.displayName || ""} ${table.tableName}`}
+                          onSelect={() => updateTab({ tableName: table.tableName, columns: [] })}
+                        >
+                          <Check
+                            className={cn(
+                              "mr-2 h-4 w-4",
+                              tab.tableName === table.tableName ? "opacity-100" : "opacity-0"
+                            )}
+                          />
+                          {table.displayName || table.tableName}
+                        </CommandItem>
+                      ))}
+                    </CommandGroup>
+                  </Command>
+                </PopoverContent>
+              </Popover>
+            </div>
+          </div>
+
+          {/* ===== 3. 표시 모드 ===== */}
+          <div className="space-y-3 rounded-lg border bg-white p-3">
+            <Label className="text-xs font-semibold text-blue-600">표시 설정</Label>
+            <div className="space-y-1">
+              <Label className="text-xs">표시 모드</Label>
+              <Select
+                value={tab.displayMode || "list"}
+                onValueChange={(value: "list" | "table") => updateTab({ displayMode: value })}
+              >
+                <SelectTrigger className="h-8 text-xs">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="list">목록 (카드)</SelectItem>
+                  <SelectItem value="table">테이블</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+
+            {/* 요약 설정 (목록 모드) */}
+            {tab.displayMode === "list" && (
+              <div className="grid grid-cols-2 gap-3">
+                <div className="space-y-1">
+                  <Label className="text-xs">요약 컬럼 수</Label>
+                  <Input
+                    type="number"
+                    value={tab.summaryColumnCount ?? 3}
+                    onChange={(e) => updateTab({ summaryColumnCount: parseInt(e.target.value) || 3 })}
+                    min={1}
+                    max={10}
+                    className="h-8 text-xs"
+                  />
+                </div>
+                <div className="flex items-center gap-2 pt-5">
+                  <Checkbox
+                    id={`tab-${tabIndex}-summary-label`}
+                    checked={tab.summaryShowLabel ?? true}
+                    onCheckedChange={(checked) => updateTab({ summaryShowLabel: !!checked })}
+                  />
+                  <label htmlFor={`tab-${tabIndex}-summary-label`} className="text-xs">라벨 표시</label>
+                </div>
+              </div>
+            )}
+          </div>
+
+          {/* ===== 4. 컬럼 매핑 (조인 키) ===== */}
+          <div className="space-y-3 rounded-lg border bg-white p-3">
+            <Label className="text-xs font-semibold text-blue-600">컬럼 매핑 (조인 키)</Label>
+            <p className="text-[10px] text-gray-500">
+              좌측 패널 선택 시 관련 데이터만 표시합니다
+            </p>
+            <div className="mt-2 grid grid-cols-2 gap-2">
+              <div className="space-y-1">
+                <Label className="text-[10px]">좌측 컬럼</Label>
+                <Select
+                  value={tab.relation?.keys?.[0]?.leftColumn || tab.relation?.leftColumn || "__none__"}
+                  onValueChange={(value) => {
+                    if (value === "__none__") {
+                      // 선택 안 함 - 조인 키 제거
+                      updateTab({
+                        relation: undefined,
+                      });
+                    } else {
+                      updateTab({
+                        relation: {
+                          ...tab.relation,
+                          type: "join",
+                          keys: [{ leftColumn: value, rightColumn: tab.relation?.keys?.[0]?.rightColumn || "" }],
+                        },
+                      });
+                    }
+                  }}
+                >
+                  <SelectTrigger className="h-7 text-xs">
+                    <SelectValue placeholder="선택" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="__none__">
+                      <span className="text-muted-foreground">선택 안 함 (전체 데이터)</span>
+                    </SelectItem>
+                    {leftTableColumns.map((col) => (
+                      <SelectItem key={col.columnName} value={col.columnName}>
+                        {col.columnLabel || col.columnName}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+              <div className="space-y-1">
+                <Label className="text-[10px]">우측 컬럼</Label>
+                <Select
+                  value={tab.relation?.keys?.[0]?.rightColumn || tab.relation?.foreignKey || "__none__"}
+                  onValueChange={(value) => {
+                    if (value === "__none__") {
+                      // 선택 안 함 - 조인 키 제거
+                      updateTab({
+                        relation: undefined,
+                      });
+                    } else {
+                      updateTab({
+                        relation: {
+                          ...tab.relation,
+                          type: "join",
+                          keys: [{ leftColumn: tab.relation?.keys?.[0]?.leftColumn || "", rightColumn: value }],
+                        },
+                      });
+                    }
+                  }}
+                >
+                  <SelectTrigger className="h-7 text-xs">
+                    <SelectValue placeholder="선택" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="__none__">
+                      <span className="text-muted-foreground">선택 안 함 (전체 데이터)</span>
+                    </SelectItem>
+                    {tabColumns.map((col) => (
+                      <SelectItem key={col.columnName} value={col.columnName}>
+                        {col.columnLabel || col.columnName}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+            </div>
+          </div>
+
+          {/* ===== 5. 기능 버튼 ===== */}
+          <div className="space-y-3 rounded-lg border bg-white p-3">
+            <Label className="text-xs font-semibold text-blue-600">기능 버튼</Label>
+            <div className="grid grid-cols-4 gap-2">
+              <div className="flex items-center gap-1">
+                <Checkbox
+                  id={`tab-${tabIndex}-search`}
+                  checked={tab.showSearch}
+                  onCheckedChange={(checked) => updateTab({ showSearch: !!checked })}
+                />
+                <label htmlFor={`tab-${tabIndex}-search`} className="text-xs">검색</label>
+              </div>
+              <div className="flex items-center gap-1">
+                <Checkbox
+                  id={`tab-${tabIndex}-add`}
+                  checked={tab.showAdd}
+                  onCheckedChange={(checked) => updateTab({ showAdd: !!checked })}
+                />
+                <label htmlFor={`tab-${tabIndex}-add`} className="text-xs">추가</label>
+              </div>
+              <div className="flex items-center gap-1">
+                <Checkbox
+                  id={`tab-${tabIndex}-edit`}
+                  checked={tab.showEdit}
+                  onCheckedChange={(checked) => updateTab({ showEdit: !!checked })}
+                />
+                <label htmlFor={`tab-${tabIndex}-edit`} className="text-xs">수정</label>
+              </div>
+              <div className="flex items-center gap-1">
+                <Checkbox
+                  id={`tab-${tabIndex}-delete`}
+                  checked={tab.showDelete}
+                  onCheckedChange={(checked) => updateTab({ showDelete: !!checked })}
+                />
+                <label htmlFor={`tab-${tabIndex}-delete`} className="text-xs">삭제</label>
+              </div>
+            </div>
+          </div>
+
+          {/* ===== 6. 표시 컬럼 설정 ===== */}
+          <div className="space-y-3 rounded-lg border border-green-200 bg-green-50 p-3">
+            <div className="flex items-center justify-between">
+              <Label className="text-xs font-semibold text-green-700">표시할 컬럼 선택</Label>
+              <Button
+                size="sm"
+                variant="outline"
+                onClick={() => {
+                  const currentColumns = tab.columns || [];
+                  const newColumns = [...currentColumns, { name: "", label: "", width: 100 }];
+                  updateTab({ columns: newColumns });
+                }}
+                className="h-7 text-xs"
+                disabled={!tab.tableName || loadingTabColumns}
+              >
+                <Plus className="mr-1 h-3 w-3" />
+                컬럼 추가
+              </Button>
+            </div>
+            <p className="text-[10px] text-gray-600">
+              표시할 컬럼을 선택하세요. 선택하지 않으면 모든 컬럼이 표시됩니다.
+            </p>
+
+            {/* 테이블 미선택 상태 */}
+            {!tab.tableName && (
+              <div className="rounded-md border border-dashed border-gray-300 bg-white p-3 text-center">
+                <p className="text-xs text-gray-500">먼저 테이블을 선택하세요</p>
+              </div>
+            )}
+
+            {/* 테이블 선택됨 - 컬럼 목록 */}
+            {tab.tableName && (
+              <div className="space-y-2">
+                {/* 로딩 상태 */}
+                {loadingTabColumns && (
+                  <div className="rounded-md border border-dashed border-gray-300 bg-white p-3 text-center">
+                    <p className="text-xs text-gray-500">컬럼을 불러오는 중...</p>
+                  </div>
+                )}
+
+                {/* 설정된 컬럼이 없을 때 */}
+                {!loadingTabColumns && (tab.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>
+                  </div>
+                )}
+
+                {/* 설정된 컬럼 목록 */}
+                {!loadingTabColumns && (tab.columns || []).length > 0 && (
+                  (tab.columns || []).map((col, colIndex) => (
+                    <div key={colIndex} className="space-y-2 rounded-md border bg-white p-3">
+                      {/* 상단: 순서 변경 + 삭제 버튼 */}
+                      <div className="flex items-center justify-between">
+                        <div className="flex items-center gap-1">
+                          <Button
+                            size="sm"
+                            variant="ghost"
+                            onClick={() => {
+                              if (colIndex === 0) return;
+                              const newColumns = [...(tab.columns || [])];
+                              [newColumns[colIndex - 1], newColumns[colIndex]] = [newColumns[colIndex], newColumns[colIndex - 1]];
+                              updateTab({ columns: newColumns });
+                            }}
+                            disabled={colIndex === 0}
+                            className="h-6 w-6 p-0"
+                          >
+                            <ArrowUp className="h-3 w-3" />
+                          </Button>
+                          <Button
+                            size="sm"
+                            variant="ghost"
+                            onClick={() => {
+                              const columns = tab.columns || [];
+                              if (colIndex === columns.length - 1) return;
+                              const newColumns = [...columns];
+                              [newColumns[colIndex], newColumns[colIndex + 1]] = [newColumns[colIndex + 1], newColumns[colIndex]];
+                              updateTab({ columns: newColumns });
+                            }}
+                            disabled={colIndex === (tab.columns || []).length - 1}
+                            className="h-6 w-6 p-0"
+                          >
+                            <ArrowDown className="h-3 w-3" />
+                          </Button>
+                          <span className="text-[10px] text-gray-400">#{colIndex + 1}</span>
+                        </div>
+                        <Button
+                          size="sm"
+                          variant="ghost"
+                          onClick={() => {
+                            const newColumns = (tab.columns || []).filter((_, i) => i !== colIndex);
+                            updateTab({ columns: newColumns });
+                          }}
+                          className="h-6 w-6 p-0 text-red-500 hover:bg-red-50 hover:text-red-600"
+                        >
+                          <X className="h-3 w-3" />
+                        </Button>
+                      </div>
+
+                      {/* 컬럼 선택 */}
+                      <div className="space-y-1">
+                        <Label className="text-[10px] text-gray-500">컬럼</Label>
+                        <Select
+                          value={col.name}
+                          onValueChange={(value) => {
+                            const selectedCol = tabColumns.find((c) => c.columnName === value);
+                            const newColumns = [...(tab.columns || [])];
+                            newColumns[colIndex] = {
+                              ...col,
+                              name: value,
+                              label: selectedCol?.columnLabel || value,
+                            };
+                            updateTab({ columns: newColumns });
+                          }}
+                        >
+                          <SelectTrigger className="h-8 text-xs">
+                            <SelectValue placeholder="컬럼을 선택하세요" />
+                          </SelectTrigger>
+                          <SelectContent>
+                            {tabColumns.map((column) => (
+                              <SelectItem key={column.columnName} value={column.columnName}>
+                                {column.columnLabel || column.columnName}
+                                <span className="ml-1 text-[10px] text-gray-400">({column.columnName})</span>
+                              </SelectItem>
+                            ))}
+                          </SelectContent>
+                        </Select>
+                      </div>
+
+                      {/* 라벨 + 너비 */}
+                      <div className="grid grid-cols-2 gap-2">
+                        <div className="space-y-1">
+                          <Label className="text-[10px] text-gray-500">라벨</Label>
+                          <Input
+                            value={col.label}
+                            onChange={(e) => {
+                              const newColumns = [...(tab.columns || [])];
+                              newColumns[colIndex] = { ...col, label: e.target.value };
+                              updateTab({ columns: newColumns });
+                            }}
+                            placeholder="표시 라벨"
+                            className="h-8 text-xs"
+                          />
+                        </div>
+                        <div className="space-y-1">
+                          <Label className="text-[10px] text-gray-500">너비 (px)</Label>
+                          <Input
+                            type="number"
+                            value={col.width || 100}
+                            onChange={(e) => {
+                              const newColumns = [...(tab.columns || [])];
+                              newColumns[colIndex] = { ...col, width: parseInt(e.target.value) || 100 };
+                              updateTab({ columns: newColumns });
+                            }}
+                            placeholder="100"
+                            className="h-8 text-xs"
+                          />
+                        </div>
+                      </div>
+                    </div>
+                  ))
+                )}
+              </div>
+            )}
+          </div>
+
+          {/* ===== 7. 추가 모달 컬럼 설정 (showAdd일 때) ===== */}
+          {tab.showAdd && (
+            <div className="space-y-3 rounded-lg border border-purple-200 bg-purple-50 p-3">
+              <div className="flex items-center justify-between">
+                <Label className="text-xs font-semibold text-purple-700">추가 모달 컬럼 설정</Label>
+                <Button
+                  size="sm"
+                  variant="outline"
+                  onClick={() => {
+                    const currentColumns = tab.addModalColumns || [];
+                    const newColumns = [...currentColumns, { name: "", label: "", required: false }];
+                    updateTab({ addModalColumns: newColumns });
+                  }}
+                  className="h-7 text-xs"
+                  disabled={!tab.tableName}
+                >
+                  <Plus className="mr-1 h-3 w-3" />
+                  컬럼 추가
+                </Button>
+              </div>
+
+              <div className="space-y-2">
+                {(tab.addModalColumns || []).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>
+                  </div>
+                ) : (
+                  (tab.addModalColumns || []).map((col, colIndex) => (
+                    <div key={colIndex} className="flex items-center gap-2 rounded-md border bg-white p-2">
+                      <Select
+                        value={col.name}
+                        onValueChange={(value) => {
+                          const selectedCol = tabColumns.find((c) => c.columnName === value);
+                          const newColumns = [...(tab.addModalColumns || [])];
+                          newColumns[colIndex] = {
+                            ...col,
+                            name: value,
+                            label: selectedCol?.columnLabel || value,
+                          };
+                          updateTab({ addModalColumns: newColumns });
+                        }}
+                      >
+                        <SelectTrigger className="h-8 flex-1 text-xs">
+                          <SelectValue placeholder="컬럼 선택" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {tabColumns.map((column) => (
+                            <SelectItem key={column.columnName} value={column.columnName}>
+                              {column.columnLabel || column.columnName}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                      <Input
+                        value={col.label}
+                        onChange={(e) => {
+                          const newColumns = [...(tab.addModalColumns || [])];
+                          newColumns[colIndex] = { ...col, label: e.target.value };
+                          updateTab({ addModalColumns: newColumns });
+                        }}
+                        placeholder="라벨"
+                        className="h-8 w-24 text-xs"
+                      />
+                      <div className="flex items-center gap-1">
+                        <Checkbox
+                          checked={col.required}
+                          onCheckedChange={(checked) => {
+                            const newColumns = [...(tab.addModalColumns || [])];
+                            newColumns[colIndex] = { ...col, required: !!checked };
+                            updateTab({ addModalColumns: newColumns });
+                          }}
+                        />
+                        <span className="text-[10px]">필수</span>
+                      </div>
+                      <Button
+                        size="sm"
+                        variant="ghost"
+                        onClick={() => {
+                          const newColumns = (tab.addModalColumns || []).filter((_, i) => i !== colIndex);
+                          updateTab({ addModalColumns: newColumns });
+                        }}
+                        className="h-8 w-8 p-0 text-red-500"
+                      >
+                        <X className="h-3 w-3" />
+                      </Button>
+                    </div>
+                  ))
+                )}
+              </div>
+            </div>
+          )}
+
+          {/* ===== 8. 데이터 필터링 ===== */}
+          <div className="space-y-3 rounded-lg border bg-white p-3">
+            <Label className="text-xs font-semibold text-blue-600">데이터 필터링</Label>
+            <DataFilterConfigPanel
+              tableName={tab.tableName}
+              columns={tabColumns}
+              config={tab.dataFilter}
+              onConfigChange={(dataFilter) => updateTab({ dataFilter })}
+              menuObjid={menuObjid}
+            />
+          </div>
+
+          {/* ===== 9. 중복 데이터 제거 ===== */}
+          <div className="space-y-3 rounded-lg border bg-white p-3">
+            <div className="flex items-center justify-between">
+              <Label className="text-xs font-semibold text-blue-600">중복 데이터 제거</Label>
+              <Switch
+                checked={tab.deduplication?.enabled ?? false}
+                onCheckedChange={(checked) => {
+                  if (checked) {
+                    updateTab({
+                      deduplication: {
+                        enabled: true,
+                        groupByColumn: "",
+                        keepStrategy: "latest",
+                        sortColumn: "start_date",
+                      },
+                    });
+                  } else {
+                    updateTab({ deduplication: undefined });
+                  }
+                }}
+              />
+            </div>
+            {tab.deduplication?.enabled && (
+              <div className="mt-2 space-y-2">
+                <div className="space-y-1">
+                  <Label className="text-[10px]">기준 컬럼</Label>
+                  <Select
+                    value={tab.deduplication?.groupByColumn || ""}
+                    onValueChange={(value) => {
+                      updateTab({
+                        deduplication: { ...tab.deduplication!, groupByColumn: value },
+                      });
+                    }}
+                  >
+                    <SelectTrigger className="h-7 text-xs">
+                      <SelectValue placeholder="컬럼 선택" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {tabColumns.map((col) => (
+                        <SelectItem key={col.columnName} value={col.columnName}>
+                          {col.columnLabel || col.columnName}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+                <div className="space-y-1">
+                  <Label className="text-[10px]">정렬 컬럼</Label>
+                  <Select
+                    value={tab.deduplication?.sortColumn || ""}
+                    onValueChange={(value) => {
+                      updateTab({
+                        deduplication: { ...tab.deduplication!, sortColumn: value },
+                      });
+                    }}
+                  >
+                    <SelectTrigger className="h-7 text-xs">
+                      <SelectValue placeholder="컬럼 선택" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {tabColumns.map((col) => (
+                        <SelectItem key={col.columnName} value={col.columnName}>
+                          {col.columnLabel || col.columnName}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+                <div className="space-y-1">
+                  <Label className="text-[10px]">유지 전략</Label>
+                  <Select
+                    value={tab.deduplication?.keepStrategy || "latest"}
+                    onValueChange={(value: "latest" | "earliest" | "base_price" | "current_date") => {
+                      updateTab({
+                        deduplication: { ...tab.deduplication!, keepStrategy: value },
+                      });
+                    }}
+                  >
+                    <SelectTrigger className="h-7 text-xs">
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="latest">최신</SelectItem>
+                      <SelectItem value="earliest">가장 오래된</SelectItem>
+                      <SelectItem value="current_date">현재 날짜 기준</SelectItem>
+                      <SelectItem value="base_price">기준가</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+              </div>
+            )}
+          </div>
+
+          {/* ===== 10. 수정 버튼 설정 ===== */}
+          {tab.showEdit && (
+            <div className="space-y-3 rounded-lg border border-blue-200 bg-blue-50 p-3">
+              <Label className="text-xs font-semibold text-blue-700">수정 버튼 설정</Label>
+              <div className="space-y-2">
+                <div className="space-y-1">
+                  <Label className="text-[10px]">수정 모드</Label>
+                  <Select
+                    value={tab.editButton?.mode || "auto"}
+                    onValueChange={(value: "auto" | "modal") => {
+                      updateTab({
+                        editButton: { ...tab.editButton, enabled: true, mode: value },
+                      });
+                    }}
+                  >
+                    <SelectTrigger className="h-7 text-xs">
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="auto">자동 (인라인)</SelectItem>
+                      <SelectItem value="modal">모달 화면</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+
+                {tab.editButton?.mode === "modal" && (
+                  <div className="space-y-1">
+                    <Label className="text-[10px]">수정 모달 화면</Label>
+                    <ScreenSelector
+                      value={tab.editButton?.modalScreenId}
+                      onChange={(screenId) => {
+                        updateTab({
+                          editButton: { ...tab.editButton, enabled: true, mode: "modal", modalScreenId: screenId },
+                        });
+                      }}
+                    />
+                  </div>
+                )}
+
+                <div className="grid grid-cols-2 gap-2">
+                  <div className="space-y-1">
+                    <Label className="text-[10px]">버튼 라벨</Label>
+                    <Input
+                      value={tab.editButton?.buttonLabel || ""}
+                      onChange={(e) => {
+                        updateTab({
+                          editButton: { ...tab.editButton, enabled: true, buttonLabel: e.target.value || undefined },
+                        });
+                      }}
+                      placeholder="수정"
+                      className="h-7 text-xs"
+                    />
+                  </div>
+                  <div className="space-y-1">
+                    <Label className="text-[10px]">버튼 스타일</Label>
+                    <Select
+                      value={tab.editButton?.buttonVariant || "ghost"}
+                      onValueChange={(value: "default" | "outline" | "ghost") => {
+                        updateTab({
+                          editButton: { ...tab.editButton, enabled: true, buttonVariant: value },
+                        });
+                      }}
+                    >
+                      <SelectTrigger className="h-7 text-xs">
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="ghost">Ghost (기본)</SelectItem>
+                        <SelectItem value="outline">Outline</SelectItem>
+                        <SelectItem value="default">Default</SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </div>
+                </div>
+
+                {/* 그룹핑 기준 컬럼 */}
+                <div className="space-y-1">
+                  <Label className="text-[10px]">그룹핑 기준 컬럼</Label>
+                  <p className="text-[9px] text-gray-500">수정 시 같은 값을 가진 레코드를 함께 불러옵니다</p>
+                  <div className="max-h-[120px] space-y-1 overflow-y-auto rounded-md border bg-white p-2">
+                    {tabColumns.map((col) => (
+                      <div key={col.columnName} className="flex items-center gap-2">
+                        <Checkbox
+                          id={`tab-${tabIndex}-groupby-${col.columnName}`}
+                          checked={(tab.editButton?.groupByColumns || []).includes(col.columnName)}
+                          onCheckedChange={(checked) => {
+                            const current = tab.editButton?.groupByColumns || [];
+                            const newColumns = checked
+                              ? [...current, col.columnName]
+                              : current.filter((c) => c !== col.columnName);
+                            updateTab({
+                              editButton: { ...tab.editButton, enabled: true, groupByColumns: newColumns },
+                            });
+                          }}
+                        />
+                        <label htmlFor={`tab-${tabIndex}-groupby-${col.columnName}`} className="text-[10px]">
+                          {col.columnLabel || col.columnName}
+                        </label>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              </div>
+            </div>
+          )}
+
+          {/* ===== 11. 삭제 버튼 설정 ===== */}
+          {tab.showDelete && (
+            <div className="space-y-3 rounded-lg border border-red-200 bg-red-50 p-3">
+              <Label className="text-xs font-semibold text-red-700">삭제 버튼 설정</Label>
+              <div className="space-y-2">
+                <div className="grid grid-cols-2 gap-2">
+                  <div className="space-y-1">
+                    <Label className="text-[10px]">버튼 라벨</Label>
+                    <Input
+                      value={tab.deleteButton?.buttonLabel || ""}
+                      onChange={(e) => {
+                        updateTab({
+                          deleteButton: { ...tab.deleteButton, enabled: true, buttonLabel: e.target.value || undefined },
+                        });
+                      }}
+                      placeholder="삭제"
+                      className="h-7 text-xs"
+                    />
+                  </div>
+                  <div className="space-y-1">
+                    <Label className="text-[10px]">버튼 스타일</Label>
+                    <Select
+                      value={tab.deleteButton?.buttonVariant || "ghost"}
+                      onValueChange={(value: "default" | "outline" | "ghost" | "destructive") => {
+                        updateTab({
+                          deleteButton: { ...tab.deleteButton, enabled: true, buttonVariant: value },
+                        });
+                      }}
+                    >
+                      <SelectTrigger className="h-7 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-[10px]">삭제 확인 메시지</Label>
+                  <Input
+                    value={tab.deleteButton?.confirmMessage || ""}
+                    onChange={(e) => {
+                      updateTab({
+                        deleteButton: { ...tab.deleteButton, enabled: true, confirmMessage: e.target.value || undefined },
+                      });
+                    }}
+                    placeholder="정말 삭제하시겠습니까?"
+                    className="h-7 text-xs"
+                  />
+                </div>
+              </div>
+            </div>
+          )}
+
+          {/* ===== 탭 삭제 버튼 ===== */}
+          <div className="flex justify-end border-t pt-2">
+            <Button
+              variant="ghost"
+              size="sm"
+              className="text-red-500 hover:bg-red-50 hover:text-red-600"
+              onClick={() => {
+                const newTabs = config.rightPanel?.additionalTabs?.filter((_, i) => i !== tabIndex) || [];
+                updateRightPanel({ additionalTabs: newTabs });
+              }}
+            >
+              <Trash2 className="mr-1 h-3 w-3" />
+              탭 삭제
+            </Button>
+          </div>
+        </div>
+      </AccordionContent>
+    </AccordionItem>
+  );
+};
+
 /**
  * SplitPanelLayout 설정 패널
  */
@@ -429,6 +1297,71 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
     }
   }, [config.rightPanel?.tableName]);
 
+  // 🆕 좌측/우측 테이블이 모두 선택되면 엔티티 관계 자동 감지
+  const [autoDetectedRelations, setAutoDetectedRelations] = useState<
+    Array<{
+      leftColumn: string;
+      rightColumn: string;
+      direction: "left_to_right" | "right_to_left";
+      inputType: string;
+      displayColumn?: string;
+    }>
+  >([]);
+  const [isDetectingRelations, setIsDetectingRelations] = useState(false);
+
+  useEffect(() => {
+    const detectRelations = async () => {
+      const leftTable = config.leftPanel?.tableName || screenTableName;
+      const rightTable = config.rightPanel?.tableName;
+
+      // 조인 모드이고 양쪽 테이블이 모두 있을 때만 감지
+      if (relationshipType !== "join" || !leftTable || !rightTable) {
+        setAutoDetectedRelations([]);
+        return;
+      }
+
+      setIsDetectingRelations(true);
+      try {
+        const { tableManagementApi } = await import("@/lib/api/tableManagement");
+        const response = await tableManagementApi.getTableEntityRelations(leftTable, rightTable);
+
+        if (response.success && response.data?.relations) {
+          console.log("🔍 엔티티 관계 자동 감지:", response.data.relations);
+          setAutoDetectedRelations(response.data.relations);
+
+          // 감지된 관계가 있고, 현재 설정된 키가 없으면 자동으로 첫 번째 관계를 설정
+          const currentKeys = config.rightPanel?.relation?.keys || [];
+          if (response.data.relations.length > 0 && currentKeys.length === 0) {
+            // 첫 번째 관계만 자동 설정 (사용자가 추가로 설정 가능)
+            const firstRel = response.data.relations[0];
+            console.log("✅ 첫 번째 엔티티 관계 자동 설정:", firstRel);
+            updateRightPanel({
+              relation: {
+                ...config.rightPanel?.relation,
+                type: "join",
+                useMultipleKeys: true,
+                keys: [
+                  {
+                    leftColumn: firstRel.leftColumn,
+                    rightColumn: firstRel.rightColumn,
+                  },
+                ],
+              },
+            });
+          }
+        }
+      } catch (error) {
+        console.error("❌ 엔티티 관계 감지 실패:", error);
+        setAutoDetectedRelations([]);
+      } finally {
+        setIsDetectingRelations(false);
+      }
+    };
+
+    detectRelations();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [config.leftPanel?.tableName, config.rightPanel?.tableName, screenTableName, relationshipType]);
+
   console.log("🔧 SplitPanelLayoutConfigPanel 렌더링");
   console.log("  - config:", config);
   console.log("  - tables:", tables);
@@ -1633,234 +2566,50 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
           </div>
         )}
 
-        {/* 컬럼 매핑 - 조인 모드에서만 표시 */}
+        {/* 엔티티 관계 자동 감지 (읽기 전용) - 조인 모드에서만 표시 */}
         {relationshipType !== "detail" && (
-          <div className="space-y-3 rounded-lg border border-gray-200 bg-gray-50 p-3">
-            <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 className="space-y-3 rounded-lg border border-blue-200 bg-blue-50 p-3">
+            <div>
+              <Label className="text-sm font-semibold">테이블 관계 (자동 감지)</Label>
+              <p className="text-xs text-gray-600">테이블 타입관리에서 정의된 엔티티 관계입니다</p>
             </div>
 
-            <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, keys: newKeys },
-                            });
-                          }}
-                        >
-                          <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, keys: newKeys },
-                            });
-                          }}
-                        >
-                          <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>
+            {isDetectingRelations ? (
+              <div className="flex items-center gap-2 text-xs text-gray-500">
+                <div className="h-3 w-3 animate-spin rounded-full border-2 border-blue-500 border-t-transparent" />
+                관계 감지 중...
+              </div>
+            ) : autoDetectedRelations.length > 0 ? (
+              <div className="space-y-2">
+                {autoDetectedRelations.map((rel, index) => (
+                  <div key={index} className="flex items-center gap-2 rounded-md border border-blue-300 bg-white p-2">
+                    <span className="rounded bg-blue-100 px-2 py-0.5 text-xs font-medium text-blue-700">
+                      {leftTableName}.{rel.leftColumn}
+                    </span>
+                    <ArrowRight className="h-3 w-3 text-blue-400" />
+                    <span className="rounded bg-green-100 px-2 py-0.5 text-xs font-medium text-green-700">
+                      {rightTableName}.{rel.rightColumn}
+                    </span>
+                    <span className="ml-auto text-[10px] text-gray-500">
+                      {rel.inputType === "entity" ? "엔티티" : "카테고리"}
+                    </span>
                   </div>
                 ))}
-              </>
+                <p className="text-[10px] text-blue-600">
+                  테이블 타입관리에서 엔티티/카테고리 설정을 변경하면 자동으로 적용됩니다
+                </p>
+              </div>
+            ) : config.rightPanel?.tableName ? (
+              <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>
+              </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 className="rounded-md border border-dashed border-gray-300 bg-white p-3 text-center">
+                <p className="text-xs text-gray-500">우측 테이블을 선택하면 관계를 자동 감지합니다</p>
+              </div>
             )}
           </div>
         )}
@@ -2973,6 +3722,72 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
         )}
       </div>
 
+      {/* ======================================== */}
+      {/* 추가 탭 설정 (우측 패널과 동일한 구조) */}
+      {/* ======================================== */}
+      <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-muted-foreground text-xs">
+              우측 패널에 다른 테이블 데이터를 탭으로 추가합니다
+            </p>
+          </div>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => {
+              const newTab: AdditionalTabConfig = {
+                tabId: `tab_${Date.now()}`,
+                label: `탭 ${(config.rightPanel?.additionalTabs?.length || 0) + 1}`,
+                title: "",
+                tableName: "",
+                displayMode: "list",
+                showSearch: false,
+                showAdd: false,
+                showEdit: true,
+                showDelete: true,
+                summaryColumnCount: 3,
+                summaryShowLabel: true,
+              };
+              updateRightPanel({
+                additionalTabs: [...(config.rightPanel?.additionalTabs || []), newTab],
+              });
+            }}
+          >
+            <Plus className="mr-1 h-3 w-3" />
+            탭 추가
+          </Button>
+        </div>
+
+        {/* 추가된 탭 목록 */}
+        {(config.rightPanel?.additionalTabs?.length || 0) > 0 ? (
+          <Accordion type="multiple" className="space-y-2">
+            {config.rightPanel?.additionalTabs?.map((tab, tabIndex) => (
+              <AdditionalTabConfigPanel
+                key={tab.tabId}
+                tab={tab}
+                tabIndex={tabIndex}
+                config={config}
+                updateRightPanel={updateRightPanel}
+                availableRightTables={availableRightTables}
+                leftTableColumns={leftTableColumns}
+                menuObjid={menuObjid}
+                loadedTableColumns={loadedTableColumns}
+                loadTableColumns={loadTableColumns}
+                loadingColumns={loadingColumns}
+              />
+            ))}
+          </Accordion>
+        ) : (
+          <div className="rounded-lg border border-dashed p-4 text-center">
+            <p className="text-xs text-gray-500">
+              추가된 탭이 없습니다. [탭 추가] 버튼을 클릭하여 새 탭을 추가하세요.
+            </p>
+          </div>
+        )}
+      </div>
+
       {/* 레이아웃 설정 */}
       <div className="mt-4 space-y-4 border-t pt-4">
         <div className="space-y-2">
@@ -3005,3 +3820,4 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
     </div>
   );
 };
+
diff --git a/frontend/lib/registry/components/split-panel-layout/types.ts b/frontend/lib/registry/components/split-panel-layout/types.ts
index 0e9d6db9..a2712779 100644
--- a/frontend/lib/registry/components/split-panel-layout/types.ts
+++ b/frontend/lib/registry/components/split-panel-layout/types.ts
@@ -4,10 +4,115 @@
 
 import { DataFilterConfig } from "@/types/screen-management";
 
+/**
+ * 추가 탭 설정 (우측 패널과 동일한 구조 + tabId, label)
+ */
+export interface AdditionalTabConfig {
+  // 탭 고유 정보
+  tabId: string;
+  label: string;
+  langKeyId?: number; // 탭 라벨 다국어 키 ID
+  langKey?: string; // 탭 라벨 다국어 키
+
+  // === 우측 패널과 동일한 설정 ===
+  title: string;
+  titleLangKeyId?: number; // 탭 제목 다국어 키 ID
+  titleLangKey?: string; // 탭 제목 다국어 키
+  panelHeaderHeight?: number;
+  tableName?: string;
+  dataSource?: string;
+  displayMode?: "list" | "table";
+  showSearch?: boolean;
+  showAdd?: boolean;
+  showEdit?: boolean;
+  showDelete?: boolean;
+  summaryColumnCount?: number;
+  summaryShowLabel?: boolean;
+
+  columns?: Array<{
+    name: string;
+    label: string;
+    width?: number;
+    sortable?: boolean;
+    align?: "left" | "center" | "right";
+    bold?: boolean;
+    format?: {
+      type?: "number" | "currency" | "date" | "text";
+      thousandSeparator?: boolean;
+      decimalPlaces?: number;
+      prefix?: string;
+      suffix?: string;
+      dateFormat?: string;
+    };
+  }>;
+
+  addModalColumns?: Array<{
+    name: string;
+    label: string;
+    required?: boolean;
+  }>;
+
+  relation?: {
+    type?: "join" | "detail";
+    leftColumn?: string;
+    rightColumn?: string;
+    foreignKey?: string;
+    keys?: Array<{
+      leftColumn: string;
+      rightColumn: string;
+    }>;
+  };
+
+  addConfig?: {
+    targetTable?: string;
+    autoFillColumns?: Record<string, any>;
+    leftPanelColumn?: string;
+    targetColumn?: string;
+  };
+
+  tableConfig?: {
+    showCheckbox?: boolean;
+    showRowNumber?: boolean;
+    rowHeight?: number;
+    headerHeight?: number;
+    striped?: boolean;
+    bordered?: boolean;
+    hoverable?: boolean;
+    stickyHeader?: boolean;
+  };
+
+  dataFilter?: DataFilterConfig;
+
+  deduplication?: {
+    enabled: boolean;
+    groupByColumn: string;
+    keepStrategy: "latest" | "earliest" | "base_price" | "current_date";
+    sortColumn?: string;
+  };
+
+  editButton?: {
+    enabled: boolean;
+    mode: "auto" | "modal";
+    modalScreenId?: number;
+    buttonLabel?: string;
+    buttonVariant?: "default" | "outline" | "ghost";
+    groupByColumns?: string[];
+  };
+
+  deleteButton?: {
+    enabled: boolean;
+    buttonLabel?: string;
+    buttonVariant?: "default" | "outline" | "ghost" | "destructive";
+    confirmMessage?: string;
+  };
+}
+
 export interface SplitPanelLayoutConfig {
   // 좌측 패널 설정
   leftPanel: {
     title: string;
+    langKeyId?: number; // 다국어 키 ID
+    langKey?: string; // 다국어 키
     panelHeaderHeight?: number; // 패널 상단 헤더 높이 (px)
     tableName?: string; // 데이터베이스 테이블명
     dataSource?: string; // API 엔드포인트
@@ -71,6 +176,8 @@ export interface SplitPanelLayoutConfig {
   // 우측 패널 설정
   rightPanel: {
     title: string;
+    langKeyId?: number; // 다국어 키 ID
+    langKey?: string; // 다국어 키
     panelHeaderHeight?: number; // 패널 상단 헤더 높이 (px)
     tableName?: string;
     dataSource?: string;
@@ -165,6 +272,9 @@ export interface SplitPanelLayoutConfig {
       buttonVariant?: "default" | "outline" | "ghost" | "destructive"; // 버튼 스타일 (기본: "ghost")
       confirmMessage?: string; // 삭제 확인 메시지
     };
+
+    // 🆕 추가 탭 설정 (멀티 테이블 탭)
+    additionalTabs?: AdditionalTabConfig[];
   };
 
   // 레이아웃 설정
diff --git a/frontend/lib/registry/components/split-panel-layout2/SplitPanelLayout2Component.tsx b/frontend/lib/registry/components/split-panel-layout2/SplitPanelLayout2Component.tsx
index 6e38e86e..a06c046f 100644
--- a/frontend/lib/registry/components/split-panel-layout2/SplitPanelLayout2Component.tsx
+++ b/frontend/lib/registry/components/split-panel-layout2/SplitPanelLayout2Component.tsx
@@ -654,7 +654,6 @@ export const SplitPanelLayout2Component: React.FC<SplitPanelLayout2ComponentProp
       },
     });
     window.dispatchEvent(event);
-    console.log("[SplitPanelLayout2] 우측 추가 모달 열기");
   }, [
     config.rightPanel?.addModalScreenId,
     config.rightPanel?.addButtonLabel,
diff --git a/frontend/lib/registry/components/split-panel-layout2/SplitPanelLayout2ConfigPanel.tsx b/frontend/lib/registry/components/split-panel-layout2/SplitPanelLayout2ConfigPanel.tsx
index 8ff83b6f..cd93a3b5 100644
--- a/frontend/lib/registry/components/split-panel-layout2/SplitPanelLayout2ConfigPanel.tsx
+++ b/frontend/lib/registry/components/split-panel-layout2/SplitPanelLayout2ConfigPanel.tsx
@@ -87,6 +87,10 @@ export const SplitPanelLayout2ConfigPanel: React.FC<SplitPanelLayout2ConfigPanel
   const [rightTableOpen, setRightTableOpen] = useState(false);
   const [leftModalOpen, setLeftModalOpen] = useState(false);
   const [rightModalOpen, setRightModalOpen] = useState(false);
+  
+  // 개별 수정 모달 화면 선택 Popover 상태
+  const [leftEditModalOpen, setLeftEditModalOpen] = useState(false);
+  const [rightEditModalOpen, setRightEditModalOpen] = useState(false);
 
   // 컬럼 세부설정 모달 상태 (기존 - 하위 호환성)
   const [columnConfigModalOpen, setColumnConfigModalOpen] = useState(false);
@@ -1004,6 +1008,19 @@ export const SplitPanelLayout2ConfigPanel: React.FC<SplitPanelLayout2ConfigPanel
                   onCheckedChange={(checked) => updateConfig("leftPanel.showEditButton", checked)}
                 />
               </div>
+              {/* 수정 버튼이 켜져 있을 때 모달 화면 선택 */}
+              {config.leftPanel?.showEditButton && (
+                <div className="ml-4 mt-1">
+                  <Label className="text-xs">수정 모달 화면</Label>
+                  <ScreenSelect
+                    value={config.leftPanel?.editModalScreenId}
+                    onValueChange={(value) => updateConfig("leftPanel.editModalScreenId", value)}
+                    placeholder="수정 모달 화면 선택"
+                    open={leftEditModalOpen}
+                    onOpenChange={setLeftEditModalOpen}
+                  />
+                </div>
+              )}
               <div className="flex items-center justify-between">
                 <Label className="text-xs">삭제 버튼</Label>
                 <Switch
@@ -1322,6 +1339,19 @@ export const SplitPanelLayout2ConfigPanel: React.FC<SplitPanelLayout2ConfigPanel
                   onCheckedChange={(checked) => updateConfig("rightPanel.showEditButton", checked)}
                 />
               </div>
+              {/* 수정 버튼이 켜져 있을 때 모달 화면 선택 */}
+              {config.rightPanel?.showEditButton && (
+                <div className="ml-4 mt-1">
+                  <Label className="text-xs">수정 모달 화면</Label>
+                  <ScreenSelect
+                    value={config.rightPanel?.editModalScreenId}
+                    onValueChange={(value) => updateConfig("rightPanel.editModalScreenId", value)}
+                    placeholder="수정 모달 화면 선택"
+                    open={rightEditModalOpen}
+                    onOpenChange={setRightEditModalOpen}
+                  />
+                </div>
+              )}
               <div className="flex items-center justify-between">
                 <Label className="text-xs">삭제 버튼</Label>
                 <Switch
diff --git a/frontend/lib/registry/components/table-list/SingleTableWithSticky.tsx b/frontend/lib/registry/components/table-list/SingleTableWithSticky.tsx
index 0f11bbf2..b8ca5545 100644
--- a/frontend/lib/registry/components/table-list/SingleTableWithSticky.tsx
+++ b/frontend/lib/registry/components/table-list/SingleTableWithSticky.tsx
@@ -6,6 +6,7 @@ import { Checkbox } from "@/components/ui/checkbox";
 import { ArrowUp, ArrowDown, ArrowUpDown } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { ColumnConfig } from "./types";
+import { useScreenMultiLang } from "@/contexts/ScreenMultiLangContext";
 
 interface SingleTableWithStickyProps {
   visibleColumns?: ColumnConfig[];
@@ -74,281 +75,298 @@ export const SingleTableWithSticky: React.FC<SingleTableWithStickyProps> = ({
   currentSearchIndex = 0,
   searchTerm = "",
 }) => {
+  const { getTranslatedText } = useScreenMultiLang();
   const checkboxConfig = tableConfig?.checkbox || {};
   const actualColumns = visibleColumns || columns || [];
   const sortHandler = onSort || handleSort || (() => {});
 
   return (
     <div
-      className="relative flex flex-col bg-background shadow-sm"
+      className="bg-background relative flex flex-col shadow-sm"
       style={{
         width: "100%",
         boxSizing: "border-box",
       }}
     >
       <div className="relative overflow-x-auto">
-      <Table
-        className="w-full"
-        style={{
-          width: "100%",
-          tableLayout: "auto", // 테이블 크기 자동 조정
-          boxSizing: "border-box",
-        }}
-      >
-        <TableHeader
-          className={cn(
-            "border-b bg-background",
-            tableConfig?.stickyHeader && "sticky top-0 z-30 shadow-sm"
-          )}
+        <Table
+          className="w-full"
+          style={{
+            width: "100%",
+            tableLayout: "auto", // 테이블 크기 자동 조정
+            boxSizing: "border-box",
+          }}
         >
-          <TableRow className="border-b">
-            {actualColumns.map((column, colIndex) => {
-              // 왼쪽 고정 컬럼들의 누적 너비 계산
-              const leftFixedWidth = actualColumns
-                .slice(0, colIndex)
-                .filter((col) => col.fixed === "left")
-                .reduce((sum, col) => sum + getColumnWidth(col), 0);
+          <TableHeader
+            className={cn("bg-background border-b", tableConfig?.stickyHeader && "sticky top-0 z-30 shadow-sm")}
+          >
+            <TableRow className="border-b">
+              {actualColumns.map((column, colIndex) => {
+                // 왼쪽 고정 컬럼들의 누적 너비 계산
+                const leftFixedWidth = actualColumns
+                  .slice(0, colIndex)
+                  .filter((col) => col.fixed === "left")
+                  .reduce((sum, col) => sum + getColumnWidth(col), 0);
 
-              // 오른쪽 고정 컬럼들의 누적 너비 계산
-              const rightFixedColumns = actualColumns.filter((col) => col.fixed === "right");
-              const rightFixedIndex = rightFixedColumns.findIndex((col) => col.columnName === column.columnName);
-              const rightFixedWidth =
-                rightFixedIndex >= 0
-                  ? rightFixedColumns.slice(rightFixedIndex + 1).reduce((sum, col) => sum + getColumnWidth(col), 0)
-                  : 0;
+                // 오른쪽 고정 컬럼들의 누적 너비 계산
+                const rightFixedColumns = actualColumns.filter((col) => col.fixed === "right");
+                const rightFixedIndex = rightFixedColumns.findIndex((col) => col.columnName === column.columnName);
+                const rightFixedWidth =
+                  rightFixedIndex >= 0
+                    ? rightFixedColumns.slice(rightFixedIndex + 1).reduce((sum, col) => sum + getColumnWidth(col), 0)
+                    : 0;
 
-              return (
-                <TableHead
-                  key={column.columnName}
-                  className={cn(
-                    column.columnName === "__checkbox__"
-                      ? "h-10 border-0 px-3 py-2 text-center align-middle sm:h-12 sm:px-6 sm:py-3 bg-background"
-                      : "h-10 cursor-pointer border-0 px-3 py-2 text-left align-middle font-semibold whitespace-nowrap text-xs text-foreground transition-all duration-200 select-none hover:text-foreground sm:h-12 sm:px-6 sm:py-3 sm:text-sm bg-background",
-                    `text-${column.align}`,
-                    column.sortable && "hover:bg-primary/10",
-                    // 고정 컬럼 스타일
-                    column.fixed === "left" &&
-                      "sticky z-40 border-r border-border bg-background shadow-sm",
-                    column.fixed === "right" &&
-                      "sticky z-40 border-l border-border bg-background shadow-sm",
-                    // 숨김 컬럼 스타일 (디자인 모드에서만)
-                    isDesignMode && column.hidden && "bg-muted/50 opacity-40",
-                  )}
-                  style={{
-                    width: getColumnWidth(column),
-                    minWidth: "100px", // 최소 너비 보장
-                    maxWidth: "300px", // 최대 너비 제한
-                    boxSizing: "border-box",
-                    overflow: "hidden",
-                    textOverflow: "ellipsis",
-                    whiteSpace: "nowrap", // 텍스트 줄바꿈 방지
-                    backgroundColor: "hsl(var(--background))",
-                    // sticky 위치 설정
-                    ...(column.fixed === "left" && { left: leftFixedWidth }),
-                    ...(column.fixed === "right" && { right: rightFixedWidth }),
-                  }}
-                  onClick={() => column.sortable && sortHandler(column.columnName)}
-                >
-                  <div className="flex items-center gap-2">
-                    {column.columnName === "__checkbox__" ? (
-                      checkboxConfig.selectAll && (
-                        <Checkbox
-                          checked={isAllSelected}
-                          onCheckedChange={handleSelectAll}
-                          aria-label="전체 선택"
-                          style={{ zIndex: 1 }}
-                        />
-                      )
-                    ) : (
-                      <>
-                        <span className="flex-1 truncate">
-                          {columnLabels[column.columnName] || column.displayName || column.columnName}
-                        </span>
-                        {column.sortable && sortColumn === column.columnName && (
-                          <span className="ml-1 flex h-4 w-4 items-center justify-center rounded-md bg-background/50 shadow-sm sm:ml-2 sm:h-5 sm:w-5">
-                            {sortDirection === "asc" ? (
-                              <ArrowUp className="h-2.5 w-2.5 text-primary sm:h-3.5 sm:w-3.5" />
-                            ) : (
-                              <ArrowDown className="h-2.5 w-2.5 text-primary sm:h-3.5 sm:w-3.5" />
-                            )}
-                          </span>
-                        )}
-                      </>
+                return (
+                  <TableHead
+                    key={column.columnName}
+                    className={cn(
+                      column.columnName === "__checkbox__"
+                        ? "bg-background h-10 border-0 px-3 py-2 text-center align-middle sm:h-12 sm:px-6 sm:py-3"
+                        : "text-foreground hover:text-foreground bg-background h-10 cursor-pointer border-0 px-3 py-2 text-left align-middle text-xs font-semibold whitespace-nowrap transition-all duration-200 select-none sm:h-12 sm:px-6 sm:py-3 sm:text-sm",
+                      `text-${column.align}`,
+                      column.sortable && "hover:bg-primary/10",
+                      // 고정 컬럼 스타일
+                      column.fixed === "left" && "border-border bg-background sticky z-40 border-r shadow-sm",
+                      column.fixed === "right" && "border-border bg-background sticky z-40 border-l shadow-sm",
+                      // 숨김 컬럼 스타일 (디자인 모드에서만)
+                      isDesignMode && column.hidden && "bg-muted/50 opacity-40",
                     )}
-                  </div>
-                </TableHead>
-              );
-            })}
-          </TableRow>
-        </TableHeader>
-
-        <TableBody>
-          {data.length === 0 ? (
-            <TableRow>
-                    <TableCell colSpan={visibleColumns.length} className="py-12 text-center">
-                      <div className="flex flex-col items-center justify-center space-y-3">
-                        <div className="flex h-12 w-12 items-center justify-center rounded-full bg-muted">
-                          <svg className="h-6 w-6 text-muted-foreground" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                        strokeWidth={2}
-                        d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
-                      />
-                    </svg>
-                  </div>
-                        <span className="text-sm font-medium text-muted-foreground">데이터가 없습니다</span>
-                        <span className="rounded-full bg-muted px-3 py-1 text-xs text-muted-foreground">
-                    조건을 변경하여 다시 검색해보세요
-                  </span>
-                </div>
-              </TableCell>
+                    style={{
+                      width: getColumnWidth(column),
+                      minWidth: "100px", // 최소 너비 보장
+                      maxWidth: "300px", // 최대 너비 제한
+                      boxSizing: "border-box",
+                      overflow: "hidden",
+                      textOverflow: "ellipsis",
+                      whiteSpace: "nowrap", // 텍스트 줄바꿈 방지
+                      backgroundColor: "hsl(var(--background))",
+                      // sticky 위치 설정
+                      ...(column.fixed === "left" && { left: leftFixedWidth }),
+                      ...(column.fixed === "right" && { right: rightFixedWidth }),
+                    }}
+                    onClick={() => column.sortable && sortHandler(column.columnName)}
+                  >
+                    <div className="flex items-center gap-2">
+                      {column.columnName === "__checkbox__" ? (
+                        checkboxConfig.selectAll && (
+                          <Checkbox
+                            checked={isAllSelected}
+                            onCheckedChange={handleSelectAll}
+                            aria-label="전체 선택"
+                            style={{ zIndex: 1 }}
+                          />
+                        )
+                      ) : (
+                        <>
+                          <span className="flex-1 truncate">
+                            {/* langKey가 있으면 다국어 번역 사용, 없으면 기존 라벨 */}
+                            {(column as any).langKey
+                              ? getTranslatedText(
+                                  (column as any).langKey,
+                                  columnLabels[column.columnName] || column.displayName || column.columnName,
+                                )
+                              : columnLabels[column.columnName] || column.displayName || column.columnName}
+                          </span>
+                          {column.sortable && sortColumn === column.columnName && (
+                            <span className="bg-background/50 ml-1 flex h-4 w-4 items-center justify-center rounded-md shadow-sm sm:ml-2 sm:h-5 sm:w-5">
+                              {sortDirection === "asc" ? (
+                                <ArrowUp className="text-primary h-2.5 w-2.5 sm:h-3.5 sm:w-3.5" />
+                              ) : (
+                                <ArrowDown className="text-primary h-2.5 w-2.5 sm:h-3.5 sm:w-3.5" />
+                              )}
+                            </span>
+                          )}
+                        </>
+                      )}
+                    </div>
+                  </TableHead>
+                );
+              })}
             </TableRow>
-          ) : (
-            data.map((row, index) => (
-              <TableRow
-                key={`row-${index}`}
-                className={cn(
-                  "h-14 cursor-pointer border-b transition-colors bg-background sm:h-16",
-                  tableConfig.tableStyle?.hoverEffect && "hover:bg-muted/50",
-                )}
-                onClick={() => handleRowClick(row)}
-              >
-                {visibleColumns.map((column, colIndex) => {
-                  // 왼쪽 고정 컬럼들의 누적 너비 계산
-                  const leftFixedWidth = visibleColumns
-                    .slice(0, colIndex)
-                    .filter((col) => col.fixed === "left")
-                    .reduce((sum, col) => sum + getColumnWidth(col), 0);
+          </TableHeader>
 
-                  // 오른쪽 고정 컬럼들의 누적 너비 계산
-                  const rightFixedColumns = visibleColumns.filter((col) => col.fixed === "right");
-                  const rightFixedIndex = rightFixedColumns.findIndex((col) => col.columnName === column.columnName);
-                  const rightFixedWidth =
-                    rightFixedIndex >= 0
-                      ? rightFixedColumns.slice(rightFixedIndex + 1).reduce((sum, col) => sum + getColumnWidth(col), 0)
-                      : 0;
+          <TableBody>
+            {data.length === 0 ? (
+              <TableRow>
+                <TableCell colSpan={visibleColumns.length} className="py-12 text-center">
+                  <div className="flex flex-col items-center justify-center space-y-3">
+                    <div className="bg-muted flex h-12 w-12 items-center justify-center rounded-full">
+                      <svg
+                        className="text-muted-foreground h-6 w-6"
+                        fill="none"
+                        stroke="currentColor"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          strokeWidth={2}
+                          d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+                        />
+                      </svg>
+                    </div>
+                    <span className="text-muted-foreground text-sm font-medium">데이터가 없습니다</span>
+                    <span className="bg-muted text-muted-foreground rounded-full px-3 py-1 text-xs">
+                      조건을 변경하여 다시 검색해보세요
+                    </span>
+                  </div>
+                </TableCell>
+              </TableRow>
+            ) : (
+              data.map((row, index) => (
+                <TableRow
+                  key={`row-${index}`}
+                  className={cn(
+                    "bg-background h-14 cursor-pointer border-b transition-colors sm:h-16",
+                    tableConfig.tableStyle?.hoverEffect && "hover:bg-muted/50",
+                  )}
+                  onClick={() => handleRowClick(row)}
+                >
+                  {visibleColumns.map((column, colIndex) => {
+                    // 왼쪽 고정 컬럼들의 누적 너비 계산
+                    const leftFixedWidth = visibleColumns
+                      .slice(0, colIndex)
+                      .filter((col) => col.fixed === "left")
+                      .reduce((sum, col) => sum + getColumnWidth(col), 0);
 
-                  // 현재 셀이 편집 중인지 확인
-                  const isEditing = editingCell?.rowIndex === index && editingCell?.colIndex === colIndex;
+                    // 오른쪽 고정 컬럼들의 누적 너비 계산
+                    const rightFixedColumns = visibleColumns.filter((col) => col.fixed === "right");
+                    const rightFixedIndex = rightFixedColumns.findIndex((col) => col.columnName === column.columnName);
+                    const rightFixedWidth =
+                      rightFixedIndex >= 0
+                        ? rightFixedColumns
+                            .slice(rightFixedIndex + 1)
+                            .reduce((sum, col) => sum + getColumnWidth(col), 0)
+                        : 0;
 
-                  // 검색 하이라이트 확인 - 실제 셀 값에 검색어가 포함되어 있는지도 확인
-                  const cellKey = `${index}-${colIndex}`;
-                  const cellValue = String(row[column.columnName] ?? "").toLowerCase();
-                  const hasSearchTerm = searchTerm ? cellValue.includes(searchTerm.toLowerCase()) : false;
-                  
-                  // 인덱스 기반 하이라이트 + 실제 값 검증
-                  const isHighlighted = column.columnName !== "__checkbox__" && 
-                    hasSearchTerm && 
-                    (searchHighlights?.has(cellKey) ?? false);
-                  
-                  // 현재 검색 결과인지 확인 (currentSearchIndex가 -1이면 현재 페이지에 없음)
-                  const highlightArray = searchHighlights ? Array.from(searchHighlights) : [];
-                  const isCurrentSearchResult = isHighlighted && 
-                    currentSearchIndex >= 0 && 
-                    currentSearchIndex < highlightArray.length &&
-                    highlightArray[currentSearchIndex] === cellKey;
+                    // 현재 셀이 편집 중인지 확인
+                    const isEditing = editingCell?.rowIndex === index && editingCell?.colIndex === colIndex;
 
-                  // 셀 값에서 검색어 하이라이트 렌더링
-                  const renderCellContent = () => {
-                    const cellValue = formatCellValue(row[column.columnName], column.format, column.columnName, row) || "\u00A0";
-                    
-                    if (!isHighlighted || !searchTerm || column.columnName === "__checkbox__") {
-                      return cellValue;
-                    }
+                    // 검색 하이라이트 확인 - 실제 셀 값에 검색어가 포함되어 있는지도 확인
+                    const cellKey = `${index}-${colIndex}`;
+                    const cellValue = String(row[column.columnName] ?? "").toLowerCase();
+                    const hasSearchTerm = searchTerm ? cellValue.includes(searchTerm.toLowerCase()) : false;
 
-                    // 검색어 하이라이트 처리
-                    const lowerValue = String(cellValue).toLowerCase();
-                    const lowerTerm = searchTerm.toLowerCase();
-                    const startIndex = lowerValue.indexOf(lowerTerm);
-                    
-                    if (startIndex === -1) return cellValue;
+                    // 인덱스 기반 하이라이트 + 실제 값 검증
+                    const isHighlighted =
+                      column.columnName !== "__checkbox__" &&
+                      hasSearchTerm &&
+                      (searchHighlights?.has(cellKey) ?? false);
 
-                    const before = String(cellValue).slice(0, startIndex);
-                    const match = String(cellValue).slice(startIndex, startIndex + searchTerm.length);
-                    const after = String(cellValue).slice(startIndex + searchTerm.length);
+                    // 현재 검색 결과인지 확인 (currentSearchIndex가 -1이면 현재 페이지에 없음)
+                    const highlightArray = searchHighlights ? Array.from(searchHighlights) : [];
+                    const isCurrentSearchResult =
+                      isHighlighted &&
+                      currentSearchIndex >= 0 &&
+                      currentSearchIndex < highlightArray.length &&
+                      highlightArray[currentSearchIndex] === cellKey;
+
+                    // 셀 값에서 검색어 하이라이트 렌더링
+                    const renderCellContent = () => {
+                      const cellValue =
+                        formatCellValue(row[column.columnName], column.format, column.columnName, row) || "\u00A0";
+
+                      if (!isHighlighted || !searchTerm || column.columnName === "__checkbox__") {
+                        return cellValue;
+                      }
+
+                      // 검색어 하이라이트 처리
+                      const lowerValue = String(cellValue).toLowerCase();
+                      const lowerTerm = searchTerm.toLowerCase();
+                      const startIndex = lowerValue.indexOf(lowerTerm);
+
+                      if (startIndex === -1) return cellValue;
+
+                      const before = String(cellValue).slice(0, startIndex);
+                      const match = String(cellValue).slice(startIndex, startIndex + searchTerm.length);
+                      const after = String(cellValue).slice(startIndex + searchTerm.length);
+
+                      return (
+                        <>
+                          {before}
+                          <mark
+                            className={cn(
+                              "rounded px-0.5",
+                              isCurrentSearchResult
+                                ? "bg-orange-400 font-semibold text-white"
+                                : "bg-yellow-200 text-yellow-900",
+                            )}
+                          >
+                            {match}
+                          </mark>
+                          {after}
+                        </>
+                      );
+                    };
 
                     return (
-                      <>
-                        {before}
-                        <mark className={cn(
-                          "rounded px-0.5",
-                          isCurrentSearchResult 
-                            ? "bg-orange-400 text-white font-semibold" 
-                            : "bg-yellow-200 text-yellow-900"
-                        )}>
-                          {match}
-                        </mark>
-                        {after}
-                      </>
+                      <TableCell
+                        key={`cell-${column.columnName}`}
+                        id={isCurrentSearchResult ? "current-search-result" : undefined}
+                        className={cn(
+                          "text-foreground h-14 px-3 py-2 align-middle text-xs whitespace-nowrap transition-colors sm:h-16 sm:px-6 sm:py-3 sm:text-sm",
+                          `text-${column.align}`,
+                          // 고정 컬럼 스타일
+                          column.fixed === "left" &&
+                            "border-border bg-background/90 sticky z-10 border-r backdrop-blur-sm",
+                          column.fixed === "right" &&
+                            "border-border bg-background/90 sticky z-10 border-l backdrop-blur-sm",
+                          // 편집 가능 셀 스타일
+                          onCellDoubleClick && column.columnName !== "__checkbox__" && "cursor-text",
+                        )}
+                        style={{
+                          width: getColumnWidth(column),
+                          minWidth: "100px", // 최소 너비 보장
+                          maxWidth: "300px", // 최대 너비 제한
+                          boxSizing: "border-box",
+                          overflow: "hidden",
+                          textOverflow: "ellipsis",
+                          whiteSpace: "nowrap",
+                          // sticky 위치 설정
+                          ...(column.fixed === "left" && { left: leftFixedWidth }),
+                          ...(column.fixed === "right" && { right: rightFixedWidth }),
+                        }}
+                        onDoubleClick={(e) => {
+                          if (onCellDoubleClick && column.columnName !== "__checkbox__") {
+                            e.stopPropagation();
+                            onCellDoubleClick(index, colIndex, column.columnName, row[column.columnName]);
+                          }
+                        }}
+                      >
+                        {column.columnName === "__checkbox__" ? (
+                          renderCheckboxCell(row, index)
+                        ) : isEditing ? (
+                          // 인라인 편집 입력 필드
+                          <input
+                            ref={editInputRef}
+                            type="text"
+                            value={editingValue ?? ""}
+                            onChange={(e) => onEditingValueChange?.(e.target.value)}
+                            onKeyDown={onEditKeyDown}
+                            onBlur={() => {
+                              // blur 시 저장 (Enter와 동일)
+                              if (onEditKeyDown) {
+                                const fakeEvent = {
+                                  key: "Enter",
+                                  preventDefault: () => {},
+                                } as React.KeyboardEvent<HTMLInputElement>;
+                                onEditKeyDown(fakeEvent);
+                              }
+                            }}
+                            className="border-primary bg-background focus:ring-primary h-8 w-full rounded border px-2 text-xs focus:ring-2 focus:outline-none sm:text-sm"
+                            onClick={(e) => e.stopPropagation()}
+                          />
+                        ) : (
+                          renderCellContent()
+                        )}
+                      </TableCell>
                     );
-                  };
-
-                  return (
-                    <TableCell
-                      key={`cell-${column.columnName}`}
-                      id={isCurrentSearchResult ? "current-search-result" : undefined}
-                      className={cn(
-                        "h-14 px-3 py-2 align-middle text-xs whitespace-nowrap text-foreground transition-colors sm:h-16 sm:px-6 sm:py-3 sm:text-sm",
-                        `text-${column.align}`,
-                        // 고정 컬럼 스타일
-                        column.fixed === "left" &&
-                          "sticky z-10 border-r border-border bg-background/90 backdrop-blur-sm",
-                        column.fixed === "right" &&
-                          "sticky z-10 border-l border-border bg-background/90 backdrop-blur-sm",
-                        // 편집 가능 셀 스타일
-                        onCellDoubleClick && column.columnName !== "__checkbox__" && "cursor-text",
-                      )}
-                      style={{
-                        width: getColumnWidth(column),
-                        minWidth: "100px", // 최소 너비 보장
-                        maxWidth: "300px", // 최대 너비 제한
-                        boxSizing: "border-box",
-                        overflow: "hidden",
-                        textOverflow: "ellipsis",
-                        whiteSpace: "nowrap",
-                        // sticky 위치 설정
-                        ...(column.fixed === "left" && { left: leftFixedWidth }),
-                        ...(column.fixed === "right" && { right: rightFixedWidth }),
-                      }}
-                      onDoubleClick={(e) => {
-                        if (onCellDoubleClick && column.columnName !== "__checkbox__") {
-                          e.stopPropagation();
-                          onCellDoubleClick(index, colIndex, column.columnName, row[column.columnName]);
-                        }
-                      }}
-                    >
-                      {column.columnName === "__checkbox__" ? (
-                        renderCheckboxCell(row, index)
-                      ) : isEditing ? (
-                        // 인라인 편집 입력 필드
-                        <input
-                          ref={editInputRef}
-                          type="text"
-                          value={editingValue ?? ""}
-                          onChange={(e) => onEditingValueChange?.(e.target.value)}
-                          onKeyDown={onEditKeyDown}
-                          onBlur={() => {
-                            // blur 시 저장 (Enter와 동일)
-                            if (onEditKeyDown) {
-                              const fakeEvent = { key: "Enter", preventDefault: () => {} } as React.KeyboardEvent<HTMLInputElement>;
-                              onEditKeyDown(fakeEvent);
-                            }
-                          }}
-                          className="h-8 w-full rounded border border-primary bg-background px-2 text-xs focus:outline-none focus:ring-2 focus:ring-primary sm:text-sm"
-                          onClick={(e) => e.stopPropagation()}
-                        />
-                      ) : (
-                        renderCellContent()
-                      )}
-                    </TableCell>
-                  );
-                })}
-              </TableRow>
-            ))
-          )}
-        </TableBody>
-      </Table>
+                  })}
+                </TableRow>
+              ))
+            )}
+          </TableBody>
+        </Table>
       </div>
     </div>
   );
diff --git a/frontend/lib/registry/components/table-list/TableListComponent.tsx b/frontend/lib/registry/components/table-list/TableListComponent.tsx
index 78abf111..088d0450 100644
--- a/frontend/lib/registry/components/table-list/TableListComponent.tsx
+++ b/frontend/lib/registry/components/table-list/TableListComponent.tsx
@@ -6,6 +6,7 @@ import { WebType } from "@/types/common";
 import { tableTypeApi } from "@/lib/api/screen";
 import { entityJoinApi } from "@/lib/api/entityJoin";
 import { codeCache } from "@/lib/caching/codeCache";
+import { getCategoryLabelsByCodes } from "@/lib/api/tableCategoryValue";
 import { useEntityJoinOptimization } from "@/lib/hooks/useEntityJoinOptimization";
 import { getFullImageUrl } from "@/lib/api/client";
 import { Button } from "@/components/ui/button";
@@ -66,6 +67,7 @@ import { useAuth } from "@/hooks/useAuth";
 import { useScreenContextOptional } from "@/contexts/ScreenContext";
 import { useSplitPanelContext, SplitPanelPosition } from "@/contexts/SplitPanelContext";
 import type { DataProvidable, DataReceivable, DataReceiverConfig } from "@/types/data-transfer";
+import { useScreenMultiLang } from "@/contexts/ScreenMultiLangContext";
 
 // ========================================
 // 인터페이스
@@ -242,6 +244,11 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
   parentTabsComponentId,
   companyCode,
 }) => {
+  // ========================================
+  // 다국어 번역 훅
+  // ========================================
+  const { getTranslatedText } = useScreenMultiLang();
+
   // ========================================
   // 설정 및 스타일
   // ========================================
@@ -474,6 +481,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
     }
 
     // 2. 헤더 필터 적용 (joinColumnMapping 사용 안 함 - 직접 컬럼명 사용)
+    // 🆕 다중 값 지원: 셀 값이 "A,B,C" 형태일 때, 필터에서 "A"를 선택하면 해당 행도 표시
     if (Object.keys(headerFilters).length > 0) {
       result = result.filter((row) => {
         return Object.entries(headerFilters).every(([columnName, values]) => {
@@ -483,7 +491,16 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
           const cellValue = row[columnName] ?? row[columnName.toLowerCase()] ?? row[columnName.toUpperCase()];
           const cellStr = cellValue !== null && cellValue !== undefined ? String(cellValue) : "";
 
-          return values.has(cellStr);
+          // 정확히 일치하는 경우
+          if (values.has(cellStr)) return true;
+
+          // 다중 값인 경우: 콤마로 분리해서 하나라도 포함되면 true
+          if (cellStr.includes(",")) {
+            const cellValues = cellStr.split(",").map(v => v.trim());
+            return cellValues.some(v => values.has(v));
+          }
+
+          return false;
         });
       });
     }
@@ -854,17 +871,55 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
   };
 
   // 화면 컨텍스트에 데이터 제공자/수신자로 등록
+  // 🔧 dataProvider와 dataReceiver를 의존성에 포함하지 않고,
+  // 대신 data와 selectedRows가 변경될 때마다 재등록하여 최신 클로저 참조
   useEffect(() => {
     if (screenContext && component.id) {
-      screenContext.registerDataProvider(component.id, dataProvider);
-      screenContext.registerDataReceiver(component.id, dataReceiver);
+      // 🔧 매번 새로운 dataProvider를 등록하여 최신 selectedRows 참조
+      const currentDataProvider: DataProvidable = {
+        componentId: component.id,
+        componentType: "table-list",
+        getSelectedData: () => {
+          const selectedData = filteredData.filter((row) => {
+            const rowId = String(row.id || row[tableConfig.selectedTable + "_id"] || "");
+            return selectedRows.has(rowId);
+          });
+          console.log("📊 [TableList] getSelectedData 호출:", {
+            componentId: component.id,
+            selectedRowsSize: selectedRows.size,
+            filteredDataLength: filteredData.length,
+            resultLength: selectedData.length,
+          });
+          return selectedData;
+        },
+        getAllData: () => filteredData,
+        clearSelection: () => {
+          setSelectedRows(new Set());
+          setIsAllSelected(false);
+        },
+      };
+
+      const currentDataReceiver: DataReceivable = {
+        componentId: component.id,
+        componentType: "table",
+        receiveData: dataReceiver.receiveData,
+        getData: () => data,
+      };
+
+      screenContext.registerDataProvider(component.id, currentDataProvider);
+      screenContext.registerDataReceiver(component.id, currentDataReceiver);
+
+      console.log("✅ [TableList] ScreenContext에 등록:", {
+        componentId: component.id,
+        selectedRowsSize: selectedRows.size,
+      });
 
       return () => {
         screenContext.unregisterDataProvider(component.id);
         screenContext.unregisterDataReceiver(component.id);
       };
     }
-  }, [screenContext, component.id, data, selectedRows]);
+  }, [screenContext, component.id, data, selectedRows, filteredData, tableConfig.selectedTable]);
 
   // 분할 패널 컨텍스트에 데이터 수신자로 등록
   // useSplitPanelPosition 훅으로 위치 가져오기 (중첩된 화면에서도 작동)
@@ -1031,14 +1086,16 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
       onGroupSumChange: setGroupSumConfig, // 그룹별 합산 설정
       // 틀고정 컬럼 관련
       frozenColumnCount, // 현재 틀고정 컬럼 수
-      onFrozenColumnCountChange: (count: number) => {
+      onFrozenColumnCountChange: (count: number, updatedColumns?: Array<{ columnName: string; visible: boolean }>) => {
         setFrozenColumnCount(count);
         // 체크박스 컬럼은 항상 틀고정에 포함
         const checkboxColumn = (tableConfig.checkbox?.enabled ?? true) ? ["__checkbox__"] : [];
         // 표시 가능한 컬럼 중 처음 N개를 틀고정 컬럼으로 설정
-        const visibleCols = columnsToRegister
+        // updatedColumns가 전달되면 그것을 사용, 아니면 columnsToRegister 사용
+        const colsToUse = updatedColumns || columnsToRegister;
+        const visibleCols = colsToUse
           .filter((col) => col.visible !== false)
-          .map((col) => col.columnName || col.field);
+          .map((col) => col.columnName || (col as any).field);
         const newFrozenColumns = [...checkboxColumn, ...visibleCols.slice(0, count)];
         setFrozenColumns(newFrozenColumns);
       },
@@ -2049,7 +2106,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
     return row.id || row.uuid || `row-${index}`;
   };
 
-  const handleRowSelection = (rowKey: string, checked: boolean) => {
+  const handleRowSelection = (rowKey: string, checked: boolean, rowData?: any) => {
     const newSelectedRows = new Set(selectedRows);
     if (checked) {
       newSelectedRows.add(rowKey);
@@ -2092,6 +2149,31 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
       });
     }
 
+    // 🆕 분할 패널 컨텍스트에 선택된 데이터 저장/해제 (체크박스 선택 시에도 작동)
+    const effectiveSplitPosition = splitPanelPosition || currentSplitPosition;
+    if (splitPanelContext && effectiveSplitPosition === "left" && !splitPanelContext.disableAutoDataTransfer) {
+      if (checked && selectedRowsData.length > 0) {
+        // 선택된 경우: 첫 번째 선택된 데이터 저장 (또는 전달된 rowData)
+        const dataToStore = rowData || selectedRowsData[selectedRowsData.length - 1];
+        splitPanelContext.setSelectedLeftData(dataToStore);
+        console.log("🔗 [TableList] handleRowSelection - 분할 패널 좌측 데이터 저장:", {
+          rowKey,
+          dataToStore,
+        });
+      } else if (!checked && selectedRowsData.length === 0) {
+        // 모든 선택이 해제된 경우: 데이터 초기화
+        splitPanelContext.setSelectedLeftData(null);
+        console.log("🔗 [TableList] handleRowSelection - 분할 패널 좌측 데이터 초기화");
+      } else if (selectedRowsData.length > 0) {
+        // 일부 선택 해제된 경우: 남은 첫 번째 데이터로 업데이트
+        splitPanelContext.setSelectedLeftData(selectedRowsData[0]);
+        console.log("🔗 [TableList] handleRowSelection - 분할 패널 좌측 데이터 업데이트:", {
+          remainingCount: selectedRowsData.length,
+          firstData: selectedRowsData[0],
+        });
+      }
+    }
+
     const allRowsSelected = filteredData.every((row, index) => newSelectedRows.has(getRowKey(row, index)));
     setIsAllSelected(allRowsSelected && filteredData.length > 0);
   };
@@ -2161,35 +2243,8 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
     const rowKey = getRowKey(row, index);
     const isCurrentlySelected = selectedRows.has(rowKey);
 
-    handleRowSelection(rowKey, !isCurrentlySelected);
-
-    // 🆕 분할 패널 컨텍스트에 선택된 데이터 저장 (좌측 화면인 경우)
-    // disableAutoDataTransfer가 true이면 자동 전달 비활성화 (버튼 클릭으로만 전달)
-    // currentSplitPosition을 사용하여 정확한 위치 확인 (splitPanelPosition이 없을 수 있음)
-    const effectiveSplitPosition = splitPanelPosition || currentSplitPosition;
-
-    console.log("🔗 [TableList] 행 클릭 - 분할 패널 위치 확인:", {
-      splitPanelPosition,
-      currentSplitPosition,
-      effectiveSplitPosition,
-      hasSplitPanelContext: !!splitPanelContext,
-      disableAutoDataTransfer: splitPanelContext?.disableAutoDataTransfer,
-    });
-
-    if (splitPanelContext && effectiveSplitPosition === "left" && !splitPanelContext.disableAutoDataTransfer) {
-      if (!isCurrentlySelected) {
-        // 선택된 경우: 데이터 저장
-        splitPanelContext.setSelectedLeftData(row);
-        console.log("🔗 [TableList] 분할 패널 좌측 데이터 저장:", {
-          row,
-          parentDataMapping: splitPanelContext.parentDataMapping,
-        });
-      } else {
-        // 선택 해제된 경우: 데이터 초기화
-        splitPanelContext.setSelectedLeftData(null);
-        console.log("🔗 [TableList] 분할 패널 좌측 데이터 초기화");
-      }
-    }
+    // handleRowSelection에서 분할 패널 데이터 처리도 함께 수행됨
+    handleRowSelection(rowKey, !isCurrentlySelected, row);
 
     console.log("행 클릭:", { row, index, isSelected: !isCurrentlySelected });
   };
@@ -2256,30 +2311,176 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
   // 🆕 편집 모드 진입 placeholder (실제 구현은 visibleColumns 정의 후)
   const startEditingRef = useRef<() => void>(() => {});
 
-  // 🆕 각 컬럼의 고유값 목록 계산
+  // 🆕 카테고리 라벨 매핑 (API에서 가져온 것)
+  const [categoryLabelCache, setCategoryLabelCache] = useState<Record<string, string>>({});
+
+  // 🆕 각 컬럼의 고유값 목록 계산 (라벨 포함)
   const columnUniqueValues = useMemo(() => {
-    const result: Record<string, string[]> = {};
+    const result: Record<string, Array<{ value: string; label: string }>> = {};
 
     if (data.length === 0) return result;
 
+    // 🆕 전체 데이터에서 개별 값 -> 라벨 매핑 테이블 구축 (다중 값 처리용)
+    const globalLabelMap: Record<string, Map<string, string>> = {};
+    
     (tableConfig.columns || []).forEach((column: { columnName: string }) => {
       if (column.columnName === "__checkbox__") return;
 
       const mappedColumnName = joinColumnMapping[column.columnName] || column.columnName;
-      const values = new Set<string>();
+      // 라벨 컬럼 후보들 (백엔드에서 _name, _label, _value_label 등으로 반환할 수 있음)
+      const labelColumnCandidates = [
+        `${column.columnName}_name`,        // 예: division_name
+        `${column.columnName}_label`,       // 예: division_label
+        `${column.columnName}_value_label`, // 예: division_value_label
+      ];
+      const valuesMap = new Map<string, string>(); // value -> label
+      const singleValueLabelMap = new Map<string, string>(); // 개별 값 -> 라벨 (다중값 처리용)
 
+      // 1차: 모든 데이터에서 개별 값 -> 라벨 매핑 수집 (단일값 + 다중값 모두)
       data.forEach((row) => {
         const val = row[mappedColumnName];
         if (val !== null && val !== undefined && val !== "") {
-          values.add(String(val));
+          const valueStr = String(val);
+          
+          // 라벨 컬럼에서 라벨 찾기
+          let labelStr = "";
+          for (const labelCol of labelColumnCandidates) {
+            if (row[labelCol] && row[labelCol] !== "") {
+              labelStr = String(row[labelCol]);
+              break;
+            }
+          }
+          
+          // 단일 값인 경우
+          if (!valueStr.includes(",")) {
+            if (labelStr) {
+              singleValueLabelMap.set(valueStr, labelStr);
+            }
+          } else {
+            // 다중 값인 경우: 값과 라벨을 각각 분리해서 매핑
+            const individualValues = valueStr.split(",").map(v => v.trim());
+            const individualLabels = labelStr ? labelStr.split(",").map(l => l.trim()) : [];
+            
+            // 값과 라벨 개수가 같으면 1:1 매핑
+            if (individualValues.length === individualLabels.length) {
+              individualValues.forEach((v, idx) => {
+                if (individualLabels[idx] && !singleValueLabelMap.has(v)) {
+                  singleValueLabelMap.set(v, individualLabels[idx]);
+                }
+              });
+            }
+          }
         }
       });
 
-      result[column.columnName] = Array.from(values).sort();
+      // 2차: 모든 값 처리 (다중 값 포함) - 필터 목록용
+      data.forEach((row) => {
+        const val = row[mappedColumnName];
+        if (val !== null && val !== undefined && val !== "") {
+          const valueStr = String(val);
+          
+          // 콤마로 구분된 다중 값인지 확인
+          if (valueStr.includes(",")) {
+            // 다중 값: 각각 분리해서 개별 라벨 찾기
+            const individualValues = valueStr.split(",").map(v => v.trim());
+            // 🆕 singleValueLabelMap → categoryLabelCache 순으로 라벨 찾기
+            const individualLabels = individualValues.map(v => 
+              singleValueLabelMap.get(v) || categoryLabelCache[v] || v
+            );
+            valuesMap.set(valueStr, individualLabels.join(", "));
+          } else {
+            // 단일 값: 매핑에서 찾거나 캐시에서 찾거나 원본 사용
+            const label = singleValueLabelMap.get(valueStr) || categoryLabelCache[valueStr] || valueStr;
+            valuesMap.set(valueStr, label);
+          }
+        }
+      });
+
+      globalLabelMap[column.columnName] = singleValueLabelMap;
+
+      // value-label 쌍으로 저장하고 라벨 기준 정렬
+      result[column.columnName] = Array.from(valuesMap.entries())
+        .map(([value, label]) => ({ value, label }))
+        .sort((a, b) => a.label.localeCompare(b.label));
     });
 
     return result;
-  }, [data, tableConfig.columns, joinColumnMapping]);
+  }, [data, tableConfig.columns, joinColumnMapping, categoryLabelCache]);
+
+  // 🆕 라벨을 못 찾은 CATEGORY_ 코드들을 API로 조회
+  useEffect(() => {
+    const unlabeledCodes = new Set<string>();
+    
+    // columnUniqueValues에서 라벨이 코드 그대로인 항목 찾기
+    Object.values(columnUniqueValues).forEach(items => {
+      items.forEach(item => {
+        // 라벨에 CATEGORY_가 포함되어 있으면 라벨을 못 찾은 것
+        if (item.label.includes("CATEGORY_")) {
+          // 콤마로 분리해서 개별 코드 추출
+          const codes = item.label.split(",").map(c => c.trim());
+          codes.forEach(code => {
+            if (code.startsWith("CATEGORY_") && !categoryLabelCache[code]) {
+              unlabeledCodes.add(code);
+            }
+          });
+        }
+      });
+    });
+
+    if (unlabeledCodes.size === 0) return;
+
+    // API로 라벨 조회
+    const fetchLabels = async () => {
+      try {
+        const response = await getCategoryLabelsByCodes(Array.from(unlabeledCodes));
+        if (response.success && response.data) {
+          setCategoryLabelCache(prev => ({ ...prev, ...response.data }));
+        }
+      } catch (error) {
+        console.error("카테고리 라벨 조회 실패:", error);
+      }
+    };
+
+    fetchLabels();
+  }, [columnUniqueValues, categoryLabelCache]);
+
+  // 🆕 데이터에서 CATEGORY_ 코드를 찾아 라벨 미리 로드 (테이블 셀 렌더링용)
+  useEffect(() => {
+    if (data.length === 0) return;
+
+    const categoryCodesToFetch = new Set<string>();
+
+    // 모든 데이터 행에서 CATEGORY_ 코드 수집
+    data.forEach((row) => {
+      Object.entries(row).forEach(([key, value]) => {
+        if (value && typeof value === "string") {
+          // 콤마로 구분된 다중 값도 처리
+          const codes = value.split(",").map((v) => v.trim());
+          codes.forEach((code) => {
+            if (code.startsWith("CATEGORY_") && !categoryLabelCache[code]) {
+              categoryCodesToFetch.add(code);
+            }
+          });
+        }
+      });
+    });
+
+    if (categoryCodesToFetch.size === 0) return;
+
+    // API로 라벨 조회
+    const fetchLabels = async () => {
+      try {
+        const response = await getCategoryLabelsByCodes(Array.from(categoryCodesToFetch));
+        if (response.success && response.data && Object.keys(response.data).length > 0) {
+          setCategoryLabelCache((prev) => ({ ...prev, ...response.data }));
+        }
+      } catch (error) {
+        console.error("CATEGORY_ 라벨 조회 실패:", error);
+      }
+    };
+
+    fetchLabels();
+  }, [data, categoryLabelCache]);
 
   // 🆕 헤더 필터 토글
   const toggleHeaderFilter = useCallback((columnName: string, value: string) => {
@@ -3924,7 +4125,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
           if (enterRow) {
             const rowKey = getRowKey(enterRow, rowIndex);
             const isCurrentlySelected = selectedRows.has(rowKey);
-            handleRowSelection(rowKey, !isCurrentlySelected);
+            handleRowSelection(rowKey, !isCurrentlySelected, enterRow);
           }
           break;
         case " ": // Space
@@ -3934,7 +4135,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
           if (spaceRow) {
             const currentRowKey = getRowKey(spaceRow, rowIndex);
             const isChecked = selectedRows.has(currentRowKey);
-            handleRowSelection(currentRowKey, !isChecked);
+            handleRowSelection(currentRowKey, !isChecked, spaceRow);
           }
           break;
         case "F2":
@@ -4148,7 +4349,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
     return (
       <Checkbox
         checked={isChecked}
-        onCheckedChange={(checked) => handleRowSelection(rowKey, checked as boolean)}
+        onCheckedChange={(checked) => handleRowSelection(rowKey, checked as boolean, row)}
         aria-label={`행 ${index + 1} 선택`}
       />
     );
@@ -4437,10 +4638,36 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
         case "boolean":
           return value ? "예" : "아니오";
         default:
-          return String(value);
+          // 🆕 CATEGORY_ 코드 자동 변환 (inputType이 category가 아니어도)
+          const strValue = String(value);
+          if (strValue.startsWith("CATEGORY_")) {
+            // rowData에서 _label 필드 찾기
+            if (rowData) {
+              const labelFieldCandidates = [
+                `${column.columnName}_label`,
+                `${column.columnName}_name`,
+                `${column.columnName}_value_label`,
+              ];
+              for (const labelField of labelFieldCandidates) {
+                if (rowData[labelField] && rowData[labelField] !== "") {
+                  return String(rowData[labelField]);
+                }
+              }
+            }
+            // categoryMappings에서 찾기
+            const mapping = categoryMappings[column.columnName];
+            if (mapping && mapping[strValue]) {
+              return mapping[strValue].label;
+            }
+            // categoryLabelCache에서 찾기 (필터용 캐시)
+            if (categoryLabelCache[strValue]) {
+              return categoryLabelCache[strValue];
+            }
+          }
+          return strValue;
       }
     },
-    [columnMeta, joinedColumnMeta, optimizedConvertCode, categoryMappings],
+    [columnMeta, joinedColumnMeta, optimizedConvertCode, categoryMappings, categoryLabelCache],
   );
 
   // ========================================
@@ -4579,9 +4806,22 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
       });
       setColumnWidths(newWidths);
 
-      // 틀고정 컬럼 업데이트
-      const newFrozenColumns = config.columns.filter((col) => col.frozen).map((col) => col.columnName);
+      // 틀고정 컬럼 업데이트 (보이는 컬럼 기준으로 처음 N개를 틀고정)
+      // 기존 frozen 개수를 유지하면서, 숨겨진 컬럼을 제외한 보이는 컬럼 중 처음 N개를 틀고정
+      const checkboxColumn = (tableConfig.checkbox?.enabled ?? true) ? ["__checkbox__"] : [];
+      const visibleCols = config.columns
+        .filter((col) => col.visible && col.columnName !== "__checkbox__")
+        .map((col) => col.columnName);
+      
+      // 현재 설정된 frozen 컬럼 개수 (체크박스 제외)
+      const currentFrozenCount = config.columns.filter(
+        (col) => col.frozen && col.columnName !== "__checkbox__"
+      ).length;
+      
+      // 보이는 컬럼 중 처음 currentFrozenCount개를 틀고정으로 설정
+      const newFrozenColumns = [...checkboxColumn, ...visibleCols.slice(0, currentFrozenCount)];
       setFrozenColumns(newFrozenColumns);
+      setFrozenColumnCount(currentFrozenCount);
 
       // 그리드선 표시 업데이트
       setShowGridLines(config.showGridLines);
@@ -5625,7 +5865,10 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                             rowSpan={2}
                             className="border-primary/10 border-r px-2 py-1 text-center text-xs font-semibold sm:px-4 sm:text-sm"
                           >
-                            {columnLabels[column.columnName] || column.columnName}
+                            {/* langKey가 있으면 다국어 번역 사용 */}
+                            {(column as any).langKey 
+                              ? getTranslatedText((column as any).langKey, columnLabels[column.columnName] || column.columnName)
+                              : columnLabels[column.columnName] || column.columnName}
                           </th>
                         );
                       }
@@ -5644,13 +5887,18 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                   {visibleColumns.map((column, columnIndex) => {
                     const columnWidth = columnWidths[column.columnName];
                     const isFrozen = frozenColumns.includes(column.columnName);
-                    const frozenIndex = frozenColumns.indexOf(column.columnName);
-
-                    // 틀고정된 컬럼의 left 위치 계산
+                    
+                    // 틀고정된 컬럼의 left 위치 계산 (보이는 컬럼 기준으로 계산)
+                    // 숨겨진 컬럼은 제외하고 보이는 틀고정 컬럼만 포함
+                    const visibleFrozenColumns = visibleColumns
+                      .filter(col => frozenColumns.includes(col.columnName))
+                      .map(col => col.columnName);
+                    const frozenIndex = visibleFrozenColumns.indexOf(column.columnName);
+                    
                     let leftPosition = 0;
                     if (isFrozen && frozenIndex > 0) {
                       for (let i = 0; i < frozenIndex; i++) {
-                        const frozenCol = frozenColumns[i];
+                        const frozenCol = visibleFrozenColumns[i];
                         // 체크박스 컬럼은 48px 고정
                         const frozenColWidth = frozenCol === "__checkbox__" ? 48 : columnWidths[frozenCol] || 150;
                         leftPosition += frozenColWidth;
@@ -5716,7 +5964,12 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                                 <Lock className="text-muted-foreground h-3 w-3" />
                               </span>
                             )}
-                            <span>{columnLabels[column.columnName] || column.displayName}</span>
+                            <span>
+                              {/* langKey가 있으면 다국어 번역 사용 */}
+                              {(column as any).langKey 
+                                ? getTranslatedText((column as any).langKey, columnLabels[column.columnName] || column.displayName || column.columnName)
+                                : columnLabels[column.columnName] || column.displayName}
+                            </span>
                             {column.sortable !== false && sortColumn === column.columnName && (
                               <span>{sortDirection === "asc" ? "↑" : "↓"}</span>
                             )}
@@ -5764,16 +6017,16 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                                         )}
                                       </div>
                                       <div className="max-h-48 space-y-1 overflow-y-auto">
-                                        {columnUniqueValues[column.columnName]?.slice(0, 50).map((val) => {
-                                          const isSelected = headerFilters[column.columnName]?.has(val);
+                                        {columnUniqueValues[column.columnName]?.slice(0, 50).map((item) => {
+                                          const isSelected = headerFilters[column.columnName]?.has(item.value);
                                           return (
                                             <div
-                                              key={val}
+                                              key={item.value}
                                               className={cn(
                                                 "hover:bg-muted flex cursor-pointer items-center gap-2 rounded px-2 py-1 text-xs",
                                                 isSelected && "bg-primary/10",
                                               )}
-                                              onClick={() => toggleHeaderFilter(column.columnName, val)}
+                                              onClick={() => toggleHeaderFilter(column.columnName, item.value)}
                                             >
                                               <div
                                                 className={cn(
@@ -5783,7 +6036,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                                               >
                                                 {isSelected && <Check className="text-primary-foreground h-3 w-3" />}
                                               </div>
-                                              <span className="truncate">{val || "(빈 값)"}</span>
+                                              <span className="truncate">{item.label || "(빈 값)"}</span>
                                             </div>
                                           );
                                         })}
@@ -5956,13 +6209,17 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                                 const isNumeric = inputType === "number" || inputType === "decimal";
 
                                 const isFrozen = frozenColumns.includes(column.columnName);
-                                const frozenIndex = frozenColumns.indexOf(column.columnName);
+                                
+                                // 틀고정된 컬럼의 left 위치 계산 (보이는 컬럼 기준으로 계산)
+                                const visibleFrozenColumns = visibleColumns
+                                  .filter(col => frozenColumns.includes(col.columnName))
+                                  .map(col => col.columnName);
+                                const frozenIndex = visibleFrozenColumns.indexOf(column.columnName);
 
-                                // 틀고정된 컬럼의 left 위치 계산
                                 let leftPosition = 0;
                                 if (isFrozen && frozenIndex > 0) {
                                   for (let i = 0; i < frozenIndex; i++) {
-                                    const frozenCol = frozenColumns[i];
+                                    const frozenCol = visibleFrozenColumns[i];
                                     // 체크박스 컬럼은 48px 고정
                                     const frozenColWidth =
                                       frozenCol === "__checkbox__" ? 48 : columnWidths[frozenCol] || 150;
@@ -6109,7 +6366,12 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                             const isNumeric = inputType === "number" || inputType === "decimal";
 
                             const isFrozen = frozenColumns.includes(column.columnName);
-                            const frozenIndex = frozenColumns.indexOf(column.columnName);
+                            
+                            // 틀고정된 컬럼의 left 위치 계산 (보이는 컬럼 기준으로 계산)
+                            const visibleFrozenColumns = visibleColumns
+                              .filter(col => frozenColumns.includes(col.columnName))
+                              .map(col => col.columnName);
+                            const frozenIndex = visibleFrozenColumns.indexOf(column.columnName);
 
                             // 셀 포커스 상태
                             const isCellFocused = focusedCell?.rowIndex === index && focusedCell?.colIndex === colIndex;
@@ -6123,11 +6385,10 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                             // 🆕 검색 하이라이트 여부
                             const isSearchHighlighted = searchHighlights.has(`${index}-${colIndex}`);
 
-                            // 틀고정된 컬럼의 left 위치 계산
                             let leftPosition = 0;
                             if (isFrozen && frozenIndex > 0) {
                               for (let i = 0; i < frozenIndex; i++) {
-                                const frozenCol = frozenColumns[i];
+                                const frozenCol = visibleFrozenColumns[i];
                                 // 체크박스 컬럼은 48px 고정
                                 const frozenColWidth =
                                   frozenCol === "__checkbox__" ? 48 : columnWidths[frozenCol] || 150;
@@ -6287,13 +6548,17 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                       const summary = summaryData[column.columnName];
                       const columnWidth = columnWidths[column.columnName];
                       const isFrozen = frozenColumns.includes(column.columnName);
-                      const frozenIndex = frozenColumns.indexOf(column.columnName);
+                      
+                      // 틀고정된 컬럼의 left 위치 계산 (보이는 컬럼 기준으로 계산)
+                      const visibleFrozenColumns = visibleColumns
+                        .filter(col => frozenColumns.includes(col.columnName))
+                        .map(col => col.columnName);
+                      const frozenIndex = visibleFrozenColumns.indexOf(column.columnName);
 
-                      // 틀고정된 컬럼의 left 위치 계산
                       let leftPosition = 0;
                       if (isFrozen && frozenIndex > 0) {
                         for (let i = 0; i < frozenIndex; i++) {
-                          const frozenCol = frozenColumns[i];
+                          const frozenCol = visibleFrozenColumns[i];
                           // 체크박스 컬럼은 48px 고정
                           const frozenColWidth = frozenCol === "__checkbox__" ? 48 : columnWidths[frozenCol] || 150;
                           leftPosition += frozenColWidth;
diff --git a/frontend/lib/registry/components/text-input/TextInputComponent.tsx b/frontend/lib/registry/components/text-input/TextInputComponent.tsx
index 8ffa8afe..fe290de3 100644
--- a/frontend/lib/registry/components/text-input/TextInputComponent.tsx
+++ b/frontend/lib/registry/components/text-input/TextInputComponent.tsx
@@ -51,6 +51,10 @@ export const TextInputComponent: React.FC<TextInputComponentProps> = ({
   // 숨김 상태 (props에서 전달받은 값 우선 사용)
   const isHidden = props.hidden !== undefined ? props.hidden : component.hidden || componentConfig.hidden || false;
 
+  // 수정 모드 여부 확인 (originalData가 있으면 수정 모드)
+  const originalData = props.originalData || (props as any)._originalData;
+  const isEditMode = originalData && Object.keys(originalData).length > 0;
+
   // 자동생성된 값 상태
   const [autoGeneratedValue, setAutoGeneratedValue] = useState<string>("");
 
@@ -99,11 +103,35 @@ export const TextInputComponent: React.FC<TextInputComponentProps> = ({
         return;
       }
 
+      // 🆕 수정 모드일 때는 채번 규칙 스킵 (기존 값 유지)
+      if (isEditMode) {
+        console.log("⏭️ 수정 모드 - 채번 규칙 스킵:", {
+          columnName: component.columnName,
+          originalValue: originalData?.[component.columnName],
+        });
+        hasGeneratedRef.current = true; // 생성 완료로 표시하여 재실행 방지
+        return;
+      }
+
       if (testAutoGeneration.enabled && testAutoGeneration.type !== "none") {
         // 폼 데이터에 이미 값이 있으면 자동생성하지 않음
         const currentFormValue = formData?.[component.columnName];
         const currentComponentValue = component.value;
 
+        // 🆕 채번 규칙이 설정되어 있으면 항상 _numberingRuleId를 formData에 설정
+        // (값 생성 성공 여부와 관계없이, 저장 시점에 allocateCode를 호출하기 위함)
+        if (testAutoGeneration.type === "numbering_rule" && testAutoGeneration.options?.numberingRuleId) {
+          const ruleId = testAutoGeneration.options.numberingRuleId;
+          if (ruleId && ruleId !== "undefined" && ruleId !== "null" && ruleId !== "") {
+            const ruleIdKey = `${component.columnName}_numberingRuleId`;
+            // formData에 아직 설정되지 않은 경우에만 설정
+            if (isInteractive && onFormDataChange && !formData?.[ruleIdKey]) {
+              onFormDataChange(ruleIdKey, ruleId);
+              console.log("📝 채번 규칙 ID 사전 설정:", ruleIdKey, ruleId);
+            }
+          }
+        }
+
         // 자동생성된 값이 없고, 현재 값도 없을 때만 생성
         if (!autoGeneratedValue && !currentFormValue && !currentComponentValue) {
           isGeneratingRef.current = true; // 생성 시작 플래그
@@ -144,13 +172,6 @@ export const TextInputComponent: React.FC<TextInputComponentProps> = ({
             if (isInteractive && onFormDataChange && component.columnName) {
               console.log("📝 formData 업데이트:", component.columnName, generatedValue);
               onFormDataChange(component.columnName, generatedValue);
-
-              // 채번 규칙 ID도 함께 저장 (저장 시점에 실제 할당하기 위함)
-              if (testAutoGeneration.type === "numbering_rule" && testAutoGeneration.options?.numberingRuleId) {
-                const ruleIdKey = `${component.columnName}_numberingRuleId`;
-                onFormDataChange(ruleIdKey, testAutoGeneration.options.numberingRuleId);
-                console.log("📝 채번 규칙 ID 저장:", ruleIdKey, testAutoGeneration.options.numberingRuleId);
-              }
             }
           }
         } else if (!autoGeneratedValue && testAutoGeneration.type !== "none") {
@@ -164,7 +185,7 @@ export const TextInputComponent: React.FC<TextInputComponentProps> = ({
     };
 
     generateAutoValue();
-  }, [testAutoGeneration.enabled, testAutoGeneration.type, component.columnName, isInteractive]);
+  }, [testAutoGeneration.enabled, testAutoGeneration.type, component.columnName, isInteractive, isEditMode]);
 
   // 실제 화면에서 숨김 처리된 컴포넌트는 렌더링하지 않음
   if (isHidden && !isDesignMode) {
diff --git a/frontend/lib/registry/components/universal-form-modal/TableSectionRenderer.tsx b/frontend/lib/registry/components/universal-form-modal/TableSectionRenderer.tsx
index 405e2abf..120022a5 100644
--- a/frontend/lib/registry/components/universal-form-modal/TableSectionRenderer.tsx
+++ b/frontend/lib/registry/components/universal-form-modal/TableSectionRenderer.tsx
@@ -32,6 +32,8 @@ interface TableSectionRendererProps {
   onTableDataChange: (data: any[]) => void;
   // 조건부 테이블용 콜백 (조건별 데이터 변경)
   onConditionalTableDataChange?: (conditionValue: string, data: any[]) => void;
+  // 외부 데이터 (데이터 전달 모달열기 액션으로 전달받은 데이터)
+  groupedData?: Record<string, any>[];
   className?: string;
 }
 
@@ -337,6 +339,7 @@ export function TableSectionRenderer({
   onFormDataChange,
   onTableDataChange,
   onConditionalTableDataChange,
+  groupedData,
   className,
 }: TableSectionRendererProps) {
   // 테이블 데이터 상태 (일반 모드)
@@ -373,6 +376,13 @@ export function TableSectionRenderer({
   // 초기 데이터 로드 완료 플래그 (무한 루프 방지)
   const initialDataLoadedRef = React.useRef(false);
 
+  // 외부 데이터 로드 완료 플래그
+  const externalDataLoadedRef = React.useRef(false);
+
+  // 외부 데이터 소스 설정
+  const externalDataConfig = tableConfig.externalDataSource;
+  const isExternalDataMode = externalDataConfig?.enabled && externalDataConfig?.tableName;
+
   // 조건부 테이블 설정
   const conditionalConfig = tableConfig.conditionalTable;
   const isConditionalMode = conditionalConfig?.enabled ?? false;
@@ -381,6 +391,168 @@ export function TableSectionRenderer({
   const [dynamicOptions, setDynamicOptions] = useState<{ id: string; value: string; label: string }[]>([]);
   const [dynamicOptionsLoading, setDynamicOptionsLoading] = useState(false);
   const dynamicOptionsLoadedRef = React.useRef(false);
+  
+  // 소스 테이블의 카테고리 타입 컬럼 목록
+  const [sourceCategoryColumns, setSourceCategoryColumns] = useState<string[]>([]);
+
+  // 소스 테이블의 컬럼 라벨 (API에서 동적 로드)
+  const [sourceColumnLabels, setSourceColumnLabels] = useState<Record<string, string>>({});
+
+  // 카테고리 타입 컬럼의 옵션 (column.type === "category")
+  const [categoryOptionsMap, setCategoryOptionsMap] = useState<Record<string, { value: string; label: string }[]>>({});
+
+  // 외부 데이터(groupedData) 처리: 데이터 전달 모달열기 액션으로 전달받은 데이터를 초기 테이블 데이터로 설정
+  useEffect(() => {
+    // 외부 데이터 소스가 활성화되지 않았거나, groupedData가 없으면 스킵
+    if (!isExternalDataMode) return;
+    if (!groupedData || groupedData.length === 0) return;
+    // 이미 로드된 경우 스킵
+    if (externalDataLoadedRef.current) return;
+    
+    console.log("[TableSectionRenderer] 외부 데이터 처리 시작:", {
+      externalTableName: externalDataConfig?.tableName,
+      groupedDataCount: groupedData.length,
+      columns: tableConfig.columns?.length,
+    });
+
+    // groupedData를 테이블 컬럼 매핑에 따라 변환
+    const mappedData = groupedData.map((externalRow, index) => {
+      const newRow: Record<string, any> = {
+        _id: `external_${Date.now()}_${index}`,
+        _sourceData: externalRow, // 원본 데이터 보관
+      };
+
+      // 각 컬럼에 대해 externalField 또는 field로 값을 매핑
+      tableConfig.columns?.forEach((col) => {
+        // externalField가 설정되어 있으면 사용, 아니면 field와 동일한 이름으로 매핑
+        const externalFieldName = col.externalField || col.field;
+        const value = externalRow[externalFieldName];
+        
+        // 값이 있으면 설정
+        if (value !== undefined) {
+          newRow[col.field] = value;
+        } else if (col.defaultValue !== undefined) {
+          // 기본값이 설정되어 있으면 기본값 사용
+          newRow[col.field] = col.defaultValue;
+        }
+      });
+
+      return newRow;
+    });
+
+    console.log("[TableSectionRenderer] 외부 데이터 매핑 완료:", {
+      mappedCount: mappedData.length,
+      sampleRow: mappedData[0],
+    });
+
+    // 테이블 데이터 설정
+    setTableData(mappedData);
+    onTableDataChange(mappedData);
+    externalDataLoadedRef.current = true;
+  }, [isExternalDataMode, groupedData, tableConfig.columns, externalDataConfig?.tableName, onTableDataChange]);
+
+  // 소스 테이블의 카테고리 타입 컬럼 목록 로드
+  useEffect(() => {
+    const loadCategoryColumns = async () => {
+      if (!tableConfig.source.tableName) return;
+      
+      try {
+        const response = await apiClient.get(
+          `/table-categories/${tableConfig.source.tableName}/columns`
+        );
+        
+        if (response.data?.success && Array.isArray(response.data.data)) {
+          const categoryColNames = response.data.data.map(
+            (col: { columnName?: string; column_name?: string }) => 
+              col.columnName || col.column_name || ""
+          ).filter(Boolean);
+          setSourceCategoryColumns(categoryColNames);
+        }
+      } catch (error) {
+        console.error("카테고리 컬럼 목록 조회 실패:", error);
+      }
+    };
+    
+    loadCategoryColumns();
+  }, [tableConfig.source.tableName]);
+
+  // 소스 테이블의 컬럼 라벨 로드 (source.columnLabels가 비어있을 때만)
+  useEffect(() => {
+    const loadColumnLabels = async () => {
+      const sourceTableName = tableConfig.source.tableName;
+      if (!sourceTableName) return;
+      
+      // 이미 source.columnLabels가 설정되어 있으면 스킵
+      if (tableConfig.source.columnLabels && Object.keys(tableConfig.source.columnLabels).length > 0) {
+        return;
+      }
+      
+      try {
+        const response = await apiClient.get(`/table-management/tables/${sourceTableName}/columns`);
+        
+        if (response.data?.success && response.data.data) {
+          const columnsData = response.data.data.columns || response.data.data || [];
+          const labels: Record<string, string> = {};
+          
+          for (const col of columnsData) {
+            const colName = col.column_name || col.columnName;
+            // displayName: API에서 반환하는 라벨 (COALESCE(cl.column_label, c.column_name))
+            const colLabel = col.displayName || col.column_label || col.columnLabel || col.comment;
+            // 라벨이 컬럼명과 다를 때만 저장 (의미있는 라벨인 경우)
+            if (colName && colLabel && colLabel !== colName) {
+              labels[colName] = colLabel;
+            }
+          }
+          
+          setSourceColumnLabels(labels);
+        }
+      } catch (error) {
+        console.error("소스 테이블 컬럼 라벨 조회 실패:", error);
+      }
+    };
+    
+    loadColumnLabels();
+  }, [tableConfig.source.tableName, tableConfig.source.columnLabels]);
+
+  // 카테고리 타입 컬럼의 옵션 로드
+  useEffect(() => {
+    const loadCategoryOptions = async () => {
+      const sourceTableName = tableConfig.source.tableName;
+      if (!sourceTableName) return;
+      if (!tableConfig.columns) return;
+
+      // 카테고리 타입인 컬럼만 필터링
+      const categoryColumns = tableConfig.columns.filter((col) => col.type === "category");
+      if (categoryColumns.length === 0) return;
+
+      const newOptionsMap: Record<string, { value: string; label: string }[]> = {};
+
+      for (const col of categoryColumns) {
+        // 소스 필드 또는 필드명으로 카테고리 값 조회
+        const actualColumnName = col.sourceField || col.field;
+        if (!actualColumnName) continue;
+
+        try {
+          const { getCategoryValues } = await import("@/lib/api/tableCategoryValue");
+          const result = await getCategoryValues(sourceTableName, actualColumnName, false);
+          
+          if (result && result.success && Array.isArray(result.data)) {
+            const options = result.data.map((item: any) => ({
+              value: item.valueCode || item.value_code || item.value || "",
+              label: item.valueLabel || item.displayLabel || item.display_label || item.label || item.valueCode || item.value_code || item.value || "",
+            }));
+            newOptionsMap[col.field] = options;
+          }
+        } catch (error) {
+          console.error(`카테고리 옵션 로드 실패 (${col.field}):`, error);
+        }
+      }
+
+      setCategoryOptionsMap((prev) => ({ ...prev, ...newOptionsMap }));
+    };
+
+    loadCategoryOptions();
+  }, [tableConfig.source.tableName, tableConfig.columns]);
 
   // 조건부 테이블: 동적 옵션 로드 (optionSource 설정이 있는 경우)
   useEffect(() => {
@@ -788,13 +960,22 @@ export function TableSectionRenderer({
     // 이미 초기화되었으면 스킵
     if (initialDataLoadedRef.current) return;
 
-    const tableSectionKey = `_tableSection_${sectionId}`;
+    const tableSectionKey = `__tableSection_${sectionId}`;
     const initialData = formData[tableSectionKey];
 
+    console.log("[TableSectionRenderer] 초기 데이터 확인:", {
+      sectionId,
+      tableSectionKey,
+      hasInitialData: !!initialData,
+      initialDataLength: Array.isArray(initialData) ? initialData.length : 0,
+      formDataKeys: Object.keys(formData).filter(k => k.startsWith("__tableSection_")),
+    });
+
     if (Array.isArray(initialData) && initialData.length > 0) {
       console.log("[TableSectionRenderer] 초기 데이터 로드:", {
         sectionId,
         itemCount: initialData.length,
+        firstItem: initialData[0],
       });
       setTableData(initialData);
       initialDataLoadedRef.current = true;
@@ -814,9 +995,15 @@ export function TableSectionRenderer({
         baseColumn.selectOptions = dynamicSelectOptionsMap[col.field];
       }
 
+      // 카테고리 타입인 경우 옵션 적용 및 select 타입으로 변환
+      if (col.type === "category" && categoryOptionsMap[col.field]) {
+        baseColumn.type = "select"; // RepeaterTable에서 select로 렌더링
+        baseColumn.selectOptions = categoryOptionsMap[col.field];
+      }
+
       return baseColumn;
     });
-  }, [tableConfig.columns, dynamicSelectOptionsMap]);
+  }, [tableConfig.columns, dynamicSelectOptionsMap, categoryOptionsMap]);
 
   // 원본 계산 규칙 (조건부 계산 포함)
   const originalCalculationRules: TableCalculationRule[] = useMemo(
@@ -1268,7 +1455,12 @@ export function TableSectionRenderer({
   const sourceTable = source.tableName;
   const sourceColumns = source.displayColumns;
   const sourceSearchFields = source.searchColumns;
-  const columnLabels = source.columnLabels || {};
+  // 컬럼 라벨: source.columnLabels가 있으면 우선 사용, 없으면 동적 로드된 라벨 사용
+  const columnLabels = useMemo(() => {
+    const configLabels = source.columnLabels || {};
+    // 설정된 라벨이 있으면 설정 우선, 없으면 API에서 로드한 라벨 사용
+    return { ...sourceColumnLabels, ...configLabels };
+  }, [source.columnLabels, sourceColumnLabels]);
   const modalTitle = uiConfig?.modalTitle || "항목 검색 및 선택";
   const multiSelect = uiConfig?.multiSelect ?? true;
 
@@ -1281,16 +1473,25 @@ export function TableSectionRenderer({
   const addRowButtonText = uiConfig?.addRowButtonText || "직접 입력";
 
   // 기본 필터 조건 생성 (사전 필터만 - 모달 필터는 ItemSelectionModal에서 처리)
+  // 연산자별로 특수 키 형식 사용: column__operator (예: division__in)
   const baseFilterCondition: Record<string, any> = useMemo(() => {
     const condition: Record<string, any> = {};
     if (filters?.preFilters) {
       for (const filter of filters.preFilters) {
-        // 간단한 "=" 연산자만 처리 (확장 가능)
-        if (filter.operator === "=") {
+        if (!filter.column || filter.value === undefined || filter.value === "") continue;
+        
+        const operator = filter.operator || "=";
+        
+        if (operator === "=") {
+          // 기본 등호 연산자는 그대로 전달
           condition[filter.column] = filter.value;
+        } else {
+          // 다른 연산자는 특수 키 형식 사용: column__operator
+          condition[`${filter.column}__${operator}`] = filter.value;
         }
       }
     }
+    // console.log("[TableSectionRenderer] baseFilterCondition:", condition, "preFilters:", filters?.preFilters);
     return condition;
   }, [filters?.preFilters]);
 
@@ -1892,6 +2093,7 @@ export function TableSectionRenderer({
           onSelect={handleConditionalAddItems}
           columnLabels={columnLabels}
           modalFilters={modalFiltersForModal}
+          categoryColumns={sourceCategoryColumns}
         />
       </div>
     );
@@ -2000,6 +2202,7 @@ export function TableSectionRenderer({
         onSelect={handleAddItems}
         columnLabels={columnLabels}
         modalFilters={modalFiltersForModal}
+        categoryColumns={sourceCategoryColumns}
       />
     </div>
   );
diff --git a/frontend/lib/registry/components/universal-form-modal/UniversalFormModalComponent.tsx b/frontend/lib/registry/components/universal-form-modal/UniversalFormModalComponent.tsx
index 5f087b71..939bb5d5 100644
--- a/frontend/lib/registry/components/universal-form-modal/UniversalFormModalComponent.tsx
+++ b/frontend/lib/registry/components/universal-form-modal/UniversalFormModalComponent.tsx
@@ -19,11 +19,13 @@ import {
   AlertDialogTitle,
 } from "@/components/ui/alert-dialog";
 import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
-import { ChevronDown, ChevronUp, ChevronRight, Plus, Trash2, RefreshCw, Loader2 } from "lucide-react";
+import { ChevronDown, ChevronUp, ChevronRight, Plus, Trash2, Loader2, Check, ChevronsUpDown } from "lucide-react";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";
 import { toast } from "sonner";
 import { cn } from "@/lib/utils";
 import { apiClient } from "@/lib/api/client";
-import { generateNumberingCode, allocateNumberingCode, previewNumberingCode } from "@/lib/api/numberingRule";
+import { allocateNumberingCode, previewNumberingCode } from "@/lib/api/numberingRule";
 import { useCascadingDropdown } from "@/hooks/useCascadingDropdown";
 import { CascadingDropdownConfig } from "@/types/screen-management";
 
@@ -42,6 +44,7 @@ import { TableSectionRenderer } from "./TableSectionRenderer";
 
 /**
  * 🔗 연쇄 드롭다운 Select 필드 컴포넌트
+ * allowCustomInput이 true이면 Combobox 형태로 직접 입력 가능
  */
 interface CascadingSelectFieldProps {
   fieldId: string;
@@ -51,6 +54,7 @@ interface CascadingSelectFieldProps {
   onChange: (value: string) => void;
   placeholder?: string;
   disabled?: boolean;
+  allowCustomInput?: boolean;
 }
 
 const CascadingSelectField: React.FC<CascadingSelectFieldProps> = ({
@@ -61,12 +65,20 @@ const CascadingSelectField: React.FC<CascadingSelectFieldProps> = ({
   onChange,
   placeholder,
   disabled,
+  allowCustomInput = false,
 }) => {
+  const [open, setOpen] = useState(false);
+  const [inputValue, setInputValue] = useState(value || "");
   const { options, loading } = useCascadingDropdown({
     config,
     parentValue,
   });
 
+  // value가 외부에서 변경되면 inputValue도 동기화
+  useEffect(() => {
+    setInputValue(value || "");
+  }, [value]);
+
   const getPlaceholder = () => {
     if (!parentValue) {
       return config.emptyParentMessage || "상위 항목을 먼저 선택하세요";
@@ -82,9 +94,82 @@ const CascadingSelectField: React.FC<CascadingSelectFieldProps> = ({
 
   const isDisabled = disabled || !parentValue || loading;
 
+  // Combobox 형태 (직접 입력 허용)
+  if (allowCustomInput) {
+    return (
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <div className="relative w-full">
+            <Input
+              id={fieldId}
+              value={inputValue}
+              onChange={(e) => {
+                setInputValue(e.target.value);
+                onChange(e.target.value);
+              }}
+              placeholder={getPlaceholder()}
+              disabled={isDisabled}
+              className="w-full pr-8"
+            />
+            <Button
+              type="button"
+              variant="ghost"
+              size="sm"
+              className="absolute right-0 top-0 h-full px-2 hover:bg-transparent"
+              onClick={() => !isDisabled && setOpen(!open)}
+              disabled={isDisabled}
+            >
+              {loading ? (
+                <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
+              ) : (
+                <ChevronsUpDown className="h-4 w-4 text-muted-foreground" />
+              )}
+            </Button>
+          </div>
+        </PopoverTrigger>
+        <PopoverContent className="w-[--radix-popover-trigger-width] p-0" align="start">
+          <Command>
+            <CommandInput placeholder="검색..." className="h-9" />
+            <CommandList>
+              <CommandEmpty>
+                {!parentValue
+                  ? config.emptyParentMessage || "상위 항목을 먼저 선택하세요"
+                  : config.noOptionsMessage || "선택 가능한 항목이 없습니다"}
+              </CommandEmpty>
+              <CommandGroup>
+                {options
+                  .filter((option) => option.value && option.value !== "")
+                  .map((option) => (
+                    <CommandItem
+                      key={option.value}
+                      value={option.label}
+                      onSelect={() => {
+                        setInputValue(option.label);
+                        onChange(option.value);
+                        setOpen(false);
+                      }}
+                    >
+                      <Check
+                        className={cn(
+                          "mr-2 h-4 w-4",
+                          value === option.value ? "opacity-100" : "opacity-0"
+                        )}
+                      />
+                      {option.label}
+                    </CommandItem>
+                  ))}
+              </CommandGroup>
+            </CommandList>
+          </Command>
+        </PopoverContent>
+      </Popover>
+    );
+  }
+
+  // 기본 Select 형태 (목록에서만 선택)
   return (
     <Select value={value || ""} onValueChange={onChange} disabled={isDisabled}>
-      <SelectTrigger id={fieldId} className="w-full">
+      <SelectTrigger id={fieldId} className="w-full" size="default">
         {loading ? (
           <div className="flex items-center gap-2">
             <Loader2 className="h-4 w-4 animate-spin" />
@@ -139,6 +224,7 @@ export function UniversalFormModalComponent({
 }: UniversalFormModalComponentProps & { _initialData?: any; _originalData?: any; _groupedData?: any }) {
   // initialData 우선순위: 직접 전달된 prop > DynamicComponentRenderer에서 전달된 prop
   const initialData = propInitialData || _initialData;
+
   // 설정 병합
   const config: UniversalFormModalConfig = useMemo(() => {
     const componentConfig = component?.config || {};
@@ -155,11 +241,6 @@ export function UniversalFormModalComponent({
         ...defaultConfig.saveConfig,
         ...propConfig?.saveConfig,
         ...componentConfig.saveConfig,
-        multiRowSave: {
-          ...defaultConfig.saveConfig.multiRowSave,
-          ...propConfig?.saveConfig?.multiRowSave,
-          ...componentConfig.saveConfig?.multiRowSave,
-        },
         afterSave: {
           ...defaultConfig.saveConfig.afterSave,
           ...propConfig?.saveConfig?.afterSave,
@@ -194,8 +275,9 @@ export function UniversalFormModalComponent({
     [tableKey: string]: Record<string, any>[];
   }>({});
 
-  // 로딩 상태
-  const [saving, setSaving] = useState(false);
+  // 채번규칙 원본 값 추적 (수동 모드 감지용)
+  // key: columnName, value: 자동 생성된 원본 값
+  const [numberingOriginalValues, setNumberingOriginalValues] = useState<Record<string, string>>({});
 
   // 🆕 수정 모드: 원본 그룹 데이터 (INSERT/UPDATE/DELETE 추적용)
   const [originalGroupedData, setOriginalGroupedData] = useState<any[]>([]);
@@ -216,47 +298,46 @@ export function UniversalFormModalComponent({
 
   // 초기화 - 최초 마운트 시 또는 initialData가 변경되었을 때 실행
   useEffect(() => {
-    console.log("[UniversalFormModal] useEffect 시작", {
-      initialData,
-      hasInitialized: hasInitialized.current,
-      lastInitializedId: lastInitializedId.current,
-    });
-    
+    // console.log("[UniversalFormModal] useEffect 시작", {
+    //   initialData,
+    //   hasInitialized: hasInitialized.current,
+    //   lastInitializedId: lastInitializedId.current,
+    // });
+
     // initialData에서 ID 값 추출 (id, ID, objid 등)
     const currentId = initialData?.id || initialData?.ID || initialData?.objid;
     const currentIdString = currentId !== undefined ? String(currentId) : undefined;
-    
+
     // 생성 모드에서 부모로부터 전달받은 데이터 해시 (ID가 없을 때만)
-    const createModeDataHash = !currentIdString && initialData && Object.keys(initialData).length > 0
-      ? JSON.stringify(initialData)
-      : undefined;
+    const createModeDataHash =
+      !currentIdString && initialData && Object.keys(initialData).length > 0 ? JSON.stringify(initialData) : undefined;
 
     // 이미 초기화되었고, ID가 동일하고, 생성 모드 데이터도 동일하면 스킵
     if (hasInitialized.current && lastInitializedId.current === currentIdString) {
       // 생성 모드에서 데이터가 새로 전달된 경우는 재초기화 필요
       if (!createModeDataHash || capturedInitialData.current) {
-        console.log("[UniversalFormModal] 초기화 스킵 - 이미 초기화됨");
+        // console.log("[UniversalFormModal] 초기화 스킵 - 이미 초기화됨");
         // 🆕 채번 플래그가 true인데 formData에 값이 없으면 재생성 필요
         // (컴포넌트 remount로 인해 state가 초기화된 경우)
         return;
       }
     }
-    
+
     // 🆕 컴포넌트 remount 감지: hasInitialized가 true인데 formData가 비어있으면 재초기화
     // (React의 Strict Mode나 EmbeddedScreen 리렌더링으로 인한 remount)
     if (hasInitialized.current && !currentIdString) {
-      console.log("[UniversalFormModal] 컴포넌트 remount 감지 - 채번 플래그 초기화");
+      // console.log("[UniversalFormModal] 컴포넌트 remount 감지 - 채번 플래그 초기화");
       numberingGeneratedRef.current = false;
       isGeneratingRef.current = false;
     }
 
     // 🆕 수정 모드: initialData에 데이터가 있으면서 ID가 변경된 경우 재초기화
     if (hasInitialized.current && currentIdString && lastInitializedId.current !== currentIdString) {
-      console.log("[UniversalFormModal] ID 변경 감지 - 재초기화:", {
-        prevId: lastInitializedId.current,
-        newId: currentIdString,
-        initialData: initialData,
-      });
+      // console.log("[UniversalFormModal] ID 변경 감지 - 재초기화:", {
+      //   prevId: lastInitializedId.current,
+      //   newId: currentIdString,
+      //   initialData: initialData,
+      // });
       // 채번 플래그 초기화 (새 항목이므로)
       numberingGeneratedRef.current = false;
       isGeneratingRef.current = false;
@@ -266,10 +347,10 @@ export function UniversalFormModalComponent({
     if (initialData && Object.keys(initialData).length > 0) {
       capturedInitialData.current = JSON.parse(JSON.stringify(initialData)); // 깊은 복사
       lastInitializedId.current = currentIdString;
-      console.log("[UniversalFormModal] 초기 데이터 캡처:", capturedInitialData.current);
+      // console.log("[UniversalFormModal] 초기 데이터 캡처:", capturedInitialData.current);
     }
 
-    console.log("[UniversalFormModal] initializeForm 호출 예정");
+    // console.log("[UniversalFormModal] initializeForm 호출 예정");
     hasInitialized.current = true;
     initializeForm();
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -279,7 +360,7 @@ export function UniversalFormModalComponent({
   useEffect(() => {
     if (!hasInitialized.current) return; // 최초 초기화 전이면 스킵
 
-    console.log("[useEffect config 변경] 재초기화 스킵 (채번 중복 방지)");
+    // console.log("[useEffect config 변경] 재초기화 스킵 (채번 중복 방지)");
     // initializeForm(); // 주석 처리 - config 변경 시 재초기화 안 함 (채번 중복 방지)
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [config]);
@@ -287,7 +368,7 @@ export function UniversalFormModalComponent({
   // 컴포넌트 unmount 시 채번 플래그 초기화
   useEffect(() => {
     return () => {
-      console.log("[채번] 컴포넌트 unmount - 플래그 초기화");
+      // console.log("[채번] 컴포넌트 unmount - 플래그 초기화");
       numberingGeneratedRef.current = false;
       isGeneratingRef.current = false;
     };
@@ -312,6 +393,14 @@ export function UniversalFormModalComponent({
       console.log("[UniversalFormModal] beforeFormSave 이벤트 수신");
       console.log("[UniversalFormModal] 설정된 필드 목록:", Array.from(configuredFields));
 
+      // 🆕 시스템 필드 병합: id는 설정 여부와 관계없이 항상 전달 (UPDATE/INSERT 판단용)
+      // - 신규 등록: formData.id가 없으므로 영향 없음
+      // - 편집 모드: formData.id가 있으면 메인 테이블 UPDATE에 사용
+      if (formData.id !== undefined && formData.id !== null && formData.id !== "") {
+        event.detail.formData.id = formData.id;
+        console.log(`[UniversalFormModal] 시스템 필드 병합: id =`, formData.id);
+      }
+
       // UniversalFormModal에 설정된 필드만 병합 (채번 규칙 포함)
       // 외부 formData에 이미 값이 있어도 UniversalFormModal 값으로 덮어씀
       // (UniversalFormModal이 해당 필드의 주인이므로)
@@ -337,6 +426,21 @@ export function UniversalFormModalComponent({
         }
       }
 
+      // 🆕 테이블 섹션 데이터 병합 (품목 리스트 등)
+      // 참고: initializeForm에서 DB 로드 시 __tableSection_ (더블), 
+      //       handleTableDataChange에서 수정 시 _tableSection_ (싱글) 사용
+      for (const [key, value] of Object.entries(formData)) {
+        // 싱글/더블 언더스코어 모두 처리
+        if ((key.startsWith("_tableSection_") || key.startsWith("__tableSection_")) && Array.isArray(value)) {
+          // 저장 시에는 _tableSection_ 키로 통일 (buttonActions.ts에서 이 키를 기대)
+          const normalizedKey = key.startsWith("__tableSection_") 
+            ? key.replace("__tableSection_", "_tableSection_") 
+            : key;
+          event.detail.formData[normalizedKey] = value;
+          console.log(`[UniversalFormModal] 테이블 섹션 병합: ${key} → ${normalizedKey}, ${value.length}개 항목`);
+        }
+      }
+
       // 🆕 수정 모드: 원본 그룹 데이터 전달 (UPDATE/DELETE 추적용)
       if (originalGroupedData.length > 0) {
         event.detail.formData._originalGroupedData = originalGroupedData;
@@ -359,15 +463,9 @@ export function UniversalFormModalComponent({
     // 테이블 타입 섹션 찾기
     const tableSection = config.sections.find((s) => s.type === "table");
     if (!tableSection) {
-      console.log("[UniversalFormModal] 테이블 섹션 없음 - _groupedData 무시");
       return;
     }
 
-    console.log("[UniversalFormModal] 수정 모드 - 테이블 섹션 초기화:", {
-      sectionId: tableSection.id,
-      itemCount: _groupedData.length,
-    });
-
     // 원본 데이터 저장 (수정/삭제 추적용)
     setOriginalGroupedData(JSON.parse(JSON.stringify(_groupedData)));
 
@@ -421,31 +519,31 @@ export function UniversalFormModalComponent({
       }
 
       if (isGeneratingRef.current) {
-        console.log("[채번] 생성 진행 중 - 스킵");
+        // console.log("[채번] 생성 진행 중 - 스킵");
         return;
       }
 
       isGeneratingRef.current = true; // 진행 중 표시
-      console.log("[채번] 생성 시작", { sectionsCount: config.sections.length });
+      // console.log("[채번] 생성 시작", { sectionsCount: config.sections.length });
 
       const updatedData = { ...currentFormData };
       let hasChanges = false;
 
       for (const section of config.sections) {
-        console.log("[채번] 섹션 검사:", section.title, { type: section.type, repeatable: section.repeatable, fieldsCount: section.fields?.length });
+        // console.log("[채번] 섹션 검사:", section.title, { type: section.type, repeatable: section.repeatable, fieldsCount: section.fields?.length });
         if (section.repeatable || section.type === "table") continue;
 
-        for (const field of (section.fields || [])) {
+        for (const field of section.fields || []) {
           // generateOnOpen은 기본값 true (undefined일 경우 true로 처리)
           const shouldGenerateOnOpen = field.numberingRule?.generateOnOpen !== false;
-          console.log("[채번] 필드 검사:", field.columnName, {
-            hasNumberingRule: !!field.numberingRule,
-            enabled: field.numberingRule?.enabled,
-            generateOnOpen: field.numberingRule?.generateOnOpen,
-            shouldGenerateOnOpen,
-            ruleId: field.numberingRule?.ruleId,
-            currentValue: updatedData[field.columnName],
-          });
+          // console.log("[채번] 필드 검사:", field.columnName, {
+          //   hasNumberingRule: !!field.numberingRule,
+          //   enabled: field.numberingRule?.enabled,
+          //   generateOnOpen: field.numberingRule?.generateOnOpen,
+          //   shouldGenerateOnOpen,
+          //   ruleId: field.numberingRule?.ruleId,
+          //   currentValue: updatedData[field.columnName],
+          // });
           if (
             field.numberingRule?.enabled &&
             shouldGenerateOnOpen &&
@@ -453,22 +551,29 @@ export function UniversalFormModalComponent({
             !updatedData[field.columnName]
           ) {
             try {
-              console.log(`[채번 미리보기 API 호출] ${field.columnName}, ruleId: ${field.numberingRule.ruleId}`);
+              // console.log(`[채번 미리보기 API 호출] ${field.columnName}, ruleId: ${field.numberingRule.ruleId}`);
               // generateOnOpen: 미리보기만 표시 (DB 시퀀스 증가 안 함)
               const response = await previewNumberingCode(field.numberingRule.ruleId);
               if (response.success && response.data?.generatedCode) {
-                updatedData[field.columnName] = response.data.generatedCode;
+                const generatedCode = response.data.generatedCode;
+                updatedData[field.columnName] = generatedCode;
 
                 // 저장 시 실제 할당을 위해 ruleId 저장 (TextInput과 동일한 키 형식)
                 const ruleIdKey = `${field.columnName}_numberingRuleId`;
                 updatedData[ruleIdKey] = field.numberingRule.ruleId;
 
+                // 원본 채번 값 저장 (수동 모드 감지용)
+                setNumberingOriginalValues((prev) => ({
+                  ...prev,
+                  [field.columnName]: generatedCode,
+                }));
+
                 hasChanges = true;
                 numberingGeneratedRef.current = true; // 생성 완료 표시
-                console.log(
-                  `[채번 미리보기 완료] ${field.columnName} = ${response.data.generatedCode} (저장 시 실제 할당)`,
-                );
-                console.log(`[채번 규칙 ID 저장] ${ruleIdKey} = ${field.numberingRule.ruleId}`);
+                // console.log(
+                //   `[채번 미리보기 완료] ${field.columnName} = ${response.data.generatedCode} (저장 시 실제 할당)`,
+                // );
+                // console.log(`[채번 규칙 ID 저장] ${ruleIdKey} = ${field.numberingRule.ruleId}`);
 
                 // 부모 컴포넌트에도 ruleId 전달 (ModalRepeaterTable → ScreenModal)
                 if (onChange) {
@@ -476,7 +581,7 @@ export function UniversalFormModalComponent({
                     ...updatedData,
                     [ruleIdKey]: field.numberingRule.ruleId,
                   });
-                  console.log(`[채번] 부모에게 ruleId 전달: ${ruleIdKey}`);
+                  // console.log(`[채번] 부모에게 ruleId 전달: ${ruleIdKey}`);
                 }
               }
             } catch (error) {
@@ -497,17 +602,17 @@ export function UniversalFormModalComponent({
 
   // 폼 초기화
   const initializeForm = useCallback(async () => {
-    console.log("[initializeForm] 시작");
+    // console.log("[initializeForm] 시작");
 
     // 캡처된 initialData 사용 (props로 전달된 initialData가 아닌)
     const effectiveInitialData = capturedInitialData.current || initialData;
 
-    console.log("[initializeForm] 초기 데이터:", {
-      capturedInitialData: capturedInitialData.current,
-      initialData: initialData,
-      effectiveInitialData: effectiveInitialData,
-      hasData: effectiveInitialData && Object.keys(effectiveInitialData).length > 0,
-    });
+    // console.log("[initializeForm] 초기 데이터:", {
+    //   capturedInitialData: capturedInitialData.current,
+    //   initialData: initialData,
+    //   effectiveInitialData: effectiveInitialData,
+    //   hasData: effectiveInitialData && Object.keys(effectiveInitialData).length > 0,
+    // });
 
     const newFormData: FormDataState = {};
     const newRepeatSections: { [sectionId: string]: RepeatSectionItem[] } = {};
@@ -534,7 +639,7 @@ export function UniversalFormModalComponent({
         continue;
       } else {
         // 일반 섹션 필드 초기화
-        for (const field of (section.fields || [])) {
+        for (const field of section.fields || []) {
           // 기본값 설정
           let value = field.defaultValue ?? "";
 
@@ -556,14 +661,16 @@ export function UniversalFormModalComponent({
         if (section.optionalFieldGroups) {
           for (const group of section.optionalFieldGroups) {
             const key = `${section.id}-${group.id}`;
-            
+
             // 수정 모드: triggerField 값이 triggerValueOnAdd와 일치하면 그룹 자동 활성화
             if (effectiveInitialData && group.triggerField && group.triggerValueOnAdd !== undefined) {
               const triggerValue = effectiveInitialData[group.triggerField];
               if (triggerValue === group.triggerValueOnAdd) {
                 newActivatedGroups.add(key);
-                console.log(`[initializeForm] 옵셔널 그룹 자동 활성화: ${key}, triggerField=${group.triggerField}, value=${triggerValue}`);
-                
+                console.log(
+                  `[initializeForm] 옵셔널 그룹 자동 활성화: ${key}, triggerField=${group.triggerField}, value=${triggerValue}`,
+                );
+
                 // 활성화된 그룹의 필드값도 초기화
                 for (const field of group.fields || []) {
                   let value = field.defaultValue ?? "";
@@ -575,7 +682,7 @@ export function UniversalFormModalComponent({
                 }
               }
             }
-            
+
             // 신규 등록 모드: triggerValueOnRemove를 기본값으로 설정
             if (group.triggerField && group.triggerValueOnRemove !== undefined) {
               // effectiveInitialData에 해당 값이 없는 경우에만 기본값 설정
@@ -588,6 +695,258 @@ export function UniversalFormModalComponent({
       }
     }
 
+    // 🆕 테이블 섹션(type: "table") 디테일 데이터 로드 (마스터-디테일 구조)
+    // 수정 모드일 때 디테일 테이블에서 데이터 가져오기
+    if (effectiveInitialData) {
+      console.log("[initializeForm] 테이블 섹션 디테일 로드 시작", {
+        sectionsCount: config.sections.length,
+        effectiveInitialDataKeys: Object.keys(effectiveInitialData),
+      });
+
+      for (const section of config.sections) {
+        if (section.type !== "table" || !section.tableConfig) {
+          continue;
+        }
+
+        const tableConfig = section.tableConfig;
+        // editConfig는 타입에 정의되지 않았지만 런타임에 존재할 수 있음
+        const editConfig = (tableConfig as any).editConfig;
+        const saveConfig = tableConfig.saveConfig;
+
+        console.log(`[initializeForm] 테이블 섹션 ${section.id} 검사:`, {
+          hasEditConfig: !!editConfig,
+          loadOnEdit: editConfig?.loadOnEdit,
+          hasSaveConfig: !!saveConfig,
+          targetTable: saveConfig?.targetTable,
+          linkColumn: editConfig?.linkColumn,
+        });
+
+        // 수정 모드 로드 설정 확인 (기본값: true)
+        if (editConfig?.loadOnEdit === false) {
+          console.log(`[initializeForm] 테이블 섹션 ${section.id}: loadOnEdit=false, 스킵`);
+          continue;
+        }
+
+        // 디테일 테이블과 연결 정보 확인
+        const detailTable = saveConfig?.targetTable;
+        let linkColumn = editConfig?.linkColumn;
+
+        if (!detailTable) {
+          console.log(`[initializeForm] 테이블 섹션 ${section.id}: saveConfig.targetTable 미설정, 스킵`);
+          continue;
+        }
+
+        // linkColumn이 설정되지 않았으면, 디테일 테이블 컬럼 정보 조회하여 자동 감지
+        if (!linkColumn?.masterField || !linkColumn?.detailField) {
+          try {
+            // 마스터 테이블명 확인 (saveConfig에서)
+            // 1. customApiSave.multiTable.mainTable.tableName (다중 테이블 저장)
+            // 2. saveConfig.tableName (단일 테이블 저장)
+            const masterTable =
+              config.saveConfig?.customApiSave?.multiTable?.mainTable?.tableName || config.saveConfig?.tableName;
+
+            // 디테일 테이블의 컬럼 목록 조회
+            const columnsResponse = await apiClient.get(`/table-management/tables/${detailTable}/columns`);
+
+            if (columnsResponse.data?.success && columnsResponse.data?.data) {
+              // API 응답 구조: { success, data: { columns: [...], total, page, ... } }
+              const columnsArray = columnsResponse.data.data.columns || columnsResponse.data.data || [];
+              const detailColumnsData = Array.isArray(columnsArray) ? columnsArray : [];
+              const detailColumns = detailColumnsData.map((col: any) => col.column_name || col.columnName);
+              const masterKeys = Object.keys(effectiveInitialData);
+
+              console.log(`[initializeForm] 테이블 섹션 ${section.id}: 연결 필드 자동 감지`, {
+                masterTable,
+                detailTable,
+                detailColumnsCount: detailColumnsData.length,
+              });
+
+              // 방법 1: 엔티티 관계 기반 감지 (정확)
+              // 디테일 테이블에서 마스터 테이블을 참조하는 엔티티 컬럼 찾기
+              if (masterTable) {
+                for (const col of detailColumnsData) {
+                  const colName = col.column_name || col.columnName;
+                  const inputType = col.input_type || col.inputType;
+
+                  // 엔티티 타입 컬럼 확인
+                  if (inputType === "entity") {
+                    // reference_table 또는 detail_settings에서 참조 테이블 확인
+                    let refTable = col.reference_table || col.referenceTable;
+
+                    // detail_settings에서 referenceTable 확인
+                    if (!refTable && col.detail_settings) {
+                      try {
+                        const settings =
+                          typeof col.detail_settings === "string"
+                            ? JSON.parse(col.detail_settings)
+                            : col.detail_settings;
+                        refTable = settings.referenceTable;
+                      } catch {
+                        // JSON 파싱 실패 무시
+                      }
+                    }
+
+                    // 마스터 테이블을 참조하는 컬럼 발견
+                    if (refTable === masterTable) {
+                      // 참조 컬럼 확인 (마스터 테이블의 어떤 컬럼을 참조하는지)
+                      let refColumn = col.reference_column || col.referenceColumn;
+                      if (!refColumn && col.detail_settings) {
+                        try {
+                          const settings =
+                            typeof col.detail_settings === "string"
+                              ? JSON.parse(col.detail_settings)
+                              : col.detail_settings;
+                          refColumn = settings.referenceColumn;
+                        } catch {
+                          // JSON 파싱 실패 무시
+                        }
+                      }
+
+                      // 마스터 데이터에 해당 컬럼 값이 있는지 확인
+                      if (refColumn && effectiveInitialData[refColumn]) {
+                        console.log(
+                          `[initializeForm] 테이블 섹션 ${section.id}: 엔티티 관계 감지 - ${colName} → ${masterTable}.${refColumn}`,
+                        );
+                        linkColumn = { masterField: refColumn, detailField: colName };
+                        break;
+                      }
+                    }
+                  }
+                }
+              }
+
+              // 방법 2: 공통 컬럼 패턴 기반 감지 (폴백)
+              // 엔티티 관계가 없으면 공통 컬럼명 패턴으로 찾기
+              if (!linkColumn) {
+                const priorityPatterns = ["_no", "_number", "_code", "_id"];
+
+                for (const pattern of priorityPatterns) {
+                  for (const masterKey of masterKeys) {
+                    if (
+                      masterKey.endsWith(pattern) &&
+                      detailColumns.includes(masterKey) &&
+                      effectiveInitialData[masterKey] &&
+                      masterKey !== "id" &&
+                      masterKey !== "company_code"
+                    ) {
+                      console.log(`[initializeForm] 테이블 섹션 ${section.id}: 공통 컬럼 패턴 감지 - ${masterKey}`);
+                      linkColumn = { masterField: masterKey, detailField: masterKey };
+                      break;
+                    }
+                  }
+                  if (linkColumn) break;
+                }
+              }
+
+              // 방법 3: 일반 공통 컬럼 (마지막 폴백)
+              if (!linkColumn) {
+                for (const masterKey of masterKeys) {
+                  if (
+                    detailColumns.includes(masterKey) &&
+                    effectiveInitialData[masterKey] &&
+                    masterKey !== "id" &&
+                    masterKey !== "company_code" &&
+                    !masterKey.startsWith("__")
+                  ) {
+                    console.log(`[initializeForm] 테이블 섹션 ${section.id}: 공통 컬럼 감지 - ${masterKey}`);
+                    linkColumn = { masterField: masterKey, detailField: masterKey };
+                    break;
+                  }
+                }
+              }
+            }
+          } catch (error) {
+            console.warn(`[initializeForm] 테이블 섹션 ${section.id}: 컬럼 정보 조회 실패`, error);
+          }
+        }
+
+        if (!linkColumn?.masterField || !linkColumn?.detailField) {
+          console.log(`[initializeForm] 테이블 섹션 ${section.id}: linkColumn 미설정 및 자동 감지 실패, 스킵`);
+          continue;
+        }
+
+        // 마스터 테이블의 연결 필드 값 가져오기
+        const masterValue = effectiveInitialData[linkColumn.masterField];
+        if (!masterValue) {
+          console.log(
+            `[initializeForm] 테이블 섹션 ${section.id}: masterField(${linkColumn.masterField}) 값 없음, 스킵`,
+          );
+          continue;
+        }
+
+        try {
+          console.log(`[initializeForm] 테이블 섹션 ${section.id}: 디테일 데이터 로드 시작`, {
+            detailTable,
+            linkColumn,
+            masterValue,
+          });
+
+          // 디테일 테이블에서 데이터 조회
+          // operator: "equals"를 사용하여 정확히 일치하는 값만 검색 (엔티티 타입 컬럼에서 중요)
+          const searchCondition: Record<string, any> = {
+            [linkColumn.detailField]: { value: masterValue, operator: "equals" },
+          };
+
+          console.log(
+            `[initializeForm] 테이블 섹션 ${section.id}: API 요청 - URL: /table-management/tables/${detailTable}/data`,
+          );
+          console.log(
+            `[initializeForm] 테이블 섹션 ${section.id}: API 요청 - search:`,
+            JSON.stringify(searchCondition),
+          );
+
+          const response = await apiClient.post(`/table-management/tables/${detailTable}/data`, {
+            search: searchCondition, // filters가 아닌 search로 전달
+            page: 1,
+            size: 1000, // pageSize가 아닌 size로 전달
+            autoFilter: { enabled: true }, // 멀티테넌시 필터 적용
+          });
+
+          console.log(
+            `[initializeForm] 테이블 섹션 ${section.id}: API 응답 - success: ${response.data?.success}, total: ${response.data?.data?.total}, dataLength: ${response.data?.data?.data?.length}`,
+          );
+
+          if (response.data?.success) {
+            // 다양한 응답 구조 처리
+            let items: any[] = [];
+            const data = response.data.data;
+
+            if (Array.isArray(data)) {
+              items = data;
+            } else if (data?.items && Array.isArray(data.items)) {
+              items = data.items;
+            } else if (data?.rows && Array.isArray(data.rows)) {
+              items = data.rows;
+            } else if (data?.data && Array.isArray(data.data)) {
+              items = data.data;
+            }
+
+            console.log(`[initializeForm] 테이블 섹션 ${section.id}: ${items.length}건 로드됨`, items);
+
+            // 테이블 섹션 데이터를 formData에 저장 (TableSectionRenderer에서 사용)
+            const tableSectionKey = `__tableSection_${section.id}`;
+            newFormData[tableSectionKey] = items;
+            console.log(`[initializeForm] 테이블 섹션 ${section.id}: formData[${tableSectionKey}]에 저장됨`);
+
+            // 🆕 원본 그룹 데이터 저장 (삭제 추적용)
+            // groupedDataInitializedRef가 false일 때만 설정 (true면 _groupedData useEffect에서 이미 처리됨)
+            // DB에서 로드한 데이터를 originalGroupedData에 저장해야 삭제 시 비교 가능
+            if (!groupedDataInitializedRef.current) {
+              setOriginalGroupedData((prev) => {
+                const newOriginal = [...prev, ...JSON.parse(JSON.stringify(items))];
+                console.log(`[initializeForm] 테이블 섹션 ${section.id}: originalGroupedData에 ${items.length}건 추가 (총 ${newOriginal.length}건)`);
+                return newOriginal;
+              });
+            } else {
+              console.log(`[initializeForm] 테이블 섹션 ${section.id}: _groupedData로 이미 초기화됨, originalGroupedData 설정 스킵`);
+            }
+          }
+        } catch (error) {
+          console.error(`[initializeForm] 테이블 섹션 ${section.id}: 디테일 데이터 로드 실패`, error);
+        }
+      }
+    }
+
     setFormData(newFormData);
     setRepeatSections(newRepeatSections);
     setCollapsedSections(newCollapsed);
@@ -599,35 +958,35 @@ export function UniversalFormModalComponent({
     if (multiTable && effectiveInitialData) {
       const pkColumn = multiTable.mainTable?.primaryKeyColumn;
       const pkValue = effectiveInitialData[pkColumn];
-      
+
       // PK 값이 있으면 수정 모드로 판단
       if (pkValue) {
         console.log("[initializeForm] 수정 모드 - 서브 테이블 데이터 로드 시작");
-        
+
         for (const subTableConfig of multiTable.subTables || []) {
           // loadOnEdit 옵션이 활성화된 경우에만 로드
           if (!subTableConfig.enabled || !subTableConfig.options?.loadOnEdit) {
             continue;
           }
-          
+
           const { tableName, linkColumn, repeatSectionId, fieldMappings, options } = subTableConfig;
           if (!tableName || !linkColumn?.subColumn || !repeatSectionId) {
             continue;
           }
-          
+
           try {
             // 서브 테이블에서 데이터 조회
             const filters: Record<string, any> = {
               [linkColumn.subColumn]: pkValue,
             };
-            
+
             // 서브 항목만 로드 (메인 항목 제외)
             if (options?.loadOnlySubItems && options?.mainMarkerColumn) {
               filters[options.mainMarkerColumn] = options.subMarkerValue ?? false;
             }
-            
+
             console.log(`[initializeForm] 서브 테이블 ${tableName} 조회:`, filters);
-            
+
             const response = await apiClient.get(`/table-management/tables/${tableName}/data`, {
               params: {
                 filters: JSON.stringify(filters),
@@ -635,11 +994,11 @@ export function UniversalFormModalComponent({
                 pageSize: 100,
               },
             });
-            
+
             if (response.data?.success && response.data?.data?.items) {
               const subItems = response.data.data.items;
               console.log(`[initializeForm] 서브 테이블 ${tableName} 데이터 ${subItems.length}건 로드됨`);
-              
+
               // 역매핑: 서브 테이블 데이터 → 반복 섹션 데이터
               const repeatItems: RepeatSectionItem[] = subItems.map((item: any, index: number) => {
                 const repeatItem: RepeatSectionItem = {
@@ -647,17 +1006,17 @@ export function UniversalFormModalComponent({
                   _index: index,
                   _originalData: item, // 원본 데이터 보관 (수정 시 필요)
                 };
-                
+
                 // 필드 매핑 역변환 (targetColumn → formField)
                 for (const mapping of fieldMappings || []) {
                   if (mapping.formField && mapping.targetColumn) {
                     repeatItem[mapping.formField] = item[mapping.targetColumn];
                   }
                 }
-                
+
                 return repeatItem;
               });
-              
+
               // 반복 섹션에 데이터 설정
               newRepeatSections[repeatSectionId] = repeatItems;
               setRepeatSections({ ...newRepeatSections });
@@ -671,9 +1030,9 @@ export function UniversalFormModalComponent({
     }
 
     // 채번규칙 자동 생성
-    console.log("[initializeForm] generateNumberingValues 호출");
+    // console.log("[initializeForm] generateNumberingValues 호출");
     await generateNumberingValues(newFormData);
-    console.log("[initializeForm] 완료");
+    // console.log("[initializeForm] 완료");
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [config]); // initialData는 의존성에서 제거 (capturedInitialData.current 사용)
 
@@ -684,7 +1043,7 @@ export function UniversalFormModalComponent({
       _index: index,
     };
 
-    for (const field of (section.fields || [])) {
+    for (const field of section.fields || []) {
       item[field.columnName] = field.defaultValue ?? "";
     }
 
@@ -694,8 +1053,68 @@ export function UniversalFormModalComponent({
   // 필드 값 변경 핸들러
   const handleFieldChange = useCallback(
     (columnName: string, value: any) => {
+      // 채번규칙 필드의 수동 모드 감지
+      const originalNumberingValue = numberingOriginalValues[columnName];
+      const ruleIdKey = `${columnName}_numberingRuleId`;
+
+      // 해당 필드의 채번규칙 설정 찾기
+      let fieldConfig: FormFieldConfig | undefined;
+      for (const section of config.sections) {
+        if (section.type === "table" || section.repeatable) continue;
+        fieldConfig = section.fields?.find((f) => f.columnName === columnName);
+        if (fieldConfig) break;
+        // 옵셔널 필드 그룹에서도 찾기
+        for (const group of section.optionalFieldGroups || []) {
+          fieldConfig = group.fields?.find((f) => f.columnName === columnName);
+          if (fieldConfig) break;
+        }
+        if (fieldConfig) break;
+      }
+
+      // 🆕 연쇄 드롭다운: 부모 필드 변경 시 자식 필드 초기화
+      const childFieldsToReset: string[] = [];
+      for (const section of config.sections) {
+        if (section.type === "table" || section.repeatable) continue;
+        for (const field of section.fields || []) {
+          // field.cascading 방식 체크
+          if (field.cascading?.enabled && field.cascading?.parentField === columnName) {
+            if (field.cascading.clearOnParentChange !== false) {
+              childFieldsToReset.push(field.columnName);
+            }
+          }
+          // selectOptions.cascading 방식 체크
+          if (field.selectOptions?.type === "cascading" && field.selectOptions?.cascading?.parentField === columnName) {
+            if (field.selectOptions.cascading.clearOnParentChange !== false) {
+              childFieldsToReset.push(field.columnName);
+            }
+          }
+        }
+      }
+
       setFormData((prev) => {
         const newData = { ...prev, [columnName]: value };
+
+        // 채번규칙이 활성화된 필드이고, "사용자 수정 가능"이 ON인 경우
+        if (fieldConfig?.numberingRule?.enabled && fieldConfig?.numberingRule?.editable && originalNumberingValue) {
+          // 사용자가 값을 수정했으면 (원본과 다르면) ruleId 제거 → 수동 모드
+          if (value !== originalNumberingValue) {
+            delete newData[ruleIdKey];
+            console.log(`[채번 수동 모드] ${columnName}: 사용자가 값 수정 → ruleId 제거`);
+          } else {
+            // 원본 값으로 복구하면 ruleId 복구 → 자동 모드
+            if (fieldConfig.numberingRule.ruleId) {
+              newData[ruleIdKey] = fieldConfig.numberingRule.ruleId;
+              console.log(`[채번 자동 모드] ${columnName}: 원본 값 복구 → ruleId 복구`);
+            }
+          }
+        }
+
+        // 🆕 연쇄 드롭다운 자식 필드 초기화
+        for (const childField of childFieldsToReset) {
+          newData[childField] = "";
+          console.log(`[연쇄 드롭다운] 부모 ${columnName} 변경 → 자식 ${childField} 초기화`);
+        }
+
         // onChange는 렌더링 외부에서 호출해야 함 (setTimeout 사용)
         if (onChange) {
           setTimeout(() => onChange(newData), 0);
@@ -703,7 +1122,7 @@ export function UniversalFormModalComponent({
         return newData;
       });
     },
-    [onChange],
+    [onChange, numberingOriginalValues, config.sections],
   );
 
   // 반복 섹션 필드 값 변경 핸들러
@@ -776,47 +1195,53 @@ export function UniversalFormModalComponent({
   }, []);
 
   // 옵셔널 필드 그룹 활성화
-  const activateOptionalFieldGroup = useCallback((sectionId: string, groupId: string) => {
-    const section = config.sections.find((s) => s.id === sectionId);
-    const group = section?.optionalFieldGroups?.find((g) => g.id === groupId);
-    if (!group) return;
+  const activateOptionalFieldGroup = useCallback(
+    (sectionId: string, groupId: string) => {
+      const section = config.sections.find((s) => s.id === sectionId);
+      const group = section?.optionalFieldGroups?.find((g) => g.id === groupId);
+      if (!group) return;
 
-    const key = `${sectionId}-${groupId}`;
-    setActivatedOptionalFieldGroups((prev) => {
-      const newSet = new Set(prev);
-      newSet.add(key);
-      return newSet;
-    });
+      const key = `${sectionId}-${groupId}`;
+      setActivatedOptionalFieldGroups((prev) => {
+        const newSet = new Set(prev);
+        newSet.add(key);
+        return newSet;
+      });
 
-    // 연동 필드 값 변경 (추가 시)
-    if (group.triggerField && group.triggerValueOnAdd !== undefined) {
-      handleFieldChange(group.triggerField, group.triggerValueOnAdd);
-    }
-  }, [config, handleFieldChange]);
+      // 연동 필드 값 변경 (추가 시)
+      if (group.triggerField && group.triggerValueOnAdd !== undefined) {
+        handleFieldChange(group.triggerField, group.triggerValueOnAdd);
+      }
+    },
+    [config, handleFieldChange],
+  );
 
   // 옵셔널 필드 그룹 비활성화
-  const deactivateOptionalFieldGroup = useCallback((sectionId: string, groupId: string) => {
-    const section = config.sections.find((s) => s.id === sectionId);
-    const group = section?.optionalFieldGroups?.find((g) => g.id === groupId);
-    if (!group) return;
+  const deactivateOptionalFieldGroup = useCallback(
+    (sectionId: string, groupId: string) => {
+      const section = config.sections.find((s) => s.id === sectionId);
+      const group = section?.optionalFieldGroups?.find((g) => g.id === groupId);
+      if (!group) return;
 
-    const key = `${sectionId}-${groupId}`;
-    setActivatedOptionalFieldGroups((prev) => {
-      const newSet = new Set(prev);
-      newSet.delete(key);
-      return newSet;
-    });
+      const key = `${sectionId}-${groupId}`;
+      setActivatedOptionalFieldGroups((prev) => {
+        const newSet = new Set(prev);
+        newSet.delete(key);
+        return newSet;
+      });
 
-    // 연동 필드 값 변경 (제거 시)
-    if (group.triggerField && group.triggerValueOnRemove !== undefined) {
-      handleFieldChange(group.triggerField, group.triggerValueOnRemove);
-    }
+      // 연동 필드 값 변경 (제거 시)
+      if (group.triggerField && group.triggerValueOnRemove !== undefined) {
+        handleFieldChange(group.triggerField, group.triggerValueOnRemove);
+      }
 
-    // 옵셔널 필드 그룹 필드 값 초기화
-    (group.fields || []).forEach((field) => {
-      handleFieldChange(field.columnName, field.defaultValue || "");
-    });
-  }, [config, handleFieldChange]);
+      // 옵셔널 필드 그룹 필드 값 초기화
+      (group.fields || []).forEach((field) => {
+        handleFieldChange(field.columnName, field.defaultValue || "");
+      });
+    },
+    [config, handleFieldChange],
+  );
 
   // Select 옵션 로드
   const loadSelectOptions = useCallback(
@@ -862,13 +1287,11 @@ export function UniversalFormModalComponent({
           // categoryKey 형식: "tableName.columnName"
           const [categoryTable, categoryColumn] = optionConfig.categoryKey.split(".");
           if (categoryTable && categoryColumn) {
-            const response = await apiClient.get(
-              `/table-categories/${categoryTable}/${categoryColumn}/values`
-            );
+            const response = await apiClient.get(`/table-categories/${categoryTable}/${categoryColumn}/values`);
             if (response.data?.success && response.data?.data) {
-              // 라벨값을 DB에 저장 (화면에 표시되는 값 그대로 저장)
+              // 코드값을 DB에 저장하고 라벨값을 화면에 표시
               options = response.data.data.map((item: any) => ({
-                value: item.valueLabel || item.value_label,
+                value: item.valueCode || item.value_code,
                 label: item.valueLabel || item.value_label,
               }));
             }
@@ -943,7 +1366,7 @@ export function UniversalFormModalComponent({
     for (const section of config.sections) {
       if (section.repeatable || section.type === "table") continue; // 반복 섹션 및 테이블 섹션은 별도 검증
 
-      for (const field of (section.fields || [])) {
+      for (const field of section.fields || []) {
         if (field.required && !field.hidden && !field.numberingRule?.hidden) {
           const value = formData[field.columnName];
           if (value === undefined || value === null || value === "") {
@@ -956,338 +1379,6 @@ export function UniversalFormModalComponent({
     return { valid: missingFields.length === 0, missingFields };
   }, [config.sections, formData]);
 
-  // 단일 행 저장
-  const saveSingleRow = useCallback(async () => {
-    const dataToSave = { ...formData };
-    
-    // 테이블 섹션 데이터 추출 (별도 저장용)
-    const tableSectionData: Record<string, any[]> = {};
-
-    // 메타데이터 필드 제거 (채번 규칙 ID는 유지 - buttonActions.ts에서 사용)
-    Object.keys(dataToSave).forEach((key) => {
-      if (key.startsWith("_tableSection_")) {
-        // 테이블 섹션 데이터는 별도로 저장
-        const sectionId = key.replace("_tableSection_", "");
-        tableSectionData[sectionId] = dataToSave[key] || [];
-        delete dataToSave[key];
-      } else if (key.startsWith("_") && !key.includes("_numberingRuleId")) {
-        delete dataToSave[key];
-      }
-    });
-
-    // 저장 시점 채번규칙 처리 (generateOnSave만 처리)
-    for (const section of config.sections) {
-      // 테이블 타입 섹션은 건너뛰기
-      if (section.type === "table") continue;
-      
-      for (const field of (section.fields || [])) {
-        if (field.numberingRule?.enabled && field.numberingRule?.generateOnSave && field.numberingRule?.ruleId) {
-          const response = await allocateNumberingCode(field.numberingRule.ruleId);
-          if (response.success && response.data?.generatedCode) {
-            dataToSave[field.columnName] = response.data.generatedCode;
-            console.log(`[채번 할당] ${field.columnName} = ${response.data.generatedCode}`);
-          } else {
-            console.error(`[채번 실패] ${field.columnName}:`, response.error);
-          }
-        }
-      }
-    }
-
-    // 별도 테이블에 저장해야 하는 테이블 섹션 목록
-    const tableSectionsForSeparateTable = config.sections.filter(
-      (s) => s.type === "table" && 
-        s.tableConfig?.saveConfig?.targetTable && 
-        s.tableConfig.saveConfig.targetTable !== config.saveConfig.tableName
-    );
-    
-    // 테이블 섹션이 있고 메인 테이블에 품목별로 저장하는 경우 (공통 + 개별 병합 저장)
-    // targetTable이 없거나 메인 테이블과 같은 경우
-    const tableSectionsForMainTable = config.sections.filter(
-      (s) => s.type === "table" && 
-        (!s.tableConfig?.saveConfig?.targetTable || 
-         s.tableConfig.saveConfig.targetTable === config.saveConfig.tableName)
-    );
-
-    console.log("[saveSingleRow] 메인 테이블:", config.saveConfig.tableName);
-    console.log("[saveSingleRow] 메인 테이블에 저장할 테이블 섹션:", tableSectionsForMainTable.map(s => s.id));
-    console.log("[saveSingleRow] 별도 테이블에 저장할 테이블 섹션:", tableSectionsForSeparateTable.map(s => s.id));
-    console.log("[saveSingleRow] 테이블 섹션 데이터 키:", Object.keys(tableSectionData));
-    console.log("[saveSingleRow] dataToSave 키:", Object.keys(dataToSave));
-
-    if (tableSectionsForMainTable.length > 0) {
-      // 공통 저장 필드 수집 (sectionSaveModes 설정에 따라)
-      const commonFieldsData: Record<string, any> = {};
-      const { sectionSaveModes } = config.saveConfig;
-      
-      // 필드 타입 섹션에서 공통 저장 필드 수집
-      for (const section of config.sections) {
-        if (section.type === "table") continue;
-        
-        const sectionMode = sectionSaveModes?.find((s) => s.sectionId === section.id);
-        const defaultMode = "common"; // 필드 타입 섹션의 기본값은 공통 저장
-        const sectionSaveMode = sectionMode?.saveMode || defaultMode;
-        
-        if (section.fields) {
-          for (const field of section.fields) {
-            const fieldOverride = sectionMode?.fieldOverrides?.find((f) => f.fieldName === field.columnName);
-            const fieldSaveMode = fieldOverride?.saveMode || sectionSaveMode;
-            
-            if (fieldSaveMode === "common" && dataToSave[field.columnName] !== undefined) {
-              commonFieldsData[field.columnName] = dataToSave[field.columnName];
-            }
-          }
-        }
-      }
-      
-      // 각 테이블 섹션의 품목 데이터에 공통 필드 병합하여 저장
-      for (const tableSection of tableSectionsForMainTable) {
-        const sectionData = tableSectionData[tableSection.id] || [];
-        
-        if (sectionData.length > 0) {
-          // 품목별로 행 저장
-          for (const item of sectionData) {
-            const rowToSave = { ...commonFieldsData, ...item };
-            
-            // _sourceData 등 내부 메타데이터 제거
-            Object.keys(rowToSave).forEach((key) => {
-              if (key.startsWith("_")) {
-                delete rowToSave[key];
-              }
-            });
-            
-            const response = await apiClient.post(
-              `/table-management/tables/${config.saveConfig.tableName}/add`,
-              rowToSave
-            );
-            
-            if (!response.data?.success) {
-              throw new Error(response.data?.message || "품목 저장 실패");
-            }
-          }
-          
-          // 이미 저장했으므로 아래 로직에서 다시 저장하지 않도록 제거
-          delete tableSectionData[tableSection.id];
-        }
-      }
-      
-      // 품목이 없으면 공통 데이터만 저장하지 않음 (품목이 필요한 화면이므로)
-      // 다른 테이블 섹션이 있는 경우에만 메인 데이터 저장
-      const hasOtherTableSections = Object.keys(tableSectionData).length > 0;
-      if (!hasOtherTableSections) {
-        return; // 메인 테이블에 저장할 품목이 없으면 종료
-      }
-    }
-
-    // 메인 데이터 저장 (테이블 섹션이 없거나 별도 테이블에 저장하는 경우)
-    const response = await apiClient.post(`/table-management/tables/${config.saveConfig.tableName}/add`, dataToSave);
-
-    if (!response.data?.success) {
-      throw new Error(response.data?.message || "저장 실패");
-    }
-    
-    // 테이블 섹션 데이터 저장 (별도 테이블에)
-    for (const section of config.sections) {
-      if (section.type === "table" && section.tableConfig?.saveConfig?.targetTable) {
-        const sectionData = tableSectionData[section.id];
-        if (sectionData && sectionData.length > 0) {
-          // 메인 레코드 ID가 필요한 경우 (response.data에서 가져오기)
-          const mainRecordId = response.data?.data?.id;
-          
-          // 공통 저장 필드 수집: 다른 섹션(필드 타입)에서 공통 저장으로 설정된 필드 값
-          // 기본값: 필드 타입 섹션은 'common', 테이블 타입 섹션은 'individual'
-          const commonFieldsData: Record<string, any> = {};
-          const { sectionSaveModes } = config.saveConfig;
-          
-          // 다른 섹션에서 공통 저장으로 설정된 필드 값 수집
-          for (const otherSection of config.sections) {
-            if (otherSection.id === section.id) continue; // 현재 테이블 섹션은 건너뛰기
-            
-            const sectionMode = sectionSaveModes?.find((s) => s.sectionId === otherSection.id);
-            // 기본값: 필드 타입 섹션은 'common', 테이블 타입 섹션은 'individual'
-            const defaultMode = otherSection.type === "table" ? "individual" : "common";
-            const sectionSaveMode = sectionMode?.saveMode || defaultMode;
-            
-            // 필드 타입 섹션의 필드들 처리
-            if (otherSection.type !== "table" && otherSection.fields) {
-              for (const field of otherSection.fields) {
-                // 필드별 오버라이드 확인
-                const fieldOverride = sectionMode?.fieldOverrides?.find((f) => f.fieldName === field.columnName);
-                const fieldSaveMode = fieldOverride?.saveMode || sectionSaveMode;
-                
-                // 공통 저장이면 formData에서 값을 가져와 모든 품목에 적용
-                if (fieldSaveMode === "common" && formData[field.columnName] !== undefined) {
-                  commonFieldsData[field.columnName] = formData[field.columnName];
-                }
-              }
-            }
-            
-            // 🆕 선택적 필드 그룹 (optionalFieldGroups)도 처리
-            if (otherSection.optionalFieldGroups && otherSection.optionalFieldGroups.length > 0) {
-              for (const optGroup of otherSection.optionalFieldGroups) {
-                if (optGroup.fields) {
-                  for (const field of optGroup.fields) {
-                    // 선택적 필드 그룹은 기본적으로 common 저장
-                    if (formData[field.columnName] !== undefined) {
-                      commonFieldsData[field.columnName] = formData[field.columnName];
-                    }
-                  }
-                }
-              }
-            }
-          }
-          
-          console.log("[saveSingleRow] 별도 테이블 저장 - 공통 필드:", Object.keys(commonFieldsData));
-          
-          for (const item of sectionData) {
-            // 공통 필드 병합 + 개별 품목 데이터
-            const itemToSave = { ...commonFieldsData, ...item };
-            
-            // saveToTarget: false인 컬럼은 저장에서 제외
-            const columns = section.tableConfig?.columns || [];
-            for (const col of columns) {
-              if (col.saveConfig?.saveToTarget === false && col.field in itemToSave) {
-                delete itemToSave[col.field];
-              }
-            }
-            
-            // _sourceData 등 내부 메타데이터 제거
-            Object.keys(itemToSave).forEach((key) => {
-              if (key.startsWith("_")) {
-                delete itemToSave[key];
-              }
-            });
-            
-            // 메인 레코드와 연결이 필요한 경우
-            if (mainRecordId && config.saveConfig.primaryKeyColumn) {
-              itemToSave[config.saveConfig.primaryKeyColumn] = mainRecordId;
-            }
-            
-            const saveResponse = await apiClient.post(
-              `/table-management/tables/${section.tableConfig.saveConfig.targetTable}/add`,
-              itemToSave
-            );
-            
-            if (!saveResponse.data?.success) {
-              throw new Error(saveResponse.data?.message || `${section.title || "테이블 섹션"} 저장 실패`);
-            }
-          }
-        }
-      }
-    }
-  }, [config.sections, config.saveConfig.tableName, config.saveConfig.primaryKeyColumn, config.saveConfig.sectionSaveModes, formData]);
-
-  // 다중 행 저장 (겸직 등)
-  const saveMultipleRows = useCallback(async () => {
-    const { multiRowSave } = config.saveConfig;
-    if (!multiRowSave) return;
-
-    let { commonFields = [], repeatSectionId = "" } = multiRowSave;
-    const { typeColumn, mainTypeValue, subTypeValue, mainSectionFields = [] } = multiRowSave;
-
-    // 공통 필드가 설정되지 않은 경우, 기본정보 섹션의 모든 필드를 공통 필드로 사용
-    if (commonFields.length === 0) {
-      const nonRepeatableSections = config.sections.filter((s) => !s.repeatable);
-      commonFields = nonRepeatableSections.flatMap((s) => (s.fields || []).map((f) => f.columnName));
-    }
-
-    // 반복 섹션 ID가 설정되지 않은 경우, 첫 번째 반복 섹션 사용
-    if (!repeatSectionId) {
-      const repeatableSection = config.sections.find((s) => s.repeatable);
-      if (repeatableSection) {
-        repeatSectionId = repeatableSection.id;
-      }
-    }
-
-    // 반복 섹션 데이터
-    const repeatItems = repeatSections[repeatSectionId] || [];
-
-    // 저장할 행들 생성
-    const rowsToSave: any[] = [];
-
-    // 공통 데이터 (모든 행에 적용)
-    const commonData: any = {};
-    commonFields.forEach((fieldName) => {
-      if (formData[fieldName] !== undefined) {
-        commonData[fieldName] = formData[fieldName];
-      }
-    });
-
-    // 메인 섹션 필드 데이터 (메인 행에만 적용되는 부서/직급 등)
-    const mainSectionData: any = {};
-    mainSectionFields.forEach((fieldName) => {
-      if (formData[fieldName] !== undefined) {
-        mainSectionData[fieldName] = formData[fieldName];
-      }
-    });
-
-    // 메인 행 (공통 데이터 + 메인 섹션 필드)
-    const mainRow: any = { ...commonData, ...mainSectionData };
-    if (typeColumn) {
-      mainRow[typeColumn] = mainTypeValue || "main";
-    }
-    rowsToSave.push(mainRow);
-
-    // 반복 섹션 행들 (공통 데이터 + 반복 섹션 필드)
-    for (const item of repeatItems) {
-      const subRow: any = { ...commonData };
-
-      // 반복 섹션의 필드 값 추가
-      const repeatSection = config.sections.find((s) => s.id === repeatSectionId);
-      (repeatSection?.fields || []).forEach((field) => {
-        if (item[field.columnName] !== undefined) {
-          subRow[field.columnName] = item[field.columnName];
-        }
-      });
-
-      if (typeColumn) {
-        subRow[typeColumn] = subTypeValue || "concurrent";
-      }
-
-      rowsToSave.push(subRow);
-    }
-
-    // 저장 시점 채번규칙 처리 (메인 행만)
-    for (const section of config.sections) {
-      if (section.repeatable || section.type === "table") continue;
-
-      for (const field of (section.fields || [])) {
-        if (field.numberingRule?.enabled && field.numberingRule?.ruleId) {
-          // generateOnSave 또는 generateOnOpen 모두 저장 시 실제 순번 할당
-          const shouldAllocate = field.numberingRule.generateOnSave || field.numberingRule.generateOnOpen;
-          if (shouldAllocate) {
-            const response = await allocateNumberingCode(field.numberingRule.ruleId);
-            if (response.success && response.data?.generatedCode) {
-              // 모든 행에 동일한 채번 값 적용 (공통 필드인 경우)
-              if (commonFields.includes(field.columnName)) {
-                rowsToSave.forEach((row) => {
-                  row[field.columnName] = response.data?.generatedCode;
-                });
-              } else {
-                rowsToSave[0][field.columnName] = response.data?.generatedCode;
-              }
-            }
-          }
-        }
-      }
-    }
-
-    // 모든 행 저장
-    for (let i = 0; i < rowsToSave.length; i++) {
-      const row = rowsToSave[i];
-
-      // 빈 객체 체크
-      if (Object.keys(row).length === 0) {
-        continue;
-      }
-
-      const response = await apiClient.post(`/table-management/tables/${config.saveConfig.tableName}/add`, row);
-
-      if (!response.data?.success) {
-        throw new Error(response.data?.message || `${i + 1}번째 행 저장 실패`);
-      }
-    }
-  }, [config.sections, config.saveConfig, formData, repeatSections]);
-
   // 다중 테이블 저장 (범용)
   const saveWithMultiTable = useCallback(async () => {
     const { customApiSave } = config.saveConfig;
@@ -1306,7 +1397,7 @@ export function UniversalFormModalComponent({
         }
       });
     });
-    
+
     // 1-0. receiveFromParent 필드 값도 mainData에 추가 (서브 테이블 저장용)
     // 이 필드들은 메인 테이블에는 저장되지 않지만, 서브 테이블 저장 시 필요할 수 있음
     config.sections.forEach((section) => {
@@ -1325,7 +1416,7 @@ export function UniversalFormModalComponent({
     for (const section of config.sections) {
       if (section.repeatable || section.type === "table") continue;
 
-      for (const field of (section.fields || [])) {
+      for (const field of section.fields || []) {
         // 채번규칙이 활성화된 필드 처리
         if (field.numberingRule?.enabled && field.numberingRule?.ruleId) {
           // 신규 생성이거나 값이 없는 경우에만 채번
@@ -1370,7 +1461,7 @@ export function UniversalFormModalComponent({
       }
 
       const subItems: Record<string, any>[] = [];
-      
+
       // 반복 섹션이 있는 경우에만 반복 데이터 처리
       if (subTableConfig.repeatSectionId) {
         const repeatData = repeatSections[subTableConfig.repeatSectionId] || [];
@@ -1470,134 +1561,6 @@ export function UniversalFormModalComponent({
     }
   }, [config.sections, config.saveConfig, formData, repeatSections, initialData]);
 
-  // 커스텀 API 저장
-  const saveWithCustomApi = useCallback(async () => {
-    const { customApiSave } = config.saveConfig;
-    if (!customApiSave) return;
-
-    const saveWithGenericCustomApi = async () => {
-      if (!customApiSave.customEndpoint) {
-        throw new Error("커스텀 API 엔드포인트가 설정되지 않았습니다.");
-      }
-
-      const dataToSave = { ...formData };
-
-      // 메타데이터 필드 제거
-      Object.keys(dataToSave).forEach((key) => {
-        if (key.startsWith("_")) {
-          delete dataToSave[key];
-        }
-      });
-
-      // 반복 섹션 데이터 포함
-      if (Object.keys(repeatSections).length > 0) {
-        dataToSave._repeatSections = repeatSections;
-      }
-
-      const method = customApiSave.customMethod || "POST";
-      const response =
-        method === "PUT"
-          ? await apiClient.put(customApiSave.customEndpoint, dataToSave)
-          : await apiClient.post(customApiSave.customEndpoint, dataToSave);
-
-      if (!response.data?.success) {
-        throw new Error(response.data?.message || "저장 실패");
-      }
-    };
-
-    switch (customApiSave.apiType) {
-      case "multi-table":
-        await saveWithMultiTable();
-        break;
-      case "custom":
-        await saveWithGenericCustomApi();
-        break;
-      default:
-        throw new Error(`지원하지 않는 API 타입: ${customApiSave.apiType}`);
-    }
-  }, [config.saveConfig, formData, repeatSections, saveWithMultiTable]);
-
-  // 저장 처리
-  const handleSave = useCallback(async () => {
-    // 커스텀 API 저장 모드가 아닌 경우에만 테이블명 체크
-    if (!config.saveConfig.customApiSave?.enabled && !config.saveConfig.tableName) {
-      toast.error("저장할 테이블이 설정되지 않았습니다.");
-      return;
-    }
-
-    // 필수 필드 검증
-    const { valid, missingFields } = validateRequiredFields();
-    if (!valid) {
-      toast.error(`필수 항목을 입력해주세요: ${missingFields.join(", ")}`);
-      return;
-    }
-
-    setSaving(true);
-
-    try {
-      const { multiRowSave, customApiSave } = config.saveConfig;
-
-      // 커스텀 API 저장 모드
-      if (customApiSave?.enabled) {
-        await saveWithCustomApi();
-      } else if (multiRowSave?.enabled) {
-        // 다중 행 저장
-        await saveMultipleRows();
-      } else {
-        // 단일 행 저장
-        await saveSingleRow();
-      }
-
-      // 저장 후 동작
-      if (config.saveConfig.afterSave?.showToast) {
-        toast.success("저장되었습니다.");
-      }
-
-      if (config.saveConfig.afterSave?.refreshParent) {
-        window.dispatchEvent(new CustomEvent("refreshParentData"));
-      }
-
-      // onSave 콜백은 저장 완료 알림용으로만 사용
-      // 실제 저장은 이미 위에서 완료됨 (saveSingleRow 또는 saveMultipleRows)
-      // EditModal 등 부모 컴포넌트의 저장 로직이 다시 실행되지 않도록
-      // _saveCompleted 플래그를 포함하여 전달
-      if (onSave) {
-        onSave({ ...formData, _saveCompleted: true });
-      }
-
-      // 저장 완료 후 모달 닫기 이벤트 발생
-      if (config.saveConfig.afterSave?.closeModal !== false) {
-        window.dispatchEvent(new CustomEvent("closeEditModal"));
-      }
-    } catch (error: any) {
-      console.error("저장 실패:", error);
-      // axios 에러의 경우 서버 응답 메시지 추출
-      const errorMessage =
-        error.response?.data?.message ||
-        error.response?.data?.error?.details ||
-        error.message ||
-        "저장에 실패했습니다.";
-      toast.error(errorMessage);
-    } finally {
-      setSaving(false);
-    }
-  }, [
-    config,
-    formData,
-    repeatSections,
-    onSave,
-    validateRequiredFields,
-    saveSingleRow,
-    saveMultipleRows,
-    saveWithCustomApi,
-  ]);
-
-  // 폼 초기화
-  const handleReset = useCallback(() => {
-    initializeForm();
-    toast.info("폼이 초기화되었습니다.");
-  }, [initializeForm]);
-
   // 필드 요소 렌더링 (입력 컴포넌트만)
   // repeatContext: 반복 섹션인 경우 { sectionId, itemId }를 전달
   const renderFieldElement = (
@@ -1639,7 +1602,7 @@ export function UniversalFormModalComponent({
           );
 
         case "select": {
-          // 🆕 연쇄 드롭다운 처리
+          // 🆕 연쇄 드롭다운 처리 (기존 field.cascading 방식)
           if (field.cascading?.enabled) {
             const cascadingConfig = field.cascading;
             const parentValue = formData[cascadingConfig.parentField];
@@ -1653,6 +1616,39 @@ export function UniversalFormModalComponent({
                 onChange={onChangeHandler}
                 placeholder={field.placeholder || "선택하세요"}
                 disabled={isDisabled}
+                allowCustomInput={field.selectOptions?.allowCustomInput}
+              />
+            );
+          }
+          
+          // 🆕 연쇄 드롭다운 처리 (selectOptions.type === "cascading" 방식)
+          if (field.selectOptions?.type === "cascading" && field.selectOptions?.cascading?.parentField) {
+            const cascadingOpts = field.selectOptions.cascading;
+            const parentValue = formData[cascadingOpts.parentField];
+            
+            // selectOptions 기반 cascading config를 CascadingDropdownConfig 형태로 변환
+            const cascadingConfig: CascadingDropdownConfig = {
+              enabled: true,
+              parentField: cascadingOpts.parentField,
+              sourceTable: cascadingOpts.sourceTable || field.selectOptions.tableName || "",
+              parentKeyColumn: cascadingOpts.parentKeyColumn || "",
+              valueColumn: field.selectOptions.valueColumn || "",
+              labelColumn: field.selectOptions.labelColumn || "",
+              emptyParentMessage: cascadingOpts.emptyParentMessage,
+              noOptionsMessage: cascadingOpts.noOptionsMessage,
+              clearOnParentChange: cascadingOpts.clearOnParentChange !== false,
+            };
+
+            return (
+              <CascadingSelectField
+                fieldId={fieldKey}
+                config={cascadingConfig}
+                parentValue={parentValue}
+                value={value}
+                onChange={onChangeHandler}
+                placeholder={field.placeholder || "선택하세요"}
+                disabled={isDisabled}
+                allowCustomInput={field.selectOptions?.allowCustomInput}
               />
             );
           }
@@ -1683,10 +1679,8 @@ export function UniversalFormModalComponent({
               // 메인 표시 컬럼 (displayColumn)
               const mainDisplayVal = row[lfg.displayColumn || ""] || "";
               // 서브 표시 컬럼 (subDisplayColumn이 있으면 사용, 없으면 valueColumn 사용)
-              const subDisplayVal = lfg.subDisplayColumn 
-                ? (row[lfg.subDisplayColumn] || "")
-                : (row[valueColumn] || "");
-              
+              const subDisplayVal = lfg.subDisplayColumn ? row[lfg.subDisplayColumn] || "" : row[valueColumn] || "";
+
               switch (lfg.displayFormat) {
                 case "code_name":
                   // 서브 - 메인 형식
@@ -1704,7 +1698,10 @@ export function UniversalFormModalComponent({
                       matches.forEach((match) => {
                         const columnName = match.slice(1, -1); // { } 제거
                         const columnValue = row[columnName];
-                        result = result.replace(match, columnValue !== undefined && columnValue !== null ? String(columnValue) : "");
+                        result = result.replace(
+                          match,
+                          columnValue !== undefined && columnValue !== null ? String(columnValue) : "",
+                        );
                       });
                     }
                     return result;
@@ -1761,7 +1758,12 @@ export function UniversalFormModalComponent({
                 <SelectContent>
                   {sourceData.length > 0 ? (
                     sourceData
-                      .filter((row) => row[valueColumn] !== null && row[valueColumn] !== undefined && String(row[valueColumn]) !== "")
+                      .filter(
+                        (row) =>
+                          row[valueColumn] !== null &&
+                          row[valueColumn] !== undefined &&
+                          String(row[valueColumn]) !== "",
+                      )
                       .map((row, index) => (
                         <SelectItem key={`${row[valueColumn]}_${index}`} value={String(row[valueColumn])}>
                           {getDisplayText(row)}
@@ -1961,6 +1963,7 @@ export function UniversalFormModalComponent({
                 // 테이블 섹션 데이터를 formData에 저장
                 handleFieldChange(`_tableSection_${section.id}`, data);
               }}
+              groupedData={_groupedData}
             />
           </CardContent>
         </Card>
@@ -2021,13 +2024,11 @@ export function UniversalFormModalComponent({
                   ),
                 )}
               </div>
-              
+
               {/* 옵셔널 필드 그룹 렌더링 */}
               {section.optionalFieldGroups && section.optionalFieldGroups.length > 0 && (
                 <div className="mt-4 space-y-3">
-                  {section.optionalFieldGroups.map((group) => 
-                    renderOptionalFieldGroup(section, group, sectionColumns)
-                  )}
+                  {section.optionalFieldGroups.map((group) => renderOptionalFieldGroup(section, group, sectionColumns))}
                 </div>
               )}
             </CardContent>
@@ -2055,7 +2056,7 @@ export function UniversalFormModalComponent({
   const renderOptionalFieldGroup = (
     section: FormSectionConfig,
     group: OptionalFieldGroupConfig,
-    sectionColumns: number
+    sectionColumns: number,
   ) => {
     const key = `${section.id}-${group.id}`;
     const isActivated = activatedOptionalFieldGroups.has(key);
@@ -2074,9 +2075,7 @@ export function UniversalFormModalComponent({
           <div className="flex items-center justify-between">
             <div>
               <p className="text-muted-foreground text-sm font-medium">{group.title}</p>
-              {group.description && (
-                <p className="text-muted-foreground/70 mt-0.5 text-xs">{group.description}</p>
-              )}
+              {group.description && <p className="text-muted-foreground/70 mt-0.5 text-xs">{group.description}</p>}
             </div>
             <Button
               variant="outline"
@@ -2115,16 +2114,10 @@ export function UniversalFormModalComponent({
           <div className="flex items-center justify-between p-3">
             <CollapsibleTrigger asChild>
               <button className="flex items-center gap-2 text-left hover:opacity-80">
-                {isCollapsed ? (
-                  <ChevronRight className="h-4 w-4" />
-                ) : (
-                  <ChevronDown className="h-4 w-4" />
-                )}
+                {isCollapsed ? <ChevronRight className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
                 <div>
                   <p className="text-sm font-medium">{group.title}</p>
-                  {group.description && (
-                    <p className="text-muted-foreground mt-0.5 text-xs">{group.description}</p>
-                  )}
+                  {group.description && <p className="text-muted-foreground mt-0.5 text-xs">{group.description}</p>}
                 </div>
               </button>
             </CollapsibleTrigger>
@@ -2154,8 +2147,8 @@ export function UniversalFormModalComponent({
                   formData[field.columnName],
                   (value) => handleFieldChange(field.columnName, value),
                   `${section.id}-${group.id}-${field.id}`,
-                  groupColumns
-                )
+                  groupColumns,
+                ),
               )}
             </div>
           </CollapsibleContent>
@@ -2169,9 +2162,7 @@ export function UniversalFormModalComponent({
         <div className="mb-3 flex items-center justify-between">
           <div>
             <p className="text-sm font-medium">{group.title}</p>
-            {group.description && (
-              <p className="text-muted-foreground mt-0.5 text-xs">{group.description}</p>
-            )}
+            {group.description && <p className="text-muted-foreground mt-0.5 text-xs">{group.description}</p>}
           </div>
           <Button
             variant="ghost"
@@ -2198,8 +2189,8 @@ export function UniversalFormModalComponent({
               formData[field.columnName],
               (value) => handleFieldChange(field.columnName, value),
               `${section.id}-${group.id}-${field.id}`,
-              groupColumns
-            )
+              groupColumns,
+            ),
           )}
         </div>
       </div>
@@ -2327,7 +2318,8 @@ export function UniversalFormModalComponent({
         <div className="text-muted-foreground text-center">
           <p className="font-medium">{config.modal.title || "범용 폼 모달"}</p>
           <p className="mt-1 text-xs">
-            {config.sections.length}개 섹션 |{config.sections.reduce((acc, s) => acc + (s.fields?.length || 0), 0)}개 필드
+            {config.sections.length}개 섹션 |{config.sections.reduce((acc, s) => acc + (s.fields?.length || 0), 0)}개
+            필드
           </p>
           <p className="mt-1 text-xs">저장 테이블: {config.saveConfig.tableName || "(미설정)"}</p>
         </div>
@@ -2340,38 +2332,6 @@ export function UniversalFormModalComponent({
       {/* 섹션들 */}
       <div className="space-y-4">{config.sections.map((section) => renderSection(section))}</div>
 
-      {/* 버튼 영역 - 저장 버튼이 표시될 때만 렌더링 */}
-      {config.modal.showSaveButton !== false && (
-        <div className="mt-6 flex justify-end gap-2 border-t pt-4">
-          {config.modal.showResetButton && (
-            <Button
-              type="button"
-              variant="outline"
-              onClick={(e) => {
-                e.preventDefault();
-                e.stopPropagation();
-                handleReset();
-              }}
-              disabled={saving}
-            >
-              <RefreshCw className="mr-1 h-4 w-4" />
-              {config.modal.resetButtonText || "초기화"}
-            </Button>
-          )}
-          <Button
-            type="button"
-            onClick={(e) => {
-              e.preventDefault();
-              e.stopPropagation();
-              handleSave();
-            }}
-            disabled={saving || !config.saveConfig.tableName}
-          >
-            {saving ? "저장 중..." : config.modal.saveButtonText || "저장"}
-          </Button>
-        </div>
-      )}
-
       {/* 삭제 확인 다이얼로그 */}
       <AlertDialog
         open={deleteDialog.open}
@@ -2398,6 +2358,7 @@ export function UniversalFormModalComponent({
 }
 
 // Select 필드 컴포넌트 (옵션 로딩 포함)
+// allowCustomInput이 true이면 Combobox 형태로 직접 입력 가능
 interface SelectFieldProps {
   fieldId: string;
   value: any;
@@ -2411,6 +2372,10 @@ interface SelectFieldProps {
 function SelectField({ fieldId, value, onChange, optionConfig, placeholder, disabled, loadOptions }: SelectFieldProps) {
   const [options, setOptions] = useState<{ value: string; label: string }[]>([]);
   const [loading, setLoading] = useState(false);
+  const [open, setOpen] = useState(false);
+  const [inputValue, setInputValue] = useState(value || "");
+  
+  const allowCustomInput = optionConfig?.allowCustomInput || false;
 
   useEffect(() => {
     if (optionConfig) {
@@ -2421,6 +2386,82 @@ function SelectField({ fieldId, value, onChange, optionConfig, placeholder, disa
     }
   }, [fieldId, optionConfig, loadOptions]);
 
+  // value가 외부에서 변경되면 inputValue도 동기화
+  useEffect(() => {
+    // 선택된 값이 있으면 해당 라벨을 표시, 없으면 value 그대로 표시
+    const selectedOption = options.find((opt) => opt.value === value);
+    setInputValue(selectedOption ? selectedOption.label : value || "");
+  }, [value, options]);
+
+  // Combobox 형태 (직접 입력 허용)
+  if (allowCustomInput) {
+    return (
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <div className="relative w-full">
+            <Input
+              id={fieldId}
+              value={inputValue}
+              onChange={(e) => {
+                setInputValue(e.target.value);
+                onChange(e.target.value);
+              }}
+              placeholder={loading ? "로딩 중..." : placeholder}
+              disabled={disabled || loading}
+              className="w-full pr-8"
+            />
+            <Button
+              type="button"
+              variant="ghost"
+              size="sm"
+              className="absolute right-0 top-0 h-full px-2 hover:bg-transparent"
+              onClick={() => !disabled && !loading && setOpen(!open)}
+              disabled={disabled || loading}
+            >
+              {loading ? (
+                <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
+              ) : (
+                <ChevronsUpDown className="h-4 w-4 text-muted-foreground" />
+              )}
+            </Button>
+          </div>
+        </PopoverTrigger>
+        <PopoverContent className="w-[--radix-popover-trigger-width] p-0" align="start">
+          <Command>
+            <CommandInput placeholder="검색..." className="h-9" />
+            <CommandList>
+              <CommandEmpty>선택 가능한 항목이 없습니다</CommandEmpty>
+              <CommandGroup>
+                {options
+                  .filter((option) => option.value && option.value !== "")
+                  .map((option) => (
+                    <CommandItem
+                      key={option.value}
+                      value={option.label}
+                      onSelect={() => {
+                        setInputValue(option.label);
+                        onChange(option.value);
+                        setOpen(false);
+                      }}
+                    >
+                      <Check
+                        className={cn(
+                          "mr-2 h-4 w-4",
+                          value === option.value ? "opacity-100" : "opacity-0"
+                        )}
+                      />
+                      {option.label}
+                    </CommandItem>
+                  ))}
+              </CommandGroup>
+            </CommandList>
+          </Command>
+        </PopoverContent>
+      </Popover>
+    );
+  }
+
+  // 기본 Select 형태 (목록에서만 선택)
   return (
     <Select value={value || ""} onValueChange={onChange} disabled={disabled || loading}>
       <SelectTrigger size="default">
diff --git a/frontend/lib/registry/components/universal-form-modal/UniversalFormModalConfigPanel.tsx b/frontend/lib/registry/components/universal-form-modal/UniversalFormModalConfigPanel.tsx
index 27af68f1..2e0258cc 100644
--- a/frontend/lib/registry/components/universal-form-modal/UniversalFormModalConfigPanel.tsx
+++ b/frontend/lib/registry/components/universal-form-modal/UniversalFormModalConfigPanel.tsx
@@ -9,17 +9,7 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";
 import { Badge } from "@/components/ui/badge";
 import { Separator } from "@/components/ui/separator";
-import {
-  Plus,
-  Trash2,
-  GripVertical,
-  ChevronUp,
-  ChevronDown,
-  Settings,
-  Database,
-  Layout,
-  Table,
-} from "lucide-react";
+import { Plus, Trash2, GripVertical, ChevronUp, ChevronDown, Settings, Database, Layout, Table } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { apiClient } from "@/lib/api/client";
 import { getNumberingRules } from "@/lib/api/numberingRule";
@@ -31,11 +21,7 @@ import {
   MODAL_SIZE_OPTIONS,
   SECTION_TYPE_OPTIONS,
 } from "./types";
-import {
-  defaultSectionConfig,
-  defaultTableSectionConfig,
-  generateSectionId,
-} from "./config";
+import { defaultSectionConfig, defaultTableSectionConfig, generateSectionId } from "./config";
 
 // 모달 import
 import { FieldDetailSettingsModal } from "./modals/FieldDetailSettingsModal";
@@ -45,22 +31,26 @@ import { TableSectionSettingsModal } from "./modals/TableSectionSettingsModal";
 
 // 도움말 텍스트 컴포넌트
 const HelpText = ({ children }: { children: React.ReactNode }) => (
-  <p className="text-[10px] text-muted-foreground mt-0.5">{children}</p>
+  <p className="text-muted-foreground mt-0.5 text-[10px]">{children}</p>
 );
 
 // 부모 화면에서 전달 가능한 필드 타입
 interface AvailableParentField {
-  name: string;           // 필드명 (columnName)
-  label: string;          // 표시 라벨
+  name: string; // 필드명 (columnName)
+  label: string; // 표시 라벨
   sourceComponent?: string; // 출처 컴포넌트 (예: "TableList", "SplitPanelLayout2")
-  sourceTable?: string;   // 출처 테이블명
+  sourceTable?: string; // 출처 테이블명
 }
 
-export function UniversalFormModalConfigPanel({ config, onChange, allComponents = [] }: UniversalFormModalConfigPanelProps) {
+export function UniversalFormModalConfigPanel({
+  config,
+  onChange,
+  allComponents = [],
+}: UniversalFormModalConfigPanelProps) {
   // 테이블 목록
   const [tables, setTables] = useState<{ name: string; label: string }[]>([]);
   const [tableColumns, setTableColumns] = useState<{
-    [tableName: string]: { name: string; type: string; label: string }[];
+    [tableName: string]: { name: string; type: string; label: string; inputType?: string }[];
   }>({});
 
   // 부모 화면에서 전달 가능한 필드 목록
@@ -140,7 +130,7 @@ export function UniversalFormModalConfigPanel({ config, onChange, allComponents
               }
             });
           }
-          
+
           // 좌측 패널 테이블 컬럼도 추출
           const leftTableName = compConfig.leftPanel?.tableName;
           if (leftTableName) {
@@ -152,7 +142,7 @@ export function UniversalFormModalConfigPanel({ config, onChange, allComponents
                   const colName = col.columnName || col.column_name;
                   const colLabel = col.displayName || col.columnComment || col.column_comment || colName;
                   // 중복 방지
-                  if (!fields.some(f => f.name === colName && f.sourceTable === leftTableName)) {
+                  if (!fields.some((f) => f.name === colName && f.sourceTable === leftTableName)) {
                     fields.push({
                       name: colName,
                       label: colLabel,
@@ -179,7 +169,7 @@ export function UniversalFormModalConfigPanel({ config, onChange, allComponents
                 columns.forEach((col: any) => {
                   const colName = col.columnName || col.column_name;
                   const colLabel = col.displayName || col.columnComment || col.column_comment || colName;
-                  if (!fields.some(f => f.name === colName && f.sourceTable === tableName)) {
+                  if (!fields.some((f) => f.name === colName && f.sourceTable === tableName)) {
                     fields.push({
                       name: colName,
                       label: colLabel,
@@ -198,11 +188,11 @@ export function UniversalFormModalConfigPanel({ config, onChange, allComponents
         // 4. 버튼 컴포넌트 - openModalWithData의 fieldMappings/dataMapping에서 소스 컬럼 추출
         if (compType === "button-primary" || compType === "button" || compType === "button-secondary") {
           const action = compConfig.action || {};
-          
+
           // fieldMappings에서 소스 컬럼 추출
           const fieldMappings = action.fieldMappings || [];
           fieldMappings.forEach((mapping: any) => {
-            if (mapping.sourceColumn && !fields.some(f => f.name === mapping.sourceColumn)) {
+            if (mapping.sourceColumn && !fields.some((f) => f.name === mapping.sourceColumn)) {
               fields.push({
                 name: mapping.sourceColumn,
                 label: mapping.sourceColumn,
@@ -211,11 +201,11 @@ export function UniversalFormModalConfigPanel({ config, onChange, allComponents
               });
             }
           });
-          
+
           // dataMapping에서 소스 컬럼 추출
           const dataMapping = action.dataMapping || [];
           dataMapping.forEach((mapping: any) => {
-            if (mapping.sourceColumn && !fields.some(f => f.name === mapping.sourceColumn)) {
+            if (mapping.sourceColumn && !fields.some((f) => f.name === mapping.sourceColumn)) {
               fields.push({
                 name: mapping.sourceColumn,
                 label: mapping.sourceColumn,
@@ -237,7 +227,7 @@ export function UniversalFormModalConfigPanel({ config, onChange, allComponents
             columns.forEach((col: any) => {
               const colName = col.columnName || col.column_name;
               const colLabel = col.displayName || col.columnComment || col.column_comment || colName;
-              if (!fields.some(f => f.name === colName)) {
+              if (!fields.some((f) => f.name === colName)) {
                 fields.push({
                   name: colName,
                   label: colLabel,
@@ -253,8 +243,8 @@ export function UniversalFormModalConfigPanel({ config, onChange, allComponents
       }
 
       // 중복 제거 (같은 name이면 첫 번째만 유지)
-      const uniqueFields = fields.filter((field, index, self) =>
-        index === self.findIndex(f => f.name === field.name)
+      const uniqueFields = fields.filter(
+        (field, index, self) => index === self.findIndex((f) => f.name === field.name),
       );
 
       setAvailableParentFields(uniqueFields);
@@ -276,11 +266,19 @@ export function UniversalFormModalConfigPanel({ config, onChange, allComponents
       const data = response.data?.data;
       if (response.data?.success && Array.isArray(data)) {
         setTables(
-          data.map((t: { tableName?: string; table_name?: string; displayName?: string; tableLabel?: string; table_label?: string }) => ({
-            name: t.tableName || t.table_name || "",
-            // displayName 우선, 없으면 tableLabel, 그것도 없으면 테이블명
-            label: t.displayName || t.tableLabel || t.table_label || "",
-          })),
+          data.map(
+            (t: {
+              tableName?: string;
+              table_name?: string;
+              displayName?: string;
+              tableLabel?: string;
+              table_label?: string;
+            }) => ({
+              name: t.tableName || t.table_name || "",
+              // displayName 우선, 없으면 tableLabel, 그것도 없으면 테이블명
+              label: t.displayName || t.tableLabel || t.table_label || "",
+            }),
+          ),
         );
       }
     } catch (error) {
@@ -308,11 +306,31 @@ export function UniversalFormModalConfigPanel({ config, onChange, allComponents
               displayName?: string;
               columnComment?: string;
               column_comment?: string;
-            }) => ({
-              name: c.columnName || c.column_name || "",
-              type: c.dataType || c.data_type || "text",
-              label: c.displayName || c.columnComment || c.column_comment || c.columnName || c.column_name || "",
-            }),
+              inputType?: string;
+              input_type?: string;
+              isNullable?: string;
+              is_nullable?: string;
+            }) => {
+              const colName = c.columnName || c.column_name || "";
+              const dataType = c.dataType || c.data_type || "text";
+              const inputType = c.inputType || c.input_type || "text";
+              const displayName = c.displayName || c.columnComment || c.column_comment || colName;
+              const isNullable = c.isNullable || c.is_nullable || "YES";
+
+              return {
+                // camelCase (기존 호환성)
+                name: colName,
+                type: dataType,
+                label: displayName,
+                inputType: inputType,
+                // snake_case (TableSectionSettingsModal 호환성)
+                column_name: colName,
+                data_type: dataType,
+                is_nullable: isNullable,
+                comment: displayName,
+                input_type: inputType,
+              };
+            },
           ),
         }));
       }
@@ -359,21 +377,24 @@ export function UniversalFormModalConfigPanel({ config, onChange, allComponents
   );
 
   // 섹션 관리
-  const addSection = useCallback((type: "fields" | "table" = "fields") => {
-    const newSection: FormSectionConfig = {
-      ...defaultSectionConfig,
-      id: generateSectionId(),
-      title: type === "table" ? `테이블 섹션 ${config.sections.length + 1}` : `섹션 ${config.sections.length + 1}`,
-      type,
-      fields: type === "fields" ? [] : undefined,
-      tableConfig: type === "table" ? { ...defaultTableSectionConfig } : undefined,
-    };
-    onChange({
-      ...config,
-      sections: [...config.sections, newSection],
-    });
-  }, [config, onChange]);
-  
+  const addSection = useCallback(
+    (type: "fields" | "table" = "fields") => {
+      const newSection: FormSectionConfig = {
+        ...defaultSectionConfig,
+        id: generateSectionId(),
+        title: type === "table" ? `테이블 섹션 ${config.sections.length + 1}` : `섹션 ${config.sections.length + 1}`,
+        type,
+        fields: type === "fields" ? [] : undefined,
+        tableConfig: type === "table" ? { ...defaultTableSectionConfig } : undefined,
+      };
+      onChange({
+        ...config,
+        sections: [...config.sections, newSection],
+      });
+    },
+    [config, onChange],
+  );
+
   // 섹션 타입 변경
   const changeSectionType = useCallback(
     (sectionId: string, newType: "fields" | "table") => {
@@ -381,7 +402,7 @@ export function UniversalFormModalConfigPanel({ config, onChange, allComponents
         ...config,
         sections: config.sections.map((s) => {
           if (s.id !== sectionId) return s;
-          
+
           if (newType === "table") {
             return {
               ...s,
@@ -400,9 +421,9 @@ export function UniversalFormModalConfigPanel({ config, onChange, allComponents
         }),
       });
     },
-    [config, onChange]
+    [config, onChange],
   );
-  
+
   // 테이블 섹션 설정 모달 열기
   const handleOpenTableSectionSettings = (section: FormSectionConfig) => {
     setSelectedSection(section);
@@ -487,293 +508,276 @@ export function UniversalFormModalConfigPanel({ config, onChange, allComponents
   };
 
   return (
-    <div className="h-full flex flex-col overflow-hidden w-full min-w-0">
-      <div className="flex-1 overflow-y-auto overflow-x-hidden w-full min-w-0">
-        <div className="space-y-4 p-4 w-full min-w-0 max-w-full">
-        {/* 모달 기본 설정 */}
-        <Accordion type="single" collapsible defaultValue="modal-settings" className="w-full min-w-0">
-          <AccordionItem value="modal-settings" className="border rounded-lg w-full min-w-0">
-            <AccordionTrigger className="px-4 py-3 text-sm font-medium hover:no-underline w-full min-w-0">
-              <div className="flex items-center gap-2 w-full min-w-0">
-                <Settings className="h-4 w-4 shrink-0" />
-                <span className="truncate">모달 기본 설정</span>
-              </div>
-            </AccordionTrigger>
-            <AccordionContent className="px-4 pb-4 space-y-4 w-full min-w-0">
-              <div className="w-full min-w-0">
-                <Label className="text-xs font-medium mb-1.5 block">모달 제목</Label>
-                <Input
-                  value={config.modal.title}
-                  onChange={(e) => updateModalConfig({ title: e.target.value })}
-                  className="h-9 text-sm w-full max-w-full"
-                />
-                <HelpText>모달 상단에 표시될 제목입니다</HelpText>
-              </div>
-
-              <div className="w-full min-w-0">
-                <Label className="text-xs font-medium mb-1.5 block">모달 크기</Label>
-                <Select value={config.modal.size} onValueChange={(value: any) => updateModalConfig({ size: value })}>
-                  <SelectTrigger className="h-9 text-sm w-full max-w-full">
-                    <SelectValue />
-                  </SelectTrigger>
-                  <SelectContent>
-                    {MODAL_SIZE_OPTIONS.map((opt) => (
-                      <SelectItem key={opt.value} value={opt.value}>
-                        {opt.label}
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
-                <HelpText>모달 창의 크기를 선택하세요</HelpText>
-              </div>
-
-              {/* 저장 버튼 표시 설정 */}
-              <div className="w-full min-w-0">
-                <div className="flex items-center gap-2">
-                  <Checkbox
-                    id="show-save-button"
-                    checked={config.modal.showSaveButton !== false}
-                    onCheckedChange={(checked) => updateModalConfig({ showSaveButton: checked === true })}
-                  />
-                  <Label htmlFor="show-save-button" className="text-xs font-medium cursor-pointer">
-                    저장 버튼 표시
-                  </Label>
+    <div className="flex h-full w-full min-w-0 flex-col overflow-hidden">
+      <div className="w-full min-w-0 flex-1 overflow-x-hidden overflow-y-auto">
+        <div className="w-full max-w-full min-w-0 space-y-4 p-4">
+          {/* 모달 기본 설정 */}
+          <Accordion type="single" collapsible defaultValue="modal-settings" className="w-full min-w-0">
+            <AccordionItem value="modal-settings" className="w-full min-w-0 rounded-lg border">
+              <AccordionTrigger className="w-full min-w-0 px-4 py-3 text-sm font-medium hover:no-underline">
+                <div className="flex w-full min-w-0 items-center gap-2">
+                  <Settings className="h-4 w-4 shrink-0" />
+                  <span className="truncate">모달 기본 설정</span>
                 </div>
-                <HelpText>체크 해제 시 모달 하단의 저장 버튼이 숨겨집니다</HelpText>
-              </div>
-
-              <div className="space-y-3 w-full min-w-0">
+              </AccordionTrigger>
+              <AccordionContent className="w-full min-w-0 space-y-4 px-4 pb-4">
                 <div className="w-full min-w-0">
-                  <Label className="text-xs font-medium mb-1.5 block">저장 버튼 텍스트</Label>
+                  <Label className="mb-1.5 block text-xs font-medium">모달 제목</Label>
                   <Input
-                    value={config.modal.saveButtonText || "저장"}
-                    onChange={(e) => updateModalConfig({ saveButtonText: e.target.value })}
-                    className="h-9 text-sm w-full max-w-full"
+                    value={config.modal.title}
+                    onChange={(e) => updateModalConfig({ title: e.target.value })}
+                    className="h-9 w-full max-w-full text-sm"
                   />
+                  <HelpText>모달 상단에 표시될 제목입니다</HelpText>
                 </div>
+
                 <div className="w-full min-w-0">
-                  <Label className="text-xs font-medium mb-1.5 block">취소 버튼 텍스트</Label>
-                  <Input
-                    value={config.modal.cancelButtonText || "취소"}
-                    onChange={(e) => updateModalConfig({ cancelButtonText: e.target.value })}
-                    className="h-9 text-sm w-full max-w-full"
-                  />
+                  <Label className="mb-1.5 block text-xs font-medium">모달 크기</Label>
+                  <Select value={config.modal.size} onValueChange={(value: any) => updateModalConfig({ size: value })}>
+                    <SelectTrigger className="h-9 w-full max-w-full text-sm">
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {MODAL_SIZE_OPTIONS.map((opt) => (
+                        <SelectItem key={opt.value} value={opt.value}>
+                          {opt.label}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                  <HelpText>모달 창의 크기를 선택하세요</HelpText>
                 </div>
-              </div>
-            </AccordionContent>
-          </AccordionItem>
-        </Accordion>
+              </AccordionContent>
+            </AccordionItem>
+          </Accordion>
 
-        {/* 저장 설정 */}
-        <Accordion type="single" collapsible defaultValue="save-settings" className="w-full min-w-0">
-          <AccordionItem value="save-settings" className="border rounded-lg w-full min-w-0">
-            <AccordionTrigger className="px-4 py-3 text-sm font-medium hover:no-underline w-full min-w-0">
-              <div className="flex items-center gap-2 w-full min-w-0">
-                <Database className="h-4 w-4 shrink-0" />
-                <span className="truncate">저장 설정</span>
-              </div>
-            </AccordionTrigger>
-            <AccordionContent className="px-4 pb-4 space-y-4 w-full min-w-0">
-              <div className="space-y-3 w-full min-w-0">
-                <div className="flex-1 min-w-0">
-                  <Label className="text-xs font-medium mb-1.5 block">저장 테이블</Label>
-                  <p className="text-sm text-muted-foreground">
-                    {config.saveConfig.tableName || "(미설정)"}
-                  </p>
-                  {config.saveConfig.customApiSave?.enabled && config.saveConfig.customApiSave?.multiTable?.enabled && (
-                    <Badge variant="secondary" className="text-xs px-2 py-0.5 mt-2">
-                      다중 테이블 모드
-                    </Badge>
-                  )}
+          {/* 저장 설정 */}
+          <Accordion type="single" collapsible defaultValue="save-settings" className="w-full min-w-0">
+            <AccordionItem value="save-settings" className="w-full min-w-0 rounded-lg border">
+              <AccordionTrigger className="w-full min-w-0 px-4 py-3 text-sm font-medium hover:no-underline">
+                <div className="flex w-full min-w-0 items-center gap-2">
+                  <Database className="h-4 w-4 shrink-0" />
+                  <span className="truncate">저장 설정</span>
                 </div>
-                <Button
-                  size="sm"
-                  variant="outline"
-                  onClick={() => setSaveSettingsModalOpen(true)}
-                  className="h-9 text-xs w-full"
-                >
-                  <Settings className="h-4 w-4 mr-2" />
-                  저장 설정 열기
-                </Button>
-              </div>
-              <HelpText>
-                데이터를 저장할 테이블과 방식을 설정합니다.
-                <br />
-                "저장 설정 열기"를 클릭하여 상세 설정을 변경하세요.
-              </HelpText>
-            </AccordionContent>
-          </AccordionItem>
-        </Accordion>
-
-        {/* 섹션 구성 */}
-        <Accordion type="single" collapsible defaultValue="sections" className="w-full min-w-0">
-          <AccordionItem value="sections" className="border rounded-lg w-full min-w-0">
-            <AccordionTrigger className="px-4 py-3 text-sm font-medium hover:no-underline w-full min-w-0">
-              <div className="flex items-center gap-2 w-full min-w-0">
-                <Layout className="h-4 w-4 shrink-0" />
-                <span className="truncate">섹션 구성</span>
-                <Badge variant="secondary" className="text-xs px-2 py-0.5 shrink-0">
-                  {config.sections.length}개
-                </Badge>
-              </div>
-            </AccordionTrigger>
-            <AccordionContent className="px-4 pb-4 space-y-4 w-full min-w-0">
-              {/* 섹션 추가 버튼들 */}
-              <div className="flex gap-2 w-full min-w-0">
-                <Button size="sm" variant="outline" onClick={() => addSection("fields")} className="h-9 text-xs flex-1 min-w-0">
-                  <Plus className="h-4 w-4 mr-1 shrink-0" />
-                  <span className="truncate">필드 섹션</span>
-                </Button>
-                <Button size="sm" variant="outline" onClick={() => addSection("table")} className="h-9 text-xs flex-1 min-w-0">
-                  <Table className="h-4 w-4 mr-1 shrink-0" />
-                  <span className="truncate">테이블 섹션</span>
-                </Button>
-              </div>
-              <HelpText>
-                필드 섹션: 일반 입력 필드들을 배치합니다.
-                <br />
-                테이블 섹션: 품목 목록 등 반복 테이블 형식 데이터를 관리합니다.
-              </HelpText>
-
-              {config.sections.length === 0 ? (
-                <div className="text-center py-12 border border-dashed rounded-lg w-full bg-muted/20">
-                  <p className="text-sm text-muted-foreground mb-2 font-medium">섹션이 없습니다</p>
-                  <p className="text-xs text-muted-foreground">위 버튼으로 섹션을 추가하세요</p>
+              </AccordionTrigger>
+              <AccordionContent className="w-full min-w-0 space-y-4 px-4 pb-4">
+                <div className="w-full min-w-0 space-y-3">
+                  <div className="min-w-0 flex-1">
+                    <Label className="mb-1.5 block text-xs font-medium">저장 테이블</Label>
+                    <p className="text-muted-foreground text-sm">{config.saveConfig.tableName || "(미설정)"}</p>
+                    {config.saveConfig.customApiSave?.enabled &&
+                      config.saveConfig.customApiSave?.multiTable?.enabled && (
+                        <Badge variant="secondary" className="mt-2 px-2 py-0.5 text-xs">
+                          다중 테이블 모드
+                        </Badge>
+                      )}
+                  </div>
+                  <Button
+                    size="sm"
+                    variant="outline"
+                    onClick={() => setSaveSettingsModalOpen(true)}
+                    className="h-9 w-full text-xs"
+                  >
+                    <Settings className="mr-2 h-4 w-4" />
+                    저장 설정 열기
+                  </Button>
                 </div>
-              ) : (
-                <div className="space-y-3 w-full min-w-0">
-                  {config.sections.map((section, index) => (
-                    <div key={section.id} className="border rounded-lg p-3 bg-card w-full min-w-0 overflow-hidden space-y-3">
-                      {/* 헤더: 제목 + 타입 배지 + 삭제 */}
-                      <div className="flex items-start justify-between gap-3 w-full min-w-0">
-                        <div className="flex-1 min-w-0">
-                          <div className="flex items-center gap-2 mb-1.5">
-                            <span className="text-sm font-medium truncate">{section.title}</span>
+                <HelpText>
+                  데이터를 저장할 테이블과 방식을 설정합니다.
+                  <br />
+                  "저장 설정 열기"를 클릭하여 상세 설정을 변경하세요.
+                </HelpText>
+              </AccordionContent>
+            </AccordionItem>
+          </Accordion>
+
+          {/* 섹션 구성 */}
+          <Accordion type="single" collapsible defaultValue="sections" className="w-full min-w-0">
+            <AccordionItem value="sections" className="w-full min-w-0 rounded-lg border">
+              <AccordionTrigger className="w-full min-w-0 px-4 py-3 text-sm font-medium hover:no-underline">
+                <div className="flex w-full min-w-0 items-center gap-2">
+                  <Layout className="h-4 w-4 shrink-0" />
+                  <span className="truncate">섹션 구성</span>
+                  <Badge variant="secondary" className="shrink-0 px-2 py-0.5 text-xs">
+                    {config.sections.length}개
+                  </Badge>
+                </div>
+              </AccordionTrigger>
+              <AccordionContent className="w-full min-w-0 space-y-4 px-4 pb-4">
+                {/* 섹션 추가 버튼들 */}
+                <div className="flex w-full min-w-0 gap-2">
+                  <Button
+                    size="sm"
+                    variant="outline"
+                    onClick={() => addSection("fields")}
+                    className="h-9 min-w-0 flex-1 text-xs"
+                  >
+                    <Plus className="mr-1 h-4 w-4 shrink-0" />
+                    <span className="truncate">필드 섹션</span>
+                  </Button>
+                  <Button
+                    size="sm"
+                    variant="outline"
+                    onClick={() => addSection("table")}
+                    className="h-9 min-w-0 flex-1 text-xs"
+                  >
+                    <Table className="mr-1 h-4 w-4 shrink-0" />
+                    <span className="truncate">테이블 섹션</span>
+                  </Button>
+                </div>
+                <HelpText>
+                  필드 섹션: 일반 입력 필드들을 배치합니다.
+                  <br />
+                  테이블 섹션: 품목 목록 등 반복 테이블 형식 데이터를 관리합니다.
+                </HelpText>
+
+                {config.sections.length === 0 ? (
+                  <div className="bg-muted/20 w-full rounded-lg border border-dashed py-12 text-center">
+                    <p className="text-muted-foreground mb-2 text-sm font-medium">섹션이 없습니다</p>
+                    <p className="text-muted-foreground text-xs">위 버튼으로 섹션을 추가하세요</p>
+                  </div>
+                ) : (
+                  <div className="w-full min-w-0 space-y-3">
+                    {config.sections.map((section, index) => (
+                      <div
+                        key={section.id}
+                        className="bg-card w-full min-w-0 space-y-3 overflow-hidden rounded-lg border p-3"
+                      >
+                        {/* 헤더: 제목 + 타입 배지 + 삭제 */}
+                        <div className="flex w-full min-w-0 items-start justify-between gap-3">
+                          <div className="min-w-0 flex-1">
+                            <div className="mb-1.5 flex items-center gap-2">
+                              <span className="truncate text-sm font-medium">{section.title}</span>
+                              {section.type === "table" ? (
+                                <Badge
+                                  variant="outline"
+                                  className="border-purple-200 bg-purple-50 px-1.5 py-0.5 text-xs text-purple-600"
+                                >
+                                  테이블
+                                </Badge>
+                              ) : section.repeatable ? (
+                                <Badge variant="outline" className="px-1.5 py-0.5 text-xs">
+                                  반복
+                                </Badge>
+                              ) : null}
+                            </div>
                             {section.type === "table" ? (
-                              <Badge variant="outline" className="text-xs px-1.5 py-0.5 text-purple-600 bg-purple-50 border-purple-200">
-                                테이블
+                              <Badge variant="secondary" className="px-2 py-0.5 text-xs">
+                                {section.tableConfig?.source?.tableName || "(소스 미설정)"}
                               </Badge>
-                            ) : section.repeatable ? (
-                              <Badge variant="outline" className="text-xs px-1.5 py-0.5">
-                                반복
+                            ) : (
+                              <Badge variant="secondary" className="px-2 py-0.5 text-xs">
+                                {(section.fields || []).length}개 필드
                               </Badge>
-                            ) : null}
+                            )}
                           </div>
-                          {section.type === "table" ? (
-                            <Badge variant="secondary" className="text-xs px-2 py-0.5">
-                              {section.tableConfig?.source?.tableName || "(소스 미설정)"}
-                            </Badge>
-                          ) : (
-                            <Badge variant="secondary" className="text-xs px-2 py-0.5">
-                              {(section.fields || []).length}개 필드
-                            </Badge>
-                          )}
-                        </div>
-                        
-                        <Button
-                          size="sm"
-                          variant="ghost"
-                          onClick={() => removeSection(section.id)}
-                          className="h-7 w-7 p-0 text-destructive hover:text-destructive shrink-0"
-                        >
-                          <Trash2 className="h-4 w-4" />
-                        </Button>
-                      </div>
 
-                      {/* 순서 조정 버튼 */}
-                      <div className="flex items-center gap-2">
-                        <GripVertical className="h-4 w-4 text-muted-foreground shrink-0" />
-                        <div className="flex gap-1">
+                          <Button
+                            size="sm"
+                            variant="ghost"
+                            onClick={() => removeSection(section.id)}
+                            className="text-destructive hover:text-destructive h-7 w-7 shrink-0 p-0"
+                          >
+                            <Trash2 className="h-4 w-4" />
+                          </Button>
+                        </div>
+
+                        {/* 순서 조정 버튼 */}
+                        <div className="flex items-center gap-2">
+                          <GripVertical className="text-muted-foreground h-4 w-4 shrink-0" />
+                          <div className="flex gap-1">
+                            <Button
+                              size="sm"
+                              variant="outline"
+                              onClick={() => moveSectionUp(index)}
+                              disabled={index === 0}
+                              className="h-7 px-2 text-xs"
+                            >
+                              <ChevronUp className="h-3.5 w-3.5" />
+                            </Button>
+                            <Button
+                              size="sm"
+                              variant="outline"
+                              onClick={() => moveSectionDown(index)}
+                              disabled={index === config.sections.length - 1}
+                              className="h-7 px-2 text-xs"
+                            >
+                              <ChevronDown className="h-3.5 w-3.5" />
+                            </Button>
+                          </div>
+                        </div>
+
+                        {/* 필드 목록 (필드 타입만) */}
+                        {section.type !== "table" && (section.fields || []).length > 0 && (
+                          <div className="flex max-w-full flex-wrap gap-1.5 overflow-hidden pt-1">
+                            {(section.fields || []).slice(0, 4).map((field) => (
+                              <Badge
+                                key={field.id}
+                                variant="outline"
+                                className={cn("shrink-0 px-2 py-0.5 text-xs", getFieldTypeColor(field.fieldType))}
+                              >
+                                {field.label}
+                              </Badge>
+                            ))}
+                            {(section.fields || []).length > 4 && (
+                              <Badge variant="outline" className="shrink-0 px-2 py-0.5 text-xs">
+                                +{(section.fields || []).length - 4}
+                              </Badge>
+                            )}
+                          </div>
+                        )}
+
+                        {/* 테이블 컬럼 목록 (테이블 타입만) */}
+                        {section.type === "table" &&
+                          section.tableConfig?.columns &&
+                          section.tableConfig.columns.length > 0 && (
+                            <div className="flex max-w-full flex-wrap gap-1.5 overflow-hidden pt-1">
+                              {section.tableConfig.columns.slice(0, 4).map((col, idx) => (
+                                <Badge
+                                  key={col.field || `col_${idx}`}
+                                  variant="outline"
+                                  className="shrink-0 border-purple-200 bg-purple-50 px-2 py-0.5 text-xs text-purple-600"
+                                >
+                                  {col.label || col.field || `컬럼 ${idx + 1}`}
+                                </Badge>
+                              ))}
+                              {section.tableConfig.columns.length > 4 && (
+                                <Badge variant="outline" className="shrink-0 px-2 py-0.5 text-xs">
+                                  +{section.tableConfig.columns.length - 4}
+                                </Badge>
+                              )}
+                            </div>
+                          )}
+
+                        {/* 설정 버튼 (타입에 따라 다름) */}
+                        {section.type === "table" ? (
                           <Button
                             size="sm"
                             variant="outline"
-                            onClick={() => moveSectionUp(index)}
-                            disabled={index === 0}
-                            className="h-7 px-2 text-xs"
+                            onClick={() => handleOpenTableSectionSettings(section)}
+                            className="h-9 w-full text-xs"
                           >
-                            <ChevronUp className="h-3.5 w-3.5" />
+                            <Table className="mr-2 h-4 w-4" />
+                            테이블 설정
                           </Button>
+                        ) : (
                           <Button
                             size="sm"
                             variant="outline"
-                            onClick={() => moveSectionDown(index)}
-                            disabled={index === config.sections.length - 1}
-                            className="h-7 px-2 text-xs"
+                            onClick={() => handleOpenSectionLayout(section)}
+                            className="h-9 w-full text-xs"
                           >
-                            <ChevronDown className="h-3.5 w-3.5" />
+                            <Layout className="mr-2 h-4 w-4" />
+                            레이아웃 설정
                           </Button>
-                        </div>
+                        )}
                       </div>
-
-                      {/* 필드 목록 (필드 타입만) */}
-                      {section.type !== "table" && (section.fields || []).length > 0 && (
-                        <div className="flex flex-wrap gap-1.5 max-w-full overflow-hidden pt-1">
-                          {(section.fields || []).slice(0, 4).map((field) => (
-                            <Badge
-                              key={field.id}
-                              variant="outline"
-                              className={cn("text-xs px-2 py-0.5 shrink-0", getFieldTypeColor(field.fieldType))}
-                            >
-                              {field.label}
-                            </Badge>
-                          ))}
-                          {(section.fields || []).length > 4 && (
-                            <Badge variant="outline" className="text-xs px-2 py-0.5 shrink-0">
-                              +{(section.fields || []).length - 4}
-                            </Badge>
-                          )}
-                        </div>
-                      )}
-                      
-                      {/* 테이블 컬럼 목록 (테이블 타입만) */}
-                      {section.type === "table" && section.tableConfig?.columns && section.tableConfig.columns.length > 0 && (
-                        <div className="flex flex-wrap gap-1.5 max-w-full overflow-hidden pt-1">
-                          {section.tableConfig.columns.slice(0, 4).map((col, idx) => (
-                            <Badge
-                              key={col.field || `col_${idx}`}
-                              variant="outline"
-                              className="text-xs px-2 py-0.5 shrink-0 text-purple-600 bg-purple-50 border-purple-200"
-                            >
-                              {col.label || col.field || `컬럼 ${idx + 1}`}
-                            </Badge>
-                          ))}
-                          {section.tableConfig.columns.length > 4 && (
-                            <Badge variant="outline" className="text-xs px-2 py-0.5 shrink-0">
-                              +{section.tableConfig.columns.length - 4}
-                            </Badge>
-                          )}
-                        </div>
-                      )}
-
-                      {/* 설정 버튼 (타입에 따라 다름) */}
-                      {section.type === "table" ? (
-                        <Button
-                          size="sm"
-                          variant="outline"
-                          onClick={() => handleOpenTableSectionSettings(section)}
-                          className="h-9 text-xs w-full"
-                        >
-                          <Table className="h-4 w-4 mr-2" />
-                          테이블 설정
-                        </Button>
-                      ) : (
-                        <Button
-                          size="sm"
-                          variant="outline"
-                          onClick={() => handleOpenSectionLayout(section)}
-                          className="h-9 text-xs w-full"
-                        >
-                          <Layout className="h-4 w-4 mr-2" />
-                          레이아웃 설정
-                        </Button>
-                      )}
-                    </div>
-                  ))}
-                </div>
-              )}
-            </AccordionContent>
-          </AccordionItem>
-        </Accordion>
+                    ))}
+                  </div>
+                )}
+              </AccordionContent>
+            </AccordionItem>
+          </Accordion>
         </div>
       </div>
 
@@ -813,11 +817,13 @@ export function UniversalFormModalConfigPanel({ config, onChange, allComponents
             setFieldDetailModalOpen(true);
           }}
           tableName={config.saveConfig.tableName}
-          tableColumns={tableColumns[config.saveConfig.tableName || ""]?.map(col => ({
-            name: col.name,
-            type: col.type,
-            label: col.label || col.name
-          })) || []}
+          tableColumns={
+            tableColumns[config.saveConfig.tableName || ""]?.map((col) => ({
+              name: col.name,
+              type: col.type,
+              label: col.label || col.name,
+            })) || []
+          }
         />
       )}
 
@@ -845,15 +851,13 @@ export function UniversalFormModalConfigPanel({ config, onChange, allComponents
                 fields: group.fields.map((f) => (f.id === updatedField.id ? updatedField : f)),
               })),
             };
-            
+
             // config 업데이트
             onChange({
               ...config,
-              sections: config.sections.map((s) =>
-                s.id === selectedSection.id ? updatedSection : s
-              ),
+              sections: config.sections.map((s) => (s.id === selectedSection.id ? updatedSection : s)),
             });
-            
+
             // selectedSection과 selectedField 상태도 업데이트 (다음에 다시 열었을 때 최신 값 반영)
             setSelectedSection(updatedSection);
             setSelectedField(updatedField as FormFieldConfig);
@@ -864,9 +868,16 @@ export function UniversalFormModalConfigPanel({ config, onChange, allComponents
           tableColumns={tableColumns}
           numberingRules={numberingRules}
           onLoadTableColumns={loadTableColumns}
-          availableParentFields={availableParentFields}
           targetTableName={config.saveConfig?.tableName}
           targetTableColumns={config.saveConfig?.tableName ? tableColumns[config.saveConfig.tableName] || [] : []}
+          allFieldsWithSections={config.sections
+            .filter(s => s.type !== "table" && !s.repeatable)
+            .map(s => ({
+              sectionId: s.id,
+              sectionTitle: s.title,
+              fields: s.fields || []
+            }))
+          }
         />
       )}
 
@@ -881,29 +892,28 @@ export function UniversalFormModalConfigPanel({ config, onChange, allComponents
               ...selectedSection,
               ...updates,
             };
-            
+
             // config 업데이트
             onChange({
               ...config,
-              sections: config.sections.map((s) =>
-                s.id === selectedSection.id ? updatedSection : s
-              ),
+              sections: config.sections.map((s) => (s.id === selectedSection.id ? updatedSection : s)),
             });
-            
+
             setSelectedSection(updatedSection);
             setTableSectionSettingsModalOpen(false);
           }}
-          tables={tables.map(t => ({ table_name: t.name, comment: t.label }))}
+          tables={tables.map((t) => ({ table_name: t.name, comment: t.label }))}
           tableColumns={Object.fromEntries(
             Object.entries(tableColumns).map(([tableName, cols]) => [
               tableName,
-              cols.map(c => ({
+              cols.map((c) => ({
                 column_name: c.name,
                 data_type: c.type,
                 is_nullable: "YES",
                 comment: c.label,
+                input_type: c.inputType || "text",
               })),
-            ])
+            ]),
           )}
           onLoadTableColumns={loadTableColumns}
           allSections={config.sections as FormSectionConfig[]}
diff --git a/frontend/lib/registry/components/universal-form-modal/config.ts b/frontend/lib/registry/components/universal-form-modal/config.ts
index 41c18043..08baf766 100644
--- a/frontend/lib/registry/components/universal-form-modal/config.ts
+++ b/frontend/lib/registry/components/universal-form-modal/config.ts
@@ -23,11 +23,6 @@ export const defaultConfig: UniversalFormModalConfig = {
     size: "lg",
     closeOnOutsideClick: false,
     showCloseButton: true,
-    showSaveButton: true,
-    saveButtonText: "저장",
-    cancelButtonText: "취소",
-    showResetButton: false,
-    resetButtonText: "초기화",
   },
   sections: [
     {
@@ -45,15 +40,6 @@ export const defaultConfig: UniversalFormModalConfig = {
   saveConfig: {
     tableName: "",
     primaryKeyColumn: "id",
-    multiRowSave: {
-      enabled: false,
-      commonFields: [],
-      repeatSectionId: "",
-      typeColumn: "",
-      mainTypeValue: "main",
-      subTypeValue: "concurrent",
-      mainSectionFields: [],
-    },
     afterSave: {
       closeModal: true,
       refreshParent: true,
diff --git a/frontend/lib/registry/components/universal-form-modal/index.ts b/frontend/lib/registry/components/universal-form-modal/index.ts
index f98bf438..40af1dfc 100644
--- a/frontend/lib/registry/components/universal-form-modal/index.ts
+++ b/frontend/lib/registry/components/universal-form-modal/index.ts
@@ -9,14 +9,14 @@ import { defaultConfig } from "./config";
 /**
  * 범용 폼 모달 컴포넌트 정의
  *
- * 섹션 기반 폼 레이아웃, 채번규칙, 다중 행 저장을 지원하는
+ * 섹션 기반 폼 레이아웃, 채번규칙을 지원하는
  * 범용 모달 컴포넌트입니다.
  */
 export const UniversalFormModalDefinition = createComponentDefinition({
   id: "universal-form-modal",
   name: "범용 폼 모달",
   nameEng: "Universal Form Modal",
-  description: "섹션 기반 폼 레이아웃, 채번규칙, 다중 행 저장을 지원하는 범용 모달 컴포넌트",
+  description: "섹션 기반 폼 레이아웃, 채번규칙을 지원하는 범용 모달 컴포넌트",
   category: ComponentCategory.INPUT,
   webType: "form",
   component: UniversalFormModalComponent,
@@ -28,7 +28,7 @@ export const UniversalFormModalDefinition = createComponentDefinition({
   },
   configPanel: UniversalFormModalConfigPanel,
   icon: "FormInput",
-  tags: ["폼", "모달", "입력", "저장", "채번", "겸직", "다중행"],
+  tags: ["폼", "모달", "입력", "저장", "채번"],
   version: "1.0.0",
   author: "개발팀",
   documentation: `
@@ -36,22 +36,22 @@ export const UniversalFormModalDefinition = createComponentDefinition({
 
 ### 주요 기능
 - **섹션 기반 레이아웃**: 기본 정보, 추가 정보 등 섹션별로 폼 구성
-- **반복 섹션**: 겸직처럼 동일한 필드 그룹을 여러 개 추가 가능
+- **반복 섹션**: 동일한 필드 그룹을 여러 개 추가 가능
 - **채번규칙 연동**: 자동 코드 생성 (모달 열릴 때 또는 저장 시점)
-- **다중 행 저장**: 공통 필드 + 개별 필드 조합으로 여러 행 동시 저장
+- **단일/다중 테이블 저장**: 단일 테이블 또는 메인+서브 테이블에 저장
 - **외부 데이터 수신**: 부모 화면에서 전달받은 값 자동 채움
 
 ### 사용 예시
-1. 부서관리 사원 추가 + 겸직 등록
-2. 품목 등록 + 규격 옵션 추가
-3. 거래처 등록 + 담당자 정보 추가
+1. 사원 등록, 부서 등록, 거래처 등록 (단일 테이블)
+2. 주문 등록 + 주문 상세 (다중 테이블)
+3. 품목 등록 + 규격 옵션 추가
 
 ### 설정 방법
 1. 저장 테이블 선택
-2. 섹션 추가 (기본 정보, 겸직 정보 등)
+2. 섹션 추가 (기본 정보 등)
 3. 각 섹션에 필드 추가
 4. 반복 섹션 설정 (필요 시)
-5. 다중 행 저장 설정 (필요 시)
+5. 다중 테이블 저장 설정 (필요 시)
 6. 채번규칙 연동 (필요 시)
   `,
 });
@@ -69,7 +69,6 @@ export type {
   FormSectionConfig,
   FormFieldConfig,
   SaveConfig,
-  MultiRowSaveConfig,
   NumberingRuleConfig,
   SelectOptionConfig,
   FormDataState,
diff --git a/frontend/lib/registry/components/universal-form-modal/modals/FieldDetailSettingsModal.tsx b/frontend/lib/registry/components/universal-form-modal/modals/FieldDetailSettingsModal.tsx
index 8882d9bc..afec5b6c 100644
--- a/frontend/lib/registry/components/universal-form-modal/modals/FieldDetailSettingsModal.tsx
+++ b/frontend/lib/registry/components/universal-form-modal/modals/FieldDetailSettingsModal.tsx
@@ -29,6 +29,7 @@ import {
   LINKED_FIELD_DISPLAY_FORMAT_OPTIONS,
 } from "../types";
 import { apiClient } from "@/lib/api/client";
+import { getCascadingRelations, getCascadingRelationByCode, CascadingRelation } from "@/lib/api/cascadingRelation";
 
 // 카테고리 컬럼 타입 (table_column_category_values 용)
 interface CategoryColumnOption {
@@ -56,6 +57,13 @@ export interface AvailableParentField {
   sourceTable?: string;   // 출처 테이블명
 }
 
+// 섹션별 필드 그룹
+interface SectionFieldGroup {
+  sectionId: string;
+  sectionTitle: string;
+  fields: FormFieldConfig[];
+}
+
 interface FieldDetailSettingsModalProps {
   open: boolean;
   onOpenChange: (open: boolean) => void;
@@ -65,11 +73,11 @@ interface FieldDetailSettingsModalProps {
   tableColumns: { [tableName: string]: { name: string; type: string; label: string }[] };
   numberingRules: { id: string; name: string }[];
   onLoadTableColumns: (tableName: string) => void;
-  // 부모 화면에서 전달 가능한 필드 목록 (선택사항)
-  availableParentFields?: AvailableParentField[];
   // 저장 테이블 정보 (타겟 컬럼 선택용)
   targetTableName?: string;
   targetTableColumns?: { name: string; type: string; label: string }[];
+  // 연쇄 드롭다운 부모 필드 선택용 - 모든 섹션의 필드 목록 (섹션별 그룹핑)
+  allFieldsWithSections?: SectionFieldGroup[];
 }
 
 export function FieldDetailSettingsModal({
@@ -81,10 +89,10 @@ export function FieldDetailSettingsModal({
   tableColumns,
   numberingRules,
   onLoadTableColumns,
-  availableParentFields = [],
   // targetTableName은 타겟 컬럼 선택 시 참고용으로 전달됨 (현재 targetTableColumns만 사용)
   targetTableName: _targetTableName,
   targetTableColumns = [],
+  allFieldsWithSections = [],
 }: FieldDetailSettingsModalProps) {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   void _targetTableName; // 향후 사용 가능성을 위해 유지
@@ -95,6 +103,12 @@ export function FieldDetailSettingsModal({
   const [categoryColumns, setCategoryColumns] = useState<CategoryColumnOption[]>([]);
   const [loadingCategoryColumns, setLoadingCategoryColumns] = useState(false);
   
+  // 연쇄 관계 목록 상태
+  const [cascadingRelations, setCascadingRelations] = useState<CascadingRelation[]>([]);
+  const [loadingCascadingRelations, setLoadingCascadingRelations] = useState(false);
+  const [cascadingRelationOpen, setCascadingRelationOpen] = useState(false);
+  const [parentFieldOpen, setParentFieldOpen] = useState(false);
+  
   // Combobox 열림 상태
   const [sourceTableOpen, setSourceTableOpen] = useState(false);
   const [targetColumnOpenMap, setTargetColumnOpenMap] = useState<Record<number, boolean>>({});
@@ -118,6 +132,16 @@ export function FieldDetailSettingsModal({
       }
     }
   }, [open, field.linkedFieldGroup?.sourceTable, tableColumns, onLoadTableColumns]);
+
+  // 모달이 열릴 때 Select 옵션의 참조 테이블 컬럼 자동 로드
+  useEffect(() => {
+    if (open && field.selectOptions?.tableName) {
+      // tableColumns에 해당 테이블 컬럼이 없으면 로드
+      if (!tableColumns[field.selectOptions.tableName] || tableColumns[field.selectOptions.tableName].length === 0) {
+        onLoadTableColumns(field.selectOptions.tableName);
+      }
+    }
+  }, [open, field.selectOptions?.tableName, tableColumns, onLoadTableColumns]);
   
   // 모든 카테고리 컬럼 목록 로드 (모달 열릴 때)
   useEffect(() => {
@@ -162,6 +186,66 @@ export function FieldDetailSettingsModal({
     loadAllCategoryColumns();
   }, [open]);
 
+  // 연쇄 관계 목록 로드 (모달 열릴 때)
+  useEffect(() => {
+    const loadCascadingRelations = async () => {
+      if (!open) return;
+      
+      setLoadingCascadingRelations(true);
+      try {
+        const result = await getCascadingRelations("Y"); // 활성화된 것만
+        if (result?.success && result?.data) {
+          setCascadingRelations(result.data);
+        } else {
+          setCascadingRelations([]);
+        }
+      } catch (error) {
+        setCascadingRelations([]);
+      } finally {
+        setLoadingCascadingRelations(false);
+      }
+    };
+    
+    loadCascadingRelations();
+  }, [open]);
+
+  // 관계 코드 선택 시 상세 설정 자동 채움
+  const handleRelationCodeSelect = async (relationCode: string) => {
+    if (!relationCode) return;
+    
+    try {
+      const result = await getCascadingRelationByCode(relationCode);
+      if (result?.success && result?.data) {
+        const relation = result.data as CascadingRelation;
+        updateField({
+          selectOptions: {
+            ...localField.selectOptions,
+            type: "cascading",
+            tableName: relation.child_table,
+            valueColumn: relation.child_value_column,
+            labelColumn: relation.child_label_column,
+            cascading: {
+              ...localField.selectOptions?.cascading,
+              relationCode: relation.relation_code,
+              sourceTable: relation.child_table,
+              parentKeyColumn: relation.child_filter_column,
+              emptyParentMessage: relation.empty_parent_message,
+              noOptionsMessage: relation.no_options_message,
+              clearOnParentChange: relation.clear_on_parent_change === "Y",
+            },
+          },
+        });
+        
+        // 소스 테이블 컬럼 로드
+        if (relation.child_table) {
+          onLoadTableColumns(relation.child_table);
+        }
+      }
+    } catch (error) {
+      console.error("관계 코드 조회 실패:", error);
+    }
+  };
+
   // 필드 업데이트 함수
   const updateField = (updates: Partial<FormFieldConfig>) => {
     setLocalField((prev) => ({ ...prev, ...updates }));
@@ -330,60 +414,6 @@ export function FieldDetailSettingsModal({
                   />
                 </div>
                 <HelpText>화면에 표시하지 않지만 값은 저장됩니다</HelpText>
-
-                <Separator className="my-2" />
-
-                <div className="flex items-center justify-between">
-                  <span className="text-[10px]">부모에서 값 받기</span>
-                  <Switch
-                    checked={localField.receiveFromParent || false}
-                    onCheckedChange={(checked) => updateField({ receiveFromParent: checked })}
-                  />
-                </div>
-                <HelpText>부모 화면에서 전달받은 값으로 자동 채워집니다</HelpText>
-
-                {/* 부모에서 값 받기 활성화 시 필드 선택 */}
-                {localField.receiveFromParent && (
-                  <div className="mt-3 space-y-2 p-3 rounded-md bg-blue-50 border border-blue-200">
-                    <Label className="text-xs font-medium text-blue-700">부모 필드명 선택</Label>
-                    {availableParentFields.length > 0 ? (
-                      <Select
-                        value={localField.parentFieldName || localField.columnName}
-                        onValueChange={(value) => updateField({ parentFieldName: value })}
-                      >
-                        <SelectTrigger className="h-7 text-xs">
-                          <SelectValue placeholder="필드 선택" />
-                        </SelectTrigger>
-                        <SelectContent>
-                          {availableParentFields.map((pf) => (
-                            <SelectItem key={pf.name} value={pf.name}>
-                              <div className="flex flex-col">
-                                <span>{pf.label || pf.name}</span>
-                                {pf.sourceComponent && (
-                                  <span className="text-[9px] text-muted-foreground">
-                                    {pf.sourceComponent}{pf.sourceTable && ` (${pf.sourceTable})`}
-                                  </span>
-                                )}
-                              </div>
-                            </SelectItem>
-                          ))}
-                        </SelectContent>
-                      </Select>
-                    ) : (
-                      <div className="space-y-1">
-                        <Input
-                          value={localField.parentFieldName || ""}
-                          onChange={(e) => updateField({ parentFieldName: e.target.value })}
-                          placeholder={`예: ${localField.columnName || "parent_field_name"}`}
-                          className="h-8 text-xs"
-                        />
-                        <p className="text-[10px] text-muted-foreground">
-                          부모 화면에서 전달받을 필드명을 입력하세요. 비워두면 "{localField.columnName}"을 사용합니다.
-                        </p>
-                      </div>
-                    )}
-                  </div>
-                )}
               </div>
 
               {/* Accordion으로 고급 설정 */}
@@ -409,14 +439,28 @@ export function FieldDetailSettingsModal({
                         <Label className="text-[10px]">옵션 타입</Label>
                         <Select
                           value={localField.selectOptions?.type || "static"}
-                          onValueChange={(value) =>
-                            updateField({
-                              selectOptions: {
-                                ...localField.selectOptions,
-                                type: value as "static" | "code",
-                              },
-                            })
-                          }
+                          onValueChange={(value) => {
+                            // 타입 변경 시 관련 설정 초기화
+                            if (value === "cascading") {
+                              updateField({
+                                selectOptions: {
+                                  type: "cascading",
+                                  cascading: {
+                                    parentField: "",
+                                    clearOnParentChange: true,
+                                  },
+                                },
+                              });
+                            } else {
+                              updateField({
+                                selectOptions: {
+                                  ...localField.selectOptions,
+                                  type: value as "static" | "table" | "code",
+                                  cascading: undefined,
+                                },
+                              });
+                            }
+                          }}
                         >
                           <SelectTrigger className="h-7 text-xs mt-1">
                             <SelectValue />
@@ -429,8 +473,38 @@ export function FieldDetailSettingsModal({
                             ))}
                           </SelectContent>
                         </Select>
+                        <HelpText>
+                          {localField.selectOptions?.type === "cascading" 
+                            ? "연쇄 드롭다운: 부모 필드 선택에 따라 옵션이 동적으로 변경됩니다"
+                            : "테이블 참조: DB 테이블에서 옵션 목록을 가져옵니다."}
+                        </HelpText>
                       </div>
 
+                      {/* 직접 입력 허용 - 모든 Select 타입에 공통 적용 */}
+                      <div className="flex items-center justify-between pt-2 border-t">
+                        <div className="flex flex-col">
+                          <span className="text-[10px] font-medium">직접 입력 허용</span>
+                          <span className="text-[9px] text-muted-foreground">
+                            목록 선택 + 직접 타이핑 가능
+                          </span>
+                        </div>
+                        <Switch
+                          checked={localField.selectOptions?.allowCustomInput || false}
+                          onCheckedChange={(checked) =>
+                            updateField({
+                              selectOptions: {
+                                ...localField.selectOptions,
+                                allowCustomInput: checked,
+                              },
+                            })
+                          }
+                        />
+                      </div>
+                      <HelpText>
+                        활성화 시 드롭다운 목록에서 선택하거나, 직접 값을 입력할 수 있습니다.
+                        목록에 없는 새로운 값도 입력 가능합니다.
+                      </HelpText>
+
                       {localField.selectOptions?.type === "table" && (
                         <div className="space-y-3 pt-2 border-t">
                           <HelpText>테이블 참조: DB 테이블에서 옵션 목록을 가져옵니다.</HelpText>
@@ -641,6 +715,472 @@ export function FieldDetailSettingsModal({
                           </div>
                         </div>
                       )}
+
+                      {localField.selectOptions?.type === "cascading" && (
+                        <div className="space-y-3 pt-2 border-t">
+                          <HelpText>
+                            연쇄 드롭다운: 부모 필드의 값에 따라 옵션이 동적으로 필터링됩니다.
+                            <br />
+                            예: 거래처 선택 → 해당 거래처의 납품처만 표시
+                          </HelpText>
+
+                          {/* 부모 필드 선택 - 콤보박스 (섹션별 그룹핑) */}
+                          <div>
+                            <Label className="text-[10px]">부모 필드명 *</Label>
+                            {allFieldsWithSections.length > 0 ? (
+                              <Popover open={parentFieldOpen} onOpenChange={setParentFieldOpen}>
+                                <PopoverTrigger asChild>
+                                  <Button
+                                    variant="outline"
+                                    role="combobox"
+                                    aria-expanded={parentFieldOpen}
+                                    className="h-7 w-full justify-between text-xs mt-1 font-normal"
+                                  >
+                                    {localField.selectOptions?.cascading?.parentField
+                                      ? (() => {
+                                          // 모든 섹션에서 선택된 필드 찾기
+                                          for (const section of allFieldsWithSections) {
+                                            const selectedField = section.fields.find(
+                                              (f) => f.columnName === localField.selectOptions?.cascading?.parentField
+                                            );
+                                            if (selectedField) {
+                                              return `${selectedField.label} (${selectedField.columnName})`;
+                                            }
+                                          }
+                                          return localField.selectOptions?.cascading?.parentField;
+                                        })()
+                                      : "부모 필드 선택..."}
+                                    <ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
+                                  </Button>
+                                </PopoverTrigger>
+                                <PopoverContent className="w-[350px] p-0" align="start">
+                                  <Command>
+                                    <CommandInput placeholder="필드 검색..." className="h-8 text-xs" />
+                                    <CommandList className="max-h-[300px]">
+                                      <CommandEmpty className="py-2 text-xs text-center">
+                                        선택 가능한 필드가 없습니다.
+                                      </CommandEmpty>
+                                      {allFieldsWithSections.map((section) => {
+                                        // 자기 자신 제외한 필드 목록
+                                        const availableFields = section.fields.filter(
+                                          (f) => f.columnName !== field.columnName
+                                        );
+                                        if (availableFields.length === 0) return null;
+                                        
+                                        return (
+                                          <CommandGroup 
+                                            key={section.sectionId} 
+                                            heading={section.sectionTitle}
+                                            className="[&_[cmdk-group-heading]]:text-[10px] [&_[cmdk-group-heading]]:font-semibold [&_[cmdk-group-heading]]:text-primary [&_[cmdk-group-heading]]:bg-muted/50 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1"
+                                          >
+                                            {availableFields.map((f) => (
+                                              <CommandItem
+                                                key={f.id}
+                                                value={`${section.sectionTitle} ${f.columnName} ${f.label}`}
+                                                onSelect={() => {
+                                                  updateField({
+                                                    selectOptions: {
+                                                      ...localField.selectOptions,
+                                                      cascading: {
+                                                        ...localField.selectOptions?.cascading,
+                                                        parentField: f.columnName,
+                                                      },
+                                                    },
+                                                  });
+                                                  setParentFieldOpen(false);
+                                                }}
+                                                className="text-xs"
+                                              >
+                                                <Check
+                                                  className={cn(
+                                                    "mr-2 h-3 w-3",
+                                                    localField.selectOptions?.cascading?.parentField === f.columnName
+                                                      ? "opacity-100"
+                                                      : "opacity-0"
+                                                  )}
+                                                />
+                                                <div className="flex flex-col">
+                                                  <span className="font-medium">{f.label}</span>
+                                                  <span className="text-[9px] text-muted-foreground">
+                                                    {f.columnName} ({f.fieldType})
+                                                  </span>
+                                                </div>
+                                              </CommandItem>
+                                            ))}
+                                          </CommandGroup>
+                                        );
+                                      })}
+                                    </CommandList>
+                                  </Command>
+                                </PopoverContent>
+                              </Popover>
+                            ) : (
+                              <Input
+                                value={localField.selectOptions?.cascading?.parentField || ""}
+                                onChange={(e) =>
+                                  updateField({
+                                    selectOptions: {
+                                      ...localField.selectOptions,
+                                      cascading: {
+                                        ...localField.selectOptions?.cascading,
+                                        parentField: e.target.value,
+                                      },
+                                    },
+                                  })
+                                }
+                                placeholder="customer_code"
+                                className="h-7 text-xs mt-1"
+                              />
+                            )}
+                            <HelpText>
+                              이 드롭다운의 옵션을 결정할 부모 필드를 선택하세요
+                              <br />
+                              예: 거래처 선택 → 납품처 필터링
+                            </HelpText>
+                          </div>
+
+                          {/* 관계 코드 선택 */}
+                          <div>
+                            <Label className="text-[10px]">관계 코드 (선택)</Label>
+                            <Popover open={cascadingRelationOpen} onOpenChange={setCascadingRelationOpen}>
+                              <PopoverTrigger asChild>
+                                <Button
+                                  variant="outline"
+                                  role="combobox"
+                                  aria-expanded={cascadingRelationOpen}
+                                  className="h-7 w-full justify-between text-xs mt-1 font-normal"
+                                >
+                                  {localField.selectOptions?.cascading?.relationCode
+                                    ? (() => {
+                                        const selectedRelation = cascadingRelations.find(
+                                          (r) => r.relation_code === localField.selectOptions?.cascading?.relationCode
+                                        );
+                                        return selectedRelation
+                                          ? `${selectedRelation.relation_name} (${selectedRelation.relation_code})`
+                                          : localField.selectOptions?.cascading?.relationCode;
+                                      })()
+                                    : loadingCascadingRelations 
+                                      ? "로딩 중..." 
+                                      : "관계 선택 (또는 직접 설정)"}
+                                  <ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
+                                </Button>
+                              </PopoverTrigger>
+                              <PopoverContent className="w-[350px] p-0" align="start">
+                                <Command>
+                                  <CommandInput placeholder="관계 검색..." className="h-8 text-xs" />
+                                  <CommandList>
+                                    <CommandEmpty className="py-2 text-xs text-center">
+                                      등록된 연쇄 관계가 없습니다.
+                                    </CommandEmpty>
+                                    <CommandGroup>
+                                      {/* 직접 설정 옵션 */}
+                                      <CommandItem
+                                        value="__direct__"
+                                        onSelect={() => {
+                                          updateField({
+                                            selectOptions: {
+                                              ...localField.selectOptions,
+                                              cascading: {
+                                                ...localField.selectOptions?.cascading,
+                                                relationCode: undefined,
+                                              },
+                                            },
+                                          });
+                                          setCascadingRelationOpen(false);
+                                        }}
+                                        className="text-xs"
+                                      >
+                                        <Check
+                                          className={cn(
+                                            "mr-2 h-3 w-3",
+                                            !localField.selectOptions?.cascading?.relationCode
+                                              ? "opacity-100"
+                                              : "opacity-0"
+                                          )}
+                                        />
+                                        <span className="text-muted-foreground">직접 설정</span>
+                                      </CommandItem>
+                                      <Separator className="my-1" />
+                                      {cascadingRelations.map((relation) => (
+                                        <CommandItem
+                                          key={relation.relation_id}
+                                          value={`${relation.relation_code} ${relation.relation_name}`}
+                                          onSelect={() => {
+                                            handleRelationCodeSelect(relation.relation_code);
+                                            setCascadingRelationOpen(false);
+                                          }}
+                                          className="text-xs"
+                                        >
+                                          <Check
+                                            className={cn(
+                                              "mr-2 h-3 w-3",
+                                              localField.selectOptions?.cascading?.relationCode === relation.relation_code
+                                                ? "opacity-100"
+                                                : "opacity-0"
+                                            )}
+                                          />
+                                          <div className="flex flex-col">
+                                            <span className="font-medium">{relation.relation_name}</span>
+                                            <span className="text-[9px] text-muted-foreground">
+                                              {relation.parent_table} → {relation.child_table}
+                                            </span>
+                                          </div>
+                                        </CommandItem>
+                                      ))}
+                                    </CommandGroup>
+                                  </CommandList>
+                                </Command>
+                              </PopoverContent>
+                            </Popover>
+                            <HelpText>
+                              미리 등록된 관계를 선택하면 설정이 자동으로 채워집니다.
+                              <br />
+                              직접 설정을 선택하면 아래에서 수동으로 입력할 수 있습니다.
+                            </HelpText>
+                          </div>
+
+                          <Separator />
+
+                          {/* 상세 설정 (수정 가능) */}
+                          <div className="space-y-3">
+                            <div className="flex items-center gap-2">
+                              <SettingsIcon className="h-3 w-3 text-muted-foreground" />
+                              <span className="text-[10px] font-medium">상세 설정 (수정 가능)</span>
+                            </div>
+
+                            <div>
+                              <Label className="text-[10px]">소스 테이블</Label>
+                              <Select
+                                value={localField.selectOptions?.cascading?.sourceTable || localField.selectOptions?.tableName || ""}
+                                onValueChange={(value) => {
+                                  updateField({
+                                    selectOptions: {
+                                      ...localField.selectOptions,
+                                      tableName: value,
+                                      cascading: {
+                                        ...localField.selectOptions?.cascading,
+                                        sourceTable: value,
+                                      },
+                                    },
+                                  });
+                                  onLoadTableColumns(value);
+                                }}
+                              >
+                                <SelectTrigger className="h-7 text-xs mt-1">
+                                  <SelectValue placeholder="테이블 선택" />
+                                </SelectTrigger>
+                                <SelectContent>
+                                  {tables.map((t) => (
+                                    <SelectItem key={t.name} value={t.name}>
+                                      {t.label || t.name}
+                                    </SelectItem>
+                                  ))}
+                                </SelectContent>
+                              </Select>
+                              <HelpText>옵션을 가져올 테이블 (예: delivery_destination)</HelpText>
+                            </div>
+
+                            <div>
+                              <Label className="text-[10px]">부모 키 컬럼</Label>
+                              {selectTableColumns.length > 0 ? (
+                                <Select
+                                  value={localField.selectOptions?.cascading?.parentKeyColumn || ""}
+                                  onValueChange={(value) =>
+                                    updateField({
+                                      selectOptions: {
+                                        ...localField.selectOptions,
+                                        cascading: {
+                                          ...localField.selectOptions?.cascading,
+                                          parentKeyColumn: value,
+                                        },
+                                      },
+                                    })
+                                  }
+                                >
+                                  <SelectTrigger className="h-7 text-xs mt-1">
+                                    <SelectValue placeholder="컬럼 선택" />
+                                  </SelectTrigger>
+                                  <SelectContent>
+                                    {selectTableColumns.map((col) => (
+                                      <SelectItem key={col.name} value={col.name}>
+                                        {col.name}
+                                        {col.label !== col.name && ` (${col.label})`}
+                                      </SelectItem>
+                                    ))}
+                                  </SelectContent>
+                                </Select>
+                              ) : (
+                                <Input
+                                  value={localField.selectOptions?.cascading?.parentKeyColumn || ""}
+                                  onChange={(e) =>
+                                    updateField({
+                                      selectOptions: {
+                                        ...localField.selectOptions,
+                                        cascading: {
+                                          ...localField.selectOptions?.cascading,
+                                          parentKeyColumn: e.target.value,
+                                        },
+                                      },
+                                    })
+                                  }
+                                  placeholder="customer_code"
+                                  className="h-7 text-xs mt-1"
+                                />
+                              )}
+                              <HelpText>부모 값과 매칭할 컬럼 (예: customer_code)</HelpText>
+                            </div>
+
+                            <div>
+                              <Label className="text-[10px]">값 컬럼</Label>
+                              {selectTableColumns.length > 0 ? (
+                                <Select
+                                  value={localField.selectOptions?.valueColumn || ""}
+                                  onValueChange={(value) =>
+                                    updateField({
+                                      selectOptions: {
+                                        ...localField.selectOptions,
+                                        valueColumn: value,
+                                      },
+                                    })
+                                  }
+                                >
+                                  <SelectTrigger className="h-7 text-xs mt-1">
+                                    <SelectValue placeholder="컬럼 선택" />
+                                  </SelectTrigger>
+                                  <SelectContent>
+                                    {selectTableColumns.map((col) => (
+                                      <SelectItem key={col.name} value={col.name}>
+                                        {col.name}
+                                        {col.label !== col.name && ` (${col.label})`}
+                                      </SelectItem>
+                                    ))}
+                                  </SelectContent>
+                                </Select>
+                              ) : (
+                                <Input
+                                  value={localField.selectOptions?.valueColumn || ""}
+                                  onChange={(e) =>
+                                    updateField({
+                                      selectOptions: {
+                                        ...localField.selectOptions,
+                                        valueColumn: e.target.value,
+                                      },
+                                    })
+                                  }
+                                  placeholder="destination_code"
+                                  className="h-7 text-xs mt-1"
+                                />
+                              )}
+                              <HelpText>드롭다운 value로 사용할 컬럼</HelpText>
+                            </div>
+
+                            <div>
+                              <Label className="text-[10px]">라벨 컬럼</Label>
+                              {selectTableColumns.length > 0 ? (
+                                <Select
+                                  value={localField.selectOptions?.labelColumn || ""}
+                                  onValueChange={(value) =>
+                                    updateField({
+                                      selectOptions: {
+                                        ...localField.selectOptions,
+                                        labelColumn: value,
+                                      },
+                                    })
+                                  }
+                                >
+                                  <SelectTrigger className="h-7 text-xs mt-1">
+                                    <SelectValue placeholder="컬럼 선택" />
+                                  </SelectTrigger>
+                                  <SelectContent>
+                                    {selectTableColumns.map((col) => (
+                                      <SelectItem key={col.name} value={col.name}>
+                                        {col.name}
+                                        {col.label !== col.name && ` (${col.label})`}
+                                      </SelectItem>
+                                    ))}
+                                  </SelectContent>
+                                </Select>
+                              ) : (
+                                <Input
+                                  value={localField.selectOptions?.labelColumn || ""}
+                                  onChange={(e) =>
+                                    updateField({
+                                      selectOptions: {
+                                        ...localField.selectOptions,
+                                        labelColumn: e.target.value,
+                                      },
+                                    })
+                                  }
+                                  placeholder="destination_name"
+                                  className="h-7 text-xs mt-1"
+                                />
+                              )}
+                              <HelpText>드롭다운에 표시할 컬럼</HelpText>
+                            </div>
+
+                            <Separator />
+
+                            <div>
+                              <Label className="text-[10px]">부모 미선택 시 메시지</Label>
+                              <Input
+                                value={localField.selectOptions?.cascading?.emptyParentMessage || ""}
+                                onChange={(e) =>
+                                  updateField({
+                                    selectOptions: {
+                                      ...localField.selectOptions,
+                                      cascading: {
+                                        ...localField.selectOptions?.cascading,
+                                        emptyParentMessage: e.target.value,
+                                      },
+                                    },
+                                  })
+                                }
+                                placeholder="상위 항목을 먼저 선택하세요"
+                                className="h-7 text-xs mt-1"
+                              />
+                            </div>
+
+                            <div>
+                              <Label className="text-[10px]">옵션 없음 메시지</Label>
+                              <Input
+                                value={localField.selectOptions?.cascading?.noOptionsMessage || ""}
+                                onChange={(e) =>
+                                  updateField({
+                                    selectOptions: {
+                                      ...localField.selectOptions,
+                                      cascading: {
+                                        ...localField.selectOptions?.cascading,
+                                        noOptionsMessage: e.target.value,
+                                      },
+                                    },
+                                  })
+                                }
+                                placeholder="선택 가능한 항목이 없습니다"
+                                className="h-7 text-xs mt-1"
+                              />
+                            </div>
+
+                            <div className="flex items-center justify-between">
+                              <span className="text-[10px]">부모 변경 시 값 초기화</span>
+                              <Switch
+                                checked={localField.selectOptions?.cascading?.clearOnParentChange !== false}
+                                onCheckedChange={(checked) =>
+                                  updateField({
+                                    selectOptions: {
+                                      ...localField.selectOptions,
+                                      cascading: {
+                                        ...localField.selectOptions?.cascading,
+                                        clearOnParentChange: checked,
+                                      },
+                                    },
+                                  })
+                                }
+                              />
+                            </div>
+                            <HelpText>부모 필드 값이 변경되면 이 필드의 값을 자동으로 초기화합니다</HelpText>
+                          </div>
+                        </div>
+                      )}
                     </AccordionContent>
                   </AccordionItem>
                 )}
@@ -976,7 +1516,7 @@ export function FieldDetailSettingsModal({
                                 preview = `${subLabel} - ${mainLabel}`;
                               } else if (format === "name_code" && subCol) {
                                 preview = `${mainLabel} (${subLabel})`;
-                              } else if (format !== "name_only" && !subCol) {
+                              } else if (!subCol) {
                                 preview = `${mainLabel} (서브 컬럼을 선택하세요)`;
                               } else {
                                 preview = mainLabel;
diff --git a/frontend/lib/registry/components/universal-form-modal/modals/SaveSettingsModal.tsx b/frontend/lib/registry/components/universal-form-modal/modals/SaveSettingsModal.tsx
index 11b3a8ae..01c87fcb 100644
--- a/frontend/lib/registry/components/universal-form-modal/modals/SaveSettingsModal.tsx
+++ b/frontend/lib/registry/components/universal-form-modal/modals/SaveSettingsModal.tsx
@@ -378,7 +378,11 @@ export function SaveSettingsModal({
                       단일 테이블 저장
                     </Label>
                   </div>
-                  <HelpText>모든 필드를 하나의 테이블에 저장합니다 (기본 방식)</HelpText>
+                  <HelpText>
+                    폼 데이터를 하나의 테이블에 1개 행으로 저장합니다.
+                    <br />
+                    예: 사원 등록, 부서 등록, 거래처 등록 등 단순 등록 화면
+                  </HelpText>
 
                   <div className="flex items-center space-x-2 pt-2">
                     <RadioGroupItem value="multi" id="mode-multi" />
@@ -387,9 +391,13 @@ export function SaveSettingsModal({
                     </Label>
                   </div>
                   <HelpText>
-                    메인 테이블 + 서브 테이블에 트랜잭션으로 저장합니다
+                    하나의 폼으로 여러 테이블에 동시 저장합니다. (트랜잭션으로 묶임)
                     <br />
-                    예: 주문(orders) + 주문상세(order_items), 사원(user_info) + 부서(user_dept)
+                    메인 테이블: 폼의 모든 필드 중 해당 테이블 컬럼과 일치하는 것 자동 저장
+                    <br />
+                    서브 테이블: 필드 매핑에서 지정한 필드만 저장 (메인 테이블의 키 값이 자동 연결됨)
+                    <br />
+                    예: 사원+부서배정(user_info+user_dept), 주문+주문상세(orders+order_items)
                   </HelpText>
                 </RadioGroup>
               </div>
@@ -691,9 +699,11 @@ export function SaveSettingsModal({
                     </div>
 
                     <HelpText>
-                      반복 섹션 데이터를 별도 테이블에 저장합니다.
+                      폼에서 입력한 필드를 서브 테이블에 나눠서 저장합니다.
                       <br />
-                      예: 주문상세(order_items), 겸직부서(user_dept)
+                      메인 테이블의 키 값(예: user_id)이 서브 테이블에 자동으로 연결됩니다.
+                      <br />
+                      필드 매핑에서 지정한 필드만 서브 테이블에 저장됩니다.
                     </HelpText>
 
                     {(localSaveConfig.customApiSave?.multiTable?.subTables || []).length === 0 ? (
@@ -802,13 +812,13 @@ export function SaveSettingsModal({
                                   </div>
 
                                   <div>
-                                    <Label className="text-[10px]">연결할 반복 섹션</Label>
+                                    <Label className="text-[10px]">연결할 반복 섹션 (선택사항)</Label>
                                     <Select
                                       value={subTable.repeatSectionId || ""}
                                       onValueChange={(value) => updateSubTable(subIndex, { repeatSectionId: value })}
                                     >
                                       <SelectTrigger className="h-7 text-xs mt-1">
-                                        <SelectValue placeholder="섹션 선택" />
+                                        <SelectValue placeholder="섹션 선택 (없으면 필드 매핑만 사용)" />
                                       </SelectTrigger>
                                       <SelectContent>
                                         {repeatSections.length === 0 ? (
@@ -824,7 +834,13 @@ export function SaveSettingsModal({
                                         )}
                                       </SelectContent>
                                     </Select>
-                                    <HelpText>이 서브 테이블에 저장할 반복 섹션을 선택하세요</HelpText>
+                                    <HelpText>
+                                      반복 섹션: 폼 안에서 동적으로 항목을 추가/삭제할 수 있는 섹션 (예: 주문 품목 목록)
+                                      <br />
+                                      반복 섹션이 있으면 해당 섹션의 각 항목이 서브 테이블에 여러 행으로 저장됩니다.
+                                      <br />
+                                      반복 섹션 없이 필드 매핑만 사용하면 1개 행만 저장됩니다.
+                                    </HelpText>
                                   </div>
 
                                   <Separator />
diff --git a/frontend/lib/registry/components/universal-form-modal/modals/TableColumnSettingsModal.tsx b/frontend/lib/registry/components/universal-form-modal/modals/TableColumnSettingsModal.tsx
index 79a78d10..7099e43e 100644
--- a/frontend/lib/registry/components/universal-form-modal/modals/TableColumnSettingsModal.tsx
+++ b/frontend/lib/registry/components/universal-form-modal/modals/TableColumnSettingsModal.tsx
@@ -48,12 +48,12 @@ interface TableColumnSettingsModalProps {
   onOpenChange: (open: boolean) => void;
   column: TableColumnConfig;
   sourceTableName: string; // 소스 테이블명
-  sourceTableColumns: { column_name: string; data_type: string; comment?: string }[];
+  sourceTableColumns: { column_name: string; data_type: string; comment?: string; input_type?: string }[];
   formFields: { columnName: string; label: string; sectionId?: string; sectionTitle?: string }[]; // formData 필드 목록 (섹션 정보 포함)
   sections: { id: string; title: string }[]; // 섹션 목록
   onSave: (updatedColumn: TableColumnConfig) => void;
   tables: { table_name: string; comment?: string }[];
-  tableColumns: Record<string, { column_name: string; data_type: string; is_nullable: string; comment?: string }[]>;
+  tableColumns: Record<string, { column_name: string; data_type: string; is_nullable: string; comment?: string; input_type?: string }[]>;
   onLoadTableColumns: (tableName: string) => void;
 }
 
@@ -103,6 +103,18 @@ export function TableColumnSettingsModal({
     return tableColumns[externalTableName] || [];
   }, [tableColumns, externalTableName]);
 
+  // 소스 필드 기준으로 카테고리 타입인지 확인
+  const actualSourceField = localColumn.sourceField || localColumn.field;
+  const sourceColumnInfo = sourceTableColumns.find((c) => c.column_name === actualSourceField);
+  const isCategoryColumn = sourceColumnInfo?.input_type === "category";
+
+  // 카테고리 컬럼인 경우 타입을 자동으로 category로 설정
+  useEffect(() => {
+    if (isCategoryColumn && localColumn.type !== "category") {
+      updateColumn({ type: "category" });
+    }
+  }, [isCategoryColumn, localColumn.type]);
+
   // 컬럼 업데이트 함수
   const updateColumn = (updates: Partial<TableColumnConfig>) => {
     setLocalColumn((prev) => ({ ...prev, ...updates }));
@@ -574,10 +586,11 @@ export function TableColumnSettingsModal({
                     <div>
                       <Label className="text-xs">타입</Label>
                       <Select
-                        value={localColumn.type}
+                        value={isCategoryColumn ? "category" : localColumn.type}
                         onValueChange={(value: any) => updateColumn({ type: value })}
+                        disabled={isCategoryColumn}
                       >
-                        <SelectTrigger className="h-8 text-xs mt-1">
+                        <SelectTrigger className={cn("h-8 text-xs mt-1", isCategoryColumn && "opacity-70 cursor-not-allowed")}>
                           <SelectValue />
                         </SelectTrigger>
                         <SelectContent>
@@ -588,6 +601,9 @@ export function TableColumnSettingsModal({
                           ))}
                         </SelectContent>
                       </Select>
+                      {isCategoryColumn && (
+                        <p className="text-[10px] text-blue-600 mt-0.5">테이블 타입 관리에서 카테고리로 설정됨</p>
+                      )}
                     </div>
                     <div>
                       <Label className="text-xs">너비</Label>
diff --git a/frontend/lib/registry/components/universal-form-modal/modals/TableSectionSettingsModal.tsx b/frontend/lib/registry/components/universal-form-modal/modals/TableSectionSettingsModal.tsx
index b01d6b09..1970f1a5 100644
--- a/frontend/lib/registry/components/universal-form-modal/modals/TableSectionSettingsModal.tsx
+++ b/frontend/lib/registry/components/universal-form-modal/modals/TableSectionSettingsModal.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useState, useEffect, useMemo } from "react";
+import React, { useState, useEffect, useMemo, useCallback } from "react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
@@ -15,6 +15,7 @@ import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { Plus, Trash2, GripVertical, ChevronUp, ChevronDown, Settings, Check, ChevronsUpDown, Filter, Table as TableIcon, Search } from "lucide-react";
 import { cn } from "@/lib/utils";
+import { apiClient } from "@/lib/api/client";
 
 // 타입 import
 import {
@@ -705,12 +706,15 @@ interface ColumnSettingItemProps {
   col: TableColumnConfig;
   index: number;
   totalCount: number;
-  saveTableColumns: { column_name: string; data_type: string; is_nullable: string; comment?: string }[];
+  saveTableColumns: { column_name: string; data_type: string; is_nullable: string; comment?: string; input_type?: string }[];
   displayColumns: string[];  // 검색 설정에서 선택한 표시 컬럼 목록
-  sourceTableColumns: { column_name: string; data_type: string; is_nullable: string; comment?: string }[];  // 소스 테이블 컬럼
+  sourceTableColumns: { column_name: string; data_type: string; is_nullable: string; comment?: string; input_type?: string }[];  // 소스 테이블 컬럼
   sourceTableName: string;  // 소스 테이블명
+  externalTableColumns: { column_name: string; data_type: string; is_nullable: string; comment?: string; input_type?: string }[];  // 외부 데이터 테이블 컬럼
+  externalTableName?: string;  // 외부 데이터 테이블명
+  externalDataEnabled?: boolean;  // 외부 데이터 소스 활성화 여부
   tables: { table_name: string; comment?: string }[];  // 전체 테이블 목록
-  tableColumns: Record<string, { column_name: string; data_type: string; is_nullable: string; comment?: string }[]>;  // 테이블별 컬럼
+  tableColumns: Record<string, { column_name: string; data_type: string; is_nullable: string; comment?: string; input_type?: string }[]>;  // 테이블별 컬럼
   sections: { id: string; title: string }[];  // 섹션 목록
   formFields: { columnName: string; label: string; sectionId?: string }[];  // 폼 필드 목록
   tableConfig: TableSectionConfig;  // 현재 행 필드 목록 표시용
@@ -730,6 +734,9 @@ function ColumnSettingItem({
   displayColumns,
   sourceTableColumns,
   sourceTableName,
+  externalTableColumns,
+  externalTableName,
+  externalDataEnabled,
   tables,
   tableColumns,
   sections,
@@ -744,9 +751,22 @@ function ColumnSettingItem({
 }: ColumnSettingItemProps) {
   const [fieldSearchOpen, setFieldSearchOpen] = useState(false);
   const [sourceFieldSearchOpen, setSourceFieldSearchOpen] = useState(false);
+  const [externalFieldSearchOpen, setExternalFieldSearchOpen] = useState(false);
   const [parentFieldSearchOpen, setParentFieldSearchOpen] = useState(false);
   const [lookupTableOpenMap, setLookupTableOpenMap] = useState<Record<string, boolean>>({});
 
+  // 소스 필드 기준으로 카테고리 타입인지 확인
+  const actualSourceField = col.sourceField || col.field;
+  const sourceColumnInfo = sourceTableColumns.find((c) => c.column_name === actualSourceField);
+  const isCategoryColumn = sourceColumnInfo?.input_type === "category";
+
+  // 카테고리 컬럼인 경우 타입을 자동으로 category로 설정
+  useEffect(() => {
+    if (isCategoryColumn && col.type !== "category") {
+      onUpdate({ type: "category" });
+    }
+  }, [isCategoryColumn, col.type, onUpdate]);
+
   // 조회 옵션 추가
   const addLookupOption = () => {
     const newOption: LookupOption = {
@@ -1013,6 +1033,88 @@ function ColumnSettingItem({
           </Popover>
         </div>
 
+        {/* 외부 필드 - Combobox (외부 데이터에서 가져올 컬럼) */}
+        {externalDataEnabled && externalTableName && (
+          <div>
+            <Label className="text-xs">외부 필드</Label>
+            <Popover open={externalFieldSearchOpen} onOpenChange={setExternalFieldSearchOpen}>
+              <PopoverTrigger asChild>
+                <Button
+                  variant="outline"
+                  role="combobox"
+                  aria-expanded={externalFieldSearchOpen}
+                  className="h-8 w-full justify-between text-xs mt-1"
+                  disabled={externalTableColumns.length === 0}
+                >
+                  <span className="truncate">
+                    {col.externalField || "(필드명과 동일)"}
+                  </span>
+                  <ChevronsUpDown className="ml-1 h-3 w-3 shrink-0 opacity-50" />
+                </Button>
+              </PopoverTrigger>
+              <PopoverContent className="p-0 w-[250px]" align="start">
+                <Command>
+                  <CommandInput placeholder="외부 필드 검색..." className="text-xs" />
+                  <CommandList className="max-h-[200px]">
+                    <CommandEmpty className="text-xs py-4 text-center">
+                      외부 필드를 찾을 수 없습니다.
+                    </CommandEmpty>
+                    <CommandGroup>
+                      {/* 필드명과 동일 옵션 */}
+                      <CommandItem
+                        value="__same_as_field__"
+                        onSelect={() => {
+                          onUpdate({ externalField: undefined });
+                          setExternalFieldSearchOpen(false);
+                        }}
+                        className="text-xs"
+                      >
+                        <Check
+                          className={cn(
+                            "mr-2 h-3 w-3",
+                            !col.externalField ? "opacity-100" : "opacity-0"
+                          )}
+                        />
+                        <span className="text-muted-foreground">(필드명과 동일)</span>
+                      </CommandItem>
+                      {/* 외부 테이블 컬럼 목록 */}
+                      {externalTableColumns.map((extCol) => (
+                        <CommandItem
+                          key={extCol.column_name}
+                          value={extCol.column_name}
+                          onSelect={() => {
+                            onUpdate({ externalField: extCol.column_name });
+                            setExternalFieldSearchOpen(false);
+                          }}
+                          className="text-xs"
+                        >
+                          <Check
+                            className={cn(
+                              "mr-2 h-3 w-3",
+                              col.externalField === extCol.column_name ? "opacity-100" : "opacity-0"
+                            )}
+                          />
+                          <div className="flex flex-col flex-1 min-w-0">
+                            <span className="font-medium truncate">{extCol.column_name}</span>
+                            {extCol.comment && (
+                              <span className="text-[10px] text-muted-foreground truncate">
+                                {extCol.comment}
+                              </span>
+                            )}
+                          </div>
+                        </CommandItem>
+                      ))}
+                    </CommandGroup>
+                  </CommandList>
+                </Command>
+              </PopoverContent>
+            </Popover>
+            <p className="text-[10px] text-muted-foreground mt-0.5">
+              외부 데이터({externalTableName})에서 이 컬럼에 매핑할 필드
+            </p>
+          </div>
+        )}
+
         {/* 라벨 */}
         <div>
           <Label className="text-xs">라벨</Label>
@@ -1027,8 +1129,12 @@ function ColumnSettingItem({
         {/* 타입 */}
         <div>
           <Label className="text-xs">타입</Label>
-          <Select value={col.type} onValueChange={(value: any) => onUpdate({ type: value })}>
-            <SelectTrigger className="h-8 text-xs mt-1">
+          <Select 
+            value={isCategoryColumn ? "category" : col.type} 
+            onValueChange={(value: any) => onUpdate({ type: value })}
+            disabled={isCategoryColumn}
+          >
+            <SelectTrigger className={cn("h-8 text-xs mt-1", isCategoryColumn && "opacity-70 cursor-not-allowed")}>
               <SelectValue />
             </SelectTrigger>
             <SelectContent>
@@ -1039,6 +1145,9 @@ function ColumnSettingItem({
               ))}
             </SelectContent>
           </Select>
+          {isCategoryColumn && (
+            <p className="text-[10px] text-blue-600 mt-0.5">테이블 타입 관리에서 카테고리로 설정됨</p>
+          )}
         </div>
 
         {/* 너비 */}
@@ -2415,7 +2524,7 @@ interface TableSectionSettingsModalProps {
   section: FormSectionConfig;
   onSave: (updates: Partial<FormSectionConfig>) => void;
   tables: { table_name: string; comment?: string }[];
-  tableColumns: Record<string, { column_name: string; data_type: string; is_nullable: string; comment?: string }[]>;
+  tableColumns: Record<string, { column_name: string; data_type: string; is_nullable: string; comment?: string; input_type?: string }[]>;
   onLoadTableColumns: (tableName: string) => void;
   // 카테고리 목록 (table_column_category_values에서 가져옴)
   categoryList?: { tableName: string; columnName: string; displayName?: string }[];
@@ -2449,9 +2558,15 @@ export function TableSectionSettingsModal({
   // 테이블 검색 Combobox 상태
   const [tableSearchOpen, setTableSearchOpen] = useState(false);
   const [saveTableSearchOpen, setSaveTableSearchOpen] = useState(false);
+  const [externalTableSearchOpen, setExternalTableSearchOpen] = useState(false);
   
   // 활성 탭
   const [activeTab, setActiveTab] = useState("source");
+  
+  // 사전 필터 카테고리 옵션 캐시 (컬럼명 -> 옵션 배열)
+  const [preFilterCategoryOptions, setPreFilterCategoryOptions] = useState<
+    Record<string, { value: string; label: string }[]>
+  >({});
 
   // open이 변경될 때마다 데이터 동기화
   useEffect(() => {
@@ -2513,6 +2628,47 @@ export function TableSectionSettingsModal({
     return tableColumns[tableConfig.source.tableName] || [];
   }, [tableColumns, tableConfig.source.tableName]);
 
+  // 카테고리 옵션 로드 함수
+  const loadCategoryOptions = useCallback(async (columnName: string) => {
+    if (!tableConfig.source.tableName || !columnName) return;
+    
+    // 이미 로드된 경우 스킵
+    if (preFilterCategoryOptions[columnName]) return;
+    
+    try {
+      const response = await apiClient.get(
+        `/table-categories/${tableConfig.source.tableName}/${columnName}/values`
+      );
+      if (response.data?.success && response.data?.data) {
+        const options = response.data.data.map((item: any) => ({
+          // value는 DB에 저장된 실제 값(valueCode)을 사용해야 필터링이 정상 작동
+          value: item.valueCode || item.value_code || item.valueLabel || item.value_label || "",
+          // label은 사용자에게 보여질 라벨
+          label: item.valueLabel || item.value_label || item.valueCode || item.value_code || "",
+        }));
+        setPreFilterCategoryOptions((prev) => ({
+          ...prev,
+          [columnName]: options,
+        }));
+      }
+    } catch (error) {
+      console.error(`카테고리 옵션 로드 실패 (${columnName}):`, error);
+    }
+  }, [tableConfig.source.tableName, preFilterCategoryOptions]);
+
+  // 사전 필터에서 선택된 카테고리 컬럼들의 옵션 자동 로드
+  useEffect(() => {
+    const preFilters = tableConfig.filters?.preFilters || [];
+    preFilters.forEach((filter) => {
+      if (filter.column) {
+        const col = sourceTableColumns.find((c) => c.column_name === filter.column);
+        if (col && col.input_type === "category") {
+          loadCategoryOptions(filter.column);
+        }
+      }
+    });
+  }, [tableConfig.filters?.preFilters, sourceTableColumns, loadCategoryOptions]);
+
   // 저장 테이블의 컬럼 목록
   const saveTableColumns = useMemo(() => {
     // 저장 테이블이 지정되어 있으면 해당 테이블의 컬럼, 아니면 소스 테이블의 컬럼 사용
@@ -2576,6 +2732,24 @@ export function TableSectionSettingsModal({
     });
   };
 
+  const updateExternalDataSource = (updates: Partial<NonNullable<TableSectionConfig["externalDataSource"]>>) => {
+    updateTableConfig({
+      externalDataSource: { ...tableConfig.externalDataSource, enabled: false, tableName: "", ...updates },
+    });
+  };
+
+  // 외부 데이터 소스 테이블 컬럼 목록
+  const externalTableColumns = useMemo(() => {
+    return tableColumns[tableConfig.externalDataSource?.tableName || ""] || [];
+  }, [tableColumns, tableConfig.externalDataSource?.tableName]);
+
+  // 외부 데이터 소스 테이블 변경 시 컬럼 로드
+  useEffect(() => {
+    if (tableConfig.externalDataSource?.enabled && tableConfig.externalDataSource?.tableName) {
+      onLoadTableColumns(tableConfig.externalDataSource.tableName);
+    }
+  }, [tableConfig.externalDataSource?.enabled, tableConfig.externalDataSource?.tableName, onLoadTableColumns]);
+
   // 저장 함수
   const handleSave = () => {
     onSave({
@@ -2939,6 +3113,98 @@ export function TableSectionSettingsModal({
                       </div>
                     </div>
                   </div>
+
+                  {/* 외부 데이터 소스 설정 */}
+                  <div className="space-y-3 border rounded-lg p-4">
+                    <div className="flex items-center justify-between">
+                      <div>
+                        <h4 className="text-sm font-medium">외부 데이터 소스</h4>
+                        <p className="text-xs text-muted-foreground">
+                          "데이터 전달 모달열기" 액션으로 전달받은 데이터를 테이블에 표시합니다.
+                        </p>
+                      </div>
+                      <Switch
+                        checked={tableConfig.externalDataSource?.enabled ?? false}
+                        onCheckedChange={(checked) => {
+                          if (checked) {
+                            updateExternalDataSource({ enabled: true, tableName: "" });
+                          } else {
+                            updateTableConfig({ externalDataSource: undefined });
+                          }
+                        }}
+                      />
+                    </div>
+                    
+                    {tableConfig.externalDataSource?.enabled && (
+                      <div className="space-y-3 pt-2">
+                        <div>
+                          <Label className="text-xs font-medium mb-1.5 block">외부 데이터 테이블</Label>
+                          <Popover open={externalTableSearchOpen} onOpenChange={setExternalTableSearchOpen}>
+                            <PopoverTrigger asChild>
+                              <Button
+                                variant="outline"
+                                role="combobox"
+                                aria-expanded={externalTableSearchOpen}
+                                className="h-9 w-full justify-between text-sm"
+                              >
+                                {tableConfig.externalDataSource?.tableName || "테이블 선택..."}
+                                <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                              </Button>
+                            </PopoverTrigger>
+                            <PopoverContent className="p-0 w-full min-w-[400px]" align="start">
+                              <Command>
+                                <CommandInput placeholder="테이블 검색..." className="text-sm" />
+                                <CommandList className="max-h-[300px]">
+                                  <CommandEmpty className="text-sm py-6 text-center">
+                                    테이블을 찾을 수 없습니다.
+                                  </CommandEmpty>
+                                  <CommandGroup>
+                                    {tables.map((table) => (
+                                      <CommandItem
+                                        key={table.table_name}
+                                        value={table.table_name}
+                                        onSelect={() => {
+                                          updateExternalDataSource({ enabled: true, tableName: table.table_name });
+                                          onLoadTableColumns(table.table_name);
+                                          setExternalTableSearchOpen(false);
+                                        }}
+                                        className="text-sm"
+                                      >
+                                        <Check
+                                          className={cn(
+                                            "mr-2 h-4 w-4",
+                                            tableConfig.externalDataSource?.tableName === table.table_name ? "opacity-100" : "opacity-0"
+                                          )}
+                                        />
+                                        <div className="flex flex-col">
+                                          <span className="font-medium">{table.table_name}</span>
+                                          {table.comment && (
+                                            <span className="text-xs text-muted-foreground">{table.comment}</span>
+                                          )}
+                                        </div>
+                                      </CommandItem>
+                                    ))}
+                                  </CommandGroup>
+                                </CommandList>
+                              </Command>
+                            </PopoverContent>
+                          </Popover>
+                          <HelpText>이전 화면에서 전달받을 데이터의 원본 테이블을 선택하세요. (예: 수주상세 데이터를 전달받는 경우 sales_order_detail)</HelpText>
+                        </div>
+
+                        {tableConfig.externalDataSource?.tableName && externalTableColumns.length > 0 && (
+                          <div className="bg-muted/30 rounded-lg p-3">
+                            <p className="text-xs text-muted-foreground">
+                              선택한 테이블 컬럼: {externalTableColumns.length}개
+                            </p>
+                            <p className="text-[10px] text-muted-foreground mt-1">
+                              "컬럼 설정" 탭에서 각 컬럼의 "외부 필드"를 설정하여 전달받은 데이터의 컬럼을 매핑하세요.
+                            </p>
+                          </div>
+                        )}
+                      </div>
+                    )}
+                  </div>
                 </TabsContent>
 
                 {/* 컬럼 설정 탭 */}
@@ -2994,6 +3260,9 @@ export function TableSectionSettingsModal({
                           displayColumns={tableConfig.source.displayColumns || []}
                           sourceTableColumns={sourceTableColumns}
                           sourceTableName={tableConfig.source.tableName}
+                          externalTableColumns={externalTableColumns}
+                          externalTableName={tableConfig.externalDataSource?.tableName}
+                          externalDataEnabled={tableConfig.externalDataSource?.enabled}
                           tables={tables}
                           tableColumns={tableColumns}
                           sections={otherSections}
@@ -3159,59 +3428,96 @@ export function TableSectionSettingsModal({
                       </Button>
                     </div>
 
-                    {(tableConfig.filters?.preFilters || []).map((filter, index) => (
-                      <div key={index} className="flex items-center gap-2 border rounded-lg p-2 bg-card">
-                        <Select
-                          value={filter.column || undefined}
-                          onValueChange={(value) => updatePreFilter(index, { column: value })}
-                        >
-                          <SelectTrigger className="h-8 text-xs w-[150px]">
-                            <SelectValue placeholder="컬럼" />
-                          </SelectTrigger>
-                          <SelectContent>
-                            {sourceTableColumns
-                              .filter((col) => col.column_name)
-                              .map((col) => (
-                                <SelectItem key={col.column_name} value={col.column_name}>
-                                  {col.column_name}
+                    {(tableConfig.filters?.preFilters || []).map((filter, index) => {
+                      // 선택된 컬럼의 정보 조회
+                      const selectedColumn = filter.column 
+                        ? sourceTableColumns.find((c) => c.column_name === filter.column) 
+                        : null;
+                      const isCategory = selectedColumn?.input_type === "category";
+                      const categoryOptions = isCategory && filter.column 
+                        ? preFilterCategoryOptions[filter.column] || [] 
+                        : [];
+                      
+                      return (
+                        <div key={index} className="flex items-center gap-2 border rounded-lg p-2 bg-card">
+                          <Select
+                            value={filter.column || undefined}
+                            onValueChange={(value) => {
+                              updatePreFilter(index, { column: value, value: "" }); // 컬럼 변경 시 값 초기화
+                              // 카테고리 컬럼인 경우 옵션 로드
+                              const col = sourceTableColumns.find((c) => c.column_name === value);
+                              if (col && col.input_type === "category") {
+                                loadCategoryOptions(value);
+                              }
+                            }}
+                          >
+                            <SelectTrigger className="h-8 text-xs w-[150px]">
+                              <SelectValue placeholder="컬럼" />
+                            </SelectTrigger>
+                            <SelectContent>
+                              {sourceTableColumns
+                                .filter((col) => col.column_name)
+                                .map((col) => (
+                                  <SelectItem key={col.column_name} value={col.column_name}>
+                                    {col.comment || col.column_name}
+                                  </SelectItem>
+                                ))}
+                            </SelectContent>
+                          </Select>
+
+                          <Select
+                            value={filter.operator || undefined}
+                            onValueChange={(value: any) => updatePreFilter(index, { operator: value })}
+                          >
+                            <SelectTrigger className="h-8 text-xs w-[100px]">
+                              <SelectValue placeholder="연산자" />
+                            </SelectTrigger>
+                            <SelectContent>
+                              {FILTER_OPERATOR_OPTIONS.map((opt) => (
+                                <SelectItem key={opt.value} value={opt.value}>
+                                  {opt.label}
                                 </SelectItem>
                               ))}
-                          </SelectContent>
-                        </Select>
+                            </SelectContent>
+                          </Select>
 
-                        <Select
-                          value={filter.operator || undefined}
-                          onValueChange={(value: any) => updatePreFilter(index, { operator: value })}
-                        >
-                          <SelectTrigger className="h-8 text-xs w-[100px]">
-                            <SelectValue placeholder="연산자" />
-                          </SelectTrigger>
-                          <SelectContent>
-                            {FILTER_OPERATOR_OPTIONS.map((opt) => (
-                              <SelectItem key={opt.value} value={opt.value}>
-                                {opt.label}
-                              </SelectItem>
-                            ))}
-                          </SelectContent>
-                        </Select>
+                          {/* 카테고리 컬럼인 경우 Select Box로 값 선택 */}
+                          {isCategory ? (
+                            <Select
+                              value={filter.value || undefined}
+                              onValueChange={(value) => updatePreFilter(index, { value })}
+                            >
+                              <SelectTrigger className="h-8 text-xs flex-1">
+                                <SelectValue placeholder="값 선택" />
+                              </SelectTrigger>
+                              <SelectContent>
+                                {categoryOptions.map((opt) => (
+                                  <SelectItem key={opt.value} value={opt.value}>
+                                    {opt.label}
+                                  </SelectItem>
+                                ))}
+                              </SelectContent>
+                            </Select>
+                          ) : (
+                            <Input
+                              value={filter.value || ""}
+                              onChange={(e) => updatePreFilter(index, { value: e.target.value })}
+                              placeholder="값"
+                              className="h-8 text-xs flex-1"
+                            />
+                          )}
 
-                        <Input
-                          value={filter.value || ""}
-                          onChange={(e) => updatePreFilter(index, { value: e.target.value })}
-                          placeholder="값"
-                          className="h-8 text-xs flex-1"
-                        />
-
-                        <Button
-                          size="sm"
-                          variant="ghost"
-                          onClick={() => removePreFilter(index)}
-                          className="h-8 w-8 p-0 text-destructive hover:text-destructive"
-                        >
-                          <Trash2 className="h-3.5 w-3.5" />
-                        </Button>
-                      </div>
-                    ))}
+                          <Button
+                            size="sm"
+                            variant="ghost"
+                            onClick={() => removePreFilter(index)}
+                            className="h-8 w-8 p-0 text-destructive hover:text-destructive"
+                          >
+                            <Trash2 className="h-3.5 w-3.5" />
+                          </Button>
+                        </div>
+                      );
+                    })}
                   </div>
 
                   <Separator />
diff --git a/frontend/lib/registry/components/universal-form-modal/types.ts b/frontend/lib/registry/components/universal-form-modal/types.ts
index 9d54270b..a937f5b2 100644
--- a/frontend/lib/registry/components/universal-form-modal/types.ts
+++ b/frontend/lib/registry/components/universal-form-modal/types.ts
@@ -7,7 +7,7 @@
 
 // Select 옵션 설정
 export interface SelectOptionConfig {
-  type?: "static" | "table" | "code"; // 옵션 타입 (기본: static)
+  type?: "static" | "table" | "code" | "cascading"; // 옵션 타입 (기본: static)
   // 정적 옵션
   staticOptions?: { value: string; label: string }[];
   // 테이블 기반 옵션
@@ -19,6 +19,24 @@ export interface SelectOptionConfig {
   // 카테고리 컬럼 기반 옵션 (table_column_category_values 테이블)
   // 형식: "tableName.columnName" (예: "sales_order_mng.incoterms")
   categoryKey?: string;
+  
+  // 연쇄 드롭다운 설정 (type이 "cascading"일 때 사용)
+  cascading?: {
+    parentField?: string; // 부모 필드명 (같은 폼 내)
+    relationCode?: string; // 관계 코드 (cascading_relation 테이블)
+    // 직접 설정 또는 관계 코드에서 가져온 값 수정 시 사용
+    sourceTable?: string; // 옵션을 조회할 테이블
+    parentKeyColumn?: string; // 부모 값과 매칭할 컬럼
+    // valueColumn, labelColumn은 상위 속성 사용
+    emptyParentMessage?: string; // 부모 미선택 시 메시지
+    noOptionsMessage?: string; // 옵션 없음 메시지
+    clearOnParentChange?: boolean; // 부모 변경 시 값 초기화 (기본: true)
+  };
+  
+  // 직접 입력 허용 (모든 Select 타입에 공통 적용)
+  // true: Combobox 형태로 목록 선택 + 직접 입력 가능
+  // false/undefined: 기본 Select 형태로 목록에서만 선택 가능
+  allowCustomInput?: boolean;
 }
 
 // 채번규칙 설정
@@ -230,6 +248,12 @@ export interface TableSectionConfig {
     columnLabels?: Record<string, string>; // 컬럼 라벨 (컬럼명 -> 표시 라벨)
   };
   
+  // 1-1. 외부 데이터 소스 설정 (데이터 전달 모달열기 액션으로 전달받은 데이터)
+  externalDataSource?: {
+    enabled: boolean;               // 외부 데이터 소스 사용 여부
+    tableName: string;              // 전달받을 데이터의 소스 테이블명 (예: sales_order_detail)
+  };
+  
   // 2. 필터 설정
   filters?: {
     // 사전 필터 (항상 적용, 사용자에게 노출되지 않음)
@@ -374,6 +398,9 @@ export interface TableColumnConfig {
   // 소스 필드 매핑 (검색 모달에서 가져올 컬럼명)
   sourceField?: string;             // 소스 테이블의 컬럼명 (미설정 시 field와 동일)
   
+  // 외부 데이터 필드 매핑 (데이터 전달 모달열기로 전달받은 데이터의 컬럼명)
+  externalField?: string;           // 외부 데이터의 컬럼명 (미설정 시 field와 동일)
+  
   // 편집 설정
   editable?: boolean;               // 편집 가능 여부 (기본: true)
   calculated?: boolean;             // 계산 필드 여부 (자동 읽기전용)
@@ -639,19 +666,6 @@ export interface TableCalculationRule {
   conditionalCalculation?: ConditionalCalculationConfig;
 }
 
-// 다중 행 저장 설정
-export interface MultiRowSaveConfig {
-  enabled?: boolean; // 사용 여부 (기본: false)
-  commonFields?: string[]; // 모든 행에 공통 저장할 필드 (columnName 기준)
-  repeatSectionId?: string; // 반복 섹션 ID
-  typeColumn?: string; // 구분 컬럼명 (예: "employment_type")
-  mainTypeValue?: string; // 메인 행 값 (예: "main")
-  subTypeValue?: string; // 서브 행 값 (예: "concurrent")
-
-  // 메인 섹션 필드 (반복 섹션이 아닌 곳의 부서/직급 등)
-  mainSectionFields?: string[]; // 메인 행에만 저장할 필드
-}
-
 /**
  * 섹션별 저장 방식 설정
  * 공통 저장: 해당 섹션의 필드 값이 모든 품목 행에 동일하게 저장됩니다 (예: 수주번호, 거래처)
@@ -672,9 +686,6 @@ export interface SaveConfig {
   tableName: string;
   primaryKeyColumn?: string; // PK 컬럼 (수정 시 사용)
 
-  // 다중 행 저장 설정
-  multiRowSave?: MultiRowSaveConfig;
-
   // 커스텀 API 저장 설정 (테이블 직접 저장 대신 전용 API 사용)
   customApiSave?: CustomApiSaveConfig;
 
@@ -793,13 +804,6 @@ export interface ModalConfig {
   size: "sm" | "md" | "lg" | "xl" | "full";
   closeOnOutsideClick?: boolean;
   showCloseButton?: boolean;
-
-  // 버튼 설정
-  showSaveButton?: boolean; // 저장 버튼 표시 (기본: true)
-  saveButtonText?: string; // 저장 버튼 텍스트 (기본: "저장")
-  cancelButtonText?: string; // 취소 버튼 텍스트 (기본: "취소")
-  showResetButton?: boolean; // 초기화 버튼 표시
-  resetButtonText?: string; // 초기화 버튼 텍스트
 }
 
 // 전체 설정
@@ -887,6 +891,7 @@ export const SELECT_OPTION_TYPE_OPTIONS = [
   { value: "static", label: "직접 입력" },
   { value: "table", label: "테이블 참조" },
   { value: "code", label: "공통코드" },
+  { value: "cascading", label: "연쇄 드롭다운" },
 ] as const;
 
 // 연동 필드 표시 형식 옵션
@@ -913,6 +918,7 @@ export const TABLE_COLUMN_TYPE_OPTIONS = [
   { value: "number", label: "숫자" },
   { value: "date", label: "날짜" },
   { value: "select", label: "선택(드롭다운)" },
+  { value: "category", label: "카테고리" },
 ] as const;
 
 // 값 매핑 타입 옵션
diff --git a/frontend/lib/registry/init.ts b/frontend/lib/registry/init.ts
index c0082c2b..46f562b1 100644
--- a/frontend/lib/registry/init.ts
+++ b/frontend/lib/registry/init.ts
@@ -12,7 +12,7 @@ import { CheckboxWidget } from "@/components/screen/widgets/types/CheckboxWidget
 import { RadioWidget } from "@/components/screen/widgets/types/RadioWidget";
 import { FileWidget } from "@/components/screen/widgets/types/FileWidget";
 import { CodeWidget } from "@/components/screen/widgets/types/CodeWidget";
-import { EntityWidget } from "@/components/screen/widgets/types/EntityWidget";
+import { EntitySearchInputWrapper } from "@/lib/registry/components/entity-search-input/EntitySearchInputWrapper";
 import { ButtonWidget } from "@/components/screen/widgets/types/ButtonWidget";
 
 // 개별적으로 설정 패널들을 import
@@ -352,7 +352,7 @@ export function initializeWebTypeRegistry() {
     name: "엔티티 선택",
     category: "input",
     description: "데이터베이스 엔티티 선택 필드",
-    component: EntityWidget,
+    component: EntitySearchInputWrapper,
     configPanel: EntityConfigPanel,
     defaultConfig: {
       entityType: "",
diff --git a/frontend/lib/utils/buttonActions.ts b/frontend/lib/utils/buttonActions.ts
index 327cb87f..a54850ee 100644
--- a/frontend/lib/utils/buttonActions.ts
+++ b/frontend/lib/utils/buttonActions.ts
@@ -88,6 +88,9 @@ export interface ButtonActionConfig {
   // 엑셀 업로드 관련
   excelUploadMode?: "insert" | "update" | "upsert"; // 업로드 모드
   excelKeyColumn?: string; // 업데이트/Upsert 시 키 컬럼
+  excelNumberingRuleId?: string; // 채번 규칙 ID (단일 테이블용)
+  excelNumberingTargetColumn?: string; // 채번 적용 컬럼 (단일 테이블용)
+  excelAfterUploadFlows?: Array<{ flowId: string; order: number }>; // 업로드 후 제어 실행
 
   // 바코드 스캔 관련
   barcodeTargetField?: string; // 스캔 결과를 입력할 필드명
@@ -304,6 +307,9 @@ export interface ButtonActionContext {
     selectedLeftData?: Record<string, any>;
     refreshRightPanel?: () => void;
   };
+
+  // 🆕 저장된 데이터 (저장 후 제어 실행 시 플로우에 전달)
+  savedData?: any;
 }
 
 /**
@@ -532,17 +538,26 @@ export class ButtonActionExecutor {
 
     // 🆕 저장 전 이벤트 발생 (SelectedItemsDetailInput 등에서 최신 데이터 수집)
     // context.formData를 이벤트 detail에 포함하여 직접 수정 가능하게 함
+    // skipDefaultSave 플래그를 통해 기본 저장 로직을 건너뛸 수 있음
+    const beforeSaveEventDetail = {
+      formData: context.formData,
+      skipDefaultSave: false,
+    };
     window.dispatchEvent(
       new CustomEvent("beforeFormSave", {
-        detail: {
-          formData: context.formData,
-        },
+        detail: beforeSaveEventDetail,
       }),
     );
 
     // 약간의 대기 시간을 주어 이벤트 핸들러가 formData를 업데이트할 수 있도록 함
     await new Promise((resolve) => setTimeout(resolve, 100));
 
+    // 🔧 skipDefaultSave 플래그 확인 - SelectedItemsDetailInput 등에서 자체 UPSERT 처리 시 기본 저장 건너뛰기
+    if (beforeSaveEventDetail.skipDefaultSave) {
+      console.log("🚫 [handleSave] skipDefaultSave=true - 기본 저장 로직 건너뛰기 (컴포넌트에서 자체 처리)");
+      return true;
+    }
+
     console.log("📦 [handleSave] beforeFormSave 이벤트 후 formData:", context.formData);
 
     // 🆕 렉 구조 컴포넌트 일괄 저장 감지
@@ -675,6 +690,151 @@ export class ButtonActionExecutor {
       console.log("⚠️ [handleSave] formData 전체 내용:", context.formData);
     }
 
+    // 🆕 RepeaterFieldGroup JSON 문자열 파싱 및 저장 처리
+    // formData에 JSON 배열 문자열이 저장된 경우 처리 (반복_필드_그룹 등)
+    const repeaterJsonKeys = Object.keys(context.formData).filter((key) => {
+      const value = context.formData[key];
+      if (typeof value === "string" && value.startsWith("[") && value.endsWith("]")) {
+        try {
+          const parsed = JSON.parse(value);
+          return Array.isArray(parsed) && parsed.length > 0 && parsed[0]._targetTable;
+        } catch {
+          return false;
+        }
+      }
+      return false;
+    });
+
+    if (repeaterJsonKeys.length > 0) {
+      console.log("🔄 [handleSave] RepeaterFieldGroup JSON 문자열 감지:", repeaterJsonKeys);
+      
+      // 🆕 상단 폼 데이터(마스터 정보) 추출
+      // RepeaterFieldGroup JSON과 컴포넌트 키를 제외한 나머지가 마스터 정보
+      const masterFields: Record<string, any> = {};
+      Object.keys(context.formData).forEach((fieldKey) => {
+        // 제외 조건
+        if (fieldKey.startsWith("comp_")) return;
+        if (fieldKey.match(/^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i)) return;
+        if (fieldKey.endsWith("_label") || fieldKey.endsWith("_value_label")) return;
+        
+        const value = context.formData[fieldKey];
+        
+        // JSON 배열 문자열 제외 (RepeaterFieldGroup 데이터)
+        if (typeof value === "string" && value.startsWith("[") && value.endsWith("]")) return;
+        
+        // 객체 타입인 경우 (범용_폼_모달 등) 내부 필드를 펼쳐서 추가
+        if (typeof value === "object" && value !== null && !Array.isArray(value)) {
+          Object.entries(value).forEach(([innerKey, innerValue]) => {
+            if (innerKey.endsWith("_label") || innerKey.endsWith("_value_label")) return;
+            if (innerValue !== undefined && innerValue !== null && innerValue !== "") {
+              masterFields[innerKey] = innerValue;
+            }
+          });
+          return;
+        }
+        
+        // 유효한 값만 포함
+        if (value !== undefined && value !== null && value !== "") {
+          masterFields[fieldKey] = value;
+        }
+      });
+      
+      console.log("📋 [handleSave] 상단 마스터 정보 (모든 품목에 적용):", masterFields);
+      
+      for (const key of repeaterJsonKeys) {
+        try {
+          const parsedData = JSON.parse(context.formData[key]);
+          const repeaterTargetTable = parsedData[0]?._targetTable;
+          
+          if (!repeaterTargetTable) {
+            console.warn(`⚠️ [handleSave] RepeaterFieldGroup targetTable 없음 (key: ${key})`);
+            continue;
+          }
+
+          console.log(`📦 [handleSave] RepeaterFieldGroup 저장 시작: ${repeaterTargetTable}, ${parsedData.length}건`);
+
+          // 🆕 품목 고유 필드 목록 (RepeaterFieldGroup 설정에서 가져옴)
+          // 첫 번째 아이템의 _repeaterFields에서 추출
+          const repeaterFields: string[] = parsedData[0]?._repeaterFields || [];
+          const itemOnlyFields = new Set([...repeaterFields, 'id']); // id는 항상 포함
+          
+          console.log("📋 [handleSave] RepeaterFieldGroup 품목 필드:", repeaterFields);
+
+          for (const item of parsedData) {
+            // 메타 필드 제거
+            const { _targetTable, _isNewItem, _existingRecord, _originalItemIds, _deletedItemIds, _repeaterFields, ...itemData } = item;
+
+            // 🔧 품목 고유 필드만 추출 (RepeaterFieldGroup 설정 기반)
+            const itemOnlyData: Record<string, any> = {};
+            Object.keys(itemData).forEach((field) => {
+              if (itemOnlyFields.has(field)) {
+                itemOnlyData[field] = itemData[field];
+              }
+            });
+
+            // 🔧 마스터 정보 + 품목 고유 정보 병합
+            // masterFields: 상단 폼에서 수정한 최신 마스터 정보
+            // itemOnlyData: 품목 고유 필드만 (품번, 품명, 수량 등)
+            const dataWithMeta: Record<string, unknown> = {
+              ...masterFields,   // 상단 마스터 정보 (최신)
+              ...itemOnlyData,   // 품목 고유 필드만
+              created_by: context.userId,
+              updated_by: context.userId,
+              company_code: context.companyCode,
+            };
+            
+            // 불필요한 필드 제거
+            Object.keys(dataWithMeta).forEach((field) => {
+              if (field.endsWith("_label") || field.endsWith("_value_label") || field.endsWith("_numberingRuleId")) {
+                delete dataWithMeta[field];
+              }
+            });
+
+            // 새 레코드 vs 기존 레코드 판단
+            const isNewRecord = _isNewItem || !item.id || item.id === "" || item.id === undefined;
+
+            console.log(`📦 [handleSave] 저장할 데이터 (${isNewRecord ? 'INSERT' : 'UPDATE'}):`, {
+              id: item.id,
+              dataWithMeta,
+            });
+
+            if (isNewRecord) {
+              // INSERT - DynamicFormApi 사용하여 제어관리 실행
+              delete dataWithMeta.id;
+              
+              const insertResult = await DynamicFormApi.saveFormData({
+                screenId: context.screenId || 0,
+                tableName: repeaterTargetTable,
+                data: dataWithMeta as Record<string, any>,
+              });
+              console.log("✅ [handleSave] RepeaterFieldGroup INSERT 완료:", insertResult.data);
+            } else if (item.id && _existingRecord === true) {
+              // UPDATE - 기존 레코드
+              const originalData = { id: item.id };
+              const updatedData = { ...dataWithMeta, id: item.id };
+              
+              const updateResult = await apiClient.put(`/table-management/tables/${repeaterTargetTable}/edit`, {
+                originalData,
+                updatedData,
+              });
+              console.log("✅ [handleSave] RepeaterFieldGroup UPDATE 완료:", updateResult.data);
+            }
+          }
+        } catch (err) {
+          console.error(`❌ [handleSave] RepeaterFieldGroup 저장 실패 (key: ${key}):`, err);
+        }
+      }
+
+      // RepeaterFieldGroup 저장 완료 후 새로고침
+      console.log("✅ [handleSave] RepeaterFieldGroup 저장 완료");
+      context.onRefresh?.();
+      context.onFlowRefresh?.();
+      window.dispatchEvent(new CustomEvent("closeEditModal"));
+      window.dispatchEvent(new CustomEvent("saveSuccessInModal"));
+
+      return true;
+    }
+
     // 🆕 Universal Form Modal 테이블 섹션 병합 저장 처리
     // 범용_폼_모달 내부에 _tableSection_ 데이터가 있는 경우 공통 필드 + 개별 품목 병합 저장
     const universalFormModalResult = await this.handleUniversalFormModalTableSectionSave(config, context, formData);
@@ -721,11 +881,16 @@ export class ButtonActionExecutor {
         // originalData는 수정 버튼 클릭 시 editData로 전달되어 context.originalData로 설정됨
         // 빈 객체 {}도 truthy이므로 Object.keys로 실제 데이터 유무 확인
         const hasRealOriginalData = originalData && Object.keys(originalData).length > 0;
-        const isUpdate = hasRealOriginalData && !!primaryKeyValue;
+
+        // 🆕 폴백 로직: originalData가 없어도 formData에 id가 있으면 UPDATE로 판단
+        // 조건부 컨테이너 등에서 originalData 전달이 누락되는 경우를 처리
+        const hasIdInFormData = formData.id !== undefined && formData.id !== null && formData.id !== "";
+        const isUpdate = (hasRealOriginalData || hasIdInFormData) && !!primaryKeyValue;
 
         console.log("🔍 [handleSave] INSERT/UPDATE 판단:", {
           hasOriginalData: !!originalData,
           hasRealOriginalData,
+          hasIdInFormData,
           originalDataKeys: originalData ? Object.keys(originalData) : [],
           primaryKeyValue,
           isUpdate,
@@ -738,18 +903,18 @@ export class ButtonActionExecutor {
           // UPDATE 처리 - 부분 업데이트 사용 (원본 데이터가 있는 경우)
           console.log("🔄 UPDATE 모드로 저장:", {
             primaryKeyValue,
-            formData,
-            originalData,
             hasOriginalData: !!originalData,
+            hasIdInFormData,
+            updateReason: hasRealOriginalData ? "originalData 존재" : "formData.id 존재 (폴백)",
           });
 
-          if (originalData) {
+          if (hasRealOriginalData) {
             // 부분 업데이트: 변경된 필드만 업데이트
             console.log("📝 부분 업데이트 실행 (변경된 필드만)");
             saveResult = await DynamicFormApi.updateFormDataPartial(primaryKeyValue, originalData, formData, tableName);
           } else {
-            // 전체 업데이트 (기존 방식)
-            console.log("📝 전체 업데이트 실행 (모든 필드)");
+            // 전체 업데이트 (originalData 없이 id로 UPDATE 판단된 경우)
+            console.log("📝 전체 업데이트 실행 (originalData 없음 - 폴백 모드)");
             saveResult = await DynamicFormApi.updateFormData(primaryKeyValue, {
               tableName,
               data: formData,
@@ -798,6 +963,9 @@ export class ButtonActionExecutor {
             console.log("🎯 채번 규칙 할당 시작 (allocateCode 호출)");
             const { allocateNumberingCode } = await import("@/lib/api/numberingRule");
 
+            let hasAllocationFailure = false;
+            const failedFields: string[] = [];
+
             for (const [fieldName, ruleId] of Object.entries(fieldsWithNumbering)) {
               try {
                 console.log(`🔄 ${fieldName} 필드에 대해 allocateCode 호출: ${ruleId}`);
@@ -808,13 +976,31 @@ export class ButtonActionExecutor {
                   console.log(`✅ ${fieldName} 새 코드 할당: ${formData[fieldName]} → ${newCode}`);
                   formData[fieldName] = newCode;
                 } else {
-                  console.warn(`⚠️ ${fieldName} 코드 할당 실패, 기존 값 유지:`, allocateResult.error);
+                  console.warn(`⚠️ ${fieldName} 코드 할당 실패:`, allocateResult.error);
+                  // 🆕 기존 값이 빈 문자열이면 실패로 표시
+                  if (!formData[fieldName] || formData[fieldName] === "") {
+                    hasAllocationFailure = true;
+                    failedFields.push(fieldName);
+                  }
                 }
               } catch (allocateError) {
                 console.error(`❌ ${fieldName} 코드 할당 오류:`, allocateError);
-                // 오류 시 기존 값 유지
+                // 🆕 기존 값이 빈 문자열이면 실패로 표시
+                if (!formData[fieldName] || formData[fieldName] === "") {
+                  hasAllocationFailure = true;
+                  failedFields.push(fieldName);
+                }
               }
             }
+
+            // 🆕 채번 규칙 할당 실패 시 저장 중단
+            if (hasAllocationFailure) {
+              const fieldNames = failedFields.join(", ");
+              toast.error(`채번 규칙 할당에 실패했습니다 (${fieldNames}). 화면 설정에서 채번 규칙을 확인해주세요.`);
+              console.error(`❌ 채번 규칙 할당 실패로 저장 중단. 실패 필드: ${fieldNames}`);
+              console.error("💡 해결 방법: 화면관리에서 해당 필드의 채번 규칙 설정을 확인하세요.");
+              return false;
+            }
           }
 
           console.log("✅ 채번 규칙 할당 완료");
@@ -929,11 +1115,11 @@ export class ButtonActionExecutor {
                   deletedItemIds,
                 });
 
-                // 삭제 API 호출
+                // 삭제 API 호출 - screenId 전달하여 제어관리 실행 가능하도록 함
                 for (const itemId of deletedItemIds) {
                   try {
                     console.log(`🗑️ [handleSave] 항목 삭제 중: ${itemId} from ${targetTable}`);
-                    const deleteResult = await DynamicFormApi.deleteFormDataFromTable(itemId, targetTable);
+                    const deleteResult = await DynamicFormApi.deleteFormDataFromTable(itemId, targetTable, context.screenId);
                     if (deleteResult.success) {
                       console.log(`✅ [handleSave] 항목 삭제 완료: ${itemId}`);
                     } else {
@@ -995,6 +1181,29 @@ export class ButtonActionExecutor {
               console.log("📋 [handleSave] 범용 폼 모달 공통 필드:", commonFields);
             }
 
+            // 🆕 루트 레벨 formData에서 RepeaterFieldGroup에 전달할 공통 필드 추출
+            // 규칙 기반 필터링: 하드코딩 대신 패턴으로 제외할 필드를 정의
+            for (const [fieldName, value] of Object.entries(context.formData)) {
+              // 제외 규칙 1: comp_로 시작하는 필드 (하위 항목 배열)
+              if (fieldName.startsWith("comp_")) continue;
+              // 제외 규칙 2: _numberingRuleId로 끝나는 필드 (채번 규칙 메타 정보)
+              if (fieldName.endsWith("_numberingRuleId")) continue;
+              // 제외 규칙 3: _로 시작하는 필드 (내부 메타 필드)
+              if (fieldName.startsWith("_")) continue;
+              // 제외 규칙 4: 배열 타입 (하위 항목 데이터)
+              if (Array.isArray(value)) continue;
+              // 제외 규칙 5: 객체 타입 (복잡한 구조 데이터) - null 제외
+              if (value !== null && typeof value === "object") continue;
+              // 제외 규칙 6: 빈 값
+              if (value === undefined || value === "" || value === null) continue;
+              // 제외 규칙 7: 이미 commonFields에 있는 필드 (범용 폼 모달에서 가져온 필드)
+              if (fieldName in commonFields) continue;
+
+              // 위 규칙에 해당하지 않는 단순 값(문자열, 숫자, 날짜 등)은 공통 필드로 전달
+              commonFields[fieldName] = value;
+            }
+            console.log("📋 [handleSave] 최종 공통 필드 (규칙 기반 자동 추출):", commonFields);
+
             for (const item of parsedData) {
               // 메타 필드 제거 (eslint 경고 무시 - 의도적으로 분리)
 
@@ -1013,10 +1222,11 @@ export class ButtonActionExecutor {
               }
 
               // 🆕 공통 필드 병합 + 사용자 정보 추가
-              // 공통 필드를 먼저 넣고, 개별 항목 데이터로 덮어씀 (개별 항목이 우선)
+              // 개별 항목 데이터를 먼저 넣고, 공통 필드로 덮어씀 (공통 필드가 우선)
+              // 이유: 사용자가 공통 필드(출고상태 등)를 변경하면 모든 항목에 적용되어야 함
               const dataWithMeta: Record<string, unknown> = {
-                ...commonFields, // 범용 폼 모달의 공통 필드 (order_no, manager_id 등)
                 ...dataToSave, // RepeaterFieldGroup의 개별 항목 데이터
+                ...commonFields, // 범용 폼 모달의 공통 필드 (outbound_status 등) - 공통 필드가 우선!
                 created_by: context.userId,
                 updated_by: context.userId,
                 company_code: context.companyCode,
@@ -1040,6 +1250,13 @@ export class ButtonActionExecutor {
                     dataWithMeta,
                   );
                   console.log("✅ [handleSave] RepeaterFieldGroup INSERT 완료:", insertResult.data);
+                  // 무시된 컬럼이 있으면 경고 출력
+                  if (insertResult.data?.data?.skippedColumns?.length > 0) {
+                    console.warn(
+                      `⚠️ [${repeaterTargetTable}] 테이블에 존재하지 않는 컬럼이 무시됨:`,
+                      insertResult.data.data.skippedColumns,
+                    );
+                  }
                 } else if (item.id) {
                   // UPDATE (기존 항목)
                   const originalData = { id: item.id };
@@ -1055,10 +1272,15 @@ export class ButtonActionExecutor {
                   console.log("✅ [handleSave] RepeaterFieldGroup UPDATE 완료:", updateResult.data);
                 }
               } catch (err) {
-                const error = err as { response?: { data?: unknown }; message?: string };
+                const error = err as { response?: { data?: unknown; status?: number }; message?: string };
                 console.error(
                   `❌ [handleSave] RepeaterFieldGroup 저장 실패 (${repeaterTargetTable}):`,
-                  error.response?.data || error.message,
+                  {
+                    status: error.response?.status,
+                    data: error.response?.data,
+                    message: error.message,
+                    fullError: JSON.stringify(error.response?.data, null, 2),
+                  },
                 );
               }
             }
@@ -1216,7 +1438,49 @@ export class ButtonActionExecutor {
         // 🔥 저장 성공 후 연결된 제어 실행 (dataflowTiming이 'after'인 경우)
         if (config.enableDataflowControl && config.dataflowConfig) {
           console.log("🎯 저장 후 제어 실행 시작:", config.dataflowConfig);
-          await this.executeAfterSaveControl(config, context);
+          
+          // 테이블 섹션 데이터 파싱 (comp_로 시작하는 필드에 JSON 배열이 있는 경우)
+          // 입고 화면 등에서 품목 목록이 comp_xxx 필드에 JSON 문자열로 저장됨
+          const formData: Record<string, any> = (saveResult.data || context.formData || {}) as Record<string, any>;
+          let parsedSectionData: any[] = [];
+          
+          // comp_로 시작하는 필드에서 테이블 섹션 데이터 찾기
+          const compFieldKey = Object.keys(formData).find(key => 
+            key.startsWith("comp_") && typeof formData[key] === "string"
+          );
+          
+          if (compFieldKey) {
+            try {
+              const sectionData = JSON.parse(formData[compFieldKey]);
+              if (Array.isArray(sectionData) && sectionData.length > 0) {
+                // 공통 필드와 섹션 데이터 병합
+                parsedSectionData = sectionData.map((item: any) => {
+                  // 섹션 데이터에서 불필요한 내부 필드 제거
+                  const { _isNewItem, _targetTable, _existingRecord, ...cleanItem } = item;
+                  // 공통 필드(comp_ 필드 제외) + 섹션 아이템 병합
+                  const commonFields: Record<string, any> = {};
+                  Object.keys(formData).forEach(key => {
+                    if (!key.startsWith("comp_") && !key.endsWith("_numberingRuleId")) {
+                      commonFields[key] = formData[key];
+                    }
+                  });
+                  return { ...commonFields, ...cleanItem };
+                });
+                console.log(`📦 [handleSave] 테이블 섹션 데이터 파싱 완료: ${parsedSectionData.length}건`, parsedSectionData[0]);
+              }
+            } catch (parseError) {
+              console.warn("⚠️ [handleSave] 테이블 섹션 데이터 파싱 실패:", parseError);
+            }
+          }
+          
+          // 저장된 데이터를 context에 추가하여 플로우에 전달
+          const contextWithSavedData = {
+            ...context,
+            savedData: formData,
+            // 파싱된 섹션 데이터가 있으면 selectedRowsData로 전달
+            selectedRowsData: parsedSectionData.length > 0 ? parsedSectionData : context.selectedRowsData,
+          };
+          await this.executeAfterSaveControl(config, contextWithSavedData);
         }
       } else {
         throw new Error("저장에 필요한 정보가 부족합니다. (테이블명 또는 화면ID 누락)");
@@ -1340,19 +1604,20 @@ export class ButtonActionExecutor {
 
     // 저장 전 중복 체크
     const firstLocation = locations[0];
-    const warehouseId = firstLocation.warehouse_id || firstLocation.warehouseCode;
+    const warehouseCode = firstLocation.warehouse_code || firstLocation.warehouse_id || firstLocation.warehouseCode;
     const floor = firstLocation.floor;
     const zone = firstLocation.zone;
 
-    if (warehouseId && floor && zone) {
-      console.log("🔍 [handleRackStructureBatchSave] 기존 데이터 중복 체크:", { warehouseId, floor, zone });
+    if (warehouseCode && floor && zone) {
+      console.log("🔍 [handleRackStructureBatchSave] 기존 데이터 중복 체크:", { warehouseCode, floor, zone });
 
       try {
+        // search 파라미터를 사용하여 백엔드에서 필터링 (filters는 백엔드에서 처리 안됨)
         const existingResponse = await DynamicFormApi.getTableData(tableName, {
-          filters: {
-            warehouse_id: warehouseId,
-            floor: floor,
-            zone: zone,
+          search: {
+            warehouse_code: { value: warehouseCode, operator: "equals" },
+            floor: { value: floor, operator: "equals" },
+            zone: { value: zone, operator: "equals" },
           },
           page: 1,
           pageSize: 1000,
@@ -1400,8 +1665,8 @@ export class ButtonActionExecutor {
         location_name: loc.location_name || loc.locationName,
         row_num: loc.row_num || String(loc.rowNum),
         level_num: loc.level_num || String(loc.levelNum),
-        // 창고 정보 (렉 구조 컴포넌트에서 전달)
-        warehouse_id: loc.warehouse_id || loc.warehouseCode,
+        // 창고 정보 (렉 구조 컴포넌트에서 전달) - DB 컬럼명은 warehouse_code
+        warehouse_code: loc.warehouse_code || loc.warehouse_id || loc.warehouseCode,
         warehouse_name: loc.warehouse_name || loc.warehouseName,
         // 위치 정보 (렉 구조 컴포넌트에서 전달)
         floor: loc.floor,
@@ -1706,19 +1971,43 @@ export class ButtonActionExecutor {
           }
         });
 
-        console.log("📦 [handleUniversalFormModalTableSectionSave] 메인 테이블 저장 데이터:", mainRowToSave);
+        // 🆕 메인 테이블 UPDATE/INSERT 판단
+        // - formData.id가 있으면 편집 모드 → UPDATE
+        // - formData.id가 없으면 신규 등록 → INSERT
+        const existingMainId = formData.id;
+        const isMainUpdate = existingMainId !== undefined && existingMainId !== null && existingMainId !== "";
 
-        const mainSaveResult = await DynamicFormApi.saveFormData({
-          screenId: screenId!,
-          tableName: tableName!,
-          data: mainRowToSave,
+        console.log("📦 [handleUniversalFormModalTableSectionSave] 메인 테이블 저장 데이터:", mainRowToSave);
+        console.log("📦 [handleUniversalFormModalTableSectionSave] UPDATE/INSERT 판단:", {
+          existingMainId,
+          isMainUpdate,
         });
 
+        let mainSaveResult: { success: boolean; data?: any; message?: string };
+
+        if (isMainUpdate) {
+          // 🔄 편집 모드: UPDATE 실행
+          console.log("🔄 [handleUniversalFormModalTableSectionSave] 메인 테이블 UPDATE 실행, ID:", existingMainId);
+          mainSaveResult = await DynamicFormApi.updateFormData(existingMainId, {
+            tableName: tableName!,
+            data: mainRowToSave,
+          });
+          mainRecordId = existingMainId;
+        } else {
+          // ➕ 신규 등록: INSERT 실행
+          console.log("➕ [handleUniversalFormModalTableSectionSave] 메인 테이블 INSERT 실행");
+          mainSaveResult = await DynamicFormApi.saveFormData({
+            screenId: screenId!,
+            tableName: tableName!,
+            data: mainRowToSave,
+          });
+          mainRecordId = mainSaveResult.data?.id || null;
+        }
+
         if (!mainSaveResult.success) {
           throw new Error(mainSaveResult.message || "메인 데이터 저장 실패");
         }
 
-        mainRecordId = mainSaveResult.data?.id || null;
         console.log("✅ [handleUniversalFormModalTableSectionSave] 메인 테이블 저장 완료, ID:", mainRecordId);
       }
 
@@ -1781,37 +2070,45 @@ export class ButtonActionExecutor {
           const originalItem = originalGroupedData.find((orig) => orig.id === item.id);
 
           if (!originalItem) {
-            console.warn(`⚠️ [UPDATE] 원본 데이터 없음 - INSERT로 처리: id=${item.id}`);
-            // 원본이 없으면 신규로 처리
-            const rowToSave = { ...commonFieldsData, ...item, ...userInfo };
-            Object.keys(rowToSave).forEach((key) => {
+            // 🆕 폴백 로직: 원본 데이터가 없어도 id가 있으면 UPDATE 시도
+            // originalGroupedData 전달이 누락된 경우를 처리
+            console.warn(`⚠️ [UPDATE] 원본 데이터 없음 - id가 있으므로 UPDATE 시도 (폴백): id=${item.id}`);
+
+            // ⚠️ 중요: commonFieldsData가 item보다 우선순위가 높아야 함
+            // item에 있는 기존 값(예: manager_id=123)이 commonFieldsData의 새 값(manager_id=234)을 덮어쓰지 않도록
+            // 순서: item(기존) → commonFieldsData(새로 입력) → userInfo(메타데이터)
+            const rowToUpdate = { ...item, ...commonFieldsData, ...userInfo };
+            Object.keys(rowToUpdate).forEach((key) => {
               if (key.startsWith("_")) {
-                delete rowToSave[key];
+                delete rowToUpdate[key];
               }
             });
-            delete rowToSave.id; // id 제거하여 INSERT
 
-            // 🆕 메인 레코드 ID 연결 (별도 테이블에 저장하는 경우)
-            if (targetTableName && mainRecordId && saveConfig.primaryKeyColumn) {
-              rowToSave[saveConfig.primaryKeyColumn] = mainRecordId;
-            }
-
-            const saveResult = await DynamicFormApi.saveFormData({
-              screenId: screenId!,
+            console.log("📝 [UPDATE 폴백] 저장할 데이터:", {
+              id: item.id,
               tableName: saveTableName,
-              data: rowToSave,
+              commonFieldsData,
+              itemFields: Object.keys(item).filter(k => !k.startsWith("_")),
+              rowToUpdate,
             });
 
-            if (!saveResult.success) {
-              throw new Error(saveResult.message || "품목 저장 실패");
+            // id를 유지하고 UPDATE 실행
+            const updateResult = await DynamicFormApi.updateFormData(item.id, {
+              tableName: saveTableName,
+              data: rowToUpdate,
+            });
+
+            if (!updateResult.success) {
+              throw new Error(updateResult.message || "품목 수정 실패");
             }
 
-            insertedCount++;
+            updatedCount++;
             continue;
           }
 
           // 변경 사항 확인 (공통 필드 포함)
-          const currentDataWithCommon = { ...commonFieldsData, ...item };
+          // ⚠️ 중요: commonFieldsData가 item보다 우선순위가 높아야 함 (새로 입력한 값이 기존 값을 덮어씀)
+          const currentDataWithCommon = { ...item, ...commonFieldsData };
           const hasChanges = this.checkForChanges(originalItem, currentDataWithCommon);
 
           if (hasChanges) {
@@ -1836,13 +2133,15 @@ export class ButtonActionExecutor {
         }
 
         // 3️⃣ 삭제된 품목 DELETE (원본에는 있지만 현재에는 없는 항목)
-        const currentIds = new Set(currentItems.map((item) => item.id).filter(Boolean));
-        const deletedItems = originalGroupedData.filter((orig) => orig.id && !currentIds.has(orig.id));
+        // ⚠️ id 타입 통일: 문자열로 변환하여 비교 (숫자 vs 문자열 불일치 방지)
+        const currentIds = new Set(currentItems.map((item) => String(item.id)).filter(Boolean));
+        const deletedItems = originalGroupedData.filter((orig) => orig.id && !currentIds.has(String(orig.id)));
 
         for (const deletedItem of deletedItems) {
           console.log(`🗑️ [DELETE] 품목 삭제: id=${deletedItem.id}, tableName=${saveTableName}`);
 
-          const deleteResult = await DynamicFormApi.deleteFormDataFromTable(saveTableName, deletedItem.id);
+          // screenId 전달하여 제어관리 실행 가능하도록 함
+          const deleteResult = await DynamicFormApi.deleteFormDataFromTable(deletedItem.id, saveTableName, context.screenId);
 
           if (!deleteResult.success) {
             throw new Error(deleteResult.message || "품목 삭제 실패");
@@ -2078,7 +2377,20 @@ export class ButtonActionExecutor {
 
           // 모든 그룹의 카티션 곱 생성
           const entryArrays = groupArrays.map((g) => g.entries);
-          const combinations = cartesianProduct(entryArrays);
+          
+          // 🆕 모든 그룹이 비어있는지 확인
+          const allGroupsEmpty = entryArrays.every((arr) => arr.length === 0);
+          
+          let combinations: any[][];
+          if (allGroupsEmpty) {
+            // 🆕 모든 그룹이 비어있으면 빈 조합 하나 생성 (품목 기본 정보만으로 저장)
+            console.log("📝 [handleBatchSave] 모든 그룹이 비어있음 - 기본 레코드 생성");
+            combinations = [[]];
+          } else {
+            // 빈 그룹을 필터링하여 카티션 곱 계산 (빈 그룹은 무시)
+            const nonEmptyArrays = entryArrays.filter((arr) => arr.length > 0);
+            combinations = nonEmptyArrays.length > 0 ? cartesianProduct(nonEmptyArrays) : [[]];
+          }
 
           // 각 조합을 개별 레코드로 저장
           for (let i = 0; i < combinations.length; i++) {
@@ -2296,7 +2608,8 @@ export class ButtonActionExecutor {
           if (deleteId) {
             console.log("다중 데이터 삭제:", { tableName, screenId, id: deleteId });
 
-            const deleteResult = await DynamicFormApi.deleteFormDataFromTable(deleteId, tableName);
+            // screenId 전달하여 제어관리 실행 가능하도록 함
+            const deleteResult = await DynamicFormApi.deleteFormDataFromTable(deleteId, tableName, screenId);
             if (!deleteResult.success) {
               throw new Error(`ID ${deleteId} 삭제 실패: ${deleteResult.message}`);
             }
@@ -2331,8 +2644,8 @@ export class ButtonActionExecutor {
       if (tableName && screenId && formData.id) {
         console.log("단일 데이터 삭제:", { tableName, screenId, id: formData.id });
 
-        // 실제 삭제 API 호출
-        const deleteResult = await DynamicFormApi.deleteFormDataFromTable(formData.id, tableName);
+        // 실제 삭제 API 호출 - screenId 전달하여 제어관리 실행 가능하도록 함
+        const deleteResult = await DynamicFormApi.deleteFormDataFromTable(formData.id, tableName, screenId);
 
         if (!deleteResult.success) {
           throw new Error(deleteResult.message || "삭제에 실패했습니다.");
@@ -2945,6 +3258,7 @@ export class ButtonActionExecutor {
     config: ButtonActionConfig,
     rowData: any,
     context: ButtonActionContext,
+    isCreateMode: boolean = false, // 🆕 복사 모드에서 true로 전달
   ): Promise<void> {
     const { groupByColumns = [] } = config;
 
@@ -2988,11 +3302,11 @@ export class ButtonActionExecutor {
               comp.componentType === "split-panel-layout",
           );
         }
-        console.log("🔍 [openEditModal] 분할 패널 확인:", {
-          targetScreenId: config.targetScreenId,
-          hasSplitPanel,
-          componentTypes: layoutData?.components?.map((c: any) => c.type || c.componentType) || [],
-        });
+        // console.log("🔍 [openEditModal] 분할 패널 확인:", {
+        //   targetScreenId: config.targetScreenId,
+        //   hasSplitPanel,
+        //   componentTypes: layoutData?.components?.map((c: any) => c.type || c.componentType) || [],
+        // });
       } catch (error) {
         console.warn("레이아웃 정보를 가져오지 못했습니다:", error);
       }
@@ -3018,10 +3332,11 @@ export class ButtonActionExecutor {
     const modalEvent = new CustomEvent("openEditModal", {
       detail: {
         screenId: config.targetScreenId,
-        title: config.editModalTitle || "데이터 수정",
+        title: isCreateMode ? (config.editModalTitle || "데이터 복사") : (config.editModalTitle || "데이터 수정"),
         description: description,
         modalSize: config.modalSize || "lg",
         editData: rowData,
+        isCreateMode: isCreateMode, // 🆕 복사 모드에서 INSERT로 처리되도록
         groupByColumns: groupByColumns.length > 0 ? groupByColumns : undefined, // 🆕 그룹핑 컬럼 전달
         tableName: context.tableName, // 🆕 테이블명 전달
         buttonConfig: config, // 🆕 버튼 설정 전달 (제어로직 실행용)
@@ -3136,23 +3451,61 @@ export class ButtonActionExecutor {
           "code",
         ];
 
+        // 🆕 화면 설정에서 채번 규칙 가져오기
+        let screenNumberingRules: Record<string, string> = {};
+        if (config.targetScreenId) {
+          try {
+            const { screenApi } = await import("@/lib/api/screen");
+            const layout = await screenApi.getLayout(config.targetScreenId);
+            
+            // 레이아웃에서 채번 규칙이 설정된 컴포넌트 찾기
+            const findNumberingRules = (components: any[]): void => {
+              for (const comp of components) {
+                const compConfig = comp.componentConfig || {};
+                // text-input 컴포넌트의 채번 규칙 확인
+                if (compConfig.autoGeneration?.type === "numbering_rule" && compConfig.autoGeneration?.options?.numberingRuleId) {
+                  const columnName = compConfig.columnName || comp.columnName;
+                  if (columnName) {
+                    screenNumberingRules[columnName] = compConfig.autoGeneration.options.numberingRuleId;
+                    console.log(`📋 화면 설정에서 채번 규칙 발견: ${columnName} → ${compConfig.autoGeneration.options.numberingRuleId}`);
+                  }
+                }
+                // 중첩된 컴포넌트 확인
+                if (comp.children && Array.isArray(comp.children)) {
+                  findNumberingRules(comp.children);
+                }
+              }
+            };
+            
+            if (layout?.components) {
+              findNumberingRules(layout.components);
+            }
+            console.log("📋 화면 설정에서 찾은 채번 규칙:", screenNumberingRules);
+          } catch (error) {
+            console.warn("⚠️ 화면 레이아웃 조회 실패:", error);
+          }
+        }
+
         // 품목코드 필드를 찾아서 무조건 공백으로 초기화
         let resetFieldName = "";
         for (const field of itemCodeFields) {
           if (copiedData[field] !== undefined) {
             const originalValue = copiedData[field];
             const ruleIdKey = `${field}_numberingRuleId`;
-            const hasNumberingRule =
-              rowData[ruleIdKey] !== undefined && rowData[ruleIdKey] !== null && rowData[ruleIdKey] !== "";
+            
+            // 1순위: 원본 데이터에서 채번 규칙 ID 확인
+            // 2순위: 화면 설정에서 채번 규칙 ID 확인
+            const numberingRuleId = rowData[ruleIdKey] || screenNumberingRules[field];
+            const hasNumberingRule = numberingRuleId !== undefined && numberingRuleId !== null && numberingRuleId !== "";
 
             // 품목코드를 무조건 공백으로 초기화
             copiedData[field] = "";
 
             // 채번 규칙 ID가 있으면 복사 (저장 시 자동 생성)
             if (hasNumberingRule) {
-              copiedData[ruleIdKey] = rowData[ruleIdKey];
+              copiedData[ruleIdKey] = numberingRuleId;
               console.log(`✅ 품목코드 초기화 (채번 규칙 있음): ${field} (기존값: ${originalValue})`);
-              console.log(`📋 채번 규칙 ID 복사: ${ruleIdKey} = ${rowData[ruleIdKey]}`);
+              console.log(`📋 채번 규칙 ID 설정: ${ruleIdKey} = ${numberingRuleId}`);
             } else {
               console.log(`✅ 품목코드 초기화 (수동 입력 필요): ${field} (기존값: ${originalValue})`);
             }
@@ -3209,9 +3562,9 @@ export class ButtonActionExecutor {
 
       switch (editMode) {
         case "modal":
-          // 모달로 복사 폼 열기 (편집 모달 재사용)
-          console.log("📋 모달로 복사 폼 열기");
-          await this.openEditModal(config, rowData, context);
+          // 모달로 복사 폼 열기 (편집 모달 재사용, INSERT 모드로)
+          console.log("📋 모달로 복사 폼 열기 (INSERT 모드)");
+          await this.openEditModal(config, rowData, context, true); // 🆕 isCreateMode: true
           break;
 
         case "navigate":
@@ -3222,8 +3575,8 @@ export class ButtonActionExecutor {
 
         default:
           // 기본값: 모달
-          console.log("📋 기본 모달로 복사 폼 열기");
-          this.openEditModal(config, rowData, context);
+          console.log("📋 기본 모달로 복사 폼 열기 (INSERT 모드)");
+          this.openEditModal(config, rowData, context, true); // 🆕 isCreateMode: true
       }
     } catch (error: any) {
       console.error("❌ openCopyForm 실행 중 오류:", error);
@@ -3595,8 +3948,20 @@ export class ButtonActionExecutor {
       // 노드 플로우 실행 API
       const { executeNodeFlow } = await import("@/lib/api/nodeFlows");
 
-      // 데이터 소스 준비
-      const sourceData: any = context.formData || {};
+      // 데이터 소스 준비: context-data 모드는 배열을 기대함
+      // 우선순위: selectedRowsData > savedData > formData
+      // - selectedRowsData: 테이블 섹션에서 저장된 하위 항목들 (item_code, inbound_qty 등 포함)
+      // - savedData: 저장 API 응답 데이터
+      // - formData: 폼에 입력된 데이터
+      let sourceData: any[];
+      if (context.selectedRowsData && context.selectedRowsData.length > 0) {
+        sourceData = context.selectedRowsData;
+        console.log("📦 [다중제어] selectedRowsData 사용:", sourceData.length, "건");
+      } else {
+        const savedData = context.savedData || context.formData || {};
+        sourceData = Array.isArray(savedData) ? savedData : [savedData];
+        console.log("📦 [다중제어] savedData/formData 사용:", sourceData.length, "건");
+      }
 
       let allSuccess = true;
       const results: Array<{ flowId: number; flowName: string; success: boolean; message?: string }> = [];
@@ -3703,8 +4068,20 @@ export class ButtonActionExecutor {
         // 노드 플로우 실행 API 호출
         const { executeNodeFlow } = await import("@/lib/api/nodeFlows");
 
-        // 데이터 소스 준비
-        const sourceData: any = context.formData || {};
+        // 데이터 소스 준비: context-data 모드는 배열을 기대함
+        // 우선순위: selectedRowsData > savedData > formData
+        // - selectedRowsData: 테이블 섹션에서 저장된 하위 항목들 (item_code, inbound_qty 등 포함)
+        // - savedData: 저장 API 응답 데이터
+        // - formData: 폼에 입력된 데이터
+        let sourceData: any[];
+        if (context.selectedRowsData && context.selectedRowsData.length > 0) {
+          sourceData = context.selectedRowsData;
+          console.log("📦 [단일제어] selectedRowsData 사용:", sourceData.length, "건");
+        } else {
+          const savedData = context.savedData || context.formData || {};
+          sourceData = Array.isArray(savedData) ? savedData : [savedData];
+          console.log("📦 [단일제어] savedData/formData 사용:", sourceData.length, "건");
+        }
 
         // repeat-screen-modal 데이터가 있으면 병합
         const repeatScreenModalKeys = Object.keys(context.formData || {}).filter((key) =>
@@ -3717,7 +4094,8 @@ export class ButtonActionExecutor {
         console.log("📦 노드 플로우에 전달할 데이터:", {
           flowId,
           dataSourceType: controlDataSource,
-          sourceData,
+          sourceDataCount: sourceData.length,
+          sourceDataSample: sourceData[0],
         });
 
         const result = await executeNodeFlow(flowId, {
@@ -4048,7 +4426,8 @@ export class ButtonActionExecutor {
         throw new Error("삭제할 항목의 ID를 찾을 수 없습니다.");
       }
 
-      const result = await DynamicFormApi.deleteFormDataFromTable(deleteId, context.tableName);
+      // screenId 전달하여 제어관리 실행 가능하도록 함
+      const result = await DynamicFormApi.deleteFormDataFromTable(deleteId, context.tableName, context.screenId);
 
       if (result.success) {
         console.log("✅ 삭제 성공:", result);
@@ -4278,8 +4657,67 @@ export class ButtonActionExecutor {
       const { exportToExcel } = await import("@/lib/utils/excelExport");
 
       let dataToExport: any[] = [];
+      let visibleColumns: string[] | undefined = undefined;
+      let columnLabels: Record<string, string> | undefined = undefined;
 
-      // ✅ 항상 API 호출로 필터링된 전체 데이터 가져오기
+      // 🆕 마스터-디테일 구조 확인 및 처리
+      if (context.screenId) {
+        const { DynamicFormApi } = await import("@/lib/api/dynamicForm");
+        const relationResponse = await DynamicFormApi.getMasterDetailRelation(context.screenId);
+
+        if (relationResponse.success && relationResponse.data) {
+          // 마스터-디테일 구조인 경우 전용 API 사용
+          console.log("📊 마스터-디테일 엑셀 다운로드:", relationResponse.data);
+
+          const downloadResponse = await DynamicFormApi.getMasterDetailDownloadData(
+            context.screenId,
+            context.filterConditions
+          );
+
+          if (downloadResponse.success && downloadResponse.data) {
+            dataToExport = downloadResponse.data.data;
+            visibleColumns = downloadResponse.data.columns;
+            
+            // 헤더와 컬럼 매핑
+            columnLabels = {};
+            downloadResponse.data.columns.forEach((col: string, index: number) => {
+              columnLabels![col] = downloadResponse.data.headers[index] || col;
+            });
+
+            console.log(`✅ 마스터-디테일 데이터 조회 완료: ${dataToExport.length}행`);
+          } else {
+            toast.error("마스터-디테일 데이터 조회에 실패했습니다.");
+            return false;
+          }
+
+          // 마스터-디테일 데이터 변환 및 다운로드
+          if (visibleColumns && visibleColumns.length > 0 && dataToExport.length > 0) {
+            dataToExport = dataToExport.map((row: any) => {
+              const filteredRow: Record<string, any> = {};
+              visibleColumns!.forEach((columnName: string) => {
+                const label = columnLabels?.[columnName] || columnName;
+                filteredRow[label] = row[columnName];
+              });
+              return filteredRow;
+            });
+          }
+
+          // 파일명 생성
+          let defaultFileName = relationResponse.data.masterTable || "데이터";
+          if (typeof window !== "undefined") {
+            const menuName = localStorage.getItem("currentMenuName");
+            if (menuName) defaultFileName = menuName;
+          }
+          const fileName = config.excelFileName || `${defaultFileName}_${new Date().toISOString().split("T")[0]}.xlsx`;
+          const sheetName = config.excelSheetName || "Sheet1";
+
+          await exportToExcel(dataToExport, fileName, sheetName, true);
+          toast.success(`${dataToExport.length}개 행이 다운로드되었습니다.`);
+          return true;
+        }
+      }
+
+      // ✅ 기존 로직: 단일 테이블 처리
       if (context.tableName) {
         const { tableDisplayStore } = await import("@/stores/tableDisplayStore");
         const storedData = tableDisplayStore.getTableData(context.tableName);
@@ -4371,8 +4809,7 @@ export class ButtonActionExecutor {
       const includeHeaders = config.excelIncludeHeaders !== false;
 
       // 🎨 화면 레이아웃에서 테이블 리스트 컴포넌트의 컬럼 설정 가져오기
-      let visibleColumns: string[] | undefined = undefined;
-      let columnLabels: Record<string, string> | undefined = undefined;
+      // visibleColumns, columnLabels는 함수 상단에서 이미 선언됨
 
       try {
         // 화면 레이아웃 데이터 가져오기 (별도 API 사용)
@@ -4568,12 +5005,63 @@ export class ButtonActionExecutor {
    */
   private static async handleExcelUpload(config: ButtonActionConfig, context: ButtonActionContext): Promise<boolean> {
     try {
-      console.log("📤 엑셀 업로드 모달 열기:", {
-        config,
-        context,
-        userId: context.userId,
-        tableName: context.tableName,
-      });
+      // 마스터-디테일 구조 확인 (화면에 분할 패널이 있으면 자동 감지)
+      let isMasterDetail = false;
+      let masterDetailRelation: any = null;
+      let masterDetailExcelConfig: any = undefined;
+
+      // 화면 레이아웃에서 분할 패널 자동 감지
+      if (context.screenId) {
+        const { DynamicFormApi } = await import("@/lib/api/dynamicForm");
+        const relationResponse = await DynamicFormApi.getMasterDetailRelation(context.screenId);
+        
+        if (relationResponse.success && relationResponse.data) {
+          isMasterDetail = true;
+          masterDetailRelation = relationResponse.data;
+          
+          // 버튼 설정에서 채번 규칙 등 추가 설정 가져오기
+          // 업로드 후 제어: excelAfterUploadFlows를 우선 사용 (통합된 설정)
+          // masterDetailExcel.afterUploadFlows는 레거시 호환성을 위해 fallback으로만 사용
+          const afterUploadFlows = config.excelAfterUploadFlows?.length > 0 
+            ? config.excelAfterUploadFlows 
+            : config.masterDetailExcel?.afterUploadFlows;
+          
+          if (config.masterDetailExcel) {
+            masterDetailExcelConfig = {
+              ...config.masterDetailExcel,
+              // 분할 패널에서 감지한 테이블 정보로 덮어쓰기
+              masterTable: relationResponse.data.masterTable,
+              detailTable: relationResponse.data.detailTable,
+              masterKeyColumn: relationResponse.data.masterKeyColumn,
+              detailFkColumn: relationResponse.data.detailFkColumn,
+              // 채번 규칙 ID 추가 (excelNumberingRuleId를 numberingRuleId로 매핑)
+              numberingRuleId: config.masterDetailExcel.numberingRuleId || config.excelNumberingRuleId,
+              // 업로드 후 제어 설정 (통합: excelAfterUploadFlows 우선)
+              afterUploadFlows,
+            };
+          } else {
+            // 버튼 설정이 없으면 분할 패널 정보만 사용
+            masterDetailExcelConfig = {
+              masterTable: relationResponse.data.masterTable,
+              detailTable: relationResponse.data.detailTable,
+              masterKeyColumn: relationResponse.data.masterKeyColumn,
+              detailFkColumn: relationResponse.data.detailFkColumn,
+              simpleMode: true, // 기본값으로 간단 모드 사용
+              // 채번 규칙 ID 추가 (excelNumberingRuleId 사용)
+              numberingRuleId: config.excelNumberingRuleId,
+              // 업로드 후 제어 설정 (통합: excelAfterUploadFlows 우선)
+              afterUploadFlows,
+            };
+          }
+          
+          console.log("📊 마스터-디테일 구조 자동 감지:", {
+            masterTable: relationResponse.data.masterTable,
+            detailTable: relationResponse.data.detailTable,
+            masterKeyColumn: relationResponse.data.masterKeyColumn,
+            numberingRuleId: masterDetailExcelConfig?.numberingRuleId,
+          });
+        }
+      }
 
       // 동적 import로 모달 컴포넌트 로드
       const { ExcelUploadModal } = await import("@/components/common/ExcelUploadModal");
@@ -4600,7 +5088,7 @@ export class ButtonActionExecutor {
         savedSize: localStorage.getItem(storageKey),
       });
 
-      root.render(
+        root.render(
         React.createElement(ExcelUploadModal, {
           open: true,
           onOpenChange: (open: boolean) => {
@@ -4617,6 +5105,16 @@ export class ButtonActionExecutor {
           uploadMode: config.excelUploadMode || "insert",
           keyColumn: config.excelKeyColumn,
           userId: context.userId,
+          // 🆕 마스터-디테일 관련 props
+          screenId: context.screenId,
+          isMasterDetail,
+          masterDetailRelation,
+          masterDetailExcelConfig,
+          // 🆕 단일 테이블 채번 설정
+          numberingRuleId: config.excelNumberingRuleId,
+          numberingTargetColumn: config.excelNumberingTargetColumn,
+          // 🆕 업로드 후 제어 실행 설정
+          afterUploadFlows: config.excelAfterUploadFlows,
           onSuccess: () => {
             // 성공 메시지는 ExcelUploadModal 내부에서 이미 표시됨
             context.onRefresh?.();
@@ -4801,26 +5299,35 @@ export class ButtonActionExecutor {
 
       const { oldValue, newValue } = confirmed;
 
-      // 미리보기 표시 (옵션)
+      // 미리보기 표시 (값 기반 검색 - 모든 테이블의 모든 컬럼에서 검색)
       if (config.mergeShowPreview !== false) {
         const { apiClient } = await import("@/lib/api/client");
 
-        const previewResponse = await apiClient.post("/code-merge/preview", {
-          columnName,
+        toast.loading("영향받는 데이터 검색 중...", { duration: Infinity });
+
+        const previewResponse = await apiClient.post("/code-merge/preview-by-value", {
           oldValue,
         });
 
+        toast.dismiss();
+
         if (previewResponse.data.success) {
           const preview = previewResponse.data.data;
           const totalRows = preview.totalAffectedRows;
 
+          // 상세 정보 생성
+          const detailList = preview.preview
+            .map((p: any) => `  - ${p.tableName}.${p.columnName}: ${p.affectedRows}건`)
+            .join("\n");
+
           const confirmMerge = confirm(
-            "⚠️ 코드 병합 확인\n\n" +
+            "코드 병합 확인\n\n" +
               `${oldValue} → ${newValue}\n\n` +
               "영향받는 데이터:\n" +
-              `- 테이블 수: ${preview.preview.length}개\n` +
+              `- 테이블/컬럼 수: ${preview.preview.length}개\n` +
               `- 총 행 수: ${totalRows}개\n\n` +
-              `데이터는 삭제되지 않고, "${columnName}" 컬럼 값만 변경됩니다.\n\n` +
+              (preview.preview.length <= 10 ? `상세:\n${detailList}\n\n` : "") +
+              "모든 테이블에서 해당 값이 변경됩니다.\n\n" +
               "계속하시겠습니까?",
           );
 
@@ -4830,13 +5337,12 @@ export class ButtonActionExecutor {
         }
       }
 
-      // 병합 실행
+      // 병합 실행 (값 기반 - 모든 테이블의 모든 컬럼)
       toast.loading("코드 병합 중...", { duration: Infinity });
 
       const { apiClient } = await import("@/lib/api/client");
 
-      const response = await apiClient.post("/code-merge/merge-all-tables", {
-        columnName,
+      const response = await apiClient.post("/code-merge/merge-by-value", {
         oldValue,
         newValue,
       });
@@ -4845,9 +5351,17 @@ export class ButtonActionExecutor {
 
       if (response.data.success) {
         const data = response.data.data;
+        
+        // 변경된 테이블/컬럼 목록 생성
+        const changedList = data.affectedData
+          .map((d: any) => `${d.tableName}.${d.columnName}: ${d.rowsUpdated}건`)
+          .join(", ");
+        
         toast.success(
-          "코드 병합 완료!\n" + `${data.affectedTables.length}개 테이블, ${data.totalRowsUpdated}개 행 업데이트`,
+          `코드 병합 완료! ${data.affectedData.length}개 테이블/컬럼, ${data.totalRowsUpdated}개 행 업데이트`,
         );
+        
+        console.log("코드 병합 결과:", data.affectedData);
 
         // 화면 새로고침
         context.onRefresh?.();
@@ -5931,6 +6445,69 @@ export class ButtonActionExecutor {
         return false;
       }
 
+      // ✅ allComponents가 있으면 기존 필수 항목 검증 수행
+      if (context.allComponents && context.allComponents.length > 0) {
+        console.log("🔍 [handleQuickInsert] 필수 항목 검증 시작:", {
+          hasAllComponents: !!context.allComponents,
+          allComponentsLength: context.allComponents?.length || 0,
+        });
+        const requiredValidation = this.validateRequiredFields(context);
+        if (!requiredValidation.isValid) {
+          console.log("❌ [handleQuickInsert] 필수 항목 누락:", requiredValidation.missingFields);
+          toast.error(`필수 항목을 입력해주세요: ${requiredValidation.missingFields.join(", ")}`);
+          return false;
+        }
+        console.log("✅ [handleQuickInsert] 필수 항목 검증 통과");
+      }
+
+      // ✅ quickInsert 전용 검증: component 타입 매핑에서 값이 비어있는지 확인
+      const mappingsForValidation = quickInsertConfig.columnMappings || [];
+      const missingMappingFields: string[] = [];
+
+      for (const mapping of mappingsForValidation) {
+        // component 타입 매핑은 필수 입력으로 간주
+        if (mapping.sourceType === "component" && mapping.sourceComponentId) {
+          let value: any = undefined;
+
+          // 값 가져오기 (formData에서)
+          if (mapping.sourceColumnName) {
+            value = context.formData?.[mapping.sourceColumnName];
+          }
+          if (value === undefined || value === null) {
+            value = context.formData?.[mapping.sourceComponentId];
+          }
+          // allComponents에서 컴포넌트 찾아서 columnName으로 시도
+          if ((value === undefined || value === null) && context.allComponents) {
+            const comp = context.allComponents.find((c: any) => c.id === mapping.sourceComponentId);
+            if (comp?.columnName) {
+              value = context.formData?.[comp.columnName];
+            }
+          }
+          // targetColumn으로 폴백
+          if ((value === undefined || value === null) && mapping.targetColumn) {
+            value = context.formData?.[mapping.targetColumn];
+          }
+
+          // 값이 비어있으면 필수 누락으로 처리
+          if (value === undefined || value === null || (typeof value === "string" && value.trim() === "")) {
+            console.log("❌ [handleQuickInsert] component 매핑 값 누락:", {
+              targetColumn: mapping.targetColumn,
+              sourceComponentId: mapping.sourceComponentId,
+              sourceColumnName: mapping.sourceColumnName,
+              value,
+            });
+            missingMappingFields.push(mapping.targetColumn);
+          }
+        }
+      }
+
+      if (missingMappingFields.length > 0) {
+        console.log("❌ [handleQuickInsert] 필수 입력 항목 누락:", missingMappingFields);
+        toast.error(`다음 항목을 입력해주세요: ${missingMappingFields.join(", ")}`);
+        return false;
+      }
+      console.log("✅ [handleQuickInsert] quickInsert 매핑 검증 통과");
+
       const { formData, splitPanelContext, userId, userName, companyCode } = context;
 
       console.log("⚡ Quick Insert 상세 정보:", {
diff --git a/frontend/lib/utils/multilangLabelExtractor.ts b/frontend/lib/utils/multilangLabelExtractor.ts
new file mode 100644
index 00000000..38788bd1
--- /dev/null
+++ b/frontend/lib/utils/multilangLabelExtractor.ts
@@ -0,0 +1,604 @@
+/**
+ * 다국어 라벨 추출 유틸리티
+ * 화면 디자이너의 컴포넌트에서 다국어 처리가 필요한 라벨을 추출합니다.
+ */
+
+import { ComponentData } from "@/types/screen";
+
+// 추출된 라벨 타입
+export interface ExtractedLabel {
+  id: string;
+  componentId: string;
+  label: string;
+  type: "label" | "title" | "button" | "placeholder" | "column" | "filter" | "field" | "tab" | "action";
+  parentType?: string;
+  parentLabel?: string;
+  langKeyId?: number;
+  langKey?: string;
+}
+
+// 입력 폼 컴포넌트인지 확인
+const INPUT_COMPONENT_TYPES = new Set([
+  "text-field",
+  "number-field",
+  "date-field",
+  "datetime-field",
+  "select-field",
+  "checkbox-field",
+  "radio-field",
+  "textarea-field",
+  "file-field",
+  "email-field",
+  "tel-field",
+  "password-field",
+  "entity-field",
+  "code-field",
+  "category-field",
+  "input-field",
+  "widget",
+]);
+
+const isInputComponent = (comp: any): boolean => {
+  const compType = comp.componentType || comp.type;
+  if (INPUT_COMPONENT_TYPES.has(compType)) return true;
+  if (compType === "widget" && comp.widgetType) return true;
+  if (comp.inputType || comp.webType) return true;
+  return false;
+};
+
+// 컬럼 라벨 맵 타입
+export type ColumnLabelMap = Record<string, Record<string, string>>;
+
+/**
+ * 컴포넌트에서 다국어 라벨 추출
+ * @param components 컴포넌트 배열
+ * @param columnLabelMap 테이블별 컬럼 라벨 맵 (선택사항)
+ * @returns 추출된 라벨 배열
+ */
+export function extractMultilangLabels(
+  components: ComponentData[],
+  columnLabelMap: ColumnLabelMap = {}
+): ExtractedLabel[] {
+  const labels: ExtractedLabel[] = [];
+  const addedLabels = new Set<string>();
+
+  const addLabel = (
+    componentId: string,
+    label: string,
+    type: ExtractedLabel["type"],
+    parentType?: string,
+    parentLabel?: string,
+    langKeyId?: number,
+    langKey?: string
+  ) => {
+    const key = `${componentId}_${type}_${label}`;
+    if (label && label.trim() && !addedLabels.has(key)) {
+      addedLabels.add(key);
+      labels.push({
+        id: key,
+        componentId,
+        label: label.trim(),
+        type,
+        parentType,
+        parentLabel,
+        langKeyId,
+        langKey,
+      });
+    }
+  };
+
+  const extractFromComponent = (comp: ComponentData, parentType?: string, parentLabel?: string) => {
+    const anyComp = comp as any;
+    const config = anyComp.componentConfig;
+    const compType = anyComp.componentType || anyComp.type;
+    const compLabel = anyComp.label || anyComp.title || compType;
+
+    // 1. 기본 라벨 - 입력 폼 컴포넌트인 경우에만 추출
+    if (isInputComponent(anyComp)) {
+      if (anyComp.label && typeof anyComp.label === "string") {
+        addLabel(comp.id, anyComp.label, "label", parentType, parentLabel, anyComp.langKeyId, anyComp.langKey);
+      }
+    }
+
+    // 2. 제목
+    if (anyComp.title && typeof anyComp.title === "string") {
+      addLabel(comp.id, anyComp.title, "title", parentType, parentLabel);
+    }
+
+    // 3. 버튼 텍스트 (componentId에 _button 접미사 추가하여 라벨과 구분)
+    if (config?.text && typeof config.text === "string") {
+      addLabel(
+        `${comp.id}_button`,
+        config.text,
+        "button",
+        parentType,
+        parentLabel,
+        config.langKeyId,
+        config.langKey
+      );
+    }
+
+    // 4. placeholder
+    if (anyComp.placeholder && typeof anyComp.placeholder === "string") {
+      addLabel(comp.id, anyComp.placeholder, "placeholder", parentType, parentLabel);
+    }
+
+    // 5. 테이블 컬럼 - columnLabelMap에서 한글 라벨 조회
+    const tableName = config?.selectedTable || config?.tableName || config?.table || anyComp.tableName;
+    if (config?.columns && Array.isArray(config.columns)) {
+      config.columns.forEach((col: any, index: number) => {
+        const colName = col.columnName || col.field || col.name;
+        // columnLabelMap에서 한글 라벨 조회, 없으면 displayName 사용
+        const colLabel = columnLabelMap[tableName]?.[colName] || col.displayName || col.label || colName;
+        
+        if (colLabel && typeof colLabel === "string") {
+          addLabel(
+            `${comp.id}_col_${index}`,
+            colLabel,
+            "column",
+            compType,
+            compLabel,
+            col.langKeyId,
+            col.langKey
+          );
+        }
+      });
+    }
+
+    // 6. 분할 패널 제목 및 컬럼 - columnLabelMap에서 한글 라벨 조회
+    // 6-1. 좌측 패널 제목
+    if (config?.leftPanel?.title && typeof config.leftPanel.title === "string") {
+      addLabel(
+        `${comp.id}_left_title`,
+        config.leftPanel.title,
+        "title",
+        compType,
+        `${compLabel} (좌측)`,
+        config.leftPanel.langKeyId,
+        config.leftPanel.langKey
+      );
+    }
+    // 6-2. 우측 패널 제목
+    if (config?.rightPanel?.title && typeof config.rightPanel.title === "string") {
+      addLabel(
+        `${comp.id}_right_title`,
+        config.rightPanel.title,
+        "title",
+        compType,
+        `${compLabel} (우측)`,
+        config.rightPanel.langKeyId,
+        config.rightPanel.langKey
+      );
+    }
+    // 6-3. 좌측 패널 컬럼
+    const leftTableName = config?.leftPanel?.selectedTable || config?.leftPanel?.tableName || tableName;
+    if (config?.leftPanel?.columns && Array.isArray(config.leftPanel.columns)) {
+      config.leftPanel.columns.forEach((col: any, index: number) => {
+        const colName = col.columnName || col.field || col.name;
+        const colLabel = columnLabelMap[leftTableName]?.[colName] || col.displayName || col.label || colName;
+        if (colLabel && typeof colLabel === "string") {
+          addLabel(
+            `${comp.id}_left_col_${index}`,
+            colLabel,
+            "column",
+            compType,
+            `${compLabel} (좌측)`,
+            col.langKeyId,
+            col.langKey
+          );
+        }
+      });
+    }
+    const rightTableName = config?.rightPanel?.selectedTable || config?.rightPanel?.tableName || tableName;
+    if (config?.rightPanel?.columns && Array.isArray(config.rightPanel.columns)) {
+      config.rightPanel.columns.forEach((col: any, index: number) => {
+        const colName = col.columnName || col.field || col.name;
+        const colLabel = columnLabelMap[rightTableName]?.[colName] || col.displayName || col.label || colName;
+        if (colLabel && typeof colLabel === "string") {
+          addLabel(
+            `${comp.id}_right_col_${index}`,
+            colLabel,
+            "column",
+            compType,
+            `${compLabel} (우측)`,
+            col.langKeyId,
+            col.langKey
+          );
+        }
+      });
+    }
+
+    // 6-5. 추가 탭 (additionalTabs) 제목 및 컬럼 - rightPanel.additionalTabs 확인
+    const additionalTabs = config?.rightPanel?.additionalTabs || config?.additionalTabs;
+    if (additionalTabs && Array.isArray(additionalTabs)) {
+      additionalTabs.forEach((tab: any, tabIndex: number) => {
+        // 탭 라벨
+        if (tab.label && typeof tab.label === "string") {
+          addLabel(
+            `${comp.id}_addtab_${tabIndex}_label`,
+            tab.label,
+            "tab",
+            compType,
+            compLabel,
+            tab.langKeyId,
+            tab.langKey
+          );
+        }
+        // 탭 제목
+        if (tab.title && typeof tab.title === "string") {
+          addLabel(
+            `${comp.id}_addtab_${tabIndex}_title`,
+            tab.title,
+            "title",
+            compType,
+            `${compLabel} (탭: ${tab.label || tabIndex})`,
+            tab.titleLangKeyId,
+            tab.titleLangKey
+          );
+        }
+        // 탭 컬럼
+        const tabTableName = tab.tableName || tab.selectedTable || rightTableName;
+        if (tab.columns && Array.isArray(tab.columns)) {
+          tab.columns.forEach((col: any, colIndex: number) => {
+            const colName = col.columnName || col.field || col.name;
+            const colLabel = columnLabelMap[tabTableName]?.[colName] || col.displayName || col.label || colName;
+            if (colLabel && typeof colLabel === "string") {
+              addLabel(
+                `${comp.id}_addtab_${tabIndex}_col_${colIndex}`,
+                colLabel,
+                "column",
+                compType,
+                `${compLabel} (탭: ${tab.label || tabIndex})`,
+                col.langKeyId,
+                col.langKey
+              );
+            }
+          });
+        }
+      });
+    }
+
+    // 7. 검색 필터
+    if (config?.filter?.filters && Array.isArray(config.filter.filters)) {
+      config.filter.filters.forEach((filter: any, index: number) => {
+        if (filter.label && typeof filter.label === "string") {
+          addLabel(
+            `${comp.id}_filter_${index}`,
+            filter.label,
+            "filter",
+            compType,
+            compLabel,
+            filter.langKeyId,
+            filter.langKey
+          );
+        }
+      });
+    }
+
+    // 8. 폼 필드
+    if (config?.fields && Array.isArray(config.fields)) {
+      config.fields.forEach((field: any, index: number) => {
+        if (field.label && typeof field.label === "string") {
+          addLabel(
+            `${comp.id}_field_${index}`,
+            field.label,
+            "field",
+            compType,
+            compLabel,
+            field.langKeyId,
+            field.langKey
+          );
+        }
+      });
+    }
+
+    // 9. 탭
+    if (config?.tabs && Array.isArray(config.tabs)) {
+      config.tabs.forEach((tab: any, index: number) => {
+        if (tab.label && typeof tab.label === "string") {
+          addLabel(
+            `${comp.id}_tab_${index}`,
+            tab.label,
+            "tab",
+            compType,
+            compLabel,
+            tab.langKeyId,
+            tab.langKey
+          );
+        }
+      });
+    }
+
+    // 10. 액션 버튼
+    if (config?.actions?.actions && Array.isArray(config.actions.actions)) {
+      config.actions.actions.forEach((action: any, index: number) => {
+        if (action.label && typeof action.label === "string") {
+          addLabel(
+            `${comp.id}_action_${index}`,
+            action.label,
+            "action",
+            compType,
+            compLabel,
+            action.langKeyId,
+            action.langKey
+          );
+        }
+      });
+    }
+
+    // 자식 컴포넌트 재귀 탐색
+    if (anyComp.children && Array.isArray(anyComp.children)) {
+      anyComp.children.forEach((child: ComponentData) => {
+        extractFromComponent(child, compType, compLabel);
+      });
+    }
+  };
+
+  components.forEach((comp) => extractFromComponent(comp));
+  return labels;
+}
+
+/**
+ * 컴포넌트에서 테이블명 추출
+ * @param components 컴포넌트 배열
+ * @returns 테이블명 Set
+ */
+export function extractTableNames(components: ComponentData[]): Set<string> {
+  const tableNames = new Set<string>();
+  
+  const extractTableName = (comp: any) => {
+    const config = comp.componentConfig;
+    
+    // 1. 컴포넌트 직접 tableName
+    if (comp.tableName) tableNames.add(comp.tableName);
+    
+    // 2. componentConfig 직접 tableName
+    if (config?.tableName) tableNames.add(config.tableName);
+    
+    // 3. 테이블 리스트 컴포넌트 - selectedTable (주요!)
+    if (config?.selectedTable) tableNames.add(config.selectedTable);
+    
+    // 4. 테이블 리스트 컴포넌트 - table 속성
+    if (config?.table) tableNames.add(config.table);
+    
+    // 5. 분할 패널의 leftPanel/rightPanel
+    if (config?.leftPanel?.tableName) tableNames.add(config.leftPanel.tableName);
+    if (config?.rightPanel?.tableName) tableNames.add(config.rightPanel.tableName);
+    if (config?.leftPanel?.table) tableNames.add(config.leftPanel.table);
+    if (config?.rightPanel?.table) tableNames.add(config.rightPanel.table);
+    if (config?.leftPanel?.selectedTable) tableNames.add(config.leftPanel.selectedTable);
+    if (config?.rightPanel?.selectedTable) tableNames.add(config.rightPanel.selectedTable);
+    
+    // 6. 검색 필터의 tableName
+    if (config?.filter?.tableName) tableNames.add(config.filter.tableName);
+    
+    // 7. properties 안의 tableName
+    if (comp.properties?.tableName) tableNames.add(comp.properties.tableName);
+    if (comp.properties?.selectedTable) tableNames.add(comp.properties.selectedTable);
+    
+    // 자식 컴포넌트 탐색
+    if (comp.children && Array.isArray(comp.children)) {
+      comp.children.forEach(extractTableName);
+    }
+  };
+  
+  components.forEach(extractTableName);
+  return tableNames;
+}
+
+/**
+ * 다국어 키 매핑 결과를 컴포넌트에 적용
+ * @param components 원본 컴포넌트 배열
+ * @param mappings 다국어 키 매핑 결과 [{componentId, keyId, langKey}]
+ * @returns 업데이트된 컴포넌트 배열
+ */
+export function applyMultilangMappings(
+  components: ComponentData[],
+  mappings: Array<{ componentId: string; keyId: number; langKey: string }>
+): ComponentData[] {
+  // 매핑을 빠르게 찾기 위한 맵 생성
+  const mappingMap = new Map(mappings.map((m) => [m.componentId, m]));
+
+  const updateComponent = (comp: ComponentData): ComponentData => {
+    const anyComp = comp as any;
+    const config = anyComp.componentConfig;
+    let updated = { ...comp } as any;
+
+    // 기본 컴포넌트 라벨 매핑 확인
+    const labelMapping = mappingMap.get(comp.id);
+    if (labelMapping) {
+      updated.langKeyId = labelMapping.keyId;
+      updated.langKey = labelMapping.langKey;
+    }
+
+    // 버튼 텍스트 매핑 (componentId_button 형식으로 조회)
+    const buttonMapping = mappingMap.get(`${comp.id}_button`);
+    if (buttonMapping && config?.text) {
+      updated.componentConfig = {
+        ...updated.componentConfig,
+        langKeyId: buttonMapping.keyId,
+        langKey: buttonMapping.langKey,
+      };
+    }
+
+    // 컬럼 매핑
+    if (config?.columns && Array.isArray(config.columns)) {
+      const updatedColumns = config.columns.map((col: any, index: number) => {
+        const colMapping = mappingMap.get(`${comp.id}_col_${index}`);
+        if (colMapping) {
+          return { ...col, langKeyId: colMapping.keyId, langKey: colMapping.langKey };
+        }
+        return col;
+      });
+      updated.componentConfig = { ...config, columns: updatedColumns };
+    }
+
+    // 분할 패널 좌측 제목 매핑
+    const leftTitleMapping = mappingMap.get(`${comp.id}_left_title`);
+    if (leftTitleMapping && config?.leftPanel?.title) {
+      updated.componentConfig = {
+        ...updated.componentConfig,
+        leftPanel: {
+          ...updated.componentConfig?.leftPanel,
+          langKeyId: leftTitleMapping.keyId,
+          langKey: leftTitleMapping.langKey,
+        },
+      };
+    }
+
+    // 분할 패널 우측 제목 매핑
+    const rightTitleMapping = mappingMap.get(`${comp.id}_right_title`);
+    if (rightTitleMapping && config?.rightPanel?.title) {
+      updated.componentConfig = {
+        ...updated.componentConfig,
+        rightPanel: {
+          ...updated.componentConfig?.rightPanel,
+          langKeyId: rightTitleMapping.keyId,
+          langKey: rightTitleMapping.langKey,
+        },
+      };
+    }
+
+    // 분할 패널 좌측 컬럼 매핑 (이미 업데이트된 leftPanel 사용)
+    const currentLeftPanel = updated.componentConfig?.leftPanel || config?.leftPanel;
+    if (currentLeftPanel?.columns && Array.isArray(currentLeftPanel.columns)) {
+      const updatedLeftColumns = currentLeftPanel.columns.map((col: any, index: number) => {
+        const colMapping = mappingMap.get(`${comp.id}_left_col_${index}`);
+        if (colMapping) {
+          return { ...col, langKeyId: colMapping.keyId, langKey: colMapping.langKey };
+        }
+        return col;
+      });
+      updated.componentConfig = {
+        ...updated.componentConfig,
+        leftPanel: { ...currentLeftPanel, columns: updatedLeftColumns },
+      };
+    }
+
+    // 분할 패널 우측 컬럼 매핑 (이미 업데이트된 rightPanel 사용)
+    const currentRightPanel = updated.componentConfig?.rightPanel || config?.rightPanel;
+    if (currentRightPanel?.columns && Array.isArray(currentRightPanel.columns)) {
+      const updatedRightColumns = currentRightPanel.columns.map((col: any, index: number) => {
+        const colMapping = mappingMap.get(`${comp.id}_right_col_${index}`);
+        if (colMapping) {
+          return { ...col, langKeyId: colMapping.keyId, langKey: colMapping.langKey };
+        }
+        return col;
+      });
+      updated.componentConfig = {
+        ...updated.componentConfig,
+        rightPanel: { ...currentRightPanel, columns: updatedRightColumns },
+      };
+    }
+
+    // 필터 매핑
+    if (config?.filter?.filters && Array.isArray(config.filter.filters)) {
+      const updatedFilters = config.filter.filters.map((filter: any, index: number) => {
+        const filterMapping = mappingMap.get(`${comp.id}_filter_${index}`);
+        if (filterMapping) {
+          return { ...filter, langKeyId: filterMapping.keyId, langKey: filterMapping.langKey };
+        }
+        return filter;
+      });
+      updated.componentConfig = {
+        ...updated.componentConfig,
+        filter: { ...config.filter, filters: updatedFilters },
+      };
+    }
+
+    // 폼 필드 매핑
+    if (config?.fields && Array.isArray(config.fields)) {
+      const updatedFields = config.fields.map((field: any, index: number) => {
+        const fieldMapping = mappingMap.get(`${comp.id}_field_${index}`);
+        if (fieldMapping) {
+          return { ...field, langKeyId: fieldMapping.keyId, langKey: fieldMapping.langKey };
+        }
+        return field;
+      });
+      updated.componentConfig = { ...updated.componentConfig, fields: updatedFields };
+    }
+
+    // 탭 매핑
+    if (config?.tabs && Array.isArray(config.tabs)) {
+      const updatedTabs = config.tabs.map((tab: any, index: number) => {
+        const tabMapping = mappingMap.get(`${comp.id}_tab_${index}`);
+        if (tabMapping) {
+          return { ...tab, langKeyId: tabMapping.keyId, langKey: tabMapping.langKey };
+        }
+        return tab;
+      });
+      updated.componentConfig = { ...updated.componentConfig, tabs: updatedTabs };
+    }
+
+    // 추가 탭 (additionalTabs) 매핑 - rightPanel.additionalTabs 또는 additionalTabs 확인
+    const currentRightPanelForAddTabs = updated.componentConfig?.rightPanel || config?.rightPanel;
+    const configAdditionalTabs = currentRightPanelForAddTabs?.additionalTabs || config?.additionalTabs;
+    if (configAdditionalTabs && Array.isArray(configAdditionalTabs)) {
+      const updatedAdditionalTabs = configAdditionalTabs.map((tab: any, tabIndex: number) => {
+        let updatedTab = { ...tab };
+
+        // 탭 라벨 매핑
+        const labelMapping = mappingMap.get(`${comp.id}_addtab_${tabIndex}_label`);
+        if (labelMapping) {
+          updatedTab.langKeyId = labelMapping.keyId;
+          updatedTab.langKey = labelMapping.langKey;
+        }
+
+        // 탭 제목 매핑
+        const titleMapping = mappingMap.get(`${comp.id}_addtab_${tabIndex}_title`);
+        if (titleMapping) {
+          updatedTab.titleLangKeyId = titleMapping.keyId;
+          updatedTab.titleLangKey = titleMapping.langKey;
+        }
+
+        // 탭 컬럼 매핑
+        if (tab.columns && Array.isArray(tab.columns)) {
+          updatedTab.columns = tab.columns.map((col: any, colIndex: number) => {
+            const colMapping = mappingMap.get(`${comp.id}_addtab_${tabIndex}_col_${colIndex}`);
+            if (colMapping) {
+              return { ...col, langKeyId: colMapping.keyId, langKey: colMapping.langKey };
+            }
+            return col;
+          });
+        }
+
+        return updatedTab;
+      });
+      
+      // rightPanel.additionalTabs에 저장하거나 additionalTabs에 저장
+      if (currentRightPanelForAddTabs?.additionalTabs) {
+        updated.componentConfig = {
+          ...updated.componentConfig,
+          rightPanel: { ...currentRightPanelForAddTabs, additionalTabs: updatedAdditionalTabs },
+        };
+      } else {
+        updated.componentConfig = { ...updated.componentConfig, additionalTabs: updatedAdditionalTabs };
+      }
+    }
+
+    // 액션 버튼 매핑
+    if (config?.actions?.actions && Array.isArray(config.actions.actions)) {
+      const updatedActions = config.actions.actions.map((action: any, index: number) => {
+        const actionMapping = mappingMap.get(`${comp.id}_action_${index}`);
+        if (actionMapping) {
+          return { ...action, langKeyId: actionMapping.keyId, langKey: actionMapping.langKey };
+        }
+        return action;
+      });
+      updated.componentConfig = {
+        ...updated.componentConfig,
+        actions: { ...config.actions, actions: updatedActions },
+      };
+    }
+
+    // 자식 컴포넌트 재귀 처리
+    if (anyComp.children && Array.isArray(anyComp.children)) {
+      updated.children = anyComp.children.map((child: ComponentData) => updateComponent(child));
+    }
+
+    return updated;
+  };
+
+  return components.map(updateComponent);
+}
+
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 32236b05..1558865e 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -60,6 +60,7 @@
         "date-fns": "^4.1.0",
         "docx": "^9.5.1",
         "docx-preview": "^0.3.6",
+        "exceljs": "^4.4.0",
         "html-to-image": "^1.11.13",
         "html2canvas": "^1.4.1",
         "isomorphic-dompurify": "^2.28.0",
@@ -77,6 +78,7 @@
         "react-dom": "19.1.0",
         "react-hook-form": "^7.62.0",
         "react-hot-toast": "^2.6.0",
+        "react-is": "^18.3.1",
         "react-leaflet": "^5.0.0",
         "react-resizable-panels": "^3.0.6",
         "react-webcam": "^7.2.0",
@@ -547,6 +549,47 @@
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       }
     },
+    "node_modules/@fast-csv/format": {
+      "version": "4.3.5",
+      "resolved": "https://registry.npmjs.org/@fast-csv/format/-/format-4.3.5.tgz",
+      "integrity": "sha512-8iRn6QF3I8Ak78lNAa+Gdl5MJJBM5vRHivFtMRUWINdevNo00K7OXxS2PshawLKTejVwieIlPmK5YlLu6w4u8A==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "^14.0.1",
+        "lodash.escaperegexp": "^4.1.2",
+        "lodash.isboolean": "^3.0.3",
+        "lodash.isequal": "^4.5.0",
+        "lodash.isfunction": "^3.0.9",
+        "lodash.isnil": "^4.0.0"
+      }
+    },
+    "node_modules/@fast-csv/format/node_modules/@types/node": {
+      "version": "14.18.63",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-14.18.63.tgz",
+      "integrity": "sha512-fAtCfv4jJg+ExtXhvCkCqUKZ+4ok/JQk01qDKhL5BDDoS3AxKXhV5/MAVUZyQnSEd2GT92fkgZl0pz0Q0AzcIQ==",
+      "license": "MIT"
+    },
+    "node_modules/@fast-csv/parse": {
+      "version": "4.3.6",
+      "resolved": "https://registry.npmjs.org/@fast-csv/parse/-/parse-4.3.6.tgz",
+      "integrity": "sha512-uRsLYksqpbDmWaSmzvJcuApSEe38+6NQZBUsuAyMZKqHxH0g1wcJgsKUvN3WC8tewaqFjBMMGrkHmC+T7k8LvA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "^14.0.1",
+        "lodash.escaperegexp": "^4.1.2",
+        "lodash.groupby": "^4.6.0",
+        "lodash.isfunction": "^3.0.9",
+        "lodash.isnil": "^4.0.0",
+        "lodash.isundefined": "^3.0.1",
+        "lodash.uniq": "^4.5.0"
+      }
+    },
+    "node_modules/@fast-csv/parse/node_modules/@types/node": {
+      "version": "14.18.63",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-14.18.63.tgz",
+      "integrity": "sha512-fAtCfv4jJg+ExtXhvCkCqUKZ+4ok/JQk01qDKhL5BDDoS3AxKXhV5/MAVUZyQnSEd2GT92fkgZl0pz0Q0AzcIQ==",
+      "license": "MIT"
+    },
     "node_modules/@floating-ui/core": {
       "version": "1.7.3",
       "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.7.3.tgz",
@@ -7005,6 +7048,59 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
+    "node_modules/archiver": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/archiver/-/archiver-5.3.2.tgz",
+      "integrity": "sha512-+25nxyyznAXF7Nef3y0EbBeqmGZgeN/BxHX29Rs39djAfaFalmQ89SE6CWyDCHzGL0yt/ycBtNOmGTW0FyGWNw==",
+      "license": "MIT",
+      "dependencies": {
+        "archiver-utils": "^2.1.0",
+        "async": "^3.2.4",
+        "buffer-crc32": "^0.2.1",
+        "readable-stream": "^3.6.0",
+        "readdir-glob": "^1.1.2",
+        "tar-stream": "^2.2.0",
+        "zip-stream": "^4.1.0"
+      },
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/archiver-utils": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/archiver-utils/-/archiver-utils-2.1.0.tgz",
+      "integrity": "sha512-bEL/yUb/fNNiNTuUz979Z0Yg5L+LzLxGJz8x79lYmR54fmTIb6ob/hNQgkQnIUDWIFjZVQwl9Xs356I6BAMHfw==",
+      "license": "MIT",
+      "dependencies": {
+        "glob": "^7.1.4",
+        "graceful-fs": "^4.2.0",
+        "lazystream": "^1.0.0",
+        "lodash.defaults": "^4.2.0",
+        "lodash.difference": "^4.5.0",
+        "lodash.flatten": "^4.4.0",
+        "lodash.isplainobject": "^4.0.6",
+        "lodash.union": "^4.6.0",
+        "normalize-path": "^3.0.0",
+        "readable-stream": "^2.0.0"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/archiver/node_modules/readable-stream": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
+      "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
+      "license": "MIT",
+      "dependencies": {
+        "inherits": "^2.0.3",
+        "string_decoder": "^1.1.1",
+        "util-deprecate": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/argparse": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
@@ -7200,6 +7296,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/async": {
+      "version": "3.2.6",
+      "resolved": "https://registry.npmjs.org/async/-/async-3.2.6.tgz",
+      "integrity": "sha512-htCUDlxyyCLMgaM3xXg0C0LW2xqfuQ6p05pCEIsXuyQ+a1koYKTuBMzRNwmybfLgvJDMd0r1LTn4+E0Ti6C2AA==",
+      "license": "MIT"
+    },
     "node_modules/async-function": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/async-function/-/async-function-1.0.0.tgz",
@@ -7267,7 +7369,6 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/base64-arraybuffer": {
@@ -7308,6 +7409,15 @@
         "require-from-string": "^2.0.2"
       }
     },
+    "node_modules/big-integer": {
+      "version": "1.6.52",
+      "resolved": "https://registry.npmjs.org/big-integer/-/big-integer-1.6.52.tgz",
+      "integrity": "sha512-QxD8cf2eVqJOOz63z6JIN9BzvVs/dlySa5HGSBH5xtR8dPteIRQnBxxKqkNTiT6jbDTF6jAfrd4oMcND9RGbQg==",
+      "license": "Unlicense",
+      "engines": {
+        "node": ">=0.6"
+      }
+    },
     "node_modules/bignumber.js": {
       "version": "9.3.1",
       "resolved": "https://registry.npmjs.org/bignumber.js/-/bignumber.js-9.3.1.tgz",
@@ -7317,6 +7427,68 @@
         "node": "*"
       }
     },
+    "node_modules/binary": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/binary/-/binary-0.3.0.tgz",
+      "integrity": "sha512-D4H1y5KYwpJgK8wk1Cue5LLPgmwHKYSChkbspQg5JtVuR5ulGckxfR62H3AE9UDkdMC8yyXlqYihuz3Aqg2XZg==",
+      "license": "MIT",
+      "dependencies": {
+        "buffers": "~0.1.1",
+        "chainsaw": "~0.1.0"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/bl": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/bl/-/bl-4.1.0.tgz",
+      "integrity": "sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==",
+      "license": "MIT",
+      "dependencies": {
+        "buffer": "^5.5.0",
+        "inherits": "^2.0.4",
+        "readable-stream": "^3.4.0"
+      }
+    },
+    "node_modules/bl/node_modules/buffer": {
+      "version": "5.7.1",
+      "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz",
+      "integrity": "sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "base64-js": "^1.3.1",
+        "ieee754": "^1.1.13"
+      }
+    },
+    "node_modules/bl/node_modules/readable-stream": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
+      "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
+      "license": "MIT",
+      "dependencies": {
+        "inherits": "^2.0.3",
+        "string_decoder": "^1.1.1",
+        "util-deprecate": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/bluebird": {
       "version": "3.4.7",
       "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.4.7.tgz",
@@ -7327,7 +7499,6 @@
       "version": "1.1.12",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
       "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "balanced-match": "^1.0.0",
@@ -7371,6 +7542,32 @@
         "ieee754": "^1.2.1"
       }
     },
+    "node_modules/buffer-crc32": {
+      "version": "0.2.13",
+      "resolved": "https://registry.npmjs.org/buffer-crc32/-/buffer-crc32-0.2.13.tgz",
+      "integrity": "sha512-VO9Ht/+p3SN7SKWqcrgEzjGbRSJYTx+Q1pTQC0wrWqHx0vpJraQ6GtHx8tvcg1rlK1byhU5gccxgOgj7B0TDkQ==",
+      "license": "MIT",
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/buffer-indexof-polyfill": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/buffer-indexof-polyfill/-/buffer-indexof-polyfill-1.0.2.tgz",
+      "integrity": "sha512-I7wzHwA3t1/lwXQh+A5PbNvJxgfo5r3xulgpYDB5zckTu/Z9oUK9biouBKQUjEqzaz3HnAT6TYoovmE+GqSf7A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/buffers": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/buffers/-/buffers-0.1.1.tgz",
+      "integrity": "sha512-9q/rDEGSb/Qsvv2qvzIzdluL5k7AaJOTrw23z9reQthrbF7is4CtlT0DXyO1oei2DCp4uojjzQ7igaSHp1kAEQ==",
+      "engines": {
+        "node": ">=0.2.0"
+      }
+    },
     "node_modules/c12": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/c12/-/c12-3.1.0.tgz",
@@ -7543,6 +7740,18 @@
         "node": ">=0.8"
       }
     },
+    "node_modules/chainsaw": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/chainsaw/-/chainsaw-0.1.0.tgz",
+      "integrity": "sha512-75kWfWt6MEKNC8xYXIdRpDehRYY/tNSgwKaJq+dbbDcxORuVrrQ+SEHoWsniVn9XPYfP4gmdWIeDk/4YNp1rNQ==",
+      "license": "MIT/X11",
+      "dependencies": {
+        "traverse": ">=0.3.0 <0.4"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/chalk": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
@@ -7707,11 +7916,39 @@
         "node": ">= 10"
       }
     },
+    "node_modules/compress-commons": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/compress-commons/-/compress-commons-4.1.2.tgz",
+      "integrity": "sha512-D3uMHtGc/fcO1Gt1/L7i1e33VOvD4A9hfQLP+6ewd+BvG/gQ84Yh4oftEhAdjSMgBgwGL+jsppT7JYNpo6MHHg==",
+      "license": "MIT",
+      "dependencies": {
+        "buffer-crc32": "^0.2.13",
+        "crc32-stream": "^4.0.2",
+        "normalize-path": "^3.0.0",
+        "readable-stream": "^3.6.0"
+      },
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/compress-commons/node_modules/readable-stream": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
+      "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
+      "license": "MIT",
+      "dependencies": {
+        "inherits": "^2.0.3",
+        "string_decoder": "^1.1.1",
+        "util-deprecate": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
       "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/concaveman": {
@@ -7773,6 +8010,33 @@
         "node": ">=0.8"
       }
     },
+    "node_modules/crc32-stream": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/crc32-stream/-/crc32-stream-4.0.3.tgz",
+      "integrity": "sha512-NT7w2JVU7DFroFdYkeq8cywxrgjPHWkdX1wjpRQXPX5Asews3tA+Ght6lddQO5Mkumffp3X7GEqku3epj2toIw==",
+      "license": "MIT",
+      "dependencies": {
+        "crc-32": "^1.2.0",
+        "readable-stream": "^3.4.0"
+      },
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/crc32-stream/node_modules/readable-stream": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
+      "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
+      "license": "MIT",
+      "dependencies": {
+        "inherits": "^2.0.3",
+        "string_decoder": "^1.1.1",
+        "util-deprecate": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/crelt": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/crelt/-/crelt-1.0.6.tgz",
@@ -8367,6 +8631,12 @@
       "integrity": "sha512-hTIP/z+t+qKwBDcmmsnmjWTduxCg+5KfdqWQvb2X/8C9+knYY6epN/pfxdDuyVlSVeFz0sM5eEfwIUQ70U4ckg==",
       "license": "MIT"
     },
+    "node_modules/dayjs": {
+      "version": "1.11.19",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.19.tgz",
+      "integrity": "sha512-t5EcLVS6QPBNqM2z8fakk/NKel+Xzshgt8FFKAn+qwlD1pzZWxh0nVCrvFK7ZDb6XucZeF9z8C7CBWTRIVApAw==",
+      "license": "MIT"
+    },
     "node_modules/debug": {
       "version": "4.4.3",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
@@ -8649,6 +8919,15 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/duplexer2": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/duplexer2/-/duplexer2-0.1.4.tgz",
+      "integrity": "sha512-asLFVfWWtJ90ZyOUHMqk7/S2w2guQKxUI2itj3d92ADHhxUSbCMGi1f1cBcJ7xM1To+pE/Khbwo1yuNbMEPKeA==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "readable-stream": "^2.0.2"
+      }
+    },
     "node_modules/earcut": {
       "version": "2.2.4",
       "resolved": "https://registry.npmjs.org/earcut/-/earcut-2.2.4.tgz",
@@ -8683,6 +8962,15 @@
         "node": ">=14"
       }
     },
+    "node_modules/end-of-stream": {
+      "version": "1.4.5",
+      "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.5.tgz",
+      "integrity": "sha512-ooEGc6HP26xXq/N+GCGOT0JKCLDGrq2bQUZrQ7gyrJiZANJ/8YDTxTpQBXGMn+WbIQXNVpyWymm7KYVICQnyOg==",
+      "license": "MIT",
+      "dependencies": {
+        "once": "^1.4.0"
+      }
+    },
     "node_modules/enhanced-resolve": {
       "version": "5.18.3",
       "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.18.3.tgz",
@@ -9385,6 +9673,61 @@
       "integrity": "sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA==",
       "license": "MIT"
     },
+    "node_modules/exceljs": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/exceljs/-/exceljs-4.4.0.tgz",
+      "integrity": "sha512-XctvKaEMaj1Ii9oDOqbW/6e1gXknSY4g/aLCDicOXqBE4M0nRWkUu0PTp++UPNzoFY12BNHMfs/VadKIS6llvg==",
+      "license": "MIT",
+      "dependencies": {
+        "archiver": "^5.0.0",
+        "dayjs": "^1.8.34",
+        "fast-csv": "^4.3.1",
+        "jszip": "^3.10.1",
+        "readable-stream": "^3.6.0",
+        "saxes": "^5.0.1",
+        "tmp": "^0.2.0",
+        "unzipper": "^0.10.11",
+        "uuid": "^8.3.0"
+      },
+      "engines": {
+        "node": ">=8.3.0"
+      }
+    },
+    "node_modules/exceljs/node_modules/readable-stream": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
+      "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
+      "license": "MIT",
+      "dependencies": {
+        "inherits": "^2.0.3",
+        "string_decoder": "^1.1.1",
+        "util-deprecate": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/exceljs/node_modules/saxes": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/saxes/-/saxes-5.0.1.tgz",
+      "integrity": "sha512-5LBh1Tls8c9xgGjw3QrMwETmTMVk0oFgvrFSvWx62llR2hcEInrKNZ2GZCCuuy2lvWrdl5jhbpeqc5hRYKFOcw==",
+      "license": "ISC",
+      "dependencies": {
+        "xmlchars": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/exceljs/node_modules/uuid": {
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
+      "license": "MIT",
+      "bin": {
+        "uuid": "dist/bin/uuid"
+      }
+    },
     "node_modules/exit-on-epipe": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/exit-on-epipe/-/exit-on-epipe-1.0.1.tgz",
@@ -9424,6 +9767,19 @@
         "node": ">=8.0.0"
       }
     },
+    "node_modules/fast-csv": {
+      "version": "4.3.6",
+      "resolved": "https://registry.npmjs.org/fast-csv/-/fast-csv-4.3.6.tgz",
+      "integrity": "sha512-2RNSpuwwsJGP0frGsOmTb9oUF+VkFSM4SyLTDgwf2ciHWTarN0lQTC+F2f/t5J9QjW+c65VFIAAu85GsvMIusw==",
+      "license": "MIT",
+      "dependencies": {
+        "@fast-csv/format": "4.3.5",
+        "@fast-csv/parse": "4.3.6"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -9633,6 +9989,34 @@
         "node": ">=0.8"
       }
     },
+    "node_modules/fs-constants": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fs-constants/-/fs-constants-1.0.0.tgz",
+      "integrity": "sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==",
+      "license": "MIT"
+    },
+    "node_modules/fs.realpath": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
+      "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
+      "license": "ISC"
+    },
+    "node_modules/fstream": {
+      "version": "1.0.12",
+      "resolved": "https://registry.npmjs.org/fstream/-/fstream-1.0.12.tgz",
+      "integrity": "sha512-WvJ193OHa0GHPEL+AycEJgxvBEwyfRkN1vhjca23OaPVMCaLCXTd5qAu82AjTcgP1UJmytkOKb63Ypde7raDIg==",
+      "deprecated": "This package is no longer supported.",
+      "license": "ISC",
+      "dependencies": {
+        "graceful-fs": "^4.1.2",
+        "inherits": "~2.0.0",
+        "mkdirp": ">=0.5 0",
+        "rimraf": "2"
+      },
+      "engines": {
+        "node": ">=0.6"
+      }
+    },
     "node_modules/function-bind": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
@@ -9820,6 +10204,27 @@
         "giget": "dist/cli.mjs"
       }
     },
+    "node_modules/glob": {
+      "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+      "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+      "deprecated": "Glob versions prior to v9 are no longer supported",
+      "license": "ISC",
+      "dependencies": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^3.1.1",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
+      },
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
     "node_modules/glob-parent": {
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
@@ -9894,7 +10299,6 @@
       "version": "4.2.11",
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
       "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
-      "dev": true,
       "license": "ISC"
     },
     "node_modules/graphemer": {
@@ -10169,6 +10573,17 @@
         "node": ">=0.8.19"
       }
     },
+    "node_modules/inflight": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
+      "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==",
+      "deprecated": "This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.",
+      "license": "ISC",
+      "dependencies": {
+        "once": "^1.3.0",
+        "wrappy": "1"
+      }
+    },
     "node_modules/inherits": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
@@ -10891,6 +11306,18 @@
         "node": ">=0.10"
       }
     },
+    "node_modules/lazystream": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/lazystream/-/lazystream-1.0.1.tgz",
+      "integrity": "sha512-b94GiNHQNy6JNTrt5w6zNyffMrNkXZb3KTkCZJb2V1xaEGCk093vkZ2jk3tpaeP33/OiXC+WvK9AxUebnf5nbw==",
+      "license": "MIT",
+      "dependencies": {
+        "readable-stream": "^2.0.5"
+      },
+      "engines": {
+        "node": ">= 0.6.3"
+      }
+    },
     "node_modules/leaflet": {
       "version": "1.9.4",
       "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.4.tgz",
@@ -11191,6 +11618,12 @@
         "uc.micro": "^2.0.0"
       }
     },
+    "node_modules/listenercount": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/listenercount/-/listenercount-1.0.1.tgz",
+      "integrity": "sha512-3mk/Zag0+IJxeDrxSgaDPy4zZ3w05PRZeJNnlWhzFz5OkX49J4krc+A8X2d2M69vGMBEX0uyl8M+W+8gH+kBqQ==",
+      "license": "ISC"
+    },
     "node_modules/locate-path": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
@@ -11207,6 +11640,73 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/lodash.defaults": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/lodash.defaults/-/lodash.defaults-4.2.0.tgz",
+      "integrity": "sha512-qjxPLHd3r5DnsdGacqOMU6pb/avJzdh9tFX2ymgoZE27BmjXrNy/y4LoaiTeAb+O3gL8AfpJGtqfX/ae2leYYQ==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.difference": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.difference/-/lodash.difference-4.5.0.tgz",
+      "integrity": "sha512-dS2j+W26TQ7taQBGN8Lbbq04ssV3emRw4NY58WErlTO29pIqS0HmoT5aJ9+TUQ1N3G+JOZSji4eugsWwGp9yPA==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.escaperegexp": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/lodash.escaperegexp/-/lodash.escaperegexp-4.1.2.tgz",
+      "integrity": "sha512-TM9YBvyC84ZxE3rgfefxUWiQKLilstD6k7PTGt6wfbtXF8ixIJLOL3VYyV/z+ZiPLsVxAsKAFVwWlWeb2Y8Yyw==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.flatten": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/lodash.flatten/-/lodash.flatten-4.4.0.tgz",
+      "integrity": "sha512-C5N2Z3DgnnKr0LOpv/hKCgKdb7ZZwafIrsesve6lmzvZIRZRGaZ/l6Q8+2W7NaT+ZwO3fFlSCzCzrDCFdJfZ4g==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.groupby": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/lodash.groupby/-/lodash.groupby-4.6.0.tgz",
+      "integrity": "sha512-5dcWxm23+VAoz+awKmBaiBvzox8+RqMgFhi7UvX9DHZr2HdxHXM/Wrf8cfKpsW37RNrvtPn6hSwNqurSILbmJw==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.isboolean": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/lodash.isboolean/-/lodash.isboolean-3.0.3.tgz",
+      "integrity": "sha512-Bz5mupy2SVbPHURB98VAcw+aHh4vRV5IPNhILUCsOzRmsTmSQ17jIuqopAentWoehktxGd9e/hbIXq980/1QJg==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.isequal": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz",
+      "integrity": "sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==",
+      "deprecated": "This package is deprecated. Use require('node:util').isDeepStrictEqual instead.",
+      "license": "MIT"
+    },
+    "node_modules/lodash.isfunction": {
+      "version": "3.0.9",
+      "resolved": "https://registry.npmjs.org/lodash.isfunction/-/lodash.isfunction-3.0.9.tgz",
+      "integrity": "sha512-AirXNj15uRIMMPihnkInB4i3NHeb4iBtNg9WRWuK2o31S+ePwwNmDPaTL3o7dTJ+VXNZim7rFs4rxN4YU1oUJw==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.isnil": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/lodash.isnil/-/lodash.isnil-4.0.0.tgz",
+      "integrity": "sha512-up2Mzq3545mwVnMhTDMdfoG1OurpA/s5t88JmQX809eH3C8491iu2sfKhTfhQtKY78oPNhiaHJUpT/dUDAAtng==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.isplainobject": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
+      "integrity": "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.isundefined": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/lodash.isundefined/-/lodash.isundefined-3.0.1.tgz",
+      "integrity": "sha512-MXB1is3s899/cD8jheYYE2V9qTHwKvt+npCwpD+1Sxm3Q3cECXCiYHjeHWXNwr6Q0SOBPrYUDxendrO6goVTEA==",
+      "license": "MIT"
+    },
     "node_modules/lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
@@ -11214,6 +11714,18 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/lodash.union": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/lodash.union/-/lodash.union-4.6.0.tgz",
+      "integrity": "sha512-c4pB2CdGrGdjMKYLA+XiRDO7Y0PRQbm/Gzg8qMj+QH+pFVAoTp5sBpO0odL3FjoPCGjK96p6qsP+yQoiLoOBcw==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.uniq": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz",
+      "integrity": "sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ==",
+      "license": "MIT"
+    },
     "node_modules/loose-envify": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
@@ -11435,7 +11947,6 @@
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
       "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
-      "dev": true,
       "license": "ISC",
       "dependencies": {
         "brace-expansion": "^1.1.7"
@@ -11448,12 +11959,23 @@
       "version": "1.2.8",
       "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
       "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
-      "dev": true,
       "license": "MIT",
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/mkdirp": {
+      "version": "0.5.6",
+      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz",
+      "integrity": "sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==",
+      "license": "MIT",
+      "dependencies": {
+        "minimist": "^1.2.6"
+      },
+      "bin": {
+        "mkdirp": "bin/cmd.js"
+      }
+    },
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
@@ -11606,6 +12128,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/normalize-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/nypm": {
       "version": "0.6.2",
       "resolved": "https://registry.npmjs.org/nypm/-/nypm-0.6.2.tgz",
@@ -11756,6 +12287,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/once": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
+      "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
+      "license": "ISC",
+      "dependencies": {
+        "wrappy": "1"
+      }
+    },
     "node_modules/option": {
       "version": "0.2.4",
       "resolved": "https://registry.npmjs.org/option/-/option-0.2.4.tgz",
@@ -12703,11 +13243,10 @@
       }
     },
     "node_modules/react-is": {
-      "version": "19.2.1",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-19.2.1.tgz",
-      "integrity": "sha512-L7BnWgRbMwzMAubQcS7sXdPdNLmKlucPlopgAzx7FtYbksWZgEWiuYM5x9T6UqS2Ne0rsgQTq5kY2SGqpzUkYA==",
-      "license": "MIT",
-      "peer": true
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
+      "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==",
+      "license": "MIT"
     },
     "node_modules/react-leaflet": {
       "version": "5.0.0",
@@ -12899,6 +13438,36 @@
         "util-deprecate": "~1.0.1"
       }
     },
+    "node_modules/readdir-glob": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/readdir-glob/-/readdir-glob-1.1.3.tgz",
+      "integrity": "sha512-v05I2k7xN8zXvPD9N+z/uhXPaj0sUFCe2rcWZIpBsqxfP7xXFQ0tipAd/wjj1YxWyWtUS5IDJpOG82JKt2EAVA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "minimatch": "^5.1.0"
+      }
+    },
+    "node_modules/readdir-glob/node_modules/brace-expansion": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz",
+      "integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==",
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/readdir-glob/node_modules/minimatch": {
+      "version": "5.1.6",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.6.tgz",
+      "integrity": "sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==",
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/readdirp": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz",
@@ -12914,9 +13483,9 @@
       }
     },
     "node_modules/recharts": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/recharts/-/recharts-3.3.0.tgz",
-      "integrity": "sha512-Vi0qmTB0iz1+/Cz9o5B7irVyUjX2ynvEgImbgMt/3sKRREcUM07QiYjS1QpAVrkmVlXqy5gykq4nGWMz9AS4Rg==",
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/recharts/-/recharts-3.2.1.tgz",
+      "integrity": "sha512-0JKwHRiFZdmLq/6nmilxEZl3pqb4T+aKkOkOi/ZISRZwfBhVMgInxzlYU9D4KnCH3KINScLy68m/OvMXoYGZUw==",
       "license": "MIT",
       "dependencies": {
         "@reduxjs/toolkit": "1.x.x || 2.x.x",
@@ -13158,6 +13727,19 @@
         "node": ">= 0.8.15"
       }
     },
+    "node_modules/rimraf": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
+      "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==",
+      "deprecated": "Rimraf versions prior to v4 are no longer supported",
+      "license": "ISC",
+      "dependencies": {
+        "glob": "^7.1.3"
+      },
+      "bin": {
+        "rimraf": "bin.js"
+      }
+    },
     "node_modules/robust-predicates": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/robust-predicates/-/robust-predicates-2.0.4.tgz",
@@ -13963,6 +14545,36 @@
         "url": "https://opencollective.com/webpack"
       }
     },
+    "node_modules/tar-stream": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-2.2.0.tgz",
+      "integrity": "sha512-ujeqbceABgwMZxEJnk2HDY2DlnUZ+9oEcb1KzTVfYHio0UE6dG71n60d8D2I4qNvleWrrXpmjpt7vZeF1LnMZQ==",
+      "license": "MIT",
+      "dependencies": {
+        "bl": "^4.0.3",
+        "end-of-stream": "^1.4.1",
+        "fs-constants": "^1.0.0",
+        "inherits": "^2.0.3",
+        "readable-stream": "^3.1.1"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/tar-stream/node_modules/readable-stream": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
+      "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
+      "license": "MIT",
+      "dependencies": {
+        "inherits": "^2.0.3",
+        "string_decoder": "^1.1.1",
+        "util-deprecate": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/text-segmentation": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/text-segmentation/-/text-segmentation-1.0.3.tgz",
@@ -14106,6 +14718,15 @@
       "integrity": "sha512-DieYoGrP78PWKsrXr8MZwtQ7GLCUeLxihtjC1jZsW1DnvSMdKPitJSe8OSYDM2u5H6g3kWJZpePqkp43TfLh0g==",
       "license": "MIT"
     },
+    "node_modules/tmp": {
+      "version": "0.2.5",
+      "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.2.5.tgz",
+      "integrity": "sha512-voyz6MApa1rQGUxT3E+BK7/ROe8itEx7vD8/HEvt4xwXucvQ5G5oeEiHkmHZJuBO21RpOf+YYm9MOivj709jow==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.14"
+      }
+    },
     "node_modules/to-regex-range": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
@@ -14181,6 +14802,15 @@
         "node": ">=20"
       }
     },
+    "node_modules/traverse": {
+      "version": "0.3.9",
+      "resolved": "https://registry.npmjs.org/traverse/-/traverse-0.3.9.tgz",
+      "integrity": "sha512-iawgk0hLP3SxGKDfnDJf8wTz4p2qImnyihM5Hh/sGvQ3K37dPi/w8sRhdNIxYA1TwFwc5mDhIJq+O0RsvXBKdQ==",
+      "license": "MIT/X11",
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/troika-three-text": {
       "version": "0.52.4",
       "resolved": "https://registry.npmjs.org/troika-three-text/-/troika-three-text-0.52.4.tgz",
@@ -14477,6 +15107,24 @@
         "@unrs/resolver-binding-win32-x64-msvc": "1.11.1"
       }
     },
+    "node_modules/unzipper": {
+      "version": "0.10.14",
+      "resolved": "https://registry.npmjs.org/unzipper/-/unzipper-0.10.14.tgz",
+      "integrity": "sha512-ti4wZj+0bQTiX2KmKWuwj7lhV+2n//uXEotUmGuQqrbVZSEGFMbI68+c6JCQ8aAmUWYvtHEz2A8K6wXvueR/6g==",
+      "license": "MIT",
+      "dependencies": {
+        "big-integer": "^1.6.17",
+        "binary": "~0.3.0",
+        "bluebird": "~3.4.1",
+        "buffer-indexof-polyfill": "~1.0.0",
+        "duplexer2": "~0.1.4",
+        "fstream": "^1.0.12",
+        "graceful-fs": "^4.2.2",
+        "listenercount": "~1.0.1",
+        "readable-stream": "~2.3.6",
+        "setimmediate": "~1.0.4"
+      }
+    },
     "node_modules/uri-js": {
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
@@ -14829,6 +15477,12 @@
         "node": ">=8"
       }
     },
+    "node_modules/wrappy": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
+      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
+      "license": "ISC"
+    },
     "node_modules/ws": {
       "version": "8.18.3",
       "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.3.tgz",
@@ -15049,6 +15703,55 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/zip-stream": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/zip-stream/-/zip-stream-4.1.1.tgz",
+      "integrity": "sha512-9qv4rlDiopXg4E69k+vMHjNN63YFMe9sZMrdlvKnCjlCRWeCBswPPMPUfx+ipsAWq1LXHe70RcbaHdJJpS6hyQ==",
+      "license": "MIT",
+      "dependencies": {
+        "archiver-utils": "^3.0.4",
+        "compress-commons": "^4.1.2",
+        "readable-stream": "^3.6.0"
+      },
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/zip-stream/node_modules/archiver-utils": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/archiver-utils/-/archiver-utils-3.0.4.tgz",
+      "integrity": "sha512-KVgf4XQVrTjhyWmx6cte4RxonPLR9onExufI1jhvw/MQ4BB6IsZD5gT8Lq+u/+pRkWna/6JoHpiQioaqFP5Rzw==",
+      "license": "MIT",
+      "dependencies": {
+        "glob": "^7.2.3",
+        "graceful-fs": "^4.2.0",
+        "lazystream": "^1.0.0",
+        "lodash.defaults": "^4.2.0",
+        "lodash.difference": "^4.5.0",
+        "lodash.flatten": "^4.4.0",
+        "lodash.isplainobject": "^4.0.6",
+        "lodash.union": "^4.6.0",
+        "normalize-path": "^3.0.0",
+        "readable-stream": "^3.6.0"
+      },
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/zip-stream/node_modules/readable-stream": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
+      "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
+      "license": "MIT",
+      "dependencies": {
+        "inherits": "^2.0.3",
+        "string_decoder": "^1.1.1",
+        "util-deprecate": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/zod": {
       "version": "4.1.12",
       "resolved": "https://registry.npmjs.org/zod/-/zod-4.1.12.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 24d48d35..f3b0371d 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -68,6 +68,7 @@
     "date-fns": "^4.1.0",
     "docx": "^9.5.1",
     "docx-preview": "^0.3.6",
+    "exceljs": "^4.4.0",
     "html-to-image": "^1.11.13",
     "html2canvas": "^1.4.1",
     "isomorphic-dompurify": "^2.28.0",
@@ -85,6 +86,7 @@
     "react-dom": "19.1.0",
     "react-hook-form": "^7.62.0",
     "react-hot-toast": "^2.6.0",
+    "react-is": "^18.3.1",
     "react-leaflet": "^5.0.0",
     "react-resizable-panels": "^3.0.6",
     "react-webcam": "^7.2.0",
diff --git a/frontend/stores/modalDataStore.ts b/frontend/stores/modalDataStore.ts
index eb6a2d11..6b2b0f70 100644
--- a/frontend/stores/modalDataStore.ts
+++ b/frontend/stores/modalDataStore.ts
@@ -77,7 +77,7 @@ export const useModalDataStore = create<ModalDataState>()(
       dataRegistry: {},
       
       setData: (sourceId, items) => {
-        console.log("📦 [ModalDataStore] 데이터 저장:", { sourceId, itemCount: items.length, items });
+        // console.log("📦 [ModalDataStore] 데이터 저장:", { sourceId, itemCount: items.length, items });
         set((state) => ({
           dataRegistry: {
             ...state.dataRegistry,
diff --git a/frontend/types/node-editor.ts b/frontend/types/node-editor.ts
index 55c8f67e..ef0d78ff 100644
--- a/frontend/types/node-editor.ts
+++ b/frontend/types/node-editor.ts
@@ -95,24 +95,35 @@ export interface RestAPISourceNodeData {
   displayName?: string;
 }
 
+// 조건 연산자 타입
+export type ConditionOperator =
+  | "EQUALS"
+  | "NOT_EQUALS"
+  | "GREATER_THAN"
+  | "LESS_THAN"
+  | "GREATER_THAN_OR_EQUAL"
+  | "LESS_THAN_OR_EQUAL"
+  | "LIKE"
+  | "NOT_LIKE"
+  | "IN"
+  | "NOT_IN"
+  | "IS_NULL"
+  | "IS_NOT_NULL"
+  | "EXISTS_IN" // 다른 테이블에 존재함
+  | "NOT_EXISTS_IN"; // 다른 테이블에 존재하지 않음
+
 // 조건 분기 노드
 export interface ConditionNodeData {
   conditions: Array<{
     field: string;
-    operator:
-      | "EQUALS"
-      | "NOT_EQUALS"
-      | "GREATER_THAN"
-      | "LESS_THAN"
-      | "GREATER_THAN_OR_EQUAL"
-      | "LESS_THAN_OR_EQUAL"
-      | "LIKE"
-      | "NOT_LIKE"
-      | "IN"
-      | "NOT_IN"
-      | "IS_NULL"
-      | "IS_NOT_NULL";
+    operator: ConditionOperator;
     value: any;
+    valueType?: "static" | "field"; // 비교 값 타입
+    // EXISTS_IN / NOT_EXISTS_IN 전용 필드
+    lookupTable?: string; // 조회할 테이블명
+    lookupTableLabel?: string; // 조회할 테이블 라벨
+    lookupField?: string; // 조회할 테이블의 비교 필드
+    lookupFieldLabel?: string; // 조회할 테이블의 비교 필드 라벨
   }>;
   logic: "AND" | "OR";
   displayName?: string;
@@ -220,6 +231,17 @@ export interface FormulaTransformNodeData {
         value?: string | number;
         resultField?: string;
       };
+      // 추가 연산 (다중 연산 지원: (left op right) op1 val1 op2 val2 ...)
+      additionalOperations?: Array<{
+        operator: "+" | "-" | "*" | "/" | "%";
+        operand: {
+          type: "source" | "target" | "static" | "result";
+          field?: string;
+          fieldLabel?: string;
+          value?: string | number;
+          resultField?: string;
+        };
+      }>;
     };
 
     // 함수 (formulaType === "function")
@@ -333,6 +355,11 @@ export interface InsertActionNodeData {
     targetField: string;
     targetFieldLabel?: string;
     staticValue?: any;
+    // 🔥 값 생성 유형 추가
+    valueType?: "source" | "static" | "autoGenerate"; // 소스 필드 / 고정값 / 자동 생성
+    // 자동 생성 옵션 (valueType === "autoGenerate" 일 때)
+    numberingRuleId?: string; // 채번 규칙 ID
+    numberingRuleName?: string; // 채번 규칙명 (표시용)
   }>;
   options: {
     batchSize?: number;
diff --git a/frontend/types/repeater.ts b/frontend/types/repeater.ts
index 9151a65f..2362210b 100644
--- a/frontend/types/repeater.ts
+++ b/frontend/types/repeater.ts
@@ -95,6 +95,7 @@ export interface RepeaterFieldGroupConfig {
   layout?: "grid" | "card"; // 레이아웃 타입: grid(테이블 행) 또는 card(카드 형식)
   showDivider?: boolean; // 항목 사이 구분선 표시 (카드 모드일 때만)
   emptyMessage?: string; // 항목이 없을 때 메시지
+  subDataLookup?: SubDataLookupConfig; // 하위 데이터 조회 설정 (재고, 단가 등)
 }
 
 /**
@@ -106,3 +107,71 @@ export type RepeaterItemData = Record<string, any>;
  * 반복 그룹 전체 데이터 (배열)
  */
 export type RepeaterData = RepeaterItemData[];
+
+// ============================================================
+// 하위 데이터 조회 설정 (Sub Data Lookup)
+// 품목 선택 시 재고/단가 등 관련 데이터를 조회하고 선택하는 기능
+// ============================================================
+
+/**
+ * 하위 데이터 조회 테이블 설정
+ */
+export interface SubDataLookupSettings {
+  tableName: string; // 조회할 테이블 (예: inventory, price_list)
+  linkColumn: string; // 상위 데이터와 연결할 컬럼 (예: item_code)
+  displayColumns: string[]; // 표시할 컬럼들 (예: ["warehouse_code", "location_code", "quantity"])
+  columnLabels?: Record<string, string>; // 컬럼 라벨 (예: { warehouse_code: "창고" })
+  additionalFilters?: Record<string, any>; // 추가 필터 조건
+}
+
+/**
+ * 하위 데이터 선택 설정
+ */
+export interface SubDataSelectionSettings {
+  mode: "single" | "multiple"; // 단일/다중 선택
+  requiredFields: string[]; // 필수 선택 필드 (예: ["warehouse_code"])
+  requiredMode?: "any" | "all"; // 필수 조건: "any" = 하나만, "all" = 모두 (기본: "all")
+}
+
+/**
+ * 조건부 입력 활성화 설정
+ */
+export interface ConditionalInputSettings {
+  targetField: string; // 활성화할 입력 필드 (예: "outbound_qty")
+  maxValueField?: string; // 최대값 참조 필드 (예: "quantity" - 재고 수량)
+  warningThreshold?: number; // 경고 임계값 (퍼센트, 예: 90)
+  errorMessage?: string; // 에러 메시지
+}
+
+/**
+ * 하위 데이터 UI 설정
+ */
+export interface SubDataUISettings {
+  expandMode: "inline" | "modal"; // 확장 방식 (인라인 또는 모달)
+  maxHeight?: string; // 최대 높이 (예: "150px")
+  showSummary?: boolean; // 요약 정보 표시
+  emptyMessage?: string; // 데이터 없을 때 메시지
+}
+
+/**
+ * 하위 데이터 조회 전체 설정
+ */
+export interface SubDataLookupConfig {
+  enabled: boolean; // 기능 활성화 여부
+  lookup: SubDataLookupSettings; // 조회 설정
+  selection: SubDataSelectionSettings; // 선택 설정
+  conditionalInput: ConditionalInputSettings; // 조건부 입력 설정
+  ui?: SubDataUISettings; // UI 설정
+}
+
+/**
+ * 하위 데이터 상태 (런타임)
+ */
+export interface SubDataState {
+  itemIndex: number; // 상위 항목 인덱스
+  data: any[]; // 조회된 하위 데이터
+  selectedItem: any | null; // 선택된 하위 항목
+  isLoading: boolean; // 로딩 상태
+  error: string | null; // 에러 메시지
+  isExpanded: boolean; // 확장 상태
+}
diff --git a/frontend/types/screen-management.ts b/frontend/types/screen-management.ts
index 646632f5..89127c1a 100644
--- a/frontend/types/screen-management.ts
+++ b/frontend/types/screen-management.ts
@@ -365,6 +365,8 @@ export interface EntityTypeConfig {
   separator?: string; // 여러 컬럼 표시 시 구분자 (기본: ' - ')
   // UI 모드
   uiMode?: "select" | "modal" | "combo" | "autocomplete"; // 기본: "combo"
+  // 다중 선택
+  multiple?: boolean; // 여러 항목 선택 가능 여부 (기본: false)
 }
 
 /**
diff --git a/frontend/types/table-options.ts b/frontend/types/table-options.ts
index bfcfccbc..6f9b2644 100644
--- a/frontend/types/table-options.ts
+++ b/frontend/types/table-options.ts
@@ -66,7 +66,7 @@ export interface TableRegistration {
   onGroupChange: (groups: string[]) => void;
   onColumnVisibilityChange: (columns: ColumnVisibility[]) => void;
   onGroupSumChange?: (config: GroupSumConfig | null) => void; // 그룹별 합산 설정 변경
-  onFrozenColumnCountChange?: (count: number) => void; // 틀고정 컬럼 수 변경
+  onFrozenColumnCountChange?: (count: number, updatedColumns?: Array<{ columnName: string; visible: boolean }>) => void; // 틀고정 컬럼 수 변경
   
   // 현재 설정 값 (읽기 전용)
   frozenColumnCount?: number; // 현재 틀고정 컬럼 수
diff --git a/화면_임베딩_및_데이터_전달_시스템_구현_계획서.md b/화면_임베딩_및_데이터_전달_시스템_구현_계획서.md
index f61ab2fb..b2b81c07 100644
--- a/화면_임베딩_및_데이터_전달_시스템_구현_계획서.md
+++ b/화면_임베딩_및_데이터_전달_시스템_구현_계획서.md
@@ -1689,3 +1689,5 @@ const 출고등록_설정: ScreenSplitPanel = {
 
 
 
+
+
diff --git a/화면_임베딩_시스템_Phase1-4_구현_완료.md b/화면_임베딩_시스템_Phase1-4_구현_완료.md
index 0596216f..23212951 100644
--- a/화면_임베딩_시스템_Phase1-4_구현_완료.md
+++ b/화면_임베딩_시스템_Phase1-4_구현_완료.md
@@ -536,3 +536,5 @@ const { data: config } = await getScreenSplitPanel(screenId);
 
 
 
+
+
diff --git a/화면_임베딩_시스템_충돌_분석_보고서.md b/화면_임베딩_시스템_충돌_분석_보고서.md
index 4f0bfabb..92e95ded 100644
--- a/화면_임베딩_시스템_충돌_분석_보고서.md
+++ b/화면_임베딩_시스템_충돌_분석_보고서.md
@@ -523,3 +523,5 @@ function ScreenViewPage() {
 
 
 
+
+