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 f826a86a..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",
@@ -1043,6 +1044,7 @@
       "integrity": "sha512-2BCOP7TN8M+gVDj7/ht3hsaO/B/n5oDbiAyyvnRlNOs+u1o+JWNYTQrmpuNp1/Wq2gcFrI01JAW+paEKDMx/CA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.27.1",
         "@babel/generator": "^7.28.3",
@@ -2370,6 +2372,7 @@
       "resolved": "https://registry.npmjs.org/@redis/client/-/client-1.6.1.tgz",
       "integrity": "sha512-/KCsg3xSlR+nCK8/8ZYSknYxvXHwubJrU82F3Lm1Fp6789VQ0/3RJKfsmRXjqfaTA++23CvC3hqmqe/2GEt6Kw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "cluster-key-slot": "1.1.2",
         "generic-pool": "3.9.0",
@@ -3214,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",
@@ -3463,6 +3476,7 @@
       "resolved": "https://registry.npmjs.org/@types/node/-/node-20.19.17.tgz",
       "integrity": "sha512-gfehUI8N1z92kygssiuWvLiwcbOB3IRktR6hTDgJlXMYh5OvkPSRmgfoBUmfZt+vhwJtX7v1Yw4KvvAf7c5QKQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "undici-types": "~6.21.0"
       }
@@ -3699,6 +3713,7 @@
       "integrity": "sha512-tbsV1jPne5CkFQCgPBcDOt30ItF7aJoZL997JSF7MhGQqOeT3svWRYxiqlfA5RUdlHN6Fi+EI9bxqbdyAUZjYQ==",
       "dev": true,
       "license": "BSD-2-Clause",
+      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "6.21.0",
         "@typescript-eslint/types": "6.21.0",
@@ -3916,6 +3931,7 @@
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -4442,6 +4458,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.8.3",
         "caniuse-lite": "^1.0.30001741",
@@ -5652,6 +5669,7 @@
       "deprecated": "This version is no longer supported. Please see https://eslint.org/version-support for other options.",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.2.0",
         "@eslint-community/regexpp": "^4.6.1",
@@ -7414,6 +7432,7 @@
       "integrity": "sha512-NIy3oAFp9shda19hy4HK0HRTWKtPJmGdnvywu01nOqNC2vZg+Z+fvJDxpMQA88eb2I9EcafcdjYgsDthnYTvGw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@jest/core": "^29.7.0",
         "@jest/types": "^29.6.3",
@@ -8383,7 +8402,6 @@
       "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
       "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "js-tokens": "^3.0.0 || ^4.0.0"
       },
@@ -9272,6 +9290,7 @@
       "resolved": "https://registry.npmjs.org/pg/-/pg-8.16.3.tgz",
       "integrity": "sha512-enxc1h0jA/aq5oSDMvqyW3q89ra6XIIDZgCX9vkMrnz5DFTw/Ny3Li2lFQ+pt3L6MCgm/5o2o8HW9hiJji+xvw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "pg-connection-string": "^2.9.1",
         "pg-pool": "^3.10.1",
@@ -10122,7 +10141,6 @@
       "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
       "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "loose-envify": "^1.1.0"
       }
@@ -10931,6 +10949,7 @@
       "integrity": "sha512-f0FFpIdcHgn8zcPSbf1dRevwt047YMnaiJM3u2w2RewrB+fob/zePZcrOyQoLMMO7aBIddLcQIEK5dYjkLnGrQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@cspotcode/source-map-support": "^0.8.0",
         "@tsconfig/node10": "^1.0.7",
@@ -11036,6 +11055,7 @@
       "integrity": "sha512-CWBzXQrc/qOkhidw1OzBTQuYRbfyxDXJMVJ1XNwUHGROVmuaeiEm3OslpZ1RV96d7SKKjZKrSJu3+t/xlw3R9A==",
       "dev": true,
       "license": "Apache-2.0",
+      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
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 d819d3a8..76699e7b 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 fbb88750..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 = {};
@@ -66,11 +70,23 @@ export class EntityJoinController {
             const userField = parsedAutoFilter.userField || "companyCode";
             const userValue = ((req as any).user as any)[userField];
 
-            if (userValue) {
-              searchConditions[filterColumn] = userValue;
+            // 🆕 프리뷰용 회사 코드 오버라이드 (최고 관리자만 허용)
+            let finalCompanyCode = userValue;
+            if (parsedAutoFilter.companyCodeOverride && userValue === "*") {
+              // 최고 관리자만 다른 회사 코드로 오버라이드 가능
+              finalCompanyCode = parsedAutoFilter.companyCodeOverride;
+              logger.info("🔓 최고 관리자 회사 코드 오버라이드:", {
+                originalCompanyCode: userValue,
+                overrideCompanyCode: parsedAutoFilter.companyCodeOverride,
+                tableName,
+              });
+            }
+
+            if (finalCompanyCode) {
+              searchConditions[filterColumn] = finalCompanyCode;
               logger.info("🔒 Entity 조인에 멀티테넌시 필터 적용:", {
                 filterColumn,
-                userValue,
+                finalCompanyCode,
                 tableName,
               });
             }
@@ -139,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,
         {
@@ -156,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);
@@ -537,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 06de789d..f12ee16d 100644
--- a/backend-node/src/controllers/entitySearchController.ts
+++ b/backend-node/src/controllers/entitySearchController.ts
@@ -202,14 +202,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 b984b7c1..1c73d88a 100644
--- a/backend-node/src/controllers/screenGroupController.ts
+++ b/backend-node/src/controllers/screenGroupController.ts
@@ -1,10 +1,14 @@
 import { Request, Response } from "express";
 import { getPool } from "../database/db";
 import { logger } from "../utils/logger";
+import { MultiLangService } from "../services/multilangService";
 
 // pool 인스턴스 가져오기
 const pool = getPool();
 
+// 다국어 서비스 인스턴스
+const multiLangService = new MultiLangService();
+
 // ============================================================
 // 화면 그룹 (screen_groups) CRUD
 // ============================================================
@@ -132,17 +136,37 @@ export const getScreenGroup = async (req: Request, res: Response) => {
 // 화면 그룹 생성
 export const createScreenGroup = async (req: Request, res: Response) => {
   try {
-    const companyCode = (req.user as any).companyCode;
+    const userCompanyCode = (req.user as any).companyCode;
     const userId = (req.user as any).userId;
-    const { group_name, group_code, main_table_name, description, icon, display_order, is_active } = req.body;
+    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) {
       return res.status(400).json({ success: false, message: "그룹명과 그룹코드는 필수입니다." });
     }
 
+    // 회사 코드 결정: 최고 관리자가 특정 회사를 선택한 경우 해당 회사로, 아니면 사용자 회사
+    let finalCompanyCode = userCompanyCode;
+    if (userCompanyCode === "*" && target_company_code) {
+      // 최고 관리자가 특정 회사를 선택한 경우
+      finalCompanyCode = target_company_code;
+    }
+
+    // 부모 그룹이 있으면 group_level과 hierarchy_path 계산
+    let groupLevel = 0;
+    let parentHierarchyPath = "";
+    
+    if (parent_group_id) {
+      const parentQuery = `SELECT id, group_level, hierarchy_path FROM screen_groups WHERE id = $1`;
+      const parentResult = await pool.query(parentQuery, [parent_group_id]);
+      if (parentResult.rows.length > 0) {
+        groupLevel = (parentResult.rows[0].group_level || 0) + 1;
+        parentHierarchyPath = parentResult.rows[0].hierarchy_path || `/${parent_group_id}/`;
+      }
+    }
+
     const query = `
-      INSERT INTO screen_groups (group_name, group_code, main_table_name, description, icon, display_order, is_active, company_code, writer)
-      VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9)
+      INSERT INTO screen_groups (group_name, group_code, main_table_name, description, icon, display_order, is_active, company_code, writer, parent_group_id, group_level)
+      VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9, $10, $11)
       RETURNING *
     `;
     const params = [
@@ -153,15 +177,68 @@ export const createScreenGroup = async (req: Request, res: Response) => {
       icon || null,
       display_order || 0,
       is_active || 'Y',
-      companyCode === "*" ? "*" : companyCode,
-      userId
+      finalCompanyCode,
+      userId,
+      parent_group_id || null,
+      groupLevel
     ];
 
     const result = await pool.query(query, params);
+    const newGroupId = result.rows[0].id;
 
-    logger.info("화면 그룹 생성", { companyCode, groupId: result.rows[0].id, groupName: group_name });
+    // hierarchy_path 업데이트
+    const hierarchyPath = parent_group_id 
+      ? `${parentHierarchyPath}${newGroupId}/`.replace('//', '/')
+      : `/${newGroupId}/`;
+    await pool.query(`UPDATE screen_groups SET hierarchy_path = $1 WHERE id = $2`, [hierarchyPath, newGroupId]);
 
-    res.json({ success: true, data: result.rows[0], message: "화면 그룹이 생성되었습니다." });
+    // 업데이트된 데이터 반환
+    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: "화면 그룹이 생성되었습니다." });
   } catch (error: any) {
     logger.error("화면 그룹 생성 실패:", error);
     if (error.code === '23505') {
@@ -175,21 +252,72 @@ export const createScreenGroup = async (req: Request, res: Response) => {
 export const updateScreenGroup = async (req: Request, res: Response) => {
   try {
     const { id } = req.params;
-    const companyCode = (req.user as any).companyCode;
-    const { group_name, group_code, main_table_name, description, icon, display_order, is_active } = req.body;
+    const userCompanyCode = (req.user as any).companyCode;
+    const { group_name, group_code, main_table_name, description, icon, display_order, is_active, parent_group_id, target_company_code } = req.body;
 
-    let query = `
-      UPDATE screen_groups 
-      SET group_name = $1, group_code = $2, main_table_name = $3, description = $4, 
-          icon = $5, display_order = $6, is_active = $7, updated_date = NOW()
-      WHERE id = $8
-    `;
-    const params: any[] = [group_name, group_code, main_table_name, description, icon, display_order, is_active, id];
+    // 회사 코드 결정: 최고 관리자가 특정 회사를 선택한 경우 해당 회사로, 아니면 현재 그룹의 회사 유지
+    let finalCompanyCode = target_company_code || null;
 
-    // 멀티테넌시 필터링
-    if (companyCode !== "*") {
-      query += ` AND company_code = $9`;
-      params.push(companyCode);
+    // 부모 그룹이 변경되면 group_level과 hierarchy_path 재계산
+    let groupLevel = 0;
+    let hierarchyPath = `/${id}/`;
+    
+    if (parent_group_id !== undefined && parent_group_id !== null) {
+      // 자기 자신을 부모로 지정하는 것 방지
+      if (Number(parent_group_id) === Number(id)) {
+        return res.status(400).json({ success: false, message: "자기 자신을 상위 그룹으로 지정할 수 없습니다." });
+      }
+      
+      const parentQuery = `SELECT id, group_level, hierarchy_path FROM screen_groups WHERE id = $1`;
+      const parentResult = await pool.query(parentQuery, [parent_group_id]);
+      if (parentResult.rows.length > 0) {
+        // 순환 참조 방지: 부모의 hierarchy_path에 현재 그룹 ID가 포함되어 있으면 오류
+        if (parentResult.rows[0].hierarchy_path && parentResult.rows[0].hierarchy_path.includes(`/${id}/`)) {
+          return res.status(400).json({ success: false, message: "하위 그룹을 상위 그룹으로 지정할 수 없습니다." });
+        }
+        groupLevel = (parentResult.rows[0].group_level || 0) + 1;
+        const parentPath = parentResult.rows[0].hierarchy_path || `/${parent_group_id}/`;
+        hierarchyPath = `${parentPath}${id}/`.replace('//', '/');
+      }
+    }
+
+    // 쿼리 구성: 회사 코드 변경 포함 여부
+    let query: string;
+    let params: any[];
+    
+    if (userCompanyCode === "*" && finalCompanyCode) {
+      // 최고 관리자가 회사를 변경하는 경우
+      query = `
+        UPDATE screen_groups 
+        SET group_name = $1, group_code = $2, main_table_name = $3, description = $4, 
+            icon = $5, display_order = $6, is_active = $7, updated_date = NOW(),
+            parent_group_id = $8, group_level = $9, hierarchy_path = $10, company_code = $11
+        WHERE id = $12
+      `;
+      params = [
+        group_name, group_code, main_table_name, description, icon, display_order, is_active,
+        parent_group_id || null, groupLevel, hierarchyPath, finalCompanyCode, id
+      ];
+    } else {
+      // 회사 코드 변경 없음
+      query = `
+        UPDATE screen_groups 
+        SET group_name = $1, group_code = $2, main_table_name = $3, description = $4, 
+            icon = $5, display_order = $6, is_active = $7, updated_date = NOW(),
+            parent_group_id = $8, group_level = $9, hierarchy_path = $10
+        WHERE id = $11
+      `;
+      params = [
+        group_name, group_code, main_table_name, description, icon, display_order, is_active,
+        parent_group_id || null, groupLevel, hierarchyPath, id
+      ];
+    }
+
+    // 멀티테넌시 필터링 (최고 관리자가 아닌 경우)
+    if (userCompanyCode !== "*") {
+      const paramIndex = params.length + 1;
+      query += ` AND company_code = $${paramIndex}`;
+      params.push(userCompanyCode);
     }
 
     query += " RETURNING *";
@@ -200,7 +328,7 @@ export const updateScreenGroup = async (req: Request, res: Response) => {
       return res.status(404).json({ success: false, message: "화면 그룹을 찾을 수 없거나 권한이 없습니다." });
     }
 
-    logger.info("화면 그룹 수정", { companyCode, groupId: id });
+    logger.info("화면 그룹 수정", { userCompanyCode, groupId: id, parentGroupId: parent_group_id, targetCompanyCode: finalCompanyCode });
 
     res.json({ success: true, data: result.rows[0], message: "화면 그룹이 수정되었습니다." });
   } catch (error: any) {
@@ -520,7 +648,7 @@ export const deleteFieldJoin = async (req: Request, res: Response) => {
 export const getDataFlows = async (req: Request, res: Response) => {
   try {
     const companyCode = (req.user as any).companyCode;
-    const { group_id } = req.query;
+    const { group_id, source_screen_id } = req.query;
 
     let query = `
       SELECT sdf.*,
@@ -548,6 +676,13 @@ export const getDataFlows = async (req: Request, res: Response) => {
       paramIndex++;
     }
 
+    // 특정 화면에서 시작하는 데이터 흐름만 조회
+    if (source_screen_id) {
+      query += ` AND sdf.source_screen_id = $${paramIndex}`;
+      params.push(source_screen_id);
+      paramIndex++;
+    }
+
     query += " ORDER BY sdf.id ASC";
 
     const result = await pool.query(query, params);
@@ -904,6 +1039,7 @@ export const getMultipleScreenLayoutSummary = async (req: Request, res: Response
 
     // 여러 화면의 컴포넌트 정보 (좌표 포함) 한번에 조회
     // componentType이 더 정확한 위젯 종류 (table-list, button-primary 등)
+    // 다양한 컴포넌트 타입에서 사용 컬럼 추출
     const query = `
       SELECT 
         screen_id,
@@ -914,7 +1050,16 @@ export const getMultipleScreenLayoutSummary = async (req: Request, res: Response
         height,
         properties->>'componentType' as component_kind,
         properties->>'widgetType' as widget_type,
-        properties->>'label' as label
+        properties->>'label' as label,
+        COALESCE(
+          properties->'componentConfig'->>'bindField',
+          properties->>'bindField',
+          properties->'componentConfig'->>'field',
+          properties->>'field',
+          properties->>'columnName'
+        ) as bind_field,
+        -- componentConfig 전체 (JavaScript에서 다양한 패턴 파싱용)
+        properties->'componentConfig' as component_config
       FROM screen_layouts
       WHERE screen_id = ANY($1)
         AND component_type = 'component'
@@ -944,6 +1089,86 @@ export const getMultipleScreenLayoutSummary = async (req: Request, res: Response
       // componentKind가 더 정확한 타입 (table-list, button-primary, table-search-widget 등)
       const componentKind = row.component_kind || row.widget_type || 'text';
       const widgetType = row.widget_type || 'text';
+      const componentConfig = row.component_config || {};
+      
+      // 다양한 컴포넌트 타입에서 usedColumns, joinColumns 추출
+      let usedColumns: string[] = [];
+      let joinColumns: string[] = [];
+      
+      // 1. 기본 columns 배열에서 추출 (table-list 등)
+      if (Array.isArray(componentConfig.columns)) {
+        componentConfig.columns.forEach((col: any) => {
+          const colName = col.columnName || col.field || col.name;
+          if (colName && !usedColumns.includes(colName)) {
+            usedColumns.push(colName);
+          }
+          if (col.isEntityJoin === true && colName && !joinColumns.includes(colName)) {
+            joinColumns.push(colName);
+          }
+        });
+      }
+      
+      // 2. split-panel-layout의 leftPanel.columns, rightPanel.columns 추출
+      if (componentKind === 'split-panel-layout') {
+        if (componentConfig.leftPanel?.columns && Array.isArray(componentConfig.leftPanel.columns)) {
+          componentConfig.leftPanel.columns.forEach((col: any) => {
+            const colName = col.name || col.columnName || col.field;
+            if (colName && !usedColumns.includes(colName)) {
+              usedColumns.push(colName);
+            }
+          });
+        }
+        if (componentConfig.rightPanel?.columns && Array.isArray(componentConfig.rightPanel.columns)) {
+          componentConfig.rightPanel.columns.forEach((col: any) => {
+            const colName = col.name || col.columnName || col.field;
+            if (colName) {
+              // customer_mng.customer_name 같은 경우 조인 컬럼으로 처리
+              if (colName.includes('.')) {
+                if (!joinColumns.includes(colName)) {
+                  joinColumns.push(colName);
+                }
+              } else {
+                if (!usedColumns.includes(colName)) {
+                  usedColumns.push(colName);
+                }
+              }
+            }
+          });
+        }
+      }
+      
+      // 3. selected-items-detail-input의 additionalFields, displayColumns 추출
+      if (componentKind === 'selected-items-detail-input') {
+        if (componentConfig.additionalFields && Array.isArray(componentConfig.additionalFields)) {
+          componentConfig.additionalFields.forEach((field: any) => {
+            const fieldName = field.name || field.field;
+            if (fieldName && !usedColumns.includes(fieldName)) {
+              usedColumns.push(fieldName);
+            }
+          });
+        }
+        // displayColumns는 연관 테이블에서 가져오는 표시용 컬럼이므로
+        // 메인 테이블의 joinColumns가 아님 (parentDataMapping에서 별도 추출됨)
+        // 단, 참조용으로 usedColumns에는 추가 가능
+        if (componentConfig.displayColumns && Array.isArray(componentConfig.displayColumns)) {
+          componentConfig.displayColumns.forEach((col: any) => {
+            const colName = col.name || col.columnName || col.field;
+            // displayColumns는 연관 테이블 컬럼이므로 메인 테이블 usedColumns에 추가하지 않음
+            // 조인 컬럼은 parentDataMapping.targetField에서 추출됨
+          });
+        }
+      }
+      
+      // 4. bindField가 있으면 usedColumns에 추가 (인풋 필드, 텍스트 필드 등)
+      if (row.bind_field && !usedColumns.includes(row.bind_field)) {
+        usedColumns.push(row.bind_field);
+      }
+      
+      // 5. componentConfig.field 또는 componentConfig.valueField도 추가
+      const configField = componentConfig.field || componentConfig.valueField;
+      if (configField && typeof configField === 'string' && !usedColumns.includes(configField)) {
+        usedColumns.push(configField);
+      }
       
       if (summaryMap[screenId]) {
         summaryMap[screenId].widgetCounts[componentKind] = 
@@ -959,6 +1184,9 @@ export const getMultipleScreenLayoutSummary = async (req: Request, res: Response
           componentKind: componentKind, // 정확한 컴포넌트 종류
           widgetType: widgetType,
           label: row.label,
+          bindField: row.bind_field || null, // 바인딩된 컬럼명
+          usedColumns: usedColumns, // 이 컴포넌트에서 사용하는 컬럼 목록
+          joinColumns: joinColumns, // 이 컴포넌트에서 조인 컬럼 목록
         });
         
         // 캔버스 크기 계산 (최대 좌표 기준)
@@ -1009,9 +1237,27 @@ export const getScreenSubTables = async (req: Request, res: Response) => {
       return res.status(400).json({ success: false, message: "screenIds 배열이 필요합니다." });
     }
 
-    // 화면별 메인 테이블과 서브 테이블 관계 조회
-    // componentConfig에서 tableName, sourceTable 추출
-    const query = `
+    // 화면별 서브 테이블 그룹화
+    const screenSubTables: Record<number, {
+      screenId: number;
+      screenName: string;
+      mainTable: string;
+      subTables: Array<{
+        tableName: string;
+        componentType: string;
+        relationType: string; // 'join' | 'lookup' | 'source' | 'reference'
+        fieldMappings?: Array<{ sourceField: string; targetField: string; sourceDisplayName?: string; targetDisplayName?: string }>;
+      }>;
+      saveTables?: Array<{
+        tableName: string;
+        saveType: 'save' | 'edit' | 'delete' | 'transferData';
+        componentType: string;
+        isMainTable: boolean;
+      }>;
+    }> = {};
+
+    // 1. 기존 방식: componentConfig에서 tableName, sourceTable, fieldMappings 추출
+    const componentQuery = `
       SELECT DISTINCT
         sd.screen_id,
         sd.screen_name,
@@ -1021,7 +1267,9 @@ export const getScreenSubTables = async (req: Request, res: Response) => {
           sl.properties->'componentConfig'->>'sourceTable'
         ) as sub_table,
         sl.properties->>'componentType' as component_type,
-        sl.properties->'componentConfig'->>'targetTable' as target_table
+        sl.properties->'componentConfig'->>'targetTable' as target_table,
+        sl.properties->'componentConfig'->'fieldMappings' as field_mappings,
+        sl.properties->'componentConfig'->'columns' as columns_config
       FROM screen_definitions sd
       JOIN screen_layouts sl ON sd.screen_id = sl.screen_id
       WHERE sd.screen_id = ANY($1)
@@ -1032,21 +1280,50 @@ export const getScreenSubTables = async (req: Request, res: Response) => {
       ORDER BY sd.screen_id
     `;
 
-    const result = await pool.query(query, [screenIds]);
+    const componentResult = await pool.query(componentQuery, [screenIds]);
 
-    // 화면별 서브 테이블 그룹화
-    const screenSubTables: Record<number, {
-      screenId: number;
-      screenName: string;
-      mainTable: string;
-      subTables: Array<{
-        tableName: string;
-        componentType: string;
-        relationType: string; // 'join' | 'lookup' | 'source'
-      }>;
-    }> = {};
+    // fieldMappings의 한글 컬럼명을 조회하기 위한 테이블-컬럼 쌍 수집
+    const columnLabelLookups: Array<{ table: string; column: string }> = [];
+    componentResult.rows.forEach((row: any) => {
+      if (row.field_mappings && Array.isArray(row.field_mappings)) {
+        row.field_mappings.forEach((fm: any) => {
+          const mainTable = row.main_table;
+          const subTable = row.sub_table;
+          if (fm.sourceField && subTable) {
+            columnLabelLookups.push({ table: subTable, column: fm.sourceField });
+          }
+          if (fm.targetField && mainTable) {
+            columnLabelLookups.push({ table: mainTable, column: fm.targetField });
+          }
+        });
+      }
+    });
 
-    result.rows.forEach((row: any) => {
+    // 한글 컬럼명 조회
+    const columnLabelMap = new Map<string, string>(); // "table.column" -> "한글명"
+    if (columnLabelLookups.length > 0) {
+      const uniqueLookups = [...new Set(columnLabelLookups.map(l => `${l.table}|${l.column}`))];
+      const conditions = uniqueLookups.map((lookup, i) => {
+        const [table, column] = lookup.split('|');
+        return `(table_name = $${i * 2 + 1} AND column_name = $${i * 2 + 2})`;
+      });
+      const params = uniqueLookups.flatMap(lookup => lookup.split('|'));
+      
+      if (conditions.length > 0) {
+        const labelQuery = `
+          SELECT table_name, column_name, column_label
+          FROM column_labels
+          WHERE ${conditions.join(' OR ')}
+        `;
+        const labelResult = await pool.query(labelQuery, params);
+        labelResult.rows.forEach((row: any) => {
+          const key = `${row.table_name}.${row.column_name}`;
+          columnLabelMap.set(key, row.column_label || row.column_name);
+        });
+      }
+    }
+
+    componentResult.rows.forEach((row: any) => {
       const screenId = row.screen_id;
       const mainTable = row.main_table;
       const subTable = row.sub_table;
@@ -1082,15 +1359,695 @@ export const getScreenSubTables = async (req: Request, res: Response) => {
           relationType = 'join';
         }
 
+        // fieldMappings 파싱 (JSON 배열 또는 null)
+        let fieldMappings: Array<{ sourceField: string; targetField: string; sourceDisplayName?: string; targetDisplayName?: string }> | undefined;
+        
+        if (row.field_mappings && Array.isArray(row.field_mappings)) {
+          // 1. 직접 fieldMappings가 있는 경우
+          fieldMappings = row.field_mappings.map((fm: any) => {
+            const sourceField = fm.sourceField || fm.source_field || '';
+            const targetField = fm.targetField || fm.target_field || '';
+            
+            // 한글 컬럼명 조회 (sourceField는 서브테이블 컬럼, targetField는 메인테이블 컬럼)
+            const sourceKey = `${subTable}.${sourceField}`;
+            const targetKey = `${mainTable}.${targetField}`;
+            
+            return {
+              sourceField,
+              targetField,
+              // sourceField(서브테이블 컬럼)의 한글명
+              sourceDisplayName: columnLabelMap.get(sourceKey) || sourceField,
+              // targetField(메인테이블 컬럼)의 한글명
+              targetDisplayName: columnLabelMap.get(targetKey) || targetField,
+            };
+          }).filter((fm: any) => fm.sourceField || fm.targetField);
+        } else if (row.columns_config && Array.isArray(row.columns_config)) {
+          // 2. columns_config.mapping에서 추출 (item_info 같은 경우)
+          // mapping.type === 'source'인 경우: sourceField(서브테이블) → field(메인테이블)
+          fieldMappings = [];
+          row.columns_config.forEach((col: any) => {
+            if (col.mapping && col.mapping.type === 'source' && col.mapping.sourceField) {
+              fieldMappings!.push({
+                sourceField: col.field || '',                    // 메인 테이블 컬럼
+                targetField: col.mapping.sourceField || '',      // 서브 테이블 컬럼
+                sourceDisplayName: col.label || col.field || '', // 한글 라벨
+                targetDisplayName: col.mapping.sourceField || '', // 서브 테이블은 영문만
+              });
+            }
+          });
+          if (fieldMappings.length === 0) {
+            fieldMappings = undefined;
+          }
+        }
+
         screenSubTables[screenId].subTables.push({
           tableName: subTable,
           componentType: componentType,
           relationType: relationType,
+          fieldMappings: fieldMappings,
         });
       }
     });
 
-    logger.info("화면 서브 테이블 정보 조회", { screenIds, resultCount: Object.keys(screenSubTables).length });
+    // 2. 추가 방식: 화면에서 사용하는 컬럼 중 column_labels.reference_table이 설정된 경우
+    // 화면의 usedColumns/joinColumns에서 reference_table 조회
+    const referenceQuery = `
+      WITH screen_used_columns AS (
+        -- 화면별 사용 컬럼 추출 (componentConfig.columns에서)
+        SELECT 
+          sd.screen_id,
+          sd.screen_name,
+          sd.table_name as main_table,
+          jsonb_array_elements_text(
+            COALESCE(
+              sl.properties->'componentConfig'->'columns',
+              '[]'::jsonb
+            )
+          )::jsonb->>'columnName' as column_name
+        FROM screen_definitions sd
+        JOIN screen_layouts sl ON sd.screen_id = sl.screen_id
+        WHERE sd.screen_id = ANY($1)
+        AND sl.properties->'componentConfig'->'columns' IS NOT NULL
+        AND jsonb_array_length(sl.properties->'componentConfig'->'columns') > 0
+        
+        UNION
+        
+        -- bindField도 포함
+        SELECT 
+          sd.screen_id,
+          sd.screen_name,
+          sd.table_name as main_table,
+          COALESCE(
+            sl.properties->'componentConfig'->>'bindField',
+            sl.properties->>'bindField',
+            sl.properties->'componentConfig'->>'field',
+            sl.properties->>'field'
+          ) as column_name
+        FROM screen_definitions sd
+        JOIN screen_layouts sl ON sd.screen_id = sl.screen_id
+        WHERE sd.screen_id = ANY($1)
+        AND (
+          sl.properties->'componentConfig'->>'bindField' IS NOT NULL
+          OR sl.properties->>'bindField' IS NOT NULL
+          OR sl.properties->'componentConfig'->>'field' IS NOT NULL
+          OR sl.properties->>'field' IS NOT NULL
+        )
+        
+        UNION
+        
+        -- valueField 추출 (entity-search-input, autocomplete-search-input 등에서 사용)
+        SELECT 
+          sd.screen_id,
+          sd.screen_name,
+          sd.table_name as main_table,
+          sl.properties->'componentConfig'->>'valueField' as column_name
+        FROM screen_definitions sd
+        JOIN screen_layouts sl ON sd.screen_id = sl.screen_id
+        WHERE sd.screen_id = ANY($1)
+        AND sl.properties->'componentConfig'->>'valueField' IS NOT NULL
+        
+        UNION
+        
+        -- parentFieldId 추출 (캐스케이딩 관계에서 사용)
+        SELECT 
+          sd.screen_id,
+          sd.screen_name,
+          sd.table_name as main_table,
+          sl.properties->'componentConfig'->>'parentFieldId' as column_name
+        FROM screen_definitions sd
+        JOIN screen_layouts sl ON sd.screen_id = sl.screen_id
+        WHERE sd.screen_id = ANY($1)
+        AND sl.properties->'componentConfig'->>'parentFieldId' IS NOT NULL
+        
+        UNION
+        
+        -- cascadingParentField 추출 (캐스케이딩 부모 필드)
+        SELECT 
+          sd.screen_id,
+          sd.screen_name,
+          sd.table_name as main_table,
+          sl.properties->'componentConfig'->>'cascadingParentField' as column_name
+        FROM screen_definitions sd
+        JOIN screen_layouts sl ON sd.screen_id = sl.screen_id
+        WHERE sd.screen_id = ANY($1)
+        AND sl.properties->'componentConfig'->>'cascadingParentField' IS NOT NULL
+        
+        UNION
+        
+        -- controlField 추출 (conditional-container에서 사용)
+        SELECT 
+          sd.screen_id,
+          sd.screen_name,
+          sd.table_name as main_table,
+          sl.properties->'componentConfig'->>'controlField' as column_name
+        FROM screen_definitions sd
+        JOIN screen_layouts sl ON sd.screen_id = sl.screen_id
+        WHERE sd.screen_id = ANY($1)
+        AND sl.properties->'componentConfig'->>'controlField' IS NOT NULL
+      )
+      SELECT DISTINCT
+        suc.screen_id,
+        suc.screen_name,
+        suc.main_table,
+        suc.column_name,
+        cl.column_label as source_display_name,
+        cl.reference_table,
+        cl.reference_column,
+        ref_cl.column_label as target_display_name
+      FROM screen_used_columns suc
+      JOIN column_labels cl ON cl.table_name = suc.main_table AND cl.column_name = suc.column_name
+      LEFT JOIN column_labels ref_cl ON ref_cl.table_name = cl.reference_table AND ref_cl.column_name = cl.reference_column
+      WHERE cl.reference_table IS NOT NULL 
+        AND cl.reference_table != ''
+        AND cl.reference_table != suc.main_table
+        AND cl.input_type = 'entity'
+      ORDER BY suc.screen_id
+    `;
+
+    const referenceResult = await pool.query(referenceQuery, [screenIds]);
+
+    logger.info("column_labels reference_table 조회 결과", { 
+      screenIds, 
+      referenceCount: referenceResult.rows.length,
+      references: referenceResult.rows.map((r: any) => ({
+        screenId: r.screen_id,
+        column: r.column_name,
+        refTable: r.reference_table
+      }))
+    });
+
+    referenceResult.rows.forEach((row: any) => {
+      const screenId = row.screen_id;
+      const mainTable = row.main_table;
+      const referenceTable = row.reference_table;
+
+      if (!referenceTable || referenceTable === mainTable) {
+        return;
+      }
+
+      if (!screenSubTables[screenId]) {
+        screenSubTables[screenId] = {
+          screenId,
+          screenName: row.screen_name,
+          mainTable: mainTable || '',
+          subTables: [],
+        };
+      }
+
+      // 중복 체크
+      const exists = screenSubTables[screenId].subTables.some(
+        (st) => st.tableName === referenceTable
+      );
+
+      if (!exists) {
+        screenSubTables[screenId].subTables.push({
+          tableName: referenceTable,
+          componentType: 'column_reference',
+          relationType: 'reference',
+          fieldMappings: [{
+            sourceField: row.column_name,
+            targetField: row.reference_column || 'id',
+            sourceDisplayName: row.source_display_name || row.column_name,
+            targetDisplayName: row.target_display_name || row.reference_column || 'id',
+          }],
+        });
+      } else {
+        // 이미 존재하면 fieldMappings에 추가
+        const existingSubTable = screenSubTables[screenId].subTables.find(
+          (st) => st.tableName === referenceTable
+        );
+        if (existingSubTable && existingSubTable.fieldMappings) {
+          const mappingExists = existingSubTable.fieldMappings.some(
+            (fm) => fm.sourceField === row.column_name
+          );
+          if (!mappingExists) {
+            existingSubTable.fieldMappings.push({
+              sourceField: row.column_name,
+              targetField: row.reference_column || 'id',
+              sourceDisplayName: row.source_display_name || row.column_name,
+              targetDisplayName: row.target_display_name || row.reference_column || 'id',
+            });
+          }
+        }
+      }
+    });
+
+    // 3. parentDataMapping 파싱 (selected-items-detail-input 등에서 사용)
+    const parentMappingQuery = `
+      SELECT 
+        sd.screen_id,
+        sd.screen_name,
+        sd.table_name as main_table,
+        sl.properties->>'componentType' as component_type,
+        sl.properties->'componentConfig'->'parentDataMapping' as parent_data_mapping
+      FROM screen_definitions sd
+      JOIN screen_layouts sl ON sd.screen_id = sl.screen_id
+      WHERE sd.screen_id = ANY($1)
+      AND sl.properties->'componentConfig'->'parentDataMapping' IS NOT NULL
+    `;
+
+    const parentMappingResult = await pool.query(parentMappingQuery, [screenIds]);
+
+    parentMappingResult.rows.forEach((row: any) => {
+      const screenId = row.screen_id;
+      const mainTable = row.main_table;
+      const componentType = row.component_type || 'parentDataMapping';
+      const parentDataMapping = row.parent_data_mapping;
+
+      if (!Array.isArray(parentDataMapping)) return;
+
+      if (!screenSubTables[screenId]) {
+        screenSubTables[screenId] = {
+          screenId,
+          screenName: row.screen_name,
+          mainTable: mainTable || '',
+          subTables: [],
+        };
+      }
+
+      parentDataMapping.forEach((mapping: any) => {
+        const sourceTable = mapping.sourceTable;
+        if (!sourceTable || sourceTable === mainTable) return;
+
+        // 중복 체크
+        const existingSubTable = screenSubTables[screenId].subTables.find(
+          (st) => st.tableName === sourceTable
+        );
+
+        const newMapping = {
+          sourceTable: sourceTable, // 연관 테이블 정보 추가
+          sourceField: mapping.sourceField || '',
+          targetField: mapping.targetField || '',
+          sourceDisplayName: mapping.sourceField || '',
+          targetDisplayName: mapping.targetField || '',
+        };
+
+        if (existingSubTable) {
+          // 이미 존재하면 fieldMappings에 추가
+          if (!existingSubTable.fieldMappings) {
+            existingSubTable.fieldMappings = [];
+          }
+          const mappingExists = existingSubTable.fieldMappings.some(
+            (fm: any) => fm.sourceField === newMapping.sourceField && fm.targetField === newMapping.targetField
+          );
+          if (!mappingExists) {
+            existingSubTable.fieldMappings.push(newMapping);
+          }
+        } else {
+          screenSubTables[screenId].subTables.push({
+            tableName: sourceTable,
+            componentType: componentType,
+            relationType: 'parentMapping',
+            fieldMappings: [newMapping],
+          });
+        }
+      });
+    });
+
+    logger.info("parentDataMapping 파싱 완료", { 
+      screenIds, 
+      parentMappingCount: parentMappingResult.rows.length 
+    });
+
+    // 4. rightPanel.relation 파싱 (split-panel-layout 등에서 사용)
+    const rightPanelQuery = `
+      SELECT 
+        sd.screen_id,
+        sd.screen_name,
+        sd.table_name as main_table,
+        sl.properties->>'componentType' as component_type,
+        sl.properties->'componentConfig'->'rightPanel'->'relation' as right_panel_relation,
+        sl.properties->'componentConfig'->'rightPanel'->'tableName' as right_panel_table,
+        sl.properties->'componentConfig'->'rightPanel'->'columns' as right_panel_columns
+      FROM screen_definitions sd
+      JOIN screen_layouts sl ON sd.screen_id = sl.screen_id
+      WHERE sd.screen_id = ANY($1)
+      AND sl.properties->'componentConfig'->'rightPanel'->'relation' IS NOT NULL
+    `;
+
+    const rightPanelResult = await pool.query(rightPanelQuery, [screenIds]);
+
+    // rightPanel.columns에서 참조되는 외부 테이블 수집 (예: customer_mng.customer_name → customer_mng)
+    const rightPanelJoinedTables: Map<string, Set<string>> = new Map(); // screenId_tableName → Set<참조테이블>
+    
+    rightPanelResult.rows.forEach((row: any) => {
+      const screenId = row.screen_id;
+      const rightPanelTable = row.right_panel_table;
+      const rightPanelColumns = row.right_panel_columns;
+      
+      if (rightPanelColumns && Array.isArray(rightPanelColumns)) {
+        rightPanelColumns.forEach((col: any) => {
+          const colName = col.name || col.columnName || col.field;
+          if (colName && colName.includes('.')) {
+            const refTable = colName.split('.')[0];
+            const key = `${screenId}_${rightPanelTable}`;
+            if (!rightPanelJoinedTables.has(key)) {
+              rightPanelJoinedTables.set(key, new Set());
+            }
+            rightPanelJoinedTables.get(key)!.add(refTable);
+          }
+        });
+      }
+    });
+
+    rightPanelResult.rows.forEach((row: any) => {
+      const screenId = row.screen_id;
+      const mainTable = row.main_table;
+      const componentType = row.component_type || 'split-panel-layout';
+      const relation = row.right_panel_relation;
+      const rightPanelTable = row.right_panel_table;
+
+      // relation 객체에서 테이블 및 필드 매핑 추출
+      const subTable = rightPanelTable || relation?.targetTable || relation?.tableName;
+      if (!subTable || subTable === mainTable) return;
+      
+      // rightPanel.columns에서 참조하는 외부 테이블 목록
+      const key = `${screenId}_${subTable}`;
+      const joinedTables = rightPanelJoinedTables.get(key) ? Array.from(rightPanelJoinedTables.get(key)!) : [];
+
+      if (!screenSubTables[screenId]) {
+        screenSubTables[screenId] = {
+          screenId,
+          screenName: row.screen_name,
+          mainTable: mainTable || '',
+          subTables: [],
+        };
+      }
+
+      // 중복 체크
+      const existingSubTable = screenSubTables[screenId].subTables.find(
+        (st) => st.tableName === subTable
+      );
+
+      // relation에서 필드 매핑 추출
+      const fieldMappings: Array<{ sourceField: string; targetField: string; sourceDisplayName?: string; targetDisplayName?: string }> = [];
+      
+      if (relation?.sourceField && relation?.targetField) {
+        fieldMappings.push({
+          sourceField: relation.sourceField,
+          targetField: relation.targetField,
+          sourceDisplayName: relation.sourceField,
+          targetDisplayName: relation.targetField,
+        });
+      }
+      
+      // fieldMappings 배열이 있는 경우
+      if (relation?.fieldMappings && Array.isArray(relation.fieldMappings)) {
+        relation.fieldMappings.forEach((fm: any) => {
+          fieldMappings.push({
+            sourceField: fm.sourceField || fm.source_field || '',
+            targetField: fm.targetField || fm.target_field || '',
+            sourceDisplayName: fm.sourceField || fm.source_field || '',
+            targetDisplayName: fm.targetField || fm.target_field || '',
+          });
+        });
+      }
+
+      if (existingSubTable) {
+        // 이미 존재하면 fieldMappings에 추가
+        if (!existingSubTable.fieldMappings) {
+          existingSubTable.fieldMappings = [];
+        }
+        fieldMappings.forEach((newMapping) => {
+          const mappingExists = existingSubTable.fieldMappings!.some(
+            (fm) => fm.sourceField === newMapping.sourceField && fm.targetField === newMapping.targetField
+          );
+          if (!mappingExists) {
+            existingSubTable.fieldMappings!.push(newMapping);
+          }
+        });
+        // 추가 정보도 업데이트
+        if (relation?.type) {
+          (existingSubTable as any).originalRelationType = relation.type;
+        }
+        if (relation?.foreignKey) {
+          (existingSubTable as any).foreignKey = relation.foreignKey;
+        }
+        if (relation?.leftColumn) {
+          (existingSubTable as any).leftColumn = relation.leftColumn;
+        }
+      } else {
+        screenSubTables[screenId].subTables.push({
+          tableName: subTable,
+          componentType: componentType,
+          relationType: 'rightPanelRelation',
+          // 관계 유형 추론을 위한 추가 정보
+          originalRelationType: relation?.type || 'join',  // 원본 relation.type ("join" | "detail")
+          foreignKey: relation?.foreignKey,                 // 디테일 테이블의 FK 컬럼
+          leftColumn: relation?.leftColumn,                 // 마스터 테이블의 선택 기준 컬럼
+          joinedTables: joinedTables.length > 0 ? joinedTables : undefined,  // rightPanel.columns에서 참조하는 외부 테이블들
+          fieldMappings: fieldMappings.length > 0 ? fieldMappings : undefined,
+        } as any);
+      }
+    });
+
+    logger.info("rightPanel.relation 파싱 완료", { 
+      screenIds, 
+      rightPanelCount: rightPanelResult.rows.length 
+    });
+    
+    // 5. joinedTables에 대한 FK 컬럼을 column_labels에서 조회
+    // rightPanelRelation에서 joinedTables가 있는 경우, 해당 테이블과 조인하는 FK 컬럼 찾기
+    const joinedTableFKLookups: Array<{ subTableName: string; refTable: string }> = [];
+    Object.values(screenSubTables).forEach((screenData: any) => {
+      screenData.subTables.forEach((subTable: any) => {
+        if (subTable.joinedTables && Array.isArray(subTable.joinedTables)) {
+          subTable.joinedTables.forEach((refTable: string) => {
+            joinedTableFKLookups.push({ subTableName: subTable.tableName, refTable });
+          });
+        }
+      });
+    });
+    
+    // column_labels에서 FK 컬럼 조회 (reference_table로 조인하는 컬럼 찾기)
+    const joinColumnsByTable: { [key: string]: string[] } = {}; // tableName → [FK 컬럼들]
+    if (joinedTableFKLookups.length > 0) {
+      const uniqueLookups = joinedTableFKLookups.filter((item, index, self) =>
+        index === self.findIndex((t) => t.subTableName === item.subTableName && t.refTable === item.refTable)
+      );
+      
+      // 각 subTable에 대해 reference_table이 일치하는 컬럼 조회
+      const subTableNames = [...new Set(uniqueLookups.map(l => l.subTableName))];
+      const refTableNames = [...new Set(uniqueLookups.map(l => l.refTable))];
+      
+      const fkQuery = `
+        SELECT 
+          cl.table_name, 
+          cl.column_name, 
+          cl.column_label, 
+          cl.reference_table, 
+          cl.reference_column,
+          tl.table_label as reference_table_label
+        FROM column_labels cl
+        LEFT JOIN table_labels tl ON cl.reference_table = tl.table_name
+        WHERE cl.table_name = ANY($1)
+        AND cl.reference_table = ANY($2)
+      `;
+      
+      const fkResult = await pool.query(fkQuery, [subTableNames, refTableNames]);
+      
+      // 참조 정보 포함 객체 배열로 저장 (한글명 포함)
+      const joinColumnRefsByTable: Record<string, Array<{ column: string; columnLabel: string; refTable: string; refTableLabel: string; refColumn: string }>> = {};
+      
+      fkResult.rows.forEach((row: any) => {
+        if (!joinColumnRefsByTable[row.table_name]) {
+          joinColumnRefsByTable[row.table_name] = [];
+        }
+        // 중복 체크
+        const exists = joinColumnRefsByTable[row.table_name].some(
+          (ref) => ref.column === row.column_name && ref.refTable === row.reference_table
+        );
+        if (!exists) {
+          joinColumnRefsByTable[row.table_name].push({
+            column: row.column_name,
+            columnLabel: row.column_label || row.column_name, // 컬럼 한글명 (없으면 영문명)
+            refTable: row.reference_table,
+            refTableLabel: row.reference_table_label || row.reference_table, // 참조 테이블 한글명 (없으면 영문명)
+            refColumn: row.reference_column || 'id',
+          });
+        }
+      });
+      
+      // subTables에 joinColumns (문자열 배열) 및 joinColumnRefs (참조 정보 배열) 추가
+      Object.values(screenSubTables).forEach((screenData: any) => {
+        screenData.subTables.forEach((subTable: any) => {
+          const refs = joinColumnRefsByTable[subTable.tableName];
+          if (refs) {
+            (subTable as any).joinColumns = refs.map(r => r.column);
+            (subTable as any).joinColumnRefs = refs;
+          }
+        });
+      });
+      
+      logger.info("rightPanel joinedTables FK 조회 완료", { 
+        lookupCount: uniqueLookups.length,
+        resultCount: fkResult.rows.length,
+        joinColumnsByTable
+      });
+    }
+
+    // 5. 모든 fieldMappings의 한글명을 column_labels에서 가져와서 적용
+    // 모든 테이블/컬럼 조합을 수집
+    const columnLookups: Array<{ tableName: string; columnName: string }> = [];
+    Object.values(screenSubTables).forEach((screenData: any) => {
+      screenData.subTables.forEach((subTable: any) => {
+        if (subTable.fieldMappings) {
+          subTable.fieldMappings.forEach((mapping: any) => {
+            // sourceTable + sourceField (연관 테이블의 컬럼)
+            if (mapping.sourceTable && mapping.sourceField) {
+              columnLookups.push({ tableName: mapping.sourceTable, columnName: mapping.sourceField });
+            }
+            // mainTable + targetField (메인 테이블의 컬럼)
+            if (screenData.mainTable && mapping.targetField) {
+              columnLookups.push({ tableName: screenData.mainTable, columnName: mapping.targetField });
+            }
+          });
+        }
+      });
+    });
+
+    // 중복 제거
+    const uniqueColumnLookups = columnLookups.filter((item, index, self) =>
+      index === self.findIndex((t) => t.tableName === item.tableName && t.columnName === item.columnName)
+    );
+
+    // column_labels에서 한글명 조회
+    const columnLabelsMap: { [key: string]: string } = {};
+    if (uniqueColumnLookups.length > 0) {
+      const columnLabelsQuery = `
+        SELECT 
+          table_name,
+          column_name,
+          column_label
+        FROM column_labels
+        WHERE (table_name, column_name) IN (
+          ${uniqueColumnLookups.map((_, i) => `($${i * 2 + 1}, $${i * 2 + 2})`).join(', ')}
+        )
+      `;
+      const columnLabelsParams = uniqueColumnLookups.flatMap(item => [item.tableName, item.columnName]);
+      
+      try {
+        const columnLabelsResult = await pool.query(columnLabelsQuery, columnLabelsParams);
+        columnLabelsResult.rows.forEach((row: any) => {
+          const key = `${row.table_name}.${row.column_name}`;
+          columnLabelsMap[key] = row.column_label;
+        });
+        logger.info("column_labels 한글명 조회 완료", { count: columnLabelsResult.rows.length });
+      } catch (error: any) {
+        logger.warn("column_labels 한글명 조회 실패 (무시하고 계속 진행):", error.message);
+      }
+    }
+
+    // 각 fieldMappings에 한글명 적용
+    Object.values(screenSubTables).forEach((screenData: any) => {
+      screenData.subTables.forEach((subTable: any) => {
+        if (subTable.fieldMappings) {
+          subTable.fieldMappings.forEach((mapping: any) => {
+            // sourceDisplayName: 연관 테이블의 컬럼 한글명
+            if (mapping.sourceTable && mapping.sourceField) {
+              const sourceKey = `${mapping.sourceTable}.${mapping.sourceField}`;
+              if (columnLabelsMap[sourceKey]) {
+                mapping.sourceDisplayName = columnLabelsMap[sourceKey];
+              }
+            }
+            // targetDisplayName: 메인 테이블의 컬럼 한글명
+            if (screenData.mainTable && mapping.targetField) {
+              const targetKey = `${screenData.mainTable}.${mapping.targetField}`;
+              if (columnLabelsMap[targetKey]) {
+                mapping.targetDisplayName = columnLabelsMap[targetKey];
+              }
+            }
+          });
+        }
+      });
+    });
+
+    // ============================================================
+    // 저장 테이블 정보 추출
+    // ============================================================
+    // 제외 조건:
+    // 1. table-list + 체크박스 활성화 + openModalWithData 버튼이 있는 화면
+    //    → 선택 후 다음 화면으로 넘기는 패턴 (실제 DB 저장 아님)
+    const saveTableQuery = `
+      SELECT DISTINCT
+        sd.screen_id,
+        sd.screen_name,
+        sd.table_name as main_table,
+        sl.properties->'componentConfig'->'action'->>'type' as action_type,
+        sl.properties->>'componentType' as component_type,
+        sl.properties->'componentConfig'->>'targetTable' as target_table,
+        sl.properties->'componentConfig'->'action'->'dataTransfer'->>'targetTable' as transfer_target_table
+      FROM screen_definitions sd
+      JOIN screen_layouts sl ON sd.screen_id = sl.screen_id
+      WHERE sd.screen_id = ANY($1)
+        AND sl.properties->'componentConfig'->'action'->>'type' = 'save'
+        AND sl.properties->'componentConfig'->'action'->>'targetScreenId' IS NULL
+        -- 제외: table-list + 체크박스가 있는 화면
+        AND NOT EXISTS (
+          SELECT 1 FROM screen_layouts sl_list
+          WHERE sl_list.screen_id = sd.screen_id
+            AND sl_list.properties->>'componentType' = 'table-list'
+            AND (sl_list.properties->'componentConfig'->'checkbox'->>'enabled')::boolean = true
+        )
+        -- 제외: openModalWithData 버튼이 있는 화면 (선택 → 다음 화면 패턴)
+        AND NOT EXISTS (
+          SELECT 1 FROM screen_layouts sl_modal
+          WHERE sl_modal.screen_id = sd.screen_id
+            AND sl_modal.properties->'componentConfig'->'action'->>'type' = 'openModalWithData'
+        )
+      ORDER BY sd.screen_id
+    `;
+
+    const saveTableResult = await pool.query(saveTableQuery, [screenIds]);
+
+    saveTableResult.rows.forEach((row: any) => {
+      const screenId = row.screen_id;
+      const mainTable = row.main_table;
+      const actionType = row.action_type as 'save' | 'edit' | 'delete' | 'transferData';
+      const componentType = row.component_type || 'component';
+      const targetTable = row.target_table || row.transfer_target_table || mainTable;
+
+      // 화면 정보가 없으면 초기화
+      if (!screenSubTables[screenId]) {
+        screenSubTables[screenId] = {
+          screenId,
+          screenName: row.screen_name,
+          mainTable: mainTable || '',
+          subTables: [],
+          saveTables: [],
+        };
+      }
+
+      // saveTables 배열 초기화
+      if (!screenSubTables[screenId].saveTables) {
+        screenSubTables[screenId].saveTables = [];
+      }
+
+      // 중복 체크
+      const existingSaveTable = screenSubTables[screenId].saveTables!.find(
+        (st) => st.tableName === targetTable && st.saveType === actionType
+      );
+
+      if (!existingSaveTable && targetTable) {
+        screenSubTables[screenId].saveTables!.push({
+          tableName: targetTable,
+          saveType: actionType,
+          componentType,
+          isMainTable: targetTable === mainTable,
+        });
+      }
+    });
+
+    logger.info("화면 서브 테이블 정보 조회 완료", { 
+      screenIds, 
+      resultCount: Object.keys(screenSubTables).length,
+      details: Object.values(screenSubTables).map(s => ({
+        screenId: s.screenId,
+        mainTable: s.mainTable,
+        subTables: s.subTables.map(st => st.tableName),
+        saveTables: s.saveTables?.map(st => st.tableName) || []
+      }))
+    });
 
     res.json({
       success: true,
diff --git a/backend-node/src/controllers/tableManagementController.ts b/backend-node/src/controllers/tableManagementController.ts
index 1f577777..cb28c873 100644
--- a/backend-node/src/controllers/tableManagementController.ts
+++ b/backend-node/src/controllers/tableManagementController.ts
@@ -780,13 +780,25 @@ export async function getTableData(
       const userField = autoFilter?.userField || "companyCode";
       const userValue = (req.user as any)[userField];
 
-      if (userValue) {
-        enhancedSearch[filterColumn] = userValue;
+      // 🆕 프리뷰용 회사 코드 오버라이드 (최고 관리자만 허용)
+      let finalCompanyCode = userValue;
+      if (autoFilter?.companyCodeOverride && userValue === "*") {
+        // 최고 관리자만 다른 회사 코드로 오버라이드 가능
+        finalCompanyCode = autoFilter.companyCodeOverride;
+        logger.info("🔓 최고 관리자 회사 코드 오버라이드:", {
+          originalCompanyCode: userValue,
+          overrideCompanyCode: autoFilter.companyCodeOverride,
+          tableName,
+        });
+      }
+
+      if (finalCompanyCode) {
+        enhancedSearch[filterColumn] = finalCompanyCode;
 
         logger.info("🔍 현재 사용자 필터 적용:", {
           filterColumn,
           userField,
-          userValue,
+          userValue: finalCompanyCode,
           tableName,
         });
       } else {
@@ -797,6 +809,12 @@ export async function getTableData(
       }
     }
 
+    // 🆕 최종 검색 조건 로그
+    logger.info(
+      `🔍 최종 검색 조건 (enhancedSearch):`,
+      JSON.stringify(enhancedSearch)
+    );
+
     // 데이터 조회
     const result = await tableManagementService.getTableData(tableName, {
       page: parseInt(page),
@@ -880,7 +898,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}`);
@@ -890,7 +911,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}`);
@@ -898,13 +922,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);
@@ -1632,10 +1668,10 @@ export async function toggleLogTable(
 
 /**
  * 메뉴의 상위 메뉴들이 설정한 모든 카테고리 타입 컬럼 조회 (계층 구조 상속)
- * 
+ *
  * @route GET /api/table-management/menu/:menuObjid/category-columns
  * @description 현재 메뉴와 상위 메뉴들에서 설정한 category_column_mapping의 모든 카테고리 컬럼 조회
- * 
+ *
  * 예시:
  * - 2레벨 메뉴 "고객사관리"에서 discount_type, rounding_type 설정
  * - 3레벨 메뉴 "고객등록", "고객조회" 등에서도 동일하게 보임 (상속)
@@ -1648,7 +1684,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({
@@ -1674,8 +1713,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 (
@@ -1697,17 +1739,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
@@ -1737,20 +1783,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
@@ -1760,11 +1817,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({
@@ -1774,7 +1837,7 @@ export async function getCategoryColumnsByMenu(
         });
         return;
       }
-      
+
       const columnsQuery = `
         SELECT 
           ttc.table_name AS "tableName",
@@ -1799,13 +1862,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({
@@ -1830,9 +1895,9 @@ export async function getCategoryColumnsByMenu(
 
 /**
  * 범용 다중 테이블 저장 API
- * 
+ *
  * 메인 테이블과 서브 테이블(들)에 트랜잭션으로 데이터를 저장합니다.
- * 
+ *
  * 요청 본문:
  * {
  *   mainTable: { tableName: string, primaryKeyColumn: string },
@@ -1902,23 +1967,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}"
@@ -1927,29 +1998,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 = `
@@ -1960,7 +2045,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);
     }
 
@@ -1979,12 +2067,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;
       }
 
@@ -1997,15 +2088,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);
       }
 
@@ -2018,7 +2114,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,
         };
@@ -2032,7 +2133,8 @@ export async function multiTableSave(
 
         // 메인 마커 설정
         if (options.mainMarkerColumn) {
-          mainSubItem[options.mainMarkerColumn] = options.mainMarkerValue ?? true;
+          mainSubItem[options.mainMarkerColumn] =
+            options.mainMarkerValue ?? true;
         }
 
         // company_code 추가
@@ -2055,20 +2157,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}"
@@ -2087,14 +2199,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 = `
@@ -2104,7 +2228,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],
+          });
         }
       }
 
@@ -2120,8 +2248,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 = `
@@ -2130,9 +2262,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} 저장 완료`);
@@ -2172,3 +2311,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/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 25c7eea4..4e4d918c 100644
--- a/backend-node/src/services/tableManagementService.ts
+++ b/backend-node/src/services/tableManagementService.ts
@@ -1312,6 +1312,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(
@@ -2267,11 +2302,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);
@@ -2302,10 +2338,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(
@@ -2361,6 +2428,12 @@ export class TableManagementService {
       await query(insertQuery, values);
 
       logger.info(`테이블 데이터 추가 완료: ${tableName}`);
+
+      // 무시된 컬럼과 저장된 컬럼 정보 반환
+      return {
+        skippedColumns,
+        savedColumns: existingColumns,
+      };
     } catch (error) {
       logger.error(`테이블 데이터 추가 오류: ${tableName}`, error);
       throw error;
@@ -2644,6 +2717,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();
@@ -2694,33 +2773,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 조인과 중복되면 추가하지 않음
             }
@@ -2728,14 +2838,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: " - ", // 기본 구분자
             };
 
@@ -3702,6 +3812,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") {
@@ -3710,6 +3829,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,
@@ -4598,4 +4724,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
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
new file mode 100644
index 00000000..27946afa
--- /dev/null
+++ b/docs/화면관계_시각화_개선_보고서.md
@@ -0,0 +1,1745 @@
+# 화면 관계 시각화 기능 개선 보고서
+
+## 개요
+
+화면 그룹 관리에서 ReactFlow를 사용한 화면-테이블 관계 시각화 기능의 범용성 및 정확성 개선 작업을 수행했습니다.
+
+---
+
+## 수정된 파일 목록
+
+| 파일 경로 | 역할 |
+|----------|------|
+| `backend-node/src/controllers/screenGroupController.ts` | 화면 서브테이블 정보 API |
+| `frontend/components/screen/ScreenRelationFlow.tsx` | ReactFlow 시각화 컴포넌트 |
+| `frontend/lib/api/screenGroup.ts` | API 인터페이스 정의 |
+
+---
+
+## 사용된 데이터베이스 테이블
+
+### 화면 정의 관련
+
+| 테이블명 | 용도 | 주요 컬럼 |
+|----------|------|----------|
+| `screen_definitions` | 화면 정의 정보 | `screen_id`, `screen_name`, `table_name`, `company_code` |
+| `screen_layouts` | 화면 레이아웃/컴포넌트 정보 | `screen_id`, `properties` (JSONB - componentConfig 포함) |
+| `screen_groups` | 화면 그룹 정보 | `group_id`, `group_code`, `group_name`, `parent_group_id` |
+| `screen_group_mappings` | 화면-그룹 매핑 | `group_id`, `screen_id`, `display_order` |
+
+### 메타데이터 관련
+
+| 테이블명 | 용도 | 주요 컬럼 |
+|----------|------|----------|
+| `column_labels` | 컬럼 한글명/참조 정보 | `table_name`, `column_name`, `column_label`, `reference_table`, `reference_column` |
+| `table_info` | 테이블 메타 정보 | `table_name`, `table_label`, `column_count` |
+
+### 조인 정보 추출 소스
+
+#### 1. column_labels 테이블 (테이블 관리에서 설정)
+
+```sql
+SELECT 
+  cl.table_name,
+  cl.column_name,
+  cl.reference_table,      -- 참조 테이블
+  cl.reference_column,     -- 참조 컬럼
+  cl.column_label          -- 한글명
+FROM column_labels cl
+WHERE cl.reference_table IS NOT NULL
+```
+
+#### 2. screen_layouts.properties (화면 컴포넌트에서 설정)
+
+```sql
+-- parentDataMapping 추출
+SELECT 
+  sd.screen_id,
+  sl.properties->'componentConfig'->'parentDataMapping' as parent_data_mapping
+FROM screen_definitions sd
+JOIN screen_layouts sl ON sd.screen_id = sl.screen_id
+WHERE sl.properties->'componentConfig'->'parentDataMapping' IS NOT NULL
+
+-- rightPanel.relation 추출
+SELECT 
+  sd.screen_id,
+  sl.properties->'componentConfig'->'rightPanel'->'relation' as right_panel_relation
+FROM screen_definitions sd
+JOIN screen_layouts sl ON sd.screen_id = sl.screen_id
+WHERE sl.properties->'componentConfig'->'rightPanel'->'relation' IS NOT NULL
+
+-- fieldMappings 추출
+SELECT 
+  sd.screen_id,
+  sl.properties->'componentConfig'->'fieldMappings' as field_mappings
+FROM screen_definitions sd
+JOIN screen_layouts sl ON sd.screen_id = sl.screen_id
+WHERE sl.properties->'componentConfig'->'fieldMappings' IS NOT NULL
+```
+
+### 테이블 관계도
+
+```
+screen_groups (그룹)
+    │
+    ├─── screen_group_mappings (매핑)
+    │           │
+    │           └─── screen_definitions (화면)
+    │                       │
+    │                       └─── screen_layouts (레이아웃/컴포넌트)
+    │                                   │
+    │                                   └─── properties.componentConfig
+    │                                           ├── fieldMappings
+    │                                           ├── parentDataMapping
+    │                                           ├── columns.mapping
+    │                                           └── rightPanel.relation
+    │
+    └─── column_labels (컬럼 메타데이터)
+                │
+                ├── reference_table (참조 테이블)
+                └── column_label (한글명)
+```
+
+---
+
+## 핵심 문제 및 해결
+
+### 1. 조인 컬럼 식별 오류
+
+#### 문제
+- `customer_item_mapping` 테이블에서 `customer_id`가 조인 컬럼으로 표시되지 않음
+- `customer_mng`가 `relationType: source`로 분류되어 `sourceField`가 잘못 사용됨
+
+#### 원인
+```typescript
+// 기존 잘못된 로직
+if (subTable.relationType === 'source') {
+  // sourceField를 메인테이블 컬럼으로 사용 (잘못됨)
+  joinColumns.push(mapping.sourceField);
+}
+```
+
+#### 해결
+```typescript
+// 수정된 범용 로직
+if (subTable.relationType === 'source' && mapping.sourceTable) {
+  // sourceTable이 있으면 parentDataMapping과 유사
+  // targetField가 메인테이블 컬럼
+  joinColumns.push(mapping.targetField);
+} else if (subTable.relationType === 'source') {
+  // 일반 source 타입
+  joinColumns.push(mapping.sourceField);
+}
+```
+
+---
+
+### 2. displayColumns 잘못된 처리
+
+#### 문제
+- `selected-items-detail-input` 컴포넌트의 `displayColumns`가 메인테이블 `joinColumns`에 추가됨
+- `customer_name`, `customer_code` 등이 조인 컬럼으로 잘못 표시됨
+
+#### 원인
+```typescript
+// 기존 잘못된 로직
+if (componentConfig.displayColumns) {
+  componentConfig.displayColumns.forEach((col) => {
+    joinColumns.push(col.name); // 연관 테이블 컬럼을 메인테이블에 추가 (잘못됨)
+  });
+}
+```
+
+#### 해결
+```typescript
+// 수정된 로직 - displayColumns는 연관 테이블 컬럼이므로 제외
+// 조인 컬럼은 parentDataMapping.targetField에서 별도 추출됨
+if (componentConfig.displayColumns) {
+  // 메인 테이블 joinColumns에 추가하지 않음
+}
+```
+
+---
+
+### 3. 조인 정보 한글명 미표시
+
+#### 문제
+- 조인 컬럼 옆에 `← customer_code` (영문)로 표시됨
+- `← 거래처 코드` (한글)로 표시되어야 함
+
+#### 해결
+백엔드에서 `column_labels` 테이블 조회하여 한글명 적용:
+
+```typescript
+// 모든 테이블/컬럼 조합 수집
+const columnLookups = [];
+screenSubTables.forEach((screenData) => {
+  screenData.subTables.forEach((subTable) => {
+    subTable.fieldMappings?.forEach((mapping) => {
+      if (mapping.sourceTable && mapping.sourceField) {
+        columnLookups.push({ tableName: mapping.sourceTable, columnName: mapping.sourceField });
+      }
+      if (screenData.mainTable && mapping.targetField) {
+        columnLookups.push({ tableName: screenData.mainTable, columnName: mapping.targetField });
+      }
+    });
+  });
+});
+
+// column_labels에서 한글명 조회
+const columnLabelsQuery = `
+  SELECT table_name, column_name, column_label
+  FROM column_labels
+  WHERE (table_name, column_name) IN (...)
+`;
+
+// 각 fieldMapping에 한글명 적용
+mapping.sourceDisplayName = columnLabelsMap[`${sourceTable}.${sourceField}`];
+mapping.targetDisplayName = columnLabelsMap[`${mainTable}.${targetField}`];
+```
+
+---
+
+### 4. 연결 선 라벨 제거 및 단일 로직화
+
+#### 문제
+- 테이블 간 연결 선에 `customer_code → customer_id` 라벨이 표시됨
+- 조인 정보가 테이블 노드 내부에 이미 표시되므로 중복
+- 메인-메인 테이블 조인 로직이 2개 존재 (주황색, 초록색)
+
+#### 해결
+1. **초록색 선 로직 완전 제거**: 중복 로직으로 인한 혼란 방지
+2. **주황색 선 로직 개선**: 모든 메인-메인 조인을 단일 로직으로 처리
+
+```typescript
+// 메인-메인 조인 엣지 생성 (단일 로직)
+const joinEdges: Edge[] = [];
+
+// 모든 화면의 메인 테이블 목록
+const allMainTables = new Set(Object.values(screenTableMap));
+
+focusedSubTablesData.subTables.forEach((subTable) => {
+  // 1. subTable.tableName이 다른 화면의 메인 테이블인 경우
+  const isTargetMainTable = allMainTables.has(subTable.tableName) 
+    && subTable.tableName !== focusedMainTable;
+  
+  if (isTargetMainTable) {
+    joinEdges.push({
+      id: `edge-main-join-${focusedScreenId}-${subTable.tableName}-${focusedMainTable}`,
+      source: `table-${subTable.tableName}`,
+      target: `table-${focusedMainTable}`,
+      type: 'smoothstep',
+      animated: true,
+      style: {
+        stroke: '#ea580c',  // 주황색 (단일 색상)
+        strokeWidth: 2,
+        strokeDasharray: '8,4',
+      },
+      markerEnd: { type: MarkerType.ArrowClosed, color: '#ea580c' },
+    });
+  }
+  
+  // 2. fieldMappings.sourceTable이 메인 테이블인 경우도 처리
+  // ... (parentMapping, rightPanelRelation 등)
+});
+```
+
+---
+
+### 5. 메인테이블 fieldMappings 미전달
+
+#### 문제
+- 서브테이블에만 `fieldMappings`가 전달되어 조인 정보 표시됨
+- 메인테이블에는 조인 컬럼 옆 연결 정보가 미표시
+
+#### 해결
+메인테이블과 연관테이블에 각각 `fieldMappings` 생성:
+
+```typescript
+// 메인테이블용 fieldMappings 생성
+let mainTableFieldMappings = [];
+if (isFocusedTable && focusedSubTablesData) {
+  focusedSubTablesData.subTables.forEach((subTable) => {
+    subTable.fieldMappings?.forEach((mapping) => {
+      if (subTable.relationType === 'source' && mapping.sourceTable) {
+        mainTableFieldMappings.push({
+          sourceField: mapping.sourceField,
+          targetField: mapping.targetField,
+          sourceDisplayName: mapping.sourceDisplayName,
+          targetDisplayName: mapping.targetDisplayName,
+        });
+      }
+      // ... 기타 relationType 처리
+    });
+  });
+}
+
+// 연관 테이블용 fieldMappings 생성
+let relatedTableFieldMappings = [];
+if (isRelatedTable && relatedTableInfo && focusedSubTablesData) {
+  // 이 테이블이 sourceTable인 경우의 매핑 추출
+}
+
+// node.data에 fieldMappings 전달
+return {
+  ...node,
+  data: {
+    ...node.data,
+    fieldMappings: isFocusedTable ? mainTableFieldMappings 
+                 : (isRelatedTable ? relatedTableFieldMappings : []),
+  },
+};
+```
+
+---
+
+### 6. 엣지 방향 오류 (참조 방향 반대)
+
+#### 문제
+- `customer_mng` 화면 포커스 시 `customer_item_mapping`으로 연결선이 표시됨
+- 실제로는 `customer_item_mapping.customer_id` → `customer_mng.customer_code` 참조 관계
+- 참조하는 쪽(A)이 아닌 참조당하는 쪽(B)에서 연결선이 나가는 오류
+
+#### 원인
+```typescript
+// 기존 잘못된 로직
+newEdges.push({
+  id: edgeId,
+  source: `table-${mainTable}`,           // 참조당하는 테이블 (잘못됨)
+  target: `table-${subTable.tableName}`,  // 참조하는 테이블 (잘못됨)
+  // ...
+});
+```
+
+#### 해결
+```typescript
+// 수정된 올바른 로직 - source/target 교환
+newEdges.push({
+  id: edgeId,
+  source: `table-${subTable.tableName}`,  // 참조하는 테이블 (올바름)
+  target: `table-${mainTable}`,           // 참조당하는 테이블 (올바름)
+  // ...
+});
+```
+
+#### 동작 예시
+| 관계 | 포커스된 화면 | 예상 동작 | 실제 동작 (수정 후) |
+|------|--------------|----------|-------------------|
+| A가 B를 참조 | A 포커스 | A→B 연결선 ✅ | A→B 연결선 ✅ |
+| A가 B를 참조 | B 포커스 | 연결선 없음 ✅ | 연결선 없음 ✅ |
+
+---
+
+### 7. column_labels 필터링 누락
+
+#### 문제
+- `inbound_mng.item_code`가 `item_info`를 참조하는 것으로 조인선 표시
+- 해당 필드는 과거 `entity` 타입이었다가 `text`로 변경됨
+- `reference_table` 데이터가 잔존하여 잘못된 조인 관계 생성
+
+#### 원인
+```sql
+-- 기존 잘못된 쿼리
+WHERE cl.reference_table IS NOT NULL
+  AND cl.reference_table != ''
+  AND cl.reference_table != suc.main_table
+  -- input_type 체크 없음!
+```
+
+#### 해결
+```sql
+-- 수정된 쿼리 - input_type = 'entity' 조건 추가
+WHERE cl.reference_table IS NOT NULL
+  AND cl.reference_table != ''
+  AND cl.reference_table != suc.main_table
+  AND cl.input_type = 'entity'  -- 추가됨
+```
+
+---
+
+## NTT 설정 소스별 처리
+
+시스템에서 조인 정보가 정의되는 모든 소스를 범용적으로 처리합니다:
+
+| 소스 | 위치 | 처리 상태 |
+|------|------|----------|
+| `column_labels.reference_table` | 테이블 관리 | ✅ 처리됨 |
+| `componentConfig.fieldMappings` | autocomplete, entity-search | ✅ 처리됨 |
+| `componentConfig.columns.mapping` | modal-repeater-table | ✅ 처리됨 |
+| `componentConfig.parentDataMapping` | selected-items-detail-input | ✅ 처리됨 |
+| `componentConfig.rightPanel.relation` | split-panel-layout | ✅ 처리됨 |
+
+---
+
+## API 인터페이스 변경
+
+### FieldMappingInfo
+
+```typescript
+export interface FieldMappingInfo {
+  sourceTable?: string;        // 연관 테이블명 (parentDataMapping에서 사용)
+  sourceField: string;
+  targetField: string;
+  sourceDisplayName?: string;  // 연관 테이블 컬럼 한글명
+  targetDisplayName?: string;  // 메인 테이블 컬럼 한글명
+}
+```
+
+### SubTableInfo
+
+```typescript
+export interface SubTableInfo {
+  tableName: string;
+  componentType: string;
+  relationType: 'lookup' | 'source' | 'join' | 'reference' | 'parentMapping' | 'rightPanelRelation';
+  fieldMappings?: FieldMappingInfo[];
+}
+```
+
+---
+
+## 테스트 결과
+
+### 판매품목정보 그룹 (3번째 화면 포커스)
+
+| 테이블 | 컬럼 | 표시 내용 |
+|--------|------|----------|
+| `customer_item_mapping` | 거래처 ID | ← 거래처 코드 (조인) |
+| `customer_item_mapping` | 품목 ID | ← 품번 (조인) |
+| `customer_mng` | 거래처 코드 | ← 거래처 ID (조인) |
+| `item_info` | 품번 | ← 품목 ID (조인) |
+
+### 수주관리 그룹 (기존 정상 작동 확인)
+
+모든 조인 관계 및 컬럼 표시 정상 작동
+
+---
+
+## 범용성 검증
+
+| 항목 | 상태 |
+|------|------|
+| 특정 테이블명 하드코딩 | ❌ 없음 |
+| 특정 컬럼명 하드코딩 | ❌ 없음 |
+| 조건 기반 분기 | ✅ `sourceTable` 존재 여부, `relationType`으로 판단 |
+| 새로운 화면/그룹 적용 | ✅ 자동 적용 |
+
+---
+
+## 시각화 결과 예시
+
+### 포커스 전 (그룹 전체 선택)
+```
+[화면1] ─── [화면2] ─── [화면3]
+   │           │           │
+   ▼           ▼           ▼
+[item_info] [customer_mng] [customer_item_mapping]
+  (메인)       (메인)          (메인)
+```
+
+### 3번째 화면 포커스 시
+```
+[화면1] ─── [화면2] ─── [화면3] ← 활성
+   │           │           │
+   ▼           ▼           ▼
+[item_info]  [customer_mng]  [customer_item_mapping]
+  (연관)        (연관)            (메인/활성)
+    │             │                  │
+    │             │      ┌───────────┴───────────┐
+    │             │      │                       │
+    └─────────────┼──────┤ 거래처 ID ← 거래처 코드  │
+                  │      │ 품목 ID ← 품번          │
+                  │      │ (+ 13개 사용 컬럼)      │
+                  │      └───────────────────────┘
+    ┌─────────────┘
+    │ 거래처 코드 ← 거래처 ID
+    └─────────────────────
+```
+
+---
+
+## 결론
+
+1. **범용성 확보**: 모든 NTT 설정 소스에서 조인 관계 자동 추출
+2. **정확성 개선**: `relationType`과 `sourceTable` 기반 정확한 조인 컬럼 식별
+3. **사용자 경험 향상**: 한글명 표시 및 직관적인 연결 정보 제공
+4. **유지보수성**: 새로운 화면/그룹 추가 시 별도 코드 수정 불필요
+5. **메인-메인 조인 로직 단일화**: 기존 중복 로직(초록색/주황색)을 주황색 단일 로직으로 통합
+   - `subTable.tableName`이 다른 화면의 메인 테이블인 경우 자동 연결
+   - `fieldMappings.sourceTable` 없어도 메인 테이블 간 조인 감지
+6. **연관 테이블 포커싱 개선**: 포커스된 화면의 서브 테이블이 다른 화면의 메인 테이블인 경우 활성화
+   - 회색 처리 대신 정상 표시 및 조인 컬럼 강조
+   - `relatedMainTables` 생성 로직 확장으로 `subTable.tableName` 기반 감지
+7. **선 연결 규격 정립**: 일관되고 직관적인 연결선 방향 규격화
+   - **메인-메인 연결선**: `bottom → bottom_target` 고정 (서브테이블 구간을 통해 연결)
+   - **서브 테이블 연결선**: `bottom → top` 고정 (아래로 문어발처럼 뻗어나감)
+   - **절대 규칙**: 선이 테이블이나 화면을 통과하지 않음
+8. **초기 메인-메인 엣지 생성**: 그룹 로딩 시점에 메인 테이블 간 연결선 미리 생성
+   - 연한 주황색(`#fdba74`) 점선으로 기본 표시
+   - 포커싱 시 진한 주황색(`#ea580c`)으로 강조 및 애니메이션
+   - 중복 방지를 위한 `pairKey` 기반 Set 사용
+9. **ReactFlow Handle ID 구분**: 메인-메인 연결을 위한 핸들 추가
+   - `TableNode`에 `id="bottom_target"` (type="target") 핸들 추가
+   - 메인-메인 엣지는 `sourceHandle="bottom"`, `targetHandle="bottom_target"` 사용
+   - 서브 테이블 엣지는 기존대로 `sourceHandle="bottom"`, `targetHandle="top"` 사용
+10. **메인-메인 강조 로직 개선**: 중복 연결선 및 잘못된 연결선 방지
+    - 포커스된 메인 테이블이 `source`인 경우에만 해당 엣지 강조
+    - 양방향 중복 강조 방지 (A→B와 B→A 동시 강조 안 함)
+    - 연결되지 않은 테이블에서 조인선이 나타나는 문제 해결
+11. **엣지 방향 수정**: 참조 방향에 맞게 엣지 source/target 교정
+    - 기존 잘못된 방향: `mainTable → subTable.tableName` (참조당하는 테이블 → 참조하는 테이블)
+    - 수정된 올바른 방향: `subTable.tableName → mainTable` (참조하는 테이블 → 참조당하는 테이블)
+    - A가 B를 참조(entity 설정)하면: A 포커스 시 A→B 연결선 표시
+    - B 포커스 시 연결선 없음 (B는 A를 참조하지 않으므로)
+12. **column_labels 필터링 강화**: `input_type = 'entity'`인 경우만 참조 관계로 인정
+    - `input_type = 'text'`인 경우 `reference_table`이 있어도 조인 관계로 취급하지 않음
+    - 과거 entity 설정 후 text로 변경된 경우 잔존 데이터 무시
+13. **범용적 엣지 방향 결정 로직**: `relationType`에 따른 조건부 방향 결정
+    - `parentMapping` (sourceTable 있음): `mainTable → sourceTable` 방향
+    - `rightPanelRelation` (foreignKey 있음): `subTable → mainTable` 방향  
+    - `reference` (column_labels): `mainTable → subTable` 방향
+    - 기본값: `subTable → mainTable` 방향
+
+### 연결선 규격 다이어그램
+
+```
+[화면1]   [화면2]   [화면3]   [화면4]
+   │         │         │         │
+   ▼         ▼         ▼         ▼
+[Table1] [Table2] [Table3] [Table4]  ← 메인 테이블
+   │         │         │         │
+   │ bottom  │ bottom  │ bottom  │ bottom
+   ▼         ▼         ▼         ▼
+┌─────────────────────────────────────────┐  ← 서브테이블 구간
+│  (메인-메인 연결선이 이 구간을 통과)       │
+│   ◄── bottom ─ bottom_target ───►       │
+│  (서브테이블 연결선도 이 구간에서 연결)    │
+└─────────────────────────────────────────┘
+   │         │
+   ▼ top     ▼ top
+ [서브1] [서브2] [서브3]  ← 서브 테이블
+```
+
+---
+
+## [계획] 연결선 정리 시스템 설계
+
+> **상태**: 요건 정의 단계 (미구현)
+
+### 배경 및 필요성
+
+현재 시스템에서 연결선 종류가 증가함에 따라 체계적인 선 관리 시스템이 필요합니다.
+
+| 현재 상태 | 문제점 |
+|-----------|--------|
+| 조인선만 존재 | 종속 조회, 저장 테이블 등 추가 선 종류 필요 |
+| 경로 규격 미정립 | 선이 테이블을 통과할 가능성 |
+| 겹침 방지 미흡 | 같은 경로 사용 시 선 겹침 |
+
+---
+
+### 절대 규칙 (위반 불가)
+
+1. **선이 테이블 노드를 가로로 통과하면 안됨**
+2. **선이 화면 노드를 통과하면 안됨**
+3. **같은 종류의 선은 같은 구간에서 이동**
+4. **다른 종류의 선은 겹치지 않아야 함**
+
+---
+
+### 연결선 종류 정의
+
+#### 현재 구현됨
+
+| 번호 | 선 종류 | 의미 | 색상 | 스타일 | 상태 |
+|------|---------|------|------|--------|------|
+| 1 | 화면 → 메인 테이블 | 화면이 사용하는 테이블 | 파란색 (`#3b82f6`) | 실선 | 구현됨 |
+| 2 | 조인선 (엔티티 참조) | 테이블 간 데이터 병합 | 주황색 (`#ea580c`) | 점선 `8,4` | 구현됨 |
+
+#### 추가 예정
+
+| 번호 | 선 종류 | 의미 | 색상 (예정) | 스타일 (예정) | 상태 |
+|------|---------|------|-------------|---------------|------|
+| 3 | 종속 조회선 (Master-Detail) | 선택 기준 필터 조회 | 시안/보라색 | 점선 `4,4` | 미구현 |
+| 4 | 저장 테이블선 | 데이터 저장 대상 | 녹색 | 실선 or 점선 | 미구현 |
+| 5+ | 기타 확장 | 데이터 플로우 등 | 미정 | 미정 | 미구현 |
+
+---
+
+### 개념 구분: Join vs 종속 조회
+
+| 구분 | Join (조인) | 종속 조회 (Filter) |
+|------|------------|-------------------|
+| **데이터 처리** | 두 테이블 **병합** | 한 테이블로 다른 테이블 **필터링** |
+| **표시 방식** | 같은 그리드에 합쳐서 | 별도 그리드에 각각 |
+| **SQL** | `JOIN ON A.key = B.key` | `WHERE B.key = (선택된 A.key)` |
+| **예시** | `inbound_mng` + `item_info` 정보 합침 | `customer_mng` 선택 → `customer_item_mapping` 별도 조회 |
+| **현재 표현** | 주황색 점선 | 미표현 |
+
+**더블 그리드 패턴 예시:**
+```
+[customer_mng 그리드]  |  [customer_item_mapping 그리드]
+     (메인/선택)       →        (필터링된 결과)
+```
+- 이 경우 `customer_mng`가 진짜 메인
+- `customer_item_mapping`은 **종속 조회** (메인이 아님, 선택에 따라 필터링)
+
+---
+
+### 레이아웃 구간 정의
+
+```
+Y: 0-200     ┌─────────────────────────────────────────────┐
+             │  [화면1]   [화면2]   [화면3]   [화면4]       │  ← 화면 구간
+             └─────────────────────────────────────────────┘
+                  │         │         │         │
+Y: 200-300   ════════════════════════════════════════════════  ← 화면-테이블 연결 구간 (파란 실선)
+                  │         │         │         │
+Y: 300-500   ┌─────────────────────────────────────────────┐
+             │ [Table1] [Table2] [Table3] [Table4]         │  ← 메인 테이블 구간
+             └─────────────────────────────────────────────┘
+                  │         │         │         │
+                  ▼         ▼         ▼         ▼
+Y: 500-700   ┌─────────────────────────────────────────────┐
+             │   [서브1]     [서브2]     [서브3]            │  ← 서브 테이블 구간
+             └─────────────────────────────────────────────┘
+                  │         │         │         │
+Y: 700-750   ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─  ← [레벨1] 조인선 구간 (주황)
+Y: 750-800   ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─  ← [레벨2] 종속 조회선 구간 (시안/보라)
+Y: 800-850   ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─  ← [레벨3] 저장 테이블선 구간 (녹색)
+Y: 850+      ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─  ← [레벨4+] 확장 구간
+```
+
+---
+
+### 선 경로 규격
+
+#### 원칙
+1. **수직 이동**: 노드 사이 공간에서만 (노드 통과 안함)
+2. **수평 이동**: 각 선 종류별 전용 레벨에서만
+3. **겹침 방지**: 서로 다른 Y 레벨 사용
+
+#### 선 종류별 경로
+
+| 선 종류 | 출발 핸들 | 도착 핸들 | 수평 이동 레벨 |
+|---------|-----------|-----------|----------------|
+| 화면 → 메인 | 화면 bottom | 테이블 top | Y: 200-300 (화면-테이블 구간) |
+| 메인 → 서브 | 테이블 bottom | 서브 top | Y: 500-700 (서브 테이블 구간 내) |
+| 조인선 (메인-메인) | 테이블 bottom | 테이블 bottom_target | **Y: 700-750** (레벨1) |
+| 종속 조회선 | 테이블 bottom | 테이블 bottom_target | **Y: 750-800** (레벨2) |
+| 저장 테이블선 | 테이블 bottom | 테이블 bottom_target | **Y: 800-850** (레벨3) |
+
+---
+
+### 핸들 설계
+
+현재 `TableNode`에 필요한 핸들:
+
+```
+          [top] (target)           ← 화면에서 오는 선
+              │
+     ┌────────┼────────┐
+     │        │        │
+     │   테이블 노드    │
+     │                 │
+     └────────┬────────┘
+              │
+   [bottom] (source)               ← 나가는 선 (서브테이블, 조인 등)
+              │
+   [bottom_target] (target)        ← 메인-메인 연결용 들어오는 선
+```
+
+**추가 필요 핸들 (겹침 방지용):**
+
+```
+     ┌────────────────────────┐
+     │                        │
+     │      테이블 노드        │
+     │                        │
+     └───┬───────┬───────┬────┘
+         │       │       │
+      (30%)   (50%)   (70%)      ← X 위치
+         │       │       │
+    [bottom_join] [bottom] [bottom_filter]
+         │              │
+    조인선 전용    종속 조회선 전용
+```
+
+---
+
+### 구현 방안 비교
+
+---
+
+#### 방안 A: 커스텀 엣지 경로 (완벽 분리)
+
+**레이어 다이어그램:**
+
+```
+┌─────────────────────────────────────────────────────────────────────┐
+│ [화면1]        [화면2]        [화면3]        [화면4]                │ Y: 0-200
+│    │             │              │              │                    │
+└────┼─────────────┼──────────────┼──────────────┼────────────────────┘
+     │             │              │              │
+═════╧═════════════╧══════════════╧══════════════╧════════════════════  Y: 250 (화면-테이블 구간)
+     │             │              │              │
+┌────┼─────────────┼──────────────┼──────────────┼────────────────────┐
+│ [Table1]     [Table2]       [Table3]       [Table4]                 │ Y: 300-500
+│    │             │              │              │                    │
+└────┼─────────────┼──────────────┼──────────────┼────────────────────┘
+     │             │              │              │
+     ▼             ▼              ▼              ▼
+┌─────────────────────────────────────────────────────────────────────┐
+│          [서브1]         [서브2]         [서브3]                    │ Y: 550-650
+└─────────────────────────────────────────────────────────────────────┘
+     │                                           │
+─────┴───────────── 레벨1: 조인선 (주황) ────────┴─────────────────────  Y: 700
+     │                                           │
+     └───────────────────────────────────────────┘
+     │                                           │
+─────┴───────────── 레벨2: 종속 조회 (보라) ─────┴─────────────────────  Y: 750
+     │                                           │
+     └─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┘
+     │                                           │
+─────┴───────────── 레벨3: 저장 테이블 (녹색) ───┴─────────────────────  Y: 800
+     │                                           │
+     └─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┘
+```
+
+**특징**: 각 선 종류가 **전용 Y 레벨**에서만 수평 이동. 절대 겹치지 않음.
+
+**코드 예시:**
+
+```typescript
+// 커스텀 경로 계산
+const getCustomPath = (source, target, lineType) => {
+  const levels = {
+    join: 725,      // 조인선 Y 레벨
+    filter: 775,    // 종속 조회선 Y 레벨
+    save: 825,      // 저장 테이블선 Y 레벨
+  };
+  
+  const level = levels[lineType];
+  
+  // 수직 → 수평(레벨) → 수직 경로
+  return `M${source.x},${source.y} 
+          L${source.x},${level} 
+          L${target.x},${level} 
+          L${target.x},${target.y}`;
+};
+```
+
+**장점:**
+- 완벽한 분리 보장
+- 절대 규칙 100% 준수
+- 확장성 우수
+
+**단점:**
+- 구현 복잡도 높음
+- ReactFlow 기본 기능 대신 커스텀 필요
+
+---
+
+#### 방안 B: 핸들 위치 분리 + smoothstep
+
+**레이어 다이어그램:**
+
+```
+┌─────────────────────────────────────────────────────────────────────┐
+│ [화면1]        [화면2]        [화면3]        [화면4]                │
+└────┬─────────────┬──────────────┬──────────────┬────────────────────┘
+     │             │              │              │
+┌────┼─────────────┼──────────────┼──────────────┼────────────────────┐
+│ [Table1]     [Table2]       [Table3]       [Table4]                 │
+│  30% 50% 70%                                30% 50% 70%             │ ← 핸들 X 위치
+│   │   │   │                                  │   │   │              │
+└───┼───┼───┼──────────────────────────────────┼───┼───┼──────────────┘
+    │   │   │                                  │   │   │
+    │   │   └── 종속 조회 (보라) ──────────────┼───┼───┘  ← 70% 위치
+    │   │                                      │   │
+    │   └────── 조인선 (주황) ─────────────────┼───┘      ← 50% 위치
+    │                                          │
+    └────────── 저장 테이블 (녹색) ────────────┘          ← 30% 위치
+
+    ※ 시작점은 다르지만 경로가 가까움 (smoothstep 자동 계산)
+    ※ 선이 가까이 지나가서 겹칠 가능성 있음
+```
+
+**특징**: 핸들 X 위치만 다름. **경로가 가까이 지나가서 겹칠 가능성** 있음.
+
+**코드 예시:**
+
+```typescript
+// 핸들 위치로 분리
+<Handle id="bottom_join" style={{ left: '30%' }} />
+<Handle id="bottom_filter" style={{ left: '70%' }} />
+
+// smoothstep + offset
+edge.pathOptions = { offset: lineType === 'filter' ? 50 : 0 };
+```
+
+**장점:**
+- ReactFlow 기본 기능 활용
+- 구현 상대적 단순
+
+**단점:**
+- 완벽한 분리 보장 어려움
+- 복잡한 경우 선 겹침 가능
+
+---
+
+#### 방안 C: 선 대신 마커/뱃지 (종속 조회만)
+
+**레이어 다이어그램:**
+
+```
+┌─────────────────────────────────────────────────────────────────────┐
+│ [화면1]        [화면2]        [화면3]        [화면4]                │
+└────┬─────────────┬──────────────┬──────────────┬────────────────────┘
+     │             │              │              │
+┌────┼─────────────┼──────────────┼──────────────┼────────────────────┐
+│ [Table1]     [Table2]       [Table3]       [Table4 🔗]              │
+│    │                                          ↑                     │
+│    │                              "Table1에서 필터 조회" (툴팁)     │
+│    │                                                                │
+│    └────────── 조인선만 표시 (주황) ──────────┘                     │
+│                                                                     │
+│   ※ 종속 조회, 저장 테이블은 선 없이 뱃지/아이콘으로만 표시         │
+│   ※ 마우스 오버 시 관계 정보 툴팁 표시                              │
+└─────────────────────────────────────────────────────────────────────┘
+     │
+     ▼
+┌─────────────────────────────────────────────────────────────────────┐
+│          [서브1]         [서브2]         [서브3]                    │
+└─────────────────────────────────────────────────────────────────────┘
+```
+
+**특징**: 선 없음 = **겹침/통과 문제 없음**. 하지만 관계 시각화 약함.
+
+**코드 예시:**
+
+```typescript
+// 테이블 노드에 관계 뱃지 표시
+<TableNode>
+  <Badge icon="filter" tooltip="customer_mng에서 필터 조회" />
+</TableNode>
+```
+
+**장점:**
+- 선 없음 = 겹침/통과 문제 없음
+- 화면 깔끔
+
+**단점:**
+- 관계 시각화 약함
+- 일관성 부족 (조인은 선, 종속은 뱃지)
+
+---
+
+#### 방안 D: 하이브리드 (커스텀 경로 통일) - 권장
+
+**레이어 다이어그램:**
+
+```
+┌─────────────────────────────────────────────────────────────────────┐
+│ 레이어 0: 화면 노드                                                 │
+│ [화면1]        [화면2]        [화면3]        [화면4]                │
+└─────────────────────────────────────────────────────────────────────┘
+                                ↓
+┌─────────────────────────────────────────────────────────────────────┐
+│ 레이어 1: 화면-테이블 연결 (파란 실선)                              │
+│ ═══════════════════════════════════════════════════════════════════ │  Y: 250
+└─────────────────────────────────────────────────────────────────────┘
+                                ↓
+┌─────────────────────────────────────────────────────────────────────┐
+│ 레이어 2: 메인 테이블 노드                                          │
+│ [Table1]     [Table2]       [Table3]       [Table4]                 │
+└─────────────────────────────────────────────────────────────────────┘
+                                ↓
+┌─────────────────────────────────────────────────────────────────────┐
+│ 레이어 3: 서브 테이블 노드                                          │
+│          [서브1]         [서브2]         [서브3]                    │
+└─────────────────────────────────────────────────────────────────────┘
+                                ↓
+┌─────────────────────────────────────────────────────────────────────┐
+│ 레이어 4: 조인선 구간 (주황색)                                      │
+│ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─  │  Y: 700-725
+│     Table1 ──────────────────────────────────► Table4               │
+└─────────────────────────────────────────────────────────────────────┘
+                                ↓
+┌─────────────────────────────────────────────────────────────────────┐
+│ 레이어 5: 종속 조회 구간 (보라색)                                   │
+│ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─  │  Y: 750-775
+│     Table1 ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─► Table3               │
+└─────────────────────────────────────────────────────────────────────┘
+                                ↓
+┌─────────────────────────────────────────────────────────────────────┐
+│ 레이어 6: 저장 테이블 구간 (녹색)                                   │
+│ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─  │  Y: 800-825
+│     Table2 ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─► Table4               │
+└─────────────────────────────────────────────────────────────────────┘
+                                ↓
+┌─────────────────────────────────────────────────────────────────────┐
+│ 레이어 7+: 확장 가능                                                │
+│ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─  │  Y: 850+
+│     (미래 확장용)                                                   │
+└─────────────────────────────────────────────────────────────────────┘
+```
+
+**특징**: 모든 선이 **전용 레이어**에서 이동. 확장성 최고. 절대 겹치지 않음.
+
+**구현 방식:**
+- **조인선**: 커스텀 경로 (방안 A) - 레벨4 (Y: 700-725)
+- **종속 조회선**: 커스텀 경로 (방안 A) - 레벨5 (Y: 750-775)
+- **저장 테이블선**: 커스텀 경로 (방안 A) - 레벨6 (Y: 800-825)
+
+모든 선을 동일한 커스텀 경로 시스템으로 통일.
+
+**장점:**
+- 일관된 시스템
+- 완벽한 분리
+- 확장성 최고
+- 절대 규칙 100% 준수
+
+**단점:**
+- 초기 구현 비용 높음
+
+---
+
+### 방안 비교 요약표
+
+| 방안 | 겹침 방지 | 절대규칙 준수 | 구현 복잡도 | 확장성 | 시각적 일관성 |
+|------|-----------|---------------|-------------|--------|---------------|
+| **A** | 완벽 | 100% | 높음 | 좋음 | 좋음 |
+| **B** | 불완전 | 90% | 낮음 | 보통 | 보통 |
+| **C** | 완벽 (선 없음) | 100% | 낮음 | 좋음 | 약함 |
+| **D** | **완벽** | **100%** | 높음 | **최고** | **최고** |
+
+---
+
+### 구현 우선순위 (제안)
+
+| 순서 | 작업 | 설명 |
+|------|------|------|
+| 1 | 커스텀 엣지 컴포넌트 개발 | 레벨 기반 경로 계산 |
+| 2 | 기존 조인선 마이그레이션 | smoothstep → 커스텀 경로 |
+| 3 | 종속 조회선 구현 | 레벨2 경로 + 시안/보라 색상 |
+| 4 | 저장 테이블선 구현 | 레벨3 경로 + 녹색 |
+| 5 | 테스트 및 최적화 | 다양한 그룹에서 검증 |
+
+---
+
+### 색상 팔레트 (확정 - 2026-01-08)
+
+| 관계 유형 | 시각적 유형 | 기본 색상 | 강조 색상 | 설명 |
+|-----------|-------------|-----------|-----------|------|
+| 화면 → 메인 | - | `#3b82f6` (파랑) | `#2563eb` | 화면-테이블 연결 |
+| 마스터-디테일 | `filter` | `#8b5cf6` (보라) | `#c4b5fd` | split-panel의 필터링 관계 |
+| 계층 구조 | `hierarchy` | `#06b6d4` (시안) | `#a5f3fc` | 부모-자식 자기 참조 |
+| 코드 참조 | `lookup` | `#f59e0b` (주황) | `#fcd34d` | autocomplete 등 코드→명칭 |
+| 데이터 매핑 | `mapping` | `#10b981` (녹색) | `#6ee7b7` | parentDataMapping |
+| 엔티티 조인 | `join` | `#ea580c` (주황) | `#fdba74` | 실제 LEFT/INNER JOIN |
+
+---
+
+## 관계 유형 추론 시스템 (2026-01-08 구현)
+
+### 구현 개요
+
+테이블 간 연결선이 단순 "조인"만이 아니라 다양한 관계 유형을 가지므로, 
+기존 컴포넌트 설정을 기반으로 관계 유형을 추론하여 시각화에 반영합니다.
+
+### 관계 유형 분류
+
+| 유형 | 기술적 의미 | 컴포넌트 | 식별 조건 |
+|------|------------|----------|-----------|
+| `filter` | 마스터-디테일 필터링 | split-panel-layout | `relationType='rightPanelRelation'` + `originalRelationType='join'` |
+| `hierarchy` | 자기 참조 계층 구조 | split-panel-layout | `relationType='rightPanelRelation'` + `originalRelationType='detail'` |
+| `mapping` | 데이터 참조 주입 | selected-items-detail-input | `relationType='parentMapping'` |
+| `lookup` | 코드→명칭 변환 | autocomplete, entity-search | `relationType='lookup'` |
+| `join` | 실제 엔티티 조인 | column_labels 참조 | `relationType='reference'` |
+
+### 백엔드 수정 사항
+
+`screenGroupController.ts`의 `getScreenSubTables` 함수에서 추가 필드 전달:
+
+```typescript
+// rightPanel.relation 파싱 시
+screenSubTables[screenId].subTables.push({
+  tableName: subTable,
+  componentType: componentType,
+  relationType: 'rightPanelRelation',
+  originalRelationType: relation?.type || 'join',  // 추가: 원본 relation.type
+  foreignKey: relation?.foreignKey,                 // 추가: FK 컬럼
+  leftColumn: relation?.leftColumn,                 // 추가: 마스터 컬럼
+  fieldMappings: ...,
+});
+```
+
+### 프론트엔드 수정 사항
+
+1. **타입 확장** (`screenGroup.ts`):
+   - `SubTableInfo`에 `originalRelationType`, `foreignKey`, `leftColumn` 필드 추가
+   - `VisualRelationType` 타입 정의: `'filter' | 'hierarchy' | 'lookup' | 'mapping' | 'join'`
+   - `inferVisualRelationType()` 함수 추가
+
+2. **시각화 적용** (`ScreenRelationFlow.tsx`):
+   - `RELATION_COLORS` 상수 정의 (관계 유형별 색상)
+   - 엣지 생성 시 `inferVisualRelationType()` 호출
+   - 엣지 스타일에 관계 유형별 색상 적용
+
+### 2026-01-09 추가 수정 사항
+
+1. **방향 수정**: `rightPanelRelation` 엣지 방향을 `mainTable → subTable`로 변경
+   - 이전: `customer_item_mapping → customer_mng` (디테일 → 마스터, 잘못됨)
+   - 수정: `customer_mng → customer_item_mapping` (마스터 → 디테일, 올바름)
+
+2. **화면별 엣지 분리**: 같은 테이블 쌍이라도 화면별로 별도 엣지 생성
+   - `pairKey`에 `screenId` 포함: `${sourceScreenId}-${[mainTable, subTable].sort().join('-')}`
+   - `edgeId`에 `screenId` 포함: `edge-main-main-${sourceScreenId}-${referrerTable}-${referencedTable}`
+
+3. **포커스 필터링 개선**: 해당 화면에서 생성된 연결선만 표시
+   - 이전: `sourceTable === focusedMainTable` 조건만 체크 (다른 화면 연결선도 표시됨)
+   - 수정: `edge.data.sourceScreenId === focusedScreenId` 조건으로 변경
+
+4. **parentMapping을 join으로 변경**: `selected-items-detail-input`의 `parentDataMapping`은 FK 관계이므로 `join`으로 분류
+   - `customer_item_mapping → customer_mng`: 주황색 (FK: customer_id → customer_code)
+   - `customer_item_mapping → item_info`: 주황색 (FK: item_id → item_number)
+
+5. **참조 테이블 시각적 표시**: lookup/reference 관계로 참조되는 테이블에 "X곳 참조" 배지 표시
+   - `TableNodeData`에 `referencedBy` 필드 추가
+   - `ReferenceInfo` 인터페이스 정의 (fromTable, fromColumn, toColumn, relationType)
+   - 테이블 노드 헤더에 주황색 배지로 참조 카운트 표시
+   - 툴팁에 참조하는 테이블 목록 표시
+
+6. **마스터-디테일 필터링 관계 표시**: 디테일 테이블에 "X 필터" 배지 표시
+   - 마스터-디테일 관계(rightPanelRelation)도 참조 정보 수집에 추가
+   - **보라색 배지**로 "customer_mng 필터" 형태로 표시
+   - 툴팁에 FK 컬럼 정보 표시 (예: "customer_mng에서 필터링 (FK: customer_id)")
+   - lookup 관계는 주황색, filter 관계는 보라색으로 구분
+
+7. **FK 컬럼 보라색 강조 + 키값 정보 표시**
+   - 디테일 테이블에서 필터링에 사용되는 FK 컬럼을 **보라색 배경**으로 강조
+   - 컬럼 옆에 참조 정보 표시: "← customer_mng.customer_code"
+   - 배지에 키값 정보 명확히 표시: "customer_mng.customer_code 필터"
+   - `TableNodeData`에 `filterColumns` 필드 추가
+   - `ReferenceInfo`에서 `toColumn` 정보로 FK 컬럼 식별
+
+8. **포커스 상태 기반 필터 표시 개선**
+   - **문제**: 필터 배지가 모든 화면에서 항상 표시되어 혼란 발생
+   - **해결**: 포커스된 화면에서만 해당 관계의 필터 정보 표시
+   - 노드 생성 시 `referencedBy`, `filterColumns` 제거
+   - `styledNodes` 함수에서 포커스 상태에 따라 동적으로 설정
+   - 배지를 헤더 아래 별도 영역으로 이동하여 테이블명 가림 방지
+
+**결과:**
+| 화면 | customer_item_mapping 표시 |
+|------|----------------------------|
+| 1번 화면 포커스 | 필터 배지 O + FK 컬럼 보라색 + **상단 정렬** |
+| 4번 화면 포커스 | 필터 배지 X, 조인만 표시 |
+| 그룹 선택 (포커스 없음) | 필터 배지 X, 테이블명만 표시 |
+
+9. **필터 컬럼 상단 정렬**
+   - 필터 컬럼도 파란색/주황색 컬럼처럼 상단에 정렬되어 표시
+   - `potentialFilteredColumns`에 `filterSet` 포함
+   - 정렬 순서: **조인 컬럼 → 필터 컬럼 → 사용 컬럼**
+   - 보라색 강조로 필터링 관계 명확히 구분
+
+**정렬 우선순위:**
+| 순서 | 컬럼 유형 | 색상 | 설명 |
+|------|----------|------|------|
+| 1 | 조인 컬럼 | 주황색 | FK 조인 관계 |
+| 2 | 필터 컬럼 | 보라색 | 마스터-디테일 필터링 |
+| 3 | 사용 컬럼 | 파란색 | 화면 필드 매핑 |
+
+10. **방안 C 적용: 필터선 제거 + 보라색 테두리 애니메이션**
+    - 필터 관계는 선 없이 뱃지 + 테이블 테두리로만 표시 (겹침 방지)
+    - 필터링된 테이블에 **보라색 테두리** 적용 (부드러운 색상 전환)
+    - 조인선(주황)만 표시, 필터선(보라) 제거
+
+11. **테이블 높이 부드러운 애니메이션**
+    - 포커스 시 컬럼 목록이 변경될 때 **부드러운 높이 전환** 적용
+    - `transition: height 0.5s cubic-bezier(0.4, 0, 0.2, 1)` 사용
+    - **Debounce 로직** (50ms): 듀얼 그리드에서 filterColumns와 joinColumns가 2단계로 업데이트되는 문제 해결
+    - 중간 값(늘어났다가 줄어드는 현상) 무시, 최종 값만 적용
+
+12. **뱃지 영역 레이아웃 개선**
+    - 뱃지를 컬럼 목록 영역 **안에 포함** (높이 늘어남 방지)
+    - `calculatedHeight`에 뱃지 높이(26px) 포함하여 계산
+    - 뱃지와 컬럼 동시 변경으로 "늘어났다가 줄어드는" 현상 해결
+
+13. **뱃지 스타일 개선**
+    - 회색 테두리 (`border-slate-300`) + 연한 배경 (`bg-slate-50`)
+    - 보라색 컬럼과 확실히 구분되는 디자인
+    - 필터 태그: 보라색 pill 스타일 (`rounded-full bg-violet-600`)
+
+**시각적 표현:**
+| 관계 유형 | 선 표시 | 테두리 | 배지 |
+|----------|---------|--------|------|
+| 조인 | ✅ 주황색 점선 | - | "조인" |
+| 필터 | ❌ 없음 | 보라색 (부드러운 전환) | "필터 + 키값" |
+| 룩업 | ✅ 황색 점선 | - | "N곳 참조" |
+
+**구현 상세:**
+- `ScreenRelationFlow.tsx`: `visualRelationType === 'filter'`인 경우 엣지 생성 건너뛰기
+- `ScreenNode.tsx`: 
+  - `hasFilterRelation` 조건으로 보라색 테두리 + 부드러운 색상 전환 적용
+  - `calculatedHeight`에 뱃지 높이 포함
+  - `debouncedHeight` 사용으로 중간 값 무시
+  - 뱃지를 컬럼 목록 div 안에 배치
+
+### 향후 개선 가능 사항
+
+1. [ ] 범례(Legend) UI 추가 - 관계 유형별 색상 설명
+2. [ ] 엣지 라벨에 관계 유형 표시
+3. [x] 툴팁에 상세 관계 정보 표시 (FK, 연결 컬럼 등) - 완료
+
+---
+
+### 다음 단계
+
+1. [x] 방안 확정 - 방안 1 (추론 로직) 선택
+2. [x] 색상 팔레트 확정
+3. [x] 관계 유형 추론 함수 구현
+4. [x] 방향 및 포커스 필터링 수정
+5. [x] parentMapping을 join으로 변경
+6. [x] 참조 테이블 시각적 표시 추가
+7. [x] 마스터-디테일 필터링 관계 표시 추가
+8. [x] FK 컬럼 보라색 강조 + 키값 정보 표시
+9. [x] 포커스 상태 기반 필터 표시 개선
+10. [x] 필터 컬럼 상단 정렬 (조인 → 필터 → 사용 순서)
+11. [x] 방안 C 적용: 필터선 제거 + 보라색 테두리 (펄스 → 부드러운 전환으로 변경)
+12. [x] 테이블 높이 부드러운 애니메이션 + Debounce 적용
+13. [x] 뱃지 영역 레이아웃 개선 (컬럼 목록 안에 포함)
+14. [x] 뱃지 스타일 개선 (회색 테두리로 컬럼과 구분)
+15. [x] 서브테이블 Y 좌표 조정 (690px → 740px)
+16. [x] **저장 테이블 시각화** (구현 완료)
+17. [x] 테이블 스크롤 기능 추가 (maxHeight + overflow-y-auto)
+18. [x] 테이블/헤더 둥근 모서리 (rounded-xl, rounded-t-xl)
+19. [x] 필터 테이블 조인선 + 참조 테이블 활성화
+20. [x] 조인선 색상 상수 통일 (RELATION_COLORS.join.stroke)
+21. [x] 필터 연결선 포커싱 제어 (해당 화면 포커싱 시에만 표시)
+22. [x] 저장 테이블 제외 조건 추가 (table-list + 체크박스 + openModalWithData)
+23. [x] 첫 진입 시 포커싱 없이 시작 (트리에서 화면 클릭 시 그룹만 진입)
+24. [ ] **선 교차점 이질감 해결** (계획 중)
+22. [ ] 범례 UI 추가 (선택사항)
+23. [ ] 엣지 라벨에 관계 유형 표시 (선택사항)
+
+---
+
+## 저장 테이블 시각화 (구현 완료)
+
+### 개요
+화면에서 데이터가 **어떤 테이블에 저장**되는지 시각화
+
+### 저장 테이블 유형
+
+| 유형 | 설명 | 예시 |
+|------|------|------|
+| **메인 저장** | 화면의 메인 테이블에 직접 저장 | 수주등록 → `sales_order_mng` |
+| **연계 저장** | 버튼 클릭 → 다른 화면의 테이블에 저장 | 수주관리 → 출하계획 → `shipment_plan` |
+| **서브 저장** | 듀얼 그리드에서 서브 테이블에 저장 | 거래처관리 → `customer_item_mapping` |
+
+### 데이터 수집 방법 (백엔드)
+
+저장 테이블 정보를 찾을 수 있는 곳:
+1. `componentConfig.action.type = 'save'` (edit, delete 제외)
+2. `componentConfig.targetTable` (modal-repeater-table 등)
+3. `action.dataTransfer.targetTable` (데이터 전송 대상)
+
+**제외 조건:**
+1. `action.targetScreenId IS NOT NULL` (모달 열기 버튼)
+2. `table-list` + 체크박스 활성화 + `openModalWithData` 버튼이 있는 화면
+   - 예: "거래처별 품목 추가 모달" - 선택 후 다음 화면으로 넘기는 패턴
+   - 이 경우 "저장" 버튼은 DB 저장이 아닌 **선택 확인 용도**
+
+```sql
+-- 제외 조건 SQL
+AND NOT EXISTS (
+  SELECT 1 FROM screen_layouts sl_list
+  WHERE sl_list.screen_id = sd.screen_id
+    AND sl_list.properties->>'componentType' = 'table-list'
+    AND (sl_list.properties->'componentConfig'->'checkbox'->>'enabled')::boolean = true
+)
+AND NOT EXISTS (
+  SELECT 1 FROM screen_layouts sl_modal
+  WHERE sl_modal.screen_id = sd.screen_id
+    AND sl_modal.properties->'componentConfig'->'action'->>'type' = 'openModalWithData'
+)
+```
+
+### 시각적 표현 (구현됨)
+
+**핑크색 막대기 표시**
+- 테이블 노드 **왼쪽 바깥**에 핑크색 세로 막대기 표시
+- 위에서 아래로 나타나는 애니메이션 (`scaleY` 트랜지션)
+- 포커스 해제 시 사라지는 애니메이션
+- 막대기 양끝 그라데이션 (투명 → 핑크 → 투명)
+
+**스타일:**
+```css
+/* 저장 막대기 스타일 */
+position: absolute;
+left: -6px;  /* -left-1.5 */
+top: 4px;
+bottom: 4px;
+width: 2px;  /* w-0.5 */
+background: linear-gradient(
+  to bottom, 
+  transparent 0%, 
+  #f472b6 15%,   /* pink-400 */
+  #f472b6 85%, 
+  transparent 100%
+);
+transition: all 0.5s ease-out;
+transform-origin: top;
+```
+
+**애니메이션:**
+- 포커스 시: `opacity: 1, scaleY: 1` (나타남)
+- 포커스 해제 시: `opacity: 0, scaleY: 0` (사라짐)
+
+### 색상 팔레트
+
+| 관계 유형 | 선 색상 | 뱃지/막대 색상 | 컬럼 강조 |
+|----------|---------|---------------|----------|
+| 조인 | 주황 (#F97316) | 주황 | 주황 |
+| 필터 | - | 보라 (#8B5CF6) | 보라 |
+| 룩업 | 황색 (#EAB308) | 황색 | - |
+| **저장** | - | 핑크 (#F472B6) | - |
+
+### 구현 단계 (완료)
+
+1. [x] 백엔드: `getScreenSubTables`에서 저장 테이블 정보 추출
+2. [x] 타입 정의: `SaveTableInfo` 인터페이스 추가
+3. [x] 프론트엔드: 핑크색 막대기 UI 구현
+4. [x] 프론트엔드: 포커싱 시에만 표시
+5. [x] 프론트엔드: 나타나기/사라지기 애니메이션
+6. [ ] 프론트엔드: 뱃지 클릭 시 팝오버 상세정보 (향후)
+
+---
+
+## 필터 테이블 조인선 시각화 (구현 완료)
+
+### 개요
+마스터-디테일 관계에서 **필터 대상 테이블**이 **다른 테이블과 조인**하는 경우도 시각화
+
+### 시나리오
+"거래처관리 화면" (1번 화면) 포커싱 시:
+- `customer_mng` (마스터) → `customer_item_mapping` (디테일) 필터 관계
+- `customer_item_mapping` → `item_info` **조인 관계** (품목 ID → 품번)
+
+### 구현 내용
+
+1. **화면 → 필터 대상 테이블 연결선**
+   - 파란색 점선으로 화면 → `customer_item_mapping` 연결
+   - 기존 `customer_mng`로만 가던 연결 외에 추가
+
+2. **필터 대상 테이블의 조인선**
+   - `customer_item_mapping` → `item_info` 주황색 점선 조인선
+   - `joinColumnRefs` 기반으로 자동 생성
+
+3. **참조 테이블 활성화**
+   - `item_info` 테이블도 함께 활성화 (회색 처리 안 함)
+   - 조인 컬럼 주황색 강조 표시
+
+### 포커싱 제어
+
+**조인선 (주황색 점선)**
+- 해당 화면이 포커싱됐을 때만 활성화
+- 다른 화면 포커싱 시 흐리게 처리 (opacity: 0.3)
+- 엣지 ID: `edge-filter-join-{screenId}-{sourceTable}-{targetTable}`
+
+**필터 연결선 (파란색 점선)**
+- 화면 → 필터 대상 테이블 연결선
+- 해당 화면이 포커싱됐을 때만 표시 (opacity: 1)
+- 포커스 해제 시 완전히 숨김 (opacity: 0)
+- 엣지 ID: `edge-screen-filter-{screenId}-{tableName}`
+
+**styledEdges 처리:**
+```typescript
+// 필터 조인 엣지 (주황색)
+if (edge.id.startsWith("edge-filter-join-")) {
+  const isActive = focusedScreenId === edgeSourceScreenId;
+  return {
+    ...edge,
+    style: {
+      stroke: isActive ? RELATION_COLORS.join.stroke : RELATION_COLORS.join.strokeLight,
+      opacity: isActive ? 1 : 0.3,
+    },
+  };
+}
+
+// 화면 → 필터 대상 테이블 연결선 (파란색)
+if (edge.id.startsWith("edge-screen-filter-")) {
+  const isActive = focusedScreenId === edgeSourceScreenId;
+  return {
+    ...edge,
+    style: {
+      opacity: isActive ? 1 : 0, // 포커스 해제 시 완전히 숨김
+    },
+  };
+}
+```
+
+### 코드 위치
+- `ScreenRelationFlow.tsx`: 필터 조인 엣지 생성 + styledEdges 처리
+- `styledNodes`: 필터 대상 테이블의 조인 참조 테이블 활성화 로직
+
+---
+
+## 테이블 노드 UI 개선 (구현 완료)
+
+### 스크롤 기능
+- 컬럼이 많을 경우 스크롤 가능 (`overflow-y-auto`)
+- 최대 높이 제한 (`maxHeight: 300px`)
+- 얇은 스크롤바 (`scrollbar-thin`)
+
+### 둥근 모서리
+- 테이블 전체: `rounded-xl` (12px)
+- 헤더: `rounded-t-xl` (상단만 12px)
+
+### 조인선 색상 통일
+- 모든 조인선이 `RELATION_COLORS.join.stroke` 상수 사용
+- 기본 색상: `#f97316` (orange-500)
+- 강조 색상: `#ea580c` (orange-600)
+
+### 첫 진입 시 포커싱 없이 시작
+
+**문제:**
+- 트리에서 화면을 클릭하면 해당 화면이 자동 포커싱됨
+- 첫 진입 시 노드 위치가 안정화되기 전에 필터선이 그려져 "망가진" 모습
+
+**해결:**
+- 트리에서 화면 클릭 시: 그룹만 진입, 포커싱 없음
+- ReactFlow 안에서 화면 클릭 시: 정상 포커싱
+
+**코드 변경:**
+```typescript
+// page.tsx - onScreenSelectInGroup 콜백
+onScreenSelectInGroup={(group, screenId) => {
+  const isNewGroup = selectedGroup?.id !== group.id;
+  
+  if (isNewGroup) {
+    // 새 그룹 진입: 포커싱 없이 시작
+    setSelectedGroup(group);
+    setFocusedScreenIdInGroup(null);
+  } else {
+    // 같은 그룹 내에서 다른 화면 클릭: 포커싱 유지
+    setFocusedScreenIdInGroup(screenId);
+  }
+  setSelectedScreen(null);
+}}
+```
+
+**사용자 경험:**
+1. 트리에서 화면 클릭 (첫 진입) → 깔끔한 초기 상태 (모든 화면/테이블 동일 밝기)
+2. 같은 그룹 내에서 다른 화면 클릭 → 포커싱 + 연결선 표시
+3. ReactFlow에서 화면 노드 클릭 → 포커싱 + 연결선 표시
+
+---
+
+## [계획] 선 교차점 이질감 해결
+
+> **상태**: 방안 검토 중 (미구현)
+
+### 배경
+여러 파란색 연결선이 서로 교차할 때 시각적 이질감 발생
+
+### 해결 방안
+
+#### 방안 C: 배경색 테두리 (Outline) - 권장
+- 각 선에 **흰색 테두리(outline)** 추가
+- 교차할 때 위에 있는 선이 아래 선을 "덮는" 효과
+- SVG stroke에 흰색 outline 적용
+
+**구현 방식:**
+```typescript
+// 커스텀 엣지 컴포넌트에서
+<path 
+  d={edgePath} 
+  stroke="white" 
+  strokeWidth={strokeWidth + 4}  // 배경 테두리
+/>
+<path 
+  d={edgePath} 
+  stroke={strokeColor} 
+  strokeWidth={strokeWidth}  // 실제 선
+/>
+```
+
+**장점:**
+- 구현 비교적 쉬움
+- 교차점이 깔끔하게 분리되어 보임
+- 핸들 위치/경로 변경 없음
+
+**단점:**
+- 선이 약간 두꺼워 보일 수 있음
+
+---
+
+## 화면 관리 시스템 업그레이드 현황
+
+### 프로젝트 개요
+
+화면 관리 시스템 업그레이드를 통해 다음 3가지 핵심 기능을 구현:
+
+| 기능 | 설명 | 상태 |
+|------|------|------|
+| **화면 그룹핑** | 관련 화면들을 그룹으로 묶어 관리 (트리 구조) | 기본 구현 완료 |
+| **화면-테이블 관계 시각화** | React Flow를 사용한 노드 기반 시각화 | 기본 구현 완료 |
+| **테이블 조인 설정** | 화면 내에서 테이블 간 조인 관계 직접 설정 | 미구현 |
+
+---
+
+### 데이터베이스 테이블 (5개)
+
+| 테이블명 | 용도 | 상태 |
+|----------|------|------|
+| `screen_groups` | 화면 그룹 정보 | 생성됨 |
+| `screen_group_screens` | 화면-그룹 연결 (N:M) | 생성됨 |
+| `screen_field_joins` | 화면 필드 조인 설정 | 생성됨 |
+| `screen_data_flows` | 화면 간 데이터 흐름 | 생성됨 |
+| `screen_table_relations` | 화면-테이블 관계 | 생성됨 |
+
+---
+
+### 백엔드 API 현황
+
+| 파일 | 상태 | 엔드포인트 |
+|------|------|-----------|
+| `screenGroupController.ts` | 완성됨 | 그룹/화면/조인/흐름/관계 CRUD |
+| `screenGroupRoutes.ts` | 완성됨 | `/api/screen-groups/*` |
+
+---
+
+### 프론트엔드 컴포넌트 현황
+
+| 컴포넌트 | 경로 | 상태 |
+|----------|------|------|
+| `ScreenGroupTreeView.tsx` | `components/screen/` | **완료** |
+| `ScreenGroupModal.tsx` | `components/screen/` | **완료** (그룹 CRUD 모달) |
+| `ScreenRelationFlow.tsx` | `components/screen/` | **완료** |
+| `ScreenNode.tsx` | `components/screen/` | **완료** |
+| `FieldJoinPanel.tsx` | `components/screen/panels/` | **완료** (조인 설정) |
+| `DataFlowPanel.tsx` | `components/screen/panels/` | **완료** (데이터 흐름 설정) |
+| API 클라이언트 | `lib/api/screenGroup.ts` | **완료** |
+
+---
+
+### 구현 완료 목록
+
+| # | 항목 | 완료일 |
+|---|------|--------|
+| 1 | DB 테이블 5개 생성 및 메타데이터 등록 | - |
+| 2 | 백엔드 API 전체 구현 (CRUD) | - |
+| 3 | 프론트엔드 API 클라이언트 구현 | - |
+| 4 | 트리 뷰 기본 구현 (그룹/화면 표시) | - |
+| 5 | React Flow 시각화 기본 구현 (노드 배치, 연결선) | - |
+| 6 | 노드 디자인 1차 개선 (정사각형, 흰색 테마) | - |
+| 7 | 화면 레이아웃 요약 API 추가 | 2026-01-01 |
+| 8 | 화면 노드 미리보기 구현 (폼/그리드/대시보드) | 2026-01-01 |
+| 9 | 테이블 노드 개선 (PK/FK 아이콘, 컬럼 목록) | 2026-01-01 |
+| 10 | 연결선 스타일 개선 (CRUD 라벨 제거, 1:N 표시) | 2026-01-01 |
+
+---
+
+### 추가 구현 완료 목록
+
+| # | 항목 | 컴포넌트 | 상태 |
+|---|------|----------|------|
+| 11 | **그룹 관리 UI** | `ScreenGroupModal.tsx` | **완료** |
+| 12 | **조인 설정 UI** | `FieldJoinPanel.tsx` (414줄) | **완료** |
+| 13 | **데이터 흐름 설정 UI** | `DataFlowPanel.tsx` (462줄) | **완료** |
+
+---
+
+### 미구현 작업 목록 (UI 선택사항)
+
+| # | 항목 | 설명 | 우선순위 |
+|---|------|------|----------|
+| 1 | **화면 미리보기 고도화** | 실제 컴포넌트 렌더링, 더 상세한 폼 필드 표시 | 낮음 |
+| 2 | 범례(Legend) UI 추가 | 관계 유형별 색상 설명 | 낮음 |
+| 3 | 뱃지 클릭 시 팝오버 상세정보 | 저장/필터/조인 뱃지 클릭 시 상세 정보 | 낮음 |
+| 4 | 선 교차점 이질감 해결 | 배경색 테두리 방식 | 낮음 |
+
+---
+
+## [다음 단계] 노드 플로워 기반 화면-테이블 설정 시스템
+
+### 배경 및 목적
+
+**문제**: 화면 디자이너에 너무 많은 기능이 집중되어 있음
+- 조인 설정, 필터 설정, 필드-컬럼 매칭, 저장 테이블 설정 등
+
+**해결책**: 화면 관리 노드 플로워에서 이러한 설정을 **직접** 할 수 있게 함
+- 노드 플로워 = 화면-테이블 관계 설정의 **또 다른 UI**
+- 시각적으로 설정하고, DB에 저장되면 화면 디자이너/실제 화면에 자동 반영
+
+### 핵심 개념
+
+```
+노드 플로워에서 화면/테이블 노드 클릭 (우클릭/더블클릭)
+       ↓
+   모달/팝업 열림
+       ↓
+   설정 (조인, 필터, 필드-컬럼 매칭, 저장 테이블 등)
+       ↓
+   DB 저장 (screen_layouts.properties, screen_field_joins 등)
+       ↓
+   시각화 자동 반영 (데이터 기반으로 그리니까)
+   화면 디자이너 자동 반영 (같은 데이터 사용)
+   실제 화면 자동 반영 (같은 데이터 사용)
+```
+
+### 구현 대상 기능
+
+| 기능 | 설명 |
+|------|------|
+| **테이블 연결 설정** | 화면이 어떤 테이블과 연결되는지 |
+| **테이블 조인 설정** | 테이블 간 조인 관계 (LEFT, INNER 등) |
+| **필터링 설정** | 마스터-디테일 필터링 관계 |
+| **필드-컬럼 매칭** | 화면 필드 ↔ 테이블 컬럼 매핑 |
+| **저장 테이블 설정** | 어떤 테이블에 데이터가 저장되는지 |
+
+### 구현 방안 (초안, 미확정)
+
+#### 방안 A: 통합 설정 모달
+
+노드 클릭 시 **하나의 모달**에서 탭으로 모든 설정
+
+```
+[화면 노드] 더블클릭
+      ↓
+┌─────────────────────────────────┐
+│  수주관리 화면 설정              │
+│                                 │
+│  [탭1: 테이블 연결]              │
+│  [탭2: 조인 설정]               │
+│  [탭3: 필터 설정]               │
+│  [탭4: 필드-컬럼 매칭]           │
+│  [탭5: 저장 테이블]             │
+│                                 │
+│  [저장]  [취소]                 │
+└─────────────────────────────────┘
+```
+
+#### 방안 B: 기능별 분리 모달
+
+우클릭 컨텍스트 메뉴로 기능 선택 → 해당 기능 모달 열림
+
+```
+[화면 노드] 우클릭
+      ↓
+┌─────────────────┐
+│ 테이블 연결 설정 │
+│ 조인 설정       │
+│ 필터 설정       │
+│ 필드-컬럼 매칭  │
+│ 저장 테이블 설정 │
+└─────────────────┘
+```
+
+#### 방안 C: 사이드 패널
+
+노드 클릭 시 **오른쪽 패널**에 설정 UI 표시 (모달 없이)
+
+### 현재 상태
+
+| 항목 | 상태 |
+|------|------|
+| 노드 플로워 시각화 | ✅ 완료 (읽기 전용) |
+| DB 테이블 | ✅ 있음 (`screen_field_joins`, `screen_data_flows` 등) |
+| 백엔드 API | ✅ 있음 (CRUD) |
+| 패널 UI | ✅ 있음 (`FieldJoinPanel`, `DataFlowPanel`) |
+| **노드에서 직접 설정** | ✅ **구현 완료** (방안 A) |
+
+---
+
+## 노드에서 직접 설정 기능 (방안 A: 통합 설정 모달)
+
+### 구현 완료 (2026-01-09)
+
+노드 더블클릭 시 통합 설정 모달이 열리며, 4개 탭으로 다양한 설정을 수행할 수 있습니다.
+
+#### 사용법
+
+1. **화면 노드** 또는 **테이블 노드**를 **더블클릭**
+2. 통합 설정 모달이 열림
+3. 탭 선택하여 설정
+4. 저장 후 시각화 자동 새로고침
+
+#### 탭 구성
+
+| 탭 | 기능 | 설명 |
+|----|------|------|
+| 테이블 연결 | 화면-테이블 관계 설정 | 메인/서브/조회/저장 테이블 지정, CRUD 권한 설정 |
+| 조인 설정 | FK-PK 조인 관계 설정 | 저장 테이블의 FK 컬럼 ↔ 조인 테이블의 PK 컬럼 매핑, 표시 컬럼 지정 |
+| 데이터 흐름 | 화면 간 데이터 이동 설정 | 소스 화면 → 타겟 화면, 단방향/양방향 흐름 설정 |
+| 필드 매핑 | 테이블 컬럼 정보 조회 | 현재 테이블의 컬럼 목록, 데이터 타입, 웹 타입 확인 |
+
+#### 구현 파일
+
+| 파일 | 역할 |
+|------|------|
+| `frontend/components/screen/NodeSettingModal.tsx` | **새로 생성** - 통합 설정 모달 컴포넌트 |
+| `frontend/components/screen/ScreenRelationFlow.tsx` | 노드 더블클릭 이벤트 핸들러 추가 |
+
+#### 주요 코드 변경
+
+**NodeSettingModal.tsx (신규)**
+- 4개 탭 컴포넌트 내장 (TableRelationTab, JoinSettingTab, DataFlowTab, FieldMappingTab)
+- 기존 API 활용: `getTableRelations`, `getFieldJoins`, `getDataFlows`
+- CRUD 연동: `createFieldJoin`, `updateFieldJoin`, `deleteFieldJoin` 등
+- 저장 후 부모 컴포넌트 새로고침 콜백 (`onRefresh`)
+
+**ScreenRelationFlow.tsx (수정)**
+```typescript
+// 노드 더블클릭 이벤트 핸들러 추가
+const handleNodeDoubleClick = useCallback((_event: React.MouseEvent, node: Node) => {
+  // 화면/테이블 노드 판별 후 모달 오픈
+  if (node.id.startsWith("screen-")) {
+    // 화면 노드 처리
+  } else if (node.id.startsWith("table-")) {
+    // 테이블 노드 처리
+  }
+  setIsSettingModalOpen(true);
+}, [screenTableMap, screenSubTableMap]);
+
+// ReactFlow에 이벤트 연결
+<ReactFlow
+  onNodeDoubleClick={handleNodeDoubleClick}
+  ...
+/>
+
+// 모달 렌더링
+<NodeSettingModal
+  isOpen={isSettingModalOpen}
+  onClose={handleSettingModalClose}
+  onRefresh={handleRefreshVisualization}
+  ...
+/>
+```
+
+#### 시각화 새로고침 메커니즘
+
+```typescript
+// 강제 새로고침용 키
+const [refreshKey, setRefreshKey] = useState(0);
+
+// 새로고침 핸들러
+const handleRefreshVisualization = useCallback(() => {
+  setRefreshKey(prev => prev + 1);
+}, []);
+
+// useEffect 의존성에 refreshKey 추가
+useEffect(() => {
+  // 데이터 로드 로직
+}, [screen, selectedGroup, ..., refreshKey]);
+```
+
+---
+
+### 주요 파일 경로
+
+```
+backend-node/src/
+├── controllers/screenGroupController.ts   # 화면 그룹 API
+├── routes/screenGroupRoutes.ts            # 라우트 정의
+
+frontend/
+├── app/(main)/admin/screenMng/screenMngList/page.tsx  # 메인 페이지
+├── components/screen/
+│   ├── ScreenGroupTreeView.tsx            # 트리 뷰 (그룹/화면 표시)
+│   ├── ScreenGroupModal.tsx               # 그룹 추가/수정 모달
+│   ├── ScreenRelationFlow.tsx             # React Flow 시각화 + 더블클릭 이벤트
+│   ├── ScreenNode.tsx                     # 노드 컴포넌트
+│   ├── NodeSettingModal.tsx               # **신규** - 통합 설정 모달
+│   └── panels/
+│       ├── FieldJoinPanel.tsx             # 필드 조인 설정 UI (개별 패널)
+│       └── DataFlowPanel.tsx              # 데이터 흐름 설정 UI (개별 패널)
+└── lib/api/screenGroup.ts                 # API 클라이언트
+```
+
+---
+
+## 향후 개선 사항
+
+### 필드 매핑 탭 고도화
+
+현재 필드 매핑 탭은 테이블 컬럼 정보를 조회만 가능합니다. 향후 다음 기능 추가 가능:
+
+1. **컬럼-컴포넌트 바인딩 설정**: 화면 컴포넌트와 DB 컬럼 직접 연결
+2. **드래그 앤 드롭**: 시각적 매핑 UI
+3. **자동 매핑 추천**: 컬럼명 기반 자동 매핑 제안
+
+### 관계 시각화 연동
+
+설정 저장 후 시각화에 즉시 반영되지만, 다음 개선 가능:
+
+1. **실시간 프리뷰**: 저장 전 미리보기
+2. **관계 유형별 색상 커스터마이징**
+3. **관계 라벨 표시 옵션**
+
+---
+
+## 화면 설정 모달 개선 (2026-01-12)
+
+### 개요
+
+화면 노드 우클릭 시 열리는 설정 모달을 대폭 개선했습니다.
+
+### 주요 변경 사항
+
+#### 1. 테이블 정보 시각화 개선
+
+| 항목 | 변경 내용 |
+|------|----------|
+| 메인 테이블 | 아코디언 형식으로 모든 컬럼 표시 |
+| 필터 테이블 | 아코디언 형식 + 필터/조인 키 색상 구분 |
+| 사용 중 컬럼 | 파란색 배경 + "필드" 배지로 강조 |
+
+#### 2. 화면 프리뷰 상시 표시
+
+- 모달 레이아웃: 좌측 40% (탭) / 우측 60% (프리뷰)
+- 탭 전환해도 프리뷰 항상 표시
+
+#### 3. 줌/드래그 기능 (react-zoom-pan-pinch 라이브러리)
+
+```bash
+npm install react-zoom-pan-pinch
+```
+
+| 기능 | 동작 |
+|------|------|
+| 휠 스크롤 | 마우스 포인터 기준 확대/축소 (20%~300%) |
+| 드래그 | 화면 이동 |
+| 클릭 | iframe 내부 버튼/목록 상호작용 |
+
+#### 4. 프리뷰 company_code 전달 문제 해결
+
+| 문제 | 해결 |
+|------|------|
+| 최고 관리자로 다른 회사 프리뷰 불가 | `companyCodeOverride` 파라미터 도입 |
+| URL 파라미터 무시됨 | 백엔드에서 admin 전용 오버라이드 처리 |
+
+### 관련 파일
+
+| 파일 | 변경 내용 |
+|------|----------|
+| `ScreenSettingModal.tsx` | 전체 UI 개선, 줌/드래그 기능 |
+| `entityJoin.ts` | `companyCodeOverride` 파라미터 추가 |
+| `SplitPanelLayoutComponent.tsx` | `companyCode` prop 추가 |
+| `entityJoinController.ts` | `companyCodeOverride` 처리 로직 |
+
+### 상세 문서
+
+- [화면설정모달_개선_완료_보고서.md](./화면설정모달_개선_완료_보고서.md)
+
+---
+
+## 관련 문서
+
+- [멀티테넌시 구현 가이드](.cursor/rules/multi-tenancy-guide.mdc)
+- [API 클라이언트 사용 규칙](.cursor/rules/api-client-usage.mdc)
+- [관리자 페이지 스타일 가이드](.cursor/rules/admin-page-style-guide.mdc)
+
diff --git a/docs/화면설정모달_개선_완료_보고서.md b/docs/화면설정모달_개선_완료_보고서.md
new file mode 100644
index 00000000..c69d82e4
--- /dev/null
+++ b/docs/화면설정모달_개선_완료_보고서.md
@@ -0,0 +1,1028 @@
+# 화면 설정 모달 개선 완료 보고서
+
+## 개요
+화면 관리에서 화면 노드 우클릭 시 열리는 설정 모달을 대폭 개선하여, 테이블 정보 시각화, 필드 매핑 확인, 컬럼 변경/추가/제거 기능, 조인 설정 기능, 실시간 프리뷰 기능을 강화했습니다.
+
+## 주요 개선 사항
+
+### 1. 화면 개요 탭 통합 개선
+
+#### 1.1 필드 매핑 탭 → 개요 탭 통합
+- 기존 "필드 매핑" 탭 제거
+- 필드 매핑 정보를 개요 탭의 메인/필터 테이블 아코디언에 통합 표시
+- 더 직관적이고 간결한 UI 제공
+
+#### 1.2 메인 테이블 아코디언
+- 메인 테이블(예: `customer_mng`)을 아코디언 형식으로 표시
+- 클릭 시 테이블의 모든 컬럼 정보 표시
+- **1열 레이아웃**: 컬럼 정보를 세로로 배치
+- 화면에서 사용 중인 컬럼은 **파란색 배경 + "필드" 배지**로 강조
+- **컬럼 정렬**: 
+  - 사용중인 필드가 상단에 표시
+  - 화면에 표시되는 순서대로 정렬 (y좌표 기준)
+  - 미사용 컬럼은 하단에 표시
+
+#### 1.3 필터 테이블 아코디언
+- 필터 테이블(예: `customer_item_mapping`)을 아코디언 형식으로 표시
+- 클릭 시 테이블의 모든 컬럼 정보 표시
+- 컬럼별 색상 구분:
+  - **파란색**: 화면에서 사용 중인 컬럼 (필드)
+  - **보라색**: 필터 키 컬럼 (WHERE 절에 사용)
+  - **주황색**: 조인 키 컬럼 (JOIN 조건에 사용)
+- **다중 배지 표시**: 컬럼이 필드이면서 조인/필터 키인 경우 배지 동시 표시
+- 필터 연결 정보 표시 (예: `→ customer_mng`)
+
+#### 1.4 컬럼 레이아웃 순서
+- **순서**: `컬럼명 | 배지 | 데이터타입`
+- 예: `거래처 코드` `[필드]` `character varying`
+- 데이터타입은 오른쪽 정렬
+
+#### 1.5 클릭 스타일 개선
+- **테두리 제거**: ring-2, ring-offset 등 제거
+- **강조 색상 연하게**: 
+  - 선택됨: `bg-blue-100 border-blue-300`
+  - 미선택: `bg-blue-50 border-blue-200`
+- 더 부드러운 시각적 피드백
+
+#### 1.6 패널 높이 동기화
+- 왼쪽(컬럼 목록)과 오른쪽(설정 패널) 동일한 `max-h-[350px]` 적용
+- `overflow-y-auto`로 스크롤 처리
+- `items-stretch`로 양쪽 패널 높이 동기화
+
+### 2. 컬럼 변경 기능
+
+#### 2.1 인라인 컬럼 편집
+- 사용중인 필드(파란색 배경)를 클릭하면 우측에 "컬럼 설정" 패널 표시
+- 패널 정보:
+  - **화면 필드**: 컬럼 한글명 표시 (예: "거래처 코드")
+  - **현재 컬럼**: 영문 컬럼명 표시 (예: `customer_code`)
+  - **컬럼 변경**: 드롭다운으로 다른 컬럼 선택
+- 검색 기능으로 컬럼 빠르게 찾기
+
+#### 2.2 실시간 반영
+- 컬럼 변경 후 **페이지 새로고침 없이** 실시간 반영
+- `onRefresh` 콜백으로 데이터 리로드 + iframe 새로고침
+- 더 빠른 사용자 경험
+
+#### 2.3 변경사항 저장
+- `screenApi.saveLayout()` 사용하여 **화면 디자이너와 동일한 테이블에 저장**
+- 저장 위치:
+  - `componentConfig.leftPanel.columns` (분할 패널)
+  - `componentConfig.rightPanel.columns` (분할 패널)
+  - `usedColumns` 배열
+  - `bindField` 필드
+  - `fieldMapping` 배열
+
+### 3. 필드 추가/제거 기능 (신규)
+
+#### 3.1 필드 추가
+- 비필드 컬럼(회색/흰색 배경) 클릭
+- "컬럼 설정" 패널에 컬럼 정보 표시
+- **"필드로 추가"** 버튼 클릭 → 해당 컬럼이 화면 필드로 추가됨
+- 버튼 스타일: `text-blue-600 border-blue-300 hover:bg-blue-50` (파란색 테두리)
+
+#### 3.2 필드 제거
+- 기존 필드(파란색 배경) 클릭
+- "컬럼 설정" 패널에 필드 정보 표시
+- **"필드에서 제거"** 버튼 클릭 → 해당 필드가 화면에서 제거됨
+- 버튼 스타일: `text-red-600 border-red-300 hover:bg-red-50` (빨간색 테두리)
+
+#### 3.3 저장 로직
+```typescript
+// 필드 추가: 배열에 새 컬럼 추가
+if (isAddingField) {
+  return {
+    ...comp,
+    componentConfig: {
+      ...comp.componentConfig,
+      leftPanel: {
+        ...comp.componentConfig.leftPanel,
+        columns: [...leftColumns, { name: newColumn, columnName: newColumn }],
+      },
+    },
+  };
+}
+
+// 필드 제거: 배열에서 해당 컬럼 제거
+if (isRemovingField) {
+  const filteredColumns = leftColumns.filter((_, i) => i !== columnIdx);
+  return {
+    ...comp,
+    componentConfig: {
+      ...comp.componentConfig,
+      leftPanel: {
+        ...comp.componentConfig.leftPanel,
+        columns: filteredColumns,
+      },
+    },
+  };
+}
+```
+
+#### 3.4 적용 범위
+- 메인 테이블 아코디언: 필드 추가/제거 가능
+- 필터 테이블 아코디언: 필드 추가/제거 가능
+- `usedColumns`, `componentConfig.usedColumns`, `componentConfig.columns`, `leftPanel.columns`, `rightPanel.columns` 모두 지원
+
+### 4. 화면 프리뷰 상시 표시
+
+#### 4.1 레이아웃 변경
+- 기존: 탭으로 프리뷰 전환
+- 개선: **모달 우측에 프리뷰 상시 표시**
+- 모달 크기 확대 (1600px 최대 너비)
+- 좌측 40% (탭 콘텐츠) / 우측 60% (프리뷰)
+
+#### 4.2 줌/드래그/클릭 기능 (react-zoom-pan-pinch 라이브러리)
+- **휠 스크롤**: 마우스 포인터 위치 기준 확대/축소 (20% ~ 300%)
+- **드래그**: 마우스 왼쪽 버튼으로 화면 이동 (5px 이상 이동 시)
+- **클릭**: iframe 내부 요소 정상 클릭 가능
+  - 버튼, 셀렉트박스, 체크박스, 테이블 행 클릭
+  - 인풋박스/텍스트박스 포커스 및 입력
+  - X버튼(닫기) 등 SVG 아이콘 버튼 클릭
+
+#### 4.3 클릭 좌표 보정 시스템
+- 줌 상태에서도 정확한 클릭 위치 계산
+- `designWidth / rect.width` 비율로 좌표 변환
+- 오버레이 방식으로 드래그와 클릭 분리 처리
+
+### 5. 필드+조인 컬럼 스타일 개선
+
+#### 5.1 다중 역할 컬럼 표시
+- 컬럼이 **필드이면서 조인 키**인 경우:
+  - **파란색 배경** (필드 기준)
+  - **왼쪽에 주황색 세로 선** (`border-l-4 border-l-orange-500`)
+  - 배지: `조인` `필드` 동시 표시
+- 컬럼이 **필드이면서 필터 키**인 경우:
+  - **파란색 배경** (필드 기준)
+  - **왼쪽에 보라색 세로 선** (`border-l-4 border-l-purple-400`)
+  - 배지: `필터` `필드` 동시 표시
+
+#### 5.2 조인 컬럼도 필드로 인식
+- `filterTableColumnMappings` 생성 시 조인 컬럼(`ft.joinColumnRefs`)도 포함
+- 조인 테이블 데이터를 화면에서 보여주므로 필드로 간주
+
+#### 5.3 컬럼 설정 패널 - 조인 정보 표시
+- 조인 키 클릭 시 패널에 조인 정보 표시:
+  - **대상 테이블**: item_info (실제 참조 테이블)
+  - **연결 컬럼**: item_number (참조 컬럼)
+
+### 6. 조인 관계 설정/수정 기능
+
+#### 6.1 기능 설명
+- 컬럼 설정 패널에서 **조인 관계 직접 수정** 가능
+- **모든 컬럼에서 조인 설정 가능** (기존 조인 키가 아닌 컬럼도 포함)
+- 테이블 타입 관리(`column_labels` 테이블)와 동일한 저장 위치 사용
+
+#### 6.2 저장 테이블
+```
+column_labels 테이블:
+├── reference_table   (참조 테이블명)
+├── reference_column  (참조 컬럼 - 보통 PK)
+└── display_column    (화면에 표시할 컬럼)
+```
+
+#### 6.3 구현된 UI
+1. **컬럼 클릭** → 컬럼 설정 패널 표시
+2. **"조인" 섹션 확인**:
+   - 조인 설정 있음: "편집" 버튼
+   - 조인 설정 없음: "추가" 버튼
+3. **드롭다운으로 설정** (모두 검색 가능):
+   - 대상 테이블: 전체 테이블 목록에서 검색/선택
+   - 연결 컬럼 (PK): 선택한 테이블의 컬럼 중 검색/선택
+   - 표시 컬럼: 화면에 표시할 컬럼 검색/선택
+4. **저장 버튼** → `column_labels` 테이블에 저장
+5. **취소 버튼** → 편집 취소
+
+#### 6.4 검색 가능한 드롭다운
+- Popover + Command 컴포넌트 사용
+- 실시간 텍스트 검색 지원
+- 대상 테이블, 연결 컬럼, 표시 컬럼 모두 검색 가능
+
+#### 6.5 API 연동
+- **테이블 목록 조회**: `tableManagementApi.getTableList()`
+- **컬럼 목록 조회**: `tableManagementApi.getColumnList(tableName)`
+- **저장**: `tableManagementApi.updateColumnSettings(tableName, columnName, settings)`
+
+#### 6.6 메인 테이블에도 조인 설정 적용
+- 메인 테이블 아코디언에서도 조인 설정 가능
+- 필터 테이블과 동일한 UI/기능 제공
+
+#### 6.7 조인 데이터 소스 수정
+- 기존 조인 키 클릭 시 `joinRef.refTable` 값을 사용
+- 예: `품목 ID` → `item_info` (실제 참조 테이블)
+- `mainTable` 대신 `joinRef.refTable` 사용으로 정확한 테이블 표시
+
+### 7. 배지 순서 및 스타일
+- **배지 순서**: `필터` → `조인` → `필드` (필드가 맨 뒤)
+- **조인 배지**: 주황색 배경 (`bg-orange-200 text-orange-700`)
+- **필터 배지**: 보라색 배경 (`bg-purple-200 text-purple-700`)
+- **필드 배지**: 파란색 배경 (`bg-blue-500 text-white`)
+
+### 8. 컴포넌트 통합 리팩토링
+
+#### 8.1 `TableColumnAccordion` 통합 컴포넌트
+- 기존 `MainTableAccordion`과 `FilterTableAccordion`을 하나의 컴포넌트로 통합
+- `tableType` prop으로 "main" 또는 "filter" 구분
+- 코드 중복 제거 및 유지보수성 향상
+
+#### 8.2 Props 구조
+```typescript
+interface TableColumnAccordionProps {
+  tableName: string;
+  tableLabel?: string;
+  tableType: "main" | "filter";
+  columnMappings?: ColumnMapping[];
+  onColumnChange?: (fieldLabel: string, oldColumn: string, newColumn: string) => void;
+  onColumnReorder?: (newOrder: string[]) => void;
+  onJoinSettingSaved?: () => void;
+  // 필터 테이블 전용 props
+  mainTable?: string;
+  filterKeyMapping?: FilterKeyMapping;
+  joinColumnRefs?: JoinColumnRef[];
+}
+```
+
+#### 8.3 동적 테마 적용
+- 메인 테이블: 파란색 테마 (`blue`)
+- 필터 테이블: 보라색 테마 (`purple`)
+- `themeColor`, `themeIcon`, `themeBadge` 변수로 동적 스타일 적용
+
+### 9. 제어 관리 탭 (신규)
+
+#### 9.1 개요
+- 화면 설정 모달에 **"제어 관리"** 탭 추가
+- 화면 디자이너의 버튼 제어 설정을 간편하게 관리
+- 상세 설정은 화면 디자이너 링크 제공
+
+#### 9.2 버튼 액션 설정
+- 화면에 배치된 버튼 목록 표시
+- 버튼별 액션 타입, 대상 화면, 플로우 연동 등 수정 가능
+- **편집** 버튼 클릭 시 인라인 편집 모드 활성화
+- **저장** 버튼 클릭 시 `screenApi.saveLayout()` 으로 저장
+
+#### 9.3 지원 액션 타입
+| 액션 | 설명 |
+|------|------|
+| `save` | 저장 |
+| `delete` | 삭제 |
+| `edit` | 편집 |
+| `copy` | 복사 |
+| `navigate` | 페이지 이동 |
+| `modal` | 모달 열기 |
+| `openModalWithData` | 데이터 전달 + 모달 |
+| `openRelatedModal` | 연관 데이터 모달 |
+| `transferData` | 데이터 전달 |
+| `quickInsert` | 즉시 저장 |
+| `control` | 제어 흐름 |
+| `view_table_history` | 테이블 이력 |
+| `excel_download` | 엑셀 다운로드 |
+| `excel_upload` | 엑셀 업로드 |
+
+#### 9.4 모달/네비게이션 화면 선택
+- 액션 타입이 `modal`, `openModalWithData`, `openRelatedModal`인 경우:
+  - **모달 화면** 선택 가능
+  - 검색 가능한 드롭다운 (Combobox)
+  - **현재 그룹** 화면 우선 표시, **다른 그룹** 화면도 선택 가능
+- 액션 타입이 `navigate`인 경우:
+  - **이동 화면** 선택 가능
+  - 동일하게 검색 가능한 드롭다운 제공
+
+#### 9.5 다중 플로우 연동 지원 (신규)
+- **한 버튼에 여러 플로우 연동 가능**
+- 버튼별 플로우 목록을 세로 리스트 형식으로 표시
+- 각 플로우별 **실행 타이밍** 개별 설정: `before` (버튼 실행 전), `after` (버튼 실행 후)
+- 플로우 개별 제거 가능 (X 버튼)
+- **플로우 추가** 버튼으로 새 플로우 연동 (검색 가능한 Combobox)
+- 화면 디자이너의 `webTypeConfig.dataflowConfig.flowConfigs` 배열로 저장
+
+#### 9.6 상시 편집 모드 (개선)
+- 기존: "편집" 버튼 클릭 시에만 설정 변경 가능
+- 개선: **상시 편집 가능** (별도 편집 버튼 없음)
+- 변경사항이 있으면 "저장" 버튼 활성화
+- 더 빠르고 직관적인 설정 변경 경험
+
+#### 9.7 섹션 구분 개선 (UI 개선)
+- **버튼 액션 설정** 섹션:
+  - 파란색 테마 (`border-blue-200 bg-blue-50/30`)
+  - 헤더: `bg-blue-100/50 text-blue-900`
+  - 아이콘: MousePointer (파란색)
+- **플로우 연동 현황** 섹션:
+  - 보라색 테마 (`border-purple-200 bg-purple-50/30`)
+  - 헤더: `bg-purple-100/50 text-purple-900`
+  - 아이콘: Workflow (보라색)
+- 시각적으로 명확한 섹션 구분
+
+#### 9.8 플로우 연동 현황 표시 개선
+- 플로우 이름: **일반 텍스트**로 표시 (배지 아님)
+- 연동된 버튼: 배지로 표시
+- 미연동 플로우: **보라색 "미연동" 배지**로 표시
+- 플로우 관리 바로가기 버튼 제공
+
+#### 9.9 다중 플로우 저장 로직
+```typescript
+// 버튼 설정 저장 시 다중 플로우 처리
+if (values.linkedFlows !== undefined) {
+  if (values.linkedFlows && values.linkedFlows.length > 0) {
+    comp.webTypeConfig.enableDataflowControl = true;
+    comp.webTypeConfig.dataflowConfig = {
+      controlMode: "flow",
+      // 다중 플로우 저장
+      flowConfigs: values.linkedFlows.map((lf: any) => ({
+        flowId: lf.id,
+        flowName: lf.name,
+        executionTiming: lf.timing || "after",
+      })),
+      // 레거시 호환 - 첫 번째 플로우를 단일 flowConfig로도 저장
+      flowConfig: {
+        flowId: values.linkedFlows[0].id,
+        flowName: values.linkedFlows[0].name,
+        executionTiming: values.linkedFlows[0].timing || "after",
+      },
+    };
+  } else {
+    // 플로우 연동 해제 (빈 배열)
+    comp.webTypeConfig.enableDataflowControl = false;
+    delete comp.webTypeConfig.dataflowConfig;
+  }
+}
+```
+
+#### 9.10 화면 목록 조회 로직
+```typescript
+// 1. 전체 화면 조회 (모든 화면의 ID→이름 맵핑)
+const allScreensResponse = await screenApi.getScreens({ size: 1000 });
+const allScreensMap = new Map<number, string>();
+allScreensResponse.data.forEach((s: any) => {
+  const sid = Number(s.screenId || s.screen_id || s.id);
+  const sname = s.screenName || s.screen_name || s.name || `화면 ${sid}`;
+  if (!isNaN(sid)) allScreensMap.set(sid, sname);
+});
+
+// 2. 그룹 내 화면 조회
+if (groupId) {
+  const groupResponse = await getScreenGroup(groupId);
+  if (groupResponse.success && groupResponse.data?.screens) {
+    groupScreenIds = groupResponse.data.screens.map((s: any) => 
+      Number(s.screen_id || s.screenId || s.id)
+    ).filter(id => !isNaN(id));
+  }
+}
+
+// 3. 화면 목록 구성 (그룹 내 우선, 전체 포함)
+groupScreenIds.forEach(sid => {
+  screenListResult.push({ id: sid, name: allScreensMap.get(sid), inGroup: true });
+});
+allScreensMap.forEach((name, id) => {
+  if (!groupScreenIds.includes(id)) {
+    screenListResult.push({ id, name, inGroup: false });
+  }
+});
+```
+
+### 10. 드래그 앤 드롭 컬럼 순서 변경
+
+#### 10.1 기능 설명
+- 사용 중인 컬럼(필드)을 드래그하여 순서 변경 가능
+- 드래그 중에는 시각적으로만 순서 변경, **드롭 시에만 저장**
+- 드래그 취소(영역 밖으로 나간 경우) 시 원래 순서로 복원
+
+#### 10.2 드래그 상태 관리
+```typescript
+// 드래그 상태
+const [draggedIndex, setDraggedIndex] = useState<number | null>(null);
+const [localColumnOrder, setLocalColumnOrder] = useState<string[] | null>(null);
+```
+
+#### 10.3 드래그 핸들러
+```typescript
+// 드래그 시작: 현재 순서를 로컬 상태로 저장
+const handleDragStart = (e: React.DragEvent, index: number) => {
+  setDraggedIndex(index);
+  const usedColumns = sortedColumns.filter(col => columnMappingMap.has(col.columnName.toLowerCase()));
+  setLocalColumnOrder(usedColumns.map(col => col.columnName));
+};
+
+// 드래그 중: 로컬 순서만 변경 (저장하지 않음)
+const handleDragOver = (e: React.DragEvent, hoverIndex: number) => {
+  if (draggedIndex === null || draggedIndex === hoverIndex || !localColumnOrder) return;
+  const newOrder = [...localColumnOrder];
+  const draggedItem = newOrder[draggedIndex];
+  newOrder.splice(draggedIndex, 1);
+  newOrder.splice(hoverIndex, 0, draggedItem);
+  setDraggedIndex(hoverIndex);
+  setLocalColumnOrder(newOrder);
+};
+
+// 드롭: 최종 순서로 저장
+const handleDrop = (e: React.DragEvent) => {
+  if (localColumnOrder && onColumnReorder) {
+    onColumnReorder(localColumnOrder);
+  }
+  setDraggedIndex(null);
+  setLocalColumnOrder(null);
+};
+
+// 드래그 취소
+const handleDragEnd = () => {
+  setDraggedIndex(null);
+  setLocalColumnOrder(null);
+};
+```
+
+#### 10.4 시각적 피드백
+- 드래그 가능한 컬럼: `cursor-grab active:cursor-grabbing`
+- 드래그 중인 컬럼: `opacity-50 scale-95`
+- 드래그 중 실시간 순서 변경 표시
+
+#### 10.5 저장 로직 (`handleColumnReorder`)
+```typescript
+const handleColumnReorder = async (tableType: "main" | "filter", newOrder: string[]) => {
+  const currentLayout = await screenApi.getLayout(screenId);
+  
+  const updatedComponents = currentLayout.components.map((comp: any) => {
+    // leftPanel.columns 순서 변경
+    if (comp.componentConfig?.leftPanel?.columns) {
+      const leftColumns = comp.componentConfig.leftPanel.columns;
+      const reorderedColumns = newOrder.map(colName => 
+        leftColumns.find((col: any) => col.name?.toLowerCase() === colName.toLowerCase())
+      ).filter(Boolean);
+      const remainingColumns = leftColumns.filter((col: any) => 
+        !newOrder.some(n => n.toLowerCase() === col.name?.toLowerCase())
+      );
+      
+      return {
+        ...comp,
+        componentConfig: {
+          ...comp.componentConfig,
+          leftPanel: {
+            ...comp.componentConfig.leftPanel,
+            columns: [...reorderedColumns, ...remainingColumns],
+          },
+        },
+      };
+    }
+    return comp;
+  });
+
+  await screenApi.saveLayout(screenId, { ...currentLayout, components: updatedComponents });
+  onRefresh?.();
+};
+```
+
+#### 10.6 지원 범위
+- 메인 테이블: `onColumnReorder={(newOrder) => handleColumnReorder("main", newOrder)}`
+- 필터 테이블: `onColumnReorder={(newOrder) => handleColumnReorder("filter", newOrder)}`
+- 지원 배열:
+  - `componentConfig.leftPanel.columns`
+  - `componentConfig.rightPanel.columns`
+  - `componentConfig.usedColumns`
+  - `componentConfig.columns`
+
+### 11. FlowEditor 임베드 (신규)
+
+#### 11.1 개요
+- 제어 관리 탭에서 **플로우 빠른 생성** 시 전체 FlowEditor를 모달로 임베드
+- 골격 생성이 아닌 **완전한 플로우 생성** 가능
+- 저장 시 자동으로 버튼에 연동
+
+#### 11.2 FlowEditor 컴포넌트 수정
+```typescript
+interface FlowEditorProps {
+  initialFlowId?: number | null;
+  onSaveComplete?: (flowId: number, flowName: string) => void; // 저장 완료 콜백
+  embedded?: boolean; // 임베디드 모드
+}
+```
+
+#### 11.3 FlowToolbar 수정
+- 저장 완료 시 `onSaveComplete` 콜백 호출
+- 기존 postMessage 로직 대체
+
+#### 11.4 사용 방법
+1. "새 플로우" 버튼 클릭
+2. 전체화면 모달에서 FlowEditor 열림
+3. 플로우 완전 구성 (테이블, 필드 매핑, 조건 등)
+4. 저장 시 자동으로:
+   - 플로우 생성
+   - 버튼에 연동 (버튼에서 시작한 경우)
+   - 플로우 목록 새로고침
+
+### 12. 화면 캔버스 크기 자동 조절 (신규)
+
+#### 12.1 문제
+- 기존: iframe 크기가 고정되어 화면 내용이 잘림
+- 특히 폼 화면에서 인풋 필드, 저장 버튼 등이 보이지 않음
+
+#### 12.2 해결
+- 백엔드: 컴포넌트 최대 좌표 기준으로 `canvasWidth`, `canvasHeight` 계산
+- 프론트엔드: `PreviewTab`에 캔버스 크기 전달, 여유 마진 추가
+
+#### 12.3 구현
+```typescript
+// 백엔드 (screenGroupController.ts)
+const rightEdge = (row.position_x || 0) + (row.width || 100);
+const bottomEdge = (row.position_y || 0) + (row.height || 30);
+if (rightEdge > summaryMap[screenId].canvasWidth) {
+  summaryMap[screenId].canvasWidth = rightEdge;
+}
+if (bottomEdge > summaryMap[screenId].canvasHeight) {
+  summaryMap[screenId].canvasHeight = bottomEdge;
+}
+
+// 프론트엔드 (ScreenSettingModal.tsx)
+const designWidth = Math.max((canvasWidth || 400) + 120, 500);
+const designHeight = Math.max((canvasHeight || 400) + 250, 650);
+```
+
+### 13. 인풋 필드 인식 개선 (신규)
+
+#### 13.1 문제
+- 폼 화면의 인풋 필드가 "필드"로 인식되지 않음
+- 필드 매핑 0개로 표시
+
+#### 13.2 원인
+- 백엔드 SQL 쿼리에서 `columnName` 속성을 추출하지 않음
+- 프론트엔드에서 `bindField`를 필드 카운트에 포함하지 않음
+
+#### 13.3 해결
+```sql
+-- 백엔드 SQL 수정
+COALESCE(
+  properties->'componentConfig'->>'bindField',
+  properties->>'bindField',
+  properties->'componentConfig'->>'field',
+  properties->>'field',
+  properties->>'columnName'  -- 추가됨
+) as bind_field,
+```
+
+```typescript
+// 프론트엔드 필드 카운트 수정
+layoutItems.forEach((item) => {
+  if (item.usedColumns) {
+    item.usedColumns.forEach((col) => layoutColumnsSet.add(col));
+  }
+  if (item.bindField) {
+    layoutColumnsSet.add(item.bindField); // 추가됨
+  }
+});
+```
+
+### 14. 폼 화면 필드 추가/제거 (신규)
+
+#### 14.1 기존 그리드 vs 폼 화면
+- **그리드 화면**: `leftPanel.columns`, `rightPanel.columns` 배열에서 컬럼 추가/제거
+- **폼 화면**: `text-input` 등 컴포넌트 자체를 추가/제거해야 함
+
+#### 14.2 구현
+```typescript
+// 필드 추가: 새 text-input 컴포넌트 생성
+if (isAddingField && !columnChanged) {
+  const newFormComponent: LayoutItem = {
+    id: `comp-${Date.now()}`,
+    componentType: "text-input",
+    label: newColumn,
+    bindField: newColumn,
+    position_x: newComponentX,
+    position_y: newComponentY,
+    width: 300,
+    height: 30,
+    // ...
+  };
+  updatedComponents.push(newFormComponent);
+}
+
+// 필드 제거: bindField가 일치하는 컴포넌트 삭제
+if (isRemovingField && !columnChanged) {
+  updatedComponents = updatedComponents.filter((comp: any) => 
+    comp.bindField?.toLowerCase() !== oldColumn.toLowerCase()
+  );
+}
+```
+
+### 15. 화면 디자이너 모달 통합 (신규)
+
+#### 15.1 개요
+- 기존: "디자이너" 버튼 클릭 시 새 탭/창에서 열림
+- 변경: 전체화면 Dialog 내부에 ScreenDesigner 임베드
+
+#### 15.2 장점
+- 화면 설정 모달을 닫지 않고 디자이너 사용
+- 디자이너 닫을 때 자동 새로고침
+
+#### 15.3 구현
+```tsx
+<Dialog open={showDesignerModal} onOpenChange={setShowDesignerModal}>
+  <DialogContent className="max-w-[98vw] h-[95vh] p-0 overflow-hidden">
+    <ScreenDesigner
+      selectedScreen={{...}}
+      onBackToList={async () => {
+        setShowDesignerModal(false);
+        await loadData();
+        setIframeKey(prev => prev + 1);
+      }}
+    />
+  </DialogContent>
+</Dialog>
+```
+
+### 16. 그룹 내 화면 전환 셀렉트박스 (신규)
+
+#### 16.1 개요
+- 그룹에 여러 화면이 있을 때 모달 내에서 화면 전환 가능
+- 모달을 닫지 않고도 다른 화면 설정 가능
+
+#### 16.2 구현
+```typescript
+// 그룹 내 화면 목록 로드
+const loadGroupScreens = useCallback(async () => {
+  if (!groupId) return;
+  const groupRes = await getScreenGroup(groupId);
+  if (groupRes.success && groupRes.data) {
+    const screens = groupRes.data.screens || [];
+    screens.sort((a, b) => (a.display_order || 0) - (b.display_order || 0));
+    setGroupScreens(screens);
+  }
+}, [groupId]);
+
+// 화면 선택 변경 핸들러
+const handleScreenChange = useCallback(async (newScreenId: number) => {
+  const selectedScreen = groupScreens.find(s => s.screen_id === newScreenId);
+  if (!selectedScreen) return;
+  
+  setCurrentScreenId(newScreenId);
+  setCurrentScreenName(selectedScreen.screen_name);
+  setCurrentMainTable(selectedScreen.table_name);
+  setIframeKey(prev => prev + 1);
+}, [groupScreens]);
+```
+
+#### 16.3 UI
+- 그룹 내 화면이 2개 이상: 제목 옆에 셀렉트박스 표시
+- 그룹 내 화면이 1개: 기존처럼 텍스트 표시
+- 화면 역할(screen_role)도 함께 표시
+
+## 기술 스택
+
+### 신규 의존성
+```bash
+npm install react-zoom-pan-pinch
+```
+
+### 사용된 컴포넌트
+- `TransformWrapper`, `TransformComponent` - 줌/드래그 기능
+- `Accordion`, `AccordionContent`, `AccordionItem`, `AccordionTrigger` - 아코디언 UI
+- `Popover`, `PopoverTrigger`, `PopoverContent` - 드롭다운 컨테이너
+- `Command`, `CommandInput`, `CommandList`, `CommandItem`, `CommandEmpty` - 검색 가능한 선택 UI
+- `tableManagementApi.getColumnList()` - 테이블 컬럼 정보 조회
+- `tableManagementApi.getTableList()` - 테이블 목록 조회
+- `tableManagementApi.updateColumnSettings()` - 조인 설정 저장
+- `screenApi.saveLayout()` - 레이아웃 저장
+- `screenApi.getLayout()` - 레이아웃 조회
+
+### 핵심 로직
+
+#### 컬럼 변경/추가/제거
+```typescript
+const handleColumnChange = async (fieldLabel: string, oldColumn: string, newColumn: string) => {
+  const isAddingField = fieldLabel === "__NEW_FIELD__";
+  const isRemovingField = newColumn === "__REMOVE_FIELD__";
+  
+  const currentLayout = await screenApi.getLayout(screenId);
+  
+  const updatedComponents = currentLayout.components.map((comp: any) => {
+    if (comp.componentConfig?.leftPanel?.columns) {
+      const leftColumns = comp.componentConfig.leftPanel.columns;
+      
+      // 필드 추가
+      if (isAddingField) {
+        return {
+          ...comp,
+          componentConfig: {
+            ...comp.componentConfig,
+            leftPanel: {
+              ...comp.componentConfig.leftPanel,
+              columns: [...leftColumns, { name: newColumn, columnName: newColumn }],
+            },
+          },
+        };
+      }
+      
+      // 필드 제거
+      const columnIdx = leftColumns.findIndex((col: any) => ...);
+      if (columnIdx !== -1 && isRemovingField) {
+        return {
+          ...comp,
+          componentConfig: {
+            ...comp.componentConfig,
+            leftPanel: {
+              ...comp.componentConfig.leftPanel,
+              columns: leftColumns.filter((_, i) => i !== columnIdx),
+            },
+          },
+        };
+      }
+      
+      // 컬럼 변경
+      if (columnIdx !== -1) {
+        return {
+          ...comp,
+          componentConfig: {
+            ...comp.componentConfig,
+            leftPanel: {
+              ...comp.componentConfig.leftPanel,
+              columns: leftColumns.map((col, i) => 
+                i === columnIdx ? { ...col, name: newColumn } : col
+              ),
+            },
+          },
+        };
+      }
+    }
+    return comp;
+  });
+
+  await screenApi.saveLayout(screenId, { ...currentLayout, components: updatedComponents });
+  onRefresh?.();
+};
+```
+
+#### 조인 설정 편집기 (JoinSettingEditor)
+```tsx
+<JoinSettingEditor
+  editingJoin={editingJoin}
+  setEditingJoin={setEditingJoin}
+  allTables={allTables}
+  refTableColumns={refTableColumns}
+  loadingRefColumns={loadingRefColumns}
+  savingJoinSetting={savingJoinSetting}
+  loadRefTableColumns={loadRefTableColumns}
+  handleSaveJoinSetting={handleSaveJoinSetting}
+/>
+```
+
+## 파일 변경 목록
+
+| 파일 | 변경 내용 |
+|------|----------|
+| `frontend/components/screen/ScreenSettingModal.tsx` | 전체 UI 개선, 줌/드래그 기능, 컬럼 변경/추가/제거 기능, 조인 설정 기능, 필드 매핑 통합, 실시간 반영, 제어 관리 탭 추가, 버튼 액션 설정, 플로우 연동, FlowEditor 임베드, ScreenDesigner 모달 임베드, 그룹 내 화면 전환 셀렉트박스 |
+| `frontend/components/screen/ScreenRelationFlow.tsx` | `filterKeyMapping`, `joinColumnRefs` 데이터 전달 |
+| `frontend/components/dataflow/node-editor/FlowEditor.tsx` | `onSaveComplete` 콜백, `embedded` 모드 props 추가 |
+| `frontend/components/dataflow/node-editor/FlowToolbar.tsx` | 저장 완료 시 `onSaveComplete` 콜백 호출 |
+| `frontend/lib/api/entityJoin.ts` | `companyCodeOverride` 파라미터 추가 |
+| `frontend/lib/api/screen.ts` | `saveLayout`, `getLayout` API 사용 |
+| `frontend/lib/api/tableManagement.ts` | `getTableList`, `getColumnList`, `updateColumnSettings` API |
+| `frontend/lib/registry/components/split-panel-layout/SplitPanelLayoutComponent.tsx` | `companyCode` prop 추가 |
+| `frontend/lib/registry/components/button/ButtonPrimaryComponent.tsx` | `webTypeConfig.backgroundColor/textColor` 지원 추가 |
+| `backend-node/src/controllers/entityJoinController.ts` | `companyCodeOverride` 처리 로직 추가 |
+| `backend-node/src/controllers/screenGroupController.ts` | `bind_field` 쿼리에 `columnName` 추가, `canvasWidth`/`canvasHeight` 계산 |
+
+## 사용 방법
+
+### 화면 설정 모달 열기
+1. 화면 관리 페이지에서 화면 그룹 선택
+2. 화면 노드 우클릭 → 컨텍스트 메뉴 표시
+3. "화면 설정" 선택 → 모달 열림
+4. 좌측 탭에서 정보 확인/수정, 우측에서 실시간 프리뷰
+
+### 프리뷰 영역 조작
+- **휠 스크롤**: 확대/축소 (5% 단위)
+- **마우스 드래그**: 화면 이동 (5px 이상 움직여야 드래그로 인식)
+- **짧은 클릭**: iframe 내부 요소 클릭
+
+### 컬럼 변경
+1. 메인/필터 테이블 아코디언 펼치기
+2. 파란색 배경의 "필드" 컬럼 클릭
+3. 우측 "컬럼 설정" 패널 확인
+4. "컬럼 변경" 드롭다운에서 새 컬럼 선택
+5. **실시간 반영** (페이지 새로고침 없음)
+
+### 필드 추가
+1. 메인/필터 테이블 아코디언 펼치기
+2. 회색/흰색 배경의 비필드 컬럼 클릭
+3. 우측 패널에서 **"필드로 추가"** 버튼 클릭
+4. 해당 컬럼이 화면 필드로 추가됨
+
+### 필드 제거
+1. 메인/필터 테이블 아코디언 펼치기
+2. 파란색 배경의 필드 컬럼 클릭
+3. 우측 패널에서 **"필드에서 제거"** 버튼 클릭
+4. 해당 필드가 화면에서 제거됨
+
+### 조인 설정 추가/편집
+1. 메인/필터 테이블 아코디언 펼치기
+2. 아무 컬럼 클릭 (조인 키가 아니어도 됨)
+3. 우측 패널의 "조인" 섹션에서:
+   - 조인 없음: **"추가"** 버튼 클릭
+   - 조인 있음: **"편집"** 버튼 클릭
+4. 대상 테이블 선택 (검색 가능)
+5. 연결 컬럼 (PK) 선택 (검색 가능)
+6. 표시 컬럼 선택 (검색 가능)
+7. **"저장"** 버튼 클릭
+
+### 컬럼 순서 변경 (드래그 앤 드롭)
+1. 메인/필터 테이블 아코디언 펼치기
+2. 파란색 배경의 "필드" 컬럼을 드래그 시작
+3. 원하는 위치로 드래그하여 이동 (실시간으로 순서 변경 표시)
+4. 마우스를 놓으면 (드롭) 순서가 저장됨
+5. 드래그 취소하려면 컬럼 영역 밖으로 드래그
+
+**참고:**
+- 사용 중인 필드만 드래그 가능 (파란색 배경)
+- 미사용 컬럼은 드래그 불가
+- 드래그 중에는 저장되지 않고, 드롭 시에만 저장됨
+
+### 그룹 내 화면 전환
+1. 화면 설정 모달을 열면 제목 옆에 **셀렉트박스** 표시 (그룹 내 화면이 2개 이상일 때)
+2. 셀렉트박스 클릭하여 같은 그룹의 다른 화면 선택
+3. 선택 즉시:
+   - 화면 데이터 자동 리로드
+   - 프리뷰 iframe 자동 새로고침
+4. 화면 역할(list, form, modal 등)도 함께 표시
+
+**참고:**
+- 그룹 내 화면이 1개뿐이면 기존처럼 텍스트로 표시
+- 모달을 닫지 않고도 여러 화면 설정 가능
+
+### 플로우 빠른 생성
+1. 제어 관리 탭의 "플로우 연동 현황"에서 **"새 플로우"** 버튼 클릭
+2. 또는 버튼별 플로우 선택에서 **"새 플로우 생성"** 옵션 클릭
+3. 전체화면 모달에서 FlowEditor가 열림
+4. 플로우를 완전하게 구성 (테이블 선택, 필드 매핑, 조건 등)
+5. 저장 시 자동으로 해당 버튼에 연동
+
+**참고:**
+- 버튼에서 생성 시: 해당 버튼에 자동 연동
+- 헤더에서 생성 시: 연동 없이 플로우만 생성
+- 모달을 닫으면 플로우 목록 자동 새로고침
+
+### 화면 디자이너 열기
+1. 화면 설정 모달의 제목 옆 **외부 링크 아이콘** 클릭
+2. 전체화면 모달에서 ScreenDesigner가 열림
+3. 컴포넌트 배치, 속성 변경 등 디자인 작업 수행
+4. 모달 닫을 때 자동으로:
+   - 화면 데이터 리로드
+   - 프리뷰 iframe 새로고침
+
+---
+
+## 향후 개선 계획 (Phase 2)
+
+### 컨셉: "손쉬운 사용"
+> 화면 디자이너에 들어가지 않고도 **자잘한 설정을 빠르게** 처리
+> **화면 테스트 → 설정 수정 → 다시 테스트** 사이클을 최소화
+
+### 1순위: 버튼 이름 변경 + 색상 변경 ✅ 완료
+| 항목 | 내용 |
+|------|------|
+| **필요성** | 오타 수정, 문구 변경, 버튼 색상 변경 시 화면 디자이너 진입 필요 |
+| **현재 상태** | ✅ **구현 완료** |
+| **구현 내용** | |
+
+#### 버튼 이름 변경
+- 버튼 이름을 직접 입력 필드에서 수정 가능
+- 실시간 버튼 프리뷰 제공
+- 저장 위치: `componentConfig.text`, `comp.label`, `comp.title` (레거시 호환)
+
+#### 버튼 색상 변경
+- 배경색 + 글자색 컬러 피커 제공
+- **프리셋 색상 버튼**: 파랑, 초록, 빨강, 회색, 흰색
+- 실시간 버튼 프리뷰에 색상 반영
+- 저장 위치:
+  - 배경색: `componentConfig.backgroundColor`, `style.backgroundColor`
+  - 글자색: `componentConfig.textColor`, `style.color`, `style.labelColor`
+
+### 1순위: 컬럼 라벨(표시명) 변경
+| 항목 | 내용 |
+|------|------|
+| **필요성** | "거래처코드" → "고객코드" 같은 헤더 변경 |
+| **현재 상태** | 컬럼명만 표시, 수정 불가 |
+| **구현 방향** | 컬럼 설정 패널에 "표시명" Input 추가 |
+| **주의사항** | 라벨만 변경, 실제 DB 컬럼명(`columnName`)은 변경 불가 (company_code 안전) |
+| **예상 난이도** | 중간 (1시간) |
+
+### 2순위: 확인 메시지 설정 ✅ 완료
+| 항목 | 내용 |
+|------|------|
+| **필요성** | "삭제하시겠습니까?" 같은 확인 다이얼로그 메시지 수정 |
+| **현재 상태** | ✅ **구현 완료** |
+| **구현 내용** | 저장/삭제 버튼에 확인 메시지 Input 필드 추가, 화면 디자이너와 동일하게 `confirmMessage` 저장 |
+
+### 추가 요청: 플로우 빠른 생성 ✅ 완료
+| 항목 | 내용 |
+|------|------|
+| **필요성** | 시스템관리 > 제어관리에 나가지 않고 바로 플로우 생성 |
+| **현재 상태** | ✅ **구현 완료** |
+| **구현 내용** | FlowEditor를 전체화면 모달로 임베드, 저장 시 자동 버튼 연동 |
+| **현재 상태** | 플로우 선택/연동만 가능, 생성 불가 |
+| **구현 방안** | |
+
+#### 방안 A: 모달 내 간이 플로우 생성
+- 장점: 화면 이탈 없음
+- 단점: FlowEditor 축소판 개발 필요 (큰 작업)
+
+#### 방안 B: iframe으로 FlowEditor 임베드
+- 장점: 기존 FlowEditor 재사용
+- 단점: 화면 공간 부족, 상태 동기화 복잡
+
+#### 방안 C: 새 창/탭으로 FlowEditor 열기 + 콜백
+- 장점: 전체 기능 사용 가능, 개발 비용 최소
+- 단점: 화면 전환 필요
+
+#### 방안 D: 간이 플로우 템플릿 선택 ⭐ 권장
+- 장점: 빠른 설정, 사용자 친화적
+- 단점: 커스터마이징 제한
+
+**템플릿 종류 예시:**
+- 데이터 저장 (INSERT)
+- 데이터 수정 (UPDATE)
+- 이력 저장 (INSERT to 이력 테이블)
+- 외부 API 호출
+
+### 미포함 항목 (상세 설정 권장)
+- 버튼 표시/숨김
+- 버튼 색상 변경
+- 컬럼 너비 조정
+- 필터 라벨 변경
+- 화면 이름/설명 변경
+
+---
+
+## 완료일
+2026-01-14
+
+## 변경 이력
+- 2026-01-12: 최초 작성 (줌/드래그/클릭, company_code 전달)
+- 2026-01-12: 컬럼 변경 기능 추가, 필드 매핑 통합, UI 개선 (1열 레이아웃, 배지 변경)
+- 2026-01-12: 실시간 반영 구현 (reload 제거), 레이아웃 순서 변경, 스타일 개선
+- 2026-01-12: 필드+조인 컬럼 스타일 개선 (파란배경 + 왼쪽 주황선), 조인 정보 패널 표시
+- 2026-01-12: 조인 관계 설정/수정 기능 구현 완료 (column_labels 테이블 저장)
+- 2026-01-13: 필드 추가/제거 기능 구현
+- 2026-01-13: 검색 가능한 조인 설정 드롭다운 (Command 컴포넌트)
+- 2026-01-13: 모든 컬럼에서 조인 설정 가능 (범용성 패치)
+- 2026-01-13: 메인 테이블에도 조인 설정 기능 추가
+- 2026-01-13: 조인 라인 색상 주황색으로 변경 (`border-l-orange-500`)
+- 2026-01-13: 조인 데이터 소스 수정 (`joinRef.refTable` 사용)
+- 2026-01-13: 패널 높이 동기화 (`max-h-[350px]`, `items-stretch`)
+- 2026-01-13: `MainTableAccordion`과 `FilterTableAccordion`을 `TableColumnAccordion`으로 통합
+- 2026-01-13: 드래그 앤 드롭 컬럼 순서 변경 기능 구현
+- 2026-01-13: 드래그 중에는 로컬 상태만 변경, 드롭 시에만 저장하도록 최적화
+- 2026-01-13: "제어 관리" 탭 신규 추가 (버튼 액션 설정, 플로우 연동)
+- 2026-01-13: 버튼별 플로우 연동 및 실행 타이밍 설정 기능
+- 2026-01-13: 모달/네비게이션 화면 선택 시 검색 가능한 Combobox 적용
+- 2026-01-13: 화면 목록 조회 개선 (전체 화면 조회 후 그룹별 분류)
+- 2026-01-13: 외부 연동 섹션 제거 (미사용)
+- 2026-01-13: 플로우 연동 섹션 추가 (화면에 연동된 전체 플로우 목록)
+- 2026-01-13: **다중 플로우 지원** - 한 버튼에 여러 플로우 연동 가능 (`flowConfigs` 배열)
+- 2026-01-13: **상시 편집 모드** - "편집" 버튼 제거, 상시 설정 변경 가능
+- 2026-01-13: **섹션 구분 개선** - 버튼 액션(파란색) / 플로우 연동(보라색) 테마 분리
+- 2026-01-13: **플로우 표시 방식 개선** - 플로우명은 텍스트, 미연동은 보라색 배지
+- 2026-01-13: **플로우 타이밍 개별 설정** - 각 플로우별 실행 전/후 설정 가능
+- 2026-01-13: **향후 개선 계획 문서화** - 버튼 이름 변경, 컬럼 라벨 변경, 확인 메시지 설정, 플로우 빠른 생성
+- 2026-01-13: **버튼 이름 변경 기능 구현** - `<span>` → `<Input>`, `componentConfig.text` 저장
+- 2026-01-13: **버튼 색상 변경 기능 추가** - 배경색/글자색 컬러 피커, 프리셋 색상 버튼, 실시간 프리뷰
+- 2026-01-13: **버튼 색상 저장 위치 수정** - `webTypeConfig.backgroundColor/textColor`에 저장 (OptimizedButtonComponent와 일치)
+- 2026-01-14: **버튼 색상 렌더링 수정** - `ButtonPrimaryComponent.tsx`에서 `webTypeConfig.backgroundColor/textColor` 지원 추가
+- 2026-01-14: **확인 메시지 설정 기능 추가** - 화면 디자이너와 동일하게 `confirmMessage` 필드 사용, Input으로 메시지 설정
+- 2026-01-14: **확인 메시지 save/delete 전용** - `save`/`delete` 액션에서만 확인 메시지 필드 표시, 다른 액션 타입으로 변경 시 confirmMessage 자동 제거
+- 2026-01-14: **플로우 빠른 생성 기능 구현** - 제어 플로우 에디터와 동일한 형식으로 플로우 **골격** 생성
+  - 플로우 연동 현황 헤더에 "빠른 생성" 버튼 추가
+  - 버튼별 플로우 추가 드롭다운에도 "새 플로우 빠른 생성" 옵션 추가
+  - 생성 후 자동 연동 옵션 (선택한 버튼에 자동 연결)
+  - 테이블 선택 또는 직접 입력, 액션 타입 선택 (INSERT/UPDATE/DELETE)
+  - **중요**: 빠른 생성은 기본 구조만 생성, 필드 매핑/WHERE 조건은 제어 관리에서 추가 설정 필요
+  - "생성만" / "생성 후 편집" 버튼으로 워크플로우 선택 가능
+  - 경고 안내 UI 추가 (추가 설정 필요 안내)
+- 2026-01-14: **플로우 빠른 생성 → FlowEditor 임베드 방식으로 변경**
+  - 골격 생성 대신 **전체 FlowEditor를 전체화면 모달로 임베드**
+  - 플로우 생성 후 자동으로 버튼에 연동
+  - `FlowEditor` 컴포넌트에 `onSaveComplete` 콜백과 `embedded` 모드 추가
+  - `FlowToolbar`에서 저장 완료 시 콜백 호출
+- 2026-01-14: **인풋 필드 인식 개선**
+  - 백엔드 `getMultipleScreenLayoutSummary` SQL 쿼리에 `properties->>'columnName'` 추가
+  - `bindField`, `componentConfig.field`, `componentConfig.valueField` 를 `usedColumns`에 포함
+  - 프론트엔드 `stats` 계산 시 `item.bindField`도 `layoutColumnsSet`에 추가
+  - `TableColumnAccordion`에 `usedFields` props 전달하여 필드 배지 정확히 표시
+- 2026-01-14: **화면 캔버스 크기 자동 조절**
+  - 백엔드에서 `canvasWidth`, `canvasHeight` 계산 (컴포넌트 최대 좌표 기준)
+  - `PreviewTab`에서 `canvasWidth`, `canvasHeight` props 수신
+  - 여유 마진 추가: 가로 +120px, 세로 +250px (패딩, 헤더, 하단 요소 고려)
+  - 최소 크기 보장 (가로 500px, 세로 650px)
+- 2026-01-14: **폼 화면 필드 추가/제거 기능**
+  - `handleColumnChange`에서 `text-input` 등 폼 컴포넌트 처리 로직 추가
+  - 필드 추가 시: 마지막 컴포넌트 아래에 새 `text-input` 컴포넌트 자동 배치
+  - 필드 제거 시: `bindField`가 일치하는 컴포넌트 삭제
+  - 기존 그리드 컬럼 변경 로직과 통합
+- 2026-01-14: **화면 디자이너 모달 통합**
+  - 기존: "디자이너" 버튼 클릭 시 새 탭/창에서 열림
+  - 변경: **전체화면 Dialog 내부에 ScreenDesigner 임베드**
+  - `showDesignerModal` 상태로 모달 제어
+  - 디자이너 닫을 때 `loadData()` + `setIframeKey()` 호출하여 자동 새로고침
+- 2026-01-14: **그룹 내 화면 전환 기능 (셀렉트박스)**
+  - `groupId`가 있으면 `getScreenGroup(groupId)`로 그룹 내 화면 목록 조회
+  - 그룹 내 화면이 2개 이상일 때 제목 옆에 **셀렉트박스** 표시
+  - 화면 선택 시:
+    - `currentScreenId`, `currentScreenName`, `currentMainTable` 상태 업데이트
+    - 레이아웃 데이터 자동 리로드
+    - iframe 자동 새로고침
+  - 화면 역할(screen_role)도 함께 표시 (예: "거래처 목록 (list)")
diff --git a/frontend/app/(main)/admin/screenMng/screenMngList/page.tsx b/frontend/app/(main)/admin/screenMng/screenMngList/page.tsx
index 5b996ea3..37c17d14 100644
--- a/frontend/app/(main)/admin/screenMng/screenMngList/page.tsx
+++ b/frontend/app/(main)/admin/screenMng/screenMngList/page.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { useState, useEffect, useCallback } from "react";
+import { useSearchParams } from "next/navigation";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { ArrowLeft, Plus, RefreshCw, Search, LayoutGrid, LayoutList, TestTube2 } from "lucide-react";
@@ -21,9 +22,10 @@ type Step = "list" | "design" | "template" | "unified-test";
 type ViewMode = "tree" | "table";
 
 export default function ScreenManagementPage() {
+  const searchParams = useSearchParams();
   const [currentStep, setCurrentStep] = useState<Step>("list");
   const [selectedScreen, setSelectedScreen] = useState<ScreenDefinition | null>(null);
-  const [selectedGroup, setSelectedGroup] = useState<{ id: number; name: string } | null>(null);
+  const [selectedGroup, setSelectedGroup] = useState<{ id: number; name: string; company_code?: string } | null>(null);
   const [focusedScreenIdInGroup, setFocusedScreenIdInGroup] = useState<number | null>(null);
   const [stepHistory, setStepHistory] = useState<Step[]>(["list"]);
   const [viewMode, setViewMode] = useState<ViewMode>("tree");
@@ -52,6 +54,20 @@ export default function ScreenManagementPage() {
     loadScreens();
   }, [loadScreens]);
 
+  // URL 쿼리 파라미터로 화면 디자이너 자동 열기
+  useEffect(() => {
+    const openDesignerId = searchParams.get("openDesigner");
+    if (openDesignerId && screens.length > 0) {
+      const screenId = parseInt(openDesignerId, 10);
+      const targetScreen = screens.find((s) => s.screenId === screenId);
+      if (targetScreen) {
+        setSelectedScreen(targetScreen);
+        setCurrentStep("design");
+        setStepHistory(["list", "design"]);
+      }
+    }
+  }, [searchParams, screens]);
+
   // 화면 설계 모드일 때는 전체 화면 사용
   const isDesignMode = currentStep === "design";
 
@@ -179,10 +195,18 @@ export default function ScreenManagementPage() {
                   setFocusedScreenIdInGroup(null); // 포커스 초기화
                 }}
                 onScreenSelectInGroup={(group, screenId) => {
-                  // 그룹 내 화면 클릭 시: 그룹 선택 + 해당 화면 포커스
-                  setSelectedGroup(group);
+                  // 그룹 내 화면 클릭 시
+                  const isNewGroup = selectedGroup?.id !== group.id;
+                  
+                  if (isNewGroup) {
+                    // 새 그룹 진입: 포커싱 없이 시작 (첫 진입 시 망가지는 문제 방지)
+                    setSelectedGroup(group);
+                    setFocusedScreenIdInGroup(null);
+                  } else {
+                    // 같은 그룹 내에서 다른 화면 클릭: 포커싱 유지
+                    setFocusedScreenIdInGroup(screenId);
+                  }
                   setSelectedScreen(null);
-                  setFocusedScreenIdInGroup(screenId);
                 }}
               />
             </div>
@@ -223,3 +247,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 dd9fcc3a..133a7256 100644
--- a/frontend/app/(main)/screens/[screenId]/page.tsx
+++ b/frontend/app/(main)/screens/[screenId]/page.tsx
@@ -24,6 +24,7 @@ import { ScreenContextProvider } from "@/contexts/ScreenContext"; // 컴포넌
 import { SplitPanelProvider } from "@/lib/registry/components/split-panel-layout/SplitPanelContext"; // 분할 패널 리사이즈
 import { ActiveTabProvider } from "@/contexts/ActiveTabContext"; // 활성 탭 관리
 import { evaluateConditional } from "@/lib/utils/conditionalEvaluator"; // 조건부 표시 평가
+import { ScreenMultiLangProvider } from "@/contexts/ScreenMultiLangContext"; // 화면 다국어
 
 function ScreenViewPage() {
   const params = useParams();
@@ -33,9 +34,18 @@ function ScreenViewPage() {
 
   // URL 쿼리에서 menuObjid 가져오기 (메뉴 스코프)
   const menuObjid = searchParams.get("menuObjid") ? parseInt(searchParams.get("menuObjid")!) : undefined;
+  
+  // URL 쿼리에서 프리뷰용 company_code 가져오기
+  const previewCompanyCode = searchParams.get("company_code");
+  
+  // 프리뷰 모드 감지 (iframe에서 로드될 때)
+  const isPreviewMode = searchParams.get("preview") === "true";
 
   // 🆕 현재 로그인한 사용자 정보
-  const { user, userName, companyCode } = useAuth();
+  const { user, userName, companyCode: authCompanyCode } = useAuth();
+  
+  // 프리뷰 모드에서는 URL 파라미터의 company_code 우선 사용
+  const companyCode = previewCompanyCode || authCompanyCode;
 
   // 🆕 모바일 환경 감지
   const { isMobile } = useResponsive();
@@ -105,7 +115,7 @@ function ScreenViewPage() {
   // 편집 모달 이벤트 리스너 등록
   useEffect(() => {
     const handleOpenEditModal = (event: CustomEvent) => {
-      console.log("🎭 편집 모달 열기 이벤트 수신:", event.detail);
+      // console.log("🎭 편집 모달 열기 이벤트 수신:", event.detail);
 
       setEditModalConfig({
         screenId: event.detail.screenId,
@@ -295,27 +305,40 @@ function ScreenViewPage() {
         const designWidth = layout?.screenResolution?.width || 1200;
         const designHeight = layout?.screenResolution?.height || 800;
 
-        // 컨테이너의 실제 크기
-        const containerWidth = containerRef.current.offsetWidth;
-        const containerHeight = containerRef.current.offsetHeight;
+        // 컨테이너의 실제 크기 (프리뷰 모드에서는 window 크기 사용)
+        let containerWidth: number;
+        let containerHeight: number;
+        
+        if (isPreviewMode) {
+          // iframe에서는 window 크기를 직접 사용
+          containerWidth = window.innerWidth;
+          containerHeight = window.innerHeight;
+        } else {
+          containerWidth = containerRef.current.offsetWidth;
+          containerHeight = containerRef.current.offsetHeight;
+        }
 
-        // 여백 설정: 좌우 16px씩 (총 32px), 상단 패딩 32px (pt-8)
-        const MARGIN_X = 32;
-        const availableWidth = containerWidth - MARGIN_X;
-
-        // 가로 기준 스케일 계산 (좌우 여백 16px씩 고정)
-        const newScale = availableWidth / designWidth;
+        let newScale: number;
+        
+        if (isPreviewMode) {
+          // 프리뷰 모드: 가로/세로 모두 fit하도록 (여백 없이)
+          const scaleX = containerWidth / designWidth;
+          const scaleY = containerHeight / designHeight;
+          newScale = Math.min(scaleX, scaleY, 1); // 최대 1배율
+        } else {
+          // 일반 모드: 가로 기준 스케일 (좌우 여백 16px씩 고정)
+          const MARGIN_X = 32;
+          const availableWidth = containerWidth - MARGIN_X;
+          newScale = availableWidth / designWidth;
+        }
 
         // console.log("📐 스케일 계산:", {
         //   containerWidth,
         //   containerHeight,
-        //   MARGIN_X,
-        //   availableWidth,
         //   designWidth,
         //   designHeight,
         //   finalScale: newScale,
-        //   "스케일된 화면 크기": `${designWidth * newScale}px × ${designHeight * newScale}px`,
-        //   "실제 좌우 여백": `${(containerWidth - designWidth * newScale) / 2}px씩`,
+        //   isPreviewMode,
         // });
 
         setScale(newScale);
@@ -334,7 +357,7 @@ function ScreenViewPage() {
     return () => {
       clearTimeout(timer);
     };
-  }, [layout, isMobile]);
+  }, [layout, isMobile, isPreviewMode]);
 
   if (loading) {
     return (
@@ -372,7 +395,7 @@ function ScreenViewPage() {
     <ScreenPreviewProvider isPreviewMode={false}>
       <ActiveTabProvider>
         <TableOptionsProvider>
-        <div ref={containerRef} className="bg-background h-full w-full overflow-auto p-3">
+        <div ref={containerRef} className={`bg-background h-full w-full ${isPreviewMode ? "overflow-hidden p-0" : "overflow-auto p-3"}`}>
           {/* 레이아웃 준비 중 로딩 표시 */}
           {!layoutReady && (
             <div className="from-muted to-muted/50 flex h-full w-full items-center justify-center bg-gradient-to-br">
@@ -385,9 +408,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`,
@@ -830,7 +854,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 06b7bd27..1614c9b8 100644
--- a/frontend/app/globals.css
+++ b/frontend/app/globals.css
@@ -388,4 +388,249 @@ 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% {
+    transform: scaleY(0);
+    transform-origin: top;
+    opacity: 0;
+  }
+  100% {
+    transform: scaleY(1);
+    transform-origin: top;
+    opacity: 1;
+  }
+}
+
 /* ===== End of Global Styles ===== */
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 69ae82d7..8531d643 100644
--- a/frontend/components/common/ScreenModal.tsx
+++ b/frontend/components/common/ScreenModal.tsx
@@ -163,8 +163,19 @@ export const ScreenModal: React.FC<ScreenModalProps> = ({ className }) => {
 
       // 🆕 editData가 있으면 formData와 originalData로 설정 (수정 모드)
       if (editData) {
-        setFormData(editData);
-        setOriginalData(editData); // 🆕 원본 데이터 저장 (UPDATE 판단용)
+        // 🆕 배열인 경우 두 가지 데이터를 설정:
+        // 1. formData: 첫 번째 요소(객체) - 일반 입력 필드용 (TextInput 등)
+        // 2. selectedData: 전체 배열 - 다중 항목 컴포넌트용 (SelectedItemsDetailInput 등)
+        if (Array.isArray(editData)) {
+          const firstRecord = editData[0] || {};
+          setFormData(firstRecord); // 🔧 일반 입력 필드용 (객체)
+          setSelectedData(editData); // 🔧 다중 항목 컴포넌트용 (배열) - groupedData로 전달됨
+          setOriginalData(firstRecord); // 첫 번째 레코드를 원본으로 저장
+        } else {
+          setFormData(editData);
+          setSelectedData([editData]); // 🔧 단일 객체도 배열로 변환하여 저장
+          setOriginalData(editData); // 🆕 원본 데이터 저장 (UPDATE 판단용)
+        }
       } else {
         // 🆕 신규 등록 모드: 분할 패널 부모 데이터가 있으면 미리 설정
         // 🔧 중요: 신규 등록 시에는 연결 필드(equipment_code 등)만 전달해야 함
diff --git a/frontend/components/dataflow/node-editor/FlowEditor.tsx b/frontend/components/dataflow/node-editor/FlowEditor.tsx
index 3686554f..9c4ad7e8 100644
--- a/frontend/components/dataflow/node-editor/FlowEditor.tsx
+++ b/frontend/components/dataflow/node-editor/FlowEditor.tsx
@@ -65,6 +65,10 @@ const nodeTypes = {
  */
 interface FlowEditorInnerProps {
   initialFlowId?: number | null;
+  /** 임베디드 모드에서 저장 완료 시 호출되는 콜백 */
+  onSaveComplete?: (flowId: number, flowName: string) => void;
+  /** 임베디드 모드 여부 */
+  embedded?: boolean;
 }
 
 // 플로우 에디터 툴바 버튼 설정
@@ -87,7 +91,7 @@ const flowToolbarButtons: ToolbarButton[] = [
   },
 ];
 
-function FlowEditorInner({ initialFlowId }: FlowEditorInnerProps) {
+function FlowEditorInner({ initialFlowId, onSaveComplete, embedded = false }: FlowEditorInnerProps) {
   const reactFlowWrapper = useRef<HTMLDivElement>(null);
   const { screenToFlowPosition, setCenter } = useReactFlow();
 
@@ -385,7 +389,7 @@ function FlowEditorInner({ initialFlowId }: FlowEditorInnerProps) {
 
           {/* 상단 툴바 */}
           <Panel position="top-center" className="pointer-events-auto">
-            <FlowToolbar validations={validations} />
+            <FlowToolbar validations={validations} onSaveComplete={onSaveComplete} />
           </Panel>
         </ReactFlow>
       </div>
@@ -416,13 +420,21 @@ function FlowEditorInner({ initialFlowId }: FlowEditorInnerProps) {
  */
 interface FlowEditorProps {
   initialFlowId?: number | null;
+  /** 임베디드 모드에서 저장 완료 시 호출되는 콜백 */
+  onSaveComplete?: (flowId: number, flowName: string) => void;
+  /** 임베디드 모드 여부 (헤더 표시 여부 등) */
+  embedded?: boolean;
 }
 
-export function FlowEditor({ initialFlowId }: FlowEditorProps = {}) {
+export function FlowEditor({ initialFlowId, onSaveComplete, embedded = false }: FlowEditorProps = {}) {
   return (
     <div className="h-full w-full">
       <ReactFlowProvider>
-        <FlowEditorInner initialFlowId={initialFlowId} />
+        <FlowEditorInner 
+          initialFlowId={initialFlowId} 
+          onSaveComplete={onSaveComplete}
+          embedded={embedded}
+        />
       </ReactFlowProvider>
     </div>
   );
diff --git a/frontend/components/dataflow/node-editor/FlowToolbar.tsx b/frontend/components/dataflow/node-editor/FlowToolbar.tsx
index d837d355..f136d216 100644
--- a/frontend/components/dataflow/node-editor/FlowToolbar.tsx
+++ b/frontend/components/dataflow/node-editor/FlowToolbar.tsx
@@ -17,9 +17,11 @@ import { useToast } from "@/hooks/use-toast";
 
 interface FlowToolbarProps {
   validations?: FlowValidation[];
+  /** 임베디드 모드에서 저장 완료 시 호출되는 콜백 */
+  onSaveComplete?: (flowId: number, flowName: string) => void;
 }
 
-export function FlowToolbar({ validations = [] }: FlowToolbarProps) {
+export function FlowToolbar({ validations = [], onSaveComplete }: FlowToolbarProps) {
   const { toast } = useToast();
   const { zoomIn, zoomOut, fitView } = useReactFlow();
   const {
@@ -59,13 +61,27 @@ export function FlowToolbar({ validations = [] }: FlowToolbarProps) {
     const result = await saveFlow();
     if (result.success) {
       toast({
-        title: "✅ 플로우 저장 완료",
+        title: "저장 완료",
         description: `${result.message}\nFlow ID: ${result.flowId}`,
         variant: "default",
       });
+      
+      // 임베디드 모드에서 저장 완료 콜백 호출
+      if (onSaveComplete && result.flowId) {
+        onSaveComplete(result.flowId, flowName);
+      }
+      
+      // 부모 창이 있으면 postMessage로 알림 (새 창에서 열린 경우)
+      if (window.opener && result.flowId) {
+        window.opener.postMessage({
+          type: "FLOW_SAVED",
+          flowId: result.flowId,
+          flowName: flowName,
+        }, "*");
+      }
     } else {
       toast({
-        title: "❌ 저장 실패",
+        title: "저장 실패",
         description: result.message,
         variant: "destructive",
       });
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/AppLayout.tsx b/frontend/components/layout/AppLayout.tsx
index 236071ac..e3e8d920 100644
--- a/frontend/components/layout/AppLayout.tsx
+++ b/frontend/components/layout/AppLayout.tsx
@@ -302,6 +302,9 @@ function AppLayoutInner({ children }: AppLayoutProps) {
   // 현재 경로에 따라 어드민 모드인지 판단 (쿼리 파라미터도 고려)
   const isAdminMode = pathname.startsWith("/admin") || searchParams.get("mode") === "admin";
 
+  // 프리뷰 모드: 사이드바/헤더 없이 화면만 표시 (iframe 임베드용)
+  const isPreviewMode = searchParams.get("preview") === "true";
+
   // 현재 모드에 따라 표시할 메뉴 결정
   // 관리자 모드에서는 관리자 메뉴만, 사용자 모드에서는 사용자 메뉴만 표시
   const currentMenus = isAdminMode ? adminMenus : userMenus;
@@ -458,6 +461,15 @@ function AppLayoutInner({ children }: AppLayoutProps) {
     );
   }
 
+  // 프리뷰 모드: 사이드바/헤더 없이 화면만 표시
+  if (isPreviewMode) {
+    return (
+      <div className="h-screen w-full overflow-auto bg-white p-4">
+        {children}
+      </div>
+    );
+  }
+
   // UI 변환된 메뉴 데이터
   const uiMenus = convertMenuToUI(currentMenus, user as ExtendedUserInfo);
 
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 376f9953..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,23 +1934,34 @@ 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
+          <button
             onClick={handleButtonClick}
             disabled={readonly}
-            size="sm"
-            variant={config?.variant || "default"}
-            className="w-full"
+            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%",
-              // 설정값이 있으면 우선 적용
               backgroundColor: config?.backgroundColor,
               color: config?.textColor,
               borderColor: config?.borderColor,
             }}
           >
-            {label || "버튼"}
-          </Button>
+            {buttonText}
+          </button>,
         );
       }
 
@@ -1948,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">
@@ -2067,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") {
@@ -2076,6 +2117,8 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
       hideLabel,
       shouldShowLabel,
       labelText,
+      langKey,
+      hasTranslation: !!translations[langKey],
     });
   }
 
@@ -2090,7 +2133,6 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
     marginBottom: component.style?.labelMarginBottom || "4px",
   };
 
-
   // 상위에서 라벨을 표시한 경우, 컴포넌트 내부에서는 라벨을 숨김
   const componentForRendering = shouldShowLabel
     ? {
@@ -2106,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 0b26e91e..46b08753 100644
--- a/frontend/components/screen/InteractiveScreenViewerDynamic.tsx
+++ b/frontend/components/screen/InteractiveScreenViewerDynamic.tsx
@@ -374,6 +374,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}
@@ -851,12 +852,18 @@ export const InteractiveScreenViewerDynamic: React.FC<InteractiveScreenViewerPro
       }
     };
 
+    // 커스텀 색상이 있으면 Tailwind 클래스 대신 직접 스타일 적용
+    const hasCustomColors = config?.backgroundColor || config?.textColor || comp.style?.backgroundColor || comp.style?.color;
+    
     return (
-      <Button
+      <button
         onClick={handleClick}
-        variant={(config?.variant as any) || "default"}
-        size={(config?.size as any) || "default"}
         disabled={config?.disabled}
+        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'
+        }`}
         style={{
           // 컴포넌트 스타일 적용
           ...comp.style,
@@ -869,7 +876,7 @@ export const InteractiveScreenViewerDynamic: React.FC<InteractiveScreenViewerPro
         }}
       >
         {label || "버튼"}
-      </Button>
+      </button>
     );
   };
 
diff --git a/frontend/components/screen/NodeSettingModal.tsx b/frontend/components/screen/NodeSettingModal.tsx
new file mode 100644
index 00000000..173e5664
--- /dev/null
+++ b/frontend/components/screen/NodeSettingModal.tsx
@@ -0,0 +1,1889 @@
+"use client";
+
+import React, { useState, useEffect, useCallback, useMemo } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+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 {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+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 { Badge } from "@/components/ui/badge";
+import { 
+  Database, 
+  Link2, 
+  GitBranch, 
+  Columns3, 
+  Save,
+  Plus, 
+  Pencil, 
+  Trash2,
+  RefreshCw,
+  Loader2,
+  Check,
+  ChevronsUpDown,
+} from "lucide-react";
+import {
+  getTableRelations,
+  createTableRelation,
+  updateTableRelation,
+  deleteTableRelation,
+  getFieldJoins,
+  createFieldJoin,
+  updateFieldJoin,
+  deleteFieldJoin,
+  getDataFlows,
+  createDataFlow,
+  updateDataFlow,
+  deleteDataFlow,
+  FieldJoin,
+  DataFlow,
+  TableRelation,
+} from "@/lib/api/screenGroup";
+import { tableManagementApi, ColumnTypeInfo, TableInfo } from "@/lib/api/tableManagement";
+
+// ============================================================
+// 타입 정의
+// ============================================================
+
+// 기존 설정 정보 (화면 디자이너에서 추출)
+interface ExistingConfig {
+  joinColumnRefs?: Array<{
+    column: string;
+    refTable: string;
+    refTableLabel?: string;
+    refColumn: string;
+  }>;
+  filterColumns?: string[];
+  fieldMappings?: Array<{
+    targetField: string;
+    sourceField: string;
+    sourceTable?: string;
+    sourceDisplayName?: string;
+  }>;
+  referencedBy?: Array<{
+    fromTable: string;
+    fromTableLabel?: string;
+    fromColumn: string;
+    toColumn: string;
+    toColumnLabel?: string;
+    relationType: string;
+  }>;
+  columns?: Array<{
+    name: string;
+    originalName?: string;
+    type: string;
+    isPrimaryKey?: boolean;
+    isForeignKey?: boolean;
+  }>;
+  // 화면 노드용 테이블 정보
+  mainTable?: string;
+  filterTables?: Array<{
+    tableName: string;
+    tableLabel: string;
+    filterColumns: string[];
+    joinColumnRefs: Array<{
+      column: string;
+      refTable: string;
+      refTableLabel?: string;
+      refColumn: string;
+    }>;
+  }>;
+}
+
+interface NodeSettingModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  // 노드 정보
+  nodeType: "screen" | "table";
+  nodeId: string;  // 노드 ID (예: screen-1, table-sales_order_mng)
+  screenId: number;
+  screenName: string;
+  tableName?: string;  // 테이블 노드인 경우
+  tableLabel?: string;
+  // 그룹 정보 (데이터 흐름 설정에 필요)
+  groupId?: number;
+  groupScreens?: Array<{ screen_id: number; screen_name: string }>;
+  // 기존 설정 정보 (화면 디자이너에서 추출한 조인/필터 정보)
+  existingConfig?: ExistingConfig;
+  // 새로고침 콜백
+  onRefresh?: () => void;
+}
+
+// 탭 ID
+type TabId = "table-relation" | "join-setting" | "data-flow" | "field-mapping";
+
+// ============================================================
+// 검색 가능한 셀렉트 컴포넌트
+// ============================================================
+
+interface SearchableSelectProps {
+  value: string;
+  onValueChange: (value: string) => void;
+  options: Array<{ value: string; label: string; description?: string }>;
+  placeholder?: string;
+  searchPlaceholder?: string;
+  emptyText?: string;
+  disabled?: boolean;
+  className?: string;
+}
+
+function SearchableSelect({
+  value,
+  onValueChange,
+  options,
+  placeholder = "선택",
+  searchPlaceholder = "검색...",
+  emptyText = "항목을 찾을 수 없습니다.",
+  disabled = false,
+  className,
+}: SearchableSelectProps) {
+  const [open, setOpen] = useState(false);
+
+  const selectedOption = options.find((opt) => opt.value === value);
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          role="combobox"
+          aria-expanded={open}
+          disabled={disabled}
+          className={cn(
+            "h-9 w-full justify-between text-xs font-normal",
+            !value && "text-muted-foreground",
+            className
+          )}
+        >
+          <span className="truncate">
+            {selectedOption?.label || placeholder}
+          </span>
+          <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={searchPlaceholder} className="text-xs" />
+          <CommandList>
+            <CommandEmpty className="text-xs py-4 text-center">
+              {emptyText}
+            </CommandEmpty>
+            <CommandGroup>
+              {options.map((option) => (
+                <CommandItem
+                  key={option.value}
+                  value={option.label}
+                  onSelect={() => {
+                    onValueChange(option.value);
+                    setOpen(false);
+                  }}
+                  className="text-xs"
+                >
+                  <Check
+                    className={cn(
+                      "mr-2 h-4 w-4",
+                      value === option.value ? "opacity-100" : "opacity-0"
+                    )}
+                  />
+                  <div className="flex flex-col">
+                    <span>{option.label}</span>
+                    {option.description && (
+                      <span className="text-[10px] text-muted-foreground">
+                        {option.description}
+                      </span>
+                    )}
+                  </div>
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+// ============================================================
+// 컴포넌트
+// ============================================================
+
+export default function NodeSettingModal({
+  isOpen,
+  onClose,
+  nodeType,
+  nodeId,
+  screenId,
+  screenName,
+  tableName,
+  tableLabel,
+  groupId,
+  groupScreens = [],
+  existingConfig,
+  onRefresh,
+}: NodeSettingModalProps) {
+  // 탭 상태
+  const [activeTab, setActiveTab] = useState<TabId>("table-relation");
+  
+  // 로딩 상태
+  const [loading, setLoading] = useState(false);
+  
+  // 테이블 목록 (조인/필터 설정용)
+  const [tables, setTables] = useState<TableInfo[]>([]);
+  const [tableColumns, setTableColumns] = useState<Record<string, ColumnTypeInfo[]>>({});
+  
+  // 테이블 연결 데이터
+  const [tableRelations, setTableRelations] = useState<TableRelation[]>([]);
+  
+  // 조인 설정 데이터
+  const [fieldJoins, setFieldJoins] = useState<FieldJoin[]>([]);
+  
+  // 데이터 흐름 데이터
+  const [dataFlows, setDataFlows] = useState<DataFlow[]>([]);
+
+  // ============================================================
+  // 데이터 로드
+  // ============================================================
+
+  // 테이블 목록 로드
+  const loadTables = useCallback(async () => {
+    try {
+      const response = await tableManagementApi.getTableList();
+      if (response.success && response.data) {
+        setTables(response.data);
+      }
+    } catch (error) {
+      console.error("테이블 목록 로드 실패:", error);
+    }
+  }, []);
+
+  // 테이블 컬럼 로드
+  const loadTableColumns = useCallback(async (tblName: string) => {
+    if (tableColumns[tblName]) return; // 이미 로드됨
+    
+    try {
+      const response = await tableManagementApi.getColumnList(tblName);
+      if (response.success && response.data) {
+        setTableColumns(prev => ({
+          ...prev,
+          [tblName]: response.data?.columns || [],
+        }));
+      }
+    } catch (error) {
+      console.error(`테이블 컬럼 로드 실패 (${tblName}):`, error);
+    }
+  }, [tableColumns]);
+
+  // 테이블 연결 로드
+  const loadTableRelations = useCallback(async () => {
+    if (!screenId) return;
+    
+    setLoading(true);
+    try {
+      const response = await getTableRelations({ screen_id: screenId });
+      if (response.success && response.data) {
+        setTableRelations(response.data);
+      }
+    } catch (error) {
+      console.error("테이블 연결 로드 실패:", error);
+    } finally {
+      setLoading(false);
+    }
+  }, [screenId]);
+
+  // 조인 설정 로드
+  const loadFieldJoins = useCallback(async () => {
+    if (!screenId) return;
+    
+    setLoading(true);
+    try {
+      const response = await getFieldJoins(screenId);
+      if (response.success && response.data) {
+        setFieldJoins(response.data);
+      }
+    } catch (error) {
+      console.error("조인 설정 로드 실패:", error);
+    } finally {
+      setLoading(false);
+    }
+  }, [screenId]);
+
+  // 데이터 흐름 로드
+  const loadDataFlows = useCallback(async () => {
+    if (!groupId) return;
+    
+    setLoading(true);
+    try {
+      const response = await getDataFlows(groupId);
+      if (response.success && response.data) {
+        // 현재 화면 관련 흐름만 필터링
+        const filtered = response.data.filter(
+          flow => flow.source_screen_id === screenId || flow.target_screen_id === screenId
+        );
+        setDataFlows(filtered);
+      }
+    } catch (error) {
+      console.error("데이터 흐름 로드 실패:", error);
+    } finally {
+      setLoading(false);
+    }
+  }, [groupId, screenId]);
+
+  // 모달 열릴 때 데이터 로드
+  useEffect(() => {
+    if (isOpen) {
+      loadTables();
+      loadTableRelations();
+      loadFieldJoins();
+      if (groupId) {
+        loadDataFlows();
+      }
+      // 현재 테이블 컬럼 로드
+      if (tableName) {
+        loadTableColumns(tableName);
+      }
+    }
+  }, [isOpen, loadTables, loadTableRelations, loadFieldJoins, loadDataFlows, tableName, groupId, loadTableColumns]);
+
+  // ============================================================
+  // 이벤트 핸들러
+  // ============================================================
+
+  // 모달 닫기
+  const handleClose = () => {
+    onClose();
+  };
+
+  // 새로고침
+  const handleRefresh = async () => {
+    setLoading(true);
+    try {
+      await Promise.all([
+        loadTableRelations(),
+        loadFieldJoins(),
+        groupId ? loadDataFlows() : Promise.resolve(),
+      ]);
+      toast.success("데이터가 새로고침되었습니다.");
+    } catch (error) {
+      toast.error("새로고침 실패");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // ============================================================
+  // 렌더링
+  // ============================================================
+
+  // 모달 제목
+  const modalTitle = nodeType === "screen" 
+    ? `화면 설정: ${screenName}` 
+    : `테이블 설정: ${tableLabel || tableName}`;
+
+  // 모달 설명
+  const modalDescription = nodeType === "screen"
+    ? "화면의 테이블 연결, 조인, 데이터 흐름을 설정합니다."
+    : "테이블의 조인 관계 및 필드 매핑을 설정합니다.";
+
+  return (
+    <Dialog open={isOpen} onOpenChange={handleClose}>
+      <DialogContent className="max-w-[95vw] sm:max-w-[900px] max-h-[90vh] overflow-hidden flex flex-col">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2 text-base sm:text-lg">
+            {nodeType === "screen" ? (
+              <Database className="h-5 w-5 text-blue-500" />
+            ) : (
+              <Database className="h-5 w-5 text-green-500" />
+            )}
+            {modalTitle}
+          </DialogTitle>
+          <DialogDescription className="text-xs sm:text-sm">
+            {modalDescription}
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="flex-1 overflow-hidden">
+          <Tabs value={activeTab} onValueChange={(v) => setActiveTab(v as TabId)} className="h-full flex flex-col">
+            <div className="flex items-center justify-between border-b pb-2">
+              <TabsList className="grid grid-cols-4 w-auto">
+                <TabsTrigger value="table-relation" className="text-xs sm:text-sm gap-1">
+                  <Database className="h-4 w-4" />
+                  <span className="hidden sm:inline">테이블 연결</span>
+                  <span className="sm:hidden">연결</span>
+                </TabsTrigger>
+                <TabsTrigger value="join-setting" className="text-xs sm:text-sm gap-1">
+                  <Link2 className="h-4 w-4" />
+                  <span className="hidden sm:inline">조인 설정</span>
+                  <span className="sm:hidden">조인</span>
+                </TabsTrigger>
+                <TabsTrigger value="data-flow" className="text-xs sm:text-sm gap-1">
+                  <GitBranch className="h-4 w-4" />
+                  <span className="hidden sm:inline">데이터 흐름</span>
+                  <span className="sm:hidden">흐름</span>
+                </TabsTrigger>
+                <TabsTrigger value="field-mapping" className="text-xs sm:text-sm gap-1">
+                  <Columns3 className="h-4 w-4" />
+                  <span className="hidden sm:inline">필드 매핑</span>
+                  <span className="sm:hidden">매핑</span>
+                </TabsTrigger>
+              </TabsList>
+              
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={handleRefresh}
+                disabled={loading}
+                className="gap-1"
+              >
+                {loading ? (
+                  <Loader2 className="h-4 w-4 animate-spin" />
+                ) : (
+                  <RefreshCw className="h-4 w-4" />
+                )}
+                <span className="hidden sm:inline">새로고침</span>
+              </Button>
+            </div>
+
+            {/* 탭 컨텐츠 */}
+            <div className="flex-1 overflow-auto pt-4">
+              {/* 탭1: 테이블 연결 */}
+              <TabsContent value="table-relation" className="mt-0 h-full">
+                <TableRelationTab
+                  screenId={screenId}
+                  screenName={screenName}
+                  tableRelations={tableRelations}
+                  tables={tables}
+                  loading={loading}
+                  onReload={loadTableRelations}
+                  onRefreshVisualization={onRefresh}
+                  nodeType={nodeType}
+                  existingConfig={existingConfig}
+                />
+              </TabsContent>
+
+              {/* 탭2: 조인 설정 */}
+              <TabsContent value="join-setting" className="mt-0 h-full">
+                <JoinSettingTab
+                  screenId={screenId}
+                  tableName={tableName}
+                  fieldJoins={fieldJoins}
+                  tables={tables}
+                  tableColumns={tableColumns}
+                  loading={loading}
+                  onReload={loadFieldJoins}
+                  onLoadColumns={loadTableColumns}
+                  onRefreshVisualization={onRefresh}
+                  existingConfig={existingConfig}
+                />
+              </TabsContent>
+
+              {/* 탭3: 데이터 흐름 */}
+              <TabsContent value="data-flow" className="mt-0 h-full">
+                <DataFlowTab
+                  screenId={screenId}
+                  groupId={groupId}
+                  groupScreens={groupScreens}
+                  dataFlows={dataFlows}
+                  loading={loading}
+                  onReload={loadDataFlows}
+                  onRefreshVisualization={onRefresh}
+                />
+              </TabsContent>
+
+              {/* 탭4: 필드 매핑 */}
+              <TabsContent value="field-mapping" className="mt-0 h-full">
+                <FieldMappingTab
+                  screenId={screenId}
+                  tableName={tableName}
+                  tableColumns={tableColumns[tableName || ""] || []}
+                  loading={loading}
+                />
+              </TabsContent>
+            </div>
+          </Tabs>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+
+// ============================================================
+// 탭1: 테이블 연결 설정
+// ============================================================
+
+interface TableRelationTabProps {
+  screenId: number;
+  screenName: string;
+  tableRelations: TableRelation[];
+  tables: TableInfo[];
+  loading: boolean;
+  onReload: () => void;
+  onRefreshVisualization?: () => void;
+  nodeType: "screen" | "table";
+  existingConfig?: ExistingConfig;
+}
+
+function TableRelationTab({
+  screenId,
+  screenName,
+  tableRelations,
+  tables,
+  loading,
+  onReload,
+  onRefreshVisualization,
+  nodeType,
+  existingConfig,
+}: TableRelationTabProps) {
+  const [isEditing, setIsEditing] = useState(false);
+  const [editItem, setEditItem] = useState<TableRelation | null>(null);
+  const [formData, setFormData] = useState({
+    table_name: "",
+    relation_type: "main",
+    crud_operations: "CR",
+    description: "",
+    is_active: "Y",
+  });
+
+  // 폼 초기화
+  const resetForm = () => {
+    setFormData({
+      table_name: "",
+      relation_type: "main",
+      crud_operations: "CR",
+      description: "",
+      is_active: "Y",
+    });
+    setEditItem(null);
+    setIsEditing(false);
+  };
+
+  // 수정 모드
+  const handleEdit = (item: TableRelation) => {
+    setEditItem(item);
+    setFormData({
+      table_name: item.table_name,
+      relation_type: item.relation_type,
+      crud_operations: item.crud_operations,
+      description: item.description || "",
+      is_active: item.is_active,
+    });
+    setIsEditing(true);
+  };
+
+  // 저장
+  const handleSave = async () => {
+    if (!formData.table_name) {
+      toast.error("테이블을 선택해주세요.");
+      return;
+    }
+
+    try {
+      const payload = {
+        screen_id: screenId,
+        ...formData,
+      };
+
+      let response;
+      if (editItem) {
+        response = await updateTableRelation(editItem.id, payload);
+      } else {
+        response = await createTableRelation(payload);
+      }
+
+      if (response.success) {
+        toast.success(editItem ? "테이블 연결이 수정되었습니다." : "테이블 연결이 추가되었습니다.");
+        resetForm();
+        onReload();
+        onRefreshVisualization?.();
+      } else {
+        toast.error(response.message || "저장에 실패했습니다.");
+      }
+    } catch (error: any) {
+      toast.error(error.message || "저장 중 오류가 발생했습니다.");
+    }
+  };
+
+  // 삭제
+  const handleDelete = async (id: number) => {
+    if (!confirm("정말 삭제하시겠습니까?")) return;
+
+    try {
+      const response = await deleteTableRelation(id);
+      if (response.success) {
+        toast.success("테이블 연결이 삭제되었습니다.");
+        onReload();
+        onRefreshVisualization?.();
+      } else {
+        toast.error(response.message || "삭제에 실패했습니다.");
+      }
+    } catch (error: any) {
+      toast.error(error.message || "삭제 중 오류가 발생했습니다.");
+    }
+  };
+
+  // 화면 디자이너에서 추출한 테이블 관계를 통합 목록으로 변환
+  const designerTableRelations = useMemo(() => {
+    if (nodeType !== "screen" || !existingConfig) return [];
+    
+    const result: Array<{
+      id: string;
+      source: "designer";
+      table_name: string;
+      table_label?: string;
+      relation_type: string;
+      crud_operations: string;
+      description: string;
+      filterColumns?: string[];
+      joinColumnRefs?: Array<{ column: string; refTable: string; refTableLabel?: string; refColumn: string; }>;
+    }> = [];
+    
+    // 메인 테이블 추가
+    if (existingConfig.mainTable) {
+      result.push({
+        id: `designer-main-${existingConfig.mainTable}`,
+        source: "designer",
+        table_name: existingConfig.mainTable,
+        table_label: existingConfig.mainTable,
+        relation_type: "main",
+        crud_operations: "CRUD",
+        description: "화면의 주요 데이터 소스 테이블",
+      });
+    }
+    
+    // 필터 테이블 추가
+    if (existingConfig.filterTables) {
+      existingConfig.filterTables.forEach((ft, idx) => {
+        result.push({
+          id: `designer-filter-${ft.tableName}-${idx}`,
+          source: "designer",
+          table_name: ft.tableName,
+          table_label: ft.tableLabel,
+          relation_type: "sub",
+          crud_operations: "R",
+          description: "마스터-디테일 필터 테이블",
+          filterColumns: ft.filterColumns,
+          joinColumnRefs: ft.joinColumnRefs,
+        });
+      });
+    }
+    
+    return result;
+  }, [nodeType, existingConfig]);
+  
+  // DB 테이블 관계와 디자이너 테이블 관계 통합
+  const unifiedTableRelations = useMemo(() => {
+    // DB 관계
+    const dbRelations = tableRelations.map(item => ({
+      ...item,
+      id: item.id,
+      source: "db" as const,
+    }));
+    
+    // 디자이너 관계 (DB에 이미 있는 테이블은 제외)
+    const dbTableNames = new Set(tableRelations.map(r => r.table_name));
+    const filteredDesignerRelations = designerTableRelations.filter(
+      dr => !dbTableNames.has(dr.table_name)
+    );
+    
+    return [...filteredDesignerRelations, ...dbRelations];
+  }, [tableRelations, designerTableRelations]);
+  
+  // 디자이너 항목 수정 (DB로 저장)
+  const handleEditDesignerRelation = (item: typeof designerTableRelations[0]) => {
+    setFormData({
+      table_name: item.table_name,
+      relation_type: item.relation_type,
+      crud_operations: item.crud_operations,
+      description: item.description || "",
+      is_active: "Y",
+    });
+    setEditItem(null);
+    setIsEditing(true);
+  };
+
+  return (
+    <div className="space-y-4">
+      {/* 입력 폼 */}
+      <div className="bg-muted/50 rounded-lg p-4 space-y-3">
+        <div className="text-sm font-medium">{isEditing ? "테이블 연결 수정" : "새 테이블 연결 추가"}</div>
+        
+        <div className="grid grid-cols-1 sm:grid-cols-4 gap-3">
+          <div>
+            <Label className="text-xs">테이블 *</Label>
+            <SearchableSelect
+              value={formData.table_name}
+              onValueChange={(v) => setFormData(prev => ({ ...prev, table_name: v }))}
+              options={tables.map((t) => ({
+                value: t.tableName,
+                label: t.displayName || t.tableName,
+                description: t.tableName !== t.displayName ? t.tableName : undefined,
+              }))}
+              placeholder="테이블 선택"
+              searchPlaceholder="테이블 검색..."
+            />
+          </div>
+
+          <div>
+            <Label className="text-xs">관계 유형</Label>
+            <SearchableSelect
+              value={formData.relation_type}
+              onValueChange={(v) => setFormData(prev => ({ ...prev, relation_type: v }))}
+              options={[
+                { value: "main", label: "메인 테이블" },
+                { value: "sub", label: "서브 테이블" },
+                { value: "lookup", label: "조회 테이블" },
+                { value: "save", label: "저장 테이블" },
+              ]}
+              placeholder="관계 유형"
+              searchPlaceholder="유형 검색..."
+            />
+          </div>
+
+          <div>
+            <Label className="text-xs">CRUD 권한</Label>
+            <SearchableSelect
+              value={formData.crud_operations}
+              onValueChange={(v) => setFormData(prev => ({ ...prev, crud_operations: v }))}
+              options={[
+                { value: "C", label: "생성(C)" },
+                { value: "R", label: "읽기(R)" },
+                { value: "CR", label: "생성+읽기(CR)" },
+                { value: "CRU", label: "생성+읽기+수정(CRU)" },
+                { value: "CRUD", label: "전체(CRUD)" },
+              ]}
+              placeholder="CRUD 권한"
+              searchPlaceholder="권한 검색..."
+            />
+          </div>
+
+          <div>
+            <Label className="text-xs">설명</Label>
+            <Input
+              value={formData.description}
+              onChange={(e) => setFormData(prev => ({ ...prev, description: e.target.value }))}
+              placeholder="설명 입력"
+              className="h-9 text-xs"
+            />
+          </div>
+        </div>
+
+        <div className="flex justify-end gap-2">
+          {isEditing && (
+            <Button variant="outline" size="sm" onClick={resetForm}>
+              취소
+            </Button>
+          )}
+          <Button size="sm" onClick={handleSave} className="gap-1">
+            <Save className="h-4 w-4" />
+            {isEditing ? "수정" : "추가"}
+          </Button>
+        </div>
+      </div>
+
+      {/* 목록 */}
+      <div className="border rounded-lg">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead className="text-xs w-[60px]">출처</TableHead>
+              <TableHead className="text-xs">테이블</TableHead>
+              <TableHead className="text-xs">관계 유형</TableHead>
+              <TableHead className="text-xs">CRUD</TableHead>
+              <TableHead className="text-xs">설명</TableHead>
+              <TableHead className="text-xs w-[100px]">작업</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {loading ? (
+              <TableRow>
+                <TableCell colSpan={6} className="text-center py-8 text-muted-foreground">
+                  <Loader2 className="h-5 w-5 animate-spin mx-auto" />
+                </TableCell>
+              </TableRow>
+            ) : unifiedTableRelations.length === 0 ? (
+              <TableRow>
+                <TableCell colSpan={6} className="text-center py-8 text-muted-foreground text-sm">
+                  등록된 테이블 연결이 없습니다.
+                </TableCell>
+              </TableRow>
+            ) : (
+              unifiedTableRelations.map((item) => (
+                <TableRow key={item.id} className={item.source === "designer" ? "bg-orange-50/50" : ""}>
+                  <TableCell className="text-xs">
+                    <Badge variant="outline" className={cn(
+                      "h-5 px-2",
+                      item.source === "designer" 
+                        ? "border-orange-400 text-orange-700 bg-orange-100" 
+                        : "border-blue-400 text-blue-700 bg-blue-100"
+                    )}>
+                      {item.source === "designer" ? "화면" : "DB"}
+                    </Badge>
+                  </TableCell>
+                  <TableCell className="text-xs">
+                    <div>
+                      <span className="font-medium">{item.table_label || item.table_name}</span>
+                      {item.table_label && item.table_label !== item.table_name && (
+                        <span className="text-muted-foreground ml-1">({item.table_name})</span>
+                      )}
+                    </div>
+                    {/* 필터 테이블의 경우 필터 컬럼/조인 정보 표시 */}
+                    {item.source === "designer" && "filterColumns" in item && item.filterColumns && item.filterColumns.length > 0 && (
+                      <div className="flex flex-wrap gap-1 mt-1">
+                        {item.filterColumns.map((col, idx) => (
+                          <span key={idx} className="px-1.5 py-0.5 bg-purple-100 text-purple-600 text-[10px] rounded font-mono">
+                            {col}
+                          </span>
+                        ))}
+                      </div>
+                    )}
+                    {item.source === "designer" && "joinColumnRefs" in item && item.joinColumnRefs && item.joinColumnRefs.length > 0 && (
+                      <div className="flex flex-wrap gap-1 mt-1">
+                        {item.joinColumnRefs.map((join, idx) => (
+                          <span key={idx} className="px-1.5 py-0.5 bg-orange-100 text-orange-600 text-[10px] rounded">
+                            {join.column}→{join.refTable}
+                          </span>
+                        ))}
+                      </div>
+                    )}
+                  </TableCell>
+                  <TableCell className="text-xs">
+                    <span className={`px-2 py-1 rounded text-xs ${
+                      item.relation_type === "main" ? "bg-blue-100 text-blue-700" :
+                      item.relation_type === "sub" ? "bg-purple-100 text-purple-700" :
+                      item.relation_type === "save" ? "bg-pink-100 text-pink-700" :
+                      "bg-gray-100 text-gray-700"
+                    }`}>
+                      {item.relation_type === "main" ? "메인" :
+                       item.relation_type === "sub" ? "필터" :
+                       item.relation_type === "save" ? "저장" :
+                       item.relation_type === "lookup" ? "조회" : item.relation_type}
+                    </span>
+                  </TableCell>
+                  <TableCell className="text-xs">{item.crud_operations}</TableCell>
+                  <TableCell className="text-xs text-muted-foreground">
+                    {item.description || "-"}
+                  </TableCell>
+                  <TableCell>
+                    <div className="flex gap-1">
+                      {item.source === "db" ? (
+                        <>
+                          <Button
+                            variant="ghost"
+                            size="icon"
+                            className="h-7 w-7"
+                            onClick={() => handleEdit(item as TableRelation)}
+                          >
+                            <Pencil className="h-3 w-3" />
+                          </Button>
+                          <Button
+                            variant="ghost"
+                            size="icon"
+                            className="h-7 w-7 text-destructive"
+                            onClick={() => handleDelete(item.id as number)}
+                          >
+                            <Trash2 className="h-3 w-3" />
+                          </Button>
+                        </>
+                      ) : (
+                        <Button
+                          variant="ghost"
+                          size="icon"
+                          className="h-7 w-7"
+                          title="DB에 저장하여 수정"
+                          onClick={() => handleEditDesignerRelation(item as typeof designerTableRelations[0])}
+                        >
+                          <Pencil className="h-3 w-3" />
+                        </Button>
+                      )}
+                    </div>
+                  </TableCell>
+                </TableRow>
+              ))
+            )}
+          </TableBody>
+        </Table>
+      </div>
+    </div>
+  );
+}
+
+
+// ============================================================
+// 탭2: 조인 설정
+// ============================================================
+
+interface JoinSettingTabProps {
+  screenId: number;
+  tableName?: string;
+  fieldJoins: FieldJoin[];
+  tables: TableInfo[];
+  tableColumns: Record<string, ColumnTypeInfo[]>;
+  loading: boolean;
+  onReload: () => void;
+  onLoadColumns: (tableName: string) => void;
+  onRefreshVisualization?: () => void;
+  // 기존 설정 정보 (화면 디자이너에서 추출)
+  existingConfig?: ExistingConfig;
+}
+
+// 화면 디자이너 조인 설정을 통합 형식으로 변환하기 위한 인터페이스
+interface UnifiedJoinItem {
+  id: number | string; // DB는 숫자, 화면 디자이너는 문자열
+  source: "db" | "designer"; // 출처
+  save_table: string;
+  save_table_label?: string;
+  save_column: string;
+  join_table: string;
+  join_table_label?: string;
+  join_column: string;
+  display_column?: string;
+  join_type: string;
+}
+
+function JoinSettingTab({
+  screenId,
+  tableName,
+  fieldJoins,
+  tables,
+  tableColumns,
+  loading,
+  onReload,
+  onLoadColumns,
+  onRefreshVisualization,
+  existingConfig,
+}: JoinSettingTabProps) {
+  const [isEditing, setIsEditing] = useState(false);
+  const [editItem, setEditItem] = useState<FieldJoin | null>(null);
+  const [editingDesignerItem, setEditingDesignerItem] = useState<UnifiedJoinItem | null>(null);
+  const [formData, setFormData] = useState({
+    field_name: "",
+    save_table: tableName || "",
+    save_column: "",
+    join_table: "",
+    join_column: "",
+    display_column: "",
+    join_type: "LEFT",
+    filter_condition: "",
+    is_active: "Y",
+  });
+
+  // 테이블 라벨 가져오기 (tableName -> displayName) - 먼저 선언해야 함
+  const tableLabel = tables.find(t => t.tableName === tableName)?.displayName;
+
+  // 화면 디자이너 조인 설정을 통합 형식으로 변환
+  // 1. 현재 테이블의 조인 설정
+  const directJoins: UnifiedJoinItem[] = (existingConfig?.joinColumnRefs || []).map((ref, idx) => ({
+    id: `designer-direct-${idx}`,
+    source: "designer" as const,
+    save_table: tableName || "",
+    save_table_label: tableLabel || tableName,
+    save_column: ref.column,
+    join_table: ref.refTable,
+    join_table_label: ref.refTableLabel,
+    join_column: ref.refColumn,
+    display_column: "",
+    join_type: "LEFT",
+  }));
+
+  // 2. 필터 테이블들의 조인 설정 (화면 노드에서 열었을 때)
+  const filterTableJoins: UnifiedJoinItem[] = (existingConfig?.filterTables || []).flatMap((ft, ftIdx) =>
+    (ft.joinColumnRefs || []).map((ref, refIdx) => ({
+      id: `designer-filter-${ftIdx}-${refIdx}`,
+      source: "designer" as const,
+      save_table: ft.tableName,
+      save_table_label: ft.tableLabel || ft.tableName,
+      save_column: ref.column,
+      join_table: ref.refTable,
+      join_table_label: ref.refTableLabel,
+      join_column: ref.refColumn,
+      display_column: "",
+      join_type: "LEFT",
+    }))
+  );
+
+  // 모든 디자이너 조인 설정 통합
+  const designerJoins: UnifiedJoinItem[] = [...directJoins, ...filterTableJoins];
+
+  // DB 조인 설정을 통합 형식으로 변환
+  const dbJoins: UnifiedJoinItem[] = fieldJoins.map((item) => ({
+    id: item.id,
+    source: "db" as const,
+    save_table: item.save_table,
+    save_table_label: item.save_table_label,
+    save_column: item.save_column,
+    join_table: item.join_table,
+    join_table_label: item.join_table_label,
+    join_column: item.join_column,
+    display_column: item.display_column,
+    join_type: item.join_type,
+  }));
+
+  // 통합된 조인 목록 (화면 디자이너 + DB)
+  const unifiedJoins = [...designerJoins, ...dbJoins];
+
+  // 저장 테이블 변경 시 컬럼 로드
+  useEffect(() => {
+    if (formData.save_table) {
+      onLoadColumns(formData.save_table);
+    }
+  }, [formData.save_table, onLoadColumns]);
+
+  // 조인 테이블 변경 시 컬럼 로드
+  useEffect(() => {
+    if (formData.join_table) {
+      onLoadColumns(formData.join_table);
+    }
+  }, [formData.join_table, onLoadColumns]);
+
+  // 폼 초기화
+  const resetForm = () => {
+    setFormData({
+      field_name: "",
+      save_table: tableName || "",
+      save_column: "",
+      join_table: "",
+      join_column: "",
+      display_column: "",
+      join_type: "LEFT",
+      filter_condition: "",
+      is_active: "Y",
+    });
+    setEditItem(null);
+    setEditingDesignerItem(null);
+    setIsEditing(false);
+  };
+
+  // 수정 모드 (DB 설정)
+  const handleEdit = (item: FieldJoin) => {
+    setEditItem(item);
+    setEditingDesignerItem(null);
+    setFormData({
+      field_name: item.field_name || "",
+      save_table: item.save_table,
+      save_column: item.save_column,
+      join_table: item.join_table,
+      join_column: item.join_column,
+      display_column: item.display_column,
+      join_type: item.join_type,
+      filter_condition: item.filter_condition || "",
+      is_active: item.is_active,
+    });
+    setIsEditing(true);
+    // 컬럼 로드
+    onLoadColumns(item.save_table);
+    onLoadColumns(item.join_table);
+  };
+
+  // 통합 목록에서 수정 버튼 클릭
+  const handleEditUnified = (item: UnifiedJoinItem) => {
+    if (item.source === "db") {
+      // DB 설정은 기존 로직 사용
+      const originalItem = fieldJoins.find(j => j.id === item.id);
+      if (originalItem) handleEdit(originalItem);
+    } else {
+      // 화면 디자이너 설정은 폼에 채우고 새로 저장하도록
+      setEditItem(null);
+      setEditingDesignerItem(item);
+      setFormData({
+        field_name: "",
+        save_table: item.save_table,
+        save_column: item.save_column,
+        join_table: item.join_table,
+        join_column: item.join_column,
+        display_column: item.display_column || "",
+        join_type: item.join_type,
+        filter_condition: "",
+        is_active: "Y",
+      });
+      setIsEditing(true);
+      // 컬럼 로드
+      onLoadColumns(item.save_table);
+      onLoadColumns(item.join_table);
+    }
+  };
+
+  // 통합 목록에서 삭제 버튼 클릭
+  const handleDeleteUnified = async (item: UnifiedJoinItem) => {
+    if (item.source === "db") {
+      // DB 설정만 삭제 가능
+      await handleDelete(item.id as number);
+    } else {
+      // 화면 디자이너 설정은 삭제 불가 (화면 디자이너에서 수정해야 함)
+      toast.info("화면 디자이너 설정은 화면 디자이너에서 수정해주세요.");
+    }
+  };
+
+  // 저장
+  const handleSave = async () => {
+    if (!formData.save_table || !formData.save_column || !formData.join_table || !formData.join_column) {
+      toast.error("필수 필드를 모두 입력해주세요.");
+      return;
+    }
+
+    try {
+      const payload = {
+        screen_id: screenId,
+        ...formData,
+      };
+
+      let response;
+      if (editItem) {
+        response = await updateFieldJoin(editItem.id, payload);
+      } else {
+        response = await createFieldJoin(payload);
+      }
+
+      if (response.success) {
+        toast.success(editItem ? "조인 설정이 수정되었습니다." : "조인 설정이 추가되었습니다.");
+        resetForm();
+        onReload();
+        onRefreshVisualization?.();
+      } else {
+        toast.error(response.message || "저장에 실패했습니다.");
+      }
+    } catch (error: any) {
+      toast.error(error.message || "저장 중 오류가 발생했습니다.");
+    }
+  };
+
+  // 삭제
+  const handleDelete = async (id: number) => {
+    if (!confirm("정말 삭제하시겠습니까?")) return;
+
+    try {
+      const response = await deleteFieldJoin(id);
+      if (response.success) {
+        toast.success("조인 설정이 삭제되었습니다.");
+        onReload();
+        onRefreshVisualization?.();
+      } else {
+        toast.error(response.message || "삭제에 실패했습니다.");
+      }
+    } catch (error: any) {
+      toast.error(error.message || "삭제 중 오류가 발생했습니다.");
+    }
+  };
+
+  // 저장 테이블 컬럼
+  const saveTableColumns = tableColumns[formData.save_table] || [];
+  
+  // 조인 테이블 컬럼
+  const joinTableColumns = tableColumns[formData.join_table] || [];
+
+  return (
+    <div className="space-y-4">
+      {/* 필터링 컬럼 정보 */}
+      {existingConfig?.filterColumns && existingConfig.filterColumns.length > 0 && (
+        <div className="bg-purple-50 border border-purple-200 rounded-lg p-4">
+          <div className="flex items-center gap-2 mb-2">
+            <Database className="h-4 w-4 text-purple-600" />
+            <span className="text-sm font-medium text-purple-800">필터링 컬럼 (마스터-디테일 연동)</span>
+          </div>
+          <div className="flex flex-wrap gap-2">
+            {existingConfig.filterColumns.map((col, idx) => (
+              <span key={idx} className="px-2 py-1 bg-purple-100 text-purple-700 text-xs rounded font-mono">
+                {col}
+              </span>
+            ))}
+          </div>
+          <p className="text-xs text-purple-600 mt-2">
+            * 이 컬럼들을 기준으로 상위 화면에서 데이터가 필터링됩니다.
+          </p>
+        </div>
+      )}
+
+      {/* 참조 정보 (이 테이블을 참조하는 다른 테이블들) */}
+      {existingConfig?.referencedBy && existingConfig.referencedBy.length > 0 && (
+        <div className="bg-green-50 border border-green-200 rounded-lg p-4">
+          <div className="flex items-center gap-2 mb-3">
+            <GitBranch className="h-4 w-4 text-green-600" />
+            <span className="text-sm font-medium text-green-800">이 테이블을 참조하는 관계</span>
+          </div>
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead className="text-xs">참조하는 테이블</TableHead>
+                <TableHead className="text-xs">참조 유형</TableHead>
+                <TableHead className="text-xs">연결</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {existingConfig.referencedBy.map((ref, idx) => (
+                <TableRow key={idx}>
+                  <TableCell className="text-xs">
+                    <span className="font-medium">{ref.fromTableLabel || ref.fromTable}</span>
+                  </TableCell>
+                  <TableCell className="text-xs">
+                    <span className={`px-2 py-0.5 rounded text-xs ${
+                      ref.relationType === 'join' ? 'bg-orange-100 text-orange-700' :
+                      ref.relationType === 'filter' ? 'bg-purple-100 text-purple-700' :
+                      'bg-gray-100 text-gray-700'
+                    }`}>
+                      {ref.relationType}
+                    </span>
+                  </TableCell>
+                  <TableCell className="text-xs font-mono">
+                    {ref.fromColumn} → {ref.toColumn}
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </div>
+      )}
+
+      {/* 입력 폼 */}
+      <div className="bg-muted/50 rounded-lg p-4 space-y-3">
+        <div className="text-sm font-medium">{isEditing ? "조인 설정 수정" : "새 조인 설정 추가"}</div>
+        
+        <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
+          {/* 저장 테이블 */}
+          <div>
+            <Label className="text-xs">저장 테이블 *</Label>
+            <SearchableSelect
+              value={formData.save_table}
+              onValueChange={(v) => {
+                setFormData(prev => ({ ...prev, save_table: v, save_column: "" }));
+              }}
+              options={tables.map((t) => ({
+                value: t.tableName,
+                label: t.displayName || t.tableName,
+                description: t.tableName !== t.displayName ? t.tableName : undefined,
+              }))}
+              placeholder="테이블 선택"
+              searchPlaceholder="테이블 검색..."
+            />
+          </div>
+
+          {/* 저장 컬럼 */}
+          <div>
+            <Label className="text-xs">저장 컬럼 (FK) *</Label>
+            <SearchableSelect
+              value={formData.save_column}
+              onValueChange={(v) => setFormData(prev => ({ ...prev, save_column: v }))}
+              disabled={!formData.save_table}
+              options={saveTableColumns.map((c) => ({
+                value: c.columnName,
+                label: c.displayName || c.columnName,
+                description: c.columnName !== c.displayName ? c.columnName : undefined,
+              }))}
+              placeholder="컬럼 선택"
+              searchPlaceholder="컬럼 검색..."
+            />
+          </div>
+
+          {/* 조인 타입 */}
+          <div>
+            <Label className="text-xs">조인 타입</Label>
+            <SearchableSelect
+              value={formData.join_type}
+              onValueChange={(v) => setFormData(prev => ({ ...prev, join_type: v }))}
+              options={[
+                { value: "LEFT", label: "LEFT JOIN" },
+                { value: "INNER", label: "INNER JOIN" },
+                { value: "RIGHT", label: "RIGHT JOIN" },
+              ]}
+              placeholder="조인 타입"
+              searchPlaceholder="타입 검색..."
+            />
+          </div>
+        </div>
+
+        <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
+          {/* 조인 테이블 */}
+          <div>
+            <Label className="text-xs">조인 테이블 *</Label>
+            <SearchableSelect
+              value={formData.join_table}
+              onValueChange={(v) => {
+                setFormData(prev => ({ ...prev, join_table: v, join_column: "", display_column: "" }));
+              }}
+              options={tables.map((t) => ({
+                value: t.tableName,
+                label: t.displayName || t.tableName,
+                description: t.tableName !== t.displayName ? t.tableName : undefined,
+              }))}
+              placeholder="테이블 선택"
+              searchPlaceholder="테이블 검색..."
+            />
+          </div>
+
+          {/* 조인 컬럼 */}
+          <div>
+            <Label className="text-xs">조인 컬럼 (PK) *</Label>
+            <SearchableSelect
+              value={formData.join_column}
+              onValueChange={(v) => setFormData(prev => ({ ...prev, join_column: v }))}
+              disabled={!formData.join_table}
+              options={joinTableColumns.map((c) => ({
+                value: c.columnName,
+                label: c.displayName || c.columnName,
+                description: c.columnName !== c.displayName ? c.columnName : undefined,
+              }))}
+              placeholder="컬럼 선택"
+              searchPlaceholder="컬럼 검색..."
+            />
+          </div>
+
+          {/* 표시 컬럼 */}
+          <div>
+            <Label className="text-xs">표시 컬럼</Label>
+            <SearchableSelect
+              value={formData.display_column}
+              onValueChange={(v) => setFormData(prev => ({ ...prev, display_column: v }))}
+              disabled={!formData.join_table}
+              options={joinTableColumns.map((c) => ({
+                value: c.columnName,
+                label: c.displayName || c.columnName,
+                description: c.columnName !== c.displayName ? c.columnName : undefined,
+              }))}
+              placeholder="표시할 컬럼 선택"
+              searchPlaceholder="컬럼 검색..."
+            />
+          </div>
+        </div>
+
+        <div className="flex justify-end gap-2">
+          {isEditing && (
+            <Button variant="outline" size="sm" onClick={resetForm}>
+              취소
+            </Button>
+          )}
+          <Button size="sm" onClick={handleSave} className="gap-1">
+            <Save className="h-4 w-4" />
+            {isEditing ? "수정" : "추가"}
+          </Button>
+        </div>
+      </div>
+
+      {/* 통합 조인 목록 */}
+      <div className="border rounded-lg overflow-x-auto">
+        <div className="bg-muted/30 px-4 py-2 border-b flex items-center justify-between">
+          <span className="text-sm font-medium flex items-center gap-2">
+            <Link2 className="h-4 w-4" />
+            조인 설정 목록
+          </span>
+          <span className="text-xs text-muted-foreground">
+            총 {unifiedJoins.length}개
+          </span>
+        </div>
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead className="text-xs">출처</TableHead>
+              <TableHead className="text-xs">저장 테이블</TableHead>
+              <TableHead className="text-xs">FK 컬럼</TableHead>
+              <TableHead className="text-xs">조인 테이블</TableHead>
+              <TableHead className="text-xs">PK 컬럼</TableHead>
+              <TableHead className="text-xs">타입</TableHead>
+              <TableHead className="text-xs w-[100px]">작업</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {loading ? (
+              <TableRow>
+                <TableCell colSpan={7} className="text-center py-8 text-muted-foreground">
+                  <Loader2 className="h-5 w-5 animate-spin mx-auto" />
+                </TableCell>
+              </TableRow>
+            ) : unifiedJoins.length === 0 ? (
+              <TableRow>
+                <TableCell colSpan={7} className="text-center py-8 text-muted-foreground text-sm">
+                  등록된 조인 설정이 없습니다.
+                </TableCell>
+              </TableRow>
+            ) : (
+              unifiedJoins.map((item) => (
+                <TableRow key={item.id} className={item.source === "designer" ? "bg-orange-50/50" : ""}>
+                  <TableCell className="text-xs">
+                    {item.source === "designer" ? (
+                      <span className="px-2 py-0.5 rounded bg-orange-100 text-orange-700 text-xs">
+                        화면
+                      </span>
+                    ) : (
+                      <span className="px-2 py-0.5 rounded bg-blue-100 text-blue-700 text-xs">
+                        DB
+                      </span>
+                    )}
+                  </TableCell>
+                  <TableCell className="text-xs">{item.save_table_label || item.save_table}</TableCell>
+                  <TableCell className="text-xs font-mono">{item.save_column}</TableCell>
+                  <TableCell className="text-xs">{item.join_table_label || item.join_table}</TableCell>
+                  <TableCell className="text-xs font-mono">{item.join_column}</TableCell>
+                  <TableCell className="text-xs">
+                    <span className="px-2 py-1 rounded bg-gray-100 text-gray-700 text-xs">
+                      {item.join_type}
+                    </span>
+                  </TableCell>
+                  <TableCell>
+                    <div className="flex gap-1">
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        className="h-7 w-7"
+                        onClick={() => handleEditUnified(item)}
+                        title={item.source === "designer" ? "DB 설정으로 저장" : "수정"}
+                      >
+                        <Pencil className="h-3 w-3" />
+                      </Button>
+                      {item.source === "db" && (
+                        <Button
+                          variant="ghost"
+                          size="icon"
+                          className="h-7 w-7 text-destructive"
+                          onClick={() => handleDeleteUnified(item)}
+                          title="삭제"
+                        >
+                          <Trash2 className="h-3 w-3" />
+                        </Button>
+                      )}
+                    </div>
+                  </TableCell>
+                </TableRow>
+              ))
+            )}
+          </TableBody>
+        </Table>
+        {designerJoins.length > 0 && (
+          <div className="px-4 py-2 border-t text-xs text-muted-foreground bg-orange-50/30">
+            <span className="text-orange-600">* 화면</span>: 화면 디자이너 설정 (수정 시 DB에 저장) | 
+            <span className="text-blue-600 ml-1">* DB</span>: DB 저장 설정 (직접 수정/삭제 가능)
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+
+// ============================================================
+// 탭3: 데이터 흐름
+// ============================================================
+
+interface DataFlowTabProps {
+  screenId: number;
+  groupId?: number;
+  groupScreens: Array<{ screen_id: number; screen_name: string }>;
+  dataFlows: DataFlow[];
+  loading: boolean;
+  onReload: () => void;
+  onRefreshVisualization?: () => void;
+}
+
+function DataFlowTab({
+  screenId,
+  groupId,
+  groupScreens,
+  dataFlows,
+  loading,
+  onReload,
+  onRefreshVisualization,
+}: DataFlowTabProps) {
+  const [isEditing, setIsEditing] = useState(false);
+  const [editItem, setEditItem] = useState<DataFlow | null>(null);
+  const [formData, setFormData] = useState({
+    source_screen_id: screenId,
+    source_action: "",
+    target_screen_id: 0,
+    target_action: "",
+    flow_type: "unidirectional",
+    flow_label: "",
+    is_active: "Y",
+  });
+
+  // 폼 초기화
+  const resetForm = () => {
+    setFormData({
+      source_screen_id: screenId,
+      source_action: "",
+      target_screen_id: 0,
+      target_action: "",
+      flow_type: "unidirectional",
+      flow_label: "",
+      is_active: "Y",
+    });
+    setEditItem(null);
+    setIsEditing(false);
+  };
+
+  // 수정 모드
+  const handleEdit = (item: DataFlow) => {
+    setEditItem(item);
+    setFormData({
+      source_screen_id: item.source_screen_id,
+      source_action: item.source_action || "",
+      target_screen_id: item.target_screen_id,
+      target_action: item.target_action || "",
+      flow_type: item.flow_type,
+      flow_label: item.flow_label || "",
+      is_active: item.is_active,
+    });
+    setIsEditing(true);
+  };
+
+  // 저장
+  const handleSave = async () => {
+    if (!formData.source_screen_id || !formData.target_screen_id) {
+      toast.error("소스 화면과 타겟 화면을 선택해주세요.");
+      return;
+    }
+
+    try {
+      const payload = {
+        group_id: groupId,
+        ...formData,
+      };
+
+      let response;
+      if (editItem) {
+        response = await updateDataFlow(editItem.id, payload);
+      } else {
+        response = await createDataFlow(payload);
+      }
+
+      if (response.success) {
+        toast.success(editItem ? "데이터 흐름이 수정되었습니다." : "데이터 흐름이 추가되었습니다.");
+        resetForm();
+        onReload();
+        onRefreshVisualization?.();
+      } else {
+        toast.error(response.message || "저장에 실패했습니다.");
+      }
+    } catch (error: any) {
+      toast.error(error.message || "저장 중 오류가 발생했습니다.");
+    }
+  };
+
+  // 삭제
+  const handleDelete = async (id: number) => {
+    if (!confirm("정말 삭제하시겠습니까?")) return;
+
+    try {
+      const response = await deleteDataFlow(id);
+      if (response.success) {
+        toast.success("데이터 흐름이 삭제되었습니다.");
+        onReload();
+        onRefreshVisualization?.();
+      } else {
+        toast.error(response.message || "삭제에 실패했습니다.");
+      }
+    } catch (error: any) {
+      toast.error(error.message || "삭제 중 오류가 발생했습니다.");
+    }
+  };
+
+  // 그룹 없음 안내
+  if (!groupId) {
+    return (
+      <div className="flex flex-col items-center justify-center py-12 text-center">
+        <GitBranch className="h-12 w-12 text-muted-foreground mb-4" />
+        <h3 className="text-lg font-semibold mb-2">그룹 정보가 없습니다</h3>
+        <p className="text-sm text-muted-foreground">
+          데이터 흐름 설정은 화면 그룹 내에서만 사용할 수 있습니다.
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-4">
+      {/* 입력 폼 */}
+      <div className="bg-muted/50 rounded-lg p-4 space-y-3">
+        <div className="text-sm font-medium">{isEditing ? "데이터 흐름 수정" : "새 데이터 흐름 추가"}</div>
+        
+        <div className="grid grid-cols-1 sm:grid-cols-4 gap-3">
+          {/* 소스 화면 */}
+          <div>
+            <Label className="text-xs">소스 화면 *</Label>
+            <SearchableSelect
+              value={formData.source_screen_id.toString()}
+              onValueChange={(v) => setFormData(prev => ({ ...prev, source_screen_id: parseInt(v) }))}
+              options={groupScreens.map((s) => ({
+                value: s.screen_id.toString(),
+                label: s.screen_name,
+              }))}
+              placeholder="화면 선택"
+              searchPlaceholder="화면 검색..."
+            />
+          </div>
+
+          {/* 소스 액션 */}
+          <div>
+            <Label className="text-xs">소스 액션</Label>
+            <Input
+              value={formData.source_action}
+              onChange={(e) => setFormData(prev => ({ ...prev, source_action: e.target.value }))}
+              placeholder="예: 행 선택"
+              className="h-9 text-xs"
+            />
+          </div>
+
+          {/* 타겟 화면 */}
+          <div>
+            <Label className="text-xs">타겟 화면 *</Label>
+            <SearchableSelect
+              value={formData.target_screen_id.toString()}
+              onValueChange={(v) => setFormData(prev => ({ ...prev, target_screen_id: parseInt(v) }))}
+              options={groupScreens
+                .filter(s => s.screen_id !== formData.source_screen_id)
+                .map((s) => ({
+                  value: s.screen_id.toString(),
+                  label: s.screen_name,
+                }))}
+              placeholder="화면 선택"
+              searchPlaceholder="화면 검색..."
+            />
+          </div>
+
+          {/* 흐름 타입 */}
+          <div>
+            <Label className="text-xs">흐름 타입</Label>
+            <SearchableSelect
+              value={formData.flow_type}
+              onValueChange={(v) => setFormData(prev => ({ ...prev, flow_type: v }))}
+              options={[
+                { value: "unidirectional", label: "단방향" },
+                { value: "bidirectional", label: "양방향" },
+              ]}
+              placeholder="흐름 타입"
+              searchPlaceholder="타입 검색..."
+            />
+          </div>
+        </div>
+
+        <div className="flex justify-end gap-2">
+          {isEditing && (
+            <Button variant="outline" size="sm" onClick={resetForm}>
+              취소
+            </Button>
+          )}
+          <Button size="sm" onClick={handleSave} className="gap-1">
+            <Save className="h-4 w-4" />
+            {isEditing ? "수정" : "추가"}
+          </Button>
+        </div>
+      </div>
+
+      {/* 목록 */}
+      <div className="border rounded-lg">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead className="text-xs">소스 화면</TableHead>
+              <TableHead className="text-xs">액션</TableHead>
+              <TableHead className="text-xs">타겟 화면</TableHead>
+              <TableHead className="text-xs">흐름</TableHead>
+              <TableHead className="text-xs w-[100px]">작업</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {loading ? (
+              <TableRow>
+                <TableCell colSpan={5} className="text-center py-8 text-muted-foreground">
+                  <Loader2 className="h-5 w-5 animate-spin mx-auto" />
+                </TableCell>
+              </TableRow>
+            ) : dataFlows.length === 0 ? (
+              <TableRow>
+                <TableCell colSpan={5} className="text-center py-8 text-muted-foreground text-sm">
+                  등록된 데이터 흐름이 없습니다.
+                </TableCell>
+              </TableRow>
+            ) : (
+              dataFlows.map((item) => (
+                <TableRow key={item.id}>
+                  <TableCell className="text-xs font-medium">
+                    {item.source_screen_name || `화면 ${item.source_screen_id}`}
+                  </TableCell>
+                  <TableCell className="text-xs text-muted-foreground">
+                    {item.source_action || "-"}
+                  </TableCell>
+                  <TableCell className="text-xs font-medium">
+                    {item.target_screen_name || `화면 ${item.target_screen_id}`}
+                  </TableCell>
+                  <TableCell className="text-xs">
+                    <span className={`px-2 py-1 rounded text-xs ${
+                      item.flow_type === "bidirectional" 
+                        ? "bg-purple-100 text-purple-700" 
+                        : "bg-blue-100 text-blue-700"
+                    }`}>
+                      {item.flow_type === "bidirectional" ? "양방향" : "단방향"}
+                    </span>
+                  </TableCell>
+                  <TableCell>
+                    <div className="flex gap-1">
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        className="h-7 w-7"
+                        onClick={() => handleEdit(item)}
+                      >
+                        <Pencil className="h-3 w-3" />
+                      </Button>
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        className="h-7 w-7 text-destructive"
+                        onClick={() => handleDelete(item.id)}
+                      >
+                        <Trash2 className="h-3 w-3" />
+                      </Button>
+                    </div>
+                  </TableCell>
+                </TableRow>
+              ))
+            )}
+          </TableBody>
+        </Table>
+      </div>
+    </div>
+  );
+}
+
+
+// ============================================================
+// 탭4: 필드-컬럼 매핑 (화면 컴포넌트와 DB 컬럼 연결)
+// ============================================================
+
+interface FieldMappingTabProps {
+  screenId: number;
+  tableName?: string;
+  tableColumns: ColumnTypeInfo[];
+  loading: boolean;
+}
+
+function FieldMappingTab({
+  screenId,
+  tableName,
+  tableColumns,
+  loading,
+}: FieldMappingTabProps) {
+  // 필드 매핑은 screen_layouts.properties에서 관리됨
+  // 이 탭에서는 현재 매핑 상태를 조회하고 편집 가능하게 제공
+  
+  return (
+    <div className="space-y-4">
+      <div className="bg-muted/50 rounded-lg p-4">
+        <div className="flex items-center gap-2 mb-2">
+          <Columns3 className="h-5 w-5 text-blue-500" />
+          <span className="text-sm font-medium">필드-컬럼 매핑</span>
+        </div>
+        <p className="text-xs text-muted-foreground">
+          화면 컴포넌트와 데이터베이스 컬럼 간의 바인딩을 설정합니다.
+          <br />
+          현재는 화면 디자이너에서 설정된 내용을 확인할 수 있습니다.
+        </p>
+      </div>
+
+      {/* 테이블 컬럼 목록 */}
+      {tableName && (
+        <div className="border rounded-lg">
+          <div className="bg-muted/30 px-4 py-2 border-b">
+            <span className="text-sm font-medium">테이블: {tableName}</span>
+          </div>
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead className="text-xs">컬럼명</TableHead>
+                <TableHead className="text-xs">한글명</TableHead>
+                <TableHead className="text-xs">데이터 타입</TableHead>
+                <TableHead className="text-xs">웹 타입</TableHead>
+                <TableHead className="text-xs">PK</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {loading ? (
+                <TableRow>
+                  <TableCell colSpan={5} className="text-center py-8 text-muted-foreground">
+                    <Loader2 className="h-5 w-5 animate-spin mx-auto" />
+                  </TableCell>
+                </TableRow>
+              ) : tableColumns.length === 0 ? (
+                <TableRow>
+                  <TableCell colSpan={5} className="text-center py-8 text-muted-foreground text-sm">
+                    컬럼 정보가 없습니다.
+                  </TableCell>
+                </TableRow>
+              ) : (
+                tableColumns.slice(0, 20).map((col) => (
+                  <TableRow key={col.columnName}>
+                    <TableCell className="text-xs font-mono">{col.columnName}</TableCell>
+                    <TableCell className="text-xs">{col.displayName}</TableCell>
+                    <TableCell className="text-xs text-muted-foreground">{col.dbType}</TableCell>
+                    <TableCell className="text-xs">
+                      <span className="px-2 py-0.5 rounded bg-gray-100 text-gray-700 text-xs">
+                        {col.webType}
+                      </span>
+                    </TableCell>
+                    <TableCell className="text-xs">
+                      {col.isPrimaryKey && (
+                        <span className="px-2 py-0.5 rounded bg-yellow-100 text-yellow-700 text-xs">
+                          PK
+                        </span>
+                      )}
+                    </TableCell>
+                  </TableRow>
+                ))
+              )}
+            </TableBody>
+          </Table>
+          {tableColumns.length > 20 && (
+            <div className="px-4 py-2 text-xs text-muted-foreground border-t">
+              + {tableColumns.length - 20}개 더 있음
+            </div>
+          )}
+        </div>
+      )}
+
+      {!tableName && (
+        <div className="flex flex-col items-center justify-center py-12 text-center">
+          <Database className="h-12 w-12 text-muted-foreground mb-4" />
+          <h3 className="text-lg font-semibold mb-2">테이블 정보가 없습니다</h3>
+          <p className="text-sm text-muted-foreground">
+            테이블 노드에서 더블클릭하여 필드 매핑을 확인하세요.
+          </p>
+        </div>
+      )}
+    </div>
+  );
+}
+
diff --git a/frontend/components/screen/OptimizedButtonComponent.tsx b/frontend/components/screen/OptimizedButtonComponent.tsx
index 3ff1c4e4..913bfef9 100644
--- a/frontend/components/screen/OptimizedButtonComponent.tsx
+++ b/frontend/components/screen/OptimizedButtonComponent.tsx
@@ -637,24 +637,28 @@ export const OptimizedButtonComponent: React.FC<OptimizedButtonProps> = ({
     }
   }
 
+  // 색상이 설정되어 있으면 variant 스타일을 무시하고 직접 스타일 적용
+  const hasCustomColors = config?.backgroundColor || config?.textColor;
+  
   return (
     <div className="relative">
       <Button
         onClick={handleClick}
         disabled={isExecuting || disabled}
-        variant={config?.variant || "default"}
+        // 색상이 설정되어 있으면 variant를 적용하지 않아서 Tailwind 색상 클래스가 덮어씌우지 않도록 함
+        variant={hasCustomColors ? undefined : (config?.variant || "default")}
         className={cn(
           "transition-all duration-200",
           isExecuting && "cursor-wait opacity-75",
           backgroundJobs.size > 0 && "border-primary/20 bg-accent",
-          config?.backgroundColor && { backgroundColor: config.backgroundColor },
-          config?.textColor && { color: config.textColor },
-          config?.borderColor && { borderColor: config.borderColor },
+          // 커스텀 색상이 없을 때만 기본 스타일 적용
+          !hasCustomColors && "bg-primary text-primary-foreground hover:bg-primary/90",
         )}
         style={{
-          backgroundColor: config?.backgroundColor,
-          color: config?.textColor,
-          borderColor: config?.borderColor,
+          // 커스텀 색상이 있을 때만 인라인 스타일 적용
+          ...(config?.backgroundColor && { backgroundColor: config.backgroundColor }),
+          ...(config?.textColor && { color: config.textColor }),
+          ...(config?.borderColor && { borderColor: config.borderColor }),
         }}
       >
         {/* 메인 버튼 내용 */}
diff --git a/frontend/components/screen/RealtimePreviewDynamic.tsx b/frontend/components/screen/RealtimePreviewDynamic.tsx
index 222de998..72baff79 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";
@@ -133,6 +134,9 @@ const RealtimePreviewDynamicComponent: React.FC<RealtimePreviewProps> = ({
   onHeightChange, // 🆕 조건부 컨테이너 높이 변화 콜백
   conditionalDisabled, // 🆕 조건부 비활성화 상태
 }) => {
+  // 🆕 화면 다국어 컨텍스트
+  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 602ea890..07d31403 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);
@@ -1474,6 +1477,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) => {
@@ -4255,6 +4353,9 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
             onResolutionChange={setScreenResolution}
             gridSettings={layout.gridSettings}
             onGridSettingsChange={updateGridSettings}
+            onGenerateMultilang={handleGenerateMultilang}
+            isGeneratingMultilang={isGeneratingMultilang}
+            onOpenMultilangSettings={() => setShowMultilangSettingsModal(true)}
           />
           {/* 메인 컨테이너 (좌측 툴바 + 패널들 + 캔버스) */}
           <div className="flex flex-1 overflow-hidden">
@@ -5033,6 +5134,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/ScreenGroupTreeView.tsx b/frontend/components/screen/ScreenGroupTreeView.tsx
index 086ea228..6fa7314b 100644
--- a/frontend/components/screen/ScreenGroupTreeView.tsx
+++ b/frontend/components/screen/ScreenGroupTreeView.tsx
@@ -80,8 +80,8 @@ interface ScreenGroupTreeViewProps {
   selectedScreen: ScreenDefinition | null;
   onScreenSelect: (screen: ScreenDefinition) => void;
   onScreenDesign: (screen: ScreenDefinition) => void;
-  onGroupSelect?: (group: { id: number; name: string } | null) => void;
-  onScreenSelectInGroup?: (group: { id: number; name: string }, screenId: number) => void;
+  onGroupSelect?: (group: { id: number; name: string; company_code?: string } | null) => void;
+  onScreenSelectInGroup?: (group: { id: number; name: string; company_code?: string }, screenId: number) => void;
   companyCode?: string;
 }
 
@@ -149,8 +149,8 @@ export function ScreenGroupTreeView({
   const getScreensInGroup = (groupId: number): ScreenDefinition[] => {
     const group = groups.find((g) => g.id === groupId);
     if (!group?.screens) {
-      const screenIds = groupScreensMap.get(groupId) || [];
-      return screens.filter((screen) => screenIds.includes(screen.screenId));
+    const screenIds = groupScreensMap.get(groupId) || [];
+    return screens.filter((screen) => screenIds.includes(screen.screenId));
     }
     
     // 그룹의 screens 배열에서 display_order 정보를 가져와서 정렬
@@ -177,7 +177,7 @@ export function ScreenGroupTreeView({
       if (onGroupSelect && groupId !== "ungrouped") {
         const group = groups.find((g) => String(g.id) === groupId);
         if (group) {
-          onGroupSelect({ id: group.id, name: group.group_name });
+          onGroupSelect({ id: group.id, name: group.group_name, company_code: group.company_code });
         }
       }
     }
@@ -192,7 +192,7 @@ export function ScreenGroupTreeView({
   const handleScreenClickInGroup = (screen: ScreenDefinition, group: ScreenGroup) => {
     if (onScreenSelectInGroup) {
       onScreenSelectInGroup(
-        { id: group.id, name: group.group_name },
+        { id: group.id, name: group.group_name, company_code: group.company_code },
         screen.screenId
       );
     } else {
@@ -428,15 +428,15 @@ export function ScreenGroupTreeView({
         {groups
           .filter((g) => !(g as any).parent_group_id) // 대분류만 (parent_group_id가 null)
           .map((group) => {
-            const groupId = String(group.id);
-            const isExpanded = expandedGroups.has(groupId);
-            const groupScreens = getScreensInGroup(group.id);
+          const groupId = String(group.id);
+          const isExpanded = expandedGroups.has(groupId);
+          const groupScreens = getScreensInGroup(group.id);
             
             // 하위 그룹들 찾기
             const childGroups = groups.filter((g) => (g as any).parent_group_id === group.id);
 
-            return (
-              <div key={groupId} className="mb-1">
+          return (
+            <div key={groupId} className="mb-1">
               {/* 그룹 헤더 */}
               <div
                 className={cn(
diff --git a/frontend/components/screen/ScreenNode.tsx b/frontend/components/screen/ScreenNode.tsx
index 07ddf8f0..e49bf6d8 100644
--- a/frontend/components/screen/ScreenNode.tsx
+++ b/frontend/components/screen/ScreenNode.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import React from "react";
+import React, { useMemo, useState, useEffect } from "react";
 import { Handle, Position } from "@xyflow/react";
 import {
   Monitor,
@@ -33,17 +33,61 @@ export interface ScreenNodeData {
   screenRole?: string;     // 화면 역할 (메인그리드, 등록폼 등)
 }
 
+// 필드 매핑 정보 (조인 관계 표시용)
+export interface FieldMappingDisplay {
+  sourceField: string;        // 메인 테이블 컬럼 (예: manager_id)
+  targetField: string;        // 서브 테이블 컬럼 (예: user_id)
+  sourceDisplayName?: string; // 메인 테이블 한글 컬럼명 (예: 담당자)
+  targetDisplayName?: string; // 서브 테이블 한글 컬럼명 (예: 사용자ID)
+  sourceTable?: string;       // 소스 테이블명 (필드 매핑에서 테이블 구분용)
+}
+
+// 참조 관계 정보 (다른 테이블에서 이 테이블을 참조하는 경우)
+export interface ReferenceInfo {
+  fromTable: string;        // 참조하는 테이블명 (영문)
+  fromTableLabel?: string;  // 참조하는 테이블 한글명
+  fromColumn: string;       // 참조하는 컬럼명 (영문)
+  fromColumnLabel?: string; // 참조하는 컬럼 한글명
+  toColumn: string;         // 참조되는 컬럼명 (이 테이블의 컬럼)
+  toColumnLabel?: string;   // 참조되는 컬럼 한글명
+  relationType: 'lookup' | 'join' | 'filter';  // 참조 유형
+}
+
 // 테이블 노드 데이터 인터페이스
 export interface TableNodeData {
   label: string;
   subLabel?: string;
   isMain?: boolean;
+  isFocused?: boolean;     // 포커스된 테이블인지
+  isFaded?: boolean;       // 흑백 처리할지
   columns?: Array<{
-    name: string;
+    name: string;           // 표시용 이름 (한글명)
+    originalName?: string;  // 원본 컬럼명 (영문, 필터링용)
     type: string;
     isPrimaryKey?: boolean;
     isForeignKey?: boolean;
   }>;
+  // 포커스 시 강조할 컬럼 정보
+  highlightedColumns?: string[];  // 화면에서 사용하는 컬럼 (영문명)
+  joinColumns?: string[];         // 조인에 사용되는 컬럼
+  joinColumnRefs?: Array<{        // 조인 컬럼의 참조 정보
+    column: string;               // FK 컬럼명 (예: 'customer_id')
+    refTable: string;             // 참조 테이블 (예: 'customer_mng')
+    refTableLabel?: string;       // 참조 테이블 한글명 (예: '거래처 관리')
+    refColumn: string;            // 참조 컬럼 (예: 'customer_code')
+  }>;
+  filterColumns?: string[];       // 필터링에 사용되는 FK 컬럼 (마스터-디테일 관계)
+  // 필드 매핑 정보 (조인 관계 표시용)
+  fieldMappings?: FieldMappingDisplay[];  // 서브 테이블일 때 조인 관계 표시
+  // 참조 관계 정보 (다른 테이블에서 이 테이블을 참조하는 경우)
+  referencedBy?: ReferenceInfo[];  // 이 테이블을 참조하는 관계들
+  // 저장 관계 정보
+  saveInfos?: Array<{
+    saveType: string;          // 'save' | 'edit' | 'delete' | 'transferData'
+    componentType: string;     // 버튼 컴포넌트 타입
+    isMainTable: boolean;      // 메인 테이블 저장인지
+    sourceScreenId?: number;   // 어떤 화면에서 저장하는지
+  }>;
 }
 
 // ========== 유틸리티 함수 ==========
@@ -404,20 +448,180 @@ const ScreenPreview: React.FC<{ layoutSummary: ScreenLayoutSummary; screenType:
 
 // ========== 테이블 노드 (하단) - 컬럼 목록 표시 (컴팩트) ==========
 export const TableNode: React.FC<{ data: TableNodeData }> = ({ data }) => {
-  const { label, subLabel, isMain, columns } = data;
-  // 최대 5개 컬럼만 표시
-  const displayColumns = columns?.slice(0, 5) || [];
-  const remainingCount = (columns?.length || 0) - 5;
+  const { label, subLabel, isMain, isFocused, isFaded, columns, highlightedColumns, joinColumns, joinColumnRefs, filterColumns, fieldMappings, referencedBy, saveInfos } = data;
+  
+  // 강조할 컬럼 세트 (영문 컬럼명 기준)
+  const highlightSet = new Set(highlightedColumns || []);
+  const filterSet = new Set(filterColumns || []);  // 필터링에 사용되는 FK 컬럼
+  const joinSet = new Set(joinColumns || []);
+  
+  // 조인 컬럼 참조 정보 맵 생성 (column → { refTable, refTableLabel, refColumn })
+  const joinRefMap = new Map<string, { refTable: string; refTableLabel: string; refColumn: string }>();
+  if (joinColumnRefs) {
+    joinColumnRefs.forEach((ref) => {
+      joinRefMap.set(ref.column, { 
+        refTable: ref.refTable, 
+        refTableLabel: ref.refTableLabel || ref.refTable, // 한글명 (없으면 영문명)
+        refColumn: ref.refColumn 
+      });
+    });
+  }
+  
+  // 필드 매핑 맵 생성 (targetField → { sourceField, sourceDisplayName })
+  // 서브 테이블에서 targetField가 어떤 메인 테이블 컬럼(sourceField)과 연결되는지
+  const fieldMappingMap = new Map<string, { sourceField: string; sourceDisplayName: string }>();
+  if (fieldMappings) {
+    fieldMappings.forEach(mapping => {
+      fieldMappingMap.set(mapping.targetField, {
+        sourceField: mapping.sourceField,
+        // 한글명이 있으면 한글명, 없으면 영문명 사용
+        sourceDisplayName: mapping.sourceDisplayName || mapping.sourceField,
+      });
+    });
+  }
+  
+  // 필터 소스 컬럼 세트 (메인 테이블에서 필터에 사용되는 컬럼)
+  const filterSourceSet = new Set(
+    referencedBy?.filter(r => r.relationType === 'filter').map(r => r.fromColumn) || []
+  );
+  
+  // 포커스 모드: 사용 컬럼만 필터링하여 표시
+  // originalName (영문) 또는 name으로 매칭 시도
+  // 필터 컬럼(filterSet) 및 필터 소스 컬럼(filterSourceSet)도 포함하여 보라색으로 표시
+  const potentialFilteredColumns = columns?.filter(col => {
+    const colOriginal = col.originalName || col.name;
+    return highlightSet.has(colOriginal) || joinSet.has(colOriginal) || filterSet.has(colOriginal) || filterSourceSet.has(colOriginal);
+  }) || [];
+  
+  // 정렬: 조인 컬럼 → 필터 컬럼/필터 소스 컬럼 → 사용 컬럼 순서
+  const sortedFilteredColumns = [...potentialFilteredColumns].sort((a, b) => {
+    const aOriginal = a.originalName || a.name;
+    const bOriginal = b.originalName || b.name;
+    
+    const aIsJoin = joinSet.has(aOriginal);
+    const bIsJoin = joinSet.has(bOriginal);
+    const aIsFilter = filterSet.has(aOriginal) || filterSourceSet.has(aOriginal);
+    const bIsFilter = filterSet.has(bOriginal) || filterSourceSet.has(bOriginal);
+    
+    // 조인 컬럼 우선
+    if (aIsJoin && !bIsJoin) return -1;
+    if (!aIsJoin && bIsJoin) return 1;
+    // 필터 컬럼/필터 소스 다음
+    if (aIsFilter && !bIsFilter) return -1;
+    if (!aIsFilter && bIsFilter) return 1;
+    // 나머지는 원래 순서 유지
+    return 0;
+  });
+  
+  const hasActiveColumns = sortedFilteredColumns.length > 0;
+  
+  // 필터 관계가 있는 테이블인지 확인 (마스터-디테일 필터링)
+  // - hasFilterRelation: 디테일 테이블 (WHERE 조건 대상) - filterColumns에 FK 컬럼이 있음
+  // - isFilterSource: 마스터 테이블 (필터 소스, WHERE 조건 제공) - 포커스된 화면의 메인 테이블이고 filterSourceSet에 컬럼이 있음
+  // 디테일 테이블: filterColumns(filterSet)에 FK 컬럼이 있고, 포커스된 화면의 메인이 아님
+  const hasFilterRelation = filterSet.size > 0 && !isFocused;
+  // 마스터 테이블: 포커스된 화면의 메인 테이블(isFocused)이고 filterSourceSet에 컬럼이 있음
+  const isFilterSource = isFocused && filterSourceSet.size > 0;
+  
+  // 표시할 컬럼:
+  // - 포커스 시 (활성 컬럼 있음): 정렬된 컬럼만 표시
+  // - 비포커스 시: 최대 8개만 표시
+  const MAX_DEFAULT_COLUMNS = 8;
+  const allColumns = columns || [];
+  const displayColumns = hasActiveColumns 
+    ? sortedFilteredColumns 
+    : allColumns.slice(0, MAX_DEFAULT_COLUMNS);
+  const remainingCount = hasActiveColumns 
+    ? 0 
+    : Math.max(0, allColumns.length - MAX_DEFAULT_COLUMNS);
+  const totalCount = allColumns.length;
+
+  // 컬럼 수 기반 높이 계산 (DOM 측정 없이)
+  // - 각 컬럼 행 높이: 약 22px (py-0.5 + text + gap-px)
+  // - 컨테이너 패딩: p-1.5 = 12px (상하 합계)
+  // - 뱃지 높이: 약 26px (py-1 + text + gap)
+  const COLUMN_ROW_HEIGHT = 22;
+  const CONTAINER_PADDING = 12;
+  const BADGE_HEIGHT = 26;
+  const MAX_HEIGHT = 200; // 뱃지 포함 가능하도록 증가
+  
+  // 뱃지가 표시될지 미리 계산 (필터/참조만, 저장은 헤더에 표시)
+  const hasFilterOrLookupBadge = referencedBy && referencedBy.some(r => r.relationType === 'filter' || r.relationType === 'lookup');
+  const hasBadge = hasFilterOrLookupBadge;
+  
+  const calculatedHeight = useMemo(() => {
+    const badgeHeight = hasBadge ? BADGE_HEIGHT : 0;
+    const rawHeight = CONTAINER_PADDING + badgeHeight + (displayColumns.length * COLUMN_ROW_HEIGHT);
+    return Math.min(rawHeight, MAX_HEIGHT);
+  }, [displayColumns.length, hasBadge]);
+  
+  // Debounce된 높이: 중간 값(늘어났다가 줄어드는 현상)을 무시하고 최종 값만 사용
+  // 듀얼 그리드에서 filterColumns와 joinColumns가 2단계로 업데이트되는 문제 해결
+  const [debouncedHeight, setDebouncedHeight] = useState(calculatedHeight);
+  
+  useEffect(() => {
+    // 50ms 내에 다시 변경되면 이전 값 무시
+    const timer = setTimeout(() => {
+      setDebouncedHeight(calculatedHeight);
+    }, 50);
+    
+    return () => clearTimeout(timer);
+  }, [calculatedHeight]);
+
+  // 저장 대상 여부
+  const hasSaveTarget = saveInfos && saveInfos.length > 0;
 
   return (
-    <div className="group relative flex w-[260px] flex-col overflow-hidden rounded-lg border border-border bg-card shadow-md transition-all hover:shadow-lg hover:ring-2 hover:ring-emerald-500/20">
+    <div 
+      className={`group relative flex w-[260px] flex-col overflow-visible rounded-xl border shadow-md ${
+        // 필터 관련 테이블 (마스터 또는 디테일): 보라색
+        (hasFilterRelation || isFilterSource)
+          ? "border-2 border-violet-500 ring-4 ring-violet-500/30 shadow-xl bg-violet-50"
+          // 순수 포커스 (필터 관계 없음): 초록색
+          : isFocused
+          ? "border-2 border-emerald-500 ring-4 ring-emerald-500/30 shadow-xl bg-card" 
+          // 흐리게 처리
+          : isFaded
+          ? "border-gray-200 opacity-60 bg-card"
+          // 기본
+          : "border-border hover:shadow-lg hover:ring-2 hover:ring-emerald-500/20 bg-card"
+      }`}
+      style={{
+        filter: isFaded ? "grayscale(80%)" : "none",
+        // 색상/테두리/그림자만 transition (높이 제외)
+        transition: "background-color 0.7s ease, border-color 0.7s ease, box-shadow 0.7s ease, filter 0.3s ease, opacity 0.3s ease",
+      }}
+      title={hasSaveTarget ? "저장 대상 테이블" : undefined}
+    >
+      {/* 저장 대상: 테이블 바깥 왼쪽에 띄워진 막대기 (나타나기/사라지기 애니메이션) */}
+      <div 
+        className="absolute -left-1.5 top-1 bottom-1 w-0.5 z-20 rounded-full transition-all duration-500 ease-out"
+        title={hasSaveTarget ? "저장 대상 테이블" : undefined}
+        style={{
+            background: 'linear-gradient(to bottom, transparent 0%, #f472b6 15%, #f472b6 85%, transparent 100%)',
+          opacity: hasSaveTarget ? 1 : 0,
+          transform: hasSaveTarget ? 'scaleY(1)' : 'scaleY(0)',
+          transformOrigin: 'top',
+          pointerEvents: hasSaveTarget ? 'auto' : 'none',
+        }}
+      />
+      
       {/* Handles */}
+      {/* top target: 화면 → 메인테이블 연결용 */}
       <Handle
         type="target"
         position={Position.Top}
         id="top"
         className="!h-2 !w-2 !border-2 !border-background !bg-emerald-500 opacity-0 transition-opacity group-hover:opacity-100"
       />
+      {/* top source: 메인테이블 → 메인테이블 연결용 (위쪽으로 나가는 선) */}
+      <Handle
+        type="source"
+        position={Position.Top}
+        id="top_source"
+        style={{ top: -4 }}
+        className="!h-2 !w-2 !border-2 !border-background !bg-orange-500 opacity-0 transition-opacity group-hover:opacity-100"
+      />
       <Handle
         type="target"
         position={Position.Left}
@@ -436,42 +640,182 @@ export const TableNode: React.FC<{ data: TableNodeData }> = ({ data }) => {
         id="bottom"
         className="!h-2 !w-2 !border-2 !border-background !bg-orange-500 opacity-0 transition-opacity group-hover:opacity-100"
       />
+      {/* bottom target: 메인테이블 ← 메인테이블 연결용 (아래에서 들어오는 선) */}
+      <Handle
+        type="target"
+        position={Position.Bottom}
+        id="bottom_target"
+        style={{ bottom: -4 }}
+        className="!h-2 !w-2 !border-2 !border-background !bg-orange-500 opacity-0 transition-opacity group-hover:opacity-100"
+      />
 
-      {/* 헤더 (초록색, 컴팩트) */}
-      <div className={`flex items-center gap-2 px-3 py-1.5 text-white ${isMain ? "bg-emerald-600" : "bg-slate-500"}`}>
-        <Database className="h-3.5 w-3.5" />
+      {/* 헤더 (필터 관계: 보라색, 필터 소스: 보라색, 메인: 초록색, 기본: 슬레이트) */}
+      <div className={`flex items-center gap-2 px-3 py-1.5 text-white rounded-t-xl transition-colors duration-700 ease-in-out ${
+        isFaded ? "bg-gray-400" : (hasFilterRelation || isFilterSource) ? "bg-violet-600" : isMain ? "bg-emerald-600" : "bg-slate-500"
+      }`}>
+        <Database className="h-3.5 w-3.5 shrink-0" />
         <div className="flex-1 min-w-0">
           <div className="truncate text-[11px] font-semibold">{label}</div>
-          {subLabel && <div className="truncate text-[9px] opacity-80">{subLabel}</div>}
+          {/* 필터 관계에 따른 문구 변경 */}
+          <div className="truncate text-[9px] opacity-80">
+            {isFilterSource 
+              ? "마스터 테이블 (필터 소스)" 
+              : hasFilterRelation 
+              ? "디테일 테이블 (WHERE 조건)" 
+              : subLabel}
+          </div>
         </div>
+        {hasActiveColumns && (
+          <span className="rounded-full bg-white/20 px-1.5 py-0.5 text-[8px] shrink-0">
+            {displayColumns.length}개 활성
+          </span>
+        )}
       </div>
 
-      {/* 컬럼 목록 (컴팩트) */}
-      <div className="p-1.5">
-        {displayColumns.length > 0 ? (
-          <div className="flex flex-col gap-px">
-            {displayColumns.map((col, idx) => (
-              <div
-                key={idx}
-                className="flex items-center gap-1 rounded bg-slate-50 px-1.5 py-0.5 hover:bg-slate-100"
-              >
-                {/* PK/FK 아이콘 */}
-                {col.isPrimaryKey && <Key className="h-2.5 w-2.5 text-amber-500" />}
-                {col.isForeignKey && !col.isPrimaryKey && <Link2 className="h-2.5 w-2.5 text-blue-500" />}
-                {!col.isPrimaryKey && !col.isForeignKey && <div className="w-2.5" />}
-
-                {/* 컬럼명 */}
-                <span className="flex-1 truncate font-mono text-[9px] font-medium text-slate-700">
-                  {col.name}
+      {/* 컬럼 목록 - 컴팩트하게 (부드러운 높이 전환 + 스크롤) */}
+      {/* 뱃지도 이 영역 안에 포함되어 높이 계산에 반영됨 */}
+      <div 
+        className="p-1.5 overflow-y-auto scrollbar-thin scrollbar-thumb-gray-300 scrollbar-track-transparent"
+        style={{
+          height: `${debouncedHeight}px`,
+          maxHeight: `${MAX_HEIGHT}px`,
+          // Debounce로 중간 값이 무시되므로 항상 부드러운 transition 적용 가능
+          transition: 'height 0.5s cubic-bezier(0.4, 0, 0.2, 1)',
+        }}
+      >
+        {/* 필터링/참조 관계 뱃지 (컬럼 목록 영역 안에 포함, 저장은 헤더에 표시) */}
+        {hasBadge && (() => {
+          const filterRefs = referencedBy?.filter(r => r.relationType === 'filter') || [];
+          const lookupRefs = referencedBy?.filter(r => r.relationType === 'lookup') || [];
+          
+          if (filterRefs.length === 0 && lookupRefs.length === 0) return null;
+          
+          return (
+            <div className="flex items-center gap-1.5 px-2 py-1 mb-1.5 rounded border border-slate-300 bg-slate-50 text-[9px]">
+              {/* 필터 뱃지 */}
+              {filterRefs.length > 0 && (
+                <span 
+                  className="flex items-center gap-1 rounded-full bg-violet-600 px-2 py-px text-white font-semibold shadow-sm"
+                  title={`마스터-디테일 필터링\n${filterRefs.map(r => `${r.fromTable}.${r.fromColumn || 'id'} → ${r.toColumn}`).join('\n')}`}
+                >
+                  <Link2 className="h-3 w-3" />
+                  <span>필터</span>
                 </span>
+              )}
+              {filterRefs.length > 0 && (
+                <span className="text-violet-700 font-medium truncate">
+                  {filterRefs.map(r => `${r.fromTableLabel || r.fromTable}.${r.fromColumnLabel || r.fromColumn || 'id'}`).join(', ')}
+                </span>
+              )}
+              {/* 참조 뱃지 */}
+              {lookupRefs.length > 0 && (
+                <span 
+                  className="flex items-center gap-1 rounded-full bg-amber-500 px-2 py-px text-white font-semibold shadow-sm"
+                  title={`코드 참조 (lookup)\n${lookupRefs.map(r => `${r.fromTable} → ${r.toColumn}`).join('\n')}`}
+                >
+                  {lookupRefs.length}곳 참조
+                </span>
+              )}
+            </div>
+          );
+        })()}
+        
+        {displayColumns.length > 0 ? (
+          <div className="flex flex-col gap-px transition-all duration-700 ease-in-out">
+            {displayColumns.map((col, idx) => {
+              const colOriginal = col.originalName || col.name;
+              const isJoinColumn = joinSet.has(colOriginal);
+              const isFilterColumn = filterSet.has(colOriginal);  // 서브 테이블의 필터링 FK 컬럼
+              const isHighlighted = highlightSet.has(colOriginal);
+              
+              // 필터링 참조 정보 (어떤 테이블의 어떤 컬럼에서 필터링되는지) - 서브 테이블용
+              const filterRefInfo = referencedBy?.find(
+                r => r.relationType === 'filter' && r.toColumn === colOriginal
+              );
+              
+              // 메인 테이블에서 필터 소스로 사용되는 컬럼인지 (fromColumn과 일치)
+              const isFilterSourceColumn = filterSourceSet.has(colOriginal);
+              
+              return (
+                <div
+                  key={col.name}
+                  className={`flex items-center gap-1 rounded px-1.5 py-0.5 transition-all duration-300 ${
+                    isJoinColumn 
+                      ? "bg-orange-100 border border-orange-300 shadow-sm" 
+                      : isFilterColumn || isFilterSourceColumn
+                      ? "bg-violet-100 border border-violet-300 shadow-sm"  // 필터 컬럼/필터 소스: 보라색
+                      : isHighlighted 
+                      ? "bg-blue-100 border border-blue-300 shadow-sm"
+                      : hasActiveColumns
+                      ? "bg-slate-100"
+                      : "bg-slate-50 hover:bg-slate-100"
+                  }`}
+                  style={{
+                    animation: hasActiveColumns ? `fadeIn 0.5s ease-out ${idx * 80}ms forwards` : undefined,
+                    opacity: hasActiveColumns ? 0 : 1,
+                  }}
+                >
+                  {/* PK/FK/조인/필터 아이콘 */}
+                  {isJoinColumn && <Link2 className="h-2.5 w-2.5 text-orange-500" />}
+                  {(isFilterColumn || isFilterSourceColumn) && !isJoinColumn && <Link2 className="h-2.5 w-2.5 text-violet-500" />}
+                  {!isJoinColumn && !isFilterColumn && !isFilterSourceColumn && col.isPrimaryKey && <Key className="h-2.5 w-2.5 text-amber-500" />}
+                  {!isJoinColumn && !isFilterColumn && !isFilterSourceColumn && col.isForeignKey && !col.isPrimaryKey && <Link2 className="h-2.5 w-2.5 text-blue-500" />}
+                  {!isJoinColumn && !isFilterColumn && !isFilterSourceColumn && !col.isPrimaryKey && !col.isForeignKey && <div className="w-2.5" />}
 
-                {/* 타입 */}
-                <span className="text-[8px] text-slate-400">{col.type}</span>
-              </div>
-            ))}
+                  {/* 컬럼명 */}
+                  <span className={`flex-1 truncate font-mono text-[9px] font-medium ${
+                    isJoinColumn ? "text-orange-700" 
+                    : (isFilterColumn || isFilterSourceColumn) ? "text-violet-700"
+                    : isHighlighted ? "text-blue-700" 
+                    : "text-slate-700"
+                  }`}>
+                    {col.name}
+                  </span>
 
+                  {/* 역할 태그 + 참조 관계 표시 */}
+                  {isJoinColumn && (
+                    <>
+                      {/* 조인 참조 테이블 표시 (joinColumnRefs에서) */}
+                      {joinRefMap.has(colOriginal) && (
+                        <span className="rounded bg-orange-100 px-1 text-[7px] text-orange-600">
+                          ← {joinRefMap.get(colOriginal)?.refTableLabel}
+                        </span>
+                      )}
+                      {/* 필드 매핑 참조 표시 (fieldMappingMap에서, joinRefMap에 없는 경우) */}
+                      {!joinRefMap.has(colOriginal) && fieldMappingMap.has(colOriginal) && (
+                        <span className="rounded bg-orange-100 px-1 text-[7px] text-orange-600">
+                          ← {fieldMappingMap.get(colOriginal)?.sourceDisplayName}
+                        </span>
+                      )}
+                      <span className="rounded bg-orange-200 px-1 text-[7px] text-orange-700">조인</span>
+                    </>
+                  )}
+                  {isFilterColumn && !isJoinColumn && (
+                    <span className="rounded bg-violet-200 px-1 text-[7px] text-violet-700">필터</span>
+                  )}
+                  {/* 메인 테이블에서 필터 소스로 사용되는 컬럼: "필터" + "사용" 둘 다 표시 */}
+                  {isFilterSourceColumn && !isJoinColumn && !isFilterColumn && (
+                    <>
+                      <span className="rounded bg-violet-200 px-1 text-[7px] text-violet-700">필터</span>
+                      {isHighlighted && (
+                        <span className="rounded bg-blue-200 px-1 text-[7px] text-blue-700">사용</span>
+                      )}
+                    </>
+                  )}
+                  {isHighlighted && !isJoinColumn && !isFilterColumn && !isFilterSourceColumn && (
+                    <span className="rounded bg-blue-200 px-1 text-[7px] text-blue-700">사용</span>
+                  )}
+
+                  {/* 타입 */}
+                  <span className="text-[8px] text-slate-400">{col.type}</span>
+                </div>
+              );
+            })}
+            {/* 더 많은 컬럼이 있을 경우 표시 */}
             {remainingCount > 0 && (
-              <div className="text-center text-[8px] text-slate-400 py-0.5">+ {remainingCount}개 더</div>
+              <div className="text-center text-[8px] text-slate-400 py-0.5">
+                + {remainingCount}개 더
+              </div>
             )}
           </div>
         ) : (
@@ -486,9 +830,25 @@ export const TableNode: React.FC<{ data: TableNodeData }> = ({ data }) => {
       <div className="flex items-center justify-between border-t border-border bg-muted/30 px-2 py-1">
         <span className="text-[9px] text-muted-foreground">PostgreSQL</span>
         {columns && (
-          <span className="text-[9px] text-muted-foreground">{columns.length}개 컬럼</span>
+          <span className="text-[9px] text-muted-foreground">
+            {hasActiveColumns ? `${displayColumns.length}/${totalCount}` : totalCount}개 컬럼
+          </span>
         )}
       </div>
+      
+      {/* CSS 애니메이션 정의 */}
+      <style jsx>{`
+        @keyframes fadeIn {
+          from {
+            opacity: 0;
+            transform: translateY(-5px);
+          }
+          to {
+            opacity: 1;
+            transform: translateY(0);
+          }
+        }
+      `}</style>
     </div>
   );
 };
diff --git a/frontend/components/screen/ScreenRelationFlow.tsx b/frontend/components/screen/ScreenRelationFlow.tsx
index da677eb0..d7f814d3 100644
--- a/frontend/components/screen/ScreenRelationFlow.tsx
+++ b/frontend/components/screen/ScreenRelationFlow.tsx
@@ -17,7 +17,7 @@ import {
 import "@xyflow/react/dist/style.css";
 
 import { ScreenDefinition } from "@/types/screen";
-import { ScreenNode, TableNode, ScreenNodeData, TableNodeData } from "./ScreenNode";
+import { ScreenNode, TableNode, ScreenNodeData, TableNodeData, ReferenceInfo } from "./ScreenNode";
 import {
   getFieldJoins,
   getDataFlows,
@@ -27,8 +27,22 @@ import {
   getScreenSubTables,
   ScreenLayoutSummary,
   ScreenSubTablesData,
+  SubTableInfo,
+  inferVisualRelationType,
+  VisualRelationType,
 } from "@/lib/api/screenGroup";
 import { getTableColumns, ColumnTypeInfo } from "@/lib/api/tableManagement";
+import { ScreenSettingModal } from "./ScreenSettingModal";
+import { TableSettingModal } from "./TableSettingModal";
+
+// 관계 유형별 색상 정의
+const RELATION_COLORS: Record<VisualRelationType, { stroke: string; strokeLight: string; label: string }> = {
+  filter: { stroke: '#8b5cf6', strokeLight: '#c4b5fd', label: '마스터-디테일' },     // 보라색
+  hierarchy: { stroke: '#06b6d4', strokeLight: '#a5f3fc', label: '계층 구조' },      // 시안색
+  lookup: { stroke: '#f59e0b', strokeLight: '#fcd34d', label: '코드 참조' },         // 주황색 (기존)
+  mapping: { stroke: '#10b981', strokeLight: '#6ee7b7', label: '데이터 매핑' },      // 녹색
+  join: { stroke: '#f97316', strokeLight: '#fdba74', label: '엔티티 조인' },         // orange-500 (기존 주황색)
+};
 
 // 노드 타입 등록
 const nodeTypes = {
@@ -38,14 +52,14 @@ const nodeTypes = {
 
 // 레이아웃 상수
 const SCREEN_Y = 50; // 화면 노드 Y 위치 (상단)
-const TABLE_Y = 520; // 메인 테이블 노드 Y 위치 (중단)
-const SUB_TABLE_Y = 780; // 서브 테이블 노드 Y 위치 (하단)
+const TABLE_Y = 420; // 메인 테이블 노드 Y 위치 (중단)
+const SUB_TABLE_Y = 740; // 서브 테이블 노드 Y 위치 (하단) - 메인과 320px 간격
 const NODE_WIDTH = 260; // 노드 너비
 const NODE_GAP = 40; // 노드 간격
 
 interface ScreenRelationFlowProps {
   screen: ScreenDefinition | null;
-  selectedGroup?: { id: number; name: string } | null;
+  selectedGroup?: { id: number; name: string; company_code?: string } | null;
   initialFocusedScreenId?: number | null;
 }
 
@@ -61,19 +75,101 @@ function ScreenRelationFlowInner({ screen, selectedGroup, initialFocusedScreenId
   const [loading, setLoading] = useState(false);
   const [tableColumns, setTableColumns] = useState<Record<string, ColumnTypeInfo[]>>({});
   
+  // ReactFlow 인스턴스 (fitView 제어용)
+  const reactFlowInstance = useReactFlow();
+  
+  // 데이터 로드 버전 (초기 로드 시에만 fitView 호출)
+  const [dataLoadVersion, setDataLoadVersion] = useState(0);
+  
+  // 뷰 준비 상태 (fitView 완료 후 true로 설정하여 깜빡임 방지)
+  const [isViewReady, setIsViewReady] = useState(false);
+  
   
   // 그룹 내 포커스된 화면 ID (그룹 모드에서만 사용)
   const [focusedScreenId, setFocusedScreenId] = useState<number | null>(null);
   
+  // 노드 설정 모달 상태
+  const [isSettingModalOpen, setIsSettingModalOpen] = useState(false);
+  const [settingModalNode, setSettingModalNode] = useState<{
+    nodeType: "screen" | "table";
+    nodeId: string;
+    screenId: number;
+    screenName: string;
+    tableName?: string;
+    tableLabel?: string;
+    companyCode?: string; // 프리뷰용 회사 코드
+    // 기존 설정 정보 (화면 디자이너에서 추출)
+    existingConfig?: {
+      joinColumnRefs?: Array<{
+        column: string;
+        refTable: string;
+        refTableLabel?: string;
+        refColumn: string;
+      }>;
+      filterColumns?: string[];
+      fieldMappings?: Array<{
+        targetField: string;
+        sourceField: string;
+        sourceTable?: string;
+        sourceDisplayName?: string;
+      }>;
+      referencedBy?: Array<{
+        fromTable: string;
+        fromTableLabel?: string;
+        fromColumn: string;
+        toColumn: string;
+        toColumnLabel?: string;
+        relationType: string;
+      }>;
+      columns?: Array<{
+        name: string;
+        originalName?: string;
+        type: string;
+        isPrimaryKey?: boolean;
+        isForeignKey?: boolean;
+      }>;
+      // 화면 노드용 테이블 정보
+      mainTable?: string;
+      filterTables?: Array<{
+        tableName: string;
+        tableLabel: string;
+        filterColumns: string[];
+        joinColumnRefs: Array<{
+          column: string;
+          refTable: string;
+          refTableLabel?: string;
+          refColumn: string;
+        }>;
+      }>;
+    };
+  } | null>(null);
+  
+  // 강제 새로고침용 키 (설정 저장 후 시각화 재로딩)
+  const [refreshKey, setRefreshKey] = useState(0);
+  
+  // 그룹 또는 화면이 변경될 때 포커스 초기화
+  useEffect(() => {
+    setFocusedScreenId(null);
+  }, [selectedGroup?.id, screen?.screenId]);
+  
   // 외부에서 전달된 초기 포커스 ID 적용 (화면 이동 없이 강조만)
   useEffect(() => {
-    if (initialFocusedScreenId !== undefined && initialFocusedScreenId !== null) {
+    if (initialFocusedScreenId !== undefined) {
       setFocusedScreenId(initialFocusedScreenId);
     }
   }, [initialFocusedScreenId]);
   
   // 화면 ID와 테이블명 매핑 (포커스 시 연결선 강조용)
   const [screenTableMap, setScreenTableMap] = useState<Record<number, string>>({});
+  
+  // 화면 ID별 서브 테이블 매핑 (포커스 시 서브 테이블 연결선 강조용)
+  const [screenSubTableMap, setScreenSubTableMap] = useState<Record<number, string[]>>({});
+  
+  // 서브 테이블 데이터 저장 (조인 컬럼 정보 포함)
+  const [subTablesDataMap, setSubTablesDataMap] = useState<Record<number, ScreenSubTablesData>>({});
+  
+  // 화면별 사용 컬럼 매핑 (화면 ID -> 테이블명 -> 사용 컬럼들)
+  const [screenUsedColumnsMap, setScreenUsedColumnsMap] = useState<Record<number, Record<string, string[]>>>({});
 
   // 테이블 컬럼 정보 로드
   const loadTableColumns = useCallback(
@@ -95,11 +191,8 @@ function ScreenRelationFlowInner({ screen, selectedGroup, initialFocusedScreenId
     },
     [tableColumns]
   );
-
-  // 그룹 변경 시 focusedScreenId 초기화
-  useEffect(() => {
-    setFocusedScreenId(null);
-  }, [selectedGroup?.id, screen?.screenId]);
+  
+  // 중복 useEffect 제거됨 (위에서 이미 선언)
 
   // 데이터 로드 및 노드/엣지 생성
   useEffect(() => {
@@ -112,6 +205,7 @@ function ScreenRelationFlowInner({ screen, selectedGroup, initialFocusedScreenId
 
     const loadRelations = async () => {
       setLoading(true);
+      setIsViewReady(false); // 뷰 준비 상태 초기화
       
       try {
         let screenList: ScreenDefinition[] = [];
@@ -209,10 +303,57 @@ function ScreenRelationFlowInner({ screen, selectedGroup, initialFocusedScreenId
           
           if (subTablesRes.success && subTablesRes.data) {
             subTablesData = subTablesRes.data as Record<number, ScreenSubTablesData>;
+            // 서브 테이블 데이터 저장 (조인 컬럼 정보 포함)
+            setSubTablesDataMap(subTablesData);
           }
         } catch (e) {
           console.error("레이아웃 요약/서브 테이블 로드 실패:", e);
         }
+        
+        // 화면별 사용 컬럼 정보 추출 (layoutSummaries에서)
+        const usedColumnsMap: Record<number, Record<string, string[]>> = {};
+        screenList.forEach((screenItem) => {
+          const layout = layoutSummaries[screenItem.screenId];
+          if (layout && layout.layoutItems) {
+            const mainTable = screenItem.tableName;
+            if (mainTable) {
+              // layoutItems에서 사용 컬럼과 조인 컬럼 추출
+              const allUsedColumns: string[] = [];
+              const allJoinColumns: string[] = [];
+              
+              layout.layoutItems.forEach((item) => {
+                // usedColumns 배열에서 추출 (columns_config에서 가져온 컬럼명)
+                if (item.usedColumns && Array.isArray(item.usedColumns)) {
+                  item.usedColumns.forEach((col) => {
+                    if (col && !allUsedColumns.includes(col)) {
+                      allUsedColumns.push(col);
+                    }
+                  });
+                }
+                // joinColumns 배열에서 추출 (isEntityJoin = true인 컬럼)
+                if (item.joinColumns && Array.isArray(item.joinColumns)) {
+                  item.joinColumns.forEach((col) => {
+                    if (col && !allJoinColumns.includes(col)) {
+                      allJoinColumns.push(col);
+                    }
+                  });
+                }
+                // 하위 호환성: bindField도 사용 컬럼에 추가
+                if (item.bindField && !allUsedColumns.includes(item.bindField)) {
+                  allUsedColumns.push(item.bindField);
+                }
+              });
+              
+              if (!usedColumnsMap[screenItem.screenId]) {
+                usedColumnsMap[screenItem.screenId] = {};
+              }
+              // 사용 컬럼과 조인 컬럼을 별도 키로 저장
+              usedColumnsMap[screenItem.screenId][mainTable] = allUsedColumns;
+              usedColumnsMap[screenItem.screenId][`${mainTable}__join`] = allJoinColumns;
+            }
+          }
+        });
+        setScreenUsedColumnsMap(usedColumnsMap);
 
         // ========== 상단: 화면 노드들 ==========
         const screenNodes: ScreenNodeType[] = [];
@@ -295,11 +436,62 @@ function ScreenRelationFlowInner({ screen, selectedGroup, initialFocusedScreenId
         
         // 서브 테이블 수집 (componentConfig에서 추출된 테이블들)
         // 서브 테이블은 메인 테이블과 다른 테이블들
-        Object.values(subTablesData).forEach((screenSubData) => {
+        // 화면별 서브 테이블 매핑도 함께 구축
+        const newScreenSubTableMap: Record<number, string[]> = {};
+        
+        Object.entries(subTablesData).forEach(([screenIdStr, screenSubData]) => {
+          const screenId = parseInt(screenIdStr);
+          const subTableNames: string[] = [];
+          
           screenSubData.subTables.forEach((subTable) => {
             // 메인 테이블에 없는 것만 서브 테이블로 추가
             if (!mainTableSet.has(subTable.tableName)) {
               subTableSet.add(subTable.tableName);
+              subTableNames.push(subTable.tableName);
+            }
+          });
+          
+          if (subTableNames.length > 0) {
+            newScreenSubTableMap[screenId] = subTableNames;
+          }
+        });
+        
+        // 화면별 서브 테이블 매핑 저장
+        setScreenSubTableMap(newScreenSubTableMap);
+        
+        // ========== 참조 관계 수집 (어떤 테이블이 어디서 참조되는지) ==========
+        // 테이블명 → 참조 정보 배열 (이 테이블을 참조하는 관계들)
+        const tableReferencesMap = new Map<string, ReferenceInfo[]>();
+        
+        Object.entries(subTablesData).forEach(([screenIdStr, screenSubData]) => {
+          const mainTable = screenSubData.mainTable;
+          
+          screenSubData.subTables.forEach((subTable) => {
+            const visualType = inferVisualRelationType(subTable);
+            
+            // 1. lookup, reference 관계: 참조되는 테이블에 정보 추가
+            if (subTable.relationType === 'lookup' || subTable.relationType === 'reference') {
+              const existingRefs = tableReferencesMap.get(subTable.tableName) || [];
+              existingRefs.push({
+                fromTable: mainTable,
+                fromColumn: subTable.fieldMappings?.[0]?.sourceField || '',
+                toColumn: subTable.fieldMappings?.[0]?.targetField || '',
+                relationType: 'lookup',
+              });
+              tableReferencesMap.set(subTable.tableName, existingRefs);
+            }
+            
+            // 2. rightPanelRelation (마스터-디테일 필터링): 디테일 테이블에 정보 추가
+            // 마스터(mainTable) → 디테일(subTable.tableName) 필터링 관계
+            if (subTable.relationType === 'rightPanelRelation') {
+              const existingRefs = tableReferencesMap.get(subTable.tableName) || [];
+              existingRefs.push({
+                fromTable: mainTable,
+                fromColumn: subTable.leftColumn || '',  // 마스터 테이블의 선택 기준 컬럼
+                toColumn: subTable.foreignKey || '',    // 디테일 테이블의 FK 컬럼
+                relationType: 'filter',
+              });
+              tableReferencesMap.set(subTable.tableName, existingRefs);
             }
           });
         });
@@ -315,12 +507,20 @@ function ScreenRelationFlowInner({ screen, selectedGroup, initialFocusedScreenId
         const mainTableTotalWidth = mainTableList.length * NODE_WIDTH + (mainTableList.length - 1) * NODE_GAP;
         const mainTableStartX = screenCenterX - mainTableTotalWidth / 2;
         
-        // 첫 번째 화면의 테이블 또는 선택된 화면의 테이블
-        const primaryTableName = screen?.tableName || (screenList.length > 0 ? screenList[0].tableName : null);
+        // 각 테이블이 어떤 화면들의 메인 테이블인지 매핑
+        const tableToScreensMap = new Map<string, string[]>();
+        screenList.forEach((scr: any) => {
+          if (scr.tableName) {
+            const screens = tableToScreensMap.get(scr.tableName) || [];
+            screens.push(scr.screenName);
+            tableToScreensMap.set(scr.tableName, screens);
+          }
+        });
         
         for (let idx = 0; idx < mainTableList.length; idx++) {
           const tableName = mainTableList[idx];
-          const isPrimaryTable = tableName === primaryTableName;
+          // mainTableSet에 있는 테이블은 모두 해당 화면의 "메인 테이블"
+          const linkedScreens = tableToScreensMap.get(tableName) || [];
           
           // 컬럼 정보 로드
           let columns: ColumnTypeInfo[] = [];
@@ -330,27 +530,35 @@ function ScreenRelationFlowInner({ screen, selectedGroup, initialFocusedScreenId
             // ignore
           }
 
-          // 컬럼 정보를 PK/FK 표시와 함께 변환
-          const formattedColumns = columns.slice(0, 8).map((col) => ({
+          // 컬럼 정보를 PK/FK 표시와 함께 변환 (전체 컬럼 저장, 표시는 TableNode에서 제한)
+          const formattedColumns = columns.map((col) => ({
             name: col.displayName || col.columnName || "",
+            originalName: col.columnName || "",  // 영문 컬럼명 (필터링용)
             type: col.dataType || "",
             isPrimaryKey: col.isPrimaryKey || col.columnName === "id",
             isForeignKey: !!col.referenceTable || (col.columnName?.includes("_id") && col.columnName !== "id"),
           }));
 
+          // 여러 화면이 같은 테이블 사용하면 "공통 메인 테이블", 아니면 "메인 테이블"
+          const subLabel = linkedScreens.length > 1 
+            ? `메인 테이블 (${linkedScreens.length}개 화면)`
+            : "메인 테이블";
+
+          // 이 테이블을 참조하는 관계들
           tableNodes.push({
             id: `table-${tableName}`,
             type: "tableNode",
             position: { x: mainTableStartX + idx * (NODE_WIDTH + NODE_GAP), y: TABLE_Y },
             data: {
               label: tableName,
-              subLabel: isPrimaryTable ? "메인 테이블" : "조인 테이블",
-              isMain: isPrimaryTable,
+              subLabel: subLabel,
+              isMain: true, // mainTableSet의 모든 테이블은 메인
               columns: formattedColumns,
+              // referencedBy, filterColumns, saveInfos는 styledNodes에서 포커스 상태에 따라 동적으로 설정
             },
           });
         }
-        
+
         // ========== 하단: 서브 테이블 노드들 (참조/조회용) ==========
         const subTableList = Array.from(subTableSet);
         
@@ -370,9 +578,10 @@ function ScreenRelationFlowInner({ screen, selectedGroup, initialFocusedScreenId
               // ignore
             }
 
-            // 컬럼 정보를 PK/FK 표시와 함께 변환
-            const formattedColumns = columns.slice(0, 5).map((col) => ({
+            // 컬럼 정보를 PK/FK 표시와 함께 변환 (전체 컬럼 저장, 표시는 TableNode에서 제한)
+            const formattedColumns = columns.map((col) => ({
               name: col.displayName || col.columnName || "",
+              originalName: col.columnName || "",  // 영문 컬럼명 (필터링용)
               type: col.dataType || "",
               isPrimaryKey: col.isPrimaryKey || col.columnName === "id",
               isForeignKey: !!col.referenceTable || (col.columnName?.includes("_id") && col.columnName !== "id"),
@@ -398,6 +607,8 @@ function ScreenRelationFlowInner({ screen, selectedGroup, initialFocusedScreenId
                 subLabel: `서브 테이블 (${relationType})`,
                 isMain: false,
                 columns: formattedColumns,
+                isFaded: true, // 기본적으로 흐리게 표시 (포커스 시에만 활성화)
+                // referencedBy, filterColumns, saveInfos는 styledNodes에서 포커스 상태에 따라 동적으로 설정
               },
             });
           }
@@ -405,72 +616,270 @@ function ScreenRelationFlowInner({ screen, selectedGroup, initialFocusedScreenId
 
         // ========== 엣지: 연결선 생성 ==========
         const newEdges: Edge[] = [];
-        
+
         // 그룹 선택 시: 화면 간 연결선 (display_order 순)
         if (selectedGroup && screenList.length > 1) {
           for (let i = 0; i < screenList.length - 1; i++) {
             const currentScreen = screenList[i];
             const nextScreen = screenList[i + 1];
             
-            newEdges.push({
+          newEdges.push({
               id: `edge-screen-flow-${i}`,
               source: `screen-${currentScreen.screenId}`,
               target: `screen-${nextScreen.screenId}`,
               sourceHandle: "right",
               targetHandle: "left",
-              type: "smoothstep",
+            type: "smoothstep",
               label: `${i + 1}`,
               labelStyle: { fontSize: 11, fill: "#0ea5e9", fontWeight: 600 },
               labelBgStyle: { fill: "white", stroke: "#e2e8f0", strokeWidth: 1 },
               labelBgPadding: [4, 2] as [number, number],
               markerEnd: { type: MarkerType.ArrowClosed, color: "#0ea5e9" },
-              animated: true,
+            animated: true,
               style: { stroke: "#0ea5e9", strokeWidth: 2 },
             });
           }
         }
 
         // 각 화면 → 해당 메인 테이블 연결선 생성 (실선)
-        screenList.forEach((scr, idx) => {
+        // 모든 화면-테이블 연결은 동일한 스타일 (각 화면의 메인 테이블이므로)
+        screenList.forEach((scr) => {
           if (scr.tableName && mainTableSet.has(scr.tableName)) {
-            const isMain = screen ? scr.screenId === screen.screenId : idx === 0;
             newEdges.push({
               id: `edge-screen-table-${scr.screenId}`,
               source: `screen-${scr.screenId}`,
               target: `table-${scr.tableName}`,
-              sourceHandle: "bottom",
-              targetHandle: "top",
-              type: "smoothstep",
-              animated: isMain, // 메인 화면만 애니메이션
+            sourceHandle: "bottom",
+            targetHandle: "top",
+            type: "smoothstep",
+              animated: true, // 모든 메인 테이블 연결은 애니메이션
               style: { 
-                stroke: isMain ? "#3b82f6" : "#94a3b8", 
-                strokeWidth: isMain ? 2 : 1.5,
-                strokeDasharray: isMain ? undefined : "5,5", // 보조 연결은 점선
+                stroke: "#3b82f6", 
+                strokeWidth: 2,
               },
             });
           }
         });
         
+        // 필터링 관계일 때 화면 → 필터 대상 테이블 연결선 추가 (점선)
+        // rightPanelRelation (split-panel-layout의 마스터-디테일) 관계일 때
+        // + 필터 대상 테이블의 조인 관계도 함께 표시
+        const filterJoinEdgeSet = new Set<string>(); // 필터 테이블의 조인선 중복 방지
+        
+        Object.entries(subTablesData).forEach(([screenIdStr, screenSubData]) => {
+          const sourceScreenId = parseInt(screenIdStr);
+          
+          screenSubData.subTables.forEach((subTable) => {
+            // rightPanelRelation (필터 관계)이고, 해당 테이블이 존재하는 경우
+            // 메인 테이블이든 서브 테이블이든 상관없이 연결선 추가
+            if (subTable.relationType === 'rightPanelRelation') {
+              // 테이블 노드 ID 결정: 메인 테이블 영역 또는 서브 테이블 영역
+              const isFilterTargetMainTable = mainTableSet.has(subTable.tableName);
+              const isFilterTargetSubTable = subTableSet.has(subTable.tableName);
+              
+              if (!isFilterTargetMainTable && !isFilterTargetSubTable) return; // 노드가 없으면 스킵
+              
+              const targetNodeId = isFilterTargetMainTable 
+                ? `table-${subTable.tableName}` 
+                : `subtable-${subTable.tableName}`;
+              
+              // 화면 → 필터 대상 테이블 연결선
+              newEdges.push({
+                id: `edge-screen-filter-${sourceScreenId}-${subTable.tableName}`,
+                source: `screen-${sourceScreenId}`,
+                target: targetNodeId,
+                sourceHandle: "bottom",
+                targetHandle: "top",
+                type: "smoothstep",
+                animated: true,
+                style: { 
+                  stroke: "#3b82f6", 
+                  strokeWidth: 2,
+                  strokeDasharray: "5,5", // 점선으로 필터 관계 표시
+                },
+                data: {
+                  sourceScreenId,
+                },
+              });
+              
+              // 필터 대상 테이블의 조인 관계 (joinColumnRefs)도 조인선으로 표시
+              // 예: customer_item_mapping → item_info (품목 ID가 item_info.item_number 참조)
+              if (subTable.joinColumnRefs && subTable.joinColumnRefs.length > 0) {
+                subTable.joinColumnRefs.forEach((joinRef) => {
+                  const refTable = joinRef.refTable;
+                  if (!refTable) return;
+                  
+                  // 참조 테이블이 메인 테이블 또는 서브 테이블에 있는지 확인
+                  const isRefMainTable = mainTableSet.has(refTable);
+                  const isRefSubTable = subTableSet.has(refTable);
+                  
+                  if (!isRefMainTable && !isRefSubTable) return;
+                  
+                  // 중복 체크 (같은 화면에서 같은 조인 관계 중복 방지)
+                  const joinKey = `${sourceScreenId}-${subTable.tableName}-${refTable}`;
+                  if (filterJoinEdgeSet.has(joinKey)) return;
+                  filterJoinEdgeSet.add(joinKey);
+                  
+                  // 소스/타겟 노드 ID 결정
+                  const sourceNodeId = isFilterTargetMainTable 
+                    ? `table-${subTable.tableName}` 
+                    : `subtable-${subTable.tableName}`;
+                  const refTargetNodeId = isRefMainTable 
+                    ? `table-${refTable}` 
+                    : `subtable-${refTable}`;
+                  
+                  // 조인선 추가 (초기 스타일 - styledEdges에서 포커싱에 따라 스타일 결정)
+                  newEdges.push({
+                    id: `edge-filter-join-${sourceScreenId}-${subTable.tableName}-${refTable}`,
+                    source: sourceNodeId,
+                    target: refTargetNodeId,
+                    sourceHandle: "bottom",
+                    targetHandle: "bottom_target",
+                    type: "smoothstep",
+                    animated: false,
+                    style: { 
+                      stroke: RELATION_COLORS.join.strokeLight, // 초기값 (연한색)
+                      strokeWidth: 1.5, 
+                      strokeDasharray: "6,4",
+                      opacity: 0.3,
+                    },
+                    markerEnd: { 
+                      type: MarkerType.ArrowClosed, 
+                      color: RELATION_COLORS.join.strokeLight
+                    },
+                    data: { 
+                      sourceScreenId, 
+                      isFilterJoin: true,
+                      visualRelationType: 'join',
+                    },
+                  });
+                });
+              }
+            }
+          });
+        });
+
         // 메인 테이블 → 서브 테이블 연결선 생성 (점선)
-        Object.values(subTablesData).forEach((screenSubData) => {
+        // 메인 테이블 → 메인 테이블 연결선도 생성 (점선, 연한 주황색)
+        // 화면별 서브 테이블 연결을 추적하기 위해 screenId 정보도 엣지 ID에 포함
+        const mainToMainEdgeSet = new Set<string>(); // 중복 방지용
+        
+        Object.entries(subTablesData).forEach(([screenIdStr, screenSubData]) => {
+          const sourceScreenId = parseInt(screenIdStr);
           const mainTable = screenSubData.mainTable;
           if (!mainTable || !mainTableSet.has(mainTable)) return;
           
           screenSubData.subTables.forEach((subTable) => {
-            // 서브 테이블 노드가 실제로 생성되었는지 확인
-            if (!subTableSet.has(subTable.tableName)) return;
+            const isTargetSubTable = subTableSet.has(subTable.tableName);
+            const isTargetMainTable = mainTableSet.has(subTable.tableName);
             
-            // 중복 엣지 방지
-            const edgeId = `edge-main-sub-${mainTable}-${subTable.tableName}`;
+            // 자기 자신 연결 방지
+            if (mainTable === subTable.tableName) return;
+            
+            // 메인 테이블 → 메인 테이블 연결 (서브테이블 구간을 통해 연결)
+            // 규격: bottom → bottom_target (참조하는 테이블에서 참조당하는 테이블로)
+            // 
+            // 방향 결정 로직 (범용성):
+            // 1. parentMapping (fieldMappings에 sourceTable 있음): mainTable → sourceTable
+            //    - mainTable이 sourceTable을 참조하는 관계
+            //    - 예: customer_item_mapping.customer_id → customer_mng.customer_code
+            // 2. rightPanelRelation (foreignKey 있음): subTable → mainTable  
+            //    - subTable이 mainTable을 참조하는 관계
+            //    - 예: customer_item_mapping.customer_id → customer_mng.customer_code
+            // 3. reference (column_labels): mainTable → subTable
+            //    - mainTable이 subTable을 참조하는 관계
+            if (isTargetMainTable) {
+              // 실제 참조 방향 결정
+              let referrerTable: string;  // 참조하는 테이블 (source)
+              let referencedTable: string; // 참조당하는 테이블 (target)
+              
+              // fieldMappings에서 sourceTable 확인
+              const hasSourceTable = subTable.fieldMappings?.some(
+                (fm: any) => fm.sourceTable && fm.sourceTable === subTable.tableName
+              );
+              
+              if (subTable.relationType === 'parentMapping' || hasSourceTable) {
+                // parentMapping: mainTable이 sourceTable(=subTable.tableName)을 참조
+                // 방향: mainTable → subTable.tableName
+                referrerTable = mainTable;
+                referencedTable = subTable.tableName;
+              } else if (subTable.relationType === 'rightPanelRelation') {
+                // rightPanelRelation: split-panel-layout의 마스터-디테일 관계
+                // mainTable(leftPanel, 마스터)이 subTable(rightPanel, 디테일)을 필터링
+                // 방향: mainTable(마스터) → subTable(디테일)
+                referrerTable = mainTable;
+                referencedTable = subTable.tableName;
+              } else if (subTable.relationType === 'reference') {
+                // reference (column_labels): mainTable이 subTable을 참조
+                // 방향: mainTable → subTable.tableName
+                referrerTable = mainTable;
+                referencedTable = subTable.tableName;
+              } else {
+                // 기본: subTable이 mainTable을 참조한다고 가정
+                referrerTable = subTable.tableName;
+                referencedTable = mainTable;
+              }
+              
+              // 화면별로 고유한 키 생성 (같은 테이블 쌍이라도 다른 화면에서는 별도 엣지)
+              const pairKey = `${sourceScreenId}-${[mainTable, subTable.tableName].sort().join('-')}`;
+              if (!mainToMainEdgeSet.has(pairKey)) {
+                mainToMainEdgeSet.add(pairKey);
+                
+                // 관계 유형 추론 및 색상 결정
+                const visualRelationType = inferVisualRelationType(subTable as SubTableInfo);
+                
+                // 방안 C: 필터 관계는 선 없이 뱃지로만 표시 (겹침 방지)
+                if (visualRelationType === 'filter') {
+                  return; // 필터선 생성 건너뛰기
+                }
+                
+                const relationColor = RELATION_COLORS[visualRelationType];
+                
+                // 화면별로 고유한 엣지 ID
+                const edgeId = `edge-main-main-${sourceScreenId}-${referrerTable}-${referencedTable}`;
+            newEdges.push({
+                  id: edgeId,
+                  source: `table-${referrerTable}`,     // 참조하는 테이블
+                  target: `table-${referencedTable}`,   // 참조당하는 테이블
+                  sourceHandle: "bottom",         // 하단에서 나감 (서브테이블 구간으로)
+                  targetHandle: "bottom_target",  // 하단으로 들어감
+              type: "smoothstep",
+                  animated: false,
+                  style: { 
+                    stroke: relationColor.strokeLight, // 관계 유형별 연한 색상
+                    strokeWidth: 1.5, 
+                    strokeDasharray: "8,4",
+                    opacity: 0.5,
+                  },
+                  markerEnd: { 
+                    type: MarkerType.ArrowClosed, 
+                    color: relationColor.strokeLight
+                  },
+                  data: { 
+                    sourceScreenId, 
+                    isMainToMain: true, 
+                    referrerTable, 
+                    referencedTable,
+                    visualRelationType,  // 관계 유형 저장
+                  },
+                });
+              }
+              return; // 메인-메인은 위에서 처리했으므로 스킵
+            }
+            
+            // 서브 테이블이 아니면 스킵
+            if (!isTargetSubTable) return;
+            
+            // 화면별로 고유한 엣지 ID (같은 서브 테이블이라도 다른 화면에서 사용하면 별도 엣지)
+            const edgeId = `edge-main-sub-${sourceScreenId}-${mainTable}-${subTable.tableName}`;
             const exists = newEdges.some((e) => e.id === edgeId);
             if (exists) return;
             
-            // 관계 타입에 따른 라벨
-            let relationLabel = "참조";
-            if (subTable.relationType === "lookup") relationLabel = "조회";
-            else if (subTable.relationType === "source") relationLabel = "데이터 소스";
-            else if (subTable.relationType === "join") relationLabel = "조인";
+            // 관계 유형 결정 (스타일링용)
+            const visualRelationType = inferVisualRelationType(subTable);
+            const relationColor = RELATION_COLORS[visualRelationType];
             
+            // 메인-서브 조인선 (메인-메인과 동일한 스타일, 라벨 없음)
             newEdges.push({
               id: edgeId,
               source: `table-${mainTable}`,
@@ -478,36 +887,47 @@ function ScreenRelationFlowInner({ screen, selectedGroup, initialFocusedScreenId
               sourceHandle: "bottom",
               targetHandle: "top",
               type: "smoothstep",
-              label: relationLabel,
-              labelStyle: { fontSize: 9, fill: "#f97316", fontWeight: 500 },
-              labelBgStyle: { fill: "white", stroke: "#e2e8f0", strokeWidth: 1 },
-              labelBgPadding: [3, 2] as [number, number],
-              markerEnd: { type: MarkerType.ArrowClosed, color: "#f97316" },
+              markerEnd: { 
+                type: MarkerType.ArrowClosed, 
+                color: relationColor.strokeLight
+              },
+              animated: false,
               style: { 
-                stroke: "#f97316", 
+                stroke: relationColor.strokeLight,
                 strokeWidth: 1.5, 
-                strokeDasharray: "6,4", // 점선
+                strokeDasharray: "8,4",
+                opacity: 0.5,
+              },
+              data: { 
+                sourceScreenId,
+                visualRelationType,
               },
             });
           });
         });
 
-        // 조인 관계 엣지 (테이블 간 - 1:N 관계 표시)
+        // 조인 관계 엣지 (screen_field_joins 기반 - 라벨 없이 통일된 스타일)
         joins.forEach((join: any, idx: number) => {
           if (join.save_table && join.join_table && join.save_table !== join.join_table) {
             newEdges.push({
-              id: `edge-join-${idx}`,
+              id: `edge-join-db-${idx}`,
               source: `table-${join.save_table}`,
               target: `table-${join.join_table}`,
-              sourceHandle: "right",
-              targetHandle: "left",
+              sourceHandle: "bottom",
+              targetHandle: "bottom_target",
               type: "smoothstep",
-              label: "1:N 관계",
-              labelStyle: { fontSize: 10, fill: "#6366f1", fontWeight: 500 },
-              labelBgStyle: { fill: "white", stroke: "#e2e8f0", strokeWidth: 1 },
-              labelBgPadding: [4, 2] as [number, number],
-              markerEnd: { type: MarkerType.ArrowClosed, color: "#6366f1" },
-              style: { stroke: "#6366f1", strokeWidth: 1.5, strokeDasharray: "5,5" },
+              markerEnd: { 
+                type: MarkerType.ArrowClosed, 
+                color: RELATION_COLORS.join.strokeLight 
+              },
+              animated: false,
+              style: { 
+                stroke: RELATION_COLORS.join.strokeLight, 
+                strokeWidth: 1.5, 
+                strokeDasharray: "8,4",
+                opacity: 0.5,
+              },
+              data: { visualRelationType: 'join' },
             });
           }
         });
@@ -580,6 +1000,9 @@ function ScreenRelationFlowInner({ screen, selectedGroup, initialFocusedScreenId
 
         setNodes(allNodes);
         setEdges(newEdges);
+        
+        // 데이터 로드 완료 후 버전 증가 (fitView 트리거용)
+        setDataLoadVersion((prev) => prev + 1);
       } catch (error) {
         console.error("관계 데이터 로드 실패:", error);
       } finally {
@@ -589,8 +1012,23 @@ function ScreenRelationFlowInner({ screen, selectedGroup, initialFocusedScreenId
 
     loadRelations();
   // focusedScreenId는 스타일링에만 영향을 미치므로 의존성에서 제외
+  // refreshKey: 설정 저장 후 강제 새로고침용
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [screen, selectedGroup, setNodes, setEdges, loadTableColumns]);
+  }, [screen, selectedGroup, setNodes, setEdges, loadTableColumns, refreshKey]);
+  
+  // 데이터 로드 완료 시 fitView 호출 (초기 로드 시에만)
+  useEffect(() => {
+    if (dataLoadVersion > 0 && nodes.length > 0) {
+      // setTimeout으로 노드 렌더링 완료 후 fitView 호출
+      const timer = setTimeout(() => {
+        // duration: 0으로 설정하여 애니메이션 없이 즉시 이동
+        reactFlowInstance.fitView({ padding: 0.2, duration: 0 });
+        // fitView 완료 후 뷰 표시
+        setIsViewReady(true);
+      }, 50);
+      return () => clearTimeout(timer);
+    }
+  }, [dataLoadVersion, reactFlowInstance, nodes.length]);
 
   // 노드 클릭 핸들러 (그룹 모드에서 화면 포커스) - 조건부 return 전에 선언해야 함
   const handleNodeClick = useCallback((_event: React.MouseEvent, node: Node) => {
@@ -604,14 +1042,381 @@ function ScreenRelationFlowInner({ screen, selectedGroup, initialFocusedScreenId
       setFocusedScreenId((prev) => (prev === screenId ? null : screenId));
     }
   }, [selectedGroup]);
+
+  // 테이블 정보에서 조인/필터 정보 추출 (더블클릭 핸들러용)
+  const getTableExistingConfig = useCallback((tableName: string) => {
+    // subTablesDataMap에서 서브 테이블 정보 찾기
+    for (const screenId in subTablesDataMap) {
+      const screenSubTables = subTablesDataMap[parseInt(screenId)];
+      if (screenSubTables?.subTables) {
+        const subTable = screenSubTables.subTables.find(st => st.tableName === tableName);
+        if (subTable) {
+          return {
+            joinColumnRefs: subTable.joinColumnRefs,
+            filterColumns: subTable.filterColumns,
+            fieldMappings: subTable.fieldMappings?.map(m => ({
+              targetField: m.targetField,
+              sourceField: m.sourceField,
+              sourceTable: m.sourceTable,
+              sourceDisplayName: m.sourceDisplayName,
+            })),
+            columns: [], // 컬럼 정보는 노드에서 가져옴
+          };
+        }
+      }
+    }
+    return undefined;
+  }, [subTablesDataMap]);
+
+  // 노드 우클릭 핸들러 (설정 모달 열기)
+  const handleNodeContextMenu = useCallback((event: React.MouseEvent, node: Node) => {
+    // 기본 컨텍스트 메뉴 방지
+    event.preventDefault();
+    
+    // 화면 노드 우클릭
+    if (node.id.startsWith("screen-")) {
+      const screenId = parseInt(node.id.replace("screen-", ""));
+      const nodeData = node.data as ScreenNodeData;
+      const mainTable = screenTableMap[screenId];
+      
+      // 해당 화면의 서브 테이블 (필터 테이블) 정보
+      // 1. screenSubTableMap에서 가져오기
+      const screenSubTables = screenSubTableMap[screenId] || [];
+      
+      // 2. edges에서 필터 테이블 찾기 (edge-screen-filter-{screenId}-{tableName})
+      const filterTableNamesFromEdges = edges
+        .filter(e => e.id.startsWith(`edge-screen-filter-${screenId}-`))
+        .map(e => {
+          const match = e.id.match(/edge-screen-filter-\d+-(.+)/);
+          return match ? match[1] : null;
+        })
+        .filter((name): name is string => name !== null);
+      
+      // 모든 필터 테이블 합치기 (중복 제거)
+      const allFilterTableNames = [...new Set([...screenSubTables, ...filterTableNamesFromEdges])];
+      
+      const filterTables = allFilterTableNames.map(tableName => {
+        // subTablesDataMap에서 해당 테이블 정보 찾기
+        const subTableData = subTablesDataMap[screenId]?.subTables?.find(
+          st => st.tableName === tableName
+        );
+        
+        // 또는 nodes에서 테이블 노드 정보 찾기
+        const tableNode = nodes.find(n => 
+          n.id === `table-${tableName}` || n.id === `subtable-${tableName}`
+        );
+        const tableNodeData = tableNode?.data as TableNodeData | undefined;
+        
+        // 필터 키 매핑 정보 추출 (leftColumn → foreignKey)
+        let filterKeyMapping: {
+          mainTableColumn: string;
+          mainTableColumnLabel?: string;
+          filterTableColumn: string;
+          filterTableColumnLabel?: string;
+        } | undefined = undefined;
+        
+        if (subTableData?.leftColumn && subTableData?.foreignKey) {
+          // 메인 테이블 컬럼 한글명 조회
+          const mainTable = subTablesDataMap[screenId]?.mainTable;
+          const mainTableCols = mainTable ? tableColumns[mainTable] : [];
+          const mainColInfo = mainTableCols?.find(c => c.columnName === subTableData.leftColumn);
+          
+          // 필터 테이블 컬럼 한글명 조회
+          const filterTableCols = tableColumns[tableName] || [];
+          const filterColInfo = filterTableCols?.find(c => c.columnName === subTableData.foreignKey);
+          
+          filterKeyMapping = {
+            mainTableColumn: subTableData.leftColumn,
+            mainTableColumnLabel: mainColInfo?.displayName,
+            filterTableColumn: subTableData.foreignKey,
+            filterTableColumnLabel: filterColInfo?.displayName,
+          };
+        }
+        
+        return {
+          tableName,
+          tableLabel: subTableData?.tableLabel || tableNodeData?.label || tableName,
+          filterColumns: subTableData?.filterColumns || tableNodeData?.filterColumns || [],
+          filterKeyMapping,
+          joinColumnRefs: subTableData?.joinColumnRefs || tableNodeData?.joinColumnRefs || [],
+        };
+      });
+      
+      // 화면의 모든 서브 테이블에서 fieldMappings 추출
+      const screenSubTablesData = subTablesDataMap[screenId];
+      const allFieldMappings: Array<{
+        targetField: string;
+        sourceField: string;
+        sourceTable?: string;
+        sourceDisplayName?: string;
+        componentType?: string;
+      }> = [];
+      
+      if (screenSubTablesData?.subTables) {
+        screenSubTablesData.subTables.forEach((subTable) => {
+          if (subTable.fieldMappings) {
+            subTable.fieldMappings.forEach((mapping) => {
+              allFieldMappings.push({
+                targetField: mapping.targetField,
+                sourceField: mapping.sourceField,
+                sourceTable: mapping.sourceTable || subTable.tableName,
+                sourceDisplayName: mapping.sourceDisplayName,
+                componentType: subTable.relationType,
+              });
+            });
+          }
+        });
+      }
+      
+      setSettingModalNode({
+        nodeType: "screen",
+        nodeId: node.id,
+        screenId: screenId,
+        screenName: nodeData.label || `화면 ${screenId}`,
+        tableName: mainTable,
+        tableLabel: nodeData.subLabel,
+        companyCode: selectedGroup?.company_code, // 프리뷰용 회사 코드
+        // 화면의 테이블 정보 전달
+        existingConfig: {
+          mainTable: mainTable,
+          filterTables: filterTables,
+          fieldMappings: allFieldMappings,
+        },
+      });
+      setIsSettingModalOpen(true);
+      return;
+    }
+    
+    // 메인 테이블 노드 더블클릭
+    if (node.id.startsWith("table-") && !node.id.startsWith("table-sub-")) {
+      const tableName = node.id.replace("table-", "");
+      const nodeData = node.data as TableNodeData;
+      
+      // 이 테이블을 사용하는 화면 찾기
+      const screenId = Object.entries(screenTableMap).find(
+        ([_, tbl]) => tbl === tableName
+      )?.[0];
+      
+      // 백엔드에서 받은 데이터에서 기존 설정 정보 추출
+      const existingConfigFromData = getTableExistingConfig(tableName);
+      
+      setSettingModalNode({
+        nodeType: "table",
+        nodeId: node.id,
+        screenId: screenId ? parseInt(screenId) : 0,
+        screenName: nodeData.subLabel || tableName,
+        tableName: tableName,
+        tableLabel: nodeData.label,
+        // 기존 설정 정보 전달
+        existingConfig: existingConfigFromData || {
+          joinColumnRefs: nodeData.joinColumnRefs,
+          filterColumns: nodeData.filterColumns,
+          fieldMappings: nodeData.fieldMappings?.map(m => ({
+            targetField: m.targetField,
+            sourceField: m.sourceField,
+            sourceTable: m.sourceTable,
+            sourceDisplayName: m.sourceDisplayName,
+          })),
+          referencedBy: nodeData.referencedBy?.map(r => ({
+            fromTable: r.fromTable,
+            fromTableLabel: r.fromTableLabel,
+            fromColumn: r.fromColumn,
+            toColumn: r.toColumn,
+            toColumnLabel: r.toColumnLabel,
+            relationType: r.relationType,
+          })),
+          columns: nodeData.columns,
+        },
+      });
+      setIsSettingModalOpen(true);
+      return;
+    }
+    
+    // 서브 테이블 노드 더블클릭
+    if (node.id.startsWith("subtable-")) {
+      const tableName = node.id.replace("subtable-", "");
+      const nodeData = node.data as TableNodeData;
+      
+      // 이 서브 테이블을 사용하는 화면 찾기
+      const screenId = Object.entries(screenSubTableMap).find(
+        ([_, tables]) => tables.includes(tableName)
+      )?.[0];
+      
+      // 백엔드에서 받은 데이터에서 기존 설정 정보 추출
+      const existingConfigFromData = getTableExistingConfig(tableName);
+      
+      setSettingModalNode({
+        nodeType: "table",
+        nodeId: node.id,
+        screenId: screenId ? parseInt(screenId) : 0,
+        screenName: nodeData.subLabel || tableName,
+        tableName: tableName,
+        tableLabel: nodeData.label,
+        // 기존 설정 정보 전달
+        existingConfig: existingConfigFromData || {
+          joinColumnRefs: nodeData.joinColumnRefs,
+          filterColumns: nodeData.filterColumns,
+          fieldMappings: nodeData.fieldMappings?.map(m => ({
+            targetField: m.targetField,
+            sourceField: m.sourceField,
+            sourceTable: m.sourceTable,
+            sourceDisplayName: m.sourceDisplayName,
+          })),
+          referencedBy: nodeData.referencedBy?.map(r => ({
+            fromTable: r.fromTable,
+            fromTableLabel: r.fromTableLabel,
+            fromColumn: r.fromColumn,
+            toColumn: r.toColumn,
+            toColumnLabel: r.toColumnLabel,
+            relationType: r.relationType,
+          })),
+          columns: nodeData.columns,
+        },
+      });
+      setIsSettingModalOpen(true);
+      return;
+    }
+  }, [screenTableMap, screenSubTableMap, subTablesDataMap, edges, nodes, getTableExistingConfig]);
+
+  // 설정 모달 닫기 및 새로고침
+  const handleSettingModalClose = useCallback(() => {
+    setIsSettingModalOpen(false);
+    setSettingModalNode(null);
+  }, []);
+
+  // 시각화 새로고침 (설정 저장 후 호출)
+  const handleRefreshVisualization = useCallback(() => {
+    // 강제 새로고침: refreshKey 증가로 useEffect 재실행
+    setRefreshKey(prev => prev + 1);
+  }, []);
   
   // 포커스에 따른 노드 스타일링 (그룹 모드에서 화면 클릭 시)
   const styledNodes = React.useMemo(() => {
-    // 그룹 모드에서 포커스된 화면이 있을 때만 추가 스타일링
-    if (!selectedGroup || focusedScreenId === null) return nodes;
+    // 그룹 모드가 아니면 원본 반환
+    if (!selectedGroup) return nodes;
+    
+    // 포커스된 화면의 서브 테이블 목록 (포커스가 없으면 빈 배열)
+    const focusedSubTables = focusedScreenId !== null 
+      ? (screenSubTableMap[focusedScreenId] || []) 
+      : [];
+    
+    // 포커스된 화면의 서브 테이블 데이터 (조인 컬럼 정보 포함)
+    const focusedSubTablesData = focusedScreenId !== null 
+      ? subTablesDataMap[focusedScreenId] 
+      : null;
+    
+    // 포커스된 화면의 사용 컬럼 정보
+    const focusedUsedColumns = focusedScreenId !== null
+      ? screenUsedColumnsMap[focusedScreenId]
+      : null;
+    
+    // 연관 테이블 정보 추출 (parentDataMapping, rightPanelRelation 등으로 연결된 테이블)
+    // { tableName: { columns: [sourceField1, sourceField2], displayNames: [displayName1, displayName2] } }
+    const relatedTablesMap: Record<string, { columns: string[], displayNames: string[] }> = {};
+    if (focusedSubTablesData) {
+      focusedSubTablesData.subTables.forEach((subTable) => {
+        // parentDataMapping, rightPanelRelation 타입의 연결에서 sourceTable 추출
+        if ((subTable.relationType === 'parentMapping' || subTable.relationType === 'rightPanelRelation') 
+            && subTable.fieldMappings) {
+          subTable.fieldMappings.forEach((mapping) => {
+            // sourceTable이 명시되어 있으면 그 테이블에 sourceField 추가
+            // sourceTable이 없으면 subTable.tableName을 sourceTable로 간주하지 않음
+            // mapping에서 sourceTable 정보가 필요함 - 현재는 tableName에서 추론
+            // parentDataMapping의 경우: tableName이 targetTable이고, sourceTable은 별도 정보 필요
+            
+            // 임시: subTables의 tableName과 다른 메인 테이블들을 확인
+            // fieldMappings에서 sourceField가 다른 테이블에 있다면 그 테이블이 연관 테이블
+          });
+        }
+      });
+    }
+    
+    // 모든 화면의 메인 테이블과 그에 연결된 조인 정보 매핑
+    // 포커스된 화면이 다른 메인 테이블을 참조하는 경우 해당 테이블도 강조
+    const relatedMainTables: Record<string, { columns: string[], displayNames: string[] }> = {};
+    
+    // 모든 화면의 메인 테이블 Set (빠른 조회용)
+    const allMainTableSet = new Set(Object.values(screenTableMap));
+    
+    if (focusedSubTablesData) {
+      // 포커스된 화면의 subTables 순회
+      focusedSubTablesData.subTables.forEach((subTable) => {
+        // 1. subTable.tableName 자체가 다른 화면의 메인 테이블인 경우
+        if (allMainTableSet.has(subTable.tableName) && subTable.tableName !== focusedSubTablesData.mainTable) {
+          if (!relatedMainTables[subTable.tableName]) {
+            relatedMainTables[subTable.tableName] = { columns: [], displayNames: [] };
+          }
+          
+          // fieldMappings가 있으면 조인 컬럼 정보 추출
+          if (subTable.fieldMappings) {
+            subTable.fieldMappings.forEach((mapping: any) => {
+              // reference, source 타입: targetField가 서브(연관) 테이블 컬럼
+              // parentMapping 등: sourceField가 연관 테이블 컬럼
+              const relatedColumn = mapping.sourceTable 
+                ? mapping.sourceField  // parentMapping 스타일
+                : mapping.targetField; // reference/source 스타일
+              const displayName = mapping.sourceTable
+                ? (mapping.sourceDisplayName || mapping.sourceField)
+                : (mapping.targetDisplayName || mapping.targetField);
+              
+              if (relatedColumn && !relatedMainTables[subTable.tableName].columns.includes(relatedColumn)) {
+                relatedMainTables[subTable.tableName].columns.push(relatedColumn);
+                relatedMainTables[subTable.tableName].displayNames.push(displayName);
+              }
+            });
+          }
+        }
+        
+        // 2. fieldMappings.sourceTable이 다른 화면의 메인 테이블인 경우
+        if (subTable.fieldMappings) {
+          subTable.fieldMappings.forEach((mapping: any) => {
+            if (mapping.sourceTable && allMainTableSet.has(mapping.sourceTable) && mapping.sourceTable !== focusedSubTablesData.mainTable) {
+              if (!relatedMainTables[mapping.sourceTable]) {
+                relatedMainTables[mapping.sourceTable] = { columns: [], displayNames: [] };
+              }
+              if (mapping.sourceField && !relatedMainTables[mapping.sourceTable].columns.includes(mapping.sourceField)) {
+                relatedMainTables[mapping.sourceTable].columns.push(mapping.sourceField);
+                relatedMainTables[mapping.sourceTable].displayNames.push(mapping.sourceDisplayName || mapping.sourceField);
+              }
+            }
+          });
+        }
+        
+        // 3. 필터 대상 테이블의 joinColumnRefs가 있으면 해당 참조 테이블도 활성화
+        // 예: customer_item_mapping → item_info (품목 ID → item_info.item_number)
+        if (subTable.relationType === 'rightPanelRelation' && subTable.joinColumnRefs) {
+          subTable.joinColumnRefs.forEach((joinRef) => {
+            const refTable = joinRef.refTable;
+            if (refTable && allMainTableSet.has(refTable) && refTable !== focusedSubTablesData.mainTable) {
+              if (!relatedMainTables[refTable]) {
+                relatedMainTables[refTable] = { columns: [], displayNames: [] };
+              }
+              // 참조 테이블의 컬럼도 추가 (조인 관계 표시용)
+              if (joinRef.refColumn && !relatedMainTables[refTable].columns.includes(joinRef.refColumn)) {
+                relatedMainTables[refTable].columns.push(joinRef.refColumn);
+                relatedMainTables[refTable].displayNames.push(joinRef.columnLabel || joinRef.refColumn);
+              }
+            }
+          });
+        }
+      });
+    }
     
     return nodes.map((node) => {
+      // 화면 노드 스타일링 (포커스가 있을 때만)
       if (node.id.startsWith("screen-")) {
+        if (focusedScreenId === null) {
+          // 포커스 없음: 모든 화면 정상 표시
+          return {
+            ...node,
+            data: {
+              ...node.data,
+              isFocused: false,
+              isFaded: false,
+            },
+          };
+        }
+        
         const screenId = parseInt(node.id.replace("screen-", ""));
         const isFocused = screenId === focusedScreenId;
         const isFaded = !isFocused;
@@ -625,9 +1430,402 @@ function ScreenRelationFlowInner({ screen, selectedGroup, initialFocusedScreenId
           },
         };
       }
+      
+      // 메인 테이블 노드 스타일링
+      if (node.id.startsWith("table-")) {
+        const tableName = node.id.replace("table-", "");
+        
+        // 포커스된 화면의 메인 테이블인지 확인
+        const isFocusedTable = focusedScreenId !== null && screenTableMap[focusedScreenId] === tableName;
+        
+        // 연관 테이블인지 확인 (다른 화면의 메인 테이블이지만 포커스된 화면에서 참조하는 테이블)
+        const isRelatedTable = relatedMainTables[tableName] !== undefined;
+        const relatedTableInfo = relatedMainTables[tableName];
+        
+        // 조인 컬럼 추출
+        // 1. columns_config에서 isEntityJoin=true인 컬럼 (__join 키)
+        // 2. 서브 테이블 연결 시 fieldMappings에서 메인테이블 컬럼 추출
+        let joinColumns: string[] = [...(focusedUsedColumns?.[`${tableName}__join`] || [])];
+        
+        // 서브 테이블 연결 정보에서도 추가 (포커스된 화면의 메인 테이블인 경우)
+        if (focusedSubTablesData && focusedSubTablesData.mainTable === tableName) {
+          focusedSubTablesData.subTables.forEach((subTable) => {
+            if (subTable.fieldMappings) {
+              subTable.fieldMappings.forEach((mapping) => {
+                const hasSourceTable = 'sourceTable' in mapping && mapping.sourceTable;
+                
+                if (hasSourceTable) {
+                  if (mapping.targetField && !joinColumns.includes(mapping.targetField)) {
+                    joinColumns.push(mapping.targetField);
+                  }
+                } else if (subTable.relationType === 'reference' || subTable.relationType === 'source') {
+                  if (mapping.sourceField && !joinColumns.includes(mapping.sourceField)) {
+                    joinColumns.push(mapping.sourceField);
+                  }
+                } else if (subTable.relationType === 'parentMapping' || subTable.relationType === 'rightPanelRelation') {
+                  if (mapping.targetField && !joinColumns.includes(mapping.targetField)) {
+                    joinColumns.push(mapping.targetField);
+                  }
+                } else {
+                  if (mapping.targetField && !joinColumns.includes(mapping.targetField)) {
+                    joinColumns.push(mapping.targetField);
+                  }
+                }
+              });
+            }
+          });
+        }
+        
+        // 연관 테이블인 경우: 참조되는 컬럼을 조인 컬럼으로 추가
+        if (isRelatedTable && relatedTableInfo) {
+          relatedTableInfo.columns.forEach((col) => {
+            if (!joinColumns.includes(col)) {
+              joinColumns.push(col);
+            }
+          });
+        }
+        
+        // 사용 컬럼 추출 (조인 컬럼 제외)
+        const allUsedColumns = focusedUsedColumns?.[tableName] || [];
+        const highlightedColumns = allUsedColumns.filter(col => !joinColumns.includes(col));
+        
+        // 테이블 활성화 여부: 포커스된 화면의 메인 테이블 OR 연관 테이블
+        const isActiveTable = isFocusedTable || isRelatedTable;
+        
+        // 메인테이블용 fieldMappings 생성 (조인 컬럼 옆에 연관 테이블 컬럼명 표시)
+        // 예: 거래처 ID ← 거래처 코드 (메인테이블 컬럼 ← 연관테이블 컬럼)
+        let mainTableFieldMappings: Array<{ sourceField: string; targetField: string; sourceDisplayName?: string; targetDisplayName?: string }> = [];
+        if (isFocusedTable && focusedSubTablesData) {
+          focusedSubTablesData.subTables.forEach((subTable) => {
+            if (subTable.fieldMappings) {
+              subTable.fieldMappings.forEach((mapping) => {
+                // 메인테이블에서는:
+                // - sourceField/targetField 중 메인테이블 컬럼이 targetField (표시할 컬럼)
+                // - 연관테이블 컬럼이 sourceField (← 뒤에 표시할 참조 컬럼)
+                if (subTable.relationType === 'source' && mapping.sourceTable) {
+                  // parentDataMapping 스타일: targetField = 메인테이블, sourceField = 연관테이블
+                  mainTableFieldMappings.push({
+                    sourceField: mapping.sourceField,           // 연관 테이블 컬럼
+                    targetField: mapping.targetField,           // 메인 테이블 컬럼
+                    sourceDisplayName: mapping.sourceDisplayName || mapping.sourceField,
+                    targetDisplayName: mapping.targetDisplayName || mapping.targetField,
+                  });
+                } else if (subTable.relationType === 'parentMapping' || subTable.relationType === 'rightPanelRelation') {
+                  mainTableFieldMappings.push({
+                    sourceField: mapping.sourceField,
+                    targetField: mapping.targetField,
+                    sourceDisplayName: mapping.sourceDisplayName || mapping.sourceField,
+                    targetDisplayName: mapping.targetDisplayName || mapping.targetField,
+                  });
+                } else if (subTable.relationType === 'reference' || subTable.relationType === 'source') {
+                  // reference/source: sourceField = 메인테이블, targetField = 서브테이블
+                  // 메인테이블 표시: sourceField ← targetDisplayName
+                  mainTableFieldMappings.push({
+                    sourceField: mapping.targetField,           // 연관 테이블 컬럼 (표시용)
+                    targetField: mapping.sourceField,           // 메인 테이블 컬럼
+                    sourceDisplayName: mapping.targetDisplayName || mapping.targetField,
+                    targetDisplayName: mapping.sourceDisplayName || mapping.sourceField,
+                  });
+                } else {
+                  // lookup: targetField = 메인테이블, sourceField = 서브테이블
+                  mainTableFieldMappings.push({
+                    sourceField: mapping.sourceField,
+                    targetField: mapping.targetField,
+                    sourceDisplayName: mapping.sourceDisplayName || mapping.sourceField,
+                    targetDisplayName: mapping.targetDisplayName || mapping.targetField,
+                  });
+                }
+              });
+            }
+          });
+        }
+        
+        // 연관 테이블용 fieldMappings 생성
+        let relatedTableFieldMappings: Array<{ sourceField: string; targetField: string; sourceDisplayName?: string; targetDisplayName?: string }> = [];
+        if (isRelatedTable && focusedSubTablesData) {
+          focusedSubTablesData.subTables.forEach((subTable) => {
+            // 1. subTable.tableName === tableName인 경우 (메인-메인 조인)
+            if (subTable.tableName === tableName && subTable.fieldMappings) {
+              subTable.fieldMappings.forEach((mapping) => {
+                // reference/source 타입: sourceField가 메인테이블, targetField가 이 연관테이블
+                // 연관 테이블 표시: targetField ← sourceDisplayName (메인테이블 컬럼 한글명)
+                if (subTable.relationType === 'reference' || subTable.relationType === 'source') {
+                  relatedTableFieldMappings.push({
+                    sourceField: mapping.sourceField,           // 메인 테이블 컬럼 (참조 표시용)
+                    targetField: mapping.targetField,           // 연관 테이블 컬럼 (표시할 컬럼)
+                    sourceDisplayName: mapping.sourceDisplayName || mapping.sourceField,
+                    targetDisplayName: mapping.targetDisplayName || mapping.targetField,
+                  });
+                } else {
+                  // lookup, parentMapping 등: targetField가 메인테이블, sourceField가 연관테이블
+                  relatedTableFieldMappings.push({
+                    sourceField: mapping.targetField,           // 메인 테이블 컬럼 (참조 표시용)
+                    targetField: mapping.sourceField,           // 연관 테이블 컬럼 (표시할 컬럼)
+                    sourceDisplayName: mapping.targetDisplayName || mapping.targetField,
+                    targetDisplayName: mapping.sourceDisplayName || mapping.sourceField,
+                  });
+                }
+              });
+            }
+            
+            // 2. mapping.sourceTable === tableName인 경우 (parentDataMapping 등)
+            if (subTable.fieldMappings) {
+              subTable.fieldMappings.forEach((mapping) => {
+                if (mapping.sourceTable === tableName) {
+                  // 이 테이블이 sourceTable인 경우: sourceField가 이 테이블의 컬럼
+                  relatedTableFieldMappings.push({
+                    sourceField: mapping.targetField,           // 메인 테이블 컬럼 (참조 표시용)
+                    targetField: mapping.sourceField,           // 연관 테이블 컬럼 (표시할 컬럼)
+                    sourceDisplayName: mapping.targetDisplayName || mapping.targetField,
+                    targetDisplayName: mapping.sourceDisplayName || mapping.sourceField,
+                  });
+                }
+              });
+            }
+          });
+          
+          // 중복 제거
+          const seen = new Set<string>();
+          relatedTableFieldMappings = relatedTableFieldMappings.filter(fm => {
+            const key = `${fm.sourceField}-${fm.targetField}`;
+            if (seen.has(key)) return false;
+            seen.add(key);
+            return true;
+          });
+        }
+        
+        // 포커스된 화면에서 이 테이블이 필터링 대상인지 확인
+        // (rightPanelRelation의 서브테이블인 경우)
+        let focusedFilterColumns: string[] = [];
+        let focusedReferencedBy: ReferenceInfo[] = [];
+        
+        // 조인 컬럼 참조 정보 수집
+        let focusedJoinColumnRefs: Array<{ column: string; refTable: string; refColumn: string }> = [];
+        
+        // 포커싱된 화면 기준 저장 정보
+        let focusedSaveInfos: Array<{ saveType: string; componentType: string; isMainTable: boolean; sourceScreenId?: number }> = [];
+        
+        if (focusedScreenId !== null && focusedSubTablesData) {
+          // 포커스된 화면에서 이 테이블이 rightPanelRelation의 서브테이블인 경우
+          focusedSubTablesData.subTables.forEach((subTable) => {
+            if (subTable.tableName === tableName && subTable.relationType === 'rightPanelRelation') {
+              // FK 컬럼 추출 (필터링 기준)
+              if (subTable.foreignKey) {
+                focusedFilterColumns.push(subTable.foreignKey);
+              }
+              // 조인 컬럼 추가 (rightPanel.columns에서 외부 테이블 참조하는 FK)
+              // 예: customer_mng.customer_name 표시를 위해 customer_id 사용
+              // 조인 컬럼은 주황색으로 표시되어야 하므로 joinColumns에 추가
+              if (subTable.joinColumns && Array.isArray(subTable.joinColumns)) {
+                subTable.joinColumns.forEach((col) => {
+                  if (!joinColumns.includes(col)) {
+                    joinColumns.push(col);
+                  }
+                });
+              }
+              // 조인 컬럼 참조 정보 추가
+              if (subTable.joinColumnRefs && Array.isArray(subTable.joinColumnRefs)) {
+                focusedJoinColumnRefs = [...focusedJoinColumnRefs, ...subTable.joinColumnRefs];
+              }
+              // 참조 정보 생성 (한글명 포함) - 서브 테이블용
+              const mainTableCols = tableColumns[focusedSubTablesData.mainTable] || [];
+              const fromColInfo = mainTableCols.find(c => c.columnName === (subTable.leftColumn || 'id'));
+              const fromColumnLabel = fromColInfo?.displayName || subTable.leftColumn || 'id';
+              
+              const subTableCols = tableColumns[subTable.tableName] || [];
+              const toColInfo = subTableCols.find(c => c.columnName === subTable.foreignKey);
+              const toColumnLabel = toColInfo?.displayName || subTable.foreignKey || '';
+              
+              focusedReferencedBy.push({
+                fromTable: focusedSubTablesData.mainTable,
+                fromTableLabel: focusedSubTablesData.mainTable,
+                fromColumn: subTable.leftColumn || 'id',
+                fromColumnLabel: fromColumnLabel,
+                toColumn: subTable.foreignKey || '',
+                toColumnLabel: toColumnLabel,
+                relationType: 'filter',
+              });
+            }
+          });
+          
+          // 메인 테이블인 경우: 이 테이블이 필터 소스로 사용되는 정보 추가
+          if (isFocusedTable) {
+            focusedSubTablesData.subTables.forEach((subTable) => {
+              if (subTable.relationType === 'rightPanelRelation' && subTable.leftColumn) {
+                // 메인 테이블의 컬럼 한글명 조회
+                const mainTableCols = tableColumns[focusedSubTablesData.mainTable] || [];
+                const fromColInfo = mainTableCols.find(c => c.columnName === subTable.leftColumn);
+                const fromColumnLabel = fromColInfo?.displayName || subTable.leftColumn || 'id';
+                
+                // 서브 테이블의 컬럼 한글명 조회
+                const subTableCols = tableColumns[subTable.tableName] || [];
+                const toColInfo = subTableCols.find(c => c.columnName === subTable.foreignKey);
+                const toColumnLabel = toColInfo?.displayName || subTable.foreignKey || '';
+                
+                // 메인 테이블 입장: "내 컬럼이 서브 테이블의 필터 소스로 사용됨"
+                focusedReferencedBy.push({
+                  fromTable: focusedSubTablesData.mainTable,
+                  fromTableLabel: focusedSubTablesData.mainTable,
+                  fromColumn: subTable.leftColumn,
+                  fromColumnLabel: fromColumnLabel,
+                  toColumn: subTable.foreignKey || '',
+                  toColumnLabel: toColumnLabel,
+                  relationType: 'filter',
+                });
+              }
+            });
+          }
+          
+          // 포커싱된 화면 기준 저장 정보 추출
+          if (focusedSubTablesData.saveTables) {
+            focusedSubTablesData.saveTables.forEach((st) => {
+              if (st.tableName === tableName) {
+                focusedSaveInfos.push({
+                  saveType: st.saveType,
+                  componentType: st.componentType,
+                  isMainTable: st.isMainTable,
+                  sourceScreenId: focusedSubTablesData.screenId,
+                });
+              }
+            });
+          }
+        }
+        
+        return {
+          ...node,
+          data: {
+            ...node.data,
+            isFocused: isFocusedTable,
+            isRelated: isRelatedTable,
+            isFaded: focusedScreenId !== null && !isActiveTable,
+            highlightedColumns: isActiveTable ? highlightedColumns : [],
+            joinColumns: isActiveTable ? joinColumns : [],
+            joinColumnRefs: focusedJoinColumnRefs.length > 0 ? focusedJoinColumnRefs : undefined,  // 조인 컬럼 참조 정보
+            filterColumns: focusedFilterColumns,  // 포커스 상태에서만 표시
+            referencedBy: focusedReferencedBy.length > 0 ? focusedReferencedBy : undefined,  // 포커스 상태에서만 표시
+            saveInfos: focusedSaveInfos.length > 0 ? focusedSaveInfos : undefined,  // 포커스 상태에서만 표시
+            fieldMappings: isFocusedTable ? mainTableFieldMappings : (isRelatedTable ? relatedTableFieldMappings : []),
+          },
+        };
+      }
+      
+      // 서브 테이블 노드 스타일링 
+      // 기본: 흐리게, 포커스된 화면의 서브 테이블만 활성화
+      if (node.id.startsWith("subtable-")) {
+        const subTableName = node.id.replace("subtable-", "");
+        const isActiveSubTable = focusedSubTables.includes(subTableName);
+        
+        // 조인 컬럼 추출 (서브 테이블 측의 컬럼)
+        // relationType에 따라 다름:
+        // - reference: targetField가 서브테이블 컬럼 (예: manager_id -> user_id)
+        // - lookup 등: sourceField가 서브테이블 컬럼
+        let subTableJoinColumns: string[] = [];
+        if (isActiveSubTable && focusedSubTablesData) {
+          const subTableInfo = focusedSubTablesData.subTables.find(st => st.tableName === subTableName);
+          if (subTableInfo?.fieldMappings) {
+            subTableInfo.fieldMappings.forEach((mapping) => {
+              // reference, source, parentMapping, rightPanelRelation 타입: targetField가 서브테이블의 컬럼 (조인 키)
+              // lookup 타입: sourceField가 서브테이블의 컬럼
+              if (subTableInfo.relationType === 'reference' || subTableInfo.relationType === 'source' ||
+                  subTableInfo.relationType === 'parentMapping' || subTableInfo.relationType === 'rightPanelRelation') {
+                // reference, source, parentMapping, rightPanelRelation: 메인테이블 컬럼(sourceField) -> 서브테이블 컬럼(targetField)
+                if (mapping.targetField && !subTableJoinColumns.includes(mapping.targetField)) {
+                  subTableJoinColumns.push(mapping.targetField);
+                }
+              } else {
+                // lookup 등: sourceField가 서브테이블 컬럼
+                if (mapping.sourceField && !subTableJoinColumns.includes(mapping.sourceField)) {
+                  subTableJoinColumns.push(mapping.sourceField);
+                }
+              }
+            });
+          }
+          
+          // 디버깅 로그
+          console.log(`서브테이블 ${subTableName} (${subTableInfo?.relationType}):`, {
+            fieldMappings: subTableInfo?.fieldMappings,
+            extractedJoinColumns: subTableJoinColumns
+          });
+        }
+        
+        // 서브 테이블의 highlightedColumns도 추가 (화면에서 서브테이블 컬럼을 직접 사용하는 경우)
+        // joinColumns와 별개로 표시 (조인 키 외 사용 컬럼)
+        const subTableHighlightedColumns: string[] = [];
+        
+        // 필드 매핑 정보 추출 (조인 관계 표시용)
+        // reference, source, parentMapping, rightPanelRelation 타입: sourceField = 메인테이블 컬럼, targetField = 서브테이블 컬럼
+        // lookup 타입: sourceField = 서브테이블 컬럼, targetField = 메인테이블 컬럼 (swap 필요)
+        let displayFieldMappings: Array<{ sourceField: string; targetField: string; sourceDisplayName?: string; targetDisplayName?: string }> = [];
+        
+        // 포커싱된 화면 기준 저장 정보 (서브 테이블)
+        let subTableSaveInfos: Array<{ saveType: string; componentType: string; isMainTable: boolean; sourceScreenId?: number }> = [];
+        
+        if (isActiveSubTable && focusedSubTablesData) {
+          const subTableInfo = focusedSubTablesData.subTables.find(st => st.tableName === subTableName);
+          if (subTableInfo?.fieldMappings) {
+            displayFieldMappings = subTableInfo.fieldMappings.map((mapping) => {
+              if (subTableInfo.relationType === 'reference' || subTableInfo.relationType === 'source' ||
+                  subTableInfo.relationType === 'parentMapping' || subTableInfo.relationType === 'rightPanelRelation') {
+                // reference, source, parentMapping, rightPanelRelation: 백엔드에서 sourceField = 메인테이블, targetField = 서브테이블
+                // 표시: 서브테이블 컬럼(targetField) ← 메인테이블 한글명(sourceDisplayName)
+                return {
+                  sourceField: mapping.sourceField,          // 메인 테이블 컬럼 (참조)
+                  targetField: mapping.targetField,          // 서브 테이블 컬럼 (표시)
+                  sourceDisplayName: mapping.sourceDisplayName || mapping.sourceField, // 메인 테이블 한글명
+                  targetDisplayName: mapping.targetDisplayName || mapping.targetField,
+                };
+              } else {
+                // lookup 등: 백엔드 fieldMappings가 reference/source와 반대
+                // 백엔드: sourceField = 서브테이블 컬럼, targetField = 메인테이블 컬럼
+                // 프론트엔드 표시: 서브테이블 컬럼(sourceField) ← 메인테이블 컬럼(targetField)
+                // 그래서 swap 필요!
+                return {
+                  sourceField: mapping.targetField,          // 메인 테이블 컬럼 (참조)
+                  targetField: mapping.sourceField,          // 서브 테이블 컬럼 (표시)
+                  sourceDisplayName: mapping.targetDisplayName || mapping.targetField, // 메인 테이블 한글명
+                  targetDisplayName: mapping.sourceDisplayName || mapping.sourceField, // 서브 테이블 한글명
+                };
+              }
+            });
+          }
+          
+          // 서브 테이블에 대한 저장 정보 추출
+          if (focusedSubTablesData.saveTables) {
+            focusedSubTablesData.saveTables.forEach((st) => {
+              if (st.tableName === subTableName) {
+                subTableSaveInfos.push({
+                  saveType: st.saveType,
+                  componentType: st.componentType,
+                  isMainTable: st.isMainTable,
+                  sourceScreenId: focusedSubTablesData.screenId,
+                });
+              }
+            });
+          }
+        }
+        
+        return {
+          ...node,
+          style: {
+            ...node.style,
+            opacity: isActiveSubTable ? 1 : 0.3,
+            filter: isActiveSubTable ? "none" : "grayscale(80%)",
+          },
+          data: {
+            ...node.data,
+            isFocused: isActiveSubTable,
+            isFaded: !isActiveSubTable,
+            highlightedColumns: isActiveSubTable ? subTableHighlightedColumns : [],
+            joinColumns: isActiveSubTable ? subTableJoinColumns : [],
+            fieldMappings: isActiveSubTable ? displayFieldMappings : [],
+            saveInfos: subTableSaveInfos.length > 0 ? subTableSaveInfos : undefined,  // 포커스 상태에서만 표시
+          },
+        };
+      }
+      
       return node;
     });
-  }, [nodes, selectedGroup, focusedScreenId]);
+  }, [nodes, selectedGroup, focusedScreenId, screenSubTableMap, subTablesDataMap, screenUsedColumnsMap, screenTableMap, tableColumns]);
   
   // 포커스에 따른 엣지 스타일링 (그룹 모드 & 개별 화면 모드)
   const styledEdges = React.useMemo(() => {
@@ -676,12 +1874,104 @@ function ScreenRelationFlowInner({ screen, selectedGroup, initialFocusedScreenId
       });
     }
     
-    // 그룹 모드: 포커스된 화면이 없으면 원본 반환
-    if (!selectedGroup || focusedScreenId === null) return edges;
+    // 그룹 모드가 아니면 원본 반환
+    if (!selectedGroup) return edges;
     
-    return edges.map((edge) => {
+    // 연관 테이블 간 조인 엣지 생성 (메인 테이블 간 조인 관계)
+    const joinEdges: Edge[] = [];
+    
+    if (focusedScreenId !== null) {
+      const focusedSubTablesData = subTablesDataMap[focusedScreenId];
+      const focusedMainTable = screenTableMap[focusedScreenId];
+      
+      // 모든 화면의 메인 테이블 목록 (메인-메인 조인 판단용)
+      const allMainTables = new Set(Object.values(screenTableMap));
+      
+      // 이미 추가된 테이블 쌍 추적 (중복 방지)
+      const addedPairs = new Set<string>();
+      
+      if (focusedSubTablesData) {
+        focusedSubTablesData.subTables.forEach((subTable) => {
+          // 1. subTable.tableName이 다른 화면의 메인 테이블인 경우 (메인-메인 조인)
+          const isTargetMainTable = allMainTables.has(subTable.tableName) && subTable.tableName !== focusedMainTable;
+          
+          if (isTargetMainTable) {
+            const pairKey = `${subTable.tableName}-${focusedMainTable}`;
+            if (addedPairs.has(pairKey)) return;
+            addedPairs.add(pairKey);
+            
+            // 메인 테이블 간 조인 연결선 - edge-main-main 스타일 업데이트만 수행
+            // 별도의 edge-main-join을 생성하지 않고, styledEdges에서 edge-main-main을 강조 처리
+          }
+          
+          // 2. fieldMappings.sourceTable이 있는 경우 (parentMapping, rightPanelRelation 등)
+          if (subTable.fieldMappings) {
+            subTable.fieldMappings.forEach((mapping: any) => {
+              const sourceTable = mapping.sourceTable;
+              if (!sourceTable) return;
+              
+              // sourceTable이 메인 테이블인 경우만 메인-메인 조인선 추가
+              if (!allMainTables.has(sourceTable) || sourceTable === focusedMainTable) return;
+              
+              const pairKey = `${sourceTable}-${focusedMainTable}`;
+              if (addedPairs.has(pairKey)) return;
+              addedPairs.add(pairKey);
+              
+              const edgeId = `edge-join-relation-${focusedScreenId}-${sourceTable}-${focusedMainTable}`;
+              const sourceNodeId = `table-${sourceTable}`;
+              const targetNodeId = `table-${focusedMainTable}`;
+              
+              // 이미 존재하는 엣지인지 확인
+              if (joinEdges.some(e => e.id === edgeId)) return;
+              
+              // 관계 유형 추론 및 색상 결정
+              const visualRelationType = inferVisualRelationType(subTable as SubTableInfo);
+              
+              // 방안 C: 필터 관계는 선 없이 뱃지로만 표시 (겹침 방지)
+              if (visualRelationType === 'filter') {
+                return; // 필터선 생성 건너뛰기
+              }
+              
+              const relationColor = RELATION_COLORS[visualRelationType];
+              
+              joinEdges.push({
+                id: edgeId,
+                source: sourceNodeId,
+                target: targetNodeId,
+                sourceHandle: 'bottom',         // 고정: 서브테이블 구간 통과
+                targetHandle: 'bottom_target',  // 고정: 서브테이블 구간 통과
+                type: 'smoothstep',
+                animated: true,
+                style: {
+                  stroke: relationColor.stroke,  // 관계 유형별 색상
+                  strokeWidth: 2,
+                  strokeDasharray: '8,4',
+                },
+                markerEnd: {
+                  type: MarkerType.ArrowClosed,
+                  color: relationColor.stroke,
+                  width: 15,
+                  height: 15,
+                },
+                data: {
+                  visualRelationType,
+                },
+              });
+            });
+          }
+        });
+      }
+    }
+    
+    // 기존 엣지 스타일링 + 조인 엣지 추가
+    const styledOriginalEdges = edges.map((edge) => {
       // 화면 간 연결선 (1, 2, 3 라벨)
       if (edge.source.startsWith("screen-") && edge.target.startsWith("screen-")) {
+        // 포커스가 없으면 모든 화면 간 연결선 정상 표시
+        if (focusedScreenId === null) {
+          return edge; // 원본 그대로
+        }
+        
         // 포커스된 화면과 연결된 화면 간 선만 활성화
         const sourceId = parseInt(edge.source.replace("screen-", ""));
         const targetId = parseInt(edge.target.replace("screen-", ""));
@@ -704,6 +1994,44 @@ function ScreenRelationFlowInner({ screen, selectedGroup, initialFocusedScreenId
         const sourceId = parseInt(edge.source.replace("screen-", ""));
         const isMyConnection = sourceId === focusedScreenId;
         
+        // 필터 연결선 (edge-screen-filter-)은 포커싱 시에만 표시
+        const isFilterEdge = edge.id.startsWith("edge-screen-filter-");
+        
+        if (isFilterEdge) {
+          // 포커스가 없거나 다른 화면 포커스 시 숨김
+          if (focusedScreenId === null || !isMyConnection) {
+            return {
+              ...edge,
+              animated: false,
+              style: {
+                ...edge.style,
+                stroke: "transparent",
+                strokeWidth: 0,
+                opacity: 0,
+              },
+            };
+          }
+          
+          // 포커싱된 화면의 필터 연결선은 표시
+          return {
+            ...edge,
+            animated: true,
+            style: {
+              ...edge.style,
+              stroke: "#3b82f6",
+              strokeWidth: 2,
+              strokeDasharray: "5,5",
+              opacity: 1,
+            },
+          };
+        }
+        
+        // 메인 테이블 연결선 (edge-screen-table-)은 기존 로직
+        // 포커스가 없으면 모든 화면-테이블 연결선 정상 표시
+        if (focusedScreenId === null) {
+          return edge; // 원본 그대로
+        }
+        
         return {
           ...edge,
           animated: isMyConnection,
@@ -717,9 +2045,199 @@ function ScreenRelationFlowInner({ screen, selectedGroup, initialFocusedScreenId
         };
       }
       
+      // 메인 테이블 → 서브 테이블 연결선 (메인-메인과 동일한 스타일)
+      // 규격: bottom → top 고정 (아래로 문어발처럼 뻗어나감)
+      if (edge.source.startsWith("table-") && edge.target.startsWith("subtable-")) {
+        // 관계 유형별 색상 결정
+        const visualRelationType = (edge.data as any)?.visualRelationType as VisualRelationType || 'join';
+        const relationColor = RELATION_COLORS[visualRelationType];
+        
+        // 포커스가 없으면 모든 서브 테이블 연결선 흐리게 (기본 상태)
+        if (focusedScreenId === null) {
+          return {
+            ...edge,
+            sourceHandle: "bottom",
+            targetHandle: "top",
+            animated: false,
+            style: {
+              ...edge.style,
+              stroke: relationColor.strokeLight,
+              strokeWidth: 1.5,
+              strokeDasharray: "8,4",
+              opacity: 0.4,
+            },
+            markerEnd: {
+              type: MarkerType.ArrowClosed,
+              color: relationColor.strokeLight,
+            },
+          };
+        }
+        
+        // 엣지 ID에서 화면 ID 추출: edge-main-sub-{screenId}-{mainTable}-{subTable}
+        const idParts = edge.id.split("-");
+        const edgeScreenId = idParts.length >= 4 ? parseInt(idParts[3]) : null;
+        
+        // 포커스된 화면의 서브 테이블 연결인지 확인
+        const isMySubTable = edgeScreenId === focusedScreenId;
+        
+        // 대체 방법: screenSubTableMap 사용
+        const focusedSubTables = focusedScreenId ? screenSubTableMap[focusedScreenId] || [] : [];
+        const subTableName = edge.target.replace("subtable-", "");
+        const isMySubTableByMap = focusedSubTables.includes(subTableName);
+        
+        const isActive = isMySubTable || isMySubTableByMap;
+        
+        return {
+          ...edge,
+          sourceHandle: "bottom",
+          targetHandle: "top",
+          animated: isActive,
+          style: {
+            ...edge.style,
+            stroke: isActive ? relationColor.stroke : relationColor.strokeLight,
+            strokeWidth: isActive ? 2.5 : 1.5,
+            strokeDasharray: "8,4",
+            opacity: isActive ? 1 : 0.3,
+          },
+          markerEnd: {
+            type: MarkerType.ArrowClosed,
+            color: isActive ? relationColor.stroke : relationColor.strokeLight,
+          },
+        };
+      }
+      
+      // 필터 조인 엣지 (필터 대상 테이블 → 조인 참조 테이블)
+      // 규격: 해당 화면이 포커싱됐을 때만 활성화
+      if (edge.id.startsWith("edge-filter-join-")) {
+        const edgeSourceScreenId = (edge.data as any)?.sourceScreenId;
+        
+        // 포커스가 없으면 흐리게 표시
+        if (focusedScreenId === null) {
+          return {
+            ...edge,
+            animated: false,
+            style: {
+              ...edge.style,
+              stroke: RELATION_COLORS.join.strokeLight,
+              strokeWidth: 1.5,
+              strokeDasharray: "6,4",
+              opacity: 0.3,
+            },
+            markerEnd: {
+              type: MarkerType.ArrowClosed,
+              color: RELATION_COLORS.join.strokeLight,
+            },
+          };
+        }
+        
+        // 포커스된 화면과 일치하는지 확인
+        const isMyConnection = edgeSourceScreenId === focusedScreenId;
+        
+        if (!isMyConnection) {
+          // 다른 화면의 필터 조인 엣지는 숨김
+          return {
+            ...edge,
+            hidden: true,
+          };
+        }
+        
+        // 내 화면의 필터 조인 엣지는 활성화
+        return {
+          ...edge,
+          animated: true,
+          style: {
+            ...edge.style,
+            stroke: RELATION_COLORS.join.stroke,
+            strokeWidth: 2,
+            strokeDasharray: "6,4",
+            opacity: 1,
+          },
+          markerEnd: {
+            type: MarkerType.ArrowClosed,
+            color: RELATION_COLORS.join.stroke,
+          },
+        };
+      }
+      
+      // 메인 테이블 → 메인 테이블 연결선 (서브테이블 구간 통과)
+      // 규격: bottom → bottom_target 고정 (아래쪽 서브테이블 선 구간을 통해 연결)
+      // edge-main-main-*, edge-join-db-* 모두 동일한 스타일 적용
+      const isMainToMainJoin = edge.source.startsWith("table-") && 
+                               edge.target.startsWith("table-") && 
+                               (edge.id.startsWith("edge-main-main-") || edge.id.startsWith("edge-join-db-"));
+      if (isMainToMainJoin) {
+        // 관계 유형별 색상 결정
+        const visualRelationType = (edge.data as any)?.visualRelationType as VisualRelationType || 'join';
+        const relationColor = RELATION_COLORS[visualRelationType];
+        
+        if (focusedScreenId === null) {
+          // 포커스 없으면 관계 유형별 연한 색상으로 표시
+          return {
+            ...edge,
+            sourceHandle: "bottom",
+            targetHandle: "bottom_target",
+            animated: false,
+            style: {
+              ...edge.style,
+              stroke: relationColor.strokeLight,
+              strokeWidth: 1.5,
+              strokeDasharray: "8,4",
+              opacity: 0.4,
+            },
+          };
+        }
+        
+        // 포커스된 화면에서 생성된 연결선만 표시
+        const edgeSourceScreenId = (edge.data as any)?.sourceScreenId;
+        const isMyConnection = edgeSourceScreenId === focusedScreenId;
+        
+        // 포커스된 화면과 관련 없는 메인-메인 엣지는 숨김
+        if (!isMyConnection) {
+          return {
+            ...edge,
+            hidden: true,
+          };
+        }
+        
+        return {
+          ...edge,
+          sourceHandle: "bottom",          // 고정: 서브테이블 구간 통과
+          targetHandle: "bottom_target",   // 고정: 서브테이블 구간 통과
+          animated: true,
+          style: {
+            ...edge.style,
+            stroke: relationColor.stroke,  // 관계 유형별 진한 색상
+            strokeWidth: 2.5,
+            strokeDasharray: "8,4",
+            opacity: 1,
+          },
+          markerEnd: {
+            type: MarkerType.ArrowClosed,
+            color: relationColor.stroke,
+            width: 15,
+            height: 15,
+          },
+        };
+      }
+      
       return edge;
     });
-  }, [edges, selectedGroup, focusedScreenId, screen]);
+    
+    // 기존 엣지 + 조인 관계 엣지 합치기
+    return [...styledOriginalEdges, ...joinEdges];
+  }, [edges, nodes, selectedGroup, focusedScreenId, screen, screenSubTableMap, subTablesDataMap, screenTableMap]);
+
+  // 그룹의 화면 목록 (데이터 흐름 설정용) - 모든 조건부 return 전에 선언해야 함
+  const groupScreensList = React.useMemo(() => {
+    if (!selectedGroup) return [];
+    // nodes에서 screen- 으로 시작하는 노드들 추출
+    return nodes
+      .filter(n => n.id.startsWith("screen-"))
+      .map(n => ({
+        screen_id: parseInt(n.id.replace("screen-", "")),
+        screen_name: (n.data as ScreenNodeData).label || `화면 ${n.id}`,
+      }));
+  }, [selectedGroup, nodes]);
 
   // 조건부 렌더링 (모든 훅 선언 후에 위치해야 함)
   if (!screen && !selectedGroup) {
@@ -743,22 +2261,58 @@ function ScreenRelationFlowInner({ screen, selectedGroup, initialFocusedScreenId
 
   return (
     <div className="h-full w-full">
+      {/* isViewReady가 false면 숨김 처리하여 깜빡임 방지 */}
+      <div className={`h-full w-full transition-opacity duration-0 ${isViewReady ? "opacity-100" : "opacity-0"}`}>
       <ReactFlow
-        nodes={styledNodes}
-        edges={styledEdges}
+          nodes={styledNodes}
+          edges={styledEdges}
         onNodesChange={onNodesChange}
         onEdgesChange={onEdgesChange}
-        onNodeClick={handleNodeClick}
+          onNodeClick={handleNodeClick}
+          onNodeContextMenu={handleNodeContextMenu}
         nodeTypes={nodeTypes}
-        fitView
-        fitViewOptions={{ padding: 0.2 }}
         minZoom={0.3}
         maxZoom={1.5}
         proOptions={{ hideAttribution: true }}
       >
-        <Background variant={BackgroundVariant.Dots} gap={20} size={1} color="#e2e8f0" />
+          <Background variant={BackgroundVariant.Dots} gap={20} size={1} color="#e2e8f0" />
         <Controls position="bottom-right" />
       </ReactFlow>
+      </div>
+      
+      {/* 화면 노드 설정 모달 */}
+      {settingModalNode && settingModalNode.nodeType === "screen" && (
+        <ScreenSettingModal
+          isOpen={isSettingModalOpen}
+          onClose={handleSettingModalClose}
+          screenId={settingModalNode.screenId}
+          screenName={settingModalNode.screenName}
+          groupId={selectedGroup?.id}
+          companyCode={settingModalNode.companyCode}
+          mainTable={settingModalNode.existingConfig?.mainTable}
+          mainTableLabel={settingModalNode.tableLabel}
+          filterTables={settingModalNode.existingConfig?.filterTables}
+          fieldMappings={settingModalNode.existingConfig?.fieldMappings}
+          componentCount={0}
+          onSaveSuccess={handleRefreshVisualization}
+        />
+      )}
+      
+      {/* 테이블 노드 설정 모달 */}
+      {settingModalNode && settingModalNode.nodeType === "table" && (
+        <TableSettingModal
+          isOpen={isSettingModalOpen}
+          onClose={handleSettingModalClose}
+          tableName={settingModalNode.tableName || ""}
+          tableLabel={settingModalNode.tableLabel}
+          screenId={settingModalNode.screenId}
+          joinColumnRefs={settingModalNode.existingConfig?.joinColumnRefs}
+          referencedBy={settingModalNode.existingConfig?.referencedBy}
+          columns={settingModalNode.existingConfig?.columns}
+          filterColumns={settingModalNode.existingConfig?.filterColumns}
+          onSaveSuccess={handleRefreshVisualization}
+        />
+      )}
     </div>
   );
 }
diff --git a/frontend/components/screen/ScreenSettingModal.tsx b/frontend/components/screen/ScreenSettingModal.tsx
new file mode 100644
index 00000000..c7373e5c
--- /dev/null
+++ b/frontend/components/screen/ScreenSettingModal.tsx
@@ -0,0 +1,4837 @@
+"use client";
+
+import React, { useState, useEffect, useCallback, useMemo, useRef } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Badge } from "@/components/ui/badge";
+import { Textarea } from "@/components/ui/textarea";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+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 {
+  Database,
+  Link2,
+  GitBranch,
+  Columns3,
+  Eye,
+  Save,
+  Plus,
+  Minus,
+  Pencil,
+  Trash2,
+  RefreshCw,
+  Loader2,
+  Check,
+  ChevronsUpDown,
+  ExternalLink,
+  Table2,
+  ArrowRight,
+  Settings2,
+  ChevronDown,
+  ChevronRight,
+  Filter,
+  RotateCcw,
+  X,
+  Zap,
+  MousePointer,
+  Workflow,
+} from "lucide-react";
+import {
+  getDataFlows,
+  createDataFlow,
+  updateDataFlow,
+  deleteDataFlow,
+  DataFlow,
+  getMultipleScreenLayoutSummary,
+  LayoutItem,
+  getScreenGroup,
+} from "@/lib/api/screenGroup";
+import { tableManagementApi, ColumnTypeInfo, TableInfo, ColumnSettings } from "@/lib/api/tableManagement";
+import { screenApi } from "@/lib/api/screen";
+import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch";
+import { getNodeFlows, createNodeFlow, NodeFlow } from "@/lib/api/nodeFlows";
+import { FlowEditor } from "@/components/dataflow/node-editor/FlowEditor";
+import ScreenDesigner from "@/components/screen/ScreenDesigner";
+import { TableSettingModal } from "@/components/screen/TableSettingModal";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+
+// ============================================================
+// 타입 정의
+// ============================================================
+
+interface FilterTableInfo {
+  tableName: string;
+  tableLabel?: string;
+  filterColumns?: string[];
+  // 필터 키 매핑 정보 (메인 테이블.컬럼 → 필터 테이블.컬럼)
+  filterKeyMapping?: {
+    mainTableColumn: string;      // 메인 테이블의 컬럼 (leftColumn)
+    mainTableColumnLabel?: string;
+    filterTableColumn: string;    // 필터 테이블의 컬럼 (foreignKey)
+    filterTableColumnLabel?: string;
+  };
+  joinColumnRefs?: Array<{
+    column: string;
+    refTable: string;
+    refTableLabel?: string;
+    refColumn: string;
+  }>;
+}
+
+interface FieldMappingInfo {
+  targetField: string;
+  sourceField: string;
+  sourceTable?: string;
+  sourceDisplayName?: string;
+  componentType?: string;
+}
+
+interface ScreenSettingModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  screenId: number;
+  screenName: string;
+  groupId?: number;
+  companyCode?: string; // 프리뷰용 회사 코드
+  mainTable?: string;
+  mainTableLabel?: string;
+  filterTables?: FilterTableInfo[];
+  fieldMappings?: FieldMappingInfo[];
+  componentCount?: number;
+  onSaveSuccess?: () => void;
+}
+
+// 검색 가능한 Select 컴포넌트
+interface SearchableSelectProps {
+  value: string;
+  onValueChange: (value: string) => void;
+  options: Array<{ value: string; label: string; description?: string }>;
+  placeholder?: string;
+  disabled?: boolean;
+  className?: string;
+}
+
+function SearchableSelect({
+  value,
+  onValueChange,
+  options,
+  placeholder = "선택...",
+  disabled = false,
+  className,
+}: SearchableSelectProps) {
+  const [open, setOpen] = useState(false);
+
+  const selectedOption = options.find((opt) => opt.value === value);
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          role="combobox"
+          aria-expanded={open}
+          disabled={disabled}
+          className={cn("h-8 w-full justify-between text-xs", className)}
+        >
+          {selectedOption ? (
+            <span className="truncate">{selectedOption.label}</span>
+          ) : (
+            <span className="text-muted-foreground">{placeholder}</span>
+          )}
+          <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" />
+          <CommandList>
+            <CommandEmpty className="py-2 text-center text-xs">
+              결과 없음
+            </CommandEmpty>
+            <CommandGroup>
+              {options.map((option) => (
+                <CommandItem
+                  key={option.value}
+                  value={option.value}
+                  onSelect={() => {
+                    onValueChange(option.value);
+                    setOpen(false);
+                  }}
+                  className="text-xs"
+                >
+                  <Check
+                    className={cn(
+                      "mr-2 h-4 w-4",
+                      value === option.value ? "opacity-100" : "opacity-0"
+                    )}
+                  />
+                  <div className="flex flex-col">
+                    <span>{option.label}</span>
+                    {option.description && (
+                      <span className="text-muted-foreground text-[10px]">
+                        {option.description}
+                      </span>
+                    )}
+                  </div>
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+// ============================================================
+// 메인 모달 컴포넌트
+// ============================================================
+
+export function ScreenSettingModal({
+  isOpen,
+  onClose,
+  screenId,
+  screenName,
+  groupId,
+  companyCode,
+  mainTable,
+  mainTableLabel,
+  filterTables = [],
+  fieldMappings = [],
+  componentCount = 0,
+  onSaveSuccess,
+}: ScreenSettingModalProps) {
+  const [activeTab, setActiveTab] = useState("overview");
+  const [loading, setLoading] = useState(false);
+  const [dataFlows, setDataFlows] = useState<DataFlow[]>([]);
+  const [layoutItems, setLayoutItems] = useState<LayoutItem[]>([]);
+  const [iframeKey, setIframeKey] = useState(0); // iframe 새로고침용 키
+  const [canvasSize, setCanvasSize] = useState({ width: 0, height: 0 }); // 화면 캔버스 크기
+  const [showDesignerModal, setShowDesignerModal] = useState(false); // 화면 디자이너 모달
+  const [showTableSettingModal, setShowTableSettingModal] = useState(false); // 테이블 설정 모달
+  const [tableSettingTarget, setTableSettingTarget] = useState<{ tableName: string; tableLabel?: string } | null>(null);
+  
+  // 그룹 내 화면 목록 및 현재 선택된 화면
+  const [groupScreens, setGroupScreens] = useState<Array<{
+    screen_id: number;
+    screen_name: string;
+    screen_role?: string;
+    display_order?: number;
+    table_name?: string;
+  }>>([]);
+  const [currentScreenId, setCurrentScreenId] = useState(screenId);
+  const [currentScreenName, setCurrentScreenName] = useState(screenName);
+  const [currentMainTable, setCurrentMainTable] = useState(mainTable);
+  const [currentMainTableLabel, setCurrentMainTableLabel] = useState(mainTableLabel);
+
+  // 그룹 내 화면 목록 로드
+  const loadGroupScreens = useCallback(async () => {
+    if (!groupId) return;
+    
+    try {
+      const groupRes = await getScreenGroup(groupId);
+      if (groupRes.success && groupRes.data) {
+        const groupData = groupRes.data as any;
+        const screens = groupData.screens || [];
+        // display_order 순으로 정렬
+        screens.sort((a: any, b: any) => (a.display_order || 0) - (b.display_order || 0));
+        setGroupScreens(screens);
+      }
+    } catch (error) {
+      console.error("그룹 화면 목록 로드 실패:", error);
+    }
+  }, [groupId]);
+
+  // 화면 선택 변경 핸들러
+  const handleScreenChange = useCallback(async (newScreenId: number) => {
+    const selectedScreen = groupScreens.find(s => s.screen_id === newScreenId);
+    if (!selectedScreen) return;
+    
+    setCurrentScreenId(newScreenId);
+    setCurrentScreenName(selectedScreen.screen_name);
+    setCurrentMainTable(selectedScreen.table_name);
+    // 테이블 라벨은 별도 조회 필요 (일단 테이블명 사용)
+    setCurrentMainTableLabel(selectedScreen.table_name);
+    setIframeKey(prev => prev + 1); // iframe 새로고침
+  }, [groupScreens]);
+
+  // 테이블 설정 모달 열기 핸들러
+  const handleOpenTableSetting = useCallback((tableName: string, tableLabel?: string) => {
+    setTableSettingTarget({ tableName, tableLabel });
+    setShowTableSettingModal(true);
+  }, []);
+
+  // 테이블 설정 모달 닫기 핸들러
+  const handleCloseTableSetting = useCallback(() => {
+    setShowTableSettingModal(false);
+    setTableSettingTarget(null);
+  }, []);
+
+  // 초기 로드 시 그룹 화면 목록도 로드
+  useEffect(() => {
+    if (isOpen && groupId) {
+      loadGroupScreens();
+    }
+  }, [isOpen, groupId, loadGroupScreens]);
+
+  // props 변경 시 현재 화면 상태 업데이트
+  useEffect(() => {
+    setCurrentScreenId(screenId);
+    setCurrentScreenName(screenName);
+    setCurrentMainTable(mainTable);
+    setCurrentMainTableLabel(mainTableLabel);
+  }, [screenId, screenName, mainTable, mainTableLabel]);
+
+  // 데이터 로드
+  const loadData = useCallback(async () => {
+    if (!currentScreenId) return;
+
+    setLoading(true);
+    try {
+      // 1. 해당 화면에서 시작하는 데이터 흐름 로드
+      const flowsResponse = await getDataFlows({ sourceScreenId: currentScreenId });
+      if (flowsResponse.success && flowsResponse.data) {
+        setDataFlows(flowsResponse.data);
+      }
+
+      // 2. 화면 레이아웃 요약 정보 로드 (컴포넌트 컬럼 정보 포함)
+      const layoutResponse = await getMultipleScreenLayoutSummary([currentScreenId]);
+      if (layoutResponse.success && layoutResponse.data) {
+        const screenLayout = layoutResponse.data[currentScreenId];
+        setLayoutItems(screenLayout?.layoutItems || []);
+        // 캔버스 크기 저장 (화면 프리뷰에 사용)
+        setCanvasSize({
+          width: screenLayout?.canvasWidth || 0,
+          height: screenLayout?.canvasHeight || 0,
+        });
+      }
+    } catch (error) {
+      console.error("데이터 로드 실패:", error);
+    } finally {
+      setLoading(false);
+    }
+  }, [currentScreenId]);
+
+  useEffect(() => {
+    if (isOpen && currentScreenId) {
+      loadData();
+    }
+  }, [isOpen, currentScreenId, loadData]);
+
+  // 새로고침 (데이터 + iframe)
+  const handleRefresh = useCallback(() => {
+    loadData();
+    setIframeKey(prev => prev + 1); // iframe 새로고침
+  }, [loadData]);
+
+  return (
+    <>
+    <Dialog open={isOpen} onOpenChange={onClose}>
+      <DialogContent className="flex h-[90vh] max-h-[950px] w-[98vw] max-w-[1600px] flex-col">
+        <DialogHeader className="flex-shrink-0">
+          <DialogTitle className="flex items-center gap-2 text-lg">
+            <Settings2 className="h-5 w-5 text-blue-500" />
+            화면 설정:
+            {groupScreens.length > 1 ? (
+              <Select
+                value={currentScreenId.toString()}
+                onValueChange={(value) => handleScreenChange(parseInt(value, 10))}
+              >
+                <SelectTrigger className="h-8 w-auto min-w-[200px] max-w-[400px] text-base font-semibold">
+                  <SelectValue placeholder="화면 선택" />
+                </SelectTrigger>
+                <SelectContent>
+                  {groupScreens.map((screen) => (
+                    <SelectItem key={screen.screen_id} value={screen.screen_id.toString()}>
+                      {screen.screen_name}
+                      {screen.screen_role && (
+                        <span className="ml-2 text-xs text-muted-foreground">
+                          ({screen.screen_role})
+                        </span>
+                      )}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            ) : (
+              <span>{currentScreenName}</span>
+            )}
+          </DialogTitle>
+          <DialogDescription className="text-sm">
+            화면의 필드 매핑, 테이블 연결, 데이터 흐름을 확인하고 설정합니다.
+          </DialogDescription>
+        </DialogHeader>
+
+        {/* 2컬럼 레이아웃: 왼쪽 탭(좁게) + 오른쪽 프리뷰(넓게) */}
+        <div className="flex min-h-0 flex-1 gap-3">
+          {/* 왼쪽: 탭 컨텐츠 (40%) */}
+          <div className="flex min-h-0 w-[40%] flex-col rounded-lg border bg-white">
+            <Tabs
+              value={activeTab}
+              onValueChange={setActiveTab}
+              className="flex min-h-0 flex-1 flex-col"
+            >
+              <div className="flex flex-shrink-0 items-center justify-between border-b p-2">
+                <TabsList className="h-8">
+                  <TabsTrigger value="overview" className="gap-1 text-xs px-2">
+                    <Database className="h-3 w-3" />
+                    개요
+                  </TabsTrigger>
+                  <TabsTrigger value="control-management" className="gap-1 text-xs px-2">
+                    <Zap className="h-3 w-3" />
+                    제어 관리
+                  </TabsTrigger>
+                  <TabsTrigger value="data-flow" className="gap-1 text-xs px-2">
+                    <GitBranch className="h-3 w-3" />
+                    데이터 흐름
+                  </TabsTrigger>
+                </TabsList>
+                <div className="flex items-center gap-1">
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={handleRefresh}
+                    className="h-7 w-7 p-0"
+                    title="새로고침"
+                  >
+                    <RefreshCw className={cn("h-3.5 w-3.5", loading && "animate-spin")} />
+                  </Button>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() => setShowDesignerModal(true)}
+                    className="h-7 px-2 text-xs gap-1"
+                    title="화면 디자이너에서 상세 편집"
+                  >
+                    <ExternalLink className="h-3 w-3" />
+                    디자이너
+                  </Button>
+                </div>
+              </div>
+
+              {/* 탭 1: 화면 개요 */}
+              <TabsContent value="overview" className="mt-0 min-h-0 flex-1 overflow-auto p-3">
+                <OverviewTab
+                  screenId={currentScreenId}
+                  screenName={currentScreenName}
+                  mainTable={currentMainTable}
+                  mainTableLabel={currentMainTableLabel}
+                  filterTables={filterTables}
+                  fieldMappings={fieldMappings}
+                  componentCount={componentCount}
+                  dataFlows={dataFlows}
+                  layoutItems={layoutItems}
+                  loading={loading}
+                  onRefresh={handleRefresh}
+                  onOpenTableSetting={handleOpenTableSetting}
+                />
+              </TabsContent>
+
+              {/* 탭 2: 제어 관리 */}
+              <TabsContent value="control-management" className="mt-0 min-h-0 flex-1 overflow-auto p-3">
+                <ControlManagementTab
+                  screenId={currentScreenId}
+                  groupId={groupId}
+                  layoutItems={layoutItems}
+                  loading={loading}
+                  onRefresh={handleRefresh}
+                />
+              </TabsContent>
+
+              {/* 탭 3: 데이터 흐름 */}
+              <TabsContent value="data-flow" className="mt-0 min-h-0 flex-1 overflow-auto p-3">
+                <DataFlowTab
+                  screenId={currentScreenId}
+                  groupId={groupId}
+                  dataFlows={dataFlows}
+                  loading={loading}
+                  onReload={loadData}
+                  onSaveSuccess={onSaveSuccess}
+                />
+              </TabsContent>
+            </Tabs>
+          </div>
+
+          {/* 오른쪽: 화면 프리뷰 (60%, 항상 표시) */}
+          <div className="flex min-h-0 w-[60%] flex-col overflow-hidden rounded-lg border bg-white">
+            <PreviewTab 
+              screenId={currentScreenId} 
+              screenName={currentScreenName} 
+              companyCode={companyCode} 
+              iframeKey={iframeKey}
+              canvasWidth={canvasSize.width}
+              canvasHeight={canvasSize.height}
+            />
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+
+    {/* ScreenDesigner 전체 화면 모달 */}
+    <Dialog open={showDesignerModal} onOpenChange={setShowDesignerModal}>
+      <DialogContent className="max-w-[98vw] h-[95vh] p-0 overflow-hidden">
+        <div className="flex flex-col h-full">
+          <ScreenDesigner
+            selectedScreen={{
+              screenId: currentScreenId,
+              screenCode: `screen_${currentScreenId}`,
+              screenName: currentScreenName,
+              tableName: currentMainTable || "",
+              companyCode: companyCode || "*",
+              description: "",
+              isActive: "Y" as const,
+              createdDate: new Date(),
+              updatedDate: new Date(),
+            }}
+            onBackToList={async () => {
+              setShowDesignerModal(false);
+              // 디자이너에서 저장 후 모달 닫으면 데이터 새로고침
+              await loadData();
+              // 데이터 로드 완료 후 iframe 갱신
+              setIframeKey(prev => prev + 1);
+            }}
+          />
+        </div>
+      </DialogContent>
+    </Dialog>
+
+    {/* TableSettingModal */}
+    {tableSettingTarget && (
+      <TableSettingModal
+        isOpen={showTableSettingModal}
+        onClose={handleCloseTableSetting}
+        tableName={tableSettingTarget.tableName}
+        tableLabel={tableSettingTarget.tableLabel}
+        screenId={currentScreenId}
+        onSaveSuccess={() => {
+          handleRefresh();
+        }}
+      />
+    )}
+  </>
+  );
+}
+
+// ============================================================
+// 통합 테이블 컬럼 아코디언 컴포넌트
+// ============================================================
+
+interface ColumnMapping {
+  columnName: string;
+  fieldLabel?: string;
+  order: number; // 화면 순서 (y 좌표 기준)
+}
+
+interface JoinColumnRef {
+  column: string;
+  refTable: string;
+  refTableLabel?: string;
+  refColumn: string;
+  displayColumn?: string;
+}
+
+interface FilterKeyMapping {
+  mainTableColumn: string;
+  mainTableColumnLabel?: string;
+  filterTableColumn: string;
+  filterTableColumnLabel?: string;
+}
+
+interface TableColumnAccordionProps {
+  // 공통 props
+  tableName: string;
+  tableLabel?: string;
+  tableType: "main" | "filter"; // 테이블 타입
+  columnMappings?: ColumnMapping[];
+  onColumnChange?: (fieldLabel: string, oldColumn: string, newColumn: string) => void;
+  onColumnReorder?: (newOrder: string[]) => void; // 컬럼 순서 변경 콜백
+  onJoinSettingSaved?: () => void;
+  usedFields?: Set<string>; // 화면에서 사용 중인 컬럼 목록
+  
+  // 필터 테이블 전용 props (optional)
+  mainTable?: string; // 메인 테이블명 (필터 테이블에서 필터 연결 정보 표시용)
+  filterKeyMapping?: FilterKeyMapping;
+  joinColumnRefs?: JoinColumnRef[];
+}
+
+function TableColumnAccordion({
+  tableName,
+  tableLabel,
+  tableType,
+  columnMappings = [],
+  onColumnChange,
+  onColumnReorder,
+  onJoinSettingSaved,
+  usedFields = new Set(),
+  mainTable,
+  filterKeyMapping,
+  joinColumnRefs = [],
+}: TableColumnAccordionProps) {
+  // columnMappings를 Map으로 변환 (컬럼명 → 매핑정보)
+  const columnMappingMap = useMemo(() => {
+    const map = new Map<string, ColumnMapping>();
+    columnMappings.forEach(m => map.set(m.columnName.toLowerCase(), m));
+    return map;
+  }, [columnMappings]);
+  
+  const [isOpen, setIsOpen] = useState(false);
+  const [columns, setColumns] = useState<ColumnTypeInfo[]>([]);
+  const [loadingColumns, setLoadingColumns] = useState(false);
+  
+  // 편집 중인 필드
+  const [editingField, setEditingField] = useState<string | null>(null);
+  
+  // 조인 설정 관련 상태
+  const [allTables, setAllTables] = useState<TableInfo[]>([]);
+  const [refTableColumns, setRefTableColumns] = useState<ColumnTypeInfo[]>([]);
+  const [loadingRefColumns, setLoadingRefColumns] = useState(false);
+  const [savingJoinSetting, setSavingJoinSetting] = useState(false);
+  
+  // 조인 설정 편집 상태
+  const [editingJoin, setEditingJoin] = useState<{
+    columnName: string;
+    referenceTable: string;
+    referenceColumn: string;
+    displayColumn: string;
+  } | null>(null);
+  
+  // 드래그 앤 드롭 상태
+  const [draggedIndex, setDraggedIndex] = useState<number | null>(null);
+  const [localColumnOrder, setLocalColumnOrder] = useState<string[] | null>(null); // 드래그 중 로컬 순서
+  
+  // 스타일 설정 (테이블 타입별)
+  const isMain = tableType === "main";
+  const themeColor = isMain ? "blue" : "purple";
+  const themeIcon = isMain ? Table2 : Filter;
+  const themeBadge = isMain ? "메인" : "필터";
+  
+  // 필터 테이블용 플래그
+  const hasJoinRefs = joinColumnRefs && joinColumnRefs.length > 0;
+  const hasFilterKey = !!filterKeyMapping;
+  
+  // 정렬된 컬럼 목록
+  const sortedColumns = useMemo(() => {
+    if (columns.length === 0) return [];
+    
+    if (isMain) {
+      // 메인: 사용 중 → 안 쓰는 컬럼
+      const used: (ColumnTypeInfo & { mapping: ColumnMapping })[] = [];
+      const unused: ColumnTypeInfo[] = [];
+      
+      columns.forEach(col => {
+        const mapping = columnMappingMap.get(col.columnName.toLowerCase());
+        if (mapping) {
+          used.push({ ...col, mapping });
+        } else {
+          unused.push(col);
+        }
+      });
+      
+      used.sort((a, b) => a.mapping.order - b.mapping.order);
+      return [...used, ...unused];
+    } else {
+      // 필터: 필터키 → 조인키 → 필드 → 안 쓰는 컬럼
+      const filterKeys: ColumnTypeInfo[] = [];
+      const joinKeys: ColumnTypeInfo[] = [];
+      const fieldCols: (ColumnTypeInfo & { mapping: ColumnMapping })[] = [];
+      const unused: ColumnTypeInfo[] = [];
+      
+      columns.forEach(col => {
+        const colNameLower = col.columnName.toLowerCase();
+        const isFilterKey = filterKeyMapping?.filterTableColumn?.toLowerCase() === colNameLower;
+        const isJoinKey = joinColumnRefs?.some(j => j.column.toLowerCase() === colNameLower);
+        const mapping = columnMappingMap.get(colNameLower);
+        
+        if (isFilterKey) {
+          filterKeys.push(col);
+        } else if (isJoinKey) {
+          joinKeys.push(col);
+        } else if (mapping) {
+          fieldCols.push({ ...col, mapping });
+        } else {
+          unused.push(col);
+        }
+      });
+      
+      fieldCols.sort((a, b) => a.mapping.order - b.mapping.order);
+      return [...filterKeys, ...joinKeys, ...fieldCols, ...unused];
+    }
+  }, [columns, columnMappingMap, isMain, filterKeyMapping, joinColumnRefs]);
+
+  // 아코디언 열릴 때 테이블 컬럼 + 전체 테이블 목록 로드
+  const handleToggle = async () => {
+    const newIsOpen = !isOpen;
+    setIsOpen(newIsOpen);
+    
+    if (newIsOpen && columns.length === 0 && tableName) {
+      setLoadingColumns(true);
+      try {
+        const result = await tableManagementApi.getColumnList(tableName);
+        if (result.success && result.data && result.data.columns) {
+          setColumns(result.data.columns);
+        }
+        
+        if (allTables.length === 0) {
+          const tablesResult = await tableManagementApi.getTableList();
+          if (tablesResult.success && tablesResult.data) {
+            setAllTables(tablesResult.data);
+          }
+        }
+      } catch (error) {
+        console.error("테이블 컬럼 로드 실패:", error);
+      } finally {
+        setLoadingColumns(false);
+      }
+    }
+  };
+  
+  // 참조 테이블 선택 시 해당 테이블의 컬럼 로드
+  const loadRefTableColumns = useCallback(async (refTableName: string) => {
+    if (!refTableName) {
+      setRefTableColumns([]);
+      return;
+    }
+    
+    setLoadingRefColumns(true);
+    try {
+      const result = await tableManagementApi.getColumnList(refTableName);
+      if (result.success && result.data && result.data.columns) {
+        setRefTableColumns(result.data.columns);
+      }
+    } catch (error) {
+      console.error("참조 테이블 컬럼 로드 실패:", error);
+    } finally {
+      setLoadingRefColumns(false);
+    }
+  }, []);
+  
+  // 조인 설정 저장
+  const handleSaveJoinSetting = useCallback(async () => {
+    if (!editingJoin || !tableName) return;
+    
+    setSavingJoinSetting(true);
+    try {
+      const settings: ColumnSettings = {
+        columnLabel: columns.find(c => c.columnName === editingJoin.columnName)?.displayName || editingJoin.columnName,
+        webType: "entity",
+        detailSettings: JSON.stringify({}),
+        codeCategory: "",
+        codeValue: "",
+        referenceTable: editingJoin.referenceTable,
+        referenceColumn: editingJoin.referenceColumn,
+        displayColumn: editingJoin.displayColumn,
+      };
+      
+      const result = await tableManagementApi.updateColumnSettings(
+        tableName,
+        editingJoin.columnName,
+        settings
+      );
+      
+      if (result.success) {
+        toast.success("조인 설정이 저장되었습니다.");
+        setEditingJoin(null);
+        onJoinSettingSaved?.();
+      } else {
+        toast.error(result.message || "조인 설정 저장에 실패했습니다.");
+      }
+    } catch (error) {
+      console.error("조인 설정 저장 실패:", error);
+      toast.error("조인 설정 저장에 실패했습니다.");
+    } finally {
+      setSavingJoinSetting(false);
+    }
+  }, [editingJoin, tableName, columns, onJoinSettingSaved]);
+  
+  // 조인 설정 편집 시작
+  const startEditingJoin = useCallback((columnName: string, currentRefTable?: string, currentRefColumn?: string, currentDisplayColumn?: string) => {
+    setEditingJoin({
+      columnName,
+      referenceTable: currentRefTable || "",
+      referenceColumn: currentRefColumn || "",
+      displayColumn: currentDisplayColumn || "",
+    });
+    
+    if (currentRefTable) {
+      loadRefTableColumns(currentRefTable);
+    }
+  }, [loadRefTableColumns]);
+
+  // 드래그 앤 드롭 핸들러
+  const handleDragStart = useCallback((e: React.DragEvent, index: number) => {
+    setDraggedIndex(index);
+    e.dataTransfer.effectAllowed = "move";
+    e.dataTransfer.setData("text/plain", String(index));
+    
+    // 드래그 시작 시 현재 순서를 로컬 상태로 저장
+    const usedColumns = sortedColumns.filter(col => {
+      const colNameLower = col.columnName.toLowerCase();
+      return columnMappingMap.has(colNameLower);
+    });
+    setLocalColumnOrder(usedColumns.map(col => col.columnName));
+  }, [sortedColumns, columnMappingMap]);
+
+  const handleDragOver = useCallback((e: React.DragEvent, hoverIndex: number) => {
+    e.preventDefault();
+    e.dataTransfer.dropEffect = "move";
+    
+    if (draggedIndex === null || draggedIndex === hoverIndex || !localColumnOrder) return;
+    
+    // 사용 중인 컬럼 수 체크
+    if (hoverIndex >= localColumnOrder.length || draggedIndex >= localColumnOrder.length) return;
+    
+    // 로컬 순서만 변경 (저장하지 않음)
+    const newOrder = [...localColumnOrder];
+    const draggedItem = newOrder[draggedIndex];
+    newOrder.splice(draggedIndex, 1);
+    newOrder.splice(hoverIndex, 0, draggedItem);
+    
+    setDraggedIndex(hoverIndex);
+    setLocalColumnOrder(newOrder);
+  }, [draggedIndex, localColumnOrder]);
+
+  const handleDrop = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    
+    // 드롭 시 최종 순서로 저장
+    if (localColumnOrder && onColumnReorder) {
+      onColumnReorder(localColumnOrder);
+    }
+    
+    setDraggedIndex(null);
+    setLocalColumnOrder(null);
+  }, [localColumnOrder, onColumnReorder]);
+
+  const handleDragEnd = useCallback(() => {
+    // 드래그 취소 시 (드롭 영역 밖으로 나간 경우)
+    setDraggedIndex(null);
+    setLocalColumnOrder(null);
+  }, []);
+
+  // 컬럼의 특수 상태 확인 (필터 테이블용)
+  const getColumnState = (colNameLower: string) => {
+    const isFilterKey = filterKeyMapping?.filterTableColumn?.toLowerCase() === colNameLower;
+    const joinRef = joinColumnRefs?.find(j => j.column.toLowerCase() === colNameLower);
+    const isJoinKey = !!joinRef;
+    const mapping = columnMappingMap.get(colNameLower);
+    // usedFields에서도 확인 (bindField 등에서 가져온 사용 컬럼)
+    const isUsed = !!mapping || usedFields.has(colNameLower) || 
+      Array.from(usedFields).some(f => f.toLowerCase() === colNameLower);
+    
+    return { isFilterKey, isJoinKey, joinRef, isUsed, mapping };
+  };
+
+  const ThemeIcon = themeIcon;
+
+  return (
+    <div className={`rounded-lg border bg-${themeColor}-50/30 overflow-hidden`}>
+      {/* 헤더 */}
+      <button
+        type="button"
+        onClick={handleToggle}
+        className={`w-full flex items-center gap-3 p-3 hover:bg-${themeColor}-50/50 transition-colors text-left`}
+      >
+        {isOpen ? (
+          <ChevronDown className={`h-4 w-4 text-${themeColor}-500 flex-shrink-0`} />
+        ) : (
+          <ChevronRight className={`h-4 w-4 text-${themeColor}-500 flex-shrink-0`} />
+        )}
+        
+        <ThemeIcon className={`h-4 w-4 text-${themeColor}-500 flex-shrink-0`} />
+        
+        <div className="flex-1 min-w-0">
+          <div className="font-medium truncate">{tableLabel || tableName}</div>
+          {tableLabel && tableName !== tableLabel && (
+            <div className="text-xs text-muted-foreground truncate">{tableName}</div>
+          )}
+        </div>
+        
+        <Badge variant="outline" className={`bg-${themeColor}-100 text-${themeColor}-700 text-xs flex-shrink-0`}>
+          {themeBadge}
+        </Badge>
+        
+        {/* 요약 정보 */}
+        <div className="text-xs text-muted-foreground flex-shrink-0">
+          {isMain ? (
+            columns.length > 0 && `${columns.length}개 컬럼`
+          ) : (
+            <>
+              {hasFilterKey && `${(filterKeyMapping ? 1 : 0)}개 필터`}
+              {hasJoinRefs && hasFilterKey && " / "}
+              {hasJoinRefs && `${joinColumnRefs!.length}개 조인`}
+            </>
+          )}
+        </div>
+      </button>
+
+      {/* 펼쳐진 내용 */}
+      {isOpen && (
+        <div className={`border-t border-${themeColor}-100 p-3 space-y-3 bg-white/50`}>
+          {/* 필터 연결 정보 (필터 테이블만) */}
+          {!isMain && filterKeyMapping && (
+            <div className="flex items-center gap-1 text-xs">
+              <Badge variant="outline" className="h-4 px-1 text-[8px] bg-purple-200 text-purple-700 border-purple-300">필터</Badge>
+              <span className="font-mono text-purple-700">
+                {mainTable}.{filterKeyMapping.mainTableColumnLabel || filterKeyMapping.mainTableColumn}
+              </span>
+              <span className="text-muted-foreground">=</span>
+              <span className="font-mono text-purple-700">
+                {tableName}.{filterKeyMapping.filterTableColumnLabel || filterKeyMapping.filterTableColumn}
+              </span>
+            </div>
+          )}
+
+          {/* 테이블 컬럼 정보 */}
+          <div className="space-y-2">
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-1 text-xs font-medium text-gray-700">
+                <Table2 className="h-3 w-3" />
+                테이블 컬럼 ({loadingColumns ? "로딩중..." : `${columns.length}개`})
+              </div>
+              {columnMappings.length > 0 && (
+                <div className="flex items-center gap-2 text-[10px] text-muted-foreground">
+                  <div className="flex items-center gap-1">
+                    <div className="w-2 h-2 rounded-full bg-blue-500" />
+                    <span>화면에서 사용 ({columnMappings.length}개)</span>
+                  </div>
+                </div>
+              )}
+            </div>
+            
+            {loadingColumns ? (
+              <div className="flex items-center justify-center py-4">
+                <Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
+              </div>
+            ) : sortedColumns.length > 0 ? (
+              <div className="flex gap-3 items-stretch">
+                {/* 왼쪽: 컬럼 목록 */}
+                <div className="flex-1 space-y-1 pr-1 max-h-[350px] overflow-y-auto">
+                  {(() => {
+                    // 드래그 중일 때 로컬 순서 적용
+                    let displayColumns = sortedColumns;
+                    if (localColumnOrder && localColumnOrder.length > 0) {
+                      // 사용 중인 컬럼들을 localColumnOrder에 따라 재정렬
+                      const usedCols = sortedColumns.filter(col => columnMappingMap.has(col.columnName.toLowerCase()));
+                      const unusedCols = sortedColumns.filter(col => !columnMappingMap.has(col.columnName.toLowerCase()));
+                      
+                      const reorderedUsed = localColumnOrder
+                        .map(name => usedCols.find(col => col.columnName.toLowerCase() === name.toLowerCase()))
+                        .filter(Boolean) as typeof usedCols;
+                      
+                      displayColumns = [...reorderedUsed, ...unusedCols];
+                    }
+                    
+                    return displayColumns.map((col, cIdx) => {
+                    const colNameLower = col.columnName.toLowerCase();
+                    const { isFilterKey, isJoinKey, isUsed, mapping } = getColumnState(colNameLower);
+                    const isSelected = editingField === (mapping?.fieldLabel || col.columnName);
+                    const isDragging = draggedIndex === cIdx;
+                    
+                    // 드래그 가능 여부 (사용 중인 컬럼만)
+                    const canDrag = isUsed && !!onColumnReorder;
+                    
+                    // 스타일 결정
+                    let baseClass = "";
+                    let leftBorderClass = "";
+                    
+                    if (isUsed) {
+                      baseClass = isSelected
+                        ? "bg-blue-100 border-blue-300"
+                        : "bg-blue-50 border-blue-200 hover:bg-blue-100 hover:border-blue-300";
+                      if (isJoinKey) {
+                        leftBorderClass = "border-l-4 border-l-orange-500";
+                      } else if (isFilterKey) {
+                        leftBorderClass = "border-l-4 border-l-purple-400";
+                      }
+                    } else if (isJoinKey) {
+                      baseClass = isSelected
+                        ? "bg-orange-100 border-orange-400"
+                        : "bg-orange-50 border-orange-200 hover:bg-orange-100 hover:border-orange-300";
+                    } else if (isFilterKey) {
+                      baseClass = isSelected
+                        ? "bg-purple-100 border-purple-400"
+                        : "bg-purple-50 border-purple-200 hover:bg-purple-100 hover:border-purple-300";
+                    } else {
+                      baseClass = isSelected
+                        ? "bg-gray-100 border-gray-400"
+                        : "bg-gray-50 border-gray-200 hover:bg-gray-100";
+                    }
+                    
+                    return (
+                      <div
+                        key={cIdx}
+                        draggable={canDrag}
+                        onDragStart={canDrag ? (e) => handleDragStart(e, cIdx) : undefined}
+                        onDragOver={canDrag ? (e) => handleDragOver(e, cIdx) : undefined}
+                        onDrop={canDrag ? handleDrop : undefined}
+                        onDragEnd={canDrag ? handleDragEnd : undefined}
+                        onClick={() => {
+                          setEditingField(mapping?.fieldLabel || col.columnName);
+                          setEditingJoin(null);
+                        }}
+                        className={`flex items-center justify-between gap-2 text-xs rounded px-2 py-1.5 border transition-all cursor-pointer ${baseClass} ${leftBorderClass} ${isDragging ? "opacity-50 scale-95" : ""} ${canDrag ? "cursor-grab active:cursor-grabbing" : ""}`}
+                      >
+                        <span className={`font-medium truncate flex-1 min-w-0 ${
+                          isUsed ? "text-blue-700"
+                          : isJoinKey ? "text-orange-800"
+                          : isFilterKey ? "text-purple-800"
+                          : "text-gray-500"
+                        }`}>
+                          {col.displayName || col.columnName}
+                        </span>
+                        <div className="flex items-center gap-2 flex-shrink-0">
+                          {isFilterKey && (
+                            <Badge variant="outline" className="h-4 px-1 text-[8px] bg-purple-200 text-purple-700 border-purple-300">필터</Badge>
+                          )}
+                          {isJoinKey && (
+                            <Badge variant="outline" className="h-4 px-1 text-[8px] bg-orange-200 text-orange-700 border-orange-300">조인</Badge>
+                          )}
+                          {isUsed && (
+                            <Badge className="text-white text-[8px] px-1 py-0 h-4 bg-blue-500">필드</Badge>
+                          )}
+                          <span className="text-muted-foreground text-[10px] w-20 truncate text-right" title={col.dataType}>
+                            {col.dataType?.split("(")[0]}
+                          </span>
+                        </div>
+                      </div>
+                    );
+                  });
+                  })()}
+                </div>
+
+                {/* 오른쪽: 컬럼 설정 패널 */}
+                <div className="w-52 border-l pl-3 flex-shrink-0 max-h-[350px] overflow-y-auto">
+                  {editingField ? (() => {
+                    const selectedMapping = columnMappings.find(m => m.fieldLabel === editingField);
+                    const selectedColumn = selectedMapping 
+                      ? columns.find(c => c.columnName.toLowerCase() === selectedMapping.columnName?.toLowerCase())
+                      : columns.find(c => (c.displayName || c.columnName) === editingField || c.columnName === editingField);
+                    const colNameLower = selectedColumn?.columnName?.toLowerCase() || editingField.toLowerCase();
+                    const { isFilterKey, isJoinKey, joinRef, isUsed } = getColumnState(colNameLower);
+                    
+                    // 조인 정보 - joinColumnRefs에서 먼저 찾고, 없으면 selectedColumn에서 가져옴
+                    const hasJoinSetting = isJoinKey || !!selectedColumn?.referenceTable;
+                    
+                    return (
+                      <div className="space-y-3">
+                        <div className="text-xs font-medium text-gray-700">컬럼 설정</div>
+                        
+                        {/* 화면 필드 정보 (필드인 경우만) */}
+                        {isUsed && (
+                          <>
+                            <div className="space-y-1">
+                              <span className="text-[10px] text-muted-foreground">화면 필드</span>
+                              <div className="text-sm font-medium text-blue-700">
+                                {selectedColumn?.displayName || selectedMapping?.columnName || editingField}
+                              </div>
+                            </div>
+                            
+                            <div className="space-y-1">
+                              <span className="text-[10px] text-muted-foreground">현재 컬럼</span>
+                              <div className="text-sm font-mono text-gray-600">
+                                {selectedMapping?.columnName || "-"}
+                              </div>
+                            </div>
+                            
+                            <div className="space-y-1">
+                              <span className="text-[10px] text-muted-foreground">컬럼 변경</span>
+                              <Popover>
+                                <PopoverTrigger asChild>
+                                  <Button variant="outline" size="sm" className="w-full justify-between h-7 text-xs">
+                                    {selectedColumn?.displayName || selectedMapping?.columnName || "컬럼 선택"}
+                                    <ChevronsUpDown className="h-3 w-3 opacity-50" />
+                                  </Button>
+                                </PopoverTrigger>
+                                <PopoverContent className="p-0 w-48" align="start">
+                                  <Command>
+                                    <CommandInput placeholder="컬럼 검색..." className="h-8 text-xs" />
+                                    <CommandList className="max-h-32">
+                                      <CommandEmpty className="text-xs py-2">없음</CommandEmpty>
+                                      <CommandGroup>
+                                        {columns.map((c) => (
+                                          <CommandItem
+                                            key={c.columnName}
+                                            value={c.displayName || c.columnName}
+                                            onSelect={() => {
+                                              if (onColumnChange && selectedMapping) {
+                                                onColumnChange(editingField, selectedMapping.columnName, c.columnName);
+                                              }
+                                              setEditingField(null);
+                                            }}
+                                          >
+                                            <Check className={`mr-2 h-3 w-3 ${c.columnName.toLowerCase() === selectedMapping?.columnName?.toLowerCase() ? "opacity-100" : "opacity-0"}`} />
+                                            {c.displayName || c.columnName}
+                                          </CommandItem>
+                                        ))}
+                                      </CommandGroup>
+                                    </CommandList>
+                                  </Command>
+                                </PopoverContent>
+                              </Popover>
+                            </div>
+                            
+                            {/* 필드에서 제거 */}
+                            <Button
+                              variant="outline"
+                              size="sm"
+                              className="w-full h-7 text-xs text-red-600 border-red-300 hover:bg-red-50"
+                              onClick={() => {
+                                if (selectedMapping && onColumnChange) {
+                                  onColumnChange(selectedMapping.fieldLabel!, selectedMapping.columnName, "__REMOVE_FIELD__");
+                                  toast.success(`"${selectedColumn?.displayName || selectedMapping.columnName}" 필드가 제거되었습니다.`);
+                                  setEditingField(null);
+                                }
+                              }}
+                            >
+                              <X className="h-3 w-3 mr-1" />
+                              필드에서 제거
+                            </Button>
+                          </>
+                        )}
+                        
+                        {/* 컬럼 기본 정보 (필드가 아닌 경우) */}
+                        {!isUsed && (
+                          <div className="space-y-3">
+                            <div className="text-xs text-muted-foreground">
+                              <div className="space-y-1">
+                                <span className="text-[10px]">컬럼명</span>
+                                <div className="font-mono">{selectedColumn?.columnName || editingField}</div>
+                              </div>
+                              <div className="space-y-1 mt-2">
+                                <span className="text-[10px]">데이터 타입</span>
+                                <div>{selectedColumn?.dataType || "-"}</div>
+                              </div>
+                            </div>
+                            
+                            <Button
+                              variant="outline"
+                              size="sm"
+                              className="w-full h-7 text-xs text-blue-600 border-blue-300 hover:bg-blue-50"
+                              onClick={() => {
+                                if (selectedColumn?.columnName && onColumnChange) {
+                                  onColumnChange("__NEW_FIELD__", "", selectedColumn.columnName);
+                                  toast.success(`"${selectedColumn.displayName || selectedColumn.columnName}" 필드가 추가되었습니다.`);
+                                  setEditingField(null);
+                                }
+                              }}
+                            >
+                              <Plus className="h-3 w-3 mr-1" />
+                              필드로 추가
+                            </Button>
+                          </div>
+                        )}
+                        
+                        {/* 조인 설정 */}
+                        <div className="space-y-2 pt-2 border-t border-orange-200">
+                          <div className="flex items-center justify-between">
+                            <div className="flex items-center gap-1">
+                              <Badge variant="outline" className={`h-4 px-1 text-[8px] ${hasJoinSetting ? "bg-orange-200 text-orange-700 border-orange-300" : "bg-gray-100 text-gray-600 border-gray-300"}`}>
+                                조인
+                              </Badge>
+                              <span className={`text-[10px] font-medium ${hasJoinSetting ? "text-orange-700" : "text-gray-600"}`}>
+                                {editingJoin && editingJoin.columnName === (selectedColumn?.columnName || editingField) ? "연결 편집" : (hasJoinSetting ? "연결 정보" : "연결 설정")}
+                              </span>
+                            </div>
+                            {editingJoin && editingJoin.columnName === (selectedColumn?.columnName || editingField) ? (
+                              <div className="flex gap-1">
+                                <Button variant="ghost" size="sm" className="h-5 px-1.5 text-[10px] text-gray-500 hover:text-gray-700" onClick={() => setEditingJoin(null)}>
+                                  취소
+                                </Button>
+                                <Button size="sm" className="h-5 px-1.5 text-[10px] bg-orange-500 hover:bg-orange-600 text-white" onClick={handleSaveJoinSetting} disabled={!editingJoin.referenceTable || !editingJoin.referenceColumn || savingJoinSetting}>
+                                  {savingJoinSetting ? "..." : "저장"}
+                                </Button>
+                              </div>
+                            ) : (
+                              <Button
+                                variant="ghost"
+                                size="sm"
+                                className={`h-5 px-1 text-[10px] ${hasJoinSetting ? "text-orange-600 hover:text-orange-800" : "text-gray-500 hover:text-gray-700"}`}
+                                onClick={() => startEditingJoin(
+                                  selectedColumn?.columnName || editingField,
+                                  isJoinKey && joinRef ? joinRef.refTable : (selectedColumn?.referenceTable || ""),
+                                  isJoinKey && joinRef ? joinRef.refColumn : (selectedColumn?.referenceColumn || ""),
+                                  selectedColumn?.displayColumn || ""
+                                )}
+                              >
+                                <Settings2 className="h-3 w-3 mr-0.5" />
+                                {hasJoinSetting ? "편집" : "추가"}
+                              </Button>
+                            )}
+                          </div>
+                          
+                          {editingJoin && editingJoin.columnName === (selectedColumn?.columnName || editingField) ? (
+                            <JoinSettingEditor
+                              editingJoin={editingJoin}
+                              setEditingJoin={setEditingJoin}
+                              allTables={allTables}
+                              refTableColumns={refTableColumns}
+                              loadingRefColumns={loadingRefColumns}
+                              savingJoinSetting={savingJoinSetting}
+                              loadRefTableColumns={loadRefTableColumns}
+                              handleSaveJoinSetting={handleSaveJoinSetting}
+                            />
+                          ) : hasJoinSetting ? (
+                            <div className="space-y-1.5 text-xs">
+                              <div>
+                                <span className="text-muted-foreground">대상 테이블: </span>
+                                <span className="font-mono text-orange-800">{isJoinKey && joinRef ? joinRef.refTable : selectedColumn?.referenceTable}</span>
+                              </div>
+                              <div>
+                                <span className="text-muted-foreground">연결 컬럼: </span>
+                                <span className="font-mono text-orange-800">{isJoinKey && joinRef ? joinRef.refColumn : selectedColumn?.referenceColumn}</span>
+                              </div>
+                            </div>
+                          ) : (
+                            <div className="text-[10px] text-muted-foreground">조인 설정이 없습니다.</div>
+                          )}
+                        </div>
+                        
+                        {/* 필터 정보 (필터 키인 경우) - 필터 테이블에서만 */}
+                        {!isMain && isFilterKey && filterKeyMapping && (
+                          <div className="space-y-2 pt-2 border-t border-purple-200">
+                            <div className="flex items-center gap-1">
+                              <Badge variant="outline" className="h-4 px-1 text-[8px] bg-purple-200 text-purple-700 border-purple-300">필터</Badge>
+                              <span className="text-[10px] text-purple-700 font-medium">필터링 정보</span>
+                            </div>
+                            <div className="space-y-1.5 text-xs">
+                              <div>
+                                <span className="text-muted-foreground">대상 테이블: </span>
+                                <span className="font-mono text-purple-800">{mainTable}</span>
+                              </div>
+                              <div>
+                                <span className="text-muted-foreground">연결 컬럼: </span>
+                                <span className="font-mono text-purple-800">{filterKeyMapping.mainTableColumn}</span>
+                              </div>
+                            </div>
+                          </div>
+                        )}
+                      </div>
+                    );
+                  })() : (
+                    <div className="flex items-center justify-center h-full text-xs text-muted-foreground">
+                      필드를 선택하세요
+                    </div>
+                  )}
+                </div>
+              </div>
+            ) : (
+              <div className="text-xs text-muted-foreground text-center py-2">컬럼 정보 없음</div>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ============================================================
+// 조인 설정 편집 컴포넌트 (검색 가능한 Combobox 사용)
+// ============================================================
+
+interface JoinSettingEditorProps {
+  editingJoin: {
+    columnName: string;
+    referenceTable: string;
+    referenceColumn: string;
+    displayColumn: string;
+  };
+  setEditingJoin: React.Dispatch<React.SetStateAction<{
+    columnName: string;
+    referenceTable: string;
+    referenceColumn: string;
+    displayColumn: string;
+  } | null>>;
+  allTables: TableInfo[];
+  refTableColumns: ColumnTypeInfo[];
+  loadingRefColumns: boolean;
+  savingJoinSetting: boolean;
+  loadRefTableColumns: (tableName: string) => void;
+  handleSaveJoinSetting: () => void;
+}
+
+function JoinSettingEditor({
+  editingJoin,
+  setEditingJoin,
+  allTables,
+  refTableColumns,
+  loadingRefColumns,
+  savingJoinSetting,
+  loadRefTableColumns,
+  handleSaveJoinSetting,
+}: JoinSettingEditorProps) {
+  const [tableSearchOpen, setTableSearchOpen] = useState(false);
+  const [refColSearchOpen, setRefColSearchOpen] = useState(false);
+  const [displayColSearchOpen, setDisplayColSearchOpen] = useState(false);
+  
+  const selectedTable = allTables.find(t => t.tableName === editingJoin.referenceTable);
+  const selectedRefCol = refTableColumns.find(c => c.columnName === editingJoin.referenceColumn);
+  const selectedDisplayCol = refTableColumns.find(c => c.columnName === editingJoin.displayColumn);
+  
+  return (
+    <div className="space-y-2">
+      {/* 대상 테이블 선택 - 검색 가능 Combobox */}
+      <div className="space-y-1">
+        <span className="text-[10px] text-muted-foreground">대상 테이블</span>
+        <Popover open={tableSearchOpen} onOpenChange={setTableSearchOpen}>
+          <PopoverTrigger asChild>
+            <Button
+              variant="outline"
+              size="sm"
+              className="w-full justify-between h-7 text-xs font-normal"
+            >
+              {selectedTable?.displayName || editingJoin.referenceTable || "테이블 선택"}
+              <ChevronsUpDown className="h-3 w-3 opacity-50" />
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent className="p-0 w-56" align="start">
+            <Command>
+              <CommandInput placeholder="테이블 검색..." className="h-8 text-xs" />
+              <CommandList>
+                <CommandEmpty className="text-xs py-2">테이블을 찾을 수 없습니다.</CommandEmpty>
+                <CommandGroup>
+                  {allTables.map(t => (
+                    <CommandItem
+                      key={t.tableName}
+                      value={t.displayName || t.tableName}
+                      onSelect={() => {
+                        setEditingJoin({ ...editingJoin, referenceTable: t.tableName, referenceColumn: "", displayColumn: "" });
+                        loadRefTableColumns(t.tableName);
+                        setTableSearchOpen(false);
+                      }}
+                      className="text-xs"
+                    >
+                      <Check
+                        className={cn(
+                          "mr-2 h-3 w-3",
+                          editingJoin.referenceTable === t.tableName ? "opacity-100" : "opacity-0"
+                        )}
+                      />
+                      {t.displayName || t.tableName}
+                    </CommandItem>
+                  ))}
+                </CommandGroup>
+              </CommandList>
+            </Command>
+          </PopoverContent>
+        </Popover>
+      </div>
+      
+      {/* 연결 컬럼 선택 - 검색 가능 Combobox */}
+      <div className="space-y-1">
+        <span className="text-[10px] text-muted-foreground">연결 컬럼 (PK)</span>
+        <Popover open={refColSearchOpen} onOpenChange={setRefColSearchOpen}>
+          <PopoverTrigger asChild>
+            <Button
+              variant="outline"
+              size="sm"
+              className="w-full justify-between h-7 text-xs font-normal"
+              disabled={!editingJoin.referenceTable || loadingRefColumns}
+            >
+              {loadingRefColumns ? "로딩중..." : (selectedRefCol?.displayName || editingJoin.referenceColumn || "컬럼 선택")}
+              <ChevronsUpDown className="h-3 w-3 opacity-50" />
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent className="p-0 w-56" align="start">
+            <Command>
+              <CommandInput placeholder="컬럼 검색..." className="h-8 text-xs" />
+              <CommandList>
+                <CommandEmpty className="text-xs py-2">컬럼을 찾을 수 없습니다.</CommandEmpty>
+                <CommandGroup>
+                  {refTableColumns.map(c => (
+                    <CommandItem
+                      key={c.columnName}
+                      value={c.displayName || c.columnName}
+                      onSelect={() => {
+                        setEditingJoin({ ...editingJoin, referenceColumn: c.columnName });
+                        setRefColSearchOpen(false);
+                      }}
+                      className="text-xs"
+                    >
+                      <Check
+                        className={cn(
+                          "mr-2 h-3 w-3",
+                          editingJoin.referenceColumn === c.columnName ? "opacity-100" : "opacity-0"
+                        )}
+                      />
+                      {c.displayName || c.columnName}
+                    </CommandItem>
+                  ))}
+                </CommandGroup>
+              </CommandList>
+            </Command>
+          </PopoverContent>
+        </Popover>
+      </div>
+      
+      {/* 표시 컬럼 선택 - 검색 가능 Combobox */}
+      <div className="space-y-1">
+        <span className="text-[10px] text-muted-foreground">표시 컬럼</span>
+        <Popover open={displayColSearchOpen} onOpenChange={setDisplayColSearchOpen}>
+          <PopoverTrigger asChild>
+            <Button
+              variant="outline"
+              size="sm"
+              className="w-full justify-between h-7 text-xs font-normal"
+              disabled={!editingJoin.referenceTable || loadingRefColumns}
+            >
+              {selectedDisplayCol?.displayName || editingJoin.displayColumn || "컬럼 선택"}
+              <ChevronsUpDown className="h-3 w-3 opacity-50" />
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent className="p-0 w-56" align="start">
+            <Command>
+              <CommandInput placeholder="컬럼 검색..." className="h-8 text-xs" />
+              <CommandList>
+                <CommandEmpty className="text-xs py-2">컬럼을 찾을 수 없습니다.</CommandEmpty>
+                <CommandGroup>
+                  {refTableColumns.map(c => (
+                    <CommandItem
+                      key={c.columnName}
+                      value={c.displayName || c.columnName}
+                      onSelect={() => {
+                        setEditingJoin({ ...editingJoin, displayColumn: c.columnName });
+                        setDisplayColSearchOpen(false);
+                      }}
+                      className="text-xs"
+                    >
+                      <Check
+                        className={cn(
+                          "mr-2 h-3 w-3",
+                          editingJoin.displayColumn === c.columnName ? "opacity-100" : "opacity-0"
+                        )}
+                      />
+                      {c.displayName || c.columnName}
+                    </CommandItem>
+                  ))}
+                </CommandGroup>
+              </CommandList>
+            </Command>
+          </PopoverContent>
+        </Popover>
+      </div>
+      
+    </div>
+  );
+}
+
+// ============================================================
+// 탭 1: 화면 개요
+// ============================================================
+
+interface OverviewTabProps {
+  screenId: number;
+  screenName: string;
+  mainTable?: string;
+  mainTableLabel?: string;
+  filterTables: FilterTableInfo[];
+  fieldMappings: FieldMappingInfo[];
+  componentCount: number;
+  dataFlows: DataFlow[];
+  layoutItems: LayoutItem[]; // 컴포넌트 컬럼 정보 추가
+  loading: boolean;
+  onRefresh?: () => void; // 컬럼 변경 후 새로고침 콜백
+  onOpenTableSetting?: (tableName: string, tableLabel?: string) => void; // 테이블 설정 모달 열기
+}
+
+function OverviewTab({
+  screenId,
+  screenName,
+  mainTable,
+  mainTableLabel,
+  filterTables,
+  fieldMappings,
+  componentCount,
+  dataFlows,
+  layoutItems,
+  loading,
+  onRefresh,
+  onOpenTableSetting,
+}: OverviewTabProps) {
+  const [isSavingColumn, setIsSavingColumn] = useState(false);
+
+  // 컬럼 변경 저장 함수 - 화면 디자이너와 동일한 방식
+  const handleColumnChange = useCallback(async (fieldLabel: string, oldColumn: string, newColumn: string) => {
+    console.log("[handleColumnChange] 시작", { screenId, fieldLabel, oldColumn, newColumn });
+    
+    if (!screenId) {
+      toast.error("화면 정보가 없습니다.");
+      return;
+    }
+
+    // 필드 추가/제거 처리
+    const isAddingField = fieldLabel === "__NEW_FIELD__";
+    const isRemovingField = newColumn === "__REMOVE_FIELD__";
+
+    setIsSavingColumn(true);
+    try {
+      // 1. 현재 레이아웃 가져오기
+      console.log("[handleColumnChange] 레이아웃 조회 시작", { screenId });
+      const currentLayout = await screenApi.getLayout(screenId);
+      console.log("[handleColumnChange] 레이아웃 조회 완료", { 
+        hasLayout: !!currentLayout, 
+        hasComponents: !!currentLayout?.components,
+        componentCount: currentLayout?.components?.length 
+      });
+      
+      if (!currentLayout?.components) {
+        toast.error("레이아웃 정보를 불러올 수 없습니다.");
+        console.error("[handleColumnChange] 레이아웃 정보 없음", { currentLayout });
+        return;
+      }
+
+      // 2. 레이아웃에서 해당 컬럼 변경
+      let columnChanged = false;
+      
+      // 디버깅: 각 컴포넌트의 구조 확인
+      console.log("[handleColumnChange] 컴포넌트 구조 분석 시작");
+      currentLayout.components.forEach((comp: any, i: number) => {
+        console.log(`[handleColumnChange] 컴포넌트 ${i}:`, {
+          id: comp.id,
+          componentType: comp.componentType,
+          hasUsedColumns: !!comp.usedColumns,
+          usedColumns: comp.usedColumns,
+          hasComponentConfig: !!comp.componentConfig,
+          componentConfigKeys: comp.componentConfig ? Object.keys(comp.componentConfig) : [],
+          componentConfigColumns: comp.componentConfig?.columns,
+          componentConfigUsedColumns: comp.componentConfig?.usedColumns,
+          columnName: comp.columnName,
+          bindField: comp.bindField,
+        });
+      });
+      
+      let updatedComponents = currentLayout.components.map((comp: any) => {
+        // usedColumns 배열이 있는 컴포넌트에서 oldColumn을 newColumn으로 교체
+        if (comp.usedColumns && Array.isArray(comp.usedColumns)) {
+          // 필드 추가
+          if (isAddingField) {
+            console.log("[handleColumnChange] usedColumns에 필드 추가", { compId: comp.id, newColumn });
+            columnChanged = true;
+            return {
+              ...comp,
+              usedColumns: [...comp.usedColumns, newColumn],
+            };
+          }
+          
+          const idx = comp.usedColumns.findIndex(
+            (col: string) => col.toLowerCase() === oldColumn.toLowerCase()
+          );
+          if (idx !== -1) {
+            console.log("[handleColumnChange] usedColumns에서 찾음", { compId: comp.id, idx, isRemovingField });
+            columnChanged = true;
+            
+            // 필드 제거
+            if (isRemovingField) {
+              return {
+                ...comp,
+                usedColumns: comp.usedColumns.filter((_: string, i: number) => i !== idx),
+              };
+            }
+            
+            // 컬럼 변경
+            return {
+              ...comp,
+              usedColumns: comp.usedColumns.map((col: string, i: number) =>
+                i === idx ? newColumn : col
+              ),
+            };
+          }
+        }
+        
+        // componentConfig 내부의 usedColumns도 확인
+        if (comp.componentConfig?.usedColumns && Array.isArray(comp.componentConfig.usedColumns)) {
+          // 필드 추가
+          if (isAddingField && !columnChanged) {
+            console.log("[handleColumnChange] componentConfig.usedColumns에 필드 추가", { compId: comp.id, newColumn });
+            columnChanged = true;
+            return {
+              ...comp,
+              componentConfig: {
+                ...comp.componentConfig,
+                usedColumns: [...comp.componentConfig.usedColumns, newColumn],
+              },
+            };
+          }
+          
+          const idx = comp.componentConfig.usedColumns.findIndex(
+            (col: string) => col.toLowerCase() === oldColumn.toLowerCase()
+          );
+          if (idx !== -1) {
+            console.log("[handleColumnChange] componentConfig.usedColumns에서 찾음", { compId: comp.id, idx, isRemovingField });
+            columnChanged = true;
+            
+            // 필드 제거
+            if (isRemovingField) {
+              return {
+                ...comp,
+                componentConfig: {
+                  ...comp.componentConfig,
+                  usedColumns: comp.componentConfig.usedColumns.filter((_: string, i: number) => i !== idx),
+                },
+              };
+            }
+            
+            // 컬럼 변경
+            return {
+              ...comp,
+              componentConfig: {
+                ...comp.componentConfig,
+                usedColumns: comp.componentConfig.usedColumns.map((col: string, i: number) =>
+                  i === idx ? newColumn : col
+                ),
+              },
+            };
+          }
+        }
+        
+        // componentConfig.columns 배열도 확인 (컬럼 설정 형태)
+        if (comp.componentConfig?.columns && Array.isArray(comp.componentConfig.columns)) {
+          // 필드 추가
+          if (isAddingField && !columnChanged) {
+            console.log("[handleColumnChange] componentConfig.columns에 필드 추가", { compId: comp.id, newColumn });
+            columnChanged = true;
+            return {
+              ...comp,
+              componentConfig: {
+                ...comp.componentConfig,
+                columns: [...comp.componentConfig.columns, { field: newColumn, columnName: newColumn }],
+              },
+            };
+          }
+          
+          const columnIdx = comp.componentConfig.columns.findIndex(
+            (col: any) => {
+              const colName = typeof col === 'string' ? col : (col.field || col.columnName || col.name);
+              return colName?.toLowerCase() === oldColumn.toLowerCase();
+            }
+          );
+          if (columnIdx !== -1) {
+            console.log("[handleColumnChange] componentConfig.columns에서 찾음", { compId: comp.id, columnIdx, isRemovingField });
+            columnChanged = true;
+            
+            // 필드 제거
+            if (isRemovingField) {
+              return {
+                ...comp,
+                componentConfig: {
+                  ...comp.componentConfig,
+                  columns: comp.componentConfig.columns.filter((_: any, i: number) => i !== columnIdx),
+                },
+              };
+            }
+            
+            // 컬럼 변경
+            const updatedColumns = comp.componentConfig.columns.map((col: any, i: number) => {
+              if (i !== columnIdx) return col;
+              if (typeof col === 'string') return newColumn;
+              return { ...col, field: newColumn, columnName: newColumn };
+            });
+            return {
+              ...comp,
+              componentConfig: {
+                ...comp.componentConfig,
+                columns: updatedColumns,
+              },
+            };
+          }
+        }
+
+        // columnName 필드 체크 (위젯 컴포넌트)
+        if (comp.columnName?.toLowerCase() === oldColumn.toLowerCase()) {
+          console.log("[handleColumnChange] columnName에서 찾음", { compId: comp.id });
+          columnChanged = true;
+          return {
+            ...comp,
+            columnName: newColumn,
+          };
+        }
+        
+        // bindField 필드 체크 (바인딩 필드)
+        if (comp.bindField?.toLowerCase() === oldColumn.toLowerCase()) {
+          console.log("[handleColumnChange] bindField에서 찾음", { compId: comp.id });
+          columnChanged = true;
+          return {
+            ...comp,
+            bindField: newColumn,
+          };
+        }
+        
+        // split-panel-layout의 leftPanel.columns 검사
+        if (comp.componentConfig?.leftPanel?.columns && Array.isArray(comp.componentConfig.leftPanel.columns)) {
+          const leftColumns = comp.componentConfig.leftPanel.columns;
+          console.log("[handleColumnChange] leftPanel.columns 검사:", {
+            compId: comp.id,
+            leftColumnsCount: leftColumns.length,
+            leftColumnsContent: leftColumns.map((col: any) => typeof col === 'string' ? col : (col.name || col.columnName || col.field)),
+            searchingFor: isAddingField ? newColumn : oldColumn.toLowerCase(),
+            isAddingField,
+            isRemovingField,
+          });
+          
+          // 필드 추가: 배열에 새 컬럼 추가
+          if (isAddingField) {
+            console.log("[handleColumnChange] 필드 추가", { compId: comp.id, newColumn });
+            columnChanged = true;
+            return {
+              ...comp,
+              componentConfig: {
+                ...comp.componentConfig,
+                leftPanel: {
+                  ...comp.componentConfig.leftPanel,
+                  columns: [...leftColumns, { name: newColumn, columnName: newColumn }],
+                },
+              },
+            };
+          }
+          
+          const columnIdx = leftColumns.findIndex((col: any) => {
+            const colName = typeof col === 'string' ? col : (col.name || col.columnName || col.field);
+            return colName?.toLowerCase() === oldColumn.toLowerCase();
+          });
+          if (columnIdx !== -1) {
+            console.log("[handleColumnChange] leftPanel.columns에서 찾음", { compId: comp.id, columnIdx, isRemovingField });
+            columnChanged = true;
+            
+            // 필드 제거: 배열에서 해당 컬럼 제거
+            if (isRemovingField) {
+              const filteredColumns = leftColumns.filter((_: any, i: number) => i !== columnIdx);
+              return {
+                ...comp,
+                componentConfig: {
+                  ...comp.componentConfig,
+                  leftPanel: {
+                    ...comp.componentConfig.leftPanel,
+                    columns: filteredColumns,
+                  },
+                },
+              };
+            }
+            
+            // 컬럼 변경
+            const updatedLeftColumns = leftColumns.map((col: any, i: number) => {
+              if (i !== columnIdx) return col;
+              if (typeof col === 'string') return newColumn;
+              // 객체인 경우 name/columnName 필드 업데이트
+              return { ...col, name: newColumn, columnName: newColumn };
+            });
+            return {
+              ...comp,
+              componentConfig: {
+                ...comp.componentConfig,
+                leftPanel: {
+                  ...comp.componentConfig.leftPanel,
+                  columns: updatedLeftColumns,
+                },
+              },
+            };
+          }
+        }
+        
+        // split-panel-layout의 rightPanel.columns 검사
+        if (comp.componentConfig?.rightPanel?.columns && Array.isArray(comp.componentConfig.rightPanel.columns)) {
+          const rightColumns = comp.componentConfig.rightPanel.columns;
+          
+          // 필드 추가: 배열에 새 컬럼 추가
+          if (isAddingField && !columnChanged) {
+            console.log("[handleColumnChange] 필드 추가 (rightPanel)", { compId: comp.id, newColumn });
+            columnChanged = true;
+            return {
+              ...comp,
+              componentConfig: {
+                ...comp.componentConfig,
+                rightPanel: {
+                  ...comp.componentConfig.rightPanel,
+                  columns: [...rightColumns, { name: newColumn, columnName: newColumn }],
+                },
+              },
+            };
+          }
+          
+          const columnIdx = rightColumns.findIndex((col: any) => {
+            const colName = typeof col === 'string' ? col : (col.name || col.columnName || col.field);
+            return colName?.toLowerCase() === oldColumn.toLowerCase();
+          });
+          if (columnIdx !== -1) {
+            console.log("[handleColumnChange] rightPanel.columns에서 찾음", { compId: comp.id, columnIdx, isRemovingField });
+            columnChanged = true;
+            
+            // 필드 제거
+            if (isRemovingField) {
+              const filteredColumns = rightColumns.filter((_: any, i: number) => i !== columnIdx);
+              return {
+                ...comp,
+                componentConfig: {
+                  ...comp.componentConfig,
+                  rightPanel: {
+                    ...comp.componentConfig.rightPanel,
+                    columns: filteredColumns,
+                  },
+                },
+              };
+            }
+            
+            // 컬럼 변경
+            const updatedRightColumns = rightColumns.map((col: any, i: number) => {
+              if (i !== columnIdx) return col;
+              if (typeof col === 'string') return newColumn;
+              return { ...col, name: newColumn, columnName: newColumn };
+            });
+            return {
+              ...comp,
+              componentConfig: {
+                ...comp.componentConfig,
+                rightPanel: {
+                  ...comp.componentConfig.rightPanel,
+                  columns: updatedRightColumns,
+                },
+              },
+            };
+          }
+        }
+
+        return comp;
+      });
+
+      // 폼 화면용 필드 추가/제거 처리 (개별 input 컴포넌트)
+      if (!columnChanged) {
+        // 폼 화면 필드 추가: 새 text-input 컴포넌트 생성
+        if (isAddingField && newColumn) {
+          console.log("[handleColumnChange] 폼 화면 필드 추가 시도", { newColumn });
+          
+          // 마지막 컴포넌트 위치 계산
+          let maxY = 50; // 기본 시작 위치
+          let lastComponentHeight = 30;
+          currentLayout.components.forEach((comp: any) => {
+            const compY = comp.position?.y || 0;
+            const compHeight = comp.size?.height || 30;
+            if (compY + compHeight > maxY) {
+              maxY = compY + compHeight;
+              lastComponentHeight = compHeight;
+            }
+          });
+          
+          // 새 컴포넌트 위치: 마지막 컴포넌트 아래 + 간격
+          const newY = maxY + 10;
+          const newComponentId = `comp_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+          
+          // 새 text-input 컴포넌트 생성
+          const newComponent = {
+            id: newComponentId,
+            type: "component",
+            label: newColumn,
+            columnName: newColumn,
+            bindField: newColumn,
+            widgetType: "text-input",
+            componentType: "text-input",
+            position: { x: 20, y: newY, z: 1 },
+            size: { width: 300, height: 30 },
+            gridColumns: 4,
+            componentConfig: {
+              type: "text-input",
+              webType: "text-input",
+              placeholder: `${newColumn}을(를) 입력하세요`,
+            },
+            webTypeConfig: {},
+            style: {
+              labelDisplay: true,
+              labelFontSize: "14px",
+              labelColor: "#212121",
+              width: "300px",
+              height: "30px",
+            },
+          };
+          
+          updatedComponents = [...updatedComponents, newComponent];
+          columnChanged = true;
+          console.log("[handleColumnChange] 폼 화면 필드 추가 완료", { newComponentId, newY });
+        }
+        
+        // 폼 화면 필드 제거: bindField가 일치하는 컴포넌트 삭제
+        if (isRemovingField && oldColumn) {
+          console.log("[handleColumnChange] 폼 화면 필드 제거 시도", { oldColumn });
+          
+          const beforeCount = updatedComponents.length;
+          updatedComponents = updatedComponents.filter((comp: any) => {
+            // bindField, columnName, 또는 properties.columnName으로 매칭
+            const compBindField = comp.bindField || comp.columnName || comp.properties?.columnName;
+            if (compBindField?.toLowerCase() === oldColumn.toLowerCase()) {
+              console.log("[handleColumnChange] 폼 컴포넌트 제거", { compId: comp.id, compBindField });
+              return false; // 제거
+            }
+            return true; // 유지
+          });
+          
+          if (beforeCount > updatedComponents.length) {
+            columnChanged = true;
+            console.log("[handleColumnChange] 폼 화면 필드 제거 완료", { 
+              beforeCount, 
+              afterCount: updatedComponents.length 
+            });
+          }
+        }
+      }
+
+      if (!columnChanged) {
+        toast.warning("변경할 컬럼을 찾을 수 없습니다.");
+        console.warn("[handleColumnChange] 변경할 컬럼 없음", { oldColumn, newColumn });
+        return;
+      }
+
+      // 3. 저장
+      console.log("[handleColumnChange] 저장 시작", { 
+        screenId, 
+        componentCount: updatedComponents.length 
+      });
+      await screenApi.saveLayout(screenId, {
+        ...currentLayout,
+        components: updatedComponents,
+      });
+      console.log("[handleColumnChange] 저장 완료");
+
+      if (isAddingField) {
+        toast.success(`필드가 추가되었습니다: ${newColumn}`);
+      } else if (isRemovingField) {
+        toast.success(`필드가 제거되었습니다: ${oldColumn}`);
+      } else {
+        toast.success(`컬럼이 변경되었습니다: ${oldColumn} → ${newColumn}`);
+      }
+      
+      // 실시간 반영을 위해 콜백 호출
+      onRefresh?.();
+    } catch (error) {
+      console.error("컬럼 변경 저장 실패:", error);
+      toast.error("컬럼 변경 저장에 실패했습니다.");
+    } finally {
+      setIsSavingColumn(false);
+    }
+  }, [screenId, onRefresh]);
+
+  // 컬럼 순서 변경 저장 함수
+  const handleColumnReorder = useCallback(async (tableType: "main" | "filter", newOrder: string[]) => {
+    console.log("[handleColumnReorder] 시작", { screenId, tableType, newOrder });
+    
+    if (!screenId) {
+      console.warn("[handleColumnReorder] screenId 없음");
+      return;
+    }
+
+    try {
+      // 1. 현재 레이아웃 가져오기
+      const currentLayout = await screenApi.getLayout(screenId);
+      
+      if (!currentLayout?.components) {
+        console.error("[handleColumnReorder] 레이아웃 정보 없음");
+        return;
+      }
+
+      // 2. 레이아웃에서 해당 컬럼들의 순서 변경
+      let orderChanged = false;
+      
+      const updatedComponents = currentLayout.components.map((comp: any) => {
+        // split-panel-layout의 leftPanel.columns 순서 변경
+        if (comp.componentConfig?.leftPanel?.columns && Array.isArray(comp.componentConfig.leftPanel.columns)) {
+          const leftColumns = comp.componentConfig.leftPanel.columns as any[];
+          
+          // newOrder에 따라 leftColumns 재정렬
+          const reorderedColumns = newOrder.map(colName => {
+            return leftColumns.find((col: any) => {
+              const name = typeof col === 'string' ? col : (col.name || col.columnName || col.field);
+              return name?.toLowerCase() === colName.toLowerCase();
+            });
+          }).filter(Boolean);
+          
+          // 원래 없던 컬럼들 유지 (newOrder에 없는 컬럼들)
+          const remainingColumns = leftColumns.filter((col: any) => {
+            const name = typeof col === 'string' ? col : (col.name || col.columnName || col.field);
+            return !newOrder.some(n => n.toLowerCase() === name?.toLowerCase());
+          });
+          
+          if (reorderedColumns.length > 0) {
+            orderChanged = true;
+            console.log("[handleColumnReorder] leftPanel.columns 순서 변경", {
+              compId: comp.id,
+              before: leftColumns.map((c: any) => typeof c === 'string' ? c : (c.name || c.columnName)),
+              after: [...reorderedColumns, ...remainingColumns].map((c: any) => typeof c === 'string' ? c : (c.name || c.columnName)),
+            });
+            
+            return {
+              ...comp,
+              componentConfig: {
+                ...comp.componentConfig,
+                leftPanel: {
+                  ...comp.componentConfig.leftPanel,
+                  columns: [...reorderedColumns, ...remainingColumns],
+                },
+              },
+            };
+          }
+        }
+        
+        // rightPanel.columns 순서 변경
+        if (comp.componentConfig?.rightPanel?.columns && Array.isArray(comp.componentConfig.rightPanel.columns)) {
+          const rightColumns = comp.componentConfig.rightPanel.columns as any[];
+          
+          const reorderedColumns = newOrder.map(colName => {
+            return rightColumns.find((col: any) => {
+              const name = typeof col === 'string' ? col : (col.name || col.columnName || col.field);
+              return name?.toLowerCase() === colName.toLowerCase();
+            });
+          }).filter(Boolean);
+          
+          const remainingColumns = rightColumns.filter((col: any) => {
+            const name = typeof col === 'string' ? col : (col.name || col.columnName || col.field);
+            return !newOrder.some(n => n.toLowerCase() === name?.toLowerCase());
+          });
+          
+          if (reorderedColumns.length > 0) {
+            orderChanged = true;
+            console.log("[handleColumnReorder] rightPanel.columns 순서 변경", {
+              compId: comp.id,
+              before: rightColumns.map((c: any) => typeof c === 'string' ? c : (c.name || c.columnName)),
+              after: [...reorderedColumns, ...remainingColumns].map((c: any) => typeof c === 'string' ? c : (c.name || c.columnName)),
+            });
+            
+            return {
+              ...comp,
+              componentConfig: {
+                ...comp.componentConfig,
+                rightPanel: {
+                  ...comp.componentConfig.rightPanel,
+                  columns: [...reorderedColumns, ...remainingColumns],
+                },
+              },
+            };
+          }
+        }
+        
+        // componentConfig.usedColumns 순서 변경
+        if (comp.componentConfig?.usedColumns && Array.isArray(comp.componentConfig.usedColumns)) {
+          const usedColumns = comp.componentConfig.usedColumns as string[];
+          
+          const reorderedColumns = newOrder.filter(colName => 
+            usedColumns.some(c => c.toLowerCase() === colName.toLowerCase())
+          );
+          
+          const remainingColumns = usedColumns.filter(c => 
+            !newOrder.some(n => n.toLowerCase() === c.toLowerCase())
+          );
+          
+          if (reorderedColumns.length > 0) {
+            orderChanged = true;
+            console.log("[handleColumnReorder] usedColumns 순서 변경", {
+              compId: comp.id,
+              before: usedColumns,
+              after: [...reorderedColumns, ...remainingColumns],
+            });
+            
+            return {
+              ...comp,
+              componentConfig: {
+                ...comp.componentConfig,
+                usedColumns: [...reorderedColumns, ...remainingColumns],
+              },
+            };
+          }
+        }
+        
+        // componentConfig.columns 순서 변경
+        if (comp.componentConfig?.columns && Array.isArray(comp.componentConfig.columns)) {
+          const columns = comp.componentConfig.columns as any[];
+          
+          const reorderedColumns = newOrder.map(colName => {
+            return columns.find((col: any) => {
+              const name = typeof col === 'string' ? col : (col.field || col.columnName || col.name);
+              return name?.toLowerCase() === colName.toLowerCase();
+            });
+          }).filter(Boolean);
+          
+          const remainingColumns = columns.filter((col: any) => {
+            const name = typeof col === 'string' ? col : (col.field || col.columnName || col.name);
+            return !newOrder.some(n => n.toLowerCase() === name?.toLowerCase());
+          });
+          
+          if (reorderedColumns.length > 0) {
+            orderChanged = true;
+            console.log("[handleColumnReorder] componentConfig.columns 순서 변경", {
+              compId: comp.id,
+              before: columns.map((c: any) => typeof c === 'string' ? c : (c.field || c.columnName)),
+              after: [...reorderedColumns, ...remainingColumns].map((c: any) => typeof c === 'string' ? c : (c.field || c.columnName)),
+            });
+            
+            return {
+              ...comp,
+              componentConfig: {
+                ...comp.componentConfig,
+                columns: [...reorderedColumns, ...remainingColumns],
+              },
+            };
+          }
+        }
+        
+        return comp;
+      });
+
+      if (!orderChanged) {
+        console.log("[handleColumnReorder] 순서 변경 없음");
+        return;
+      }
+
+      // 3. 레이아웃 저장
+      console.log("[handleColumnReorder] 레이아웃 저장");
+      await screenApi.saveLayout(screenId, {
+        ...currentLayout,
+        components: updatedComponents,
+      });
+
+      console.log("[handleColumnReorder] 순서 변경 저장 완료");
+      
+      // 실시간 반영을 위해 콜백 호출
+      onRefresh?.();
+    } catch (error) {
+      console.error("[handleColumnReorder] 순서 변경 저장 실패:", error);
+      toast.error("컬럼 순서 변경 저장에 실패했습니다.");
+    }
+  }, [screenId, onRefresh]);
+
+  // 통계 계산 (layoutItems의 컬럼 수도 포함)
+  const stats = useMemo(() => {
+    const totalJoins = filterTables.reduce(
+      (sum, ft) => sum + (ft.joinColumnRefs?.length || 0),
+      0
+    );
+    const totalFilters = filterTables.reduce(
+      (sum, ft) => sum + (ft.filterColumns?.length || 0),
+      0
+    );
+
+    // layoutItems에서 사용하는 컬럼 수 계산 (usedColumns + bindField)
+    const layoutColumnsSet = new Set<string>();
+    layoutItems.forEach((item) => {
+      if (item.usedColumns) {
+        item.usedColumns.forEach((col) => layoutColumnsSet.add(col));
+      }
+      // bindField도 포함 (인풋 필드 등)
+      if (item.bindField) {
+        layoutColumnsSet.add(item.bindField);
+      }
+    });
+    const layoutColumnCount = layoutColumnsSet.size;
+
+    return {
+      tableCount: 1 + filterTables.length, // 메인 + 필터
+      fieldCount: layoutColumnCount > 0 ? layoutColumnCount : fieldMappings.length,
+      joinCount: totalJoins,
+      filterCount: totalFilters,
+      flowCount: dataFlows.length,
+      usedFields: layoutColumnsSet, // 사용 중인 컬럼 Set
+    };
+  }, [filterTables, fieldMappings, dataFlows, layoutItems]);
+
+  return (
+    <div className="space-y-6">
+      {/* 기본 정보 카드 */}
+      <div className="grid grid-cols-2 gap-4 md:grid-cols-5">
+        <div className="rounded-lg border bg-blue-50 p-4">
+          <div className="text-2xl font-bold text-blue-600">{stats.tableCount}</div>
+          <div className="text-xs text-blue-700">연결된 테이블</div>
+        </div>
+        <div className="rounded-lg border bg-purple-50 p-4">
+          <div className="text-2xl font-bold text-purple-600">{stats.fieldCount}</div>
+          <div className="text-xs text-purple-700">필드 매핑</div>
+        </div>
+        <div className="rounded-lg border bg-orange-50 p-4">
+          <div className="text-2xl font-bold text-orange-600">{stats.joinCount}</div>
+          <div className="text-xs text-orange-700">조인 설정</div>
+        </div>
+        <div className="rounded-lg border bg-green-50 p-4">
+          <div className="text-2xl font-bold text-green-600">{stats.filterCount}</div>
+          <div className="text-xs text-green-700">필터 컬럼</div>
+        </div>
+        <div className="rounded-lg border bg-pink-50 p-4">
+          <div className="text-2xl font-bold text-pink-600">{stats.flowCount}</div>
+          <div className="text-xs text-pink-700">데이터 흐름</div>
+        </div>
+      </div>
+
+      {/* 메인 테이블 (아코디언 형식) */}
+      <div className="space-y-2">
+        <div className="flex items-center justify-between">
+          <h3 className="flex items-center gap-2 text-sm font-semibold">
+            <Database className="h-4 w-4 text-blue-500" />
+            메인 테이블
+          </h3>
+          {mainTable && (
+            <Button
+              variant="outline"
+              size="sm"
+              className="h-7 gap-1 text-xs"
+              onClick={() => onOpenTableSetting?.(mainTable, mainTableLabel)}
+            >
+              <Settings2 className="h-3 w-3" />
+              테이블 설정
+            </Button>
+          )}
+        </div>
+        {mainTable ? (
+          <TableColumnAccordion 
+            tableName={mainTable} 
+            tableLabel={mainTableLabel}
+            tableType="main"
+            usedFields={stats.usedFields}
+            columnMappings={
+              // layoutItems에서 컬럼 매핑 정보 추출 (y 좌표 순서대로)
+              layoutItems
+                .slice()
+                .sort((a, b) => a.y - b.y) // 화면 순서대로 정렬
+                .flatMap((item, idx) => {
+                  const cols: string[] = [];
+                  // usedColumns에서 가져오기
+                  if (item.usedColumns) {
+                    cols.push(...item.usedColumns);
+                  }
+                  // bindField도 포함
+                  if (item.bindField && !cols.includes(item.bindField)) {
+                    cols.push(item.bindField);
+                  }
+                  return cols.map(col => ({
+                    columnName: col,
+                    fieldLabel: col,
+                    order: idx * 100 + cols.indexOf(col),
+                  }));
+                })
+                // 중복 제거 (첫 번째 매핑만 유지)
+                .filter((mapping, idx, arr) => 
+                  arr.findIndex(m => m.columnName.toLowerCase() === mapping.columnName.toLowerCase()) === idx
+                )
+            }
+            onColumnChange={handleColumnChange}
+            onColumnReorder={(newOrder) => handleColumnReorder("main", newOrder)}
+            onJoinSettingSaved={onRefresh}
+          />
+        ) : (
+          <div className="rounded-lg border border-dashed p-4 text-center text-sm text-muted-foreground">
+            메인 테이블이 설정되지 않았습니다.
+          </div>
+        )}
+      </div>
+
+      {/* 연결된 필터 테이블 (아코디언 형식) */}
+      <div className="space-y-2">
+        <h3 className="flex items-center gap-2 text-sm font-semibold">
+          <Link2 className="h-4 w-4 text-purple-500" />
+          필터 테이블 ({filterTables.length}개)
+        </h3>
+        {filterTables.length > 0 ? (
+          <div className="space-y-2">
+            {filterTables.map((ft, idx) => {
+              // 이 필터 테이블에서 사용되는 컬럼 매핑 정보 추출
+              // 1. layoutItems의 usedColumns에서 추출
+              const usedColumnMappings: ColumnMapping[] = layoutItems
+                .slice()
+                .sort((a, b) => a.y - b.y)
+                .flatMap((item, itemIdx) => 
+                  (item.usedColumns || []).map(col => ({
+                    columnName: col,
+                    fieldLabel: col,
+                    order: itemIdx * 100 + (item.usedColumns?.indexOf(col) || 0),
+                  }))
+                );
+              
+              // 2. 조인 컬럼도 필드로 추가 (화면에서 조인 테이블 데이터를 보여주므로)
+              const joinColumnMappings: ColumnMapping[] = (ft.joinColumnRefs || []).map((ref, refIdx) => ({
+                columnName: ref.column,
+                fieldLabel: ref.column,
+                order: 1000 + refIdx, // 조인 컬럼은 후순위
+              }));
+              
+              // 3. 합치고 중복 제거
+              const filterTableColumnMappings: ColumnMapping[] = [...usedColumnMappings, ...joinColumnMappings]
+                .filter((mapping, i, arr) => 
+                  arr.findIndex(m => m.columnName.toLowerCase() === mapping.columnName.toLowerCase()) === i
+                );
+              
+              return (
+                <TableColumnAccordion
+                  key={`${ft.tableName}-${idx}`}
+                  tableName={ft.tableName}
+                  tableLabel={ft.tableLabel}
+                  tableType="filter"
+                  mainTable={mainTable}
+                  filterKeyMapping={ft.filterKeyMapping}
+                  joinColumnRefs={ft.joinColumnRefs}
+                  columnMappings={filterTableColumnMappings}
+                  onColumnChange={handleColumnChange}
+                  onColumnReorder={(newOrder) => handleColumnReorder("filter", newOrder)}
+                  onJoinSettingSaved={onRefresh}
+                />
+              );
+            })}
+          </div>
+        ) : (
+          <div className="rounded-lg border border-dashed p-4 text-center text-sm text-muted-foreground">
+            연결된 필터 테이블이 없습니다.
+          </div>
+        )}
+      </div>
+
+      {/* 데이터 흐름 요약 */}
+      <div className="space-y-2">
+        <h3 className="flex items-center gap-2 text-sm font-semibold">
+          <GitBranch className="h-4 w-4 text-pink-500" />
+          데이터 흐름 ({dataFlows.length}개)
+        </h3>
+        {dataFlows.length > 0 ? (
+          <div className="space-y-2">
+            {dataFlows.slice(0, 3).map((flow) => (
+              <div
+                key={flow.id}
+                className="flex items-center gap-2 rounded-lg border bg-pink-50/50 p-3 text-sm"
+              >
+                <Badge variant="outline" className="bg-pink-100 text-pink-700">
+                  {flow.flow_type}
+                </Badge>
+                <span className="flex-1">{flow.description || "설명 없음"}</span>
+                <ArrowRight className="h-4 w-4 text-muted-foreground" />
+                <span className="text-muted-foreground">화면 {flow.target_screen_id}</span>
+              </div>
+            ))}
+            {dataFlows.length > 3 && (
+              <div className="text-center text-xs text-muted-foreground">
+                +{dataFlows.length - 3}개 더 있음
+              </div>
+            )}
+          </div>
+        ) : (
+          <div className="rounded-lg border border-dashed p-4 text-center text-sm text-muted-foreground">
+            설정된 데이터 흐름이 없습니다.
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+// ============================================================
+// 탭 2: 필드 매핑
+// ============================================================
+
+interface FieldMappingTabProps {
+  screenId: number;
+  mainTable?: string;
+  fieldMappings: FieldMappingInfo[];
+  layoutItems: LayoutItem[];
+  loading: boolean;
+}
+
+function FieldMappingTab({
+  screenId,
+  mainTable,
+  fieldMappings,
+  layoutItems,
+  loading,
+}: FieldMappingTabProps) {
+  // 편집 모드 상태
+  const [isEditMode, setIsEditMode] = useState(false);
+  // 테이블 컬럼 목록 (편집용)
+  const [tableColumns, setTableColumns] = useState<ColumnTypeInfo[]>([]);
+  const [loadingTableColumns, setLoadingTableColumns] = useState(false);
+  // 편집 중인 컬럼 정보
+  const [editingColumn, setEditingColumn] = useState<{
+    componentIdx: number;
+    columnIdx: number;
+    currentColumn: string;
+  } | null>(null);
+  const [editPopoverOpen, setEditPopoverOpen] = useState(false);
+  
+  // 테이블 컬럼 로드
+  const loadTableColumns = useCallback(async () => {
+    if (!mainTable || tableColumns.length > 0) return;
+    
+    setLoadingTableColumns(true);
+    try {
+      const result = await tableManagementApi.getColumnList(mainTable);
+      if (result.success && result.data?.columns) {
+        setTableColumns(result.data.columns);
+      }
+    } catch (error) {
+      console.error("테이블 컬럼 로드 실패:", error);
+    } finally {
+      setLoadingTableColumns(false);
+    }
+  }, [mainTable, tableColumns.length]);
+  
+  // 편집 모드 진입 시 컬럼 로드
+  useEffect(() => {
+    if (isEditMode) {
+      loadTableColumns();
+    }
+  }, [isEditMode, loadTableColumns]);
+
+  // 화면 컴포넌트에서 사용하는 컬럼 정보 추출
+  const componentColumns = useMemo(() => {
+    const result: Array<{
+      componentKind: string;
+      componentLabel?: string;
+      columns: string[];
+      joinColumns: string[];
+    }> = [];
+
+    layoutItems.forEach((item) => {
+      if (item.usedColumns && item.usedColumns.length > 0) {
+        result.push({
+          componentKind: item.componentKind,
+          componentLabel: item.label,
+          columns: item.usedColumns,
+          joinColumns: item.joinColumns || [],
+        });
+      }
+    });
+
+    return result;
+  }, [layoutItems]);
+
+  // 전체 컬럼 수 계산
+  const totalColumns = useMemo(() => {
+    const allColumns = new Set<string>();
+    componentColumns.forEach((comp) => {
+      comp.columns.forEach((col) => allColumns.add(col));
+    });
+    return allColumns.size;
+  }, [componentColumns]);
+  
+  // 컬럼명 → 표시명 매핑 (테이블 컬럼에서 추출)
+  const columnDisplayMap = useMemo(() => {
+    const map: Record<string, string> = {};
+    tableColumns.forEach((tc) => {
+      map[tc.columnName] = tc.displayName || tc.columnName;
+    });
+    return map;
+  }, [tableColumns]);
+
+  // 컴포넌트 타입별 그룹핑 (기존 fieldMappings용)
+  const groupedMappings = useMemo(() => {
+    const grouped: Record<string, FieldMappingInfo[]> = {};
+
+    fieldMappings.forEach((mapping) => {
+      const type = mapping.componentType || "기타";
+      if (!grouped[type]) {
+        grouped[type] = [];
+      }
+      grouped[type].push(mapping);
+    });
+
+    return grouped;
+  }, [fieldMappings]);
+
+  const componentTypes = Object.keys(groupedMappings);
+
+  if (loading) {
+    return (
+      <div className="flex h-64 items-center justify-center">
+        <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* 화면 컴포넌트별 컬럼 사용 현황 */}
+      <div className="space-y-4">
+        <div className="flex items-center justify-between">
+          <div>
+            <h3 className="text-sm font-semibold">화면 컴포넌트별 컬럼 사용 현황</h3>
+            <p className="text-xs text-muted-foreground">
+              {isEditMode 
+                ? "컬럼을 클릭하여 매핑을 변경할 수 있습니다."
+                : "각 컴포넌트에서 사용하는 테이블 컬럼을 확인합니다."}
+            </p>
+          </div>
+          <div className="flex items-center gap-2">
+            <Badge variant="outline" className="text-xs">
+              총 {totalColumns}개 컬럼
+            </Badge>
+            <Button
+              variant={isEditMode ? "default" : "outline"}
+              size="sm"
+              onClick={() => setIsEditMode(!isEditMode)}
+              className="h-7 text-xs"
+            >
+              {isEditMode ? (
+                <>
+                  <Eye className="mr-1 h-3 w-3" />
+                  보기 모드
+                </>
+              ) : (
+                <>
+                  <Pencil className="mr-1 h-3 w-3" />
+                  편집 모드
+                </>
+              )}
+            </Button>
+          </div>
+        </div>
+
+        {componentColumns.length === 0 ? (
+          <div className="rounded-lg border border-dashed p-8 text-center text-muted-foreground">
+            <Columns3 className="mx-auto mb-2 h-8 w-8" />
+            <p className="text-sm">화면 컴포넌트에서 사용하는 컬럼 정보가 없습니다.</p>
+          </div>
+        ) : (
+          <div className="space-y-3">
+            {componentColumns.map((comp, idx) => (
+              <div
+                key={idx}
+                className="rounded-lg border bg-white overflow-hidden"
+              >
+                {/* 컴포넌트 헤더 */}
+                <div className="flex items-center justify-between px-3 py-2 bg-gray-50 border-b">
+                  <div className="flex items-center gap-2">
+                    <Table2 className="h-4 w-4 text-blue-500" />
+                    <span className="text-sm font-medium">
+                      {comp.componentLabel || comp.componentKind}
+                    </span>
+                    <Badge variant="outline" className="text-[10px]">
+                      {comp.componentKind}
+                    </Badge>
+                  </div>
+                  <Badge variant="outline" className="text-xs">
+                    {comp.columns.length}개 필드
+                  </Badge>
+                </div>
+                
+                {/* 필드 → 컬럼 매핑 테이블 */}
+                <div className="divide-y">
+                  {/* 테이블 헤더 */}
+                  <div className="grid grid-cols-[1fr_28px_1fr] gap-1 px-3 py-1.5 bg-gray-100 text-[10px] font-medium text-gray-500 uppercase">
+                    <span>필드명 (화면 표시)</span>
+                    <span></span>
+                    <span>컬럼명 (데이터베이스)</span>
+                  </div>
+                  
+                  {/* 매핑 행들 */}
+                  {comp.columns.map((col, cIdx) => {
+                    const isJoinColumn = comp.joinColumns.includes(col);
+                    const displayName = columnDisplayMap[col] || col;
+                    const isEditing = editingColumn?.componentIdx === idx && editingColumn?.columnIdx === cIdx;
+                    
+                    return (
+                      <div
+                        key={cIdx}
+                        className={cn(
+                          "grid grid-cols-[1fr_28px_1fr] gap-1 px-3 py-1.5 items-center text-xs",
+                          isJoinColumn && "bg-orange-50"
+                        )}
+                      >
+                        {/* 필드명 (화면 표시) */}
+                        <div className="flex items-center gap-1.5 min-w-0">
+                          <span className="font-medium text-gray-900 truncate">
+                            {displayName}
+                          </span>
+                          {isJoinColumn && (
+                            <Badge variant="outline" className="text-[9px] bg-orange-100 text-orange-700 px-1 py-0 flex-shrink-0">
+                              조인
+                            </Badge>
+                          )}
+                        </div>
+                        
+                        {/* 화살표 */}
+                        <div className="flex justify-center">
+                          <ArrowRight className="h-3 w-3 text-gray-400" />
+                        </div>
+                        
+                        {/* 컬럼명 (데이터베이스) */}
+                        {isEditMode ? (
+                          <Popover
+                            open={isEditing && editPopoverOpen}
+                            onOpenChange={(open) => {
+                              if (open) {
+                                setEditingColumn({ componentIdx: idx, columnIdx: cIdx, currentColumn: col });
+                              } else {
+                                setEditingColumn(null);
+                              }
+                              setEditPopoverOpen(open);
+                            }}
+                          >
+                            <PopoverTrigger asChild>
+                              <button
+                                className={cn(
+                                  "flex items-center gap-1 px-2 py-0.5 rounded text-left min-w-0",
+                                  "hover:bg-blue-50 border border-transparent hover:border-blue-300",
+                                  "transition-colors cursor-pointer group"
+                                )}
+                              >
+                                <code className="text-blue-700 font-mono text-[11px] truncate">{col}</code>
+                                <Pencil className="h-3 w-3 text-gray-400 group-hover:text-blue-500 flex-shrink-0" />
+                              </button>
+                            </PopoverTrigger>
+                            <PopoverContent className="w-64 p-0" align="start">
+                              <Command>
+                                <CommandInput 
+                                  placeholder="컬럼 검색..." 
+                                  className="text-xs"
+                                />
+                                <CommandList>
+                                  <CommandEmpty className="text-xs py-2 text-center">
+                                    컬럼을 찾을 수 없습니다.
+                                  </CommandEmpty>
+                                  <CommandGroup heading="테이블 컬럼">
+                                    {loadingTableColumns ? (
+                                      <div className="flex items-center justify-center py-4">
+                                        <Loader2 className="h-4 w-4 animate-spin" />
+                                      </div>
+                                    ) : (
+                                      tableColumns.map((tableCol) => (
+                                        <CommandItem
+                                          key={tableCol.columnName}
+                                          value={tableCol.columnName}
+                                          onSelect={(value) => {
+                                            toast.info(`컬럼 변경: ${col} → ${value}`, {
+                                              description: "저장 기능은 아직 구현 중입니다."
+                                            });
+                                            setEditPopoverOpen(false);
+                                            setEditingColumn(null);
+                                          }}
+                                          className="text-xs"
+                                        >
+                                          <div className="flex flex-col">
+                                            <span className={cn(
+                                              "font-medium",
+                                              tableCol.columnName === col && "text-blue-600"
+                                            )}>
+                                              {tableCol.displayName || tableCol.columnName}
+                                            </span>
+                                            {tableCol.displayName && tableCol.displayName !== tableCol.columnName && (
+                                              <span className="text-[10px] text-muted-foreground font-mono">
+                                                {tableCol.columnName}
+                                              </span>
+                                            )}
+                                          </div>
+                                          {tableCol.columnName === col && (
+                                            <Check className="ml-auto h-3 w-3 text-blue-600" />
+                                          )}
+                                        </CommandItem>
+                                      ))
+                                    )}
+                                  </CommandGroup>
+                                </CommandList>
+                              </Command>
+                            </PopoverContent>
+                          </Popover>
+                        ) : (
+                          <code className="text-blue-700 font-mono text-[11px] truncate">{col}</code>
+                        )}
+                      </div>
+                    );
+                  })}
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+
+      {/* 서브 테이블 연결 관계 (기존 fieldMappings) */}
+      {fieldMappings.length > 0 && (
+        <div className="space-y-4">
+          <div className="flex items-center justify-between">
+            <div>
+              <h3 className="text-sm font-semibold">서브 테이블 연결 관계</h3>
+              <p className="text-xs text-muted-foreground">
+                메인 테이블과 서브 테이블 간의 필드 연결 관계입니다.
+              </p>
+            </div>
+            <Badge variant="outline" className="text-xs">
+              총 {fieldMappings.length}개 연결
+            </Badge>
+          </div>
+
+          <div className="rounded-lg border">
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead className="w-[50px] text-xs">#</TableHead>
+                  <TableHead className="text-xs">메인 테이블 컬럼</TableHead>
+                  <TableHead className="w-[60px] text-center text-xs"></TableHead>
+                  <TableHead className="text-xs">서브 테이블</TableHead>
+                  <TableHead className="text-xs">서브 테이블 컬럼</TableHead>
+                  <TableHead className="text-xs">연결 타입</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {fieldMappings.map((mapping, idx) => (
+                  <TableRow key={idx}>
+                    <TableCell className="text-xs text-muted-foreground">
+                      {idx + 1}
+                    </TableCell>
+                    <TableCell className="text-xs font-medium">
+                      <Badge variant="outline" className="bg-blue-50 text-blue-700">
+                        {mainTable}.{mapping.targetField}
+                      </Badge>
+                    </TableCell>
+                    <TableCell className="text-center">
+                      <ArrowRight className="mx-auto h-3 w-3 text-gray-400" />
+                    </TableCell>
+                    <TableCell className="text-xs">
+                      <Badge variant="outline" className="bg-purple-50 text-purple-700">
+                        {mapping.sourceTable || "-"}
+                      </Badge>
+                    </TableCell>
+                    <TableCell className="text-xs">
+                      <Badge variant="outline" className="bg-green-50 text-green-700">
+                        {mapping.sourceField}
+                      </Badge>
+                    </TableCell>
+                    <TableCell className="text-xs text-muted-foreground">
+                      {mapping.componentType || "-"}
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </div>
+
+          {/* 컴포넌트 타입별 요약 */}
+          {componentTypes.length > 0 && (
+            <div className="space-y-2">
+              <h4 className="text-xs font-medium text-muted-foreground">연결 타입별 분류</h4>
+              <div className="flex flex-wrap gap-2">
+                {componentTypes.map((type) => (
+                  <Badge
+                    key={type}
+                    variant="outline"
+                    className="gap-1 bg-gray-50"
+                  >
+                    {type}
+                    <span className="rounded-full bg-gray-200 px-1.5 text-[10px]">
+                      {groupedMappings[type].length}
+                    </span>
+                  </Badge>
+                ))}
+              </div>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ============================================================
+// 탭 3: 데이터 흐름
+// ============================================================
+
+interface DataFlowTabProps {
+  screenId: number;
+  groupId?: number;
+  dataFlows: DataFlow[];
+  loading: boolean;
+  onReload: () => void;
+  onSaveSuccess?: () => void;
+}
+
+function DataFlowTab({
+  screenId,
+  groupId,
+  dataFlows,
+  loading,
+  onReload,
+  onSaveSuccess,
+}: DataFlowTabProps) {
+  const [isEditing, setIsEditing] = useState(false);
+  const [editItem, setEditItem] = useState<DataFlow | null>(null);
+  const [formData, setFormData] = useState({
+    target_screen_id: "",
+    action_type: "navigate",
+    data_mapping: "",
+    flow_type: "forward",
+    description: "",
+    is_active: "Y",
+  });
+
+  // 폼 초기화
+  const resetForm = () => {
+    setFormData({
+      target_screen_id: "",
+      action_type: "navigate",
+      data_mapping: "",
+      flow_type: "forward",
+      description: "",
+      is_active: "Y",
+    });
+    setEditItem(null);
+    setIsEditing(false);
+  };
+
+  // 수정 모드
+  const handleEdit = (item: DataFlow) => {
+    setEditItem(item);
+    setFormData({
+      target_screen_id: String(item.target_screen_id),
+      action_type: item.action_type,
+      data_mapping: item.data_mapping || "",
+      flow_type: item.flow_type,
+      description: item.description || "",
+      is_active: item.is_active,
+    });
+    setIsEditing(true);
+  };
+
+  // 저장
+  const handleSave = async () => {
+    if (!formData.target_screen_id) {
+      toast.error("대상 화면을 선택해주세요.");
+      return;
+    }
+
+    try {
+      const payload = {
+        source_screen_id: screenId,
+        target_screen_id: parseInt(formData.target_screen_id),
+        action_type: formData.action_type,
+        data_mapping: formData.data_mapping || null,
+        flow_type: formData.flow_type,
+        description: formData.description || null,
+        is_active: formData.is_active,
+      };
+
+      let response;
+      if (editItem) {
+        response = await updateDataFlow(editItem.id, payload);
+      } else {
+        response = await createDataFlow(payload);
+      }
+
+      if (response.success) {
+        toast.success(editItem ? "데이터 흐름이 수정되었습니다." : "데이터 흐름이 추가되었습니다.");
+        resetForm();
+        onReload();
+        onSaveSuccess?.();
+      } else {
+        toast.error(response.message || "저장에 실패했습니다.");
+      }
+    } catch (error) {
+      console.error("저장 오류:", error);
+      toast.error("저장 중 오류가 발생했습니다.");
+    }
+  };
+
+  // 삭제
+  const handleDelete = async (id: number) => {
+    if (!confirm("정말로 삭제하시겠습니까?")) return;
+
+    try {
+      const response = await deleteDataFlow(id);
+      if (response.success) {
+        toast.success("데이터 흐름이 삭제되었습니다.");
+        onReload();
+        onSaveSuccess?.();
+      } else {
+        toast.error(response.message || "삭제에 실패했습니다.");
+      }
+    } catch (error) {
+      console.error("삭제 오류:", error);
+      toast.error("삭제 중 오류가 발생했습니다.");
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="flex h-64 items-center justify-center">
+        <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-4">
+      {/* 입력 폼 */}
+      <div className="space-y-3 rounded-lg bg-muted/50 p-4">
+        <div className="text-sm font-medium">
+          {isEditing ? "데이터 흐름 수정" : "새 데이터 흐름 추가"}
+        </div>
+
+        <div className="grid grid-cols-1 gap-3 sm:grid-cols-3">
+          <div>
+            <Label className="text-xs">대상 화면 ID *</Label>
+            <Input
+              type="number"
+              value={formData.target_screen_id}
+              onChange={(e) =>
+                setFormData({ ...formData, target_screen_id: e.target.value })
+              }
+              placeholder="화면 ID"
+              className="h-8 text-xs"
+            />
+          </div>
+          <div>
+            <Label className="text-xs">액션 타입</Label>
+            <SearchableSelect
+              value={formData.action_type}
+              onValueChange={(v) => setFormData({ ...formData, action_type: v })}
+              options={[
+                { value: "navigate", label: "화면 이동" },
+                { value: "modal", label: "모달 열기" },
+                { value: "callback", label: "콜백" },
+                { value: "refresh", label: "새로고침" },
+              ]}
+              placeholder="액션 선택"
+            />
+          </div>
+          <div>
+            <Label className="text-xs">흐름 타입</Label>
+            <SearchableSelect
+              value={formData.flow_type}
+              onValueChange={(v) => setFormData({ ...formData, flow_type: v })}
+              options={[
+                { value: "forward", label: "전달 (Forward)" },
+                { value: "return", label: "반환 (Return)" },
+                { value: "broadcast", label: "브로드캐스트" },
+              ]}
+              placeholder="흐름 선택"
+            />
+          </div>
+        </div>
+
+        <div>
+          <Label className="text-xs">설명</Label>
+          <Textarea
+            value={formData.description}
+            onChange={(e) =>
+              setFormData({ ...formData, description: e.target.value })
+            }
+            placeholder="데이터 흐름에 대한 설명"
+            className="h-16 resize-none text-xs"
+          />
+        </div>
+
+        <div className="flex justify-end gap-2">
+          {isEditing && (
+            <Button variant="outline" size="sm" onClick={resetForm}>
+              취소
+            </Button>
+          )}
+          <Button size="sm" onClick={handleSave} className="gap-1">
+            <Save className="h-4 w-4" />
+            {isEditing ? "수정" : "추가"}
+          </Button>
+        </div>
+      </div>
+
+      {/* 목록 */}
+      <div className="rounded-lg border">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead className="text-xs">대상 화면</TableHead>
+              <TableHead className="text-xs">액션</TableHead>
+              <TableHead className="text-xs">흐름 타입</TableHead>
+              <TableHead className="text-xs">설명</TableHead>
+              <TableHead className="w-[100px] text-xs">작업</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {dataFlows.length === 0 ? (
+              <TableRow>
+                <TableCell
+                  colSpan={5}
+                  className="py-8 text-center text-sm text-muted-foreground"
+                >
+                  등록된 데이터 흐름이 없습니다.
+                </TableCell>
+              </TableRow>
+            ) : (
+              dataFlows.map((flow) => (
+                <TableRow key={flow.id}>
+                  <TableCell className="text-xs font-medium">
+                    화면 {flow.target_screen_id}
+                  </TableCell>
+                  <TableCell className="text-xs">
+                    <Badge variant="outline" className="text-xs">
+                      {flow.action_type}
+                    </Badge>
+                  </TableCell>
+                  <TableCell className="text-xs">
+                    <Badge
+                      variant="outline"
+                      className={cn(
+                        "text-xs",
+                        flow.flow_type === "forward" && "bg-blue-50 text-blue-700",
+                        flow.flow_type === "return" && "bg-green-50 text-green-700",
+                        flow.flow_type === "broadcast" && "bg-purple-50 text-purple-700"
+                      )}
+                    >
+                      {flow.flow_type}
+                    </Badge>
+                  </TableCell>
+                  <TableCell className="text-xs text-muted-foreground">
+                    {flow.description || "-"}
+                  </TableCell>
+                  <TableCell>
+                    <div className="flex gap-1">
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        className="h-7 w-7"
+                        onClick={() => handleEdit(flow)}
+                      >
+                        <Pencil className="h-3 w-3" />
+                      </Button>
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        className="h-7 w-7 text-destructive"
+                        onClick={() => handleDelete(flow.id)}
+                      >
+                        <Trash2 className="h-3 w-3" />
+                      </Button>
+                    </div>
+                  </TableCell>
+                </TableRow>
+              ))
+            )}
+          </TableBody>
+        </Table>
+      </div>
+    </div>
+  );
+}
+
+// ============================================================
+// 탭: 제어 관리
+// ============================================================
+
+interface ButtonControlInfo {
+  id: string;
+  label: string;
+  actionType: string;
+  targetTable?: string;
+  operations?: string[];
+  confirmMessage?: string;
+  confirmationEnabled?: boolean;
+  // 버튼 스타일
+  backgroundColor?: string;
+  textColor?: string;
+  // 모달/네비게이션 관련
+  modalScreenId?: number;
+  navigateScreenId?: number;
+  // 데이터 흐름 제어
+  hasDataflowControl?: boolean;
+  dataflowControlMode?: string;
+  flowTiming?: "before" | "after";
+  linkedExternalCall?: {
+    id: number;
+    name: string;
+  };
+  // 다중 플로우 지원
+  linkedFlows?: {
+    id: number;
+    name: string;
+    timing?: "before" | "after";
+  }[];
+  // 레거시 호환 (단일 플로우)
+  linkedFlow?: {
+    id: number;
+    name: string;
+  };
+}
+
+interface ControlManagementTabProps {
+  screenId: number;
+  groupId?: number;
+  layoutItems: LayoutItem[];
+  loading: boolean;
+  onRefresh: () => void;
+}
+
+function ControlManagementTab({
+  screenId,
+  groupId,
+  layoutItems,
+  loading: parentLoading,
+  onRefresh,
+}: ControlManagementTabProps) {
+  const [buttonControls, setButtonControls] = useState<ButtonControlInfo[]>([]);
+  const [flows, setFlows] = useState<NodeFlow[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [expandedButton, setExpandedButton] = useState<string | null>(null);
+  const [editingButton, setEditingButton] = useState<string | null>(null);
+  const [editedValues, setEditedValues] = useState<Record<string, any>>({});
+
+  // 화면 목록 조회 (inGroup: 같은 그룹 내 화면인지)
+  const [screenList, setScreenList] = useState<{ id: number; name: string; inGroup?: boolean }[]>([]);
+  // 화면 검색 팝오버 상태
+  const [openModalScreenSearch, setOpenModalScreenSearch] = useState<string | null>(null);
+  const [openNavigateScreenSearch, setOpenNavigateScreenSearch] = useState<string | null>(null);
+  const [openFlowSearch, setOpenFlowSearch] = useState<string | null>(null);
+  
+  // 플로우 에디터 모달 상태 (전체 화면 임베드)
+  const [showFlowEditorModal, setShowFlowEditorModal] = useState(false);
+  const [flowEditorTargetButtonId, setFlowEditorTargetButtonId] = useState<string | null>(null);
+  
+  // 플로우 빠른 생성 다이얼로그 상태 (골격 생성용 - 레거시)
+  const [showQuickFlowDialog, setShowQuickFlowDialog] = useState(false);
+  const [quickFlowData, setQuickFlowData] = useState({
+    name: "",
+    description: "",
+    tableName: "",
+    tableLabel: "",
+    actionType: "update" as "insert" | "update" | "delete",
+    autoLink: true,
+    targetButtonId: null as string | null,
+  });
+  const [isCreatingFlow, setIsCreatingFlow] = useState(false);
+  
+  // 대기 중인 버튼 ID (새 창에서 플로우 생성 후 연동할 버튼)
+  const [pendingLinkButtonId, setPendingLinkButtonId] = useState<string | null>(null);
+
+  // postMessage 이벤트 리스너 (새 창에서 플로우 저장 완료 시)
+  useEffect(() => {
+    const handleMessage = async (event: MessageEvent) => {
+      if (event.data?.type === "FLOW_SAVED") {
+        const { flowId, flowName } = event.data;
+        
+        // 플로우 목록 새로고침
+        const flowList = await getNodeFlows();
+        setFlows(flowList);
+        
+        // 대기 중인 버튼에 연동
+        if (pendingLinkButtonId) {
+          const newFlow = {
+            id: flowId,
+            name: flowName,
+            timing: "after" as const,
+          };
+          
+          setEditedValues(prev => ({
+            ...prev,
+            [pendingLinkButtonId]: {
+              ...prev[pendingLinkButtonId],
+              linkedFlows: [
+                ...(prev[pendingLinkButtonId]?.linkedFlows || 
+                    buttonControls.find(b => b.id === pendingLinkButtonId)?.linkedFlows || []),
+                newFlow,
+              ],
+            },
+          }));
+          
+          toast.success(`플로우 "${flowName}"이(가) 버튼에 연동되었습니다`);
+          setPendingLinkButtonId(null);
+        } else {
+          toast.success(`플로우 "${flowName}"이(가) 생성되었습니다`);
+        }
+      }
+    };
+    
+    window.addEventListener("message", handleMessage);
+    return () => window.removeEventListener("message", handleMessage);
+  }, [pendingLinkButtonId, buttonControls]);
+  
+  // 제어 관리 페이지를 새 창으로 열기
+  const openFlowEditorInNewWindow = (buttonId?: string) => {
+    if (buttonId) {
+      setPendingLinkButtonId(buttonId);
+    }
+    window.open("/admin/systemMng/dataflow", "_blank", "width=1400,height=900");
+  };
+
+  // 데이터 로드
+  const loadData = useCallback(async () => {
+    setLoading(true);
+    try {
+      // 1. 화면 레이아웃에서 버튼 정보 추출
+      const layoutResponse = await screenApi.getLayout(screenId);
+      
+      if (layoutResponse?.components) {
+        const buttons: ButtonControlInfo[] = [];
+        
+        // 컴포넌트에서 버튼 추출 (화면 디자이너 구조 기준)
+        const extractButtons = (components: any[], depth = 0) => {
+          for (const comp of components) {
+            const config = comp.componentConfig || {};
+            
+            // 버튼 컴포넌트 필터링 (화면 디자이너 저장 구조 기준)
+            // 1. 새 시스템: type="component" && widgetType="button"
+            // 2. 새 시스템: componentConfig.webType="button"
+            // 3. 레거시: type="button"
+            const isButton = 
+              comp.widgetType === "button" ||
+              comp.webType === "button" ||
+              comp.type === "button" ||
+              config.webType === "button" ||
+              comp.componentType?.includes("button") ||
+              comp.componentKind?.includes("button");
+            
+            if (isButton) {
+              const webTypeConfig = comp.webTypeConfig || {};
+              const action = config.action || {};
+              const style = comp.style || {};
+              
+              buttons.push({
+                id: comp.id || comp.componentId || `btn-${buttons.length}`,
+                label: config.text || comp.label || comp.title || comp.name || "버튼",
+                actionType: typeof action === "string" ? action : (action.type || "custom"),
+                targetTable: config.tableName || webTypeConfig.tableName || comp.tableName,
+                operations: action.operations || [],
+                confirmMessage: action.confirmationMessage || action.confirmMessage || config.confirmMessage,
+                confirmationEnabled: action.confirmationEnabled ?? (!!action.confirmationMessage || !!action.confirmMessage),
+                // 버튼 스타일 (webTypeConfig 우선)
+                backgroundColor: webTypeConfig.backgroundColor || config.backgroundColor || style.backgroundColor,
+                textColor: webTypeConfig.textColor || config.textColor || style.color || style.labelColor,
+                // 모달/네비게이션 관련 (화면 디자이너는 targetScreenId 사용)
+                modalScreenId: action.targetScreenId || action.modalScreenId,
+                navigateScreenId: action.navigateScreenId || action.targetScreenId,
+                // 데이터 흐름 제어
+                hasDataflowControl: webTypeConfig.enableDataflowControl,
+                dataflowControlMode: webTypeConfig.dataflowConfig?.controlMode,
+                flowTiming: webTypeConfig.dataflowConfig?.flowConfig?.executionTiming,
+                linkedExternalCall: undefined, // TODO: 연결 정보 조회
+                // 다중 플로우 지원 (flowConfigs 배열 또는 단일 flowConfig)
+                linkedFlows: webTypeConfig.dataflowConfig?.flowConfigs?.map((fc: any) => ({
+                  id: fc.flowId,
+                  name: fc.flowName,
+                  timing: fc.executionTiming || "after",
+                })) || (webTypeConfig.dataflowConfig?.flowConfig ? [{
+                  id: webTypeConfig.dataflowConfig.flowConfig.flowId,
+                  name: webTypeConfig.dataflowConfig.flowConfig.flowName,
+                  timing: webTypeConfig.dataflowConfig.flowConfig.executionTiming || "after",
+                }] : []),
+                // 레거시 호환 (단일 플로우)
+                linkedFlow: webTypeConfig.dataflowConfig?.flowConfig ? {
+                  id: webTypeConfig.dataflowConfig.flowConfig.flowId,
+                  name: webTypeConfig.dataflowConfig.flowConfig.flowName,
+                } : undefined,
+              });
+            }
+            
+            // 자식 컴포넌트 처리 (여러 필드 확인)
+            if (comp.children && Array.isArray(comp.children)) {
+              extractButtons(comp.children, depth + 1);
+            }
+            // componentConfig 내 중첩된 컴포넌트 확인
+            if (comp.componentConfig?.children && Array.isArray(comp.componentConfig.children)) {
+              extractButtons(comp.componentConfig.children, depth + 1);
+            }
+            // items 배열 확인 (일부 레이아웃에서 사용)
+            if (comp.items && Array.isArray(comp.items)) {
+              extractButtons(comp.items, depth + 1);
+            }
+          }
+        };
+        
+        extractButtons(layoutResponse.components);
+        setButtonControls(buttons);
+      }
+
+      // 2. 플로우 목록 조회 (버튼 연동용) - node_flows 테이블에서 가져옴
+      try {
+        const flowList = await getNodeFlows();
+        console.log("플로우 목록 응답:", flowList);
+        setFlows(flowList);
+      } catch (flowError) {
+        console.error("플로우 목록 조회 실패:", flowError);
+      }
+
+      // 3. 화면 목록 조회 (모달/네비게이션용)
+      // 먼저 전체 화면 목록 가져오기 (기존 연결된 화면이 다른 그룹에 있을 수 있음)
+      // 모든 화면 데이터를 가져오기 위해 최대 크기로 조회
+      const allScreensResponse = await screenApi.getScreens({ size: 1000 });
+      const allScreensMap = new Map<number, string>();
+      if (allScreensResponse.data && allScreensResponse.data.length > 0) {
+        allScreensResponse.data.forEach((s: any) => {
+          // ScreenDefinition 타입: screenId, screenName 필드 사용
+          const sid = Number(s.screenId || s.screen_id || s.id);
+          const sname = s.screenName || s.screen_name || s.name || `화면 ${sid}`;
+          if (!isNaN(sid)) {
+            allScreensMap.set(sid, sname);
+          }
+        });
+      }
+
+      // 그룹 내 화면 목록
+      let groupScreenIds: number[] = [];
+      if (groupId) {
+        const groupResponse = await getScreenGroup(groupId);
+        if (groupResponse.success && groupResponse.data?.screens) {
+          // API 응답 필드명: screen_id, screen_name (snake_case) - 문자열일 수 있으므로 Number()로 변환
+          groupScreenIds = groupResponse.data.screens.map((s: any) => Number(s.screen_id || s.screenId || s.id)).filter(id => !isNaN(id));
+        }
+      }
+
+      // 그룹 내 화면 우선, 전체 화면도 포함
+      const screenListResult: { id: number; name: string; inGroup: boolean }[] = [];
+      
+      // 그룹 내 화면 먼저 추가 (숫자로 변환된 ID로 Map에서 조회)
+      groupScreenIds.forEach(sid => {
+        const name = allScreensMap.get(sid) || `화면 ${sid}`;
+        screenListResult.push({ id: sid, name, inGroup: true });
+        allScreensMap.delete(sid); // 중복 제거
+      });
+
+      // 나머지 전체 화면 추가 (다른 그룹에 있는 화면도 선택 가능하게)
+      allScreensMap.forEach((name, id) => {
+        screenListResult.push({ id, name, inGroup: false });
+      });
+
+      setScreenList(screenListResult);
+    } catch (error) {
+      console.error("제어 관리 데이터 로드 실패:", error);
+      toast.error("데이터 로드 실패");
+    } finally {
+      setLoading(false);
+    }
+  }, [screenId, groupId]);
+
+  useEffect(() => {
+    loadData();
+  }, [loadData]);
+
+  // 플로우 빠른 생성 함수
+  const handleQuickCreateFlow = async () => {
+    if (!quickFlowData.name.trim()) {
+      toast.error("플로우 이름을 입력해주세요");
+      return;
+    }
+    if (!quickFlowData.tableName) {
+      toast.error("테이블을 선택해주세요");
+      return;
+    }
+
+    setIsCreatingFlow(true);
+    try {
+      // 제어 플로우 에디터(FlowEditor.tsx onDrop)와 동일한 형식으로 flowData 생성
+      const timestamp = Date.now();
+      const sourceNodeId = `tableSource_${timestamp}`;
+      const actionNodeId = `${quickFlowData.actionType}Action_${timestamp}`;
+      
+      // 액션 타입별 노드 타입 결정
+      let actionNodeType: string;
+      
+      switch (quickFlowData.actionType) {
+        case "insert":
+          actionNodeType = "insertAction";
+          break;
+        case "update":
+          actionNodeType = "updateAction";
+          break;
+        case "delete":
+          actionNodeType = "deleteAction";
+          break;
+        default:
+          actionNodeType = "updateAction";
+      }
+
+      // 액션 노드 기본 데이터 (FlowEditor.tsx onDrop 패턴과 동일)
+      const actionNodeData: any = {
+        displayName: quickFlowData.actionType === "insert" ? "데이터 추가" 
+          : quickFlowData.actionType === "update" ? "데이터 수정" 
+          : "데이터 삭제",
+        // 🔥 FlowEditor.tsx와 동일한 기본값
+        targetType: "internal",
+        targetTable: quickFlowData.tableName,
+        targetTableLabel: quickFlowData.tableLabel || quickFlowData.tableName,
+        fieldMappings: [],
+        options: {},
+      };
+
+      // update/delete는 whereConditions 추가
+      if (quickFlowData.actionType === "update" || quickFlowData.actionType === "delete") {
+        actionNodeData.whereConditions = [];
+      }
+
+      // delete는 fieldMappings 제거 (삭제에는 필드 매핑 불필요)
+      if (quickFlowData.actionType === "delete") {
+        delete actionNodeData.fieldMappings;
+      }
+
+      const flowData = {
+        nodes: [
+          {
+            id: sourceNodeId,
+            type: "tableSource",
+            position: { x: 100, y: 150 },
+            data: {
+              // 🔥 FlowEditor.tsx와 동일한 기본값 (TableSourceProperties에서 테이블 선택 시 설정됨)
+              displayName: quickFlowData.tableLabel || quickFlowData.tableName || "테이블 소스",
+              tableName: quickFlowData.tableName,
+              fields: [],
+              // dataSourceType은 TableSourceProperties에서 기본값 "context-data" 사용
+            },
+          },
+          {
+            id: actionNodeId,
+            type: actionNodeType,
+            position: { x: 450, y: 150 },
+            data: actionNodeData,
+          },
+        ],
+        edges: [
+          {
+            id: `edge_${timestamp}`,
+            source: sourceNodeId,
+            target: actionNodeId,
+            sourceHandle: null,
+            targetHandle: null,
+          },
+        ],
+      };
+
+      // 플로우 생성 API 호출
+      const actionLabel = quickFlowData.actionType === "insert" ? "데이터 추가" 
+        : quickFlowData.actionType === "update" ? "데이터 수정" 
+        : "데이터 삭제";
+      
+      const result = await createNodeFlow({
+        flowName: quickFlowData.name,
+        flowDescription: quickFlowData.description || `${quickFlowData.tableLabel || quickFlowData.tableName} ${actionLabel} 플로우`,
+        flowData: JSON.stringify(flowData),
+      });
+
+      toast.success(`플로우 "${quickFlowData.name}" 생성 완료`);
+
+      // 자동 연동 옵션이 켜져 있고 대상 버튼이 있으면 연동
+      if (quickFlowData.autoLink && quickFlowData.targetButtonId) {
+        const newFlow = {
+          id: result.flowId,
+          name: quickFlowData.name,
+          timing: "after" as const,
+        };
+        
+        // 해당 버튼의 linkedFlows에 추가
+        setEditedValues(prev => ({
+          ...prev,
+          [quickFlowData.targetButtonId!]: {
+            ...prev[quickFlowData.targetButtonId!],
+            linkedFlows: [
+              ...(prev[quickFlowData.targetButtonId!]?.linkedFlows || 
+                  buttonControls.find(b => b.id === quickFlowData.targetButtonId)?.linkedFlows || []),
+              newFlow,
+            ],
+          },
+        }));
+        
+        toast.success(`버튼에 플로우 자동 연동 완료`);
+      }
+
+      // 플로우 목록 새로고침
+      const flowList = await getNodeFlows();
+      setFlows(flowList);
+
+      // 다이얼로그 닫기 및 상태 초기화
+      setShowQuickFlowDialog(false);
+      setQuickFlowData({
+        name: "",
+        description: "",
+        tableName: "",
+        tableLabel: "",
+        actionType: "update",
+        autoLink: true,
+        targetButtonId: null,
+      });
+    } catch (error) {
+      console.error("플로우 생성 실패:", error);
+      toast.error("플로우 생성 실패");
+    } finally {
+      setIsCreatingFlow(false);
+    }
+  };
+
+  // 버튼 설정 저장
+  const handleSaveButton = async (buttonId: string) => {
+    const values = editedValues[buttonId];
+    if (!values) return;
+
+    try {
+      // 레이아웃에서 해당 버튼 찾아서 업데이트
+      const layoutResponse = await screenApi.getLayout(screenId);
+      if (!layoutResponse?.components) {
+        toast.error("레이아웃을 불러올 수 없습니다");
+        return;
+      }
+
+      // 버튼 컴포넌트 업데이트 (화면 디자이너 구조 기준)
+      const updateButton = (components: any[]): boolean => {
+        for (const comp of components) {
+          const config = comp.componentConfig || {};
+          
+          // 버튼 식별 조건 (화면 디자이너 저장 구조 기준)
+          const isButton = 
+            comp.widgetType === "button" ||
+            comp.webType === "button" ||
+            comp.type === "button" ||
+            config.webType === "button" ||
+            comp.componentType?.includes("button") ||
+            comp.componentKind?.includes("button");
+          
+          if ((comp.id === buttonId || comp.componentId === buttonId) && isButton) {
+            // componentConfig 업데이트
+            if (!comp.componentConfig) comp.componentConfig = {};
+            if (!comp.componentConfig.action) comp.componentConfig.action = {};
+            
+            // 버튼 라벨(텍스트) 업데이트
+            if (values.label !== undefined) {
+              comp.componentConfig.text = values.label;
+              // 레거시 호환: 여러 위치에 저장
+              comp.label = values.label;
+              comp.title = values.label;
+            }
+            
+            // 버튼 스타일(색상) 업데이트 (webTypeConfig에 저장해야 실제 버튼에 반영됨)
+            if (!comp.webTypeConfig) comp.webTypeConfig = {};
+            if (!comp.style) comp.style = {};
+            if (values.backgroundColor !== undefined) {
+              comp.webTypeConfig.backgroundColor = values.backgroundColor;
+              comp.componentConfig.backgroundColor = values.backgroundColor;
+              comp.style.backgroundColor = values.backgroundColor;
+            }
+            if (values.textColor !== undefined) {
+              comp.webTypeConfig.textColor = values.textColor;
+              comp.componentConfig.textColor = values.textColor;
+              comp.style.color = values.textColor;
+              comp.style.labelColor = values.textColor;
+            }
+            
+            // 액션 타입 업데이트
+            if (values.actionType) {
+              comp.componentConfig.action.type = values.actionType;
+            }
+            
+            // 대상 테이블 업데이트
+            if (values.targetTable !== undefined) {
+              comp.componentConfig.tableName = values.targetTable;
+            }
+            
+            // 확인 다이얼로그 설정 (save/delete 액션에서만 유효)
+            const currentActionType = values.actionType || comp.componentConfig.action?.type;
+            if (currentActionType === "save" || currentActionType === "delete") {
+              if (values.confirmMessage !== undefined) {
+                comp.componentConfig.action.confirmMessage = values.confirmMessage;
+              }
+            } else {
+              // save/delete가 아닌 경우 confirmMessage 제거
+              if (comp.componentConfig.action) {
+                delete comp.componentConfig.action.confirmMessage;
+              }
+            }
+            
+            // 모달/네비게이션 화면 설정 (화면 디자이너는 targetScreenId 사용)
+            if (values.modalScreenId !== undefined) {
+              comp.componentConfig.action.targetScreenId = values.modalScreenId || null;
+            }
+            
+            if (values.navigateScreenId !== undefined) {
+              comp.componentConfig.action.targetScreenId = values.navigateScreenId || null;
+            }
+            
+            if (values.operations) {
+              comp.componentConfig.action.operations = values.operations;
+            }
+            
+            // webTypeConfig 업데이트 (플로우 연동 - 다중 플로우 지원)
+            if (!comp.webTypeConfig) comp.webTypeConfig = {};
+            
+            // 다중 플로우 처리 (linkedFlows 배열)
+            if (values.linkedFlows !== undefined) {
+              if (values.linkedFlows && values.linkedFlows.length > 0) {
+                comp.webTypeConfig.enableDataflowControl = true;
+                comp.webTypeConfig.dataflowConfig = {
+                  controlMode: "flow",
+                  // 다중 플로우 저장
+                  flowConfigs: values.linkedFlows.map((lf: any) => ({
+                    flowId: lf.id,
+                    flowName: lf.name,
+                    executionTiming: lf.timing || "after",
+                  })),
+                  // 레거시 호환 - 첫 번째 플로우를 단일 flowConfig로도 저장
+                  flowConfig: {
+                    flowId: values.linkedFlows[0].id,
+                    flowName: values.linkedFlows[0].name,
+                    executionTiming: values.linkedFlows[0].timing || "after",
+                  },
+                };
+              } else {
+                // 플로우 연동 해제 (빈 배열)
+                comp.webTypeConfig.enableDataflowControl = false;
+                delete comp.webTypeConfig.dataflowConfig;
+              }
+            }
+            // 레거시 단일 플로우 처리
+            else if (values.linkedFlowId) {
+              comp.webTypeConfig.enableDataflowControl = true;
+              comp.webTypeConfig.dataflowConfig = {
+                controlMode: "flow",
+                flowConfig: {
+                  flowId: values.linkedFlowId,
+                  flowName: flows.find(f => f.flowId === values.linkedFlowId)?.flowName || "",
+                  executionTiming: values.flowTiming || "after",
+                },
+              };
+            } else if (values.linkedFlowId === null) {
+              // 플로우 연동 해제
+              comp.webTypeConfig.enableDataflowControl = false;
+              delete comp.webTypeConfig.dataflowConfig;
+            }
+            
+            return true;
+          }
+          
+          // 자식 컴포넌트 처리
+          if (comp.children && Array.isArray(comp.children)) {
+            if (updateButton(comp.children)) return true;
+          }
+          if (comp.componentConfig?.children && Array.isArray(comp.componentConfig.children)) {
+            if (updateButton(comp.componentConfig.children)) return true;
+          }
+          if (comp.items && Array.isArray(comp.items)) {
+            if (updateButton(comp.items)) return true;
+          }
+        }
+        return false;
+      };
+
+      if (updateButton(layoutResponse.components)) {
+        // 레이아웃 저장
+        await screenApi.saveLayout(screenId, layoutResponse);
+        toast.success("버튼 설정이 저장되었습니다");
+        setEditingButton(null);
+        setEditedValues(prev => {
+          const next = { ...prev };
+          delete next[buttonId];
+          return next;
+        });
+        loadData();
+        onRefresh();
+      } else {
+        toast.error("버튼을 찾을 수 없습니다");
+      }
+    } catch (error) {
+      console.error("버튼 설정 저장 실패:", error);
+      toast.error("저장 실패");
+    }
+  };
+
+  // 액션 타입 라벨 (화면 디자이너와 동일)
+  const getActionTypeLabel = (type: string) => {
+    const labels: Record<string, string> = {
+      save: "저장",
+      delete: "삭제",
+      edit: "편집",
+      copy: "복사",
+      navigate: "페이지 이동",
+      modal: "모달 열기",
+      openModalWithData: "데이터+모달",
+      openRelatedModal: "연관모달",
+      transferData: "데이터전달",
+      quickInsert: "즉시저장",
+      control: "제어흐름",
+      view_table_history: "이력보기",
+      excel_download: "엑셀다운",
+      excel_upload: "엑셀업로드",
+      barcode_scan: "바코드스캔",
+      code_merge: "코드병합",
+      operation_control: "운행제어",
+    };
+    return labels[type] || type;
+  };
+
+  // 액션 타입 색상 (화면 디자이너와 동일) - hover 상태 포함
+  const getActionTypeColor = (type: string) => {
+    switch (type) {
+      case "save":
+      case "quickInsert":
+        return "bg-green-100 text-green-700 hover:bg-green-100 hover:text-green-700";
+      case "delete":
+        return "bg-red-100 text-red-700 hover:bg-red-100 hover:text-red-700";
+      case "edit":
+      case "copy":
+        return "bg-blue-100 text-blue-700 hover:bg-blue-100 hover:text-blue-700";
+      case "modal":
+      case "openModalWithData":
+      case "openRelatedModal":
+        return "bg-purple-100 text-purple-700 hover:bg-purple-100 hover:text-purple-700";
+      case "navigate":
+        return "bg-cyan-100 text-cyan-700 hover:bg-cyan-100 hover:text-cyan-700";
+      case "transferData":
+      case "control":
+        return "bg-amber-100 text-amber-700 hover:bg-amber-100 hover:text-amber-700";
+      case "excel_download":
+      case "excel_upload":
+        return "bg-emerald-100 text-emerald-700 hover:bg-emerald-100 hover:text-emerald-700";
+      case "view_table_history":
+        return "bg-slate-100 text-slate-700 hover:bg-slate-100 hover:text-slate-700";
+      default:
+        return "bg-gray-100 text-gray-700 hover:bg-gray-100 hover:text-gray-700";
+    }
+  };
+
+  if (loading || parentLoading) {
+    return (
+      <div className="flex h-full items-center justify-center">
+        <Loader2 className="h-6 w-6 animate-spin text-primary" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* 버튼 액션 설정 - 구분된 섹션 */}
+      <div className="rounded-lg border border-blue-200 bg-blue-50/30">
+        <div className="flex items-center gap-2 px-3 py-2 border-b border-blue-200 bg-blue-100/50 rounded-t-lg">
+          <MousePointer className="h-4 w-4 text-blue-600" />
+          <span className="text-sm font-semibold text-blue-900">버튼 액션 설정</span>
+          <Badge className="h-5 text-[10px] bg-blue-600 text-white hover:bg-blue-600">
+            {buttonControls.length}개
+          </Badge>
+        </div>
+        
+        <div className="max-h-[350px] overflow-y-auto p-2">
+          {buttonControls.length === 0 ? (
+            <div className="flex flex-col items-center justify-center py-6 text-center">
+              <MousePointer className="mb-2 h-6 w-6 text-muted-foreground/50" />
+              <p className="text-sm text-muted-foreground">버튼이 없습니다</p>
+              <p className="text-xs text-muted-foreground">화면 디자이너에서 버튼을 추가하세요</p>
+            </div>
+          ) : (
+            <div className="divide-y">
+              {buttonControls.map((btn) => {
+                // 현재 편집 중인 값 또는 기본값
+                const currentLabel = editedValues[btn.id]?.label ?? btn.label;
+                const currentBgColor = editedValues[btn.id]?.backgroundColor ?? btn.backgroundColor ?? "#3b82f6";
+                const currentTextColor = editedValues[btn.id]?.textColor ?? btn.textColor ?? "#ffffff";
+                
+                return (
+                <div key={btn.id} className="py-3 px-1">
+                  {/* 버튼 헤더: 프리뷰 + 이름 입력 + 저장 버튼 */}
+                  <div className="flex items-center gap-3 mb-3">
+                    {/* 버튼 프리뷰 */}
+                    <div
+                      className="flex items-center justify-center px-3 py-1.5 rounded text-xs font-medium min-w-[60px] shrink-0"
+                      style={{
+                        backgroundColor: currentBgColor,
+                        color: currentTextColor,
+                      }}
+                    >
+                      {currentLabel || "버튼"}
+                    </div>
+                    
+                    {/* 버튼 이름 입력 */}
+                    <div className="flex-1">
+                      <Input
+                        value={currentLabel}
+                        onChange={(e) => setEditedValues(prev => ({
+                          ...prev,
+                          [btn.id]: { ...prev[btn.id], label: e.target.value }
+                        }))}
+                        className="h-7 text-sm"
+                        placeholder="버튼 이름"
+                      />
+                    </div>
+                    
+                    {btn.hasDataflowControl && (
+                      <Badge variant="outline" className="h-5 text-[10px] border-purple-300 text-purple-600 shrink-0">
+                        <Zap className="mr-1 h-2.5 w-2.5" />
+                        제어
+                      </Badge>
+                    )}
+                    <Button
+                      size="sm"
+                      className="h-7 text-xs px-3 shrink-0"
+                      onClick={() => handleSaveButton(btn.id)}
+                      disabled={!editedValues[btn.id]}
+                    >
+                      <Save className="mr-1 h-3 w-3" />
+                      저장
+                    </Button>
+                  </div>
+
+                  {/* 버튼 설정 (상시 편집) */}
+                  <div className="space-y-2">
+                    {/* 액션 타입 */}
+                    <div className="grid grid-cols-[80px_1fr] items-center gap-2">
+                      <Label className="text-xs text-muted-foreground">액션 타입</Label>
+                      <Select
+                        value={editedValues[btn.id]?.actionType || btn.actionType || "save"}
+                        onValueChange={(val) => setEditedValues(prev => ({
+                          ...prev,
+                          [btn.id]: { ...prev[btn.id], actionType: val }
+                        }))}
+                      >
+                        <SelectTrigger className="h-7 text-xs">
+                          <SelectValue placeholder="액션 선택" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="save" className="text-xs">저장</SelectItem>
+                          <SelectItem value="delete" className="text-xs">삭제</SelectItem>
+                          <SelectItem value="edit" className="text-xs">편집</SelectItem>
+                          <SelectItem value="copy" className="text-xs">복사</SelectItem>
+                          <SelectItem value="navigate" className="text-xs">페이지 이동</SelectItem>
+                          <SelectItem value="modal" className="text-xs">모달 열기</SelectItem>
+                          <SelectItem value="openModalWithData" className="text-xs">데이터 전달 + 모달</SelectItem>
+                          <SelectItem value="openRelatedModal" className="text-xs">연관 데이터 모달</SelectItem>
+                          <SelectItem value="transferData" className="text-xs">데이터 전달</SelectItem>
+                          <SelectItem value="quickInsert" className="text-xs">즉시 저장</SelectItem>
+                          <SelectItem value="control" className="text-xs">제어 흐름</SelectItem>
+                          <SelectItem value="view_table_history" className="text-xs">테이블 이력</SelectItem>
+                          <SelectItem value="excel_download" className="text-xs">엑셀 다운로드</SelectItem>
+                          <SelectItem value="excel_upload" className="text-xs">엑셀 업로드</SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </div>
+                    
+                    {/* 버튼 스타일 (배경색 + 글자색) */}
+                    <div className="grid grid-cols-[80px_1fr] items-center gap-2">
+                      <Label className="text-xs text-muted-foreground">버튼 색상</Label>
+                      <div className="flex items-center gap-2">
+                        {/* 배경색 */}
+                        <div className="flex items-center gap-1">
+                          <span className="text-[10px] text-muted-foreground">배경</span>
+                          <input
+                            type="color"
+                            value={currentBgColor}
+                            onChange={(e) => setEditedValues(prev => ({
+                              ...prev,
+                              [btn.id]: { ...prev[btn.id], backgroundColor: e.target.value }
+                            }))}
+                            className="h-6 w-8 rounded border cursor-pointer"
+                          />
+                        </div>
+                        {/* 글자색 */}
+                        <div className="flex items-center gap-1">
+                          <span className="text-[10px] text-muted-foreground">글자</span>
+                          <input
+                            type="color"
+                            value={currentTextColor}
+                            onChange={(e) => setEditedValues(prev => ({
+                              ...prev,
+                              [btn.id]: { ...prev[btn.id], textColor: e.target.value }
+                            }))}
+                            className="h-6 w-8 rounded border cursor-pointer"
+                          />
+                        </div>
+                        {/* 프리셋 색상 */}
+                        <div className="flex items-center gap-1 ml-2">
+                          {[
+                            { bg: "#3b82f6", text: "#ffffff", name: "파랑" },
+                            { bg: "#22c55e", text: "#ffffff", name: "초록" },
+                            { bg: "#ef4444", text: "#ffffff", name: "빨강" },
+                            { bg: "#6b7280", text: "#ffffff", name: "회색" },
+                            { bg: "#ffffff", text: "#374151", name: "흰색" },
+                          ].map((preset) => (
+                            <button
+                              key={preset.name}
+                              type="button"
+                              onClick={() => setEditedValues(prev => ({
+                                ...prev,
+                                [btn.id]: { ...prev[btn.id], backgroundColor: preset.bg, textColor: preset.text }
+                              }))}
+                              className="h-5 w-5 rounded border border-gray-300 hover:ring-2 hover:ring-blue-300 transition-all"
+                              style={{ backgroundColor: preset.bg }}
+                              title={preset.name}
+                            />
+                          ))}
+                        </div>
+                      </div>
+                    </div>
+
+                    {/* 확인 메시지 설정 (save/delete 액션에서만 표시) */}
+                    {((editedValues[btn.id]?.actionType || btn.actionType) === "save" ||
+                      (editedValues[btn.id]?.actionType || btn.actionType) === "delete") && (
+                      <div className="grid grid-cols-[80px_1fr] items-center gap-2">
+                        <Label className="text-xs text-muted-foreground">확인 메시지</Label>
+                        <Input
+                          value={editedValues[btn.id]?.confirmMessage ?? btn.confirmMessage ?? ""}
+                          onChange={(e) => setEditedValues(prev => ({
+                            ...prev,
+                            [btn.id]: { ...prev[btn.id], confirmMessage: e.target.value }
+                          }))}
+                          placeholder="커스텀 메시지 (예: 정말 삭제하시겠습니까?)"
+                          className="h-7 text-xs"
+                        />
+                      </div>
+                    )}
+
+                    {/* 모달 화면 선택 (modal, openModalWithData, openRelatedModal 액션) */}
+                    {((editedValues[btn.id]?.actionType || btn.actionType) === "modal" || 
+                      (editedValues[btn.id]?.actionType || btn.actionType) === "openModalWithData" ||
+                      (editedValues[btn.id]?.actionType || btn.actionType) === "openRelatedModal") && (
+                      <div className="grid grid-cols-[80px_1fr] items-center gap-2">
+                        <Label className="text-xs text-muted-foreground">모달 화면</Label>
+                        <Popover open={openModalScreenSearch === btn.id} onOpenChange={(open) => setOpenModalScreenSearch(open ? btn.id : null)}>
+                          <PopoverTrigger asChild>
+                            <Button variant="outline" role="combobox" className="h-7 w-full justify-between text-xs">
+                              {editedValues[btn.id]?.modalScreenId || btn.modalScreenId
+                                ? screenList.find(s => s.id === Number(editedValues[btn.id]?.modalScreenId || btn.modalScreenId))?.name || "화면 선택"
+                                : "화면 선택"
+                              }
+                              <ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
+                            </Button>
+                          </PopoverTrigger>
+                          <PopoverContent className="p-0" style={{ width: "var(--radix-popover-trigger-width)" }} align="start">
+                            <Command>
+                              <CommandInput placeholder="화면 검색..." className="text-xs" />
+                              <CommandList>
+                                <CommandEmpty className="text-xs py-2 text-center">화면을 찾을 수 없습니다</CommandEmpty>
+                                <CommandItem 
+                                  value="__none__"
+                                  onSelect={() => {
+                                    setEditedValues(prev => ({ ...prev, [btn.id]: { ...prev[btn.id], modalScreenId: null } }));
+                                    setOpenModalScreenSearch(null);
+                                  }}
+                                  className="text-xs text-muted-foreground"
+                                >
+                                  <Check className={cn("mr-2 h-3 w-3", !(editedValues[btn.id]?.modalScreenId || btn.modalScreenId) ? "opacity-100" : "opacity-0")} />
+                                  미설정
+                                </CommandItem>
+                                {screenList.filter(s => s && s.id != null && s.inGroup).length > 0 && (
+                                  <CommandGroup heading="현재 그룹">
+                                    {screenList.filter(s => s && s.id != null && s.inGroup).map((s) => (
+                                      <CommandItem
+                                        key={s.id}
+                                        value={s.name}
+                                        onSelect={() => {
+                                          setEditedValues(prev => ({ ...prev, [btn.id]: { ...prev[btn.id], modalScreenId: s.id } }));
+                                          setOpenModalScreenSearch(null);
+                                        }}
+                                        className="text-xs"
+                                      >
+                                        <Check className={cn("mr-2 h-3 w-3", Number(editedValues[btn.id]?.modalScreenId || btn.modalScreenId) === s.id ? "opacity-100" : "opacity-0")} />
+                                        {s.name}
+                                      </CommandItem>
+                                    ))}
+                                  </CommandGroup>
+                                )}
+                                {screenList.filter(s => s && s.id != null && !s.inGroup).length > 0 && (
+                                  <CommandGroup heading="다른 그룹">
+                                    {screenList.filter(s => s && s.id != null && !s.inGroup).map((s) => (
+                                      <CommandItem
+                                        key={s.id}
+                                        value={s.name}
+                                        onSelect={() => {
+                                          setEditedValues(prev => ({ ...prev, [btn.id]: { ...prev[btn.id], modalScreenId: s.id } }));
+                                          setOpenModalScreenSearch(null);
+                                        }}
+                                        className="text-xs text-muted-foreground"
+                                      >
+                                        <Check className={cn("mr-2 h-3 w-3", Number(editedValues[btn.id]?.modalScreenId || btn.modalScreenId) === s.id ? "opacity-100" : "opacity-0")} />
+                                        {s.name}
+                                      </CommandItem>
+                                    ))}
+                                  </CommandGroup>
+                                )}
+                              </CommandList>
+                            </Command>
+                          </PopoverContent>
+                        </Popover>
+                      </div>
+                    )}
+
+                    {/* 네비게이션 화면 선택 (navigate 액션) */}
+                    {(editedValues[btn.id]?.actionType || btn.actionType) === "navigate" && (
+                      <div className="grid grid-cols-[80px_1fr] items-center gap-2">
+                        <Label className="text-xs text-muted-foreground">이동 화면</Label>
+                        <Popover open={openNavigateScreenSearch === btn.id} onOpenChange={(open) => setOpenNavigateScreenSearch(open ? btn.id : null)}>
+                          <PopoverTrigger asChild>
+                            <Button variant="outline" role="combobox" className="h-7 w-full justify-between text-xs">
+                              {editedValues[btn.id]?.navigateScreenId || btn.navigateScreenId
+                                ? screenList.find(s => s.id === Number(editedValues[btn.id]?.navigateScreenId || btn.navigateScreenId))?.name || "화면 선택"
+                                : "화면 선택"
+                              }
+                              <ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
+                            </Button>
+                          </PopoverTrigger>
+                          <PopoverContent className="p-0" style={{ width: "var(--radix-popover-trigger-width)" }} align="start">
+                            <Command>
+                              <CommandInput placeholder="화면 검색..." className="text-xs" />
+                              <CommandList>
+                                <CommandEmpty className="text-xs py-2 text-center">화면을 찾을 수 없습니다</CommandEmpty>
+                                <CommandItem 
+                                  value="__none__"
+                                  onSelect={() => {
+                                    setEditedValues(prev => ({ ...prev, [btn.id]: { ...prev[btn.id], navigateScreenId: null } }));
+                                    setOpenNavigateScreenSearch(null);
+                                  }}
+                                  className="text-xs text-muted-foreground"
+                                >
+                                  <Check className={cn("mr-2 h-3 w-3", !(editedValues[btn.id]?.navigateScreenId || btn.navigateScreenId) ? "opacity-100" : "opacity-0")} />
+                                  미설정
+                                </CommandItem>
+                                {screenList.filter(s => s && s.id != null && s.inGroup).length > 0 && (
+                                  <CommandGroup heading="현재 그룹">
+                                    {screenList.filter(s => s && s.id != null && s.inGroup).map((s) => (
+                                      <CommandItem
+                                        key={s.id}
+                                        value={s.name}
+                                        onSelect={() => {
+                                          setEditedValues(prev => ({ ...prev, [btn.id]: { ...prev[btn.id], navigateScreenId: s.id } }));
+                                          setOpenNavigateScreenSearch(null);
+                                        }}
+                                        className="text-xs"
+                                      >
+                                        <Check className={cn("mr-2 h-3 w-3", Number(editedValues[btn.id]?.navigateScreenId || btn.navigateScreenId) === s.id ? "opacity-100" : "opacity-0")} />
+                                        {s.name}
+                                      </CommandItem>
+                                    ))}
+                                  </CommandGroup>
+                                )}
+                                {screenList.filter(s => s && s.id != null && !s.inGroup).length > 0 && (
+                                  <CommandGroup heading="다른 그룹">
+                                    {screenList.filter(s => s && s.id != null && !s.inGroup).map((s) => (
+                                      <CommandItem
+                                        key={s.id}
+                                        value={s.name}
+                                        onSelect={() => {
+                                          setEditedValues(prev => ({ ...prev, [btn.id]: { ...prev[btn.id], navigateScreenId: s.id } }));
+                                          setOpenNavigateScreenSearch(null);
+                                        }}
+                                        className="text-xs text-muted-foreground"
+                                      >
+                                        <Check className={cn("mr-2 h-3 w-3", Number(editedValues[btn.id]?.navigateScreenId || btn.navigateScreenId) === s.id ? "opacity-100" : "opacity-0")} />
+                                        {s.name}
+                                      </CommandItem>
+                                    ))}
+                                  </CommandGroup>
+                                )}
+                              </CommandList>
+                            </Command>
+                          </PopoverContent>
+                        </Popover>
+                      </div>
+                    )}
+
+                    {/* 플로우 연동 - 세로 목록 형식 */}
+                    <div className="grid grid-cols-[80px_1fr] items-start gap-2">
+                      <Label className="text-xs text-muted-foreground pt-1">플로우</Label>
+                      <div className="space-y-2">
+                        {/* 연동된 플로우 목록 (세로 형식, 각각 타이밍 선택) */}
+                        {(() => {
+                          const currentFlows = editedValues[btn.id]?.linkedFlows || btn.linkedFlows || [];
+                          return currentFlows.length > 0 ? (
+                            <div className="space-y-1.5">
+                              {currentFlows.map((lf: { id: number; name: string; timing?: string }, idx: number) => (
+                                <div key={lf.id} className="flex items-center gap-2 p-1.5 border rounded-md bg-muted/30">
+                                  <Workflow className="h-3 w-3 text-purple-500 shrink-0" />
+                                  <span className="text-xs font-medium text-gray-700 flex-1 truncate">
+                                    {lf.name}
+                                  </span>
+                                  {/* 타이밍 선택 */}
+                                  <Select
+                                    value={lf.timing || "after"}
+                                    onValueChange={(val) => {
+                                      const newFlows = [...currentFlows];
+                                      newFlows[idx] = { ...lf, timing: val };
+                                      setEditedValues(prev => ({ 
+                                        ...prev, 
+                                        [btn.id]: { ...prev[btn.id], linkedFlows: newFlows }
+                                      }));
+                                    }}
+                                  >
+                                    <SelectTrigger className="h-6 w-[70px] text-[10px]">
+                                      <SelectValue />
+                                    </SelectTrigger>
+                                    <SelectContent>
+                                      <SelectItem value="before" className="text-[10px]">실행 전</SelectItem>
+                                      <SelectItem value="after" className="text-[10px]">실행 후</SelectItem>
+                                    </SelectContent>
+                                  </Select>
+                                  {/* 삭제 버튼 */}
+                                  <button
+                                    type="button"
+                                    className="h-5 w-5 rounded hover:bg-red-100 flex items-center justify-center text-gray-400 hover:text-red-500"
+                                    onClick={() => {
+                                      const newFlows = currentFlows.filter((f: any) => f.id !== lf.id);
+                                      setEditedValues(prev => ({ 
+                                        ...prev, 
+                                        [btn.id]: { ...prev[btn.id], linkedFlows: newFlows }
+                                      }));
+                                    }}
+                                  >
+                                    <X className="h-3 w-3" />
+                                  </button>
+                                </div>
+                              ))}
+                            </div>
+                          ) : null;
+                        })()}
+                        
+                        {/* 플로우 추가 버튼 */}
+                        <Popover open={openFlowSearch === btn.id} onOpenChange={(open) => setOpenFlowSearch(open ? btn.id : null)}>
+                          <PopoverTrigger asChild>
+                            <Button variant="outline" role="combobox" className="h-7 w-full justify-between text-xs">
+                              <span className="flex items-center gap-1">
+                                <Plus className="h-3 w-3" />
+                                플로우 추가
+                              </span>
+                              <ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
+                            </Button>
+                          </PopoverTrigger>
+                          <PopoverContent className="p-0" style={{ width: "var(--radix-popover-trigger-width)" }} align="start">
+                            <Command>
+                              <CommandInput placeholder="플로우 검색..." className="text-xs" />
+                              <CommandList>
+                                <CommandEmpty className="text-xs py-2 text-center">플로우를 찾을 수 없습니다</CommandEmpty>
+                                {/* 빠른 생성 옵션 */}
+                                <CommandGroup>
+                                  <CommandItem
+                                    onSelect={() => {
+                                      setOpenFlowSearch(null);
+                                      // FlowEditor 모달 열기 (버튼 연동)
+                                      setFlowEditorTargetButtonId(btn.id);
+                                      setShowFlowEditorModal(true);
+                                      setOpenFlowSearch(null);
+                                    }}
+                                    className="text-xs text-purple-700 bg-purple-50 hover:bg-purple-100"
+                                  >
+                                    <Plus className="mr-2 h-3 w-3 text-purple-500" />
+                                    <div className="flex flex-col">
+                                      <span className="font-medium">새 플로우 생성</span>
+                                      <span className="text-[10px] text-purple-500">여기서 직접 만들고 자동 연동</span>
+                                    </div>
+                                  </CommandItem>
+                                </CommandGroup>
+                                {flows.length > 0 ? (
+                                  <CommandGroup heading="플로우 목록">
+                                    {flows.map((f) => {
+                                      const currentFlows = editedValues[btn.id]?.linkedFlows || btn.linkedFlows || [];
+                                      const isLinked = currentFlows.some((lf: any) => lf.id === f.flowId);
+                                      const tableName = typeof f.flowData === 'object' 
+                                        ? f.flowData?.nodes?.find((n: any) => n.type === 'tableSource')?.data?.tableName 
+                                        : null;
+                                      return (
+                                        <CommandItem
+                                          key={f.flowId}
+                                          value={f.flowName}
+                                          onSelect={() => {
+                                            if (!isLinked) {
+                                              const newFlows = [...currentFlows, { id: f.flowId, name: f.flowName, timing: "after" }];
+                                              setEditedValues(prev => ({ 
+                                                ...prev, 
+                                                [btn.id]: { ...prev[btn.id], linkedFlows: newFlows }
+                                              }));
+                                            }
+                                            setOpenFlowSearch(null);
+                                          }}
+                                          className={cn("text-xs", isLinked && "opacity-50")}
+                                          disabled={isLinked}
+                                        >
+                                          <Check className={cn("mr-2 h-3 w-3", isLinked ? "opacity-100" : "opacity-0")} />
+                                          <div className="flex flex-col">
+                                            <span>{f.flowName}</span>
+                                            {tableName && <span className="text-[10px] text-muted-foreground">{tableName}</span>}
+                                          </div>
+                                          {isLinked && <span className="ml-auto text-[10px] text-muted-foreground">연동됨</span>}
+                                        </CommandItem>
+                                      );
+                                    })}
+                                  </CommandGroup>
+                                ) : (
+                                  <div className="py-2 px-2 text-xs text-muted-foreground text-center">
+                                    등록된 플로우가 없습니다
+                                  </div>
+                                )}
+                              </CommandList>
+                            </Command>
+                          </PopoverContent>
+                        </Popover>
+                        
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              );
+              })}
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* 플로우 연동 - 구분된 섹션 */}
+      <div className="rounded-lg border border-purple-200 bg-purple-50/30">
+        <div className="flex items-center gap-2 px-3 py-2 border-b border-purple-200 bg-purple-100/50 rounded-t-lg">
+          <Workflow className="h-4 w-4 text-purple-600" />
+          <span className="text-sm font-semibold text-purple-900">플로우 연동 현황</span>
+          <Badge className="h-5 text-[10px] bg-purple-600 text-white hover:bg-purple-600">
+            {flows.length}개 플로우
+          </Badge>
+          <Badge className="h-5 text-[10px] bg-green-600 text-white hover:bg-green-600">
+            {buttonControls.filter(b => (b.linkedFlows && b.linkedFlows.length > 0) || b.linkedFlow).length}개 연동
+          </Badge>
+          <span className="flex-1" />
+          <Button
+            variant="outline"
+            size="sm"
+            className="h-5 px-1.5 text-[10px] border-purple-300 text-purple-700 hover:text-purple-900 hover:bg-purple-100"
+            onClick={() => {
+              // FlowEditor 모달 열기 (버튼 연동 없이)
+              setFlowEditorTargetButtonId(null);
+              setShowFlowEditorModal(true);
+            }}
+            title="플로우 생성"
+          >
+            <Plus className="mr-1 h-3 w-3" />
+            새 플로우
+          </Button>
+          <Button
+            variant="ghost"
+            size="sm"
+            className="h-5 px-1.5 text-[10px] text-purple-700 hover:text-purple-900 hover:bg-purple-200"
+            onClick={() => window.open("/admin/systemMng/dataflow", "_blank")}
+            title="플로우 관리"
+          >
+            <ExternalLink className="mr-1 h-3 w-3" />
+            상세 관리
+          </Button>
+        </div>
+        
+        <div className="max-h-[180px] overflow-y-auto p-2">
+          {flows.length === 0 ? (
+            <div className="flex flex-col items-center justify-center py-4 text-center">
+              <Workflow className="mb-1 h-5 w-5 text-muted-foreground/50" />
+              <p className="text-xs text-muted-foreground">사용 가능한 플로우가 없습니다</p>
+            </div>
+          ) : (
+            <div className="space-y-1">
+              {flows.map((flow) => {
+                // 이 플로우가 연동된 버튼들 찾기 (다중 플로우 지원)
+                const linkedButtons = buttonControls.filter(b => 
+                  (b.linkedFlows && b.linkedFlows.some(lf => lf.id === flow.flowId)) ||
+                  b.linkedFlow?.id === flow.flowId
+                );
+                const tableName = (flow as any).tableType || (flow as any).tableName;
+                return (
+                  <div key={`flow-list-${flow.flowId}`} className="flex items-center gap-2 px-2 py-1.5 rounded bg-white/50 hover:bg-white">
+                    {/* 플로우 이름 - 일반 텍스트 */}
+                    <Workflow className="h-3.5 w-3.5 text-purple-500 shrink-0" />
+                    <span className="text-xs font-medium text-gray-700 shrink-0">
+                      {flow.flowName}
+                    </span>
+                    {tableName && (
+                      <span className="text-[10px] text-muted-foreground shrink-0">
+                        ({tableName})
+                      </span>
+                    )}
+                    <span className="flex-1" />
+                    {linkedButtons.length > 0 ? (
+                      <div className="flex items-center gap-1 shrink-0 flex-wrap justify-end">
+                        {linkedButtons.map((btn, idx) => {
+                          // 해당 버튼에서 이 플로우의 타이밍 정보 추출
+                          const flowInfo = btn.linkedFlows?.find(lf => lf.id === flow.flowId);
+                          const timing = flowInfo?.timing || btn.flowTiming || "after";
+                          return (
+                            <div key={`${flow.flowId}-${btn.id}`} className="flex items-center gap-1">
+                              {idx === 0 && <ArrowRight className="h-3 w-3 text-green-500" />}
+                              <span className="text-xs text-green-600 font-medium">
+                                [{btn.label}]
+                              </span>
+                              <Badge className={cn("h-4 text-[9px]", getActionTypeColor(btn.actionType))}>
+                                {getActionTypeLabel(btn.actionType)}
+                              </Badge>
+                              <span className="text-[10px] text-muted-foreground">
+                                ({timing === "before" ? "전" : "후"})
+                              </span>
+                            </div>
+                          );
+                        })}
+                      </div>
+                    ) : (
+                      /* 미연동 - 보라색 뱃지 */
+                      <Badge variant="outline" className="h-5 text-[10px] border-purple-300 bg-purple-100 text-purple-600 shrink-0">
+                        미연동
+                      </Badge>
+                    )}
+                  </div>
+                );
+              })}
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* 플로우 빠른 생성 다이얼로그 */}
+      <Dialog open={showQuickFlowDialog} onOpenChange={setShowQuickFlowDialog}>
+        <DialogContent className="max-w-[95vw] sm:max-w-[500px]">
+          <DialogHeader>
+            <DialogTitle className="text-base sm:text-lg">플로우 빠른 생성</DialogTitle>
+            <DialogDescription className="text-xs sm:text-sm">
+              플로우의 <strong>기본 골격</strong>만 생성합니다.
+            </DialogDescription>
+          </DialogHeader>
+          
+          {/* 중요 안내 */}
+          <div className="p-2 rounded-md bg-amber-50 border border-amber-200 text-xs text-amber-800">
+            <div className="flex items-start gap-2">
+              <span className="text-amber-500 mt-0.5">&#9888;</span>
+              <div>
+                <p className="font-medium">생성 후 제어 관리에서 추가 설정이 필요합니다</p>
+                <p className="mt-1 text-amber-700">
+                  필드 매핑, WHERE 조건 등을 설정해야 실제로 동작합니다.
+                </p>
+              </div>
+            </div>
+          </div>
+
+          <div className="space-y-4">
+            {/* 플로우 이름 */}
+            <div>
+              <Label className="text-xs sm:text-sm">플로우 이름 *</Label>
+              <Input
+                value={quickFlowData.name}
+                onChange={(e) => setQuickFlowData(prev => ({ ...prev, name: e.target.value }))}
+                placeholder="예: 고객정보 수정 플로우"
+                className="h-8 text-xs sm:h-10 sm:text-sm mt-1"
+              />
+            </div>
+
+            {/* 테이블 선택/입력 */}
+            <div>
+              <Label className="text-xs sm:text-sm">대상 테이블 *</Label>
+              {(() => {
+                const availableTables = Array.from(new Set(buttonControls.filter(b => b.targetTable).map(b => b.targetTable)));
+                
+                return availableTables.length > 0 ? (
+                  <>
+                    <Popover>
+                      <PopoverTrigger asChild>
+                        <Button
+                          variant="outline"
+                          role="combobox"
+                          className="h-8 w-full justify-between text-xs sm:h-10 sm:text-sm mt-1"
+                        >
+                          {quickFlowData.tableName 
+                            ? (quickFlowData.tableLabel || quickFlowData.tableName)
+                            : "테이블 선택..."}
+                          <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" />
+                          <CommandList>
+                            <CommandEmpty className="text-xs py-2 text-center">테이블을 찾을 수 없습니다</CommandEmpty>
+                            <CommandGroup>
+                              {availableTables.map((table) => (
+                                <CommandItem
+                                  key={table}
+                                  value={table}
+                                  onSelect={() => {
+                                    setQuickFlowData(prev => ({ 
+                                      ...prev, 
+                                      tableName: table || "",
+                                      tableLabel: table || "",
+                                    }));
+                                  }}
+                                  className="text-xs"
+                                >
+                                  <Check className={cn("mr-2 h-3 w-3", quickFlowData.tableName === table ? "opacity-100" : "opacity-0")} />
+                                  <Database className="mr-2 h-3 w-3 text-blue-500" />
+                                  {table}
+                                </CommandItem>
+                              ))}
+                            </CommandGroup>
+                          </CommandList>
+                        </Command>
+                      </PopoverContent>
+                    </Popover>
+                    <p className="text-[10px] text-muted-foreground mt-1">화면에서 사용 중인 테이블 목록입니다</p>
+                  </>
+                ) : (
+                  <>
+                    <Input
+                      value={quickFlowData.tableName}
+                      onChange={(e) => setQuickFlowData(prev => ({ 
+                        ...prev, 
+                        tableName: e.target.value,
+                        tableLabel: e.target.value,
+                      }))}
+                      placeholder="테이블명 입력 (예: customer_mng)"
+                      className="h-8 text-xs sm:h-10 sm:text-sm mt-1"
+                    />
+                    <p className="text-[10px] text-muted-foreground mt-1">테이블명을 직접 입력하세요</p>
+                  </>
+                );
+              })()}
+            </div>
+
+            {/* 액션 타입 */}
+            <div>
+              <Label className="text-xs sm:text-sm">액션 타입</Label>
+              <div className="flex gap-2 mt-2">
+                {[
+                  { value: "insert", label: "INSERT", color: "bg-green-100 text-green-700 border-green-300" },
+                  { value: "update", label: "UPDATE", color: "bg-blue-100 text-blue-700 border-blue-300" },
+                  { value: "delete", label: "DELETE", color: "bg-red-100 text-red-700 border-red-300" },
+                ].map((action) => (
+                  <button
+                    key={action.value}
+                    type="button"
+                    onClick={() => setQuickFlowData(prev => ({ ...prev, actionType: action.value as any }))}
+                    className={cn(
+                      "flex-1 py-2 px-3 text-xs font-medium rounded-md border transition-all",
+                      quickFlowData.actionType === action.value
+                        ? action.color + " ring-2 ring-offset-1"
+                        : "bg-gray-50 text-gray-600 border-gray-200 hover:bg-gray-100"
+                    )}
+                  >
+                    {action.label}
+                  </button>
+                ))}
+              </div>
+            </div>
+
+            {/* 설명 (선택) */}
+            <div>
+              <Label className="text-xs sm:text-sm">설명 (선택)</Label>
+              <Textarea
+                value={quickFlowData.description}
+                onChange={(e) => setQuickFlowData(prev => ({ ...prev, description: e.target.value }))}
+                placeholder="플로우에 대한 설명을 입력하세요"
+                className="h-16 text-xs sm:text-sm mt-1 resize-none"
+              />
+            </div>
+
+            {/* 자동 연동 옵션 */}
+            {quickFlowData.targetButtonId && (
+              <div className="flex items-center gap-2 p-2 rounded-md bg-purple-50 border border-purple-200">
+                <input
+                  type="checkbox"
+                  id="autoLink"
+                  checked={quickFlowData.autoLink}
+                  onChange={(e) => setQuickFlowData(prev => ({ ...prev, autoLink: e.target.checked }))}
+                  className="h-4 w-4 rounded border-gray-300"
+                />
+                <label htmlFor="autoLink" className="text-xs text-purple-700">
+                  생성 후 [{buttonControls.find(b => b.id === quickFlowData.targetButtonId)?.label}] 버튼에 자동 연동
+                </label>
+              </div>
+            )}
+          </div>
+
+          {/* 버튼 영역 */}
+          <div className="flex flex-col gap-2 pt-2 border-t">
+            {/* 제어 관리에서 직접 생성 (권장) */}
+            <Button
+              variant="default"
+              onClick={() => {
+                if (quickFlowData.targetButtonId) {
+                  setPendingLinkButtonId(quickFlowData.targetButtonId);
+                }
+                setShowQuickFlowDialog(false);
+                openFlowEditorInNewWindow(quickFlowData.targetButtonId || undefined);
+              }}
+              className="h-10 w-full text-sm font-medium"
+            >
+              <ExternalLink className="mr-2 h-4 w-4" />
+              제어 관리에서 직접 생성 (권장)
+            </Button>
+            <p className="text-[10px] text-center text-muted-foreground -mt-1">
+              필드 매핑, WHERE 조건 등을 직접 설정할 수 있습니다. 저장 시 자동 연동됩니다.
+            </p>
+            
+            {/* 구분선 */}
+            <div className="flex items-center gap-2 my-1">
+              <div className="flex-1 h-px bg-border" />
+              <span className="text-[10px] text-muted-foreground">또는</span>
+              <div className="flex-1 h-px bg-border" />
+            </div>
+            
+            {/* 하단 버튼들 */}
+            <div className="flex justify-end gap-2">
+              <Button
+                variant="outline"
+                onClick={() => setShowQuickFlowDialog(false)}
+                className="h-8 text-xs"
+              >
+                취소
+              </Button>
+              <Button
+                variant="outline"
+                onClick={handleQuickCreateFlow}
+                disabled={isCreatingFlow || !quickFlowData.name.trim() || !quickFlowData.tableName}
+                className="h-8 text-xs"
+              >
+                {isCreatingFlow ? (
+                  <>
+                    <Loader2 className="mr-1 h-3 w-3 animate-spin" />
+                    생성 중...
+                  </>
+                ) : (
+                  "골격만 생성"
+                )}
+              </Button>
+            </div>
+          </div>
+        </DialogContent>
+      </Dialog>
+
+      {/* FlowEditor 전체 화면 모달 */}
+      <Dialog open={showFlowEditorModal} onOpenChange={setShowFlowEditorModal}>
+        <DialogContent className="max-w-[98vw] h-[95vh] p-0 overflow-hidden">
+          <div className="flex flex-col h-full">
+            {/* 헤더 */}
+            <div className="flex items-center justify-between px-4 py-3 border-b bg-background">
+              <div>
+                <h2 className="text-lg font-semibold">플로우 생성</h2>
+                <p className="text-xs text-muted-foreground">
+                  저장하면 자동으로 버튼에 연동됩니다
+                  {flowEditorTargetButtonId && (
+                    <span className="ml-1 text-purple-600">
+                      (대상: {buttonControls.find(b => b.id === flowEditorTargetButtonId)?.label})
+                    </span>
+                  )}
+                </p>
+              </div>
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => setShowFlowEditorModal(false)}
+              >
+                <X className="h-4 w-4" />
+              </Button>
+            </div>
+            
+            {/* FlowEditor */}
+            <div className="flex-1 overflow-hidden">
+              <FlowEditor
+                embedded={true}
+                onSaveComplete={(flowId, flowName) => {
+                  // 플로우 목록 새로고침
+                  getNodeFlows().then(setFlows);
+                  
+                  // 대상 버튼에 연동
+                  if (flowEditorTargetButtonId) {
+                    const newFlow = {
+                      id: flowId,
+                      name: flowName,
+                      timing: "after" as const,
+                    };
+                    
+                    setEditedValues(prev => ({
+                      ...prev,
+                      [flowEditorTargetButtonId]: {
+                        ...prev[flowEditorTargetButtonId],
+                        linkedFlows: [
+                          ...(prev[flowEditorTargetButtonId]?.linkedFlows || 
+                              buttonControls.find(b => b.id === flowEditorTargetButtonId)?.linkedFlows || []),
+                          newFlow,
+                        ],
+                      },
+                    }));
+                    
+                    toast.success(`플로우 "${flowName}"이(가) 버튼에 연동되었습니다`);
+                  } else {
+                    toast.success(`플로우 "${flowName}"이(가) 생성되었습니다`);
+                  }
+                  
+                  // 모달 닫기
+                  setShowFlowEditorModal(false);
+                  setFlowEditorTargetButtonId(null);
+                }}
+              />
+            </div>
+          </div>
+        </DialogContent>
+      </Dialog>
+
+    </div>
+  );
+}
+
+// ============================================================
+// 탭 4: 화면 프리뷰 (iframe)
+// ============================================================
+
+interface PreviewTabProps {
+  screenId: number;
+  screenName: string;
+  companyCode?: string;
+  iframeKey?: number; // iframe 새로고침용 키
+  canvasWidth?: number; // 화면 캔버스 너비
+  canvasHeight?: number; // 화면 캔버스 높이
+}
+
+function PreviewTab({ screenId, screenName, companyCode, iframeKey = 0, canvasWidth, canvasHeight }: PreviewTabProps) {
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+  
+  // 화면 디자인 크기 (실제 캔버스 크기 사용, 없으면 기본값)
+  // 좌우/상하 여유 마진 추가: 모달 패딩, 헤더, 하단 체크박스 등
+  // 좌우: +120px (양쪽 패딩 + 여유), 상하: +250px (헤더 + 버튼 + 체크박스 + 패딩)
+  const designWidth = Math.max((canvasWidth || 400) + 120, 500);
+  const designHeight = Math.max((canvasHeight || 400) + 250, 650);
+  
+  // 컨테이너에 맞는 초기 스케일 계산
+  const [initialScale, setInitialScale] = useState(0.7);
+  
+  // 컨테이너 크기에 맞춰 초기 스케일 계산
+  useEffect(() => {
+    const updateInitialScale = () => {
+      if (containerRef.current) {
+        const containerWidth = containerRef.current.offsetWidth;
+        const containerHeight = containerRef.current.offsetHeight;
+        
+        // 여백 5px씩만 적용하여 꽉 차게
+        const scaleX = (containerWidth - 10) / designWidth;
+        const scaleY = (containerHeight - 10) / designHeight;
+        const newScale = Math.min(scaleX, scaleY);
+        
+        setInitialScale(newScale);
+      }
+    };
+    
+    // 초기 측정 (약간의 딜레이)
+    const timer = setTimeout(updateInitialScale, 200);
+    
+    // 리사이즈 감지
+    const resizeObserver = new ResizeObserver(updateInitialScale);
+    if (containerRef.current) {
+      resizeObserver.observe(containerRef.current);
+    }
+    
+    return () => {
+      clearTimeout(timer);
+      resizeObserver.disconnect();
+    };
+  }, []);
+  
+
+  // 화면 URL 생성 (preview=true로 사이드바 없이 화면만 표시, company_code 전달)
+  const previewUrl = useMemo(() => {
+    // 현재 호스트 기반으로 URL 생성
+    const params = new URLSearchParams({ preview: "true" });
+    // 프리뷰용 회사 코드 추가 (데이터 조회에 필요)
+    if (companyCode) {
+      params.set("company_code", companyCode);
+    }
+    if (typeof window !== "undefined") {
+      const baseUrl = window.location.origin;
+      return `${baseUrl}/screens/${screenId}?${params.toString()}`;
+    }
+    return `/screens/${screenId}?${params.toString()}`;
+  }, [screenId, companyCode]);
+
+  const handleIframeLoad = () => {
+    setLoading(false);
+  };
+
+  const handleIframeError = () => {
+    setLoading(false);
+    setError("화면을 불러오는데 실패했습니다.");
+  };
+
+  const openInNewTab = () => {
+    window.open(previewUrl, "_blank");
+  };
+
+  return (
+    <div className="flex min-h-0 flex-1 flex-col">
+      {/* 상단 툴바 (최소화) */}
+      <div className="flex h-7 shrink-0 items-center justify-between border-b px-2">
+        <div className="flex items-center gap-1.5">
+          <Eye className="h-3 w-3 text-blue-500" />
+          <span className="truncate text-xs font-medium">{screenName}</span>
+          <span className="text-[10px] text-muted-foreground">(휠: 확대/축소, 드래그: 이동)</span>
+        </div>
+        <div className="flex items-center gap-1">
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={() => {
+              setLoading(true);
+              const iframe = document.getElementById("screen-preview-iframe") as HTMLIFrameElement;
+              if (iframe) {
+                iframe.src = iframe.src;
+              }
+            }}
+            className="h-5 w-5 p-0"
+            title="새로고침"
+          >
+            <RefreshCw className={cn("h-3 w-3", loading && "animate-spin")} />
+          </Button>
+          <Button variant="ghost" size="sm" onClick={openInNewTab} className="h-5 w-5 p-0" title="새 탭에서 열기">
+            <ExternalLink className="h-3 w-3" />
+          </Button>
+        </div>
+      </div>
+
+      {/* iframe 영역 - Ctrl+휠로 확대/축소, 내부 버튼/목록 클릭 가능 */}
+      <div 
+        ref={containerRef} 
+        className="relative min-h-0 flex-1 overflow-hidden flex items-center justify-center bg-gray-100"
+      >
+        {loading && (
+          <div className="absolute inset-0 z-10 flex items-center justify-center bg-white/80">
+            <div className="text-center">
+              <Loader2 className="mx-auto h-8 w-8 animate-spin text-primary" />
+              <p className="mt-2 text-sm text-muted-foreground">화면 로딩 중...</p>
+            </div>
+          </div>
+        )}
+
+        {error ? (
+          <div className="flex h-full items-center justify-center">
+            <div className="text-center">
+              <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-destructive/10">
+                <span className="text-2xl">⚠️</span>
+              </div>
+              <p className="text-sm text-destructive">{error}</p>
+              <Button
+                variant="outline"
+                size="sm"
+                className="mt-4"
+                onClick={() => {
+                  setError(null);
+                  setLoading(true);
+                }}
+              >
+                다시 시도
+              </Button>
+            </div>
+          </div>
+        ) : (
+          <TransformWrapper
+            initialScale={initialScale}
+            minScale={0.2}
+            maxScale={3}
+            centerOnInit={true}
+            wheel={{ step: 0.05 }}
+            panning={{ velocityDisabled: true }}
+          >
+            {({ state }) => (
+              <TransformComponent
+                wrapperStyle={{ width: "100%", height: "100%" }}
+                contentStyle={{ display: "flex", alignItems: "center", justifyContent: "center" }}
+              >
+                <div 
+                  className="relative"
+                  style={{
+                    width: `${designWidth}px`,
+                    height: `${designHeight}px`,
+                  }}
+                >
+                  <iframe
+                    key={iframeKey}
+                    id="screen-preview-iframe"
+                    src={previewUrl}
+                    className="border-0 shadow-lg rounded bg-white pointer-events-none"
+                    style={{
+                      width: "100%",
+                      height: "100%",
+                    }}
+                    onLoad={handleIframeLoad}
+                    onError={handleIframeError}
+                    title={`화면 프리뷰: ${screenName}`}
+                    sandbox="allow-scripts allow-same-origin allow-forms allow-popups"
+                  />
+                  {/* 클릭/드래그 분리 오버레이 */}
+                  <div
+                    className="absolute inset-0"
+                    style={{ cursor: "grab" }}
+                    onMouseDown={(e) => {
+                      const overlay = e.currentTarget;
+                      const iframe = overlay.previousElementSibling as HTMLIFrameElement;
+                      const startX = e.clientX;
+                      const startY = e.clientY;
+                      let moved = false;
+
+                      const handleMouseMove = (moveEvent: MouseEvent) => {
+                        const dx = Math.abs(moveEvent.clientX - startX);
+                        const dy = Math.abs(moveEvent.clientY - startY);
+                        if (dx > 5 || dy > 5) {
+                          moved = true;
+                          overlay.style.cursor = "grabbing";
+                        }
+                      };
+
+                      const handleMouseUp = (upEvent: MouseEvent) => {
+                        document.removeEventListener("mousemove", handleMouseMove);
+                        document.removeEventListener("mouseup", handleMouseUp);
+                        overlay.style.cursor = "grab";
+
+                        // 이동 없이 클릭만 했으면 iframe에 클릭 전달
+                        if (!moved) {
+                          const rect = iframe.getBoundingClientRect();
+                          // 실제 표시된 크기와 원본 크기의 비율로 좌표 변환
+                          const scaleX = designWidth / rect.width;
+                          const scaleY = designHeight / rect.height;
+                          const x = (upEvent.clientX - rect.left) * scaleX;
+                          const y = (upEvent.clientY - rect.top) * scaleY;
+                          
+                          // iframe 내부로 클릭 이벤트 전달
+                          try {
+                            const iframeDoc = iframe.contentDocument || iframe.contentWindow?.document;
+                            if (iframeDoc) {
+                              let elem = iframeDoc.elementFromPoint(x, y) as HTMLElement | null;
+                              if (elem) {
+                                // SVG 내부 요소(path, line 등)면 가장 가까운 버튼/앵커 찾기
+                                const clickable = elem.closest("button, a, [role='button'], [onclick]") as HTMLElement | null;
+                                const target = clickable || elem;
+                                
+                                // 인풋 요소면 포커스 먼저
+                                if (target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.tagName === "SELECT") {
+                                  target.focus();
+                                }
+                                // 전체 마우스 이벤트 시퀀스 발생
+                                target.dispatchEvent(new MouseEvent("mousedown", { bubbles: true, cancelable: true, view: iframe.contentWindow }));
+                                target.dispatchEvent(new MouseEvent("mouseup", { bubbles: true, cancelable: true, view: iframe.contentWindow }));
+                                target.click();
+                              }
+                            }
+                          } catch {
+                            // cross-origin 제한시 무시
+                          }
+                        }
+                      };
+
+                      document.addEventListener("mousemove", handleMouseMove);
+                      document.addEventListener("mouseup", handleMouseUp);
+                    }}
+                  />
+                </div>
+              </TransformComponent>
+            )}
+          </TransformWrapper>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default ScreenSettingModal;
+
diff --git a/frontend/components/screen/TableSettingModal.tsx b/frontend/components/screen/TableSettingModal.tsx
new file mode 100644
index 00000000..f0613b66
--- /dev/null
+++ b/frontend/components/screen/TableSettingModal.tsx
@@ -0,0 +1,1274 @@
+"use client";
+
+import React, { useState, useEffect, useCallback, useMemo } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Badge } from "@/components/ui/badge";
+import { Switch } from "@/components/ui/switch";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+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 {
+  Database,
+  Link2,
+  Columns3,
+  Key,
+  Save,
+  Plus,
+  Pencil,
+  Trash2,
+  RefreshCw,
+  Loader2,
+  Check,
+  ChevronsUpDown,
+  Table2,
+  ArrowRight,
+  Eye,
+  Settings2,
+  Settings,
+  Monitor,
+  ExternalLink,
+  Type,
+  Hash,
+  Calendar,
+  ToggleLeft,
+  FileText,
+  Search,
+  List,
+  X,
+} from "lucide-react";
+import {
+  getFieldJoins,
+  createFieldJoin,
+  updateFieldJoin,
+  deleteFieldJoin,
+  FieldJoin,
+} from "@/lib/api/screenGroup";
+import { tableManagementApi, ColumnTypeInfo, TableInfo, ColumnSettings } from "@/lib/api/tableManagement";
+import { screenApi } from "@/lib/api/screen";
+import { INPUT_TYPE_OPTIONS } from "@/types/input-types";
+import TableManagementPage from "@/app/(main)/admin/systemMng/tableMngList/page";
+
+// ============================================================
+// 타입 정의
+// ============================================================
+
+interface JoinColumnRef {
+  column: string;
+  refTable: string;
+  refTableLabel?: string;
+  refColumn: string;
+}
+
+interface ReferencedBy {
+  fromTable: string;
+  fromTableLabel?: string;
+  fromColumn: string;
+  toColumn: string;
+}
+
+interface ColumnInfo {
+  column: string;
+  label?: string;
+  type?: string;
+  isPK?: boolean;
+  isFK?: boolean;
+  refTable?: string;
+  refColumn?: string;
+}
+
+interface ScreenUsingTable {
+  screenId: number;
+  screenName: string;
+  screenCode?: string;
+  tableRole: string; // main, filter, join
+}
+
+interface TableSettingModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  tableName: string;
+  tableLabel?: string;
+  screenId?: number;
+  joinColumnRefs?: JoinColumnRef[];
+  referencedBy?: ReferencedBy[];
+  columns?: ColumnInfo[];
+  filterColumns?: string[];
+  onSaveSuccess?: () => void;
+}
+
+// 검색 가능한 Select 컴포넌트
+interface SearchableSelectProps {
+  value: string;
+  onValueChange: (value: string) => void;
+  options: Array<{ value: string; label: string; description?: string }>;
+  placeholder?: string;
+  disabled?: boolean;
+  className?: string;
+}
+
+function SearchableSelect({
+  value,
+  onValueChange,
+  options,
+  placeholder = "선택...",
+  disabled = false,
+  className,
+}: SearchableSelectProps) {
+  const [open, setOpen] = useState(false);
+
+  const selectedOption = options.find((opt) => opt.value === value);
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          role="combobox"
+          aria-expanded={open}
+          disabled={disabled}
+          className={cn("h-8 w-full justify-between text-xs", className)}
+        >
+          {selectedOption ? (
+            <span className="truncate">{selectedOption.label}</span>
+          ) : (
+            <span className="text-muted-foreground">{placeholder}</span>
+          )}
+          <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" />
+          <CommandList>
+            <CommandEmpty className="py-2 text-center text-xs">
+              결과 없음
+            </CommandEmpty>
+            <CommandGroup>
+              {options.map((option) => (
+                <CommandItem
+                  key={option.value}
+                  value={option.value}
+                  onSelect={() => {
+                    onValueChange(option.value);
+                    setOpen(false);
+                  }}
+                  className="text-xs"
+                >
+                  <Check
+                    className={cn(
+                      "mr-2 h-4 w-4",
+                      value === option.value ? "opacity-100" : "opacity-0"
+                    )}
+                  />
+                  <div className="flex flex-col">
+                    <span>{option.label}</span>
+                    {option.description && (
+                      <span className="text-muted-foreground text-[10px]">
+                        {option.description}
+                      </span>
+                    )}
+                  </div>
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+// 입력 타입별 아이콘
+function getInputTypeIcon(inputType: string) {
+  switch (inputType) {
+    case "text":
+      return <Type className="h-3 w-3" />;
+    case "number":
+      return <Hash className="h-3 w-3" />;
+    case "date":
+    case "datetime":
+      return <Calendar className="h-3 w-3" />;
+    case "boolean":
+    case "checkbox":
+      return <ToggleLeft className="h-3 w-3" />;
+    case "textarea":
+      return <FileText className="h-3 w-3" />;
+    case "entity":
+      return <Link2 className="h-3 w-3" />;
+    case "code":
+      return <List className="h-3 w-3" />;
+    default:
+      return <Type className="h-3 w-3" />;
+  }
+}
+
+// ============================================================
+// 메인 모달 컴포넌트
+// ============================================================
+
+export function TableSettingModal({
+  isOpen,
+  onClose,
+  tableName,
+  tableLabel,
+  screenId,
+  joinColumnRefs = [],
+  referencedBy = [],
+  columns = [],
+  filterColumns = [],
+  onSaveSuccess,
+}: TableSettingModalProps) {
+  const [activeTab, setActiveTab] = useState("columns");
+  const [loading, setLoading] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const [tableColumns, setTableColumns] = useState<ColumnTypeInfo[]>([]);
+  const [tables, setTables] = useState<TableInfo[]>([]);
+  const [fieldJoins, setFieldJoins] = useState<FieldJoin[]>([]);
+  const [screensUsingTable, setScreensUsingTable] = useState<ScreenUsingTable[]>([]);
+  
+  // 선택된 컬럼
+  const [selectedColumn, setSelectedColumn] = useState<string | null>(null);
+  
+  // 컬럼 설정 편집 상태
+  const [editedColumns, setEditedColumns] = useState<Record<string, Partial<ColumnTypeInfo>>>({});
+  
+  // 테이블 라벨/설명
+  const [editedTableLabel, setEditedTableLabel] = useState(tableLabel || "");
+  const [editedTableDescription, setEditedTableDescription] = useState("");
+  
+  // 참조 테이블 컬럼 캐시
+  const [refTableColumns, setRefTableColumns] = useState<Record<string, ColumnTypeInfo[]>>({});
+  const [loadingRefColumns, setLoadingRefColumns] = useState(false);
+  
+  // 테이블 타입 관리 모달 상태
+  const [showTableManagementModal, setShowTableManagementModal] = useState(false);
+
+  // 테이블 컬럼 정보 로드
+  const loadTableData = useCallback(async () => {
+    if (!tableName) return;
+
+    setLoading(true);
+    try {
+      // 테이블 목록 로드
+      const tablesResponse = await tableManagementApi.getTableList();
+      if (tablesResponse.success && tablesResponse.data) {
+        setTables(tablesResponse.data);
+      }
+
+      // 테이블 컬럼 로드 (column_labels 정보 포함)
+      const columnsResponse = await tableManagementApi.getColumnList(tableName);
+      if (columnsResponse.success && columnsResponse.data?.columns) {
+        // 백엔드 응답은 camelCase로 옴
+        const columnsData = columnsResponse.data.columns;
+        setTableColumns(columnsData);
+        
+        // 초기 편집 상태 설정
+        const initialEdits: Record<string, Partial<ColumnTypeInfo>> = {};
+        columnsData.forEach((col) => {
+          initialEdits[col.columnName] = {
+            displayName: col.displayName,
+            inputType: col.inputType || "direct",
+            referenceTable: col.referenceTable,
+            referenceColumn: col.referenceColumn,
+            displayColumn: col.displayColumn,
+          };
+        });
+        setEditedColumns(initialEdits);
+      }
+
+      // 필드 조인 로드 (screenId가 있는 경우)
+      if (screenId) {
+        const joinsResponse = await getFieldJoins(screenId);
+        if (joinsResponse.success && joinsResponse.data) {
+          const relevantJoins = joinsResponse.data.filter(
+            (j) => j.save_table === tableName || j.join_table === tableName
+          );
+          setFieldJoins(relevantJoins);
+        }
+      }
+
+      // 이 테이블을 사용하는 화면 목록 로드
+      await loadScreensUsingTable();
+    } catch (error) {
+      console.error("테이블 정보 로드 실패:", error);
+      toast.error("테이블 정보를 불러오는데 실패했습니다.");
+    } finally {
+      setLoading(false);
+    }
+  }, [tableName, screenId]);
+
+  // 이 테이블을 사용하는 화면 목록 로드
+  const loadScreensUsingTable = useCallback(async () => {
+    if (!tableName) return;
+    
+    try {
+      // 모든 화면 조회
+      const screensResponse = await screenApi.getScreens({ size: 1000 });
+      if (screensResponse.items) {
+        const usingScreens: ScreenUsingTable[] = [];
+        
+        screensResponse.items.forEach((screen: any) => {
+          // 메인 테이블로 사용하는 경우
+          if (screen.tableName === tableName) {
+            usingScreens.push({
+              screenId: screen.screenId,
+              screenName: screen.screenName,
+              screenCode: screen.screenCode,
+              tableRole: "main",
+            });
+          }
+          // TODO: 필터 테이블, 조인 테이블로 사용하는 경우도 추가
+        });
+        
+        setScreensUsingTable(usingScreens);
+      }
+    } catch (error) {
+      console.error("화면 목록 로드 실패:", error);
+    }
+  }, [tableName]);
+
+  // 참조 테이블 컬럼 로드
+  const loadRefTableColumns = useCallback(async (refTableName: string) => {
+    if (!refTableName || refTableName === "none" || refTableColumns[refTableName]) return;
+    
+    setLoadingRefColumns(true);
+    try {
+      const response = await tableManagementApi.getColumnList(refTableName);
+      if (response.success && response.data?.columns) {
+        setRefTableColumns((prev) => ({
+          ...prev,
+          [refTableName]: response.data!.columns,
+        }));
+      }
+    } catch (error) {
+      console.error("참조 테이블 컬럼 로드 실패:", error);
+    } finally {
+      setLoadingRefColumns(false);
+    }
+  }, [refTableColumns]);
+
+  useEffect(() => {
+    if (isOpen && tableName) {
+      loadTableData();
+      setEditedTableLabel(tableLabel || tableName);
+    }
+  }, [isOpen, tableName, tableLabel, loadTableData]);
+
+  // 참조 테이블 변경 시 컬럼 로드
+  useEffect(() => {
+    Object.values(editedColumns).forEach((col) => {
+      if (col.referenceTable && col.referenceTable !== "none") {
+        loadRefTableColumns(col.referenceTable);
+      }
+    });
+  }, [editedColumns, loadRefTableColumns]);
+
+  // 새로고침
+  const handleRefresh = () => {
+    loadTableData();
+    toast.success("새로고침 완료");
+  };
+
+  // 컬럼 설정 변경 핸들러
+  const handleColumnChange = (columnName: string, field: string, value: any) => {
+    setEditedColumns((prev) => ({
+      ...prev,
+      [columnName]: {
+        ...prev[columnName],
+        [field]: value,
+      },
+    }));
+    
+    // 참조 테이블 변경 시 참조 컬럼 초기화
+    if (field === "referenceTable") {
+      setEditedColumns((prev) => ({
+        ...prev,
+        [columnName]: {
+          ...prev[columnName],
+          referenceColumn: "",
+          displayColumn: "",
+        },
+      }));
+      if (value && value !== "none") {
+        loadRefTableColumns(value);
+      }
+    }
+  };
+
+  // 전체 저장 (테이블타입관리 페이지와 동일한 로직)
+  const handleSaveAll = async () => {
+    setSaving(true);
+    try {
+      // 변경된 컬럼들만 저장
+      for (const [columnName, editedSettings] of Object.entries(editedColumns)) {
+        // 기존 컬럼 정보 찾기
+        const originalColumn = tableColumns.find((c) => c.columnName === columnName);
+        if (!originalColumn) continue;
+
+        // 기존 값과 편집된 값 병합
+        const mergedColumn = {
+          ...originalColumn,
+          ...editedSettings,
+        };
+
+        // detailSettings 처리 (Entity 타입인 경우)
+        let finalDetailSettings = mergedColumn.detailSettings || "";
+
+        if (mergedColumn.inputType === "entity" && mergedColumn.referenceTable) {
+          // 기존 detailSettings를 파싱하거나 새로 생성
+          let existingSettings: Record<string, unknown> = {};
+          if (typeof mergedColumn.detailSettings === "string" && mergedColumn.detailSettings.trim().startsWith("{")) {
+            try {
+              existingSettings = JSON.parse(mergedColumn.detailSettings);
+            } catch {
+              existingSettings = {};
+            }
+          }
+
+          // 엔티티 설정 추가
+          const entitySettings = {
+            ...existingSettings,
+            entityTable: mergedColumn.referenceTable,
+            entityCodeColumn: mergedColumn.referenceColumn || "id",
+            entityLabelColumn: mergedColumn.displayColumn || "name",
+            placeholder: (existingSettings.placeholder as string) || "항목을 선택하세요",
+            searchable: existingSettings.searchable ?? true,
+          };
+
+          finalDetailSettings = JSON.stringify(entitySettings);
+          console.log("Entity 설정 JSON 생성:", entitySettings);
+        }
+
+        // Code 타입인 경우 hierarchyRole을 detailSettings에 포함
+        if (mergedColumn.inputType === "code" && (mergedColumn as any).hierarchyRole) {
+          let existingSettings: Record<string, unknown> = {};
+          if (typeof finalDetailSettings === "string" && finalDetailSettings.trim().startsWith("{")) {
+            try {
+              existingSettings = JSON.parse(finalDetailSettings);
+            } catch {
+              existingSettings = {};
+            }
+          }
+
+          const codeSettings = {
+            ...existingSettings,
+            hierarchyRole: (mergedColumn as any).hierarchyRole,
+          };
+
+          finalDetailSettings = JSON.stringify(codeSettings);
+          console.log("Code 계층 역할 설정 JSON 생성:", codeSettings);
+        }
+
+        // ColumnSettings 인터페이스에 맞게 데이터 구성
+        const columnSetting: ColumnSettings = {
+          columnName: columnName,
+          columnLabel: mergedColumn.displayName || originalColumn.displayName || "",
+          webType: mergedColumn.inputType || originalColumn.inputType || "text",
+          detailSettings: finalDetailSettings,
+          codeCategory: mergedColumn.codeCategory || originalColumn.codeCategory || "",
+          codeValue: mergedColumn.codeValue || originalColumn.codeValue || "",
+          referenceTable: mergedColumn.referenceTable || "",
+          referenceColumn: mergedColumn.referenceColumn || "",
+          displayColumn: mergedColumn.displayColumn || "",
+        };
+
+        console.log("저장할 컬럼 설정:", columnSetting);
+
+        // API 호출
+        const response = await tableManagementApi.updateColumnSettings(tableName, columnName, columnSetting);
+        
+        if (!response.success) {
+          console.error(`컬럼 '${columnName}' 저장 실패:`, response.message);
+          toast.error(`컬럼 '${columnName}' 저장 실패: ${response.message}`);
+          return;
+        }
+      }
+      
+      toast.success("테이블 설정이 저장되었습니다.");
+      setEditedColumns({}); // 편집 상태 초기화
+      onSaveSuccess?.();
+      await loadTableData();
+    } catch (error) {
+      console.error("저장 실패:", error);
+      toast.error("저장에 실패했습니다.");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  // 컬럼 정보 통합
+  const mergedColumns = useMemo(() => {
+    const columnsMap = new Map<string, ColumnTypeInfo & { isPK?: boolean; isFK?: boolean }>();
+
+    // API에서 가져온 컬럼 정보 (camelCase)
+    tableColumns.forEach((tcol) => {
+      columnsMap.set(tcol.columnName, {
+        ...tcol,
+        isPK: tcol.isPrimaryKey,
+        isFK: false, // 백엔드에서 isForeignKey를 제공하지 않으므로 false 기본값
+      });
+    });
+
+    return Array.from(columnsMap.values());
+  }, [tableColumns]);
+
+  // 선택된 컬럼 정보
+  const selectedColumnInfo = useMemo(() => {
+    if (!selectedColumn) return null;
+    return mergedColumns.find((c) => c.columnName === selectedColumn);
+  }, [selectedColumn, mergedColumns]);
+
+  // 테이블 옵션
+  const tableOptions = useMemo(
+    () => [
+      { value: "none", label: "-- 선택 안함 --" },
+      ...tables.map((t) => ({
+        value: t.tableName,
+        label: t.displayName || t.tableName,
+        description: t.tableName,
+      })),
+    ],
+    [tables]
+  );
+
+  // 입력 타입 옵션
+  const inputTypeOptions = useMemo(
+    () =>
+      INPUT_TYPE_OPTIONS.map((opt) => ({
+        value: opt.value,
+        label: opt.label,
+      })),
+    []
+  );
+
+  // 참조 테이블 컬럼 옵션
+  const getRefColumnOptions = (refTable: string) => {
+    const cols = refTableColumns[refTable] || [];
+    return [
+      { value: "", label: "-- 선택 안함 --" },
+      ...cols.map((c) => ({
+        value: c.columnName,
+        label: c.displayName || c.columnName,
+        description: c.dataType,
+      })),
+    ];
+  };
+
+  return (
+    <>
+    <Dialog open={isOpen} onOpenChange={onClose}>
+      <DialogContent className="flex h-[85vh] max-h-[900px] w-[95vw] max-w-[1200px] flex-col">
+        <DialogHeader className="flex-shrink-0">
+          <div className="flex items-center justify-between">
+            <DialogTitle className="flex items-center gap-2 text-lg">
+              <Table2 className="h-5 w-5 text-green-500" />
+              테이블 설정: {tableLabel || tableName}
+              {tableName !== tableLabel && tableName !== (tableLabel || tableName) && (
+                <span className="text-sm font-normal text-muted-foreground">
+                  ({tableName})
+                </span>
+              )}
+            </DialogTitle>
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => setShowTableManagementModal(true)}
+              className="gap-1 text-xs"
+            >
+              <Settings className="h-3.5 w-3.5" />
+              테이블 타입 관리
+            </Button>
+          </div>
+          <DialogDescription className="text-sm">
+            테이블의 컬럼 설정, 조인 관계, 화면 연동 현황을 확인하고 설정합니다.
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="flex min-h-0 flex-1 gap-4">
+          {/* 좌측: 탭 (40%) */}
+          <div className="flex w-[40%] min-h-0 flex-col">
+            <Tabs
+              value={activeTab}
+              onValueChange={setActiveTab}
+              className="flex min-h-0 flex-1 flex-col"
+            >
+              <div className="flex flex-shrink-0 items-center justify-between border-b pb-2">
+                <TabsList className="h-9">
+                  <TabsTrigger value="columns" className="gap-1 text-xs">
+                    <Columns3 className="h-3.5 w-3.5" />
+                    컬럼 설정
+                  </TabsTrigger>
+                  <TabsTrigger value="screens" className="gap-1 text-xs">
+                    <Monitor className="h-3.5 w-3.5" />
+                    화면 연동
+                  </TabsTrigger>
+                  <TabsTrigger value="references" className="gap-1 text-xs">
+                    <Eye className="h-3.5 w-3.5" />
+                    참조 관계
+                  </TabsTrigger>
+                </TabsList>
+                <div className="flex gap-2">
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={handleRefresh}
+                    className="h-8 gap-1"
+                    disabled={loading}
+                  >
+                    <RefreshCw className={cn("h-3.5 w-3.5", loading && "animate-spin")} />
+                  </Button>
+                  <Button
+                    size="sm"
+                    onClick={handleSaveAll}
+                    className="h-8 gap-1"
+                    disabled={saving || loading}
+                  >
+                    {saving ? (
+                      <Loader2 className="h-3.5 w-3.5 animate-spin" />
+                    ) : (
+                      <Save className="h-3.5 w-3.5" />
+                    )}
+                    저장
+                  </Button>
+                </div>
+              </div>
+
+              {/* 탭 1: 컬럼 설정 */}
+              <TabsContent value="columns" className="mt-0 min-h-0 flex-1 overflow-auto">
+                <ColumnListTab
+                  columns={mergedColumns}
+                  editedColumns={editedColumns}
+                  selectedColumn={selectedColumn}
+                  onSelectColumn={setSelectedColumn}
+                  loading={loading}
+                />
+              </TabsContent>
+
+              {/* 탭 2: 화면 연동 */}
+              <TabsContent value="screens" className="mt-0 min-h-0 flex-1 overflow-auto p-3">
+                <ScreensTab
+                  screensUsingTable={screensUsingTable}
+                  loading={loading}
+                />
+              </TabsContent>
+
+              {/* 탭 3: 참조 관계 */}
+              <TabsContent value="references" className="mt-0 min-h-0 flex-1 overflow-auto p-3">
+                <ReferenceTab
+                  tableName={tableName}
+                  tableLabel={tableLabel}
+                  referencedBy={referencedBy}
+                  joinColumnRefs={joinColumnRefs}
+                  loading={loading}
+                />
+              </TabsContent>
+            </Tabs>
+          </div>
+
+          {/* 우측: 컬럼 상세 설정 (60%) */}
+          <div className="flex w-[60%] min-h-0 flex-col rounded-lg border bg-muted/30 p-4">
+            {selectedColumn && selectedColumnInfo ? (
+              <ColumnDetailPanel
+                columnInfo={selectedColumnInfo}
+                editedColumn={editedColumns[selectedColumn] || {}}
+                tableOptions={tableOptions}
+                inputTypeOptions={inputTypeOptions}
+                getRefColumnOptions={getRefColumnOptions}
+                loadingRefColumns={loadingRefColumns}
+                onColumnChange={(field, value) => handleColumnChange(selectedColumn, field, value)}
+              />
+            ) : (
+              <div className="flex h-full items-center justify-center text-sm text-muted-foreground">
+                <div className="text-center">
+                  <Columns3 className="mx-auto h-12 w-12 text-muted-foreground/30" />
+                  <p className="mt-2">왼쪽에서 컬럼을 선택하면</p>
+                  <p>상세 설정을 할 수 있습니다.</p>
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+
+    {/* 테이블 타입 관리 전체 화면 모달 */}
+    <Dialog open={showTableManagementModal} onOpenChange={setShowTableManagementModal}>
+      <DialogContent className="max-w-[98vw] h-[95vh] p-0 overflow-hidden">
+        <div className="flex flex-col h-full">
+          {/* 헤더 */}
+          <div className="flex items-center justify-between px-4 py-3 border-b bg-background">
+            <div>
+              <DialogTitle className="text-lg font-semibold">
+                테이블 타입 관리
+              </DialogTitle>
+              <p className="text-xs text-muted-foreground">
+                데이터베이스 테이블과 컬럼의 타입을 관리합니다
+              </p>
+            </div>
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => {
+                setShowTableManagementModal(false);
+                // 테이블 데이터 새로고침
+                loadTableData();
+              }}
+            >
+              <X className="h-4 w-4" />
+            </Button>
+          </div>
+          
+          {/* TableManagementPage */}
+          <div className="flex-1 overflow-hidden">
+            <TableManagementPage />
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+    </>
+  );
+}
+
+// ============================================================
+// 탭 1: 컬럼 목록
+// ============================================================
+
+interface ColumnListTabProps {
+  columns: (ColumnTypeInfo & { isPK?: boolean; isFK?: boolean })[];
+  editedColumns: Record<string, Partial<ColumnTypeInfo>>;
+  selectedColumn: string | null;
+  onSelectColumn: (columnName: string) => void;
+  loading: boolean;
+}
+
+function ColumnListTab({
+  columns,
+  editedColumns,
+  selectedColumn,
+  onSelectColumn,
+  loading,
+}: ColumnListTabProps) {
+  const [searchTerm, setSearchTerm] = useState("");
+
+  const filteredColumns = useMemo(() => {
+    if (!searchTerm) return columns;
+    const term = searchTerm.toLowerCase();
+    return columns.filter(
+      (col) =>
+        col.columnName.toLowerCase().includes(term) ||
+        (col.displayName || "").toLowerCase().includes(term)
+    );
+  }, [columns, searchTerm]);
+
+  if (loading) {
+    return (
+      <div className="flex h-64 items-center justify-center">
+        <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex h-full flex-col">
+      {/* 검색 */}
+      <div className="flex-shrink-0 p-3 pb-2">
+        <div className="relative">
+          <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+          <Input
+            placeholder="컬럼 검색..."
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+            className="h-9 pl-9 text-sm"
+          />
+        </div>
+      </div>
+
+      {/* 통계 */}
+      <div className="flex-shrink-0 px-3 pb-2">
+        <div className="flex gap-2 text-xs text-muted-foreground">
+          <span>전체 {columns.length}개</span>
+          <span>•</span>
+          <span>PK {columns.filter((c) => c.isPK).length}개</span>
+          <span>•</span>
+          <span>FK {columns.filter((c) => c.isFK).length}개</span>
+        </div>
+      </div>
+
+      {/* 컬럼 목록 */}
+      <div className="flex-1 overflow-y-auto">
+        {filteredColumns.length === 0 ? (
+          <div className="py-8 text-center text-sm text-muted-foreground">
+            {searchTerm ? "검색 결과가 없습니다." : "컬럼이 없습니다."}
+          </div>
+        ) : (
+          <div className="space-y-1 px-3 pb-3">
+            {filteredColumns.map((col) => {
+              const edited = editedColumns[col.columnName] || {};
+              const inputType = (edited.inputType || col.inputType || "text") as string;
+              const isSelected = selectedColumn === col.columnName;
+
+              return (
+                <div
+                  key={col.columnName}
+                  onClick={() => onSelectColumn(col.columnName)}
+                  className={cn(
+                    "cursor-pointer rounded-lg border p-3 transition-colors",
+                    isSelected
+                      ? "border-green-300 bg-green-50"
+                      : "border-transparent bg-background hover:bg-muted/50"
+                  )}
+                >
+                  <div className="flex items-center justify-between">
+                    <div className="flex items-center gap-2">
+                      <span className="text-xs text-muted-foreground">
+                        {getInputTypeIcon(inputType)}
+                      </span>
+                      <span className="text-sm font-medium">
+                        {edited.displayName || col.displayName || col.columnName}
+                      </span>
+                    </div>
+                    <div className="flex gap-1">
+                      {col.isPK && (
+                        <Badge variant="outline" className="bg-orange-100 text-orange-700 text-[10px] px-1.5">
+                          <Key className="mr-0.5 h-2.5 w-2.5" />
+                          PK
+                        </Badge>
+                      )}
+                      {col.isFK && (
+                        <Badge variant="outline" className="bg-green-100 text-green-700 text-[10px] px-1.5">
+                          <Link2 className="mr-0.5 h-2.5 w-2.5" />
+                          FK
+                        </Badge>
+                      )}
+                      {(edited.referenceTable || col.referenceTable) && (
+                        <Badge variant="outline" className="bg-blue-100 text-blue-700 text-[10px] px-1.5">
+                          조인
+                        </Badge>
+                      )}
+                    </div>
+                  </div>
+                  <div className="mt-1 flex items-center gap-2 text-xs text-muted-foreground">
+                    <span className="font-mono">{col.columnName}</span>
+                    <span>•</span>
+                    <span>{col.dataType}</span>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+// ============================================================
+// 컬럼 상세 설정 패널
+// ============================================================
+
+interface ColumnDetailPanelProps {
+  columnInfo: ColumnTypeInfo & { isPK?: boolean; isFK?: boolean };
+  editedColumn: Partial<ColumnTypeInfo>;
+  tableOptions: Array<{ value: string; label: string; description?: string }>;
+  inputTypeOptions: Array<{ value: string; label: string }>;
+  getRefColumnOptions: (refTable: string) => Array<{ value: string; label: string; description?: string }>;
+  loadingRefColumns: boolean;
+  onColumnChange: (field: string, value: any) => void;
+}
+
+function ColumnDetailPanel({
+  columnInfo,
+  editedColumn,
+  tableOptions,
+  inputTypeOptions,
+  getRefColumnOptions,
+  loadingRefColumns,
+  onColumnChange,
+}: ColumnDetailPanelProps) {
+  const currentLabel = editedColumn.displayName ?? columnInfo.displayName ?? "";
+  const currentInputType = (editedColumn.inputType ?? columnInfo.inputType ?? "text") as string;
+  const currentRefTable = editedColumn.referenceTable ?? columnInfo.referenceTable ?? "";
+  const currentRefColumn = editedColumn.referenceColumn ?? columnInfo.referenceColumn ?? "";
+  const currentDisplayColumn = editedColumn.displayColumn ?? columnInfo.displayColumn ?? "";
+
+  return (
+    <div className="flex h-full flex-col">
+      {/* 헤더 */}
+      <div className="flex-shrink-0 border-b pb-4">
+        <div className="flex items-center gap-2">
+          <Settings2 className="h-5 w-5 text-green-500" />
+          <h3 className="text-lg font-semibold">컬럼 설정</h3>
+        </div>
+        <div className="mt-2 flex items-center gap-2">
+          <span className="font-mono text-sm bg-muted px-2 py-0.5 rounded">
+            {columnInfo.columnName}
+          </span>
+          <span className="text-xs text-muted-foreground">{columnInfo.dataType}</span>
+          {columnInfo.isPK && (
+            <Badge variant="outline" className="bg-orange-100 text-orange-700 text-[10px]">
+              Primary Key
+            </Badge>
+          )}
+          {columnInfo.isFK && (
+            <Badge variant="outline" className="bg-green-100 text-green-700 text-[10px]">
+              Foreign Key
+            </Badge>
+          )}
+        </div>
+      </div>
+
+      {/* 설정 폼 */}
+      <div className="flex-1 overflow-y-auto py-4 space-y-6">
+        {/* 기본 정보 */}
+        <div className="space-y-4">
+          <h4 className="text-sm font-semibold text-muted-foreground">기본 정보</h4>
+          
+          <div className="space-y-2">
+            <Label className="text-xs">표시 라벨</Label>
+            <Input
+              value={currentLabel}
+              onChange={(e) => onColumnChange("displayName", e.target.value)}
+              placeholder={columnInfo.columnName}
+              className="h-9 text-sm"
+            />
+            <p className="text-[10px] text-muted-foreground">
+              화면에 표시될 컬럼 이름입니다.
+            </p>
+          </div>
+
+          <div className="space-y-2">
+            <Label className="text-xs">입력 타입</Label>
+            <Select
+              value={currentInputType}
+              onValueChange={(v) => onColumnChange("inputType", v)}
+            >
+              <SelectTrigger className="h-9 text-sm">
+                <SelectValue placeholder="입력 타입 선택" />
+              </SelectTrigger>
+              <SelectContent>
+                {inputTypeOptions.map((opt) => (
+                  <SelectItem key={opt.value} value={opt.value}>
+                    <div className="flex items-center gap-2">
+                      {getInputTypeIcon(opt.value)}
+                      {opt.label}
+                    </div>
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+            <p className="text-[10px] text-muted-foreground">
+              데이터 입력 시 사용할 컴포넌트 유형입니다.
+            </p>
+          </div>
+        </div>
+
+        {/* 조인 설정 (Entity 타입일 때만) */}
+        {currentInputType === "entity" && (
+          <div className="space-y-4">
+            <h4 className="text-sm font-semibold text-muted-foreground">Entity 조인 설정</h4>
+            
+            <div className="space-y-2">
+              <Label className="text-xs">참조 테이블</Label>
+              <SearchableSelect
+                value={currentRefTable || "none"}
+                onValueChange={(v) => onColumnChange("referenceTable", v === "none" ? "" : v)}
+                options={tableOptions}
+                placeholder="테이블 선택"
+              />
+            </div>
+
+            {currentRefTable && currentRefTable !== "none" && (
+              <>
+                <div className="space-y-2">
+                  <Label className="text-xs">조인 컬럼 (PK)</Label>
+                  {loadingRefColumns ? (
+                    <div className="flex items-center gap-2 h-9 text-sm text-muted-foreground">
+                      <Loader2 className="h-4 w-4 animate-spin" />
+                      컬럼 로딩 중...
+                    </div>
+                  ) : (
+                    <SearchableSelect
+                      value={currentRefColumn}
+                      onValueChange={(v) => onColumnChange("referenceColumn", v)}
+                      options={getRefColumnOptions(currentRefTable)}
+                      placeholder="컬럼 선택"
+                    />
+                  )}
+                  <p className="text-[10px] text-muted-foreground">
+                    이 컬럼과 연결될 참조 테이블의 컬럼입니다.
+                  </p>
+                </div>
+
+                <div className="space-y-2">
+                  <Label className="text-xs">표시 컬럼</Label>
+                  {loadingRefColumns ? (
+                    <div className="flex items-center gap-2 h-9 text-sm text-muted-foreground">
+                      <Loader2 className="h-4 w-4 animate-spin" />
+                      컬럼 로딩 중...
+                    </div>
+                  ) : (
+                    <SearchableSelect
+                      value={currentDisplayColumn}
+                      onValueChange={(v) => onColumnChange("displayColumn", v)}
+                      options={getRefColumnOptions(currentRefTable)}
+                      placeholder="표시 컬럼 선택"
+                    />
+                  )}
+                  <p className="text-[10px] text-muted-foreground">
+                    화면에 실제로 표시될 참조 테이블의 컬럼입니다.
+                  </p>
+                </div>
+              </>
+            )}
+          </div>
+        )}
+
+        {/* 컬럼 정보 (읽기 전용) */}
+        <div className="space-y-4">
+          <h4 className="text-sm font-semibold text-muted-foreground">컬럼 정보</h4>
+          
+          <div className="grid grid-cols-2 gap-4 text-sm">
+            <div>
+              <span className="text-xs text-muted-foreground">데이터 타입</span>
+              <p className="font-mono">{columnInfo.dataType}</p>
+            </div>
+            <div>
+              <span className="text-xs text-muted-foreground">NULL 허용</span>
+              <p>{columnInfo.isNullable === "YES" ? "예" : "아니오"}</p>
+            </div>
+            {columnInfo.maxLength && (
+              <div>
+                <span className="text-xs text-muted-foreground">최대 길이</span>
+                <p>{columnInfo.maxLength}</p>
+              </div>
+            )}
+            {columnInfo.defaultValue && (
+              <div>
+                <span className="text-xs text-muted-foreground">기본값</span>
+                <p className="font-mono text-xs">{columnInfo.defaultValue}</p>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// ============================================================
+// 탭 2: 화면 연동 현황
+// ============================================================
+
+interface ScreensTabProps {
+  screensUsingTable: ScreenUsingTable[];
+  loading: boolean;
+}
+
+function ScreensTab({ screensUsingTable, loading }: ScreensTabProps) {
+  if (loading) {
+    return (
+      <div className="flex h-64 items-center justify-center">
+        <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center justify-between">
+        <h3 className="text-sm font-semibold">
+          이 테이블을 사용하는 화면 ({screensUsingTable.length}개)
+        </h3>
+      </div>
+
+      {screensUsingTable.length === 0 ? (
+        <div className="rounded-lg border border-dashed p-8 text-center text-sm text-muted-foreground">
+          <Monitor className="mx-auto h-12 w-12 text-muted-foreground/30" />
+          <p className="mt-2">이 테이블을 사용하는 화면이 없습니다.</p>
+        </div>
+      ) : (
+        <div className="space-y-2">
+          {screensUsingTable.map((screen) => (
+            <div
+              key={screen.screenId}
+              className="flex items-center justify-between rounded-lg border bg-background p-3 hover:bg-muted/50"
+            >
+              <div className="flex items-center gap-3">
+                <Monitor className="h-4 w-4 text-blue-500" />
+                <div>
+                  <p className="text-sm font-medium">{screen.screenName}</p>
+                  {screen.screenCode && (
+                    <p className="text-xs text-muted-foreground font-mono">
+                      {screen.screenCode}
+                    </p>
+                  )}
+                </div>
+              </div>
+              <div className="flex items-center gap-2">
+                <Badge
+                  variant="outline"
+                  className={cn(
+                    "text-[10px]",
+                    screen.tableRole === "main"
+                      ? "bg-blue-100 text-blue-700"
+                      : screen.tableRole === "filter"
+                      ? "bg-purple-100 text-purple-700"
+                      : "bg-orange-100 text-orange-700"
+                  )}
+                >
+                  {screen.tableRole === "main"
+                    ? "메인 테이블"
+                    : screen.tableRole === "filter"
+                    ? "필터 테이블"
+                    : "조인 테이블"}
+                </Badge>
+                <Button variant="ghost" size="icon" className="h-7 w-7">
+                  <ExternalLink className="h-3.5 w-3.5" />
+                </Button>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ============================================================
+// 탭 3: 참조 관계
+// ============================================================
+
+interface ReferenceTabProps {
+  tableName: string;
+  tableLabel?: string;
+  referencedBy: ReferencedBy[];
+  joinColumnRefs: JoinColumnRef[];
+  loading: boolean;
+}
+
+function ReferenceTab({
+  tableName,
+  tableLabel,
+  referencedBy,
+  joinColumnRefs,
+  loading,
+}: ReferenceTabProps) {
+  if (loading) {
+    return (
+      <div className="flex h-64 items-center justify-center">
+        <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* 이 테이블이 참조하는 테이블 */}
+      <div className="space-y-2">
+        <h3 className="flex items-center gap-2 text-sm font-semibold">
+          <ArrowRight className="h-4 w-4 text-orange-500" />
+          이 테이블이 참조하는 테이블 ({joinColumnRefs.length}개)
+        </h3>
+        {joinColumnRefs.length > 0 ? (
+          <div className="space-y-2">
+            {joinColumnRefs.map((ref, idx) => (
+              <div
+                key={idx}
+                className="flex items-center gap-3 rounded-lg border bg-orange-50/50 p-3"
+              >
+                <Badge variant="outline" className="bg-orange-100 text-orange-700">
+                  {ref.column}
+                </Badge>
+                <ArrowRight className="h-4 w-4 text-muted-foreground" />
+                <div className="flex-1">
+                  <span className="font-medium">
+                    {ref.refTableLabel || ref.refTable}
+                  </span>
+                  <span className="text-muted-foreground">.{ref.refColumn}</span>
+                </div>
+              </div>
+            ))}
+          </div>
+        ) : (
+          <div className="rounded-lg border border-dashed p-4 text-center text-sm text-muted-foreground">
+            참조하는 테이블이 없습니다.
+          </div>
+        )}
+      </div>
+
+      {/* 이 테이블을 참조하는 테이블 */}
+      <div className="space-y-2">
+        <h3 className="flex items-center gap-2 text-sm font-semibold">
+          <Eye className="h-4 w-4 text-green-500" />
+          이 테이블을 참조하는 테이블 ({referencedBy.length}개)
+        </h3>
+        {referencedBy.length > 0 ? (
+          <div className="space-y-2">
+            {referencedBy.map((ref, idx) => (
+              <div
+                key={idx}
+                className="flex items-center gap-3 rounded-lg border bg-green-50/50 p-3"
+              >
+                <div className="flex-1">
+                  <span className="font-medium">
+                    {ref.fromTableLabel || ref.fromTable}
+                  </span>
+                  <span className="text-muted-foreground">.{ref.fromColumn}</span>
+                </div>
+                <ArrowRight className="h-4 w-4 text-muted-foreground" />
+                <Badge variant="outline" className="bg-green-100 text-green-700">
+                  {ref.toColumn}
+                </Badge>
+              </div>
+            ))}
+          </div>
+        ) : (
+          <div className="rounded-lg border border-dashed p-4 text-center text-sm text-muted-foreground">
+            이 테이블을 참조하는 테이블이 없습니다.
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default TableSettingModal;
diff --git a/frontend/components/screen/config-panels/ButtonConfigPanel.tsx b/frontend/components/screen/config-panels/ButtonConfigPanel.tsx
index 93b9297f..a1d1d589 100644
--- a/frontend/components/screen/config-panels/ButtonConfigPanel.tsx
+++ b/frontend/components/screen/config-panels/ButtonConfigPanel.tsx
@@ -61,6 +61,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[]>([]);
@@ -98,6 +99,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>>({});
 
@@ -142,6 +148,7 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
       editModalTitle: String(latestAction.editModalTitle || ""),
       editModalDescription: String(latestAction.editModalDescription || ""),
       targetUrl: String(latestAction.targetUrl || ""),
+      groupByColumn: String(latestAction.groupByColumns?.[0] || ""),
     });
 
     // 🆕 제목 블록 초기화
@@ -180,9 +187,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);
   };
@@ -230,45 +235,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;
@@ -291,7 +296,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 {
@@ -300,7 +305,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,
@@ -313,7 +318,7 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
           console.error("소스 테이블 컬럼 로드 실패:", error);
         }
       }
-      
+
       if (targetTable) {
         try {
           const response = await apiClient.get(`/table-management/tables/${targetTable}/columns`);
@@ -321,7 +326,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,
@@ -335,10 +340,11 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
         }
       }
     };
-    
+
     loadColumns();
   }, [config.action?.dataTransfer?.sourceTable, config.action?.dataTransfer?.targetTable]);
 
+<<<<<<< HEAD
   // 🆕 modal 액션: 대상 화면 테이블 조회 및 필드 매핑 로드
   useEffect(() => {
     const actionType = config.action?.type;
@@ -456,6 +462,34 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [config.action?.type, config.action?.autoDetectDataSource, config.action?.targetScreenId, currentTableName, allComponents]);
 
+  // 🆕 현재 테이블 컬럼 로드 (그룹화 컬럼 선택용)
+  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);
+          }
+        }
+      } catch (error) {
+        console.error("현재 테이블 컬럼 로드 실패:", error);
+      }
+    };
+
+    loadCurrentTableColumns();
+  }, [currentTableName]);
+
   // 🆕 openModalWithData 소스/타겟 테이블 컬럼 로드
   useEffect(() => {
     const actionType = config.action?.type;
@@ -464,45 +498,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;
@@ -511,7 +543,7 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
             break;
           }
         }
-        
+
         // 🆕 모든 컴포넌트에서 tableName 찾기 (폴백)
         if (!sourceTableName && compConfig?.tableName) {
           sourceTableName = compConfig.tableName;
@@ -519,13 +551,13 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
           break;
         }
       }
-      
+
       // 여전히 없으면 currentTableName 사용 (화면 레벨 테이블명)
       if (!sourceTableName && currentTableName) {
         sourceTableName = currentTableName;
         console.log(`✅ [openModalWithData] currentTableName에서 소스 테이블 사용: ${sourceTableName}`);
       }
-      
+
       if (!sourceTableName) {
         console.warn("[openModalWithData] 소스 테이블을 찾을 수 없습니다.");
       }
@@ -538,11 +570,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);
@@ -560,22 +599,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);
@@ -606,12 +652,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,
         });
@@ -793,8 +839,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>
@@ -822,7 +868,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>
@@ -878,15 +924,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);
@@ -901,7 +947,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>
                       ));
@@ -1136,23 +1184,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>
@@ -1162,7 +1198,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>
               ) : (
@@ -1194,7 +1230,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" />
                         ) : (
@@ -1229,15 +1265,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) => {
@@ -1271,11 +1307,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>
@@ -1300,15 +1338,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) => {
@@ -1344,11 +1383,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>
@@ -1387,17 +1428,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>
 
@@ -1455,15 +1498,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);
@@ -1478,7 +1521,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>
                       ));
@@ -1487,7 +1532,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>
@@ -1511,7 +1556,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에 매핑)
@@ -1519,41 +1564,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" />
@@ -1585,12 +1625,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>
                                 ))}
@@ -1603,25 +1643,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" />
@@ -1653,12 +1690,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>
                                 ))}
@@ -1675,14 +1712,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>
@@ -1696,8 +1733,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>
@@ -1733,15 +1770,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);
@@ -1756,7 +1793,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>
                       ));
@@ -1765,7 +1804,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>
@@ -1804,7 +1843,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>
@@ -1820,7 +1859,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>
@@ -1845,13 +1884,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>
@@ -1887,15 +2027,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);
@@ -1910,7 +2050,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>
                       ));
@@ -1919,7 +2061,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>
@@ -1957,7 +2099,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>
@@ -1973,7 +2115,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>
@@ -2032,9 +2174,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
@@ -2066,8 +2206,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>
@@ -2103,15 +2243,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);
@@ -2126,7 +2266,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>
                       ));
@@ -2135,7 +2277,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>
@@ -2153,15 +2295,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>
@@ -2172,7 +2314,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>
@@ -2199,48 +2341,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">
@@ -2253,7 +2365,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>
@@ -2286,8 +2398,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">
@@ -2300,7 +2412,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>
@@ -2308,7 +2420,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"
@@ -2340,8 +2452,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">
@@ -2365,9 +2477,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">
@@ -2382,7 +2492,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">
@@ -2395,13 +2505,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">
@@ -2414,7 +2524,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">
@@ -2450,7 +2560,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>
@@ -2458,7 +2568,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"
@@ -2476,7 +2586,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">
@@ -2507,7 +2617,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"
@@ -2515,25 +2625,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>
@@ -2544,7 +2662,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>
@@ -2553,7 +2673,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>
@@ -2569,7 +2691,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"
@@ -2577,11 +2699,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)}
@@ -2595,7 +2719,7 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
                   </SelectContent>
                 </Select>
               </div>
-              
+
               {config.action?.updateTrackingMode === "start" && (
                 <div>
                   <Label>위치 저장 주기 (초)</Label>
@@ -2603,17 +2727,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>
@@ -2622,13 +2751,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"
@@ -2645,7 +2774,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>
@@ -2666,7 +2797,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"
@@ -2694,9 +2825,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>
@@ -2706,7 +2835,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>
@@ -2718,9 +2847,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>
@@ -2745,9 +2872,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>
             )}
@@ -2760,8 +2885,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>
@@ -2769,8 +2893,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>
@@ -2779,7 +2903,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="데이터를 가져올 컴포넌트 선택" />
@@ -2790,8 +2916,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) => {
@@ -2801,14 +2927,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>
                     데이터 제공 가능한 컴포넌트가 없습니다
@@ -2816,9 +2944,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>
@@ -2835,12 +2961,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>
@@ -2853,7 +2982,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="데이터를 받을 컴포넌트 선택" />
@@ -2865,7 +2996,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;
@@ -2877,14 +3008,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>
@@ -2893,25 +3026,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>
@@ -2932,32 +3063,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>
 
@@ -2986,7 +3119,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>
@@ -2999,7 +3137,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>
@@ -3008,7 +3151,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">
@@ -3039,8 +3182,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) => {
@@ -3050,14 +3193,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>
@@ -3081,9 +3224,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>
@@ -3091,18 +3232,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
@@ -3128,11 +3265,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>
@@ -3141,16 +3278,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
@@ -3176,11 +3309,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>
@@ -3190,7 +3323,7 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
                 </Popover>
               </div>
             </div>
-            
+
             {/* 필드 매핑 규칙 */}
             <div className="space-y-2">
               <div className="flex items-center justify-between">
@@ -3211,26 +3344,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
@@ -3238,13 +3369,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>
@@ -3255,10 +3383,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
@@ -3275,12 +3407,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>
                                   ))}
@@ -3290,9 +3422,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
@@ -3300,13 +3432,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>
@@ -3317,10 +3446,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
@@ -3337,12 +3470,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>
                                   ))}
@@ -3352,12 +3485,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);
@@ -3398,18 +3531,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}
@@ -3420,7 +3551,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
@@ -3439,7 +3570,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>
@@ -3447,7 +3578,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>
@@ -3470,14 +3601,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}
@@ -3488,3 +3621,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/DataFlowPanel.tsx b/frontend/components/screen/panels/DataFlowPanel.tsx
index b9b70913..4b31d1a9 100644
--- a/frontend/components/screen/panels/DataFlowPanel.tsx
+++ b/frontend/components/screen/panels/DataFlowPanel.tsx
@@ -456,3 +456,9 @@ export default function DataFlowPanel({ groupId, screenId, screens = [] }: DataF
 
 
 
+
+
+
+
+
+
diff --git a/frontend/components/screen/panels/FieldJoinPanel.tsx b/frontend/components/screen/panels/FieldJoinPanel.tsx
index 0995a14f..884ac69b 100644
--- a/frontend/components/screen/panels/FieldJoinPanel.tsx
+++ b/frontend/components/screen/panels/FieldJoinPanel.tsx
@@ -408,3 +408,9 @@ export default function FieldJoinPanel({ screenId, componentId, layoutId }: Fiel
 
 
 
+
+
+
+
+
+
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 1a573847..76976c0e 100644
--- a/frontend/components/screen/toolbar/SlimToolbar.tsx
+++ b/frontend/components/screen/toolbar/SlimToolbar.tsx
@@ -18,6 +18,8 @@ import {
   Eye,
   EyeOff,
   Zap,
+  Languages,
+  Settings2,
 } from "lucide-react";
 import { ScreenResolution, SCREEN_RESOLUTIONS } from "@/types/screen";
 import {
@@ -55,6 +57,9 @@ interface SlimToolbarProps {
   onResolutionChange?: (resolution: ScreenResolution) => void;
   gridSettings?: GridSettings;
   onGridSettingsChange?: (settings: GridSettings) => void;
+  onGenerateMultilang?: () => void;
+  isGeneratingMultilang?: boolean;
+  onOpenMultilangSettings?: () => void;
 }
 
 export const SlimToolbar: React.FC<SlimToolbarProps> = ({
@@ -68,6 +73,9 @@ export const SlimToolbar: React.FC<SlimToolbarProps> = ({
   onResolutionChange,
   gridSettings,
   onGridSettingsChange,
+  onGenerateMultilang,
+  isGeneratingMultilang = false,
+  onOpenMultilangSettings,
 }) => {
   // 사용자 정의 해상도 상태
   const [customWidth, setCustomWidth] = useState("");
@@ -290,6 +298,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/screen/widgets/types/ButtonWidget.tsx b/frontend/components/screen/widgets/types/ButtonWidget.tsx
index 866427c6..988167d2 100644
--- a/frontend/components/screen/widgets/types/ButtonWidget.tsx
+++ b/frontend/components/screen/widgets/types/ButtonWidget.tsx
@@ -32,14 +32,27 @@ export const ButtonWidget: React.FC<WebTypeComponentProps> = ({
     }
   };
 
+  // 커스텀 색상 확인 (config 또는 style에서)
+  const hasCustomBg = config?.backgroundColor || style?.backgroundColor;
+  const hasCustomColor = config?.textColor || style?.color;
+  const hasCustomColors = hasCustomBg || hasCustomColor;
+  
+  // 실제 적용할 배경색과 글자색
+  const bgColor = config?.backgroundColor || style?.backgroundColor;
+  const textColor = config?.textColor || style?.color;
+  
   // 디자인 모드에서는 div로 렌더링하여 버튼 동작 완전 차단
   if (isDesignMode) {
     return (
       <div
         onClick={handleClick} // 클릭 핸들러 추가하여 이벤트 전파
-        className={`flex items-center justify-center rounded-md bg-blue-600 px-4 text-sm font-medium text-white ${className || ""} `}
+        className={`flex items-center justify-center rounded-md px-4 text-sm font-medium ${
+          hasCustomColors ? '' : 'bg-blue-600 text-white'
+        } ${className || ""}`}
         style={{
           ...style,
+          backgroundColor: bgColor,
+          color: textColor,
           width: "100%",
           height: "100%",
           cursor: "pointer", // 선택 가능하도록 포인터 표시
@@ -56,9 +69,13 @@ export const ButtonWidget: React.FC<WebTypeComponentProps> = ({
       type="button"
       onClick={handleClick}
       disabled={disabled || readonly}
-      className={`flex items-center justify-center rounded-md bg-blue-600 px-4 text-sm font-medium text-white transition-colors duration-200 hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:outline-none disabled:cursor-not-allowed disabled:bg-gray-300 disabled:text-gray-500 ${className || ""} `}
+      className={`flex items-center justify-center rounded-md px-4 text-sm font-medium transition-colors duration-200 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:outline-none disabled:cursor-not-allowed disabled:bg-gray-300 disabled:text-gray-500 ${
+        hasCustomColors ? '' : 'bg-blue-600 text-white hover:bg-blue-700'
+      } ${className || ""}`}
       style={{
         ...style,
+        backgroundColor: bgColor,
+        color: textColor,
         width: "100%",
         height: "100%",
       }}
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/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/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 a3206df9..ddb00ac7 100644
--- a/frontend/lib/api/entityJoin.ts
+++ b/frontend/lib/api/entityJoin.ts
@@ -77,15 +77,32 @@ 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> => {
     // 🔒 멀티테넌시: company_code 자동 필터링 활성화
-    const autoFilter = {
+    const autoFilter: {
+      enabled: boolean;
+      filterColumn: string;
+      userField: string;
+      companyCodeOverride?: string;
+    } = {
       enabled: true,
       filterColumn: "company_code",
       userField: "companyCode",
     };
 
+    // 🆕 프리뷰 모드에서 회사 코드 오버라이드 (최고 관리자만 백엔드에서 허용)
+    if (params.companyCodeOverride) {
+      autoFilter.companyCodeOverride = params.companyCodeOverride;
+    }
+
     const response = await apiClient.get(`/table-management/tables/${tableName}/data-with-joins`, {
       params: {
         page: params.page,
@@ -96,9 +113,10 @@ export const entityJoinApi = {
         search: params.search ? JSON.stringify(params.search) : undefined,
         additionalJoinColumns: params.additionalJoinColumns ? JSON.stringify(params.additionalJoinColumns) : undefined,
         screenEntityConfigs: params.screenEntityConfigs ? JSON.stringify(params.screenEntityConfigs) : undefined, // 🎯 화면별 엔티티 설정
-        autoFilter: JSON.stringify(autoFilter), // 🔒 멀티테넌시 필터링
+        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/screenGroup.ts b/frontend/lib/api/screenGroup.ts
index 2ecd0fb0..65294444 100644
--- a/frontend/lib/api/screenGroup.ts
+++ b/frontend/lib/api/screenGroup.ts
@@ -254,10 +254,17 @@ export async function deleteFieldJoin(id: number): Promise<ApiResponse<void>> {
 // 데이터 흐름 (screen_data_flows) API
 // ============================================================
 
-export async function getDataFlows(groupId?: number): Promise<ApiResponse<DataFlow[]>> {
+export async function getDataFlows(params?: { groupId?: number; sourceScreenId?: number }): Promise<ApiResponse<DataFlow[]>> {
   try {
-    const queryParams = groupId ? `?group_id=${groupId}` : "";
-    const response = await apiClient.get(`/screen-groups/data-flows${queryParams}`);
+    const queryParts: string[] = [];
+    if (params?.groupId) {
+      queryParts.push(`group_id=${params.groupId}`);
+    }
+    if (params?.sourceScreenId) {
+      queryParts.push(`source_screen_id=${params.sourceScreenId}`);
+    }
+    const queryString = queryParts.length > 0 ? `?${queryParts.join("&")}` : "";
+    const response = await apiClient.get(`/screen-groups/data-flows${queryString}`);
     return response.data;
   } catch (error: any) {
     return { success: false, error: error.message };
@@ -353,6 +360,9 @@ export interface LayoutItem {
   componentKind: string; // 정확한 컴포넌트 종류 (table-list, button-primary 등)
   widgetType: string; // 일반적인 위젯 타입 (button, text 등)
   label?: string;
+  bindField?: string; // 바인딩된 필드명 (컬럼명)
+  usedColumns?: string[]; // 이 컴포넌트에서 사용하는 컬럼 목록
+  joinColumns?: string[]; // 이 컴포넌트에서 조인 컬럼 목록 (isEntityJoin=true)
 }
 
 export interface ScreenLayoutSummary {
@@ -388,11 +398,84 @@ export async function getMultipleScreenLayoutSummary(
   }
 }
 
+// 필드 매핑 정보 타입
+export interface FieldMappingInfo {
+  sourceTable?: string;        // 연관 테이블명 (parentDataMapping에서 사용)
+  sourceField: string;
+  targetField: string;
+  sourceDisplayName?: string;  // 메인 테이블 한글 컬럼명
+  targetDisplayName?: string;  // 서브 테이블 한글 컬럼명
+}
+
 // 서브 테이블 정보 타입
 export interface SubTableInfo {
   tableName: string;
+  tableLabel?: string;                        // 테이블 한글명
   componentType: string;
-  relationType: 'lookup' | 'source' | 'join';
+  relationType: 'lookup' | 'source' | 'join' | 'reference' | 'parentMapping' | 'rightPanelRelation';
+  fieldMappings?: FieldMappingInfo[];
+  filterColumns?: string[];                   // 필터링에 사용되는 컬럼 목록
+  // rightPanelRelation에서 추가 정보 (관계 유형 추론용)
+  originalRelationType?: 'join' | 'detail';  // 원본 relation.type
+  foreignKey?: string;                        // 디테일 테이블의 FK 컬럼
+  leftColumn?: string;                        // 마스터 테이블의 선택 기준 컬럼
+  // rightPanel.columns에서 외부 테이블 참조 정보
+  joinedTables?: string[];                    // 참조하는 외부 테이블들 (예: ['customer_mng'])
+  joinColumns?: string[];                     // 외부 테이블과 조인하는 FK 컬럼들 (예: ['customer_id'])
+  joinColumnRefs?: Array<{                    // FK 컬럼 참조 정보 (어떤 테이블.컬럼에서 오는지)
+    column: string;                           // FK 컬럼명 (예: 'customer_id')
+    columnLabel: string;                      // FK 컬럼 한글명 (예: '거래처 ID')
+    refTable: string;                         // 참조 테이블 (예: 'customer_mng')
+    refTableLabel: string;                    // 참조 테이블 한글명 (예: '거래처 관리')
+    refColumn: string;                        // 참조 컬럼 (예: 'customer_code')
+  }>;
+}
+
+// 시각적 관계 유형 (시각화에서 사용)
+export type VisualRelationType = 'filter' | 'hierarchy' | 'lookup' | 'mapping' | 'join';
+
+// 관계 유형 추론 함수
+export function inferVisualRelationType(subTable: SubTableInfo): VisualRelationType {
+  // 1. split-panel-layout의 rightPanel.relation
+  if (subTable.relationType === 'rightPanelRelation') {
+    // 원본 relation.type 기반 구분
+    if (subTable.originalRelationType === 'detail') {
+      return 'hierarchy';  // 부모-자식 계층 구조 (같은 테이블 자기 참조)
+    }
+    return 'filter';  // 마스터-디테일 필터링
+  }
+  
+  // 2. selected-items-detail-input의 parentDataMapping
+  // parentDataMapping은 FK 관계를 정의하므로 조인으로 분류
+  if (subTable.relationType === 'parentMapping') {
+    return 'join';  // FK 조인 (sourceTable.sourceField → targetTable.targetField)
+  }
+  
+  // 3. column_labels.reference_table
+  if (subTable.relationType === 'reference') {
+    return 'join';  // 실제 엔티티 조인 (LEFT JOIN 등)
+  }
+  
+  // 4. autocomplete, entity-search
+  if (subTable.relationType === 'lookup') {
+    return 'lookup';  // 코드→명칭 변환
+  }
+  
+  // 5. 기타 (source, join 등)
+  return 'join';
+}
+
+// 저장 테이블 정보 타입
+export interface SaveTableInfo {
+  tableName: string;
+  saveType: 'save' | 'edit' | 'delete' | 'transferData';
+  componentType: string;
+  isMainTable: boolean;
+  mappingRules?: Array<{
+    sourceField: string;
+    targetField: string;
+    transform?: string;
+  }>;
 }
 
 export interface ScreenSubTablesData {
@@ -400,6 +483,7 @@ export interface ScreenSubTablesData {
   screenName: string;
   mainTable: string;
   subTables: SubTableInfo[];
+  saveTables?: SaveTableInfo[];  // 저장 대상 테이블 목록
 }
 
 // 여러 화면의 서브 테이블 정보 조회 (메인 테이블 → 서브 테이블 관계)
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 2eb98cd8..92d2367c 100644
--- a/frontend/lib/registry/DynamicComponentRenderer.tsx
+++ b/frontend/lib/registry/DynamicComponentRenderer.tsx
@@ -578,10 +578,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] || "";
@@ -711,10 +713,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/button-primary/ButtonPrimaryComponent.tsx b/frontend/lib/registry/components/button-primary/ButtonPrimaryComponent.tsx
index 1237e192..7ea3d192 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;
@@ -406,7 +422,7 @@ export const ButtonPrimaryComponent: React.FC<ButtonPrimaryComponentProps> = ({
     component.label,
     selectedRows,
     selectedRowsData,
-    splitPanelContext?.selectedLeftData,
+    trackedSelectedLeftData,
     flowSelectedData,
     splitPanelContext,
     modalStoreData,
@@ -472,15 +488,50 @@ export const ButtonPrimaryComponent: React.FC<ButtonPrimaryComponentProps> = ({
     ...component.componentConfig, // 🔥 화면 디자이너에서 저장된 action 등 포함
   } as ButtonPrimaryConfig;
 
-  // 🎨 동적 색상 설정 (속성편집 모달의 "색상" 필드와 연동)
-  const getLabelColor = () => {
-    if (isDeleteAction()) {
-      return component.style?.labelColor || "#ef4444"; // 빨간색 기본값 (Tailwind red-500)
+  // 🎨 동적 색상 설정 (webTypeConfig 우선, 레거시 style.labelColor 지원)
+  const getButtonBackgroundColor = () => {
+    // 1순위: webTypeConfig.backgroundColor (화면설정 모달에서 저장)
+    if (component.webTypeConfig?.backgroundColor) {
+      return component.webTypeConfig.backgroundColor;
     }
-    return component.style?.labelColor || "#212121"; // 검은색 기본값 (shadcn/ui primary)
+    // 2순위: componentConfig.backgroundColor
+    if (componentConfig.backgroundColor) {
+      return componentConfig.backgroundColor;
+    }
+    // 3순위: style.backgroundColor
+    if (component.style?.backgroundColor) {
+      return component.style.backgroundColor;
+    }
+    // 4순위: style.labelColor (레거시)
+    if (component.style?.labelColor) {
+      return component.style.labelColor;
+    }
+    // 기본값: 삭제 버튼이면 빨강, 아니면 파랑
+    if (isDeleteAction()) {
+      return "#ef4444"; // 빨간색 (Tailwind red-500)
+    }
+    return "#3b82f6"; // 파란색 (Tailwind blue-500)
   };
 
-  const buttonColor = getLabelColor();
+  const getButtonTextColor = () => {
+    // 1순위: webTypeConfig.textColor (화면설정 모달에서 저장)
+    if (component.webTypeConfig?.textColor) {
+      return component.webTypeConfig.textColor;
+    }
+    // 2순위: componentConfig.textColor
+    if (componentConfig.textColor) {
+      return componentConfig.textColor;
+    }
+    // 3순위: style.color
+    if (component.style?.color) {
+      return component.style.color;
+    }
+    // 기본값: 흰색
+    return "#ffffff";
+  };
+
+  const buttonColor = getButtonBackgroundColor();
+  const buttonTextColor = getButtonTextColor();
 
   // 액션 설정 처리 - DB에서 문자열로 저장된 액션을 객체로 변환
   const processedConfig = { ...componentConfig };
@@ -1092,7 +1143,7 @@ export const ButtonPrimaryComponent: React.FC<ButtonPrimaryComponentProps> = ({
           : undefined,
       } as ButtonActionContext;
 
-      // 확인이 필요한 액션인지 확인
+      // 확인이 필요한 액션인지 확인 (save/delete만 확인 다이얼로그 표시)
       if (confirmationRequiredActions.includes(processedConfig.action.type)) {
         // 확인 다이얼로그 표시
         setPendingAction({
@@ -1229,8 +1280,8 @@ export const ButtonPrimaryComponent: React.FC<ButtonPrimaryComponentProps> = ({
     minHeight: "40px",
     border: "none",
     borderRadius: "0.5rem",
-    backgroundColor: finalDisabled ? "#e5e7eb" : buttonColor, // 🔧 background → backgroundColor로 변경
-    color: finalDisabled ? "#9ca3af" : "white",
+    backgroundColor: finalDisabled ? "#e5e7eb" : buttonColor,
+    color: finalDisabled ? "#9ca3af" : buttonTextColor, // 🔧 webTypeConfig.textColor 지원
     // 🔧 크기 설정 적용 (sm/md/lg)
     fontSize: componentConfig.size === "sm" ? "0.75rem" : componentConfig.size === "lg" ? "1rem" : "0.875rem",
     fontWeight: "600",
@@ -1249,7 +1300,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 8b9f12d7..7c965de0 100644
--- a/frontend/lib/registry/components/index.ts
+++ b/frontend/lib/registry/components/index.ts
@@ -91,6 +91,9 @@ import "./related-data-buttons/RelatedDataButtonsRenderer"; // 좌측 선택 데
 // 🆕 통합 반복 데이터 컴포넌트 (Unified)
 import "./unified-repeater/UnifiedRepeaterRenderer"; // 인라인/모달/버튼 모드 통합
 
+// 🆕 피벗 그리드 컴포넌트
+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/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 bfb26c90..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
@@ -55,6 +57,10 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
   ...props
 }) => {
   const componentConfig = (component.componentConfig || {}) as SplitPanelLayoutConfig;
+  // 🆕 프리뷰용 회사 코드 오버라이드 (최고 관리자만 사용 가능)
+  const companyCode = (props as any).companyCode as string | undefined;
+  // 🌐 다국어 컨텍스트
+  const { getTranslatedText } = useScreenMultiLang();
 
   // 기본 설정값
   const splitRatio = componentConfig.splitRatio || 30;
@@ -135,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;
@@ -162,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>>({}); // 좌측 컬럼 라벨
@@ -172,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();
 
   // 추가 모달 상태
@@ -205,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);
@@ -235,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);
     };
     // 마운트/언마운트 시에만 실행, 위치/크기 변경은 별도 업데이트로 처리
@@ -311,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;
     }
 
@@ -603,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(
     (
@@ -665,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");
@@ -686,7 +751,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
       // 일반 값
       return String(value);
     },
-    [formatDateValue, formatNumberValue],
+    [formatDateValue, formatNumberValue, categoryCodeLabels],
   );
 
   // 좌측 데이터 로드
@@ -756,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,
@@ -766,13 +831,14 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
         enableEntityJoin: true, // 엔티티 조인 활성화
         dataFilter: componentConfig.leftPanel?.dataFilter, // 🆕 데이터 필터 전달
         additionalJoinColumns: additionalJoinColumns.length > 0 ? additionalJoinColumns : undefined, // 🆕 추가 조인 컬럼
+        companyCodeOverride: companyCode, // 🆕 프리뷰용 회사 코드 오버라이드
       });
 
       // 🔍 디버깅: 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;
@@ -828,9 +894,11 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
             search: { id: primaryKey },
             enableEntityJoin: true, // 엔티티 조인 활성화
             size: 1,
+            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") {
           // 조인 모드: 다른 테이블의 관련 데이터 (여러 개)
@@ -885,6 +953,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                   search: searchConditions,
                   enableEntityJoin: true,
                   size: 1000,
+                  companyCodeOverride: companyCode, // 🆕 프리뷰용 회사 코드 오버라이드
                 });
                 if (result.data) {
                   allResults.push(...result.data);
@@ -899,26 +968,69 @@ 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, // 🆕 프리뷰용 회사 코드 오버라이드
             });
 
             console.log("🔗 [분할패널] 복합키 조회 결과:", result);
@@ -926,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":
@@ -938,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;
                   }
@@ -947,7 +1069,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
 
             setRightData(filteredData);
           } else {
-            // 단일키 (하위 호환성)
+            // 단일키 (하위 호환성) 또는 관계를 찾지 못한 경우
             const leftColumn = componentConfig.rightPanel?.relation?.leftColumn;
             const rightColumn = componentConfig.rightPanel?.relation?.foreignKey;
 
@@ -965,6 +1087,9 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                 componentConfig.rightPanel?.deduplication, // 🆕 중복 제거 설정 전달
               );
               setRightData(joinedData || []); // 모든 관련 레코드 (배열)
+            } else {
+              console.warn("⚠️ [분할패널] 테이블 관계를 찾을 수 없습니다:", leftTable, "->", rightTableName);
+              setRightData([]);
             }
           }
         }
@@ -988,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],
   );
 
   // 우측 항목 확장/축소 토글
@@ -1198,7 +1594,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
           }
         });
         setLeftColumnLabels(labels);
-        console.log("✅ 좌측 컬럼 라벨 로드:", labels);
+        // console.log("✅ 좌측 컬럼 라벨 로드:", labels);
       } catch (error) {
         console.error("좌측 테이블 컬럼 라벨 로드 실패:", error);
       }
@@ -1227,7 +1623,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
           }
         });
         setRightColumnLabels(labels);
-        console.log("✅ 우측 컬럼 라벨 로드:", labels);
+        // console.log("✅ 우측 컬럼 라벨 로드:", labels);
       } catch (error) {
         console.error("우측 테이블 컬럼 정보 로드 실패:", error);
       }
@@ -1269,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);
@@ -1307,7 +1703,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
           }
         });
 
-        console.log("🔍 우측 패널 카테고리 로드 대상 테이블:", Array.from(tablesToLoad));
+        // console.log("🔍 우측 패널 카테고리 로드 대상 테이블:", Array.from(tablesToLoad));
 
         // 각 테이블에 대해 카테고리 매핑 로드
         for (const tableName of tablesToLoad) {
@@ -1400,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,
           });
@@ -1440,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),
                   }),
@@ -1465,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) : "없음",
           });
 
@@ -1482,7 +1940,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
       setEditModalFormData({ ...item });
       setShowEditModal(true);
     },
-    [componentConfig],
+    [componentConfig, activeTabIndex],
   );
 
   // 수정 모달 저장
@@ -1582,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);
     }
 
@@ -1613,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);
       }
 
@@ -1676,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({
@@ -1700,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(
@@ -1940,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) {
@@ -2042,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")}>
@@ -2076,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">
@@ -2104,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
@@ -2127,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, // 🆕 포맷 설정 포함
@@ -2162,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",
@@ -2223,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",
@@ -2521,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={{
@@ -2533,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>
               )}
@@ -2562,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>
                             )}
@@ -2910,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 05f48339..5779f600 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, X, Database, GripVertical } from "lucide-react";
+import { Check, ChevronsUpDown, ArrowRight, Plus, X, ArrowUp, ArrowDown, Trash2, Database, 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 설정 패널
  */
@@ -372,6 +1240,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);
@@ -1481,6 +2414,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">
@@ -1513,3 +2512,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 528f059e..e127bdbb 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,6 +75,7 @@ export const SingleTableWithSticky: React.FC<SingleTableWithStickyProps> = ({
   currentSearchIndex = 0,
   searchTerm = "",
 }) => {
+  const { getTranslatedText } = useScreenMultiLang();
   const checkboxConfig = tableConfig?.checkbox || {};
   const actualColumns = visibleColumns || columns || [];
   const sortHandler = onSort || handleSort || (() => {});
@@ -160,7 +162,13 @@ export const SingleTableWithSticky: React.FC<SingleTableWithStickyProps> = ({
                       ) : (
                         <>
                           <span className="flex-1 truncate">
-                            {columnLabels[column.columnName] || column.displayName || column.columnName}
+                            {/* 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">
diff --git a/frontend/lib/registry/components/table-list/TableListComponent.tsx b/frontend/lib/registry/components/table-list/TableListComponent.tsx
index e3bb34fd..65285a7d 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";
 
 // ========================================
 // 인터페이스
@@ -211,6 +213,8 @@ export interface TableListComponentProps {
   // 탭 관련 정보 (탭 내부의 테이블에서 사용)
   parentTabId?: string; // 부모 탭 ID
   parentTabsComponentId?: string; // 부모 탭 컴포넌트 ID
+  // 🆕 프리뷰용 회사 코드 (DynamicComponentRenderer에서 전달, 최고 관리자만 오버라이드 가능)
+  companyCode?: string;
 }
 
 // ========================================
@@ -238,7 +242,13 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
   screenId,
   parentTabId,
   parentTabsComponentId,
+  companyCode,
 }) => {
+  // ========================================
+  // 다국어 번역 훅
+  // ========================================
+  const { getTranslatedText } = useScreenMultiLang();
+
   // ========================================
   // 설정 및 스타일
   // ========================================
@@ -476,6 +486,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]) => {
@@ -485,7 +496,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;
         });
       });
     }
@@ -1033,14 +1053,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);
       },
@@ -1785,6 +1807,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
           screenEntityConfigs: Object.keys(screenEntityConfigs).length > 0 ? screenEntityConfigs : undefined, // 🎯 화면별 엔티티 설정 전달
           dataFilter: tableConfig.dataFilter, // 🆕 데이터 필터 전달
           excludeFilter: excludeFilterParam, // 🆕 제외 필터 전달
+          companyCodeOverride: companyCode, // 🆕 프리뷰용 회사 코드 오버라이드 (최고 관리자만)
         });
 
         // 실제 데이터의 item_number만 추출하여 중복 확인
@@ -1855,6 +1878,8 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
     // 🆕 RelatedDataButtons 필터 추가
     relatedButtonFilter,
     isRelatedButtonTarget,
+    // 🆕 프리뷰용 회사 코드 오버라이드
+    companyCode,
   ]);
 
   const fetchTableDataDebounced = useCallback(
@@ -2048,7 +2073,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);
@@ -2085,6 +2110,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);
   };
@@ -2149,35 +2199,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 });
   };
@@ -2244,30 +2267,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) => {
@@ -3912,7 +4081,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
@@ -3922,7 +4091,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":
@@ -4136,7 +4305,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} 선택`}
       />
     );
@@ -4425,10 +4594,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],
   );
 
   // ========================================
@@ -4567,9 +4762,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);
@@ -5670,7 +5878,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>
                         );
                       }
@@ -5689,13 +5900,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;
@@ -5761,7 +5977,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>
                             )}
@@ -5809,16 +6030,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(
@@ -5828,7 +6049,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>
                                           );
                                         })}
@@ -6001,13 +6222,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;
@@ -6154,7 +6379,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;
@@ -6168,11 +6398,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;
@@ -6332,13 +6561,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 5bc45701..58f8cf49 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>("");
 
@@ -95,11 +99,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; // 생성 시작 플래그
@@ -156,7 +184,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..57c50c58 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,14 @@ export function UniversalFormModalComponent({
         }
       }
 
+      // 🆕 테이블 섹션 데이터 병합 (품목 리스트 등)
+      for (const [key, value] of Object.entries(formData)) {
+        if (key.startsWith("_tableSection_") && Array.isArray(value)) {
+          event.detail.formData[key] = value;
+          console.log(`[UniversalFormModal] 테이블 섹션 병합: ${key}, ${value.length}개 항목`);
+        }
+      }
+
       // 🆕 수정 모드: 원본 그룹 데이터 전달 (UPDATE/DELETE 추적용)
       if (originalGroupedData.length > 0) {
         event.detail.formData._originalGroupedData = originalGroupedData;
@@ -359,15 +456,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 +512,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 +544,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 +574,7 @@ export function UniversalFormModalComponent({
                     ...updatedData,
                     [ruleIdKey]: field.numberingRule.ruleId,
                   });
-                  console.log(`[채번] 부모에게 ruleId 전달: ${ruleIdKey}`);
+                  // console.log(`[채번] 부모에게 ruleId 전달: ${ruleIdKey}`);
                 }
               }
             } catch (error) {
@@ -497,17 +595,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 +632,7 @@ export function UniversalFormModalComponent({
         continue;
       } else {
         // 일반 섹션 필드 초기화
-        for (const field of (section.fields || [])) {
+        for (const field of section.fields || []) {
           // 기본값 설정
           let value = field.defaultValue ?? "";
 
@@ -556,14 +654,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 +675,7 @@ export function UniversalFormModalComponent({
                 }
               }
             }
-            
+
             // 신규 등록 모드: triggerValueOnRemove를 기본값으로 설정
             if (group.triggerField && group.triggerValueOnRemove !== undefined) {
               // effectiveInitialData에 해당 값이 없는 경우에만 기본값 설정
@@ -588,6 +688,245 @@ 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}]에 저장됨`);
+          }
+        } catch (error) {
+          console.error(`[initializeForm] 테이블 섹션 ${section.id}: 디테일 데이터 로드 실패`, error);
+        }
+      }
+    }
+
     setFormData(newFormData);
     setRepeatSections(newRepeatSections);
     setCollapsedSections(newCollapsed);
@@ -599,35 +938,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 +974,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 +986,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 +1010,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 +1023,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 +1033,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 +1102,7 @@ export function UniversalFormModalComponent({
         return newData;
       });
     },
-    [onChange],
+    [onChange, numberingOriginalValues, config.sections],
   );
 
   // 반복 섹션 필드 값 변경 핸들러
@@ -776,47 +1175,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 +1267,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 +1346,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 +1359,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 +1377,7 @@ export function UniversalFormModalComponent({
         }
       });
     });
-    
+
     // 1-0. receiveFromParent 필드 값도 mainData에 추가 (서브 테이블 저장용)
     // 이 필드들은 메인 테이블에는 저장되지 않지만, 서브 테이블 저장 시 필요할 수 있음
     config.sections.forEach((section) => {
@@ -1325,7 +1396,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 +1441,7 @@ export function UniversalFormModalComponent({
       }
 
       const subItems: Record<string, any>[] = [];
-      
+
       // 반복 섹션이 있는 경우에만 반복 데이터 처리
       if (subTableConfig.repeatSectionId) {
         const repeatData = repeatSections[subTableConfig.repeatSectionId] || [];
@@ -1470,134 +1541,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 +1582,7 @@ export function UniversalFormModalComponent({
           );
 
         case "select": {
-          // 🆕 연쇄 드롭다운 처리
+          // 🆕 연쇄 드롭다운 처리 (기존 field.cascading 방식)
           if (field.cascading?.enabled) {
             const cascadingConfig = field.cascading;
             const parentValue = formData[cascadingConfig.parentField];
@@ -1653,6 +1596,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 +1659,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 +1678,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 +1738,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 +1943,7 @@ export function UniversalFormModalComponent({
                 // 테이블 섹션 데이터를 formData에 저장
                 handleFieldChange(`_tableSection_${section.id}`, data);
               }}
+              groupedData={_groupedData}
             />
           </CardContent>
         </Card>
@@ -2021,13 +2004,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 +2036,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 +2055,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 +2094,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 +2127,8 @@ export function UniversalFormModalComponent({
                   formData[field.columnName],
                   (value) => handleFieldChange(field.columnName, value),
                   `${section.id}-${group.id}-${field.id}`,
-                  groupColumns
-                )
+                  groupColumns,
+                ),
               )}
             </div>
           </CollapsibleContent>
@@ -2169,9 +2142,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 +2169,8 @@ export function UniversalFormModalComponent({
               formData[field.columnName],
               (value) => handleFieldChange(field.columnName, value),
               `${section.id}-${group.id}-${field.id}`,
-              groupColumns
-            )
+              groupColumns,
+            ),
           )}
         </div>
       </div>
@@ -2327,7 +2298,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 +2312,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 +2338,7 @@ export function UniversalFormModalComponent({
 }
 
 // Select 필드 컴포넌트 (옵션 로딩 포함)
+// allowCustomInput이 true이면 Combobox 형태로 직접 입력 가능
 interface SelectFieldProps {
   fieldId: string;
   value: any;
@@ -2411,6 +2352,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 +2366,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 011d0342..6f36fbb7 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 59d437f8..34b32132 100644
--- a/frontend/lib/utils/buttonActions.ts
+++ b/frontend/lib/utils/buttonActions.ts
@@ -92,6 +92,9 @@ export interface ButtonActionConfig {
   // 엑셀 업로드 관련
   excelUploadMode?: "insert" | "update" | "upsert"; // 업로드 모드
   excelKeyColumn?: string; // 업데이트/Upsert 시 키 컬럼
+  excelNumberingRuleId?: string; // 채번 규칙 ID (단일 테이블용)
+  excelNumberingTargetColumn?: string; // 채번 적용 컬럼 (단일 테이블용)
+  excelAfterUploadFlows?: Array<{ flowId: string; order: number }>; // 업로드 후 제어 실행
 
   // 바코드 스캔 관련
   barcodeTargetField?: string; // 스캔 결과를 입력할 필드명
@@ -308,6 +311,9 @@ export interface ButtonActionContext {
     selectedLeftData?: Record<string, any>;
     refreshRightPanel?: () => void;
   };
+
+  // 🆕 저장된 데이터 (저장 후 제어 실행 시 플로우에 전달)
+  savedData?: any;
 }
 
 /**
@@ -537,17 +543,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);
 
     // 🆕 렉 구조 컴포넌트 일괄 저장 감지
@@ -680,6 +695,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);
@@ -731,11 +891,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,
@@ -746,18 +911,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,
@@ -806,6 +971,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}`);
@@ -816,13 +984,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("✅ 채번 규칙 할당 완료");
@@ -937,11 +1123,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 {
@@ -1004,38 +1190,27 @@ export class ButtonActionExecutor {
             }
 
             // 🆕 루트 레벨 formData에서 RepeaterFieldGroup에 전달할 공통 필드 추출
-            // 주문번호, 발주번호 등 마스터-디테일 관계에서 필요한 필드만 명시적으로 지정
-            const masterDetailFields = [
-              // 번호 필드
-              "order_no",        // 발주번호
-              "sales_order_no",  // 수주번호
-              "shipment_no",     // 출하번호
-              "receipt_no",      // 입고번호
-              "work_order_no",   // 작업지시번호
-              // 거래처 필드
-              "supplier_code",   // 공급처 코드
-              "supplier_name",   // 공급처 이름
-              "customer_code",   // 고객 코드
-              "customer_name",   // 고객 이름
-              // 날짜 필드
-              "order_date",      // 발주일
-              "sales_date",      // 수주일
-              "shipment_date",   // 출하일
-              "receipt_date",    // 입고일
-              "due_date",        // 납기일
-              // 담당자/메모 필드
-              "manager",         // 담당자
-              "memo",            // 메모
-              "remark",          // 비고
-            ];
+            // 규칙 기반 필터링: 하드코딩 대신 패턴으로 제외할 필드를 정의
+            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;
 
-            for (const fieldName of masterDetailFields) {
-              const value = context.formData[fieldName];
-              if (value !== undefined && value !== "" && value !== null && !(fieldName in commonFields)) {
-                commonFields[fieldName] = value;
-              }
+              // 위 규칙에 해당하지 않는 단순 값(문자열, 숫자, 날짜 등)은 공통 필드로 전달
+              commonFields[fieldName] = value;
             }
-            console.log("📋 [handleSave] 최종 공통 필드 (마스터-디테일 필드 포함):", commonFields);
+            console.log("📋 [handleSave] 최종 공통 필드 (규칙 기반 자동 추출):", commonFields);
 
             for (const item of parsedData) {
               // 메타 필드 제거 (eslint 경고 무시 - 의도적으로 분리)
@@ -1055,10 +1230,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,
@@ -1082,6 +1258,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 };
@@ -1097,10 +1280,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),
+                  },
                 );
               }
             }
@@ -1264,7 +1452,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 누락)");
@@ -1424,19 +1654,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,
@@ -1484,8 +1715,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,
@@ -1790,19 +2021,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);
       }
 
@@ -1865,37 +2120,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) {
@@ -1920,13 +2183,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 || "품목 삭제 실패");
@@ -2162,7 +2427,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++) {
@@ -2380,7 +2658,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}`);
             }
@@ -2415,8 +2694,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 || "삭제에 실패했습니다.");
@@ -3189,6 +3468,7 @@ export class ButtonActionExecutor {
     config: ButtonActionConfig,
     rowData: any,
     context: ButtonActionContext,
+    isCreateMode: boolean = false, // 🆕 복사 모드에서 true로 전달
   ): Promise<void> {
     const { groupByColumns = [] } = config;
 
@@ -3232,11 +3512,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);
       }
@@ -3262,10 +3542,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, // 🆕 버튼 설정 전달 (제어로직 실행용)
@@ -3380,23 +3661,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})`);
             }
@@ -3453,9 +3772,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":
@@ -3466,8 +3785,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);
@@ -3839,8 +4158,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 }> = [];
@@ -3947,8 +4278,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) =>
@@ -3961,7 +4304,8 @@ export class ButtonActionExecutor {
         console.log("📦 노드 플로우에 전달할 데이터:", {
           flowId,
           dataSourceType: controlDataSource,
-          sourceData,
+          sourceDataCount: sourceData.length,
+          sourceDataSample: sourceData[0],
         });
 
         const result = await executeNodeFlow(flowId, {
@@ -4292,7 +4636,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);
@@ -4522,8 +4867,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);
@@ -4615,8 +5019,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 사용)
@@ -4812,12 +5215,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");
@@ -4844,7 +5298,7 @@ export class ButtonActionExecutor {
         savedSize: localStorage.getItem(storageKey),
       });
 
-      root.render(
+        root.render(
         React.createElement(ExcelUploadModal, {
           open: true,
           onOpenChange: (open: boolean) => {
@@ -4861,6 +5315,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?.();
@@ -5045,26 +5509,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" +
               "계속하시겠습니까?",
           );
 
@@ -5074,13 +5547,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,
       });
@@ -5089,9 +5561,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?.();
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 e4f5a1fd..35411799 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -59,6 +59,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",
@@ -76,10 +77,12 @@
         "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",
         "react-window": "^2.1.0",
+        "react-zoom-pan-pinch": "^3.7.0",
         "reactflow": "^11.11.4",
         "recharts": "^3.2.1",
         "sheetjs-style": "^0.15.8",
@@ -255,6 +258,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=18"
       },
@@ -296,6 +300,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -329,6 +334,7 @@
       "resolved": "https://registry.npmjs.org/@dnd-kit/core/-/core-6.3.1.tgz",
       "integrity": "sha512-xkGBRQQab4RLwgXxoqETICr6S5JlogafbhNsidmrkVv2YRs5MLwpjoF2qpiGjQt8S9AoxtIV603s0GIUpY5eYQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@dnd-kit/accessibility": "^3.1.1",
         "@dnd-kit/utilities": "^3.2.2",
@@ -542,6 +548,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",
@@ -2590,6 +2637,7 @@
       "resolved": "https://registry.npmjs.org/@react-three/fiber/-/fiber-9.4.0.tgz",
       "integrity": "sha512-k4iu1R6e5D54918V4sqmISUkI5OgTw3v7/sDRKEC632Wd5g2WBtUS5gyG63X0GJO/HZUj1tsjSXfyzwrUHZl1g==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/runtime": "^7.17.8",
         "@types/react-reconciler": "^0.32.0",
@@ -3243,6 +3291,7 @@
       "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.90.6.tgz",
       "integrity": "sha512-gB1sljYjcobZKxjPbKSa31FUTyr+ROaBdoH+wSSs9Dk+yDCmMs+TkTV3PybRRVLC7ax7q0erJ9LvRWnMktnRAw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@tanstack/query-core": "5.90.6"
       },
@@ -3310,6 +3359,7 @@
       "resolved": "https://registry.npmjs.org/@tiptap/core/-/core-2.27.1.tgz",
       "integrity": "sha512-nkerkl8syHj44ZzAB7oA2GPmmZINKBKCa79FuNvmGJrJ4qyZwlkDzszud23YteFZEytbc87kVd/fP76ROS6sLg==",
       "license": "MIT",
+      "peer": true,
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/ueberdosis"
@@ -3623,6 +3673,7 @@
       "resolved": "https://registry.npmjs.org/@tiptap/pm/-/pm-2.27.1.tgz",
       "integrity": "sha512-ijKo3+kIjALthYsnBmkRXAuw2Tswd9gd7BUR5OMfIcjGp8v576vKxOxrRfuYiUM78GPt//P0sVc1WV82H5N0PQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "prosemirror-changeset": "^2.3.0",
         "prosemirror-collab": "^1.3.1",
@@ -6123,6 +6174,7 @@
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.2.tgz",
       "integrity": "sha512-6mDvHUFSjyT2B2yeNx2nUgMxh9LtOWvkhIU3uePn2I2oyNymUAX1NIsdgviM4CH+JSrp2D2hsMvJOkxY+0wNRA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "csstype": "^3.0.2"
       }
@@ -6133,6 +6185,7 @@
       "integrity": "sha512-9KQPoO6mZCi7jcIStSnlOWn2nEF3mNmyr3rIAsGnAbQKYbRLyqmeSc39EVgtxXVia+LMT8j3knZLAZAh+xLmrw==",
       "devOptional": true,
       "license": "MIT",
+      "peer": true,
       "peerDependencies": {
         "@types/react": "^19.2.0"
       }
@@ -6166,6 +6219,7 @@
       "resolved": "https://registry.npmjs.org/@types/three/-/three-0.180.0.tgz",
       "integrity": "sha512-ykFtgCqNnY0IPvDro7h+9ZeLY+qjgUWv+qEvUt84grhenO60Hqd4hScHE7VTB9nOQ/3QM8lkbNE+4vKjEpUxKg==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@dimforge/rapier3d-compat": "~0.12.0",
         "@tweenjs/tween.js": "~23.1.3",
@@ -6248,6 +6302,7 @@
       "integrity": "sha512-BnOroVl1SgrPLywqxyqdJ4l3S2MsKVLDVxZvjI1Eoe8ev2r3kGDo+PcMihNmDE+6/KjkTubSJnmqGZZjQSBq/g==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "8.46.2",
         "@typescript-eslint/types": "8.46.2",
@@ -6880,6 +6935,7 @@
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -6963,6 +7019,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",
@@ -7158,6 +7267,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",
@@ -7225,7 +7340,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": {
@@ -7266,6 +7380,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",
@@ -7275,6 +7398,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",
@@ -7285,7 +7470,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",
@@ -7329,6 +7513,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",
@@ -7501,6 +7711,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",
@@ -7665,11 +7887,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": {
@@ -7731,6 +7981,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",
@@ -7809,7 +8086,8 @@
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/d3": {
       "version": "7.9.0",
@@ -8131,6 +8409,7 @@
       "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz",
       "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==",
       "license": "ISC",
+      "peer": true,
       "engines": {
         "node": ">=12"
       }
@@ -8323,6 +8602,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",
@@ -8605,6 +8890,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",
@@ -8639,6 +8933,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",
@@ -8866,6 +9169,7 @@
       "integrity": "sha512-iy2GE3MHrYTL5lrCtMZ0X1KLEKKUjmK0kzwcnefhR66txcEmXZD2YWgR5GNdcEwkNx3a0siYkSvl0vIC+Svjmg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -8954,6 +9258,7 @@
       "integrity": "sha512-82GZUjRS0p/jganf6q1rEO25VSoHH0hKPCTrgillPjdI/3bgBhAE1QzHrHTizjpRvy6pGAvKjDJtk2pF9NDq8w==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "bin": {
         "eslint-config-prettier": "bin/cli.js"
       },
@@ -9055,6 +9360,7 @@
       "integrity": "sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@rtsao/scc": "^1.1.0",
         "array-includes": "^3.1.9",
@@ -9338,6 +9644,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",
@@ -9377,6 +9738,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",
@@ -9586,6 +9960,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",
@@ -9773,6 +10175,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",
@@ -9847,7 +10270,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": {
@@ -10089,6 +10511,7 @@
       "resolved": "https://registry.npmjs.org/immer/-/immer-10.2.0.tgz",
       "integrity": "sha512-d/+XTN3zfODyjr89gM3mPq1WNX2B8pYsu7eORitdwyA2sBubnTl3laYlBk4sXY5FUa5qTZGBDPJICVbvqzjlbw==",
       "license": "MIT",
+      "peer": true,
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/immer"
@@ -10121,6 +10544,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",
@@ -10843,11 +11277,24 @@
         "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",
       "integrity": "sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA==",
-      "license": "BSD-2-Clause"
+      "license": "BSD-2-Clause",
+      "peer": true
     },
     "node_modules/levn": {
       "version": "0.4.1",
@@ -11142,6 +11589,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",
@@ -11158,6 +11611,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",
@@ -11165,6 +11685,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",
@@ -11386,7 +11918,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"
@@ -11399,12 +11930,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",
@@ -11557,6 +12099,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",
@@ -11707,6 +12258,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",
@@ -12033,6 +12593,7 @@
       "integrity": "sha512-I7AIg5boAr5R0FFtJ6rCfD+LFsWHp81dolrFD8S79U9tb8Az2nGrJncnMSnys+bpQJfRUzqs9hnA81OAA3hCuQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "bin": {
         "prettier": "bin/prettier.cjs"
       },
@@ -12328,6 +12889,7 @@
       "resolved": "https://registry.npmjs.org/prosemirror-model/-/prosemirror-model-1.25.4.tgz",
       "integrity": "sha512-PIM7E43PBxKce8OQeezAs9j4TP+5yDpZVbuurd1h5phUxEKIu+G2a+EUZzIC5nS1mJktDJWzbqS23n1tsAf5QA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "orderedmap": "^2.0.0"
       }
@@ -12357,6 +12919,7 @@
       "resolved": "https://registry.npmjs.org/prosemirror-state/-/prosemirror-state-1.4.4.tgz",
       "integrity": "sha512-6jiYHH2CIGbCfnxdHbXZ12gySFY/fz/ulZE333G6bPqIZ4F+TXo9ifiR86nAHpWnfoNjOb3o5ESi7J8Uz1jXHw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "prosemirror-model": "^1.0.0",
         "prosemirror-transform": "^1.0.0",
@@ -12405,6 +12968,7 @@
       "resolved": "https://registry.npmjs.org/prosemirror-view/-/prosemirror-view-1.41.4.tgz",
       "integrity": "sha512-WkKgnyjNncri03Gjaz3IFWvCAE94XoiEgvtr0/r2Xw7R8/IjK3sKLSiDoCHWcsXSAinVaKlGRZDvMCsF1kbzjA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "prosemirror-model": "^1.20.0",
         "prosemirror-state": "^1.0.0",
@@ -12531,6 +13095,7 @@
       "resolved": "https://registry.npmjs.org/react/-/react-19.1.0.tgz",
       "integrity": "sha512-FS+XFBNvn3GTAWq26joslQgWNoFu08F4kl0J4CgdNKADkdSGXQyTCnKteIAJy96Br6YbpEU1LSzV5dYtjMkMDg==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -12600,6 +13165,7 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.1.0.tgz",
       "integrity": "sha512-Xs1hdnE+DyKgeHJeJznQmYMIBG3TKIHJJT95Q58nHLSrElKlGQqDTR2HQ9fx5CN/Gk6Vh/kupBTDLU11/nDk/g==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "scheduler": "^0.26.0"
       },
@@ -12618,6 +13184,7 @@
       "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.66.0.tgz",
       "integrity": "sha512-xXBqsWGKrY46ZqaHDo+ZUYiMUgi8suYu5kdrS20EG8KiL7VRQitEbNjm+UcrDYrNi1YLyfpmAeGjCZYXLT9YBw==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=18.0.0"
       },
@@ -12647,11 +13214,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",
@@ -12796,6 +13362,20 @@
         "react-dom": "^18.0.0 || ^19.0.0"
       }
     },
+    "node_modules/react-zoom-pan-pinch": {
+      "version": "3.7.0",
+      "resolved": "https://registry.npmjs.org/react-zoom-pan-pinch/-/react-zoom-pan-pinch-3.7.0.tgz",
+      "integrity": "sha512-UmReVZ0TxlKzxSbYiAj+LeGRW8s8LraAFTXRAxzMYnNRgGPsxCudwZKVkjvGmjtx7SW/hZamt69NUmGf4xrkXA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8",
+        "npm": ">=5"
+      },
+      "peerDependencies": {
+        "react": "*",
+        "react-dom": "*"
+      }
+    },
     "node_modules/reactflow": {
       "version": "11.11.4",
       "resolved": "https://registry.npmjs.org/reactflow/-/reactflow-11.11.4.tgz",
@@ -12829,6 +13409,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",
@@ -12844,9 +13454,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",
@@ -12901,6 +13511,7 @@
       "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.2.0.tgz",
       "integrity": "sha512-ROY9fvHhwOD9ySfrF0wmvu//bKCQ6AeZZq1nJNtbDC+kk5DuSuNX/n6YWYF/SYy7bSba4D4FSz8DJeKY/S/r+g==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@types/use-sync-external-store": "^0.0.6",
         "use-sync-external-store": "^1.4.0"
@@ -12923,7 +13534,8 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
       "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/recharts/node_modules/redux-thunk": {
       "version": "3.1.0",
@@ -13086,6 +13698,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",
@@ -13891,6 +14516,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",
@@ -13904,7 +14559,8 @@
       "version": "0.180.0",
       "resolved": "https://registry.npmjs.org/three/-/three-0.180.0.tgz",
       "integrity": "sha512-o+qycAMZrh+TsE01GqWUxUIKR1AL0S8pq7zDkYOQw8GqfX8b8VoCKYUoHbhiX5j+7hr8XsuHDVU6+gkQJQKg9w==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/three-mesh-bvh": {
       "version": "0.8.3",
@@ -13992,6 +14648,7 @@
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -14032,6 +14689,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",
@@ -14107,6 +14773,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",
@@ -14322,6 +14997,7 @@
       "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
       "dev": true,
       "license": "Apache-2.0",
+      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -14402,6 +15078,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",
@@ -14754,6 +15448,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",
@@ -14974,6 +15674,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 e9cf087c..b68d13db 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -67,6 +67,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",
@@ -84,10 +85,12 @@
     "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",
     "react-window": "^2.1.0",
+    "react-zoom-pan-pinch": "^3.7.0",
     "reactflow": "^11.11.4",
     "recharts": "^3.2.1",
     "sheetjs-style": "^0.15.8",
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/screen-management.ts b/frontend/types/screen-management.ts
index 8cd5fa6e..cdfef5c3 100644
--- a/frontend/types/screen-management.ts
+++ b/frontend/types/screen-management.ts
@@ -383,6 +383,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; // 현재 틀고정 컬럼 수