diff --git a/backend-node/package-lock.json b/backend-node/package-lock.json
index f826a86a..d801ddbb 100644
--- a/backend-node/package-lock.json
+++ b/backend-node/package-lock.json
@@ -1043,6 +1043,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 +2371,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",
@@ -3463,6 +3465,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 +3702,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 +3920,7 @@
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -4442,6 +4447,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.8.3",
         "caniuse-lite": "^1.0.30001741",
@@ -5652,6 +5658,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 +7421,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 +8391,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 +9279,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 +10130,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 +10938,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 +11044,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/src/controllers/entityJoinController.ts b/backend-node/src/controllers/entityJoinController.ts
index fbb88750..4a541456 100644
--- a/backend-node/src/controllers/entityJoinController.ts
+++ b/backend-node/src/controllers/entityJoinController.ts
@@ -66,11 +66,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,
               });
             }
diff --git a/backend-node/src/controllers/screenGroupController.ts b/backend-node/src/controllers/screenGroupController.ts
index 518de7e8..52464ed4 100644
--- a/backend-node/src/controllers/screenGroupController.ts
+++ b/backend-node/src/controllers/screenGroupController.ts
@@ -1652,7 +1652,7 @@ export const getScreenSubTables = async (req: Request, res: Response) => {
         });
       }
     });
-    
+
     rightPanelResult.rows.forEach((row: any) => {
       const screenId = row.screen_id;
       const mainTable = row.main_table;
diff --git a/backend-node/src/controllers/tableManagementController.ts b/backend-node/src/controllers/tableManagementController.ts
index 7c84898b..5bbec536 100644
--- a/backend-node/src/controllers/tableManagementController.ts
+++ b/backend-node/src/controllers/tableManagementController.ts
@@ -775,13 +775,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 {
diff --git a/docs/화면관계_시각화_개선_보고서.md b/docs/화면관계_시각화_개선_보고서.md
index 83411d7f..27946afa 100644
--- a/docs/화면관계_시각화_개선_보고서.md
+++ b/docs/화면관계_시각화_개선_보고서.md
@@ -1682,6 +1682,61 @@ frontend/
 
 ---
 
+## 화면 설정 모달 개선 (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)
diff --git a/docs/화면설정모달_개선_완료_보고서.md b/docs/화면설정모달_개선_완료_보고서.md
new file mode 100644
index 00000000..493c3f37
--- /dev/null
+++ b/docs/화면설정모달_개선_완료_보고서.md
@@ -0,0 +1,535 @@
+# 화면 설정 모달 개선 완료 보고서
+
+## 개요
+화면 관리에서 화면 노드 우클릭 시 열리는 설정 모달을 대폭 개선하여, 테이블 정보 시각화, 필드 매핑 확인, 컬럼 변경/추가/제거 기능, 조인 설정 기능, 실시간 프리뷰 기능을 강화했습니다.
+
+## 주요 개선 사항
+
+### 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 드래그 상태 관리
+```typescript
+// 드래그 상태
+const [draggedIndex, setDraggedIndex] = useState<number | null>(null);
+const [localColumnOrder, setLocalColumnOrder] = useState<string[] | null>(null);
+```
+
+#### 9.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);
+};
+```
+
+#### 9.4 시각적 피드백
+- 드래그 가능한 컬럼: `cursor-grab active:cursor-grabbing`
+- 드래그 중인 컬럼: `opacity-50 scale-95`
+- 드래그 중 실시간 순서 변경 표시
+
+#### 9.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?.();
+};
+```
+
+#### 9.6 지원 범위
+- 메인 테이블: `onColumnReorder={(newOrder) => handleColumnReorder("main", newOrder)}`
+- 필터 테이블: `onColumnReorder={(newOrder) => handleColumnReorder("filter", newOrder)}`
+- 지원 배열:
+  - `componentConfig.leftPanel.columns`
+  - `componentConfig.rightPanel.columns`
+  - `componentConfig.usedColumns`
+  - `componentConfig.columns`
+
+## 기술 스택
+
+### 신규 의존성
+```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 개선, 줌/드래그 기능, 컬럼 변경/추가/제거 기능, 조인 설정 기능, 필드 매핑 통합, 실시간 반영 |
+| `frontend/components/screen/ScreenRelationFlow.tsx` | `filterKeyMapping`, `joinColumnRefs` 데이터 전달 |
+| `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 추가 |
+| `backend-node/src/controllers/entityJoinController.ts` | `companyCodeOverride` 처리 로직 추가 |
+
+## 사용 방법
+
+### 화면 설정 모달 열기
+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. 드래그 취소하려면 컬럼 영역 밖으로 드래그
+
+**참고:**
+- 사용 중인 필드만 드래그 가능 (파란색 배경)
+- 미사용 컬럼은 드래그 불가
+- 드래그 중에는 저장되지 않고, 드롭 시에만 저장됨
+
+---
+
+## 완료일
+2026-01-13
+
+## 변경 이력
+- 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: 드래그 중에는 로컬 상태만 변경, 드롭 시에만 저장하도록 최적화
diff --git a/frontend/app/(main)/screens/[screenId]/page.tsx b/frontend/app/(main)/screens/[screenId]/page.tsx
index 99634357..c96f7483 100644
--- a/frontend/app/(main)/screens/[screenId]/page.tsx
+++ b/frontend/app/(main)/screens/[screenId]/page.tsx
@@ -35,6 +35,9 @@ function ScreenViewPage() {
   
   // URL 쿼리에서 프리뷰용 company_code 가져오기
   const previewCompanyCode = searchParams.get("company_code");
+  
+  // 프리뷰 모드 감지 (iframe에서 로드될 때)
+  const isPreviewMode = searchParams.get("preview") === "true";
 
   // 🆕 현재 로그인한 사용자 정보
   const { user, userName, companyCode: authCompanyCode } = useAuth();
@@ -239,27 +242,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);
@@ -278,7 +294,7 @@ function ScreenViewPage() {
     return () => {
       clearTimeout(timer);
     };
-  }, [layout, isMobile]);
+  }, [layout, isMobile, isPreviewMode]);
 
   if (loading) {
     return (
@@ -316,7 +332,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">
diff --git a/frontend/components/screen/ScreenRelationFlow.tsx b/frontend/components/screen/ScreenRelationFlow.tsx
index f3b14d56..d7f814d3 100644
--- a/frontend/components/screen/ScreenRelationFlow.tsx
+++ b/frontend/components/screen/ScreenRelationFlow.tsx
@@ -1107,10 +1107,37 @@ function ScreenRelationFlowInner({ screen, selectedGroup, initialFocusedScreenId
         );
         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 || [],
         };
       });
diff --git a/frontend/components/screen/ScreenSettingModal.tsx b/frontend/components/screen/ScreenSettingModal.tsx
index 6b6dea5f..79342ef6 100644
--- a/frontend/components/screen/ScreenSettingModal.tsx
+++ b/frontend/components/screen/ScreenSettingModal.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useState, useEffect, useCallback, useMemo } from "react";
+import React, { useState, useEffect, useCallback, useMemo, useRef } from "react";
 import {
   Dialog,
   DialogContent,
@@ -45,6 +45,7 @@ import {
   Eye,
   Save,
   Plus,
+  Minus,
   Pencil,
   Trash2,
   RefreshCw,
@@ -58,6 +59,13 @@ import {
   ChevronDown,
   ChevronRight,
   Filter,
+  RotateCcw,
+  X,
+  Zap,
+  MousePointer,
+  Globe,
+  Workflow,
+  Info,
 } from "lucide-react";
 import {
   getDataFlows,
@@ -68,7 +76,19 @@ import {
   getMultipleScreenLayoutSummary,
   LayoutItem,
 } from "@/lib/api/screenGroup";
-import { tableManagementApi, ColumnTypeInfo, TableInfo } from "@/lib/api/tableManagement";
+import { tableManagementApi, ColumnTypeInfo, TableInfo, ColumnSettings } from "@/lib/api/tableManagement";
+import { screenApi } from "@/lib/api/screen";
+import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch";
+import { ExternalCallConfigAPI, ExternalCallConfig } from "@/lib/api/externalCallConfig";
+import { getFlowDefinitions } from "@/lib/api/flow";
+import { FlowDefinition } from "@/types/flow";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
 
 // ============================================================
 // 타입 정의
@@ -78,6 +98,13 @@ 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;
@@ -217,6 +244,7 @@ export function ScreenSettingModal({
   const [loading, setLoading] = useState(false);
   const [dataFlows, setDataFlows] = useState<DataFlow[]>([]);
   const [layoutItems, setLayoutItems] = useState<LayoutItem[]>([]);
+  const [iframeKey, setIframeKey] = useState(0); // iframe 새로고침용 키
 
   // 데이터 로드
   const loadData = useCallback(async () => {
@@ -249,15 +277,15 @@ export function ScreenSettingModal({
     }
   }, [isOpen, screenId, loadData]);
 
-  // 새로고침
-  const handleRefresh = () => {
+  // 새로고침 (데이터 + iframe)
+  const handleRefresh = useCallback(() => {
     loadData();
-    toast.success("새로고침 완료");
-  };
+    setIframeKey(prev => prev + 1); // iframe 새로고침
+  }, [loadData]);
 
   return (
     <Dialog open={isOpen} onOpenChange={onClose}>
-      <DialogContent className="flex h-[85vh] max-h-[900px] w-[95vw] max-w-[1200px] flex-col">
+      <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" />
@@ -268,120 +296,254 @@ export function ScreenSettingModal({
           </DialogDescription>
         </DialogHeader>
 
-        <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="overview" className="gap-1 text-xs">
-                <Database className="h-3.5 w-3.5" />
-                화면 개요
-              </TabsTrigger>
-              <TabsTrigger value="field-mapping" className="gap-1 text-xs">
-                <Columns3 className="h-3.5 w-3.5" />
-                필드 매핑
-              </TabsTrigger>
-              <TabsTrigger value="data-flow" className="gap-1 text-xs">
-                <GitBranch className="h-3.5 w-3.5" />
-                데이터 흐름
-              </TabsTrigger>
-              <TabsTrigger value="preview" className="gap-1 text-xs">
-                <Eye className="h-3.5 w-3.5" />
-                화면 프리뷰
-              </TabsTrigger>
-            </TabsList>
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={handleRefresh}
-              className="gap-1"
+        {/* 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"
             >
-              <RefreshCw className={cn("h-4 w-4", loading && "animate-spin")} />
-              새로고침
-            </Button>
+              <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>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={handleRefresh}
+                  className="h-7 w-7 p-0"
+                >
+                  <RefreshCw className={cn("h-3.5 w-3.5", loading && "animate-spin")} />
+                </Button>
+              </div>
+
+              {/* 탭 1: 화면 개요 */}
+              <TabsContent value="overview" className="mt-0 min-h-0 flex-1 overflow-auto p-3">
+                <OverviewTab
+                  screenId={screenId}
+                  screenName={screenName}
+                  mainTable={mainTable}
+                  mainTableLabel={mainTableLabel}
+                  filterTables={filterTables}
+                  fieldMappings={fieldMappings}
+                  componentCount={componentCount}
+                  dataFlows={dataFlows}
+                  layoutItems={layoutItems}
+                  loading={loading}
+                  onRefresh={handleRefresh}
+                />
+              </TabsContent>
+
+              {/* 탭 2: 제어 관리 */}
+              <TabsContent value="control-management" className="mt-0 min-h-0 flex-1 overflow-auto p-3">
+                <ControlManagementTab
+                  screenId={screenId}
+                  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={screenId}
+                  groupId={groupId}
+                  dataFlows={dataFlows}
+                  loading={loading}
+                  onReload={loadData}
+                  onSaveSuccess={onSaveSuccess}
+                />
+              </TabsContent>
+            </Tabs>
           </div>
 
-          {/* 탭 1: 화면 개요 */}
-          <TabsContent value="overview" className="mt-0 min-h-0 flex-1 overflow-auto p-4">
-            <OverviewTab
-              screenId={screenId}
-              screenName={screenName}
-              mainTable={mainTable}
-              mainTableLabel={mainTableLabel}
-              filterTables={filterTables}
-              fieldMappings={fieldMappings}
-              componentCount={componentCount}
-              dataFlows={dataFlows}
-              layoutItems={layoutItems}
-              loading={loading}
-            />
-          </TabsContent>
-
-          {/* 탭 2: 필드 매핑 */}
-          <TabsContent value="field-mapping" className="mt-0 min-h-0 flex-1 overflow-auto p-4">
-            <FieldMappingTab
-              screenId={screenId}
-              mainTable={mainTable}
-              fieldMappings={fieldMappings}
-              layoutItems={layoutItems}
-              loading={loading}
-            />
-          </TabsContent>
-
-          {/* 탭 3: 데이터 흐름 */}
-          <TabsContent value="data-flow" className="mt-0 min-h-0 flex-1 overflow-auto p-4">
-            <DataFlowTab
-              screenId={screenId}
-              groupId={groupId}
-              dataFlows={dataFlows}
-              loading={loading}
-              onReload={loadData}
-              onSaveSuccess={onSaveSuccess}
-            />
-          </TabsContent>
-
-          {/* 탭 4: 화면 프리뷰 */}
-          <TabsContent value="preview" className="mt-0 min-h-0 flex-1 overflow-hidden p-4">
-            <PreviewTab screenId={screenId} screenName={screenName} companyCode={companyCode} />
-          </TabsContent>
-        </Tabs>
+          {/* 오른쪽: 화면 프리뷰 (60%, 항상 표시) */}
+          <div className="flex min-h-0 w-[60%] flex-col overflow-hidden rounded-lg border bg-white">
+            <PreviewTab screenId={screenId} screenName={screenName} companyCode={companyCode} iframeKey={iframeKey} />
+          </div>
+        </div>
       </DialogContent>
     </Dialog>
   );
 }
 
 // ============================================================
-// 필터 테이블 아코디언 컴포넌트
+// 통합 테이블 컬럼 아코디언 컴포넌트
 // ============================================================
 
-interface FilterTableAccordionProps {
-  filterTable: FilterTableInfo;
-  mainTable?: string;
+interface ColumnMapping {
+  columnName: string;
+  fieldLabel?: string;
+  order: number; // 화면 순서 (y 좌표 기준)
 }
 
-function FilterTableAccordion({ filterTable: ft, mainTable }: FilterTableAccordionProps) {
+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;
+  
+  // 필터 테이블 전용 props (optional)
+  mainTable?: string; // 메인 테이블명 (필터 테이블에서 필터 연결 정보 표시용)
+  filterKeyMapping?: FilterKeyMapping;
+  joinColumnRefs?: JoinColumnRef[];
+}
+
+function TableColumnAccordion({
+  tableName,
+  tableLabel,
+  tableType,
+  columnMappings = [],
+  onColumnChange,
+  onColumnReorder,
+  onJoinSettingSaved,
+  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 hasJoinRefs = ft.joinColumnRefs && ft.joinColumnRefs.length > 0;
-  const hasFilterColumns = ft.filterColumns && ft.filterColumns.length > 0;
-
-  // 아코디언 열릴 때 테이블 컬럼 로드
+  // 아코디언 열릴 때 테이블 컬럼 + 전체 테이블 목록 로드
   const handleToggle = async () => {
     const newIsOpen = !isOpen;
     setIsOpen(newIsOpen);
     
-    // 처음 열릴 때 컬럼 로드
-    if (newIsOpen && columns.length === 0 && ft.tableName) {
+    if (newIsOpen && columns.length === 0 && tableName) {
       setLoadingColumns(true);
       try {
-        const result = await tableManagementApi.getColumnList(ft.tableName);
+        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 {
@@ -389,145 +551,734 @@ function FilterTableAccordion({ filterTable: ft, mainTable }: FilterTableAccordi
       }
     }
   };
+  
+  // 참조 테이블 선택 시 해당 테이블의 컬럼 로드
+  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);
+    const isUsed = !!mapping;
+    
+    return { isFilterKey, isJoinKey, joinRef, isUsed, mapping };
+  };
+
+  const ThemeIcon = themeIcon;
 
   return (
-    <div className="rounded-lg border bg-purple-50/30 overflow-hidden">
-      {/* 헤더 - 클릭하면 펼쳐짐 */}
+    <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-purple-50/50 transition-colors text-left"
+        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-purple-500 flex-shrink-0" />
+          <ChevronDown className={`h-4 w-4 text-${themeColor}-500 flex-shrink-0`} />
         ) : (
-          <ChevronRight className="h-4 w-4 text-purple-500 flex-shrink-0" />
+          <ChevronRight className={`h-4 w-4 text-${themeColor}-500 flex-shrink-0`} />
         )}
         
-        <Filter className="h-4 w-4 text-purple-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">{ft.tableLabel || ft.tableName}</div>
-          {ft.tableLabel && ft.tableName !== ft.tableLabel && (
-            <div className="text-xs text-muted-foreground truncate">{ft.tableName}</div>
+          <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-purple-100 text-purple-700 text-xs flex-shrink-0">
-          필터
+        <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">
-          {hasFilterColumns && `${ft.filterColumns!.length}개 필터`}
-          {hasJoinRefs && hasFilterColumns && " / "}
-          {hasJoinRefs && `${ft.joinColumnRefs!.length}개 조인`}
+          {isMain ? (
+            columns.length > 0 && `${columns.length}개 컬럼`
+          ) : (
+            <>
+              {hasFilterKey && `${(filterKeyMapping ? 1 : 0)}개 필터`}
+              {hasJoinRefs && hasFilterKey && " / "}
+              {hasJoinRefs && `${joinColumnRefs!.length}개 조인`}
+            </>
+          )}
         </div>
       </button>
 
       {/* 펼쳐진 내용 */}
       {isOpen && (
-        <div className="border-t border-purple-100 p-3 space-y-3 bg-white/50">
-          {/* 필터 키 설명 */}
-          <div className="text-xs text-muted-foreground">
-            <span className="font-medium text-purple-700">{ft.tableLabel || ft.tableName}</span>의 데이터를 기준으로 필터링됩니다.
-          </div>
+        <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 gap-1 text-xs font-medium text-gray-700">
-              <Table2 className="h-3 w-3" />
-              테이블 컬럼 ({loadingColumns ? "로딩중..." : `${columns.length}개`})
-            </div>
-            {loadingColumns ? (
-              <div className="flex items-center justify-center py-2">
-                <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
+            <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>
-            ) : columns.length > 0 ? (
-              <div className="grid grid-cols-2 gap-1 max-h-32 overflow-y-auto">
-                {columns.slice(0, 10).map((col, cIdx) => (
-                  <div
-                    key={cIdx}
-                    className="flex items-center gap-1 text-xs bg-gray-50 rounded px-2 py-1"
-                  >
-                    <span className="font-medium truncate">{col.displayName || col.columnName}</span>
-                    <span className="text-muted-foreground text-[10px] truncate">
-                      ({col.dataType})
-                    </span>
+              {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>
-                ))}
-                {columns.length > 10 && (
-                  <div className="text-xs text-muted-foreground px-2 py-1">
-                    +{columns.length - 10}개 더
-                  </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-1">
-                컬럼 정보 없음
-              </div>
+              <div className="text-xs text-muted-foreground text-center py-2">컬럼 정보 없음</div>
             )}
           </div>
-
-          {/* 필터 컬럼 매핑 */}
-          {hasFilterColumns && (
-            <div className="space-y-2">
-              <div className="flex items-center gap-1 text-xs font-medium text-purple-700">
-                <Filter className="h-3 w-3" />
-                필터 키 매핑
-              </div>
-              <div className="space-y-1">
-                {ft.filterColumns!.map((col, cIdx) => (
-                  <div
-                    key={cIdx}
-                    className="flex items-center gap-2 text-xs bg-purple-50 rounded-md p-2"
-                  >
-                    <span className="rounded bg-white px-2 py-0.5 border border-purple-200 font-medium">
-                      {mainTable}.{col}
-                    </span>
-                    <ArrowRight className="h-3 w-3 text-purple-400" />
-                    <span className="rounded bg-purple-100 px-2 py-0.5 border border-purple-200">
-                      {ft.tableLabel || ft.tableName}.{col}
-                    </span>
-                  </div>
-                ))}
-              </div>
-            </div>
-          )}
-
-          {/* 조인 관계 */}
-          {hasJoinRefs && (
-            <div className="space-y-2">
-              <div className="flex items-center gap-1 text-xs font-medium text-orange-700">
-                <Link2 className="h-3 w-3" />
-                조인 관계 ({ft.joinColumnRefs!.length}개)
-              </div>
-              <div className="space-y-1">
-                {ft.joinColumnRefs!.map((join, jIdx) => (
-                  <div
-                    key={jIdx}
-                    className="flex items-center gap-2 text-xs bg-orange-50 rounded-md p-2"
-                  >
-                    <span className="rounded bg-white px-2 py-0.5 border border-orange-200 font-medium">
-                      {ft.tableLabel || ft.tableName}.{join.column}
-                    </span>
-                    <ArrowRight className="h-3 w-3 text-orange-400" />
-                    <span className="rounded bg-orange-100 px-2 py-0.5 border border-orange-200">
-                      {join.refTableLabel || join.refTable}.{join.refColumn}
-                    </span>
-                  </div>
-                ))}
-              </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: 화면 개요
 // ============================================================
@@ -543,6 +1294,7 @@ interface OverviewTabProps {
   dataFlows: DataFlow[];
   layoutItems: LayoutItem[]; // 컴포넌트 컬럼 정보 추가
   loading: boolean;
+  onRefresh?: () => void; // 컬럼 변경 후 새로고침 콜백
 }
 
 function OverviewTab({
@@ -556,7 +1308,574 @@ function OverviewTab({
   dataFlows,
   layoutItems,
   loading,
+  onRefresh,
 }: 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,
+        });
+      });
+      
+      const 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;
+      });
+
+      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(
@@ -612,25 +1931,38 @@ function OverviewTab({
         </div>
       </div>
 
-      {/* 메인 테이블 */}
+      {/* 메인 테이블 (아코디언 형식) */}
       <div className="space-y-2">
         <h3 className="flex items-center gap-2 text-sm font-semibold">
           <Database className="h-4 w-4 text-blue-500" />
           메인 테이블
         </h3>
         {mainTable ? (
-          <div className="flex items-center gap-3 rounded-lg border bg-blue-50/50 p-3">
-            <Table2 className="h-5 w-5 text-blue-500" />
-            <div>
-              <div className="font-medium">{mainTableLabel || mainTable}</div>
-              {mainTableLabel && mainTable !== mainTableLabel && (
-                <div className="text-xs text-muted-foreground">{mainTable}</div>
-              )}
-            </div>
-            <Badge variant="outline" className="ml-auto bg-blue-100 text-blue-700">
-              메인
-            </Badge>
-          </div>
+          <TableColumnAccordion 
+            tableName={mainTable} 
+            tableLabel={mainTableLabel}
+            tableType="main"
+            columnMappings={
+              // layoutItems에서 컬럼 매핑 정보 추출 (y 좌표 순서대로)
+              layoutItems
+                .slice()
+                .sort((a, b) => a.y - b.y) // 화면 순서대로 정렬
+                .flatMap((item, idx) => 
+                  (item.usedColumns || []).map(col => ({
+                    columnName: col,
+                    fieldLabel: col, // 컬럼명 자체를 식별자로 사용 (UI에서 columnLabel 표시)
+                    order: idx * 100 + (item.usedColumns?.indexOf(col) || 0), // 순서 유지
+                  }))
+                )
+                // 중복 제거 (첫 번째 매핑만 유지)
+                .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">
             메인 테이블이 설정되지 않았습니다.
@@ -646,13 +1978,49 @@ function OverviewTab({
         </h3>
         {filterTables.length > 0 ? (
           <div className="space-y-2">
-            {filterTables.map((ft, idx) => (
-              <FilterTableAccordion
-                key={`${ft.tableName}-${idx}`}
-                filterTable={ft}
-                mainTable={mainTable}
-              />
-            ))}
+            {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">
@@ -717,6 +2085,43 @@ function FieldMappingTab({
   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<{
@@ -748,6 +2153,15 @@ function FieldMappingTab({
     });
     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(() => {
@@ -782,12 +2196,34 @@ function FieldMappingTab({
           <div>
             <h3 className="text-sm font-semibold">화면 컴포넌트별 컬럼 사용 현황</h3>
             <p className="text-xs text-muted-foreground">
-              각 컴포넌트에서 사용하는 테이블 컬럼을 확인합니다.
+              {isEditMode 
+                ? "컬럼을 클릭하여 매핑을 변경할 수 있습니다."
+                : "각 컴포넌트에서 사용하는 테이블 컬럼을 확인합니다."}
             </p>
           </div>
-          <Badge variant="outline" className="text-xs">
-            총 {totalColumns}개 컬럼
-          </Badge>
+          <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 ? (
@@ -800,9 +2236,10 @@ function FieldMappingTab({
             {componentColumns.map((comp, idx) => (
               <div
                 key={idx}
-                className="rounded-lg border bg-gray-50 p-3"
+                className="rounded-lg border bg-white overflow-hidden"
               >
-                <div className="mb-2 flex items-center justify-between">
+                {/* 컴포넌트 헤더 */}
+                <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">
@@ -813,28 +2250,132 @@ function FieldMappingTab({
                     </Badge>
                   </div>
                   <Badge variant="outline" className="text-xs">
-                    {comp.columns.length}개 컬럼
+                    {comp.columns.length}개 필드
                   </Badge>
                 </div>
-                <div className="flex flex-wrap gap-1">
+                
+                {/* 필드 → 컬럼 매핑 테이블 */}
+                <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 (
-                      <Badge
+                      <div
                         key={cIdx}
-                        variant="outline"
                         className={cn(
-                          "text-[11px]",
-                          isJoinColumn
-                            ? "bg-orange-100 text-orange-700"
-                            : "bg-white"
+                          "grid grid-cols-[1fr_28px_1fr] gap-1 px-3 py-1.5 items-center text-xs",
+                          isJoinColumn && "bg-orange-50"
                         )}
                       >
-                        {col}
-                        {isJoinColumn && (
-                          <Link2 className="ml-1 h-2.5 w-2.5" />
+                        {/* 필드명 (화면 표시) */}
+                        <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>
                         )}
-                      </Badge>
+                      </div>
                     );
                   })}
                 </div>
@@ -1210,6 +2751,627 @@ function DataFlowTab({
   );
 }
 
+// ============================================================
+// 탭: 제어 관리
+// ============================================================
+
+interface ButtonControlInfo {
+  id: string;
+  label: string;
+  actionType: string;
+  targetTable?: string;
+  operations?: string[];
+  confirmMessage?: string;
+  hasDataflowControl?: boolean;
+  dataflowControlMode?: string;
+  linkedExternalCall?: {
+    id: number;
+    name: string;
+  };
+  linkedFlow?: {
+    id: number;
+    name: string;
+  };
+}
+
+interface ControlManagementTabProps {
+  screenId: number;
+  layoutItems: LayoutItem[];
+  loading: boolean;
+  onRefresh: () => void;
+}
+
+function ControlManagementTab({
+  screenId,
+  layoutItems,
+  loading: parentLoading,
+  onRefresh,
+}: ControlManagementTabProps) {
+  const [buttonControls, setButtonControls] = useState<ButtonControlInfo[]>([]);
+  const [externalCalls, setExternalCalls] = useState<ExternalCallConfig[]>([]);
+  const [flows, setFlows] = useState<FlowDefinition[]>([]);
+  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>>({});
+
+  // 테이블 목록 조회
+  const [tableList, setTableList] = useState<TableInfo[]>([]);
+
+  // 데이터 로드
+  const loadData = useCallback(async () => {
+    setLoading(true);
+    try {
+      // 1. 화면 레이아웃에서 버튼 정보 추출
+      const layoutResponse = await screenApi.getLayout(screenId);
+      console.log("[제어관리] 레이아웃 응답:", layoutResponse);
+      
+      if (layoutResponse?.components) {
+        const buttons: ButtonControlInfo[] = [];
+        
+        // 컴포넌트에서 버튼 추출 (다양한 필드 확인)
+        const extractButtons = (components: any[], depth = 0) => {
+          for (const comp of components) {
+            // 버튼 컴포넌트 필터링 (다양한 조건 확인)
+            const isButton = 
+              comp.webType === "button" ||
+              comp.componentType === "button" ||
+              comp.type === "button" ||
+              comp.componentKind?.includes("button") ||
+              comp.widgetType === "button";
+            
+            if (isButton) {
+              const config = comp.componentConfig || {};
+              const webTypeConfig = comp.webTypeConfig || {};
+              const action = config.action || {};
+              
+              console.log("[제어관리] 버튼 발견:", comp);
+              
+              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.confirmMessage || config.confirmMessage,
+                hasDataflowControl: webTypeConfig.enableDataflowControl,
+                dataflowControlMode: webTypeConfig.dataflowConfig?.controlMode,
+                linkedExternalCall: undefined, // TODO: 연결 정보 조회
+                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);
+        console.log("[제어관리] 추출된 버튼:", buttons);
+        setButtonControls(buttons);
+      }
+
+      // 2. 외부 호출 목록 조회
+      const externalResponse = await ExternalCallConfigAPI.getConfigs({ is_active: "Y" });
+      if (externalResponse.success && externalResponse.data) {
+        setExternalCalls(externalResponse.data);
+      }
+
+      // 3. 플로우 목록 조회
+      const flowResponse = await getFlowDefinitions({ isActive: true });
+      if (flowResponse.success && flowResponse.data) {
+        setFlows(flowResponse.data);
+      }
+
+      // 4. 테이블 목록 조회
+      const tableResponse = await tableManagementApi.getTableList();
+      if (tableResponse.success && tableResponse.data) {
+        setTableList(tableResponse.data);
+      }
+    } catch (error) {
+      console.error("제어 관리 데이터 로드 실패:", error);
+      toast.error("데이터 로드 실패");
+    } finally {
+      setLoading(false);
+    }
+  }, [screenId]);
+
+  useEffect(() => {
+    loadData();
+  }, [loadData]);
+
+  // 버튼 설정 저장
+  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) {
+          if ((comp.id === buttonId || comp.componentId === buttonId) && 
+              (comp.webType === "button" || comp.componentKind?.includes("button"))) {
+            // componentConfig 업데이트
+            if (!comp.componentConfig) comp.componentConfig = {};
+            if (!comp.componentConfig.action) comp.componentConfig.action = {};
+            
+            if (values.targetTable) {
+              comp.componentConfig.tableName = values.targetTable;
+            }
+            if (values.confirmMessage !== undefined) {
+              comp.componentConfig.action.confirmMessage = values.confirmMessage;
+            }
+            if (values.operations) {
+              comp.componentConfig.action.operations = values.operations;
+            }
+            
+            // webTypeConfig 업데이트 (플로우 연동)
+            if (!comp.webTypeConfig) comp.webTypeConfig = {};
+            if (values.linkedFlowId) {
+              comp.webTypeConfig.enableDataflowControl = true;
+              comp.webTypeConfig.dataflowConfig = {
+                controlMode: "flow",
+                flowConfig: {
+                  flowId: values.linkedFlowId,
+                  flowName: flows.find(f => f.id === values.linkedFlowId)?.name || "",
+                  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;
+          }
+        }
+        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: "삭제",
+      refresh: "새로고침",
+      reset: "초기화",
+      submit: "제출",
+      cancel: "취소",
+      close: "닫기",
+      navigate: "이동",
+      popup: "팝업",
+      custom: "커스텀",
+    };
+    return labels[type] || type;
+  };
+
+  // 액션 타입 색상
+  const getActionTypeColor = (type: string) => {
+    switch (type) {
+      case "save":
+        return "bg-green-100 text-green-700";
+      case "delete":
+        return "bg-red-100 text-red-700";
+      case "refresh":
+        return "bg-blue-100 text-blue-700";
+      case "submit":
+        return "bg-purple-100 text-purple-700";
+      default:
+        return "bg-gray-100 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-4">
+      {/* 버튼 액션 설정 */}
+      <div className="rounded-lg border">
+        <div className="flex items-center gap-2 border-b bg-muted/30 px-3 py-2">
+          <MousePointer className="h-4 w-4 text-blue-500" />
+          <span className="text-sm font-medium">버튼 액션 설정</span>
+          <Badge variant="secondary" className="ml-auto text-[10px]">
+            {buttonControls.length}개
+          </Badge>
+        </div>
+        
+        <div className="max-h-[300px] overflow-y-auto p-2">
+          {buttonControls.length === 0 ? (
+            <div className="flex flex-col items-center justify-center py-8 text-center">
+              <MousePointer className="mb-2 h-8 w-8 text-muted-foreground/50" />
+              <p className="text-sm text-muted-foreground">버튼이 없습니다</p>
+              <p className="text-xs text-muted-foreground">화면 디자이너에서 버튼을 추가하세요</p>
+            </div>
+          ) : (
+            <div className="space-y-2">
+              {buttonControls.map((btn) => (
+                <div key={btn.id} className="rounded border bg-white">
+                  {/* 버튼 헤더 */}
+                  <div
+                    className="flex cursor-pointer items-center gap-2 p-2 hover:bg-muted/30"
+                    onClick={() => setExpandedButton(expandedButton === btn.id ? null : btn.id)}
+                  >
+                    {expandedButton === btn.id ? (
+                      <ChevronDown className="h-3.5 w-3.5 text-muted-foreground" />
+                    ) : (
+                      <ChevronRight className="h-3.5 w-3.5 text-muted-foreground" />
+                    )}
+                    <span className="text-sm font-medium">[{btn.label}]</span>
+                    <Badge className={cn("h-5 text-[10px]", getActionTypeColor(btn.actionType))}>
+                      {getActionTypeLabel(btn.actionType)}
+                    </Badge>
+                    {btn.targetTable && (
+                      <span className="text-xs text-muted-foreground">
+                        → {btn.targetTable}
+                      </span>
+                    )}
+                    {btn.hasDataflowControl && (
+                      <Badge variant="outline" className="ml-auto h-5 text-[10px] border-purple-300 text-purple-600">
+                        <Zap className="mr-1 h-2.5 w-2.5" />
+                        제어 연동
+                      </Badge>
+                    )}
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      className="ml-auto h-6 w-6 p-0"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        window.open(`/admin/screenMng/screenMngList?screenId=${screenId}`, "_blank");
+                      }}
+                      title="상세 설정 (화면 디자이너)"
+                    >
+                      <ExternalLink className="h-3 w-3" />
+                    </Button>
+                  </div>
+
+                  {/* 버튼 상세 (확장 시) */}
+                  {expandedButton === btn.id && (
+                    <div className="border-t bg-muted/10 p-3">
+                      <div className="space-y-3">
+                        {/* 대상 테이블 */}
+                        <div className="grid grid-cols-[100px_1fr] items-center gap-2">
+                          <Label className="text-xs text-muted-foreground">대상 테이블</Label>
+                          {editingButton === btn.id ? (
+                            <Select
+                              value={editedValues[btn.id]?.targetTable || btn.targetTable || ""}
+                              onValueChange={(val) => setEditedValues(prev => ({
+                                ...prev,
+                                [btn.id]: { ...prev[btn.id], targetTable: val }
+                              }))}
+                            >
+                              <SelectTrigger className="h-7 text-xs">
+                                <SelectValue placeholder="테이블 선택" />
+                              </SelectTrigger>
+                              <SelectContent>
+                                {tableList.map((t) => (
+                                  <SelectItem key={t.tableName} value={t.tableName} className="text-xs">
+                                    {t.displayName || t.tableName}
+                                  </SelectItem>
+                                ))}
+                              </SelectContent>
+                            </Select>
+                          ) : (
+                            <span className="text-xs">
+                              {btn.targetTable || <span className="text-muted-foreground">미설정</span>}
+                            </span>
+                          )}
+                        </div>
+
+                        {/* 확인 메시지 */}
+                        <div className="grid grid-cols-[100px_1fr] items-center gap-2">
+                          <Label className="text-xs text-muted-foreground">확인 메시지</Label>
+                          {editingButton === btn.id ? (
+                            <Input
+                              value={editedValues[btn.id]?.confirmMessage ?? btn.confirmMessage ?? ""}
+                              onChange={(e) => setEditedValues(prev => ({
+                                ...prev,
+                                [btn.id]: { ...prev[btn.id], confirmMessage: e.target.value }
+                              }))}
+                              className="h-7 text-xs"
+                              placeholder="예: 정말 저장하시겠습니까?"
+                            />
+                          ) : (
+                            <span className="text-xs">
+                              {btn.confirmMessage || <span className="text-muted-foreground">없음</span>}
+                            </span>
+                          )}
+                        </div>
+
+                        {/* 플로우 연동 */}
+                        <div className="grid grid-cols-[100px_1fr] items-center gap-2">
+                          <Label className="text-xs text-muted-foreground">플로우 연동</Label>
+                          {editingButton === btn.id ? (
+                            <Select
+                              value={editedValues[btn.id]?.linkedFlowId?.toString() || btn.linkedFlow?.id?.toString() || "none"}
+                              onValueChange={(val) => setEditedValues(prev => ({
+                                ...prev,
+                                [btn.id]: { 
+                                  ...prev[btn.id], 
+                                  linkedFlowId: val === "none" ? null : parseInt(val) 
+                                }
+                              }))}
+                            >
+                              <SelectTrigger className="h-7 text-xs">
+                                <SelectValue placeholder="플로우 선택" />
+                              </SelectTrigger>
+                              <SelectContent>
+                                <SelectItem value="none" className="text-xs">연동 안함</SelectItem>
+                                {flows.map((f) => (
+                                  <SelectItem key={f.id} value={f.id.toString()} className="text-xs">
+                                    {f.name}
+                                  </SelectItem>
+                                ))}
+                              </SelectContent>
+                            </Select>
+                          ) : (
+                            <span className="text-xs">
+                              {btn.linkedFlow ? (
+                                <Badge variant="outline" className="text-[10px]">
+                                  <Workflow className="mr-1 h-2.5 w-2.5" />
+                                  {btn.linkedFlow.name}
+                                </Badge>
+                              ) : (
+                                <span className="text-muted-foreground">없음</span>
+                              )}
+                            </span>
+                          )}
+                        </div>
+
+                        {/* 편집/저장 버튼 */}
+                        <div className="flex justify-end gap-2 pt-2">
+                          {editingButton === btn.id ? (
+                            <>
+                              <Button
+                                variant="outline"
+                                size="sm"
+                                className="h-7 text-xs"
+                                onClick={() => {
+                                  setEditingButton(null);
+                                  setEditedValues(prev => {
+                                    const next = { ...prev };
+                                    delete next[btn.id];
+                                    return next;
+                                  });
+                                }}
+                              >
+                                취소
+                              </Button>
+                              <Button
+                                size="sm"
+                                className="h-7 text-xs"
+                                onClick={() => handleSaveButton(btn.id)}
+                              >
+                                <Save className="mr-1 h-3 w-3" />
+                                저장
+                              </Button>
+                            </>
+                          ) : (
+                            <Button
+                              variant="outline"
+                              size="sm"
+                              className="h-7 text-xs"
+                              onClick={() => setEditingButton(btn.id)}
+                            >
+                              <Pencil className="mr-1 h-3 w-3" />
+                              편집
+                            </Button>
+                          )}
+                        </div>
+                      </div>
+                    </div>
+                  )}
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* 외부 연동 */}
+      <div className="rounded-lg border">
+        <div className="flex items-center gap-2 border-b bg-muted/30 px-3 py-2">
+          <Globe className="h-4 w-4 text-green-500" />
+          <span className="text-sm font-medium">외부 연동</span>
+          <Badge variant="secondary" className="ml-auto text-[10px]">
+            {externalCalls.filter(e => e.is_active === "Y").length}개 활성
+          </Badge>
+        </div>
+
+        <div className="max-h-[200px] overflow-y-auto p-2">
+          {externalCalls.length === 0 ? (
+            <div className="flex flex-col items-center justify-center py-6 text-center">
+              <Globe className="mb-2 h-8 w-8 text-muted-foreground/50" />
+              <p className="text-sm text-muted-foreground">외부 호출 설정이 없습니다</p>
+              <Button
+                variant="link"
+                size="sm"
+                className="mt-1 h-6 text-xs"
+                onClick={() => window.open("/admin/automaticMng/exCallConfList", "_blank")}
+              >
+                외부 호출 관리로 이동
+              </Button>
+            </div>
+          ) : (
+            <div className="space-y-1.5">
+              {externalCalls.slice(0, 5).map((call) => (
+                <div
+                  key={call.id}
+                  className="flex items-center gap-2 rounded border bg-white p-2"
+                >
+                  <Badge 
+                    variant="outline" 
+                    className={cn(
+                      "h-5 text-[10px]",
+                      call.call_type === "rest-api" && "border-blue-300 text-blue-600",
+                      call.call_type === "webhook" && "border-orange-300 text-orange-600",
+                      call.call_type === "email" && "border-purple-300 text-purple-600",
+                    )}
+                  >
+                    {call.call_type}
+                  </Badge>
+                  <span className="flex-1 truncate text-xs">{call.config_name}</span>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="h-6 w-6 p-0"
+                    onClick={() => window.open(`/admin/automaticMng/exCallConfList?id=${call.id}`, "_blank")}
+                  >
+                    <ExternalLink className="h-3 w-3" />
+                  </Button>
+                </div>
+              ))}
+              {externalCalls.length > 5 && (
+                <div className="text-center">
+                  <Button
+                    variant="link"
+                    size="sm"
+                    className="h-6 text-xs"
+                    onClick={() => window.open("/admin/automaticMng/exCallConfList", "_blank")}
+                  >
+                    +{externalCalls.length - 5}개 더 보기
+                  </Button>
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+
+        <div className="border-t p-2">
+          <div className="flex items-center gap-1 text-[10px] text-muted-foreground">
+            <Info className="h-3 w-3" />
+            <span>버튼에 외부 호출을 연결하려면 버튼 편집에서 설정하세요</span>
+          </div>
+        </div>
+      </div>
+
+      {/* 플로우 연동 */}
+      <div className="rounded-lg border">
+        <div className="flex items-center gap-2 border-b bg-muted/30 px-3 py-2">
+          <Workflow className="h-4 w-4 text-purple-500" />
+          <span className="text-sm font-medium">플로우 연동</span>
+          <Badge variant="secondary" className="ml-auto text-[10px]">
+            {flows.length}개
+          </Badge>
+        </div>
+
+        <div className="max-h-[200px] overflow-y-auto p-2">
+          {flows.length === 0 ? (
+            <div className="flex flex-col items-center justify-center py-6 text-center">
+              <Workflow className="mb-2 h-8 w-8 text-muted-foreground/50" />
+              <p className="text-sm text-muted-foreground">플로우가 없습니다</p>
+              <Button
+                variant="link"
+                size="sm"
+                className="mt-1 h-6 text-xs"
+                onClick={() => window.open("/admin/automaticMng/flowMgmtList", "_blank")}
+              >
+                플로우 관리로 이동
+              </Button>
+            </div>
+          ) : (
+            <div className="space-y-1.5">
+              {flows.slice(0, 5).map((flow) => (
+                <div
+                  key={flow.id}
+                  className="flex items-center gap-2 rounded border bg-white p-2"
+                >
+                  <Badge variant="outline" className="h-5 text-[10px] border-purple-300 text-purple-600">
+                    플로우
+                  </Badge>
+                  <span className="flex-1 truncate text-xs">{flow.name}</span>
+                  <span className="text-[10px] text-muted-foreground">
+                    {flow.tableName}
+                  </span>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="h-6 w-6 p-0"
+                    onClick={() => window.open(`/admin/automaticMng/flowMgmtList?id=${flow.id}`, "_blank")}
+                  >
+                    <ExternalLink className="h-3 w-3" />
+                  </Button>
+                </div>
+              ))}
+              {flows.length > 5 && (
+                <div className="text-center">
+                  <Button
+                    variant="link"
+                    size="sm"
+                    className="h-6 text-xs"
+                    onClick={() => window.open("/admin/automaticMng/flowMgmtList", "_blank")}
+                  >
+                    +{flows.length - 5}개 더 보기
+                  </Button>
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+
+        <div className="border-t p-2">
+          <div className="flex items-center gap-1 text-[10px] text-muted-foreground">
+            <Info className="h-3 w-3" />
+            <span>버튼에 플로우를 연결하려면 버튼 편집에서 설정하세요</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
 // ============================================================
 // 탭 4: 화면 프리뷰 (iframe)
 // ============================================================
@@ -1218,11 +3380,52 @@ interface PreviewTabProps {
   screenId: number;
   screenName: string;
   companyCode?: string;
+  iframeKey?: number; // iframe 새로고침용 키
 }
 
-function PreviewTab({ screenId, screenName, companyCode }: PreviewTabProps) {
+function PreviewTab({ screenId, screenName, companyCode, iframeKey = 0 }: PreviewTabProps) {
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+  
+  // 화면 디자인 크기 (모달 프리뷰에 맞춘 크기)
+  const designWidth = 1200;
+  const designHeight = 750;
+  
+  // 컨테이너에 맞는 초기 스케일 계산
+  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(() => {
@@ -1253,19 +3456,17 @@ function PreviewTab({ screenId, screenName, companyCode }: PreviewTabProps) {
   };
 
   return (
-    <div className="flex h-full flex-col space-y-3">
-      {/* 상단 툴바 */}
-      <div className="flex items-center justify-between">
-        <div className="flex items-center gap-2">
-          <Eye className="h-4 w-4 text-muted-foreground" />
-          <span className="text-sm font-medium">화면 프리뷰</span>
-          <Badge variant="outline" className="text-xs">
-            Screen ID: {screenId}
-          </Badge>
+    <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-2">
+        <div className="flex items-center gap-1">
           <Button
-            variant="outline"
+            variant="ghost"
             size="sm"
             onClick={() => {
               setLoading(true);
@@ -1274,20 +3475,22 @@ function PreviewTab({ screenId, screenName, companyCode }: PreviewTabProps) {
                 iframe.src = iframe.src;
               }
             }}
-            className="gap-1"
+            className="h-5 w-5 p-0"
+            title="새로고침"
           >
-            <RefreshCw className={cn("h-4 w-4", loading && "animate-spin")} />
-            새로고침
+            <RefreshCw className={cn("h-3 w-3", loading && "animate-spin")} />
           </Button>
-          <Button variant="outline" size="sm" onClick={openInNewTab} className="gap-1">
-            <ExternalLink className="h-4 w-4" />
-            새 탭에서 열기
+          <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 영역 */}
-      <div className="relative flex-1 overflow-hidden rounded-lg border bg-gray-50">
+      {/* 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">
@@ -1318,21 +3521,109 @@ function PreviewTab({ screenId, screenName, companyCode }: PreviewTabProps) {
             </div>
           </div>
         ) : (
-          <iframe
-            id="screen-preview-iframe"
-            src={previewUrl}
-            className="h-full w-full border-0"
-            onLoad={handleIframeLoad}
-            onError={handleIframeError}
-            title={`화면 프리뷰: ${screenName}`}
-            sandbox="allow-scripts allow-same-origin allow-forms allow-popups"
-          />
-        )}
-      </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;
 
-      {/* 안내 메시지 */}
-      <div className="text-xs text-muted-foreground">
-        * 프리뷰는 실제 화면을 iframe으로 로드합니다. 로그인/권한에 따라 일부 기능이 제한될 수 있습니다.
+                      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>
   );
diff --git a/frontend/components/screen/panels/DataFlowPanel.tsx b/frontend/components/screen/panels/DataFlowPanel.tsx
index 40609835..518fbd2c 100644
--- a/frontend/components/screen/panels/DataFlowPanel.tsx
+++ b/frontend/components/screen/panels/DataFlowPanel.tsx
@@ -459,3 +459,5 @@ 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 7ec2b33a..86ebc226 100644
--- a/frontend/components/screen/panels/FieldJoinPanel.tsx
+++ b/frontend/components/screen/panels/FieldJoinPanel.tsx
@@ -411,3 +411,5 @@ export default function FieldJoinPanel({ screenId, componentId, layoutId }: Fiel
 
 
 
+
+
diff --git a/frontend/lib/api/entityJoin.ts b/frontend/lib/api/entityJoin.ts
index a3206df9..cbcab931 100644
--- a/frontend/lib/api/entityJoin.ts
+++ b/frontend/lib/api/entityJoin.ts
@@ -77,15 +77,26 @@ export const entityJoinApi = {
         filterColumn?: string;
         filterValue?: any;
       }; // 🆕 제외 필터 (다른 테이블에 이미 존재하는 데이터 제외)
+      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,7 +107,7 @@ 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, // 🆕 제외 필터
       },
diff --git a/frontend/lib/registry/components/split-panel-layout/SplitPanelLayoutComponent.tsx b/frontend/lib/registry/components/split-panel-layout/SplitPanelLayoutComponent.tsx
index bfb26c90..cbc7ea4f 100644
--- a/frontend/lib/registry/components/split-panel-layout/SplitPanelLayoutComponent.tsx
+++ b/frontend/lib/registry/components/split-panel-layout/SplitPanelLayoutComponent.tsx
@@ -55,6 +55,8 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
   ...props
 }) => {
   const componentConfig = (component.componentConfig || {}) as SplitPanelLayoutConfig;
+  // 🆕 프리뷰용 회사 코드 오버라이드 (최고 관리자만 사용 가능)
+  const companyCode = (props as any).companyCode as string | undefined;
 
   // 기본 설정값
   const splitRatio = componentConfig.splitRatio || 30;
@@ -766,6 +768,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
         enableEntityJoin: true, // 엔티티 조인 활성화
         dataFilter: componentConfig.leftPanel?.dataFilter, // 🆕 데이터 필터 전달
         additionalJoinColumns: additionalJoinColumns.length > 0 ? additionalJoinColumns : undefined, // 🆕 추가 조인 컬럼
+        companyCodeOverride: companyCode, // 🆕 프리뷰용 회사 코드 오버라이드
       });
 
       // 🔍 디버깅: API 응답 데이터의 키 확인
@@ -828,6 +831,7 @@ 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;
@@ -885,6 +889,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                   search: searchConditions,
                   enableEntityJoin: true,
                   size: 1000,
+                  companyCodeOverride: companyCode, // 🆕 프리뷰용 회사 코드 오버라이드
                 });
                 if (result.data) {
                   allResults.push(...result.data);
@@ -919,6 +924,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
               search: searchConditions,
               enableEntityJoin: true,
               size: 1000,
+              companyCodeOverride: companyCode, // 🆕 프리뷰용 회사 코드 오버라이드
             });
 
             console.log("🔗 [분할패널] 복합키 조회 결과:", result);
diff --git a/frontend/lib/registry/components/table-list/TableListComponent.tsx b/frontend/lib/registry/components/table-list/TableListComponent.tsx
index 7ac521af..78abf111 100644
--- a/frontend/lib/registry/components/table-list/TableListComponent.tsx
+++ b/frontend/lib/registry/components/table-list/TableListComponent.tsx
@@ -211,6 +211,8 @@ export interface TableListComponentProps {
   // 탭 관련 정보 (탭 내부의 테이블에서 사용)
   parentTabId?: string; // 부모 탭 ID
   parentTabsComponentId?: string; // 부모 탭 컴포넌트 ID
+  // 🆕 프리뷰용 회사 코드 (DynamicComponentRenderer에서 전달, 최고 관리자만 오버라이드 가능)
+  companyCode?: string;
 }
 
 // ========================================
@@ -238,6 +240,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
   screenId,
   parentTabId,
   parentTabsComponentId,
+  companyCode,
 }) => {
   // ========================================
   // 설정 및 스타일
@@ -1780,6 +1783,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
           screenEntityConfigs: Object.keys(screenEntityConfigs).length > 0 ? screenEntityConfigs : undefined, // 🎯 화면별 엔티티 설정 전달
           dataFilter: tableConfig.dataFilter, // 🆕 데이터 필터 전달
           excludeFilter: excludeFilterParam, // 🆕 제외 필터 전달
+          companyCodeOverride: companyCode, // 🆕 프리뷰용 회사 코드 오버라이드 (최고 관리자만)
         });
 
         // 실제 데이터의 item_number만 추출하여 중복 확인
@@ -1850,6 +1854,8 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
     // 🆕 RelatedDataButtons 필터 추가
     relatedButtonFilter,
     isRelatedButtonTarget,
+    // 🆕 프리뷰용 회사 코드 오버라이드
+    companyCode,
   ]);
 
   const fetchTableDataDebounced = useCallback(
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index e4f5a1fd..2b138424 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -80,6 +80,7 @@
         "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 +256,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=18"
       },
@@ -296,6 +298,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -329,6 +332,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",
@@ -2590,6 +2594,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 +3248,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 +3316,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 +3630,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 +6131,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 +6142,7 @@
       "integrity": "sha512-9KQPoO6mZCi7jcIStSnlOWn2nEF3mNmyr3rIAsGnAbQKYbRLyqmeSc39EVgtxXVia+LMT8j3knZLAZAh+xLmrw==",
       "devOptional": true,
       "license": "MIT",
+      "peer": true,
       "peerDependencies": {
         "@types/react": "^19.2.0"
       }
@@ -6166,6 +6176,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 +6259,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 +6892,7 @@
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -7809,7 +7822,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 +8145,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"
       }
@@ -8866,6 +8881,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 +8970,7 @@
       "integrity": "sha512-82GZUjRS0p/jganf6q1rEO25VSoHH0hKPCTrgillPjdI/3bgBhAE1QzHrHTizjpRvy6pGAvKjDJtk2pF9NDq8w==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "bin": {
         "eslint-config-prettier": "bin/cli.js"
       },
@@ -9055,6 +9072,7 @@
       "integrity": "sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@rtsao/scc": "^1.1.0",
         "array-includes": "^3.1.9",
@@ -10089,6 +10107,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"
@@ -10847,7 +10866,8 @@
       "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",
@@ -12033,6 +12053,7 @@
       "integrity": "sha512-I7AIg5boAr5R0FFtJ6rCfD+LFsWHp81dolrFD8S79U9tb8Az2nGrJncnMSnys+bpQJfRUzqs9hnA81OAA3hCuQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "bin": {
         "prettier": "bin/prettier.cjs"
       },
@@ -12328,6 +12349,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 +12379,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 +12428,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 +12555,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 +12625,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 +12644,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"
       },
@@ -12796,6 +12823,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",
@@ -12901,6 +12942,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 +12965,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",
@@ -13904,7 +13947,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 +14036,7 @@
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -14322,6 +14367,7 @@
       "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
       "dev": true,
       "license": "Apache-2.0",
+      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
diff --git a/frontend/package.json b/frontend/package.json
index e9cf087c..b504541f 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -88,6 +88,7 @@
     "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",