diff --git a/PLAN.MD b/PLAN.MD
new file mode 100644
index 00000000..7c3b1007
--- /dev/null
+++ b/PLAN.MD
@@ -0,0 +1,27 @@
+# 프로젝트: Digital Twin 에디터 안정화
+
+## 개요
+
+Digital Twin 에디터(`DigitalTwinEditor.tsx`)에서 발생한 런타임 에러(`TypeError: Cannot read properties of undefined`)를 수정하고, 전반적인 안정성을 확보합니다.
+
+## 핵심 기능
+
+1. `DigitalTwinEditor` 버그 수정
+2. 비동기 함수 입력값 유효성 검증 강화
+3. 외부 DB 연결 상태에 따른 방어 코드 추가
+
+## 테스트 계획
+
+### 1단계: 긴급 버그 수정
+
+- [x] `loadMaterialCountsForLocations` 함수에서 `locaKeys` undefined 체크 추가 (완료)
+- [ ] 에디터 로드 및 객체 조작 시 에러 발생 여부 확인
+
+### 2단계: 잠재적 문제 점검
+
+- [ ] `loadLayout` 등 주요 로딩 함수의 데이터 유효성 검사
+- [ ] `handleToolDragStart`, `handleCanvasDrop` 등 인터랙션 함수의 예외 처리
+
+## 진행 상태
+
+- [진행중] 1단계 긴급 버그 수정 완료 후 사용자 피드백 대기 중
diff --git a/PROJECT_STATUS_2025_11_20.md b/PROJECT_STATUS_2025_11_20.md
new file mode 100644
index 00000000..570dd789
--- /dev/null
+++ b/PROJECT_STATUS_2025_11_20.md
@@ -0,0 +1,57 @@
+# 프로젝트 진행 상황 (2025-11-20)
+
+## 작업 개요: 디지털 트윈 3D 야드 고도화 (동적 계층 구조)
+
+### 1. 핵심 변경 사항
+기존의 고정된 `Area` -> `Location` 2단계 구조를 유연한 **N-Level 동적 계층 구조**로 변경하고, 공간적 제약을 강화했습니다.
+
+### 2. 완료된 작업
+
+#### 데이터베이스
+- **마이그레이션 실행**: `db/migrations/042_refactor_digital_twin_hierarchy.sql`
+- **스키마 변경**:
+  - `digital_twin_layout` 테이블에 `hierarchy_config` (JSONB) 컬럼 추가
+  - `digital_twin_objects` 테이블에 `hierarchy_level`, `parent_key`, `external_key` 컬럼 추가
+  - 기존 하드코딩된 테이블 매핑 컬럼 제거
+
+#### 백엔드 (Node.js)
+- **API 추가/수정**:
+  - `POST /api/digital-twin/data/hierarchy`: 계층 설정에 따른 전체 데이터 조회
+  - `POST /api/digital-twin/data/children`: 특정 부모의 하위 데이터 조회
+  - 기존 레거시 API (`getWarehouses` 등) 호환성 유지
+- **컨트롤러 수정**:
+  - `digitalTwinDataController.ts`: 동적 쿼리 생성 로직 구현
+  - `digitalTwinLayoutController.ts`: 레이아웃 저장/수정 시 `hierarchy_config` 및 객체 계층 정보 처리
+
+#### 프론트엔드 (React)
+- **신규 컴포넌트**: `HierarchyConfigPanel.tsx`
+  - 레벨 추가/삭제, 테이블 및 컬럼 매핑 설정 UI
+- **유틸리티**: `spatialContainment.ts`
+  - `validateSpatialContainment`: 자식 객체가 부모 객체 내부에 있는지 검증 (AABB)
+  - `updateChildrenPositions`: 부모 이동 시 자식 객체 자동 이동 (그룹 이동)
+- **에디터 통합 (`DigitalTwinEditor.tsx`)**:
+  - `HierarchyConfigPanel` 적용
+  - 동적 데이터 로드 로직 구현
+  - 3D 캔버스 드래그앤드롭 시 공간적 종속성 검증 적용
+  - 객체 이동 시 그룹 이동 적용
+
+### 3. 현재 상태
+- **백엔드 서버**: 재시작 완료, 정상 동작 중 (PostgreSQL 연결 이슈 해결됨)
+- **DB**: 마이그레이션 스크립트 실행 완료
+
+### 4. 다음 단계 (테스트 필요)
+새로운 세션에서 다음 시나리오를 테스트해야 합니다:
+1. **계층 설정**: 에디터에서 창고 -> 구역(Lv1) -> 위치(Lv2) 설정 및 매핑 저장
+2. **배치 검증**:
+   - 구역 배치 후, 위치를 구역 **내부**에 배치 (성공해야 함)
+   - 위치를 구역 **외부**에 배치 (실패해야 함)
+3. **이동 검증**: 구역 이동 시 내부의 위치들도 같이 따라오는지 확인
+
+### 5. 관련 파일
+- `frontend/components/admin/dashboard/widgets/yard-3d/DigitalTwinEditor.tsx`
+- `frontend/components/admin/dashboard/widgets/yard-3d/HierarchyConfigPanel.tsx`
+- `frontend/components/admin/dashboard/widgets/yard-3d/spatialContainment.ts`
+- `backend-node/src/controllers/digitalTwinDataController.ts`
+- `backend-node/src/routes/digitalTwinRoutes.ts`
+- `db/migrations/042_refactor_digital_twin_hierarchy.sql`
+
diff --git a/backend-node/scripts/test-digital-twin-db.ts b/backend-node/scripts/test-digital-twin-db.ts
new file mode 100644
index 00000000..7d0efce7
--- /dev/null
+++ b/backend-node/scripts/test-digital-twin-db.ts
@@ -0,0 +1,209 @@
+/**
+ * 디지털 트윈 외부 DB (DO_DY) 연결 및 쿼리 테스트 스크립트
+ * READ-ONLY: SELECT 쿼리만 실행
+ */
+
+import { Pool } from "pg";
+import mysql from "mysql2/promise";
+import { CredentialEncryption } from "../src/utils/credentialEncryption";
+
+async function testDigitalTwinDb() {
+  // 내부 DB 연결 (연결 정보 저장용)
+  const internalPool = new Pool({
+    host: process.env.DB_HOST || "localhost",
+    port: parseInt(process.env.DB_PORT || "5432"),
+    database: process.env.DB_NAME || "plm",
+    user: process.env.DB_USER || "postgres",
+    password: process.env.DB_PASSWORD || "ph0909!!",
+  });
+
+  const encryptionKey =
+    process.env.ENCRYPTION_SECRET_KEY || "default-secret-key-for-development";
+  const encryption = new CredentialEncryption(encryptionKey);
+
+  try {
+    console.log("🚀 디지털 트윈 외부 DB 연결 테스트 시작\n");
+
+    // 디지털 트윈 외부 DB 연결 정보
+    const digitalTwinConnection = {
+      name: "디지털트윈_DO_DY",
+      description: "디지털 트윈 후판(자재) 재고 정보 데이터베이스 (MariaDB)",
+      dbType: "mysql", // MariaDB는 MySQL 프로토콜 사용
+      host: "1.240.13.83",
+      port: 4307,
+      databaseName: "DO_DY",
+      username: "root",
+      password: "pohangms619!#",
+      sslEnabled: false,
+      isActive: true,
+    };
+
+    console.log("📝 연결 정보:");
+    console.log(`  - 이름: ${digitalTwinConnection.name}`);
+    console.log(`  - DB 타입: ${digitalTwinConnection.dbType}`);
+    console.log(`  - 호스트: ${digitalTwinConnection.host}:${digitalTwinConnection.port}`);
+    console.log(`  - 데이터베이스: ${digitalTwinConnection.databaseName}\n`);
+
+    // 1. 외부 DB 직접 연결 테스트
+    console.log("🔍 외부 DB 직접 연결 테스트 중...");
+    
+    const externalConnection = await mysql.createConnection({
+      host: digitalTwinConnection.host,
+      port: digitalTwinConnection.port,
+      database: digitalTwinConnection.databaseName,
+      user: digitalTwinConnection.username,
+      password: digitalTwinConnection.password,
+      connectTimeout: 10000,
+    });
+
+    console.log("✅ 외부 DB 연결 성공!\n");
+
+    // 2. SELECT 쿼리 실행
+    console.log("📊 WSTKKY 테이블 쿼리 실행 중...\n");
+    
+    const query = `
+      SELECT
+        SKUMKEY   -- 제품번호
+      , SKUDESC   -- 자재명
+      , SKUTHIC   -- 두께
+      , SKUWIDT   -- 폭
+      , SKULENG   -- 길이
+      , SKUWEIG   -- 중량
+      , STOTQTY   -- 수량
+      , SUOMKEY   -- 단위
+      FROM DO_DY.WSTKKY
+      LIMIT 10
+    `;
+
+    const [rows] = await externalConnection.execute(query);
+
+    console.log("✅ 쿼리 실행 성공!\n");
+    console.log(`📦 조회된 데이터: ${Array.isArray(rows) ? rows.length : 0}건\n`);
+
+    if (Array.isArray(rows) && rows.length > 0) {
+      console.log("🔍 샘플 데이터 (첫 3건):\n");
+      rows.slice(0, 3).forEach((row: any, index: number) => {
+        console.log(`[${index + 1}]`);
+        console.log(`  제품번호(SKUMKEY): ${row.SKUMKEY}`);
+        console.log(`  자재명(SKUDESC): ${row.SKUDESC}`);
+        console.log(`  두께(SKUTHIC): ${row.SKUTHIC}`);
+        console.log(`  폭(SKUWIDT): ${row.SKUWIDT}`);
+        console.log(`  길이(SKULENG): ${row.SKULENG}`);
+        console.log(`  중량(SKUWEIG): ${row.SKUWEIG}`);
+        console.log(`  수량(STOTQTY): ${row.STOTQTY}`);
+        console.log(`  단위(SUOMKEY): ${row.SUOMKEY}\n`);
+      });
+
+      // 전체 데이터 JSON 출력
+      console.log("📄 전체 데이터 (JSON):");
+      console.log(JSON.stringify(rows, null, 2));
+      console.log("\n");
+    }
+
+    await externalConnection.end();
+
+    // 3. 내부 DB에 연결 정보 저장
+    console.log("💾 내부 DB에 연결 정보 저장 중...");
+
+    const encryptedPassword = encryption.encrypt(digitalTwinConnection.password);
+
+    // 중복 체크
+    const existingResult = await internalPool.query(
+      "SELECT id FROM flow_external_db_connection WHERE name = $1",
+      [digitalTwinConnection.name]
+    );
+
+    let connectionId: number;
+
+    if (existingResult.rows.length > 0) {
+      connectionId = existingResult.rows[0].id;
+      console.log(`⚠️  이미 존재하는 연결 (ID: ${connectionId})`);
+
+      // 기존 연결 업데이트
+      await internalPool.query(
+        `UPDATE flow_external_db_connection 
+         SET description = $1,
+             db_type = $2,
+             host = $3,
+             port = $4,
+             database_name = $5,
+             username = $6,
+             password_encrypted = $7,
+             ssl_enabled = $8,
+             is_active = $9,
+             updated_at = NOW(),
+             updated_by = 'system'
+         WHERE name = $10`,
+        [
+          digitalTwinConnection.description,
+          digitalTwinConnection.dbType,
+          digitalTwinConnection.host,
+          digitalTwinConnection.port,
+          digitalTwinConnection.databaseName,
+          digitalTwinConnection.username,
+          encryptedPassword,
+          digitalTwinConnection.sslEnabled,
+          digitalTwinConnection.isActive,
+          digitalTwinConnection.name,
+        ]
+      );
+      console.log(`✅ 연결 정보 업데이트 완료`);
+    } else {
+      // 새 연결 추가
+      const result = await internalPool.query(
+        `INSERT INTO flow_external_db_connection (
+          name, 
+          description, 
+          db_type, 
+          host, 
+          port, 
+          database_name, 
+          username, 
+          password_encrypted,
+          ssl_enabled,
+          is_active,
+          created_by
+        ) VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9, $10, 'system')
+        RETURNING id`,
+        [
+          digitalTwinConnection.name,
+          digitalTwinConnection.description,
+          digitalTwinConnection.dbType,
+          digitalTwinConnection.host,
+          digitalTwinConnection.port,
+          digitalTwinConnection.databaseName,
+          digitalTwinConnection.username,
+          encryptedPassword,
+          digitalTwinConnection.sslEnabled,
+          digitalTwinConnection.isActive,
+        ]
+      );
+      connectionId = result.rows[0].id;
+      console.log(`✅ 새 연결 추가 완료 (ID: ${connectionId})`);
+    }
+
+    console.log("\n✅ 모든 테스트 완료!");
+    console.log(`\n📌 연결 ID: ${connectionId}`);
+    console.log("   이 ID를 사용하여 플로우 관리나 제어 관리에서 외부 DB를 연동할 수 있습니다.");
+
+  } catch (error: any) {
+    console.error("\n❌ 오류 발생:", error.message);
+    console.error("상세 정보:", error);
+    throw error;
+  } finally {
+    await internalPool.end();
+  }
+}
+
+// 스크립트 실행
+testDigitalTwinDb()
+  .then(() => {
+    console.log("\n🎉 스크립트 완료");
+    process.exit(0);
+  })
+  .catch((error) => {
+    console.error("\n💥 스크립트 실패:", error);
+    process.exit(1);
+  });
+
+
diff --git a/backend-node/src/app.ts b/backend-node/src/app.ts
index 37936f36..be51e70e 100644
--- a/backend-node/src/app.ts
+++ b/backend-node/src/app.ts
@@ -59,6 +59,7 @@ import bookingRoutes from "./routes/bookingRoutes"; // 예약 요청 관리
 import mapDataRoutes from "./routes/mapDataRoutes"; // 지도 데이터 관리
 import yardLayoutRoutes from "./routes/yardLayoutRoutes"; // 야드 관리 3D
 //import materialRoutes from "./routes/materialRoutes"; // 자재 관리
+import digitalTwinRoutes from "./routes/digitalTwinRoutes"; // 디지털 트윈 (야드 관제)
 import flowRoutes from "./routes/flowRoutes"; // 플로우 관리
 import flowExternalDbConnectionRoutes from "./routes/flowExternalDbConnectionRoutes"; // 플로우 전용 외부 DB 연결
 import workHistoryRoutes from "./routes/workHistoryRoutes"; // 작업 이력 관리
@@ -68,6 +69,8 @@ import departmentRoutes from "./routes/departmentRoutes"; // 부서 관리
 import tableCategoryValueRoutes from "./routes/tableCategoryValueRoutes"; // 카테고리 값 관리
 import codeMergeRoutes from "./routes/codeMergeRoutes"; // 코드 병합
 import numberingRuleRoutes from "./routes/numberingRuleRoutes"; // 채번 규칙 관리
+import entitySearchRoutes from "./routes/entitySearchRoutes"; // 엔티티 검색
+import orderRoutes from "./routes/orderRoutes"; // 수주 관리
 import { BatchSchedulerService } from "./services/batchSchedulerService";
 // import collectionRoutes from "./routes/collectionRoutes"; // 임시 주석
 // import batchRoutes from "./routes/batchRoutes"; // 임시 주석
@@ -221,6 +224,7 @@ app.use("/api/bookings", bookingRoutes); // 예약 요청 관리
 app.use("/api/map-data", mapDataRoutes); // 지도 데이터 조회
 app.use("/api/yard-layouts", yardLayoutRoutes); // 야드 관리 3D
 // app.use("/api/materials", materialRoutes); // 자재 관리 (임시 주석)
+app.use("/api/digital-twin", digitalTwinRoutes); // 디지털 트윈 (야드 관제)
 app.use("/api/flow-external-db", flowExternalDbConnectionRoutes); // 플로우 전용 외부 DB 연결
 app.use("/api/flow", flowRoutes); // 플로우 관리 (마지막에 등록하여 다른 라우트와 충돌 방지)
 app.use("/api/work-history", workHistoryRoutes); // 작업 이력 관리
@@ -230,6 +234,8 @@ app.use("/api/departments", departmentRoutes); // 부서 관리
 app.use("/api/table-categories", tableCategoryValueRoutes); // 카테고리 값 관리
 app.use("/api/code-merge", codeMergeRoutes); // 코드 병합
 app.use("/api/numbering-rules", numberingRuleRoutes); // 채번 규칙 관리
+app.use("/api/entity-search", entitySearchRoutes); // 엔티티 검색
+app.use("/api/orders", orderRoutes); // 수주 관리
 // app.use("/api/collections", collectionRoutes); // 임시 주석
 // app.use("/api/batch", batchRoutes); // 임시 주석
 // app.use('/api/users', userRoutes);
diff --git a/backend-node/src/controllers/digitalTwinDataController.ts b/backend-node/src/controllers/digitalTwinDataController.ts
new file mode 100644
index 00000000..80cb8ccd
--- /dev/null
+++ b/backend-node/src/controllers/digitalTwinDataController.ts
@@ -0,0 +1,403 @@
+import { Request, Response } from "express";
+import { pool, queryOne } from "../database/db";
+import logger from "../utils/logger";
+import { PasswordEncryption } from "../utils/passwordEncryption";
+import { DatabaseConnectorFactory } from "../database/DatabaseConnectorFactory";
+
+// 외부 DB 커넥터를 가져오는 헬퍼 함수
+export async function getExternalDbConnector(connectionId: number) {
+  // 외부 DB 연결 정보 조회
+  const connection = await queryOne<any>(
+    `SELECT * FROM external_db_connections WHERE id = $1`,
+    [connectionId]
+  );
+
+  if (!connection) {
+    throw new Error(`외부 DB 연결 정보를 찾을 수 없습니다. ID: ${connectionId}`);
+  }
+
+  // 패스워드 복호화
+  const decryptedPassword = PasswordEncryption.decrypt(connection.password);
+
+  // DB 연결 설정
+  const config = {
+    host: connection.host,
+    port: connection.port,
+    user: connection.username,
+    password: decryptedPassword,
+    database: connection.database_name,
+  };
+
+  // DB 커넥터 생성
+  return await DatabaseConnectorFactory.createConnector(
+    connection.db_type || "mariadb",
+    config,
+    connectionId
+  );
+}
+
+// 동적 계층 구조 데이터 조회 (범용)
+export const getHierarchyData = async (req: Request, res: Response): Promise<Response> => {
+  try {
+    const { externalDbConnectionId, hierarchyConfig } = req.body;
+
+    if (!externalDbConnectionId || !hierarchyConfig) {
+      return res.status(400).json({
+        success: false,
+        message: "외부 DB 연결 ID와 계층 구조 설정이 필요합니다.",
+      });
+    }
+
+    const connector = await getExternalDbConnector(Number(externalDbConnectionId));
+    const config = JSON.parse(hierarchyConfig);
+
+    const result: any = {
+      warehouse: null,
+      levels: [],
+      materials: [],
+    };
+
+    // 창고 데이터 조회
+    if (config.warehouse) {
+      const warehouseQuery = `SELECT * FROM ${config.warehouse.tableName} LIMIT 100`;
+      const warehouseResult = await connector.executeQuery(warehouseQuery);
+      result.warehouse = warehouseResult.rows;
+    }
+
+    // 각 레벨 데이터 조회
+    if (config.levels && Array.isArray(config.levels)) {
+      for (const level of config.levels) {
+        const levelQuery = `SELECT * FROM ${level.tableName} LIMIT 1000`;
+        const levelResult = await connector.executeQuery(levelQuery);
+        
+        result.levels.push({
+          level: level.level,
+          name: level.name,
+          data: levelResult.rows,
+        });
+      }
+    }
+
+    // 자재 데이터 조회 (개수만)
+    if (config.material) {
+      const materialQuery = `
+        SELECT 
+          ${config.material.locationKeyColumn} as location_key,
+          COUNT(*) as count
+        FROM ${config.material.tableName}
+        GROUP BY ${config.material.locationKeyColumn}
+      `;
+      const materialResult = await connector.executeQuery(materialQuery);
+      result.materials = materialResult.rows;
+    }
+
+    logger.info("동적 계층 구조 데이터 조회", {
+      externalDbConnectionId,
+      warehouseCount: result.warehouse?.length || 0,
+      levelCounts: result.levels.map((l: any) => ({ level: l.level, count: l.data.length })),
+    });
+
+    return res.json({
+      success: true,
+      data: result,
+    });
+  } catch (error: any) {
+    logger.error("동적 계층 구조 데이터 조회 실패", error);
+    return res.status(500).json({
+      success: false,
+      message: "데이터 조회 중 오류가 발생했습니다.",
+      error: error.message,
+    });
+  }
+};
+
+// 특정 레벨의 하위 데이터 조회
+export const getChildrenData = async (req: Request, res: Response): Promise<Response> => {
+  try {
+    const { externalDbConnectionId, hierarchyConfig, parentLevel, parentKey } = req.body;
+
+    if (!externalDbConnectionId || !hierarchyConfig || !parentLevel || !parentKey) {
+      return res.status(400).json({
+        success: false,
+        message: "필수 파라미터가 누락되었습니다.",
+      });
+    }
+
+    const connector = await getExternalDbConnector(Number(externalDbConnectionId));
+    const config = JSON.parse(hierarchyConfig);
+
+    // 다음 레벨 찾기
+    const nextLevel = config.levels?.find((l: any) => l.level === parentLevel + 1);
+
+    if (!nextLevel) {
+      return res.json({
+        success: true,
+        data: [],
+        message: "하위 레벨이 없습니다.",
+      });
+    }
+
+    // 하위 데이터 조회
+    const query = `
+      SELECT * FROM ${nextLevel.tableName}
+      WHERE ${nextLevel.parentKeyColumn} = '${parentKey}'
+      LIMIT 1000
+    `;
+
+    const result = await connector.executeQuery(query);
+
+    logger.info("하위 데이터 조회", {
+      externalDbConnectionId,
+      parentLevel,
+      parentKey,
+      count: result.rows.length,
+    });
+
+    return res.json({
+      success: true,
+      data: result.rows,
+    });
+  } catch (error: any) {
+    logger.error("하위 데이터 조회 실패", error);
+    return res.status(500).json({
+      success: false,
+      message: "하위 데이터 조회 중 오류가 발생했습니다.",
+      error: error.message,
+    });
+  }
+};
+
+// 창고 목록 조회 (사용자 지정 테이블) - 레거시, 호환성 유지
+export const getWarehouses = async (req: Request, res: Response): Promise<Response> => {
+  try {
+    const { externalDbConnectionId, tableName } = req.query;
+
+    if (!externalDbConnectionId) {
+      return res.status(400).json({
+        success: false,
+        message: "외부 DB 연결 ID가 필요합니다.",
+      });
+    }
+
+    if (!tableName) {
+      return res.status(400).json({
+        success: false,
+        message: "테이블명이 필요합니다.",
+      });
+    }
+
+    const connector = await getExternalDbConnector(Number(externalDbConnectionId));
+
+    // 테이블명을 사용하여 모든 컬럼 조회
+    const query = `SELECT * FROM ${tableName} LIMIT 100`;
+
+    const result = await connector.executeQuery(query);
+
+    logger.info("창고 목록 조회", {
+      externalDbConnectionId,
+      tableName,
+      count: result.rows.length,
+      data: result.rows, // 실제 데이터 확인
+    });
+
+    return res.json({
+      success: true,
+      data: result.rows,
+    });
+  } catch (error: any) {
+    logger.error("창고 목록 조회 실패", error);
+    return res.status(500).json({
+      success: false,
+      message: "창고 목록 조회 중 오류가 발생했습니다.",
+      error: error.message,
+    });
+  }
+};
+
+// 구역 목록 조회 (사용자 지정 테이블) - 레거시, 호환성 유지
+export const getAreas = async (req: Request, res: Response): Promise<Response> => {
+  try {
+    const { externalDbConnectionId, warehouseKey, tableName } = req.query;
+
+    if (!externalDbConnectionId || !warehouseKey || !tableName) {
+      return res.status(400).json({
+        success: false,
+        message: "필수 파라미터가 누락되었습니다.",
+      });
+    }
+
+    const connector = await getExternalDbConnector(Number(externalDbConnectionId));
+
+    const query = `
+      SELECT * FROM ${tableName}
+      WHERE WAREKEY = '${warehouseKey}'
+      LIMIT 1000
+    `;
+
+    const result = await connector.executeQuery(query);
+
+    logger.info("구역 목록 조회", {
+      externalDbConnectionId,
+      tableName,
+      warehouseKey,
+      count: result.rows.length,
+    });
+
+    return res.json({
+      success: true,
+      data: result.rows,
+    });
+  } catch (error: any) {
+    logger.error("구역 목록 조회 실패", error);
+    return res.status(500).json({
+      success: false,
+      message: "구역 목록 조회 중 오류가 발생했습니다.",
+      error: error.message,
+    });
+  }
+};
+
+// 위치 목록 조회 (사용자 지정 테이블) - 레거시, 호환성 유지
+export const getLocations = async (req: Request, res: Response): Promise<Response> => {
+  try {
+    const { externalDbConnectionId, areaKey, tableName } = req.query;
+
+    if (!externalDbConnectionId || !areaKey || !tableName) {
+      return res.status(400).json({
+        success: false,
+        message: "필수 파라미터가 누락되었습니다.",
+      });
+    }
+
+    const connector = await getExternalDbConnector(Number(externalDbConnectionId));
+
+    const query = `
+      SELECT * FROM ${tableName}
+      WHERE AREAKEY = '${areaKey}'
+      LIMIT 1000
+    `;
+
+    const result = await connector.executeQuery(query);
+
+    logger.info("위치 목록 조회", {
+      externalDbConnectionId,
+      tableName,
+      areaKey,
+      count: result.rows.length,
+    });
+
+    return res.json({
+      success: true,
+      data: result.rows,
+    });
+  } catch (error: any) {
+    logger.error("위치 목록 조회 실패", error);
+    return res.status(500).json({
+      success: false,
+      message: "위치 목록 조회 중 오류가 발생했습니다.",
+      error: error.message,
+    });
+  }
+};
+
+// 자재 목록 조회 (동적 컬럼 매핑 지원)
+export const getMaterials = async (req: Request, res: Response): Promise<Response> => {
+  try {
+    const { 
+      externalDbConnectionId, 
+      locaKey, 
+      tableName,
+      keyColumn,
+      locationKeyColumn,
+      layerColumn
+    } = req.query;
+
+    if (!externalDbConnectionId || !locaKey || !tableName || !locationKeyColumn) {
+      return res.status(400).json({
+        success: false,
+        message: "필수 파라미터가 누락되었습니다.",
+      });
+    }
+
+    const connector = await getExternalDbConnector(Number(externalDbConnectionId));
+
+    // 동적 쿼리 생성
+    const orderByClause = layerColumn ? `ORDER BY ${layerColumn}` : '';
+    const query = `
+      SELECT * FROM ${tableName}
+      WHERE ${locationKeyColumn} = '${locaKey}'
+      ${orderByClause}
+      LIMIT 1000
+    `;
+
+    logger.info(`자재 조회 쿼리: ${query}`);
+
+    const result = await connector.executeQuery(query);
+
+    logger.info("자재 목록 조회", {
+      externalDbConnectionId,
+      tableName,
+      locaKey,
+      count: result.rows.length,
+    });
+
+    return res.json({
+      success: true,
+      data: result.rows,
+    });
+  } catch (error: any) {
+    logger.error("자재 목록 조회 실패", error);
+    return res.status(500).json({
+      success: false,
+      message: "자재 목록 조회 중 오류가 발생했습니다.",
+      error: error.message,
+    });
+  }
+};
+
+// 자재 개수 조회 (여러 Location 일괄) - 레거시, 호환성 유지
+export const getMaterialCounts = async (req: Request, res: Response): Promise<Response> => {
+  try {
+    const { externalDbConnectionId, locationKeys, tableName } = req.body;
+
+    if (!externalDbConnectionId || !locationKeys || !tableName) {
+      return res.status(400).json({
+        success: false,
+        message: "필수 파라미터가 누락되었습니다.",
+      });
+    }
+
+    const connector = await getExternalDbConnector(Number(externalDbConnectionId));
+
+    const keysString = locationKeys.map((key: string) => `'${key}'`).join(",");
+
+    const query = `
+      SELECT 
+        LOCAKEY as location_key,
+        COUNT(*) as count
+      FROM ${tableName}
+      WHERE LOCAKEY IN (${keysString})
+      GROUP BY LOCAKEY
+    `;
+
+    const result = await connector.executeQuery(query);
+
+    logger.info("자재 개수 조회", {
+      externalDbConnectionId,
+      tableName,
+      locationCount: locationKeys.length,
+    });
+
+    return res.json({
+      success: true,
+      data: result.rows,
+    });
+  } catch (error: any) {
+    logger.error("자재 개수 조회 실패", error);
+    return res.status(500).json({
+      success: false,
+      message: "자재 개수 조회 중 오류가 발생했습니다.",
+      error: error.message,
+    });
+  }
+};
diff --git a/backend-node/src/controllers/digitalTwinLayoutController.ts b/backend-node/src/controllers/digitalTwinLayoutController.ts
new file mode 100644
index 00000000..d7ecbae1
--- /dev/null
+++ b/backend-node/src/controllers/digitalTwinLayoutController.ts
@@ -0,0 +1,450 @@
+import { Response } from "express";
+import { AuthenticatedRequest } from "../types/auth";
+import { pool } from "../database/db";
+import logger from "../utils/logger";
+
+// 레이아웃 목록 조회
+export const getLayouts = async (
+  req: AuthenticatedRequest,
+  res: Response
+): Promise<Response> => {
+  try {
+    const companyCode = req.user?.companyCode;
+    const { externalDbConnectionId, warehouseKey } = req.query;
+
+    let query = `
+      SELECT 
+        l.*,
+        u1.user_name as created_by_name,
+        u2.user_name as updated_by_name,
+        COUNT(o.id) as object_count
+      FROM digital_twin_layout l
+      LEFT JOIN user_info u1 ON l.created_by = u1.user_id
+      LEFT JOIN user_info u2 ON l.updated_by = u2.user_id
+      LEFT JOIN digital_twin_objects o ON l.id = o.layout_id
+      WHERE l.company_code = $1
+    `;
+
+    const params: any[] = [companyCode];
+    let paramIndex = 2;
+
+    if (externalDbConnectionId) {
+      query += ` AND l.external_db_connection_id = $${paramIndex}`;
+      params.push(externalDbConnectionId);
+      paramIndex++;
+    }
+
+    if (warehouseKey) {
+      query += ` AND l.warehouse_key = $${paramIndex}`;
+      params.push(warehouseKey);
+      paramIndex++;
+    }
+
+    query += `
+      GROUP BY l.id, u1.user_name, u2.user_name
+      ORDER BY l.updated_at DESC
+    `;
+
+    const result = await pool.query(query, params);
+
+    logger.info("레이아웃 목록 조회", {
+      companyCode,
+      count: result.rowCount,
+    });
+
+    return res.json({
+      success: true,
+      data: result.rows,
+    });
+  } catch (error: any) {
+    logger.error("레이아웃 목록 조회 실패", error);
+    return res.status(500).json({
+      success: false,
+      message: "레이아웃 목록 조회 중 오류가 발생했습니다.",
+      error: error.message,
+    });
+  }
+};
+
+// 레이아웃 상세 조회 (객체 포함)
+export const getLayoutById = async (
+  req: AuthenticatedRequest,
+  res: Response
+): Promise<Response> => {
+  try {
+    const companyCode = req.user?.companyCode;
+    const { id } = req.params;
+
+    // 레이아웃 기본 정보
+    const layoutQuery = `
+      SELECT l.*
+      FROM digital_twin_layout l
+      WHERE l.id = $1 AND l.company_code = $2
+    `;
+
+    const layoutResult = await pool.query(layoutQuery, [id, companyCode]);
+
+    if (layoutResult.rowCount === 0) {
+      return res.status(404).json({
+        success: false,
+        message: "레이아웃을 찾을 수 없습니다.",
+      });
+    }
+
+    // 배치된 객체들 조회
+    const objectsQuery = `
+      SELECT *
+      FROM digital_twin_objects
+      WHERE layout_id = $1
+      ORDER BY display_order, created_at
+    `;
+
+    const objectsResult = await pool.query(objectsQuery, [id]);
+
+    logger.info("레이아웃 상세 조회", {
+      companyCode,
+      layoutId: id,
+      objectCount: objectsResult.rowCount,
+    });
+
+    return res.json({
+      success: true,
+      data: {
+        layout: layoutResult.rows[0],
+        objects: objectsResult.rows,
+      },
+    });
+  } catch (error: any) {
+    logger.error("레이아웃 상세 조회 실패", error);
+    return res.status(500).json({
+      success: false,
+      message: "레이아웃 조회 중 오류가 발생했습니다.",
+      error: error.message,
+    });
+  }
+};
+
+// 레이아웃 생성
+export const createLayout = async (
+  req: AuthenticatedRequest,
+  res: Response
+): Promise<Response> => {
+  const client = await pool.connect();
+
+  try {
+    const companyCode = req.user?.companyCode;
+    const userId = req.user?.userId;
+    const {
+      externalDbConnectionId,
+      warehouseKey,
+      layoutName,
+      description,
+      hierarchyConfig,
+      objects,
+    } = req.body;
+
+    await client.query("BEGIN");
+
+    // 레이아웃 생성
+    const layoutQuery = `
+      INSERT INTO digital_twin_layout (
+        company_code, external_db_connection_id, warehouse_key,
+        layout_name, description, hierarchy_config, created_by, updated_by
+      )
+      VALUES ($1, $2, $3, $4, $5, $6, $7, $7)
+      RETURNING *
+    `;
+
+    const layoutResult = await client.query(layoutQuery, [
+      companyCode,
+      externalDbConnectionId,
+      warehouseKey,
+      layoutName,
+      description,
+      hierarchyConfig ? JSON.stringify(hierarchyConfig) : null,
+      userId,
+    ]);
+
+    const layoutId = layoutResult.rows[0].id;
+
+    // 객체들 저장
+    if (objects && objects.length > 0) {
+      const objectQuery = `
+        INSERT INTO digital_twin_objects (
+          layout_id, object_type, object_name,
+          position_x, position_y, position_z,
+          size_x, size_y, size_z,
+          rotation, color,
+          area_key, loca_key, loc_type,
+          material_count, material_preview_height,
+          parent_id, display_order, locked,
+          hierarchy_level, parent_key, external_key
+        )
+        VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9, $10, $11, $12, $13, $14, $15, $16, $17, $18, $19, $20, $21, $22)
+      `;
+
+      for (const obj of objects) {
+        await client.query(objectQuery, [
+          layoutId,
+          obj.type,
+          obj.name,
+          obj.position.x,
+          obj.position.y,
+          obj.position.z,
+          obj.size.x,
+          obj.size.y,
+          obj.size.z,
+          obj.rotation || 0,
+          obj.color,
+          obj.areaKey || null,
+          obj.locaKey || null,
+          obj.locType || null,
+          obj.materialCount || 0,
+          obj.materialPreview?.height || null,
+          obj.parentId || null,
+          obj.displayOrder || 0,
+          obj.locked || false,
+          obj.hierarchyLevel || 1,
+          obj.parentKey || null,
+          obj.externalKey || null,
+        ]);
+      }
+    }
+
+    await client.query("COMMIT");
+
+    logger.info("레이아웃 생성", {
+      companyCode,
+      layoutId,
+      objectCount: objects?.length || 0,
+    });
+
+    return res.status(201).json({
+      success: true,
+      data: layoutResult.rows[0],
+    });
+  } catch (error: any) {
+    await client.query("ROLLBACK");
+    logger.error("레이아웃 생성 실패", error);
+    return res.status(500).json({
+      success: false,
+      message: "레이아웃 생성 중 오류가 발생했습니다.",
+      error: error.message,
+    });
+  } finally {
+    client.release();
+  }
+};
+
+// 레이아웃 수정
+export const updateLayout = async (
+  req: AuthenticatedRequest,
+  res: Response
+): Promise<Response> => {
+  const client = await pool.connect();
+
+  try {
+    const companyCode = req.user?.companyCode;
+    const userId = req.user?.userId;
+    const { id } = req.params;
+    const {
+      layoutName,
+      description,
+      hierarchyConfig,
+      externalDbConnectionId,
+      warehouseKey,
+      objects,
+    } = req.body;
+
+    await client.query("BEGIN");
+
+    // 레이아웃 기본 정보 수정
+    const updateLayoutQuery = `
+      UPDATE digital_twin_layout
+      SET layout_name = $1,
+          description = $2,
+          hierarchy_config = $3,
+          external_db_connection_id = $4,
+          warehouse_key = $5,
+          updated_by = $6,
+          updated_at = NOW()
+      WHERE id = $7 AND company_code = $8
+      RETURNING *
+    `;
+
+    const layoutResult = await client.query(updateLayoutQuery, [
+      layoutName,
+      description,
+      hierarchyConfig ? JSON.stringify(hierarchyConfig) : null,
+      externalDbConnectionId || null,
+      warehouseKey || null,
+      userId,
+      id,
+      companyCode,
+    ]);
+
+    if (layoutResult.rowCount === 0) {
+      await client.query("ROLLBACK");
+      return res.status(404).json({
+        success: false,
+        message: "레이아웃을 찾을 수 없습니다.",
+      });
+    }
+
+    // 기존 객체 삭제
+    await client.query(
+      "DELETE FROM digital_twin_objects WHERE layout_id = $1",
+      [id]
+    );
+
+    // 새 객체 저장 (부모-자식 관계 처리)
+    if (objects && objects.length > 0) {
+      const objectQuery = `
+        INSERT INTO digital_twin_objects (
+          layout_id, object_type, object_name,
+          position_x, position_y, position_z,
+          size_x, size_y, size_z,
+          rotation, color,
+          area_key, loca_key, loc_type,
+          material_count, material_preview_height,
+          parent_id, display_order, locked,
+          hierarchy_level, parent_key, external_key
+        )
+        VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9, $10, $11, $12, $13, $14, $15, $16, $17, $18, $19, $20, $21, $22)
+        RETURNING id
+      `;
+
+      // 임시 ID (음수) → 실제 DB ID 매핑
+      const idMapping: { [tempId: number]: number } = {};
+
+      // 1단계: 부모 객체 먼저 저장 (parentId가 없는 것들)
+      for (const obj of objects.filter((o) => !o.parentId)) {
+        const result = await client.query(objectQuery, [
+          id,
+          obj.type,
+          obj.name,
+          obj.position.x,
+          obj.position.y,
+          obj.position.z,
+          obj.size.x,
+          obj.size.y,
+          obj.size.z,
+          obj.rotation || 0,
+          obj.color,
+          obj.areaKey || null,
+          obj.locaKey || null,
+          obj.locType || null,
+          obj.materialCount || 0,
+          obj.materialPreview?.height || null,
+          null, // parent_id
+          obj.displayOrder || 0,
+          obj.locked || false,
+          obj.hierarchyLevel || 1,
+          obj.parentKey || null,
+          obj.externalKey || null,
+        ]);
+
+        // 임시 ID와 실제 DB ID 매핑
+        if (obj.id) {
+          idMapping[obj.id] = result.rows[0].id;
+        }
+      }
+
+      // 2단계: 자식 객체 저장 (parentId가 있는 것들)
+      for (const obj of objects.filter((o) => o.parentId)) {
+        const realParentId = idMapping[obj.parentId!] || null;
+
+        await client.query(objectQuery, [
+          id,
+          obj.type,
+          obj.name,
+          obj.position.x,
+          obj.position.y,
+          obj.position.z,
+          obj.size.x,
+          obj.size.y,
+          obj.size.z,
+          obj.rotation || 0,
+          obj.color,
+          obj.areaKey || null,
+          obj.locaKey || null,
+          obj.locType || null,
+          obj.materialCount || 0,
+          obj.materialPreview?.height || null,
+          realParentId, // 실제 DB ID 사용
+          obj.displayOrder || 0,
+          obj.locked || false,
+          obj.hierarchyLevel || 1,
+          obj.parentKey || null,
+          obj.externalKey || null,
+        ]);
+      }
+    }
+
+    await client.query("COMMIT");
+
+    logger.info("레이아웃 수정", {
+      companyCode,
+      layoutId: id,
+      objectCount: objects?.length || 0,
+    });
+
+    return res.json({
+      success: true,
+      data: layoutResult.rows[0],
+    });
+  } catch (error: any) {
+    await client.query("ROLLBACK");
+    logger.error("레이아웃 수정 실패", error);
+    return res.status(500).json({
+      success: false,
+      message: "레이아웃 수정 중 오류가 발생했습니다.",
+      error: error.message,
+    });
+  } finally {
+    client.release();
+  }
+};
+
+// 레이아웃 삭제
+export const deleteLayout = async (
+  req: AuthenticatedRequest,
+  res: Response
+): Promise<Response> => {
+  try {
+    const companyCode = req.user?.companyCode;
+    const { id } = req.params;
+
+    const query = `
+      DELETE FROM digital_twin_layout
+      WHERE id = $1 AND company_code = $2
+      RETURNING id
+    `;
+
+    const result = await pool.query(query, [id, companyCode]);
+
+    if (result.rowCount === 0) {
+      return res.status(404).json({
+        success: false,
+        message: "레이아웃을 찾을 수 없습니다.",
+      });
+    }
+
+    logger.info("레이아웃 삭제", {
+      companyCode,
+      layoutId: id,
+    });
+
+    return res.json({
+      success: true,
+      message: "레이아웃이 삭제되었습니다.",
+    });
+  } catch (error: any) {
+    logger.error("레이아웃 삭제 실패", error);
+    return res.status(500).json({
+      success: false,
+      message: "레이아웃 삭제 중 오류가 발생했습니다.",
+      error: error.message,
+    });
+  }
+};
diff --git a/backend-node/src/controllers/entitySearchController.ts b/backend-node/src/controllers/entitySearchController.ts
new file mode 100644
index 00000000..880c54fc
--- /dev/null
+++ b/backend-node/src/controllers/entitySearchController.ts
@@ -0,0 +1,122 @@
+import { Response } from "express";
+import { AuthenticatedRequest } from "../types/auth";
+import { getPool } from "../database/db";
+import { logger } from "../utils/logger";
+
+/**
+ * 엔티티 검색 API
+ * GET /api/entity-search/:tableName
+ */
+export async function searchEntity(req: AuthenticatedRequest, res: Response) {
+  try {
+    const { tableName } = req.params;
+    const {
+      searchText = "",
+      searchFields = "",
+      filterCondition = "{}",
+      page = "1",
+      limit = "20",
+    } = req.query;
+
+    // tableName 유효성 검증
+    if (!tableName || tableName === "undefined" || tableName === "null") {
+      logger.warn("엔티티 검색 실패: 테이블명이 없음", { tableName });
+      return res.status(400).json({
+        success: false,
+        message:
+          "테이블명이 지정되지 않았습니다. 컴포넌트 설정에서 sourceTable을 확인해주세요.",
+      });
+    }
+
+    // 멀티테넌시
+    const companyCode = req.user!.companyCode;
+
+    // 검색 필드 파싱
+    const fields = searchFields
+      ? (searchFields as string).split(",").map((f) => f.trim())
+      : [];
+
+    // WHERE 조건 생성
+    const whereConditions: string[] = [];
+    const params: any[] = [];
+    let paramIndex = 1;
+
+    // 멀티테넌시 필터링
+    if (companyCode !== "*") {
+      whereConditions.push(`company_code = $${paramIndex}`);
+      params.push(companyCode);
+      paramIndex++;
+    }
+
+    // 검색 조건
+    if (searchText && fields.length > 0) {
+      const searchConditions = fields.map((field) => {
+        const condition = `${field}::text ILIKE $${paramIndex}`;
+        paramIndex++;
+        return condition;
+      });
+      whereConditions.push(`(${searchConditions.join(" OR ")})`);
+
+      // 검색어 파라미터 추가
+      fields.forEach(() => {
+        params.push(`%${searchText}%`);
+      });
+    }
+
+    // 추가 필터 조건
+    const additionalFilter = JSON.parse(filterCondition as string);
+    for (const [key, value] of Object.entries(additionalFilter)) {
+      whereConditions.push(`${key} = $${paramIndex}`);
+      params.push(value);
+      paramIndex++;
+    }
+
+    // 페이징
+    const offset = (parseInt(page as string) - 1) * parseInt(limit as string);
+    const whereClause =
+      whereConditions.length > 0
+        ? `WHERE ${whereConditions.join(" AND ")}`
+        : "";
+
+    // 쿼리 실행
+    const pool = getPool();
+    const countQuery = `SELECT COUNT(*) FROM ${tableName} ${whereClause}`;
+    const dataQuery = `
+      SELECT * FROM ${tableName} ${whereClause} 
+      ORDER BY id DESC 
+      LIMIT $${paramIndex} OFFSET $${paramIndex + 1}
+    `;
+
+    params.push(parseInt(limit as string));
+    params.push(offset);
+
+    const countResult = await pool.query(
+      countQuery,
+      params.slice(0, params.length - 2)
+    );
+    const dataResult = await pool.query(dataQuery, params);
+
+    logger.info("엔티티 검색 성공", {
+      tableName,
+      searchText,
+      companyCode,
+      rowCount: dataResult.rowCount,
+    });
+
+    res.json({
+      success: true,
+      data: dataResult.rows,
+      pagination: {
+        total: parseInt(countResult.rows[0].count),
+        page: parseInt(page as string),
+        limit: parseInt(limit as string),
+      },
+    });
+  } catch (error: any) {
+    logger.error("엔티티 검색 오류", {
+      error: error.message,
+      stack: error.stack,
+    });
+    res.status(500).json({ success: false, message: error.message });
+  }
+}
diff --git a/backend-node/src/controllers/orderController.ts b/backend-node/src/controllers/orderController.ts
new file mode 100644
index 00000000..e38f2466
--- /dev/null
+++ b/backend-node/src/controllers/orderController.ts
@@ -0,0 +1,238 @@
+import { Response } from "express";
+import { AuthenticatedRequest } from "../types/auth";
+import { getPool } from "../database/db";
+import { logger } from "../utils/logger";
+
+/**
+ * 수주 번호 생성 함수
+ * 형식: ORD + YYMMDD + 4자리 시퀀스
+ * 예: ORD250114001
+ */
+async function generateOrderNumber(companyCode: string): Promise<string> {
+  const pool = getPool();
+  const today = new Date();
+  const year = today.getFullYear().toString().slice(2); // 25
+  const month = String(today.getMonth() + 1).padStart(2, "0"); // 01
+  const day = String(today.getDate()).padStart(2, "0"); // 14
+  const dateStr = `${year}${month}${day}`; // 250114
+
+  // 당일 수주 카운트 조회
+  const countQuery = `
+    SELECT COUNT(*) as count
+    FROM order_mng_master
+    WHERE objid LIKE $1
+      AND writer LIKE $2
+  `;
+
+  const pattern = `ORD${dateStr}%`;
+  const result = await pool.query(countQuery, [pattern, `%${companyCode}%`]);
+  const count = parseInt(result.rows[0]?.count || "0");
+  const seq = count + 1;
+
+  return `ORD${dateStr}${String(seq).padStart(4, "0")}`; // ORD250114001
+}
+
+/**
+ * 수주 등록 API
+ * POST /api/orders
+ */
+export async function createOrder(req: AuthenticatedRequest, res: Response) {
+  const pool = getPool();
+
+  try {
+    const {
+      inputMode, // 입력 방식
+      customerCode, // 거래처 코드
+      deliveryDate, // 납품일
+      items, // 품목 목록
+      memo, // 메모
+    } = req.body;
+
+    // 멀티테넌시
+    const companyCode = req.user!.companyCode;
+    const userId = req.user!.userId;
+
+    // 유효성 검사
+    if (!customerCode) {
+      return res.status(400).json({
+        success: false,
+        message: "거래처 코드는 필수입니다",
+      });
+    }
+
+    if (!items || items.length === 0) {
+      return res.status(400).json({
+        success: false,
+        message: "품목은 최소 1개 이상 필요합니다",
+      });
+    }
+
+    // 수주 번호 생성
+    const orderNo = await generateOrderNumber(companyCode);
+
+    // 전체 금액 계산
+    const totalAmount = items.reduce(
+      (sum: number, item: any) => sum + (item.amount || 0),
+      0
+    );
+
+    // 수주 마스터 생성
+    const masterQuery = `
+      INSERT INTO order_mng_master (
+        objid,
+        partner_objid,
+        final_delivery_date,
+        reason,
+        status,
+        reg_date,
+        writer
+      ) VALUES ($1, $2, $3, $4, $5, NOW(), $6)
+      RETURNING *
+    `;
+
+    const masterResult = await pool.query(masterQuery, [
+      orderNo,
+      customerCode,
+      deliveryDate || null,
+      memo || null,
+      "진행중",
+      `${userId}|${companyCode}`,
+    ]);
+
+    const masterObjid = masterResult.rows[0].objid;
+
+    // 수주 상세 (품목) 생성
+    for (let i = 0; i < items.length; i++) {
+      const item = items[i];
+      const subObjid = `${orderNo}_${i + 1}`;
+
+      const subQuery = `
+        INSERT INTO order_mng_sub (
+          objid,
+          order_mng_master_objid,
+          part_objid,
+          partner_objid,
+          partner_price,
+          partner_qty,
+          delivery_date,
+          status,
+          regdate,
+          writer
+        ) VALUES ($1, $2, $3, $4, $5, $6, $7, $8, NOW(), $9)
+      `;
+
+      await pool.query(subQuery, [
+        subObjid,
+        masterObjid,
+        item.item_code || item.id, // 품목 코드
+        customerCode,
+        item.unit_price || 0,
+        item.quantity || 0,
+        item.delivery_date || deliveryDate || null,
+        "진행중",
+        `${userId}|${companyCode}`,
+      ]);
+    }
+
+    logger.info("수주 등록 성공", {
+      companyCode,
+      orderNo,
+      masterObjid,
+      itemCount: items.length,
+      totalAmount,
+    });
+
+    res.json({
+      success: true,
+      data: {
+        orderNo,
+        masterObjid,
+        itemCount: items.length,
+        totalAmount,
+      },
+      message: "수주가 등록되었습니다",
+    });
+  } catch (error: any) {
+    logger.error("수주 등록 오류", {
+      error: error.message,
+      stack: error.stack,
+    });
+    res.status(500).json({
+      success: false,
+      message: error.message || "수주 등록 중 오류가 발생했습니다",
+    });
+  }
+}
+
+/**
+ * 수주 목록 조회 API
+ * GET /api/orders
+ */
+export async function getOrders(req: AuthenticatedRequest, res: Response) {
+  const pool = getPool();
+
+  try {
+    const { page = "1", limit = "20", searchText = "" } = req.query;
+    const companyCode = req.user!.companyCode;
+
+    const offset = (parseInt(page as string) - 1) * parseInt(limit as string);
+
+    // WHERE 조건
+    const whereConditions: string[] = [];
+    const params: any[] = [];
+    let paramIndex = 1;
+
+    // 멀티테넌시 (writer 필드에 company_code 포함)
+    if (companyCode !== "*") {
+      whereConditions.push(`writer LIKE $${paramIndex}`);
+      params.push(`%${companyCode}%`);
+      paramIndex++;
+    }
+
+    // 검색
+    if (searchText) {
+      whereConditions.push(`objid LIKE $${paramIndex}`);
+      params.push(`%${searchText}%`);
+      paramIndex++;
+    }
+
+    const whereClause =
+      whereConditions.length > 0
+        ? `WHERE ${whereConditions.join(" AND ")}`
+        : "";
+
+    // 카운트 쿼리
+    const countQuery = `SELECT COUNT(*) as count FROM order_mng_master ${whereClause}`;
+    const countResult = await pool.query(countQuery, params);
+    const total = parseInt(countResult.rows[0]?.count || "0");
+
+    // 데이터 쿼리
+    const dataQuery = `
+      SELECT * FROM order_mng_master
+      ${whereClause}
+      ORDER BY reg_date DESC
+      LIMIT $${paramIndex} OFFSET $${paramIndex + 1}
+    `;
+
+    params.push(parseInt(limit as string));
+    params.push(offset);
+
+    const dataResult = await pool.query(dataQuery, params);
+
+    res.json({
+      success: true,
+      data: dataResult.rows,
+      pagination: {
+        total,
+        page: parseInt(page as string),
+        limit: parseInt(limit as string),
+      },
+    });
+  } catch (error: any) {
+    logger.error("수주 목록 조회 오류", { error: error.message });
+    res.status(500).json({
+      success: false,
+      message: error.message,
+    });
+  }
+}
diff --git a/backend-node/src/controllers/screenManagementController.ts b/backend-node/src/controllers/screenManagementController.ts
index dd589fdd..be3a16a3 100644
--- a/backend-node/src/controllers/screenManagementController.ts
+++ b/backend-node/src/controllers/screenManagementController.ts
@@ -23,7 +23,8 @@ export const getScreens = async (req: AuthenticatedRequest, res: Response) => {
     const result = await screenManagementService.getScreensByCompany(
       targetCompanyCode,
       parseInt(page as string),
-      parseInt(size as string)
+      parseInt(size as string),
+      searchTerm as string // 검색어 전달
     );
 
     res.json({
diff --git a/backend-node/src/controllers/tableCategoryValueController.ts b/backend-node/src/controllers/tableCategoryValueController.ts
index 8bb2b0db..c25b4127 100644
--- a/backend-node/src/controllers/tableCategoryValueController.ts
+++ b/backend-node/src/controllers/tableCategoryValueController.ts
@@ -187,6 +187,16 @@ export const deleteCategoryValue = async (req: AuthenticatedRequest, res: Respon
     });
   } catch (error: any) {
     logger.error(`카테고리 값 삭제 실패: ${error.message}`);
+    
+    // 사용 중인 경우 상세 에러 메시지 반환 (400)
+    if (error.message.includes("삭제할 수 없습니다")) {
+      return res.status(400).json({
+        success: false,
+        message: error.message,
+      });
+    }
+    
+    // 기타 에러 (500)
     return res.status(500).json({
       success: false,
       message: error.message || "카테고리 값 삭제 중 오류가 발생했습니다",
diff --git a/backend-node/src/controllers/tableManagementController.ts b/backend-node/src/controllers/tableManagementController.ts
index beade4e6..f552124f 100644
--- a/backend-node/src/controllers/tableManagementController.ts
+++ b/backend-node/src/controllers/tableManagementController.ts
@@ -1604,10 +1604,14 @@ export async function toggleLogTable(
 }
 
 /**
- * 메뉴의 형제 메뉴들이 사용하는 모든 테이블의 카테고리 타입 컬럼 조회
+ * 메뉴의 상위 메뉴들이 설정한 모든 카테고리 타입 컬럼 조회 (계층 구조 상속)
  * 
  * @route GET /api/table-management/menu/:menuObjid/category-columns
- * @description 형제 메뉴들의 화면에서 사용하는 테이블의 input_type='category' 컬럼 조회
+ * @description 현재 메뉴와 상위 메뉴들에서 설정한 category_column_mapping의 모든 카테고리 컬럼 조회
+ * 
+ * 예시:
+ * - 2레벨 메뉴 "고객사관리"에서 discount_type, rounding_type 설정
+ * - 3레벨 메뉴 "고객등록", "고객조회" 등에서도 동일하게 보임 (상속)
  */
 export async function getCategoryColumnsByMenu(
   req: AuthenticatedRequest,
@@ -1627,40 +1631,10 @@ export async function getCategoryColumnsByMenu(
       return;
     }
 
-    // 1. 형제 메뉴 조회
-    const { getSiblingMenuObjids } = await import("../services/menuService");
-    const siblingObjids = await getSiblingMenuObjids(parseInt(menuObjid));
-    
-    logger.info("✅ 형제 메뉴 조회 완료", { siblingObjids });
-
-    // 2. 형제 메뉴들이 사용하는 테이블 조회
     const { getPool } = await import("../database/db");
     const pool = getPool();
-    
-    const tablesQuery = `
-      SELECT DISTINCT sd.table_name
-      FROM screen_menu_assignments sma
-      INNER JOIN screen_definitions sd ON sma.screen_id = sd.screen_id
-      WHERE sma.menu_objid = ANY($1)
-        AND sma.company_code = $2
-        AND sd.table_name IS NOT NULL
-    `;
-    
-    const tablesResult = await pool.query(tablesQuery, [siblingObjids, companyCode]);
-    const tableNames = tablesResult.rows.map((row: any) => row.table_name);
-    
-    logger.info("✅ 형제 메뉴 테이블 조회 완료", { tableNames, count: tableNames.length });
 
-    if (tableNames.length === 0) {
-      res.json({
-        success: true,
-        data: [],
-        message: "형제 메뉴에 연결된 테이블이 없습니다.",
-      });
-      return;
-    }
-
-    // 3. category_column_mapping 테이블 존재 여부 확인
+    // 1. category_column_mapping 테이블 존재 여부 확인
     const tableExistsResult = await pool.query(`
       SELECT EXISTS (
         SELECT FROM information_schema.tables 
@@ -1672,33 +1646,42 @@ export async function getCategoryColumnsByMenu(
     let columnsResult;
 
     if (mappingTableExists) {
-      // 🆕 category_column_mapping을 사용한 필터링
-      logger.info("🔍 category_column_mapping 기반 카테고리 컬럼 조회", { menuObjid, companyCode });
+      // 🆕 category_column_mapping을 사용한 계층 구조 기반 조회
+      logger.info("🔍 category_column_mapping 기반 카테고리 컬럼 조회 (계층 구조 상속)", { menuObjid, companyCode });
       
       // 현재 메뉴와 모든 상위 메뉴의 objid 조회 (재귀)
       const ancestorMenuQuery = `
         WITH RECURSIVE menu_hierarchy AS (
           -- 현재 메뉴
-          SELECT objid, parent_obj_id, menu_type
+          SELECT objid, parent_obj_id, menu_type, menu_name_kor
           FROM menu_info
           WHERE objid = $1
           
           UNION ALL
           
           -- 부모 메뉴 재귀 조회
-          SELECT m.objid, m.parent_obj_id, m.menu_type
+          SELECT m.objid, m.parent_obj_id, m.menu_type, m.menu_name_kor
           FROM menu_info m
           INNER JOIN menu_hierarchy mh ON m.objid = mh.parent_obj_id
           WHERE m.parent_obj_id != 0  -- 최상위 메뉴(parent_obj_id=0) 제외
         )
-        SELECT ARRAY_AGG(objid) as menu_objids
+        SELECT 
+          ARRAY_AGG(objid) as menu_objids,
+          ARRAY_AGG(menu_name_kor) as menu_names
         FROM menu_hierarchy
       `;
       
       const ancestorMenuResult = await pool.query(ancestorMenuQuery, [parseInt(menuObjid)]);
       const ancestorMenuObjids = ancestorMenuResult.rows[0]?.menu_objids || [parseInt(menuObjid)];
+      const ancestorMenuNames = ancestorMenuResult.rows[0]?.menu_names || [];
       
+      logger.info("✅ 상위 메뉴 계층 조회 완료", { 
+        ancestorMenuObjids, 
+        ancestorMenuNames,
+        hierarchyDepth: ancestorMenuObjids.length 
+      });
       
+      // 상위 메뉴들에 설정된 모든 카테고리 컬럼 조회 (테이블 필터링 제거)
       const columnsQuery = `
         SELECT DISTINCT
           ttc.table_name AS "tableName",
@@ -1711,7 +1694,8 @@ export async function getCategoryColumnsByMenu(
             cl.column_label,
             initcap(replace(ccm.logical_column_name, '_', ' '))
           ) AS "columnLabel",
-          ttc.input_type AS "inputType"
+          ttc.input_type AS "inputType",
+          ccm.menu_objid AS "definedAtMenuObjid"
         FROM category_column_mapping ccm
         INNER JOIN table_type_columns ttc 
           ON ccm.table_name = ttc.table_name 
@@ -1721,18 +1705,48 @@ export async function getCategoryColumnsByMenu(
           AND ttc.column_name = cl.column_name
         LEFT JOIN table_labels tl
           ON ttc.table_name = tl.table_name
-        WHERE ccm.table_name = ANY($1)
-          AND ccm.company_code = $2
-          AND ccm.menu_objid = ANY($3)
+        WHERE ccm.company_code = $1
+          AND ccm.menu_objid = ANY($2)
           AND ttc.input_type = 'category'
         ORDER BY ttc.table_name, ccm.logical_column_name
       `;
       
-      columnsResult = await pool.query(columnsQuery, [tableNames, companyCode, ancestorMenuObjids]);
-      logger.info("✅ category_column_mapping 기반 조회 완료", { rowCount: columnsResult.rows.length });
+      columnsResult = await pool.query(columnsQuery, [companyCode, ancestorMenuObjids]);
+      logger.info("✅ category_column_mapping 기반 조회 완료 (계층 구조 상속)", { 
+        rowCount: columnsResult.rows.length,
+        columns: columnsResult.rows.map((r: any) => `${r.tableName}.${r.columnName}`)
+      });
     } else {
-      // 🔄 기존 방식: table_type_columns에서 모든 카테고리 컬럼 조회
-      logger.info("🔍 레거시 방식: table_type_columns 기반 카테고리 컬럼 조회", { tableNames, companyCode });
+      // 🔄 레거시 방식: 형제 메뉴들의 테이블에서 모든 카테고리 컬럼 조회
+      logger.info("🔍 레거시 방식: 형제 메뉴 테이블 기반 카테고리 컬럼 조회", { menuObjid, companyCode });
+      
+      // 형제 메뉴 조회
+      const { getSiblingMenuObjids } = await import("../services/menuService");
+      const siblingObjids = await getSiblingMenuObjids(parseInt(menuObjid));
+      
+      // 형제 메뉴들이 사용하는 테이블 조회
+      const tablesQuery = `
+        SELECT DISTINCT sd.table_name
+        FROM screen_menu_assignments sma
+        INNER JOIN screen_definitions sd ON sma.screen_id = sd.screen_id
+        WHERE sma.menu_objid = ANY($1)
+          AND sma.company_code = $2
+          AND sd.table_name IS NOT NULL
+      `;
+      
+      const tablesResult = await pool.query(tablesQuery, [siblingObjids, companyCode]);
+      const tableNames = tablesResult.rows.map((row: any) => row.table_name);
+      
+      logger.info("✅ 형제 메뉴 테이블 조회 완료", { tableNames, count: tableNames.length });
+
+      if (tableNames.length === 0) {
+        res.json({
+          success: true,
+          data: [],
+          message: "형제 메뉴에 연결된 테이블이 없습니다.",
+        });
+        return;
+      }
       
       const columnsQuery = `
         SELECT 
diff --git a/backend-node/src/routes/dataRoutes.ts b/backend-node/src/routes/dataRoutes.ts
index 5193977a..f87aa5d6 100644
--- a/backend-node/src/routes/dataRoutes.ts
+++ b/backend-node/src/routes/dataRoutes.ts
@@ -14,8 +14,17 @@ router.get(
   authenticateToken,
   async (req: AuthenticatedRequest, res) => {
     try {
-      const { leftTable, rightTable, leftColumn, rightColumn, leftValue, dataFilter } =
-        req.query;
+      const {
+        leftTable,
+        rightTable,
+        leftColumn,
+        rightColumn,
+        leftValue,
+        dataFilter,
+        enableEntityJoin,
+        displayColumns,
+        deduplication,
+      } = req.query;
 
       // 입력값 검증
       if (!leftTable || !rightTable || !leftColumn || !rightColumn) {
@@ -37,6 +46,11 @@ router.get(
         }
       }
 
+      // 🆕 enableEntityJoin 파싱
+      const enableEntityJoinFlag =
+        enableEntityJoin === "true" ||
+        (typeof enableEntityJoin === "boolean" && enableEntityJoin);
+
       // SQL 인젝션 방지를 위한 검증
       const tables = [leftTable as string, rightTable as string];
       const columns = [leftColumn as string, rightColumn as string];
@@ -64,6 +78,35 @@ router.get(
       // 회사 코드 추출 (멀티테넌시 필터링)
       const userCompany = req.user?.companyCode;
 
+      // displayColumns 파싱 (item_info.item_name 등)
+      let parsedDisplayColumns:
+        | Array<{ name: string; label?: string }>
+        | undefined;
+      if (displayColumns) {
+        try {
+          parsedDisplayColumns = JSON.parse(displayColumns as string);
+        } catch (e) {
+          console.error("displayColumns 파싱 실패:", e);
+        }
+      }
+
+      // 🆕 deduplication 파싱
+      let parsedDeduplication:
+        | {
+            enabled: boolean;
+            groupByColumn: string;
+            keepStrategy: "latest" | "earliest" | "base_price" | "current_date";
+            sortColumn?: string;
+          }
+        | undefined;
+      if (deduplication) {
+        try {
+          parsedDeduplication = JSON.parse(deduplication as string);
+        } catch (e) {
+          console.error("deduplication 파싱 실패:", e);
+        }
+      }
+
       console.log(`🔗 조인 데이터 조회:`, {
         leftTable,
         rightTable,
@@ -71,10 +114,13 @@ router.get(
         rightColumn,
         leftValue,
         userCompany,
-        dataFilter: parsedDataFilter, // 🆕 데이터 필터 로그
+        dataFilter: parsedDataFilter,
+        enableEntityJoin: enableEntityJoinFlag,
+        displayColumns: parsedDisplayColumns, // 🆕 표시 컬럼 로그
+        deduplication: parsedDeduplication, // 🆕 중복 제거 로그
       });
 
-      // 조인 데이터 조회 (회사 코드 + 데이터 필터 전달)
+      // 조인 데이터 조회 (회사 코드 + 데이터 필터 + Entity 조인 + 표시 컬럼 + 중복 제거 전달)
       const result = await dataService.getJoinedData(
         leftTable as string,
         rightTable as string,
@@ -82,7 +128,10 @@ router.get(
         rightColumn as string,
         leftValue as string,
         userCompany,
-        parsedDataFilter // 🆕 데이터 필터 전달
+        parsedDataFilter,
+        enableEntityJoinFlag,
+        parsedDisplayColumns, // 🆕 표시 컬럼 전달
+        parsedDeduplication // 🆕 중복 제거 설정 전달
       );
 
       if (!result.success) {
@@ -305,10 +354,38 @@ router.get(
         });
       }
 
-      console.log(`🔍 레코드 상세 조회: ${tableName}/${id}`);
+      const { enableEntityJoin, groupByColumns } = req.query;
+      const enableEntityJoinFlag =
+        enableEntityJoin === "true" ||
+        (typeof enableEntityJoin === "boolean" && enableEntityJoin);
 
-      // 레코드 상세 조회
-      const result = await dataService.getRecordDetail(tableName, id);
+      // groupByColumns 파싱 (JSON 문자열 또는 쉼표 구분)
+      let groupByColumnsArray: string[] = [];
+      if (groupByColumns) {
+        try {
+          if (typeof groupByColumns === "string") {
+            // JSON 형식이면 파싱, 아니면 쉼표로 분리
+            groupByColumnsArray = groupByColumns.startsWith("[")
+              ? JSON.parse(groupByColumns)
+              : groupByColumns.split(",").map((c) => c.trim());
+          }
+        } catch (error) {
+          console.warn("groupByColumns 파싱 실패:", error);
+        }
+      }
+
+      console.log(`🔍 레코드 상세 조회: ${tableName}/${id}`, {
+        enableEntityJoin: enableEntityJoinFlag,
+        groupByColumns: groupByColumnsArray,
+      });
+
+      // 레코드 상세 조회 (Entity Join 옵션 + 그룹핑 옵션 포함)
+      const result = await dataService.getRecordDetail(
+        tableName,
+        id,
+        enableEntityJoinFlag,
+        groupByColumnsArray
+      );
 
       if (!result.success) {
         return res.status(400).json(result);
@@ -338,6 +415,87 @@ router.get(
   }
 );
 
+/**
+ * 그룹화된 데이터 UPSERT API
+ * POST /api/data/upsert-grouped
+ *
+ * 요청 본문:
+ * {
+ *   tableName: string,
+ *   parentKeys: { customer_id: "CUST-0002", item_id: "SLI-2025-0002" },
+ *   records: [ { customer_item_code: "84-44", start_date: "2025-11-18", ... }, ... ]
+ * }
+ */
+router.post(
+  "/upsert-grouped",
+  authenticateToken,
+  async (req: AuthenticatedRequest, res) => {
+    try {
+      const { tableName, parentKeys, records } = req.body;
+
+      // 입력값 검증
+      if (!tableName || !parentKeys || !records || !Array.isArray(records)) {
+        return res.status(400).json({
+          success: false,
+          message:
+            "필수 파라미터가 누락되었습니다 (tableName, parentKeys, records).",
+          error: "MISSING_PARAMETERS",
+        });
+      }
+
+      // 테이블명 검증
+      if (!/^[a-zA-Z_][a-zA-Z0-9_]*$/.test(tableName)) {
+        return res.status(400).json({
+          success: false,
+          message: "유효하지 않은 테이블명입니다.",
+          error: "INVALID_TABLE_NAME",
+        });
+      }
+
+      console.log(`🔄 그룹화된 데이터 UPSERT: ${tableName}`, {
+        parentKeys,
+        recordCount: records.length,
+        userCompany: req.user?.companyCode,
+        userId: req.user?.userId,
+      });
+
+      // UPSERT 수행
+      const result = await dataService.upsertGroupedRecords(
+        tableName,
+        parentKeys,
+        records,
+        req.user?.companyCode,
+        req.user?.userId
+      );
+
+      if (!result.success) {
+        return res.status(400).json(result);
+      }
+
+      console.log(`✅ 그룹화된 데이터 UPSERT 성공: ${tableName}`, {
+        inserted: result.data?.inserted || 0,
+        updated: result.data?.updated || 0,
+        deleted: result.data?.deleted || 0,
+      });
+
+      return res.json({
+        success: true,
+        message: "데이터가 저장되었습니다.",
+        inserted: result.data?.inserted || 0,
+        updated: result.data?.updated || 0,
+        deleted: result.data?.deleted || 0,
+      });
+    } catch (error) {
+      console.error("그룹화된 데이터 UPSERT 오류:", error);
+      return res.status(500).json({
+        success: false,
+        message: "데이터 저장 중 오류가 발생했습니다.",
+        error: error instanceof Error ? error.message : "Unknown error",
+      });
+    }
+  }
+);
+
 /**
  * 레코드 생성 API
  * POST /api/data/{tableName}
@@ -371,16 +529,22 @@ router.post(
 
       // company_code와 company_name 자동 추가 (멀티테넌시)
       const enrichedData = { ...data };
-      
+
       // 테이블에 company_code 컬럼이 있는지 확인하고 자동으로 추가
-      const hasCompanyCode = await dataService.checkColumnExists(tableName, "company_code");
+      const hasCompanyCode = await dataService.checkColumnExists(
+        tableName,
+        "company_code"
+      );
       if (hasCompanyCode && req.user?.companyCode) {
         enrichedData.company_code = req.user.companyCode;
         console.log(`🏢 company_code 자동 추가: ${req.user.companyCode}`);
       }
-      
+
       // 테이블에 company_name 컬럼이 있는지 확인하고 자동으로 추가
-      const hasCompanyName = await dataService.checkColumnExists(tableName, "company_name");
+      const hasCompanyName = await dataService.checkColumnExists(
+        tableName,
+        "company_name"
+      );
       if (hasCompanyName && req.user?.companyName) {
         enrichedData.company_name = req.user.companyName;
         console.log(`🏢 company_name 자동 추가: ${req.user.companyName}`);
@@ -523,6 +687,49 @@ router.post(
   }
 );
 
+/**
+ * 그룹 삭제 API
+ * POST /api/data/:tableName/delete-group
+ */
+router.post(
+  "/:tableName/delete-group",
+  authenticateToken,
+  async (req: AuthenticatedRequest, res) => {
+    try {
+      const { tableName } = req.params;
+      const filterConditions = req.body;
+
+      if (!/^[a-zA-Z_][a-zA-Z0-9_]*$/.test(tableName)) {
+        return res.status(400).json({
+          success: false,
+          message: "유효하지 않은 테이블명입니다.",
+        });
+      }
+
+      console.log(`🗑️ 그룹 삭제:`, { tableName, filterConditions });
+
+      const result = await dataService.deleteGroupRecords(
+        tableName,
+        filterConditions
+      );
+
+      if (!result.success) {
+        return res.status(400).json(result);
+      }
+
+      console.log(`✅ 그룹 삭제: ${result.data?.deleted}개`);
+      return res.json(result);
+    } catch (error: any) {
+      console.error("그룹 삭제 오류:", error);
+      return res.status(500).json({
+        success: false,
+        message: "그룹 삭제 실패",
+        error: error.message,
+      });
+    }
+  }
+);
+
 router.delete(
   "/:tableName/:id",
   authenticateToken,
diff --git a/backend-node/src/routes/digitalTwinRoutes.ts b/backend-node/src/routes/digitalTwinRoutes.ts
new file mode 100644
index 00000000..904096f7
--- /dev/null
+++ b/backend-node/src/routes/digitalTwinRoutes.ts
@@ -0,0 +1,75 @@
+import express from "express";
+import { authenticateToken } from "../middleware/authMiddleware";
+
+// 레이아웃 관리
+import {
+  getLayouts,
+  getLayoutById,
+  createLayout,
+  updateLayout,
+  deleteLayout,
+} from "../controllers/digitalTwinLayoutController";
+
+// 외부 DB 데이터 조회
+import {
+  getHierarchyData,
+  getChildrenData,
+  getWarehouses,
+  getAreas,
+  getLocations,
+  getMaterials,
+  getMaterialCounts,
+} from "../controllers/digitalTwinDataController";
+
+const router = express.Router();
+
+// 모든 라우트에 인증 미들웨어 적용
+router.use(authenticateToken);
+
+// ========== 레이아웃 관리 API ==========
+router.get("/layouts", getLayouts);                    // 레이아웃 목록
+router.get("/layouts/:id", getLayoutById);             // 레이아웃 상세
+router.post("/layouts", createLayout);                 // 레이아웃 생성
+router.put("/layouts/:id", updateLayout);              // 레이아웃 수정
+router.delete("/layouts/:id", deleteLayout);           // 레이아웃 삭제
+
+// ========== 외부 DB 데이터 조회 API ==========
+
+// 동적 계층 구조 API
+router.post("/data/hierarchy", getHierarchyData);      // 전체 계층 데이터 조회
+router.post("/data/children", getChildrenData);        // 특정 부모의 하위 데이터 조회
+
+// 테이블 메타데이터 API
+router.get("/data/tables/:connectionId", async (req, res) => {
+  // 테이블 목록 조회
+  try {
+    const { ExternalDbConnectionService } = await import("../services/externalDbConnectionService");
+    const result = await ExternalDbConnectionService.getTablesFromConnection(Number(req.params.connectionId));
+    return res.json(result);
+  } catch (error: any) {
+    return res.status(500).json({ success: false, error: error.message });
+  }
+});
+
+router.get("/data/table-preview/:connectionId/:tableName", async (req, res) => {
+  // 테이블 미리보기 (10개 레코드)
+  try {
+    const { connectionId, tableName } = req.params;
+    const { getExternalDbConnector } = await import("../controllers/digitalTwinDataController");
+    const connector = await getExternalDbConnector(Number(connectionId));
+    const result = await connector.executeQuery(`SELECT * FROM ${tableName} LIMIT 10`);
+    return res.json({ success: true, data: result.rows });
+  } catch (error: any) {
+    return res.status(500).json({ success: false, error: error.message });
+  }
+});
+
+// 레거시 API (호환성 유지)
+router.get("/data/warehouses", getWarehouses);         // 창고 목록
+router.get("/data/areas", getAreas);                   // Area 목록
+router.get("/data/locations", getLocations);           // Location 목록
+router.get("/data/materials", getMaterials);           // 자재 목록 (특정 Location)
+router.post("/data/material-counts", getMaterialCounts); // 자재 개수 (여러 Location) - POST로 변경
+
+export default router;
+
diff --git a/backend-node/src/routes/entitySearchRoutes.ts b/backend-node/src/routes/entitySearchRoutes.ts
new file mode 100644
index 00000000..7677279a
--- /dev/null
+++ b/backend-node/src/routes/entitySearchRoutes.ts
@@ -0,0 +1,14 @@
+import { Router } from "express";
+import { authenticateToken } from "../middleware/authMiddleware";
+import { searchEntity } from "../controllers/entitySearchController";
+
+const router = Router();
+
+/**
+ * 엔티티 검색 API
+ * GET /api/entity-search/:tableName
+ */
+router.get("/:tableName", authenticateToken, searchEntity);
+
+export default router;
+
diff --git a/backend-node/src/routes/orderRoutes.ts b/backend-node/src/routes/orderRoutes.ts
new file mode 100644
index 00000000..a59b5f43
--- /dev/null
+++ b/backend-node/src/routes/orderRoutes.ts
@@ -0,0 +1,20 @@
+import { Router } from "express";
+import { authenticateToken } from "../middleware/authMiddleware";
+import { createOrder, getOrders } from "../controllers/orderController";
+
+const router = Router();
+
+/**
+ * 수주 등록
+ * POST /api/orders
+ */
+router.post("/", authenticateToken, createOrder);
+
+/**
+ * 수주 목록 조회
+ * GET /api/orders
+ */
+router.get("/", authenticateToken, getOrders);
+
+export default router;
+
diff --git a/backend-node/src/services/dataService.ts b/backend-node/src/services/dataService.ts
index bd7f74e1..fd85248d 100644
--- a/backend-node/src/services/dataService.ts
+++ b/backend-node/src/services/dataService.ts
@@ -14,7 +14,9 @@
  * - 최고 관리자(company_code = "*")만 전체 데이터 조회 가능
  */
 import { query, queryOne } from "../database/db";
+import { pool } from "../database/db"; // 🆕 Entity 조인을 위한 pool import
 import { buildDataFilterWhereClause } from "../utils/dataFilterUtil"; // 🆕 데이터 필터 유틸
+import { v4 as uuidv4 } from "uuid"; // 🆕 UUID 생성
 
 interface GetTableDataParams {
   tableName: string;
@@ -53,6 +55,103 @@ const BLOCKED_TABLES = [
 const TABLE_NAME_REGEX = /^[a-zA-Z_][a-zA-Z0-9_]*$/;
 
 class DataService {
+  /**
+   * 중복 데이터 제거 (메모리 내 처리)
+   */
+  private deduplicateData(
+    data: any[],
+    config: {
+      groupByColumn: string;
+      keepStrategy: "latest" | "earliest" | "base_price" | "current_date";
+      sortColumn?: string;
+    }
+  ): any[] {
+    if (!data || data.length === 0) return data;
+
+    // 그룹별로 데이터 분류
+    const groups: Record<string, any[]> = {};
+    
+    for (const row of data) {
+      const groupKey = row[config.groupByColumn];
+      if (groupKey === undefined || groupKey === null) continue;
+      
+      if (!groups[groupKey]) {
+        groups[groupKey] = [];
+      }
+      groups[groupKey].push(row);
+    }
+
+    // 각 그룹에서 하나의 행만 선택
+    const result: any[] = [];
+    
+    for (const [groupKey, rows] of Object.entries(groups)) {
+      if (rows.length === 0) continue;
+      
+      let selectedRow: any;
+      
+      switch (config.keepStrategy) {
+        case "latest":
+          // 정렬 컬럼 기준 최신 (가장 큰 값)
+          if (config.sortColumn) {
+            rows.sort((a, b) => {
+              const aVal = a[config.sortColumn!];
+              const bVal = b[config.sortColumn!];
+              if (aVal === bVal) return 0;
+              if (aVal > bVal) return -1;
+              return 1;
+            });
+          }
+          selectedRow = rows[0];
+          break;
+          
+        case "earliest":
+          // 정렬 컬럼 기준 최초 (가장 작은 값)
+          if (config.sortColumn) {
+            rows.sort((a, b) => {
+              const aVal = a[config.sortColumn!];
+              const bVal = b[config.sortColumn!];
+              if (aVal === bVal) return 0;
+              if (aVal < bVal) return -1;
+              return 1;
+            });
+          }
+          selectedRow = rows[0];
+          break;
+          
+        case "base_price":
+          // base_price = true인 행 찾기
+          selectedRow = rows.find(row => row.base_price === true) || rows[0];
+          break;
+          
+        case "current_date":
+          // start_date <= CURRENT_DATE <= end_date 조건에 맞는 행
+          const today = new Date();
+          today.setHours(0, 0, 0, 0); // 시간 제거
+          
+          selectedRow = rows.find(row => {
+            const startDate = row.start_date ? new Date(row.start_date) : null;
+            const endDate = row.end_date ? new Date(row.end_date) : null;
+            
+            if (startDate) startDate.setHours(0, 0, 0, 0);
+            if (endDate) endDate.setHours(0, 0, 0, 0);
+            
+            const afterStart = !startDate || today >= startDate;
+            const beforeEnd = !endDate || today <= endDate;
+            
+            return afterStart && beforeEnd;
+          }) || rows[0]; // 조건에 맞는 행이 없으면 첫 번째 행
+          break;
+          
+        default:
+          selectedRow = rows[0];
+      }
+      
+      result.push(selectedRow);
+    }
+    
+    return result;
+  }
+
   /**
    * 테이블 접근 검증 (공통 메서드)
    */
@@ -374,11 +473,13 @@ class DataService {
   }
 
   /**
-   * 레코드 상세 조회
+   * 레코드 상세 조회 (Entity Join 지원 + 그룹핑 기반 다중 레코드 조회)
    */
   async getRecordDetail(
     tableName: string,
-    id: string | number
+    id: string | number,
+    enableEntityJoin: boolean = false,
+    groupByColumns: string[] = []
   ): Promise<ServiceResponse<any>> {
     try {
       // 테이블 접근 검증
@@ -401,6 +502,108 @@ class DataService {
         pkColumn = pkResult[0].attname;
       }
 
+      // 🆕 Entity Join이 활성화된 경우
+      if (enableEntityJoin) {
+        const { EntityJoinService } = await import("./entityJoinService");
+        const entityJoinService = new EntityJoinService();
+
+        // Entity Join 구성 감지
+        const joinConfigs = await entityJoinService.detectEntityJoins(tableName);
+
+        if (joinConfigs.length > 0) {
+          console.log(`✅ Entity Join 감지: ${joinConfigs.length}개`);
+
+          // Entity Join 쿼리 생성 (개별 파라미터로 전달)
+          const { query: joinQuery } = entityJoinService.buildJoinQuery(
+            tableName,
+            joinConfigs,
+            ["*"],
+            `main."${pkColumn}" = $1`  // 🔧 main. 접두사 추가하여 모호성 해결
+          );
+
+          const result = await pool.query(joinQuery, [id]);
+
+          if (result.rows.length === 0) {
+            return {
+              success: false,
+              message: "레코드를 찾을 수 없습니다.",
+              error: "RECORD_NOT_FOUND",
+            };
+          }
+
+          // 🔧 날짜 타입 타임존 문제 해결: Date 객체를 YYYY-MM-DD 문자열로 변환
+          const normalizeDates = (rows: any[]) => {
+            return rows.map(row => {
+              const normalized: any = {};
+              for (const [key, value] of Object.entries(row)) {
+                if (value instanceof Date) {
+                  // Date 객체를 YYYY-MM-DD 형식으로 변환 (타임존 무시)
+                  const year = value.getFullYear();
+                  const month = String(value.getMonth() + 1).padStart(2, '0');
+                  const day = String(value.getDate()).padStart(2, '0');
+                  normalized[key] = `${year}-${month}-${day}`;
+                } else {
+                  normalized[key] = value;
+                }
+              }
+              return normalized;
+            });
+          };
+
+          const normalizedRows = normalizeDates(result.rows);
+          console.log(`✅ Entity Join 데이터 조회 성공 (날짜 정규화됨):`, normalizedRows[0]);
+
+          // 🆕 groupByColumns가 있으면 그룹핑 기반 다중 레코드 조회
+          if (groupByColumns.length > 0) {
+            const baseRecord = result.rows[0];
+            
+            // 그룹핑 컬럼들의 값 추출
+            const groupConditions: string[] = [];
+            const groupValues: any[] = [];
+            let paramIndex = 1;
+            
+            for (const col of groupByColumns) {
+              const value = normalizedRows[0][col];
+              if (value !== undefined && value !== null) {
+                groupConditions.push(`main."${col}" = $${paramIndex}`);
+                groupValues.push(value);
+                paramIndex++;
+              }
+            }
+            
+            if (groupConditions.length > 0) {
+              const groupWhereClause = groupConditions.join(" AND ");
+              
+              console.log(`🔍 그룹핑 조회: ${groupByColumns.join(", ")}`, groupValues);
+              
+              // 그룹핑 기준으로 모든 레코드 조회
+              const { query: groupQuery } = entityJoinService.buildJoinQuery(
+                tableName,
+                joinConfigs,
+                ["*"],
+                groupWhereClause
+              );
+              
+              const groupResult = await pool.query(groupQuery, groupValues);
+              
+              const normalizedGroupRows = normalizeDates(groupResult.rows);
+              console.log(`✅ 그룹 레코드 조회 성공: ${normalizedGroupRows.length}개`);
+              
+              return {
+                success: true,
+                data: normalizedGroupRows, // 🔧 배열로 반환!
+              };
+            }
+          }
+
+          return {
+            success: true,
+            data: normalizedRows[0], // 그룹핑 없으면 단일 레코드
+          };
+        }
+      }
+
+      // 기본 쿼리 (Entity Join 없음)
       const queryText = `SELECT * FROM "${tableName}" WHERE "${pkColumn}" = $1`;
       const result = await query<any>(queryText, [id]);
 
@@ -427,7 +630,7 @@ class DataService {
   }
 
   /**
-   * 조인된 데이터 조회
+   * 조인된 데이터 조회 (🆕 Entity 조인 지원)
    */
   async getJoinedData(
     leftTable: string,
@@ -436,7 +639,15 @@ class DataService {
     rightColumn: string,
     leftValue?: string | number,
     userCompany?: string,
-    dataFilter?: any // 🆕 데이터 필터
+    dataFilter?: any, // 🆕 데이터 필터
+    enableEntityJoin?: boolean, // 🆕 Entity 조인 활성화
+    displayColumns?: Array<{ name: string; label?: string }>, // 🆕 표시 컬럼 (item_info.item_name 등)
+    deduplication?: { // 🆕 중복 제거 설정
+      enabled: boolean;
+      groupByColumn: string;
+      keepStrategy: "latest" | "earliest" | "base_price" | "current_date";
+      sortColumn?: string;
+    }
   ): Promise<ServiceResponse<any[]>> {
     try {
       // 왼쪽 테이블 접근 검증
@@ -451,6 +662,162 @@ class DataService {
         return rightValidation.error!;
       }
 
+      // 🆕 Entity 조인이 활성화된 경우 entityJoinService 사용
+      if (enableEntityJoin) {
+        try {
+          const { entityJoinService } = await import("./entityJoinService");
+          const joinConfigs = await entityJoinService.detectEntityJoins(rightTable);
+
+          // 🆕 displayColumns에서 추가 조인 필요한 컬럼 감지 (item_info.item_name 등)
+          if (displayColumns && Array.isArray(displayColumns)) {
+            // 테이블별로 요청된 컬럼들을 그룹핑
+            const tableColumns: Record<string, Set<string>> = {};
+            
+            for (const col of displayColumns) {
+              if (col.name && col.name.includes('.')) {
+                const [refTable, refColumn] = col.name.split('.');
+                if (!tableColumns[refTable]) {
+                  tableColumns[refTable] = new Set();
+                }
+                tableColumns[refTable].add(refColumn);
+              }
+            }
+            
+            // 각 테이블별로 처리
+            for (const [refTable, refColumns] of Object.entries(tableColumns)) {
+              // 이미 조인 설정에 있는지 확인
+              const existingJoins = joinConfigs.filter(jc => jc.referenceTable === refTable);
+              
+              if (existingJoins.length > 0) {
+                // 기존 조인이 있으면, 각 컬럼을 개별 조인으로 분리
+                for (const refColumn of refColumns) {
+                  // 이미 해당 컬럼을 표시하는 조인이 있는지 확인
+                  const existingJoin = existingJoins.find(
+                    jc => jc.displayColumns.length === 1 && jc.displayColumns[0] === refColumn
+                  );
+                  
+                  if (!existingJoin) {
+                    // 없으면 새 조인 설정 복제하여 추가
+                    const baseJoin = existingJoins[0];
+                    const newJoin = {
+                      ...baseJoin,
+                      displayColumns: [refColumn],
+                      aliasColumn: `${baseJoin.sourceColumn}_${refColumn}`, // 고유한 별칭 생성 (예: item_id_size)
+                      // ⚠️ 중요: referenceTable과 referenceColumn을 명시하여 JOIN된 테이블에서 가져옴
+                      referenceTable: refTable,
+                      referenceColumn: baseJoin.referenceColumn, // item_number 등
+                    };
+                    joinConfigs.push(newJoin);
+                    console.log(`📌 추가 표시 컬럼: ${refTable}.${refColumn} (새 조인 생성, alias: ${newJoin.aliasColumn})`);
+                  }
+                }
+              } else {
+                console.warn(`⚠️ 조인 설정 없음: ${refTable}`);
+              }
+            }
+          }
+
+          if (joinConfigs.length > 0) {
+            console.log(`🔗 조인 모드에서 Entity 조인 적용: ${joinConfigs.length}개 설정`);
+
+            // WHERE 조건 생성
+            const whereConditions: string[] = [];
+            const values: any[] = [];
+            let paramIndex = 1;
+
+            // 좌측 테이블 조인 조건 (leftValue로 필터링)
+            // rightColumn을 직접 사용 (customer_item_mapping.customer_id = 'CUST-0002')
+            if (leftValue !== undefined && leftValue !== null) {
+              whereConditions.push(`main."${rightColumn}" = $${paramIndex}`);
+              values.push(leftValue);
+              paramIndex++;
+            }
+
+            // 회사별 필터링
+            if (userCompany && userCompany !== "*") {
+              const hasCompanyCode = await this.checkColumnExists(rightTable, "company_code");
+              if (hasCompanyCode) {
+                whereConditions.push(`main.company_code = $${paramIndex}`);
+                values.push(userCompany);
+                paramIndex++;
+              }
+            }
+
+            // 데이터 필터 적용 (buildDataFilterWhereClause 사용)
+            if (dataFilter && dataFilter.enabled && dataFilter.filters && dataFilter.filters.length > 0) {
+              const { buildDataFilterWhereClause } = await import("../utils/dataFilterUtil");
+              const filterResult = buildDataFilterWhereClause(dataFilter, "main", paramIndex);
+              if (filterResult.whereClause) {
+                whereConditions.push(filterResult.whereClause);
+                values.push(...filterResult.params);
+                paramIndex += filterResult.params.length;
+                console.log(`🔍 Entity 조인에 데이터 필터 적용 (${rightTable}):`, filterResult.whereClause);
+                console.log(`📊 필터 파라미터:`, filterResult.params);
+              }
+            }
+
+            const whereClause = whereConditions.length > 0 ? whereConditions.join(" AND ") : "";
+
+            // Entity 조인 쿼리 빌드
+            // buildJoinQuery가 자동으로 main.* 처리하므로 ["*"]만 전달
+            const selectColumns = ["*"];
+
+            const { query: finalQuery, aliasMap } = entityJoinService.buildJoinQuery(
+              rightTable,
+              joinConfigs,
+              selectColumns,
+              whereClause,
+              "",
+              undefined,
+              undefined
+            );
+
+            console.log(`🔍 Entity 조인 쿼리 실행 (전체):`, finalQuery);
+            console.log(`🔍 파라미터:`, values);
+
+            const result = await pool.query(finalQuery, values);
+            
+            // 🔧 날짜 타입 타임존 문제 해결
+            const normalizeDates = (rows: any[]) => {
+              return rows.map(row => {
+                const normalized: any = {};
+                for (const [key, value] of Object.entries(row)) {
+                  if (value instanceof Date) {
+                    const year = value.getFullYear();
+                    const month = String(value.getMonth() + 1).padStart(2, '0');
+                    const day = String(value.getDate()).padStart(2, '0');
+                    normalized[key] = `${year}-${month}-${day}`;
+                  } else {
+                    normalized[key] = value;
+                  }
+                }
+                return normalized;
+              });
+            };
+            
+            const normalizedRows = normalizeDates(result.rows);
+            console.log(`✅ Entity 조인 성공! 반환된 데이터 개수: ${normalizedRows.length}개 (날짜 정규화됨)`);
+            
+            // 🆕 중복 제거 처리
+            let finalData = normalizedRows;
+            if (deduplication?.enabled && deduplication.groupByColumn) {
+              console.log(`🔄 중복 제거 시작: 기준 컬럼 = ${deduplication.groupByColumn}, 전략 = ${deduplication.keepStrategy}`);
+              finalData = this.deduplicateData(normalizedRows, deduplication);
+              console.log(`✅ 중복 제거 완료: ${normalizedRows.length}개 → ${finalData.length}개`);
+            }
+            
+            return {
+              success: true,
+              data: finalData,
+            };
+          }
+        } catch (error) {
+          console.error("Entity 조인 처리 실패, 기본 조인으로 폴백:", error);
+          // Entity 조인 실패 시 기본 조인으로 폴백
+        }
+      }
+
+      // 기본 조인 쿼리 (Entity 조인 미사용 또는 실패 시)
       let queryText = `
         SELECT DISTINCT r.* 
         FROM "${rightTable}" r
@@ -501,9 +868,17 @@ class DataService {
 
       const result = await query<any>(queryText, values);
 
+      // 🆕 중복 제거 처리
+      let finalData = result;
+      if (deduplication?.enabled && deduplication.groupByColumn) {
+        console.log(`🔄 중복 제거 시작: 기준 컬럼 = ${deduplication.groupByColumn}, 전략 = ${deduplication.keepStrategy}`);
+        finalData = this.deduplicateData(result, deduplication);
+        console.log(`✅ 중복 제거 완료: ${result.length}개 → ${finalData.length}개`);
+      }
+
       return {
         success: true,
-        data: result,
+        data: finalData,
       };
     } catch (error) {
       console.error(
@@ -728,6 +1103,290 @@ class DataService {
       };
     }
   }
+
+  /**
+   * 조건에 맞는 모든 레코드 삭제 (그룹 삭제)
+   */
+  async deleteGroupRecords(
+    tableName: string,
+    filterConditions: Record<string, any>
+  ): Promise<ServiceResponse<{ deleted: number }>> {
+    try {
+      const validation = await this.validateTableAccess(tableName);
+      if (!validation.valid) {
+        return validation.error!;
+      }
+
+      const whereConditions: string[] = [];
+      const whereValues: any[] = [];
+      let paramIndex = 1;
+
+      for (const [key, value] of Object.entries(filterConditions)) {
+        whereConditions.push(`"${key}" = $${paramIndex}`);
+        whereValues.push(value);
+        paramIndex++;
+      }
+
+      if (whereConditions.length === 0) {
+        return { success: false, message: "삭제 조건이 없습니다.", error: "NO_CONDITIONS" };
+      }
+
+      const whereClause = whereConditions.join(" AND ");
+      const deleteQuery = `DELETE FROM "${tableName}" WHERE ${whereClause} RETURNING *`;
+
+      console.log(`🗑️ 그룹 삭제:`, { tableName, conditions: filterConditions });
+
+      const result = await pool.query(deleteQuery, whereValues);
+
+      console.log(`✅ 그룹 삭제 성공: ${result.rowCount}개`);
+
+      return { success: true, data: { deleted: result.rowCount || 0 } };
+    } catch (error) {
+      console.error("그룹 삭제 오류:", error);
+      return {
+        success: false,
+        message: "그룹 삭제 실패",
+        error: error instanceof Error ? error.message : "Unknown error",
+      };
+    }
+  }
+
+  /**
+   * 그룹화된 데이터 UPSERT
+   * - 부모 키(예: customer_id, item_id)와 레코드 배열을 받아
+   * - 기존 DB의 레코드들과 비교하여 INSERT/UPDATE/DELETE 수행
+   * - 각 레코드의 모든 필드 조합을 고유 키로 사용
+   */
+  async upsertGroupedRecords(
+    tableName: string,
+    parentKeys: Record<string, any>,
+    records: Array<Record<string, any>>,
+    userCompany?: string,
+    userId?: string
+  ): Promise<ServiceResponse<{ inserted: number; updated: number; deleted: number }>> {
+    try {
+      // 테이블 접근 권한 검증
+      const validation = await this.validateTableAccess(tableName);
+      if (!validation.valid) {
+        return validation.error!;
+      }
+
+      // Primary Key 감지
+      const pkColumns = await this.getPrimaryKeyColumns(tableName);
+      if (!pkColumns || pkColumns.length === 0) {
+        return {
+          success: false,
+          message: `테이블 '${tableName}'의 Primary Key를 찾을 수 없습니다.`,
+          error: "PRIMARY_KEY_NOT_FOUND",
+        };
+      }
+      const pkColumn = pkColumns[0]; // 첫 번째 PK 사용
+
+      console.log(`🔍 UPSERT 시작: ${tableName}`, {
+        parentKeys,
+        newRecordsCount: records.length,
+        primaryKey: pkColumn,
+      });
+
+      // 1. 기존 DB 레코드 조회 (parentKeys 기준)
+      const whereConditions: string[] = [];
+      const whereValues: any[] = [];
+      let paramIndex = 1;
+
+      for (const [key, value] of Object.entries(parentKeys)) {
+        whereConditions.push(`"${key}" = $${paramIndex}`);
+        whereValues.push(value);
+        paramIndex++;
+      }
+
+      const whereClause = whereConditions.join(" AND ");
+      const selectQuery = `SELECT * FROM "${tableName}" WHERE ${whereClause}`;
+      
+      console.log(`📋 기존 레코드 조회:`, { query: selectQuery, values: whereValues });
+      
+      const existingRecords = await pool.query(selectQuery, whereValues);
+      
+      console.log(`✅ 기존 레코드: ${existingRecords.rows.length}개`);
+
+      // 2. 새 레코드와 기존 레코드 비교
+      let inserted = 0;
+      let updated = 0;
+      let deleted = 0;
+
+      // 날짜 필드를 YYYY-MM-DD 형식으로 변환하는 헬퍼 함수
+      const normalizeDateValue = (value: any): any => {
+        if (value == null) return value;
+        
+        // ISO 날짜 문자열 감지 (YYYY-MM-DDTHH:mm:ss.sssZ)
+        if (typeof value === 'string' && /^\d{4}-\d{2}-\d{2}T/.test(value)) {
+          return value.split('T')[0]; // YYYY-MM-DD 만 추출
+        }
+        
+        return value;
+      };
+
+      // 새 레코드 처리 (INSERT or UPDATE)
+      for (const newRecord of records) {
+        console.log(`🔍 처리할 새 레코드:`, newRecord);
+        
+        // 날짜 필드 정규화
+        const normalizedRecord: Record<string, any> = {};
+        for (const [key, value] of Object.entries(newRecord)) {
+          normalizedRecord[key] = normalizeDateValue(value);
+        }
+        
+        console.log(`🔄 정규화된 레코드:`, normalizedRecord);
+        
+        // 전체 레코드 데이터 (parentKeys + normalizedRecord)
+        const fullRecord = { ...parentKeys, ...normalizedRecord };
+
+        // 고유 키: parentKeys 제외한 나머지 필드들
+        const uniqueFields = Object.keys(normalizedRecord);
+        
+        console.log(`🔑 고유 필드들:`, uniqueFields);
+        
+        // 기존 레코드에서 일치하는 것 찾기
+        const existingRecord = existingRecords.rows.find((existing) => {
+          return uniqueFields.every((field) => {
+            const existingValue = existing[field];
+            const newValue = normalizedRecord[field];
+            
+            // null/undefined 처리
+            if (existingValue == null && newValue == null) return true;
+            if (existingValue == null || newValue == null) return false;
+            
+            // Date 타입 처리
+            if (existingValue instanceof Date && typeof newValue === 'string') {
+              return existingValue.toISOString().split('T')[0] === newValue.split('T')[0];
+            }
+            
+            // 문자열 비교
+            return String(existingValue) === String(newValue);
+          });
+        });
+
+        if (existingRecord) {
+          // UPDATE: 기존 레코드가 있으면 업데이트
+          const updateFields: string[] = [];
+          const updateValues: any[] = [];
+          let updateParamIndex = 1;
+
+          for (const [key, value] of Object.entries(fullRecord)) {
+            if (key !== pkColumn) { // Primary Key는 업데이트하지 않음
+              updateFields.push(`"${key}" = $${updateParamIndex}`);
+              updateValues.push(value);
+              updateParamIndex++;
+            }
+          }
+
+          updateValues.push(existingRecord[pkColumn]); // WHERE 조건용
+          const updateQuery = `
+            UPDATE "${tableName}"
+            SET ${updateFields.join(", ")}, updated_date = NOW()
+            WHERE "${pkColumn}" = $${updateParamIndex}
+          `;
+
+          await pool.query(updateQuery, updateValues);
+          updated++;
+          
+          console.log(`✏️ UPDATE: ${pkColumn} = ${existingRecord[pkColumn]}`);
+        } else {
+          // INSERT: 기존 레코드가 없으면 삽입
+          
+          // 🆕 자동 필드 추가 (company_code, writer, created_date, updated_date, id)
+          const recordWithMeta: Record<string, any> = {
+            ...fullRecord,
+            id: uuidv4(), // 새 ID 생성
+            created_date: "NOW()",
+            updated_date: "NOW()",
+          };
+          
+          // company_code가 없으면 userCompany 사용 (단, userCompany가 "*"가 아닐 때만)
+          if (!recordWithMeta.company_code && userCompany && userCompany !== "*") {
+            recordWithMeta.company_code = userCompany;
+          }
+          
+          // writer가 없으면 userId 사용
+          if (!recordWithMeta.writer && userId) {
+            recordWithMeta.writer = userId;
+          }
+          
+          const insertFields = Object.keys(recordWithMeta).filter(key => 
+            recordWithMeta[key] !== "NOW()"
+          );
+          const insertPlaceholders: string[] = [];
+          const insertValues: any[] = [];
+          let insertParamIndex = 1;
+          
+          for (const field of Object.keys(recordWithMeta)) {
+            if (recordWithMeta[field] === "NOW()") {
+              insertPlaceholders.push("NOW()");
+            } else {
+              insertPlaceholders.push(`$${insertParamIndex}`);
+              insertValues.push(recordWithMeta[field]);
+              insertParamIndex++;
+            }
+          }
+
+          const insertQuery = `
+            INSERT INTO "${tableName}" (${Object.keys(recordWithMeta).map(f => `"${f}"`).join(", ")})
+            VALUES (${insertPlaceholders.join(", ")})
+          `;
+
+          console.log(`➕ INSERT 쿼리:`, { query: insertQuery, values: insertValues });
+
+          await pool.query(insertQuery, insertValues);
+          inserted++;
+          
+          console.log(`➕ INSERT: 새 레코드`);
+        }
+      }
+
+      // 3. 삭제할 레코드 찾기 (기존 레코드 중 새 레코드에 없는 것)
+      for (const existingRecord of existingRecords.rows) {
+        const uniqueFields = Object.keys(records[0] || {});
+        
+        const stillExists = records.some((newRecord) => {
+          return uniqueFields.every((field) => {
+            const existingValue = existingRecord[field];
+            const newValue = newRecord[field];
+            
+            if (existingValue == null && newValue == null) return true;
+            if (existingValue == null || newValue == null) return false;
+            
+            if (existingValue instanceof Date && typeof newValue === 'string') {
+              return existingValue.toISOString().split('T')[0] === newValue.split('T')[0];
+            }
+            
+            return String(existingValue) === String(newValue);
+          });
+        });
+
+        if (!stillExists) {
+          // DELETE: 새 레코드에 없으면 삭제
+          const deleteQuery = `DELETE FROM "${tableName}" WHERE "${pkColumn}" = $1`;
+          await pool.query(deleteQuery, [existingRecord[pkColumn]]);
+          deleted++;
+          
+          console.log(`🗑️ DELETE: ${pkColumn} = ${existingRecord[pkColumn]}`);
+        }
+      }
+
+      console.log(`✅ UPSERT 완료:`, { inserted, updated, deleted });
+
+      return {
+        success: true,
+        data: { inserted, updated, deleted },
+      };
+    } catch (error) {
+      console.error(`UPSERT 오류 (${tableName}):`, error);
+      return {
+        success: false,
+        message: "데이터 저장 중 오류가 발생했습니다.",
+        error: error instanceof Error ? error.message : "Unknown error",
+      };
+    }
+  }
 }
 
 export const dataService = new DataService();
diff --git a/backend-node/src/services/entityJoinService.ts b/backend-node/src/services/entityJoinService.ts
index fef50914..a8f6c482 100644
--- a/backend-node/src/services/entityJoinService.ts
+++ b/backend-node/src/services/entityJoinService.ts
@@ -81,18 +81,18 @@ export class EntityJoinService {
         let referenceColumn = column.reference_column;
         let displayColumn = column.display_column;
 
-                if (column.input_type === 'category') {
-                  // 카테고리 타입: reference 정보가 비어있어도 자동 설정
-                  referenceTable = referenceTable || 'table_column_category_values';
-                  referenceColumn = referenceColumn || 'value_code';
-                  displayColumn = displayColumn || 'value_label';
-                  
-                  logger.info(`🏷️ 카테고리 타입 자동 설정: ${column.column_name}`, {
-                    referenceTable,
-                    referenceColumn,
-                    displayColumn,
-                  });
-                }
+        if (column.input_type === "category") {
+          // 카테고리 타입: reference 정보가 비어있어도 자동 설정
+          referenceTable = referenceTable || "table_column_category_values";
+          referenceColumn = referenceColumn || "value_code";
+          displayColumn = displayColumn || "value_label";
+
+          logger.info(`🏷️ 카테고리 타입 자동 설정: ${column.column_name}`, {
+            referenceTable,
+            referenceColumn,
+            displayColumn,
+          });
+        }
 
         logger.info(`🔍 Entity 컬럼 상세 정보:`, {
           column_name: column.column_name,
@@ -134,23 +134,32 @@ export class EntityJoinService {
             `🔧 기존 display_column 사용: ${column.column_name} → ${displayColumn}`
           );
         } else {
-          // display_column이 "none"이거나 없는 경우 기본 표시 컬럼 설정
-          let defaultDisplayColumn = referenceColumn;
-          if (referenceTable === "dept_info") {
-            defaultDisplayColumn = "dept_name";
-          } else if (referenceTable === "company_info") {
-            defaultDisplayColumn = "company_name";
-          } else if (referenceTable === "user_info") {
-            defaultDisplayColumn = "user_name";
-          } else if (referenceTable === "category_values") {
-            defaultDisplayColumn = "category_name";
-          }
+          // display_column이 "none"이거나 없는 경우 참조 테이블의 모든 컬럼 가져오기
+          logger.info(`🔍 ${referenceTable}의 모든 컬럼 조회 중...`);
 
-          displayColumns = [defaultDisplayColumn];
-          logger.info(
-            `🔧 Entity 조인 기본 표시 컬럼 설정: ${column.column_name} → ${defaultDisplayColumn} (${referenceTable})`
+          // 참조 테이블의 모든 컬럼 이름 가져오기
+          const tableColumnsResult = await query<{ column_name: string }>(
+            `SELECT column_name 
+             FROM information_schema.columns 
+             WHERE table_name = $1 
+             AND table_schema = 'public'
+             ORDER BY ordinal_position`,
+            [referenceTable]
           );
-          logger.info(`🔍 생성된 displayColumns 배열:`, displayColumns);
+
+          if (tableColumnsResult.length > 0) {
+            displayColumns = tableColumnsResult.map((col) => col.column_name);
+            logger.info(
+              `✅ ${referenceTable}의 모든 컬럼 자동 포함 (${displayColumns.length}개):`,
+              displayColumns.join(", ")
+            );
+          } else {
+            // 테이블 컬럼을 못 찾으면 기본값 사용
+            displayColumns = [referenceColumn];
+            logger.warn(
+              `⚠️ ${referenceTable}의 컬럼 조회 실패, 기본값 사용: ${referenceColumn}`
+            );
+          }
         }
 
         // 별칭 컬럼명 생성 (writer -> writer_name)
@@ -200,6 +209,25 @@ export class EntityJoinService {
     }
   }
 
+  /**
+   * 날짜 컬럼을 YYYY-MM-DD 형식으로 변환하는 SQL 표현식
+   */
+  private formatDateColumn(
+    tableAlias: string,
+    columnName: string,
+    dataType?: string
+  ): string {
+    // date, timestamp 타입이면 TO_CHAR로 변환
+    if (
+      dataType &&
+      (dataType.includes("date") || dataType.includes("timestamp"))
+    ) {
+      return `TO_CHAR(${tableAlias}.${columnName}, 'YYYY-MM-DD')`;
+    }
+    // 기본은 TEXT 캐스팅
+    return `${tableAlias}.${columnName}::TEXT`;
+  }
+
   /**
    * Entity 조인이 포함된 SQL 쿼리 생성
    */
@@ -210,13 +238,30 @@ export class EntityJoinService {
     whereClause: string = "",
     orderBy: string = "",
     limit?: number,
-    offset?: number
+    offset?: number,
+    columnTypes?: Map<string, string> // 컬럼명 → 데이터 타입 매핑
   ): { query: string; aliasMap: Map<string, string> } {
     try {
-      // 기본 SELECT 컬럼들 (TEXT로 캐스팅하여 record 타입 오류 방지)
-      const baseColumns = selectColumns
-        .map((col) => `main.${col}::TEXT AS ${col}`)
-        .join(", ");
+      // 기본 SELECT 컬럼들 (날짜는 YYYY-MM-DD 형식, 나머지는 TEXT 캐스팅)
+      // 🔧 "*"는 전체 조회하되, 날짜 타입 타임존 문제를 피하기 위해
+      // jsonb_build_object를 사용하여 명시적으로 변환
+      let baseColumns: string;
+      if (selectColumns.length === 1 && selectColumns[0] === "*") {
+        // main.* 사용 시 날짜 타입 필드만 TO_CHAR로 변환
+        // PostgreSQL의 날짜 → 타임스탬프 자동 변환으로 인한 타임존 문제 방지
+        baseColumns = `main.*`;
+        logger.info(
+          `⚠️ [buildJoinQuery] main.* 사용 - 날짜 타임존 변환 주의 필요`
+        );
+      } else {
+        baseColumns = selectColumns
+          .map((col) => {
+            const dataType = columnTypes?.get(col);
+            const formattedCol = this.formatDateColumn("main", col, dataType);
+            return `${formattedCol} AS ${col}`;
+          })
+          .join(", ");
+      }
 
       // Entity 조인 컬럼들 (COALESCE로 NULL을 빈 문자열로 처리)
       // 별칭 매핑 생성 (JOIN 절과 동일한 로직)
@@ -255,7 +300,9 @@ export class EntityJoinService {
         // 같은 테이블이라도 sourceColumn이 다르면 별도 별칭 생성 (table_column_category_values 대응)
         const aliasKey = `${config.referenceTable}:${config.sourceColumn}`;
         aliasMap.set(aliasKey, alias);
-        logger.info(`🔧 별칭 생성: ${config.referenceTable}.${config.sourceColumn} → ${alias}`);
+        logger.info(
+          `🔧 별칭 생성: ${config.referenceTable}.${config.sourceColumn} → ${alias}`
+        );
       });
 
       const joinColumns = joinConfigs
@@ -266,78 +313,82 @@ export class EntityJoinService {
             config.displayColumn,
           ];
           const separator = config.separator || " - ";
-          
+
           // 결과 컬럼 배열 (aliasColumn + _label 필드)
           const resultColumns: string[] = [];
 
           if (displayColumns.length === 0 || !displayColumns[0]) {
             // displayColumns가 빈 배열이거나 첫 번째 값이 null/undefined인 경우
             // 조인 테이블의 referenceColumn을 기본값으로 사용
-            resultColumns.push(`COALESCE(${alias}.${config.referenceColumn}::TEXT, '') AS ${config.aliasColumn}`);
+            resultColumns.push(
+              `COALESCE(${alias}.${config.referenceColumn}::TEXT, '') AS ${config.aliasColumn}`
+            );
           } else if (displayColumns.length === 1) {
             // 단일 컬럼인 경우
             const col = displayColumns[0];
-            const isJoinTableColumn = [
-              "dept_name",
-              "dept_code",
-              "master_user_id",
-              "location_name",
-              "parent_dept_code",
-              "master_sabun",
-              "location",
-              "data_type",
-              "company_name",
-              "sales_yn",
-              "status",
-              "value_label",  // table_column_category_values
-              "user_name",    // user_info
-            ].includes(col);
+
+            // ✅ 개선: referenceTable이 설정되어 있으면 조인 테이블에서 가져옴
+            // 이렇게 하면 item_info.size, item_info.material 등 모든 조인 테이블 컬럼 지원
+            const isJoinTableColumn =
+              config.referenceTable && config.referenceTable !== tableName;
 
             if (isJoinTableColumn) {
-              resultColumns.push(`COALESCE(${alias}.${col}::TEXT, '') AS ${config.aliasColumn}`);
-              
+              resultColumns.push(
+                `COALESCE(${alias}.${col}::TEXT, '') AS ${config.aliasColumn}`
+              );
+
               // _label 필드도 함께 SELECT (프론트엔드 getColumnUniqueValues용)
               // sourceColumn_label 형식으로 추가
-              resultColumns.push(`COALESCE(${alias}.${col}::TEXT, '') AS ${config.sourceColumn}_label`);
+              resultColumns.push(
+                `COALESCE(${alias}.${col}::TEXT, '') AS ${config.sourceColumn}_label`
+              );
+
+              // 🆕 referenceColumn (PK)도 항상 SELECT (parentDataMapping용)
+              // 예: customer_code, item_number 등
+              // col과 동일해도 별도의 alias로 추가 (customer_code as customer_code)
+              resultColumns.push(
+                `COALESCE(${alias}.${config.referenceColumn}::TEXT, '') AS ${config.referenceColumn}`
+              );
             } else {
-              resultColumns.push(`COALESCE(main.${col}::TEXT, '') AS ${config.aliasColumn}`);
+              resultColumns.push(
+                `COALESCE(main.${col}::TEXT, '') AS ${config.aliasColumn}`
+              );
             }
           } else {
-            // 여러 컬럼인 경우 CONCAT으로 연결
-            // 기본 테이블과 조인 테이블의 컬럼을 구분해서 처리
-            const concatParts = displayColumns
-              .map((col) => {
-                // 조인 테이블의 컬럼인지 확인 (조인 테이블에 존재하는 컬럼만 조인 별칭 사용)
-                // 현재는 dept_info 테이블의 컬럼들을 확인
-                const isJoinTableColumn = [
-                  "dept_name",
-                  "dept_code",
-                  "master_user_id",
-                  "location_name",
-                  "parent_dept_code",
-                  "master_sabun",
-                  "location",
-                  "data_type",
-                  "company_name",
-                  "sales_yn",
-                  "status",
-                  "value_label",  // table_column_category_values
-                  "user_name",    // user_info
-                ].includes(col);
+            // 🆕 여러 컬럼인 경우 각 컬럼을 개별 alias로 반환 (합치지 않음)
+            // 예: item_info.standard_price → sourceColumn_standard_price (item_id_standard_price)
+            displayColumns.forEach((col) => {
+              const isJoinTableColumn =
+                config.referenceTable && config.referenceTable !== tableName;
 
-                if (isJoinTableColumn) {
-                  // 조인 테이블 컬럼은 조인 별칭 사용
-                  return `COALESCE(${alias}.${col}::TEXT, '')`;
-                } else {
-                  // 기본 테이블 컬럼은 main 별칭 사용
-                  return `COALESCE(main.${col}::TEXT, '')`;
-                }
-              })
-              .join(` || '${separator}' || `);
+              const individualAlias = `${config.sourceColumn}_${col}`;
 
-            resultColumns.push(`(${concatParts}) AS ${config.aliasColumn}`);
+              if (isJoinTableColumn) {
+                // 조인 테이블 컬럼은 조인 별칭 사용
+                resultColumns.push(
+                  `COALESCE(${alias}.${col}::TEXT, '') AS ${individualAlias}`
+                );
+              } else {
+                // 기본 테이블 컬럼은 main 별칭 사용
+                resultColumns.push(
+                  `COALESCE(main.${col}::TEXT, '') AS ${individualAlias}`
+                );
+              }
+            });
+
+            // 🆕 referenceColumn (PK)도 함께 SELECT (parentDataMapping용)
+            const isJoinTableColumn =
+              config.referenceTable && config.referenceTable !== tableName;
+            if (
+              isJoinTableColumn &&
+              !displayColumns.includes(config.referenceColumn)
+            ) {
+              resultColumns.push(
+                `COALESCE(${alias}.${config.referenceColumn}::TEXT, '') AS ${config.referenceColumn}`
+              );
+            }
           }
-          
+
           // 모든 resultColumns를 반환
           return resultColumns.join(", ");
         })
@@ -356,13 +407,13 @@ export class EntityJoinService {
         .map((config) => {
           const aliasKey = `${config.referenceTable}:${config.sourceColumn}`;
           const alias = aliasMap.get(aliasKey);
-          
+
           // table_column_category_values는 특별한 조인 조건 필요 (회사별 필터링만)
-          if (config.referenceTable === 'table_column_category_values') {
+          if (config.referenceTable === "table_column_category_values") {
             // 멀티테넌시: 회사 데이터만 사용 (공통 데이터 제외)
             return `LEFT JOIN ${config.referenceTable} ${alias} ON main.${config.sourceColumn} = ${alias}.${config.referenceColumn} AND ${alias}.table_name = '${tableName}' AND ${alias}.column_name = '${config.sourceColumn}' AND ${alias}.company_code = main.company_code AND ${alias}.is_active = true`;
           }
-          
+
           return `LEFT JOIN ${config.referenceTable} ${alias} ON main.${config.sourceColumn} = ${alias}.${config.referenceColumn}`;
         })
         .join("\n");
@@ -424,7 +475,7 @@ export class EntityJoinService {
           }
 
           // table_column_category_values는 특수 조인 조건이 필요하므로 캐시 불가
-          if (config.referenceTable === 'table_column_category_values') {
+          if (config.referenceTable === "table_column_category_values") {
             logger.info(
               `🎯 table_column_category_values는 캐시 전략 불가: ${config.sourceColumn}`
             );
@@ -578,13 +629,13 @@ export class EntityJoinService {
         .map((config) => {
           const aliasKey = `${config.referenceTable}:${config.sourceColumn}`;
           const alias = aliasMap.get(aliasKey);
-          
+
           // table_column_category_values는 특별한 조인 조건 필요 (회사별 필터링만)
-          if (config.referenceTable === 'table_column_category_values') {
+          if (config.referenceTable === "table_column_category_values") {
             // 멀티테넌시: 회사 데이터만 사용 (공통 데이터 제외)
             return `LEFT JOIN ${config.referenceTable} ${alias} ON main.${config.sourceColumn} = ${alias}.${config.referenceColumn} AND ${alias}.table_name = '${tableName}' AND ${alias}.column_name = '${config.sourceColumn}' AND ${alias}.company_code = main.company_code AND ${alias}.is_active = true`;
           }
-          
+
           return `LEFT JOIN ${config.referenceTable} ${alias} ON main.${config.sourceColumn} = ${alias}.${config.referenceColumn}`;
         })
         .join("\n");
diff --git a/backend-node/src/services/screenManagementService.ts b/backend-node/src/services/screenManagementService.ts
index e7b6e806..6c3a3430 100644
--- a/backend-node/src/services/screenManagementService.ts
+++ b/backend-node/src/services/screenManagementService.ts
@@ -98,7 +98,8 @@ export class ScreenManagementService {
   async getScreensByCompany(
     companyCode: string,
     page: number = 1,
-    size: number = 20
+    size: number = 20,
+    searchTerm?: string // 검색어 추가
   ): Promise<PaginatedResponse<ScreenDefinition>> {
     const offset = (page - 1) * size;
 
@@ -111,6 +112,16 @@ export class ScreenManagementService {
       params.push(companyCode);
     }
 
+    // 검색어 필터링 추가 (화면명, 화면 코드, 테이블명 검색)
+    if (searchTerm && searchTerm.trim() !== "") {
+      whereConditions.push(`(
+        screen_name ILIKE $${params.length + 1} OR 
+        screen_code ILIKE $${params.length + 1} OR 
+        table_name ILIKE $${params.length + 1}
+      )`);
+      params.push(`%${searchTerm.trim()}%`);
+    }
+
     const whereSQL = whereConditions.join(" AND ");
 
     // 페이징 쿼리 (Raw Query)
@@ -1068,43 +1079,131 @@ export class ScreenManagementService {
         [tableName]
       );
 
-      // column_labels 테이블에서 입력타입 정보 조회 (있는 경우)
-      const webTypeInfo = await query<{
+      // 🆕 table_type_columns에서 입력타입 정보 조회 (회사별만, fallback 없음)
+      // 멀티테넌시: 각 회사는 자신의 설정만 사용, 최고관리자 설정은 별도 관리
+      console.log(`🔍 [getTableColumns] 시작: table=${tableName}, company=${companyCode}`);
+      
+      const typeInfo = await query<{
         column_name: string;
         input_type: string | null;
-        column_label: string | null;
         detail_settings: any;
       }>(
-        `SELECT column_name, input_type, column_label, detail_settings
+        `SELECT column_name, input_type, detail_settings
+         FROM table_type_columns
+         WHERE table_name = $1
+           AND company_code = $2
+         ORDER BY id DESC`,  // 최신 레코드 우선 (중복 방지)
+        [tableName, companyCode]
+      );
+
+      console.log(`📊 [getTableColumns] typeInfo 조회 완료: ${typeInfo.length}개`);
+      const currencyCodeType = typeInfo.find(t => t.column_name === 'currency_code');
+      if (currencyCodeType) {
+        console.log(`💰 [getTableColumns] currency_code 발견:`, currencyCodeType);
+      } else {
+        console.log(`⚠️ [getTableColumns] currency_code 없음`);
+      }
+
+      // column_labels 테이블에서 라벨 정보 조회 (우선순위 2)
+      const labelInfo = await query<{
+        column_name: string;
+        column_label: string | null;
+      }>(
+        `SELECT column_name, column_label
          FROM column_labels
          WHERE table_name = $1`,
         [tableName]
       );
 
-      // 컬럼 정보 매핑
-      return columns.map((column: any) => {
-        const webTypeData = webTypeInfo.find(
-          (wt) => wt.column_name === column.column_name
-        );
+      // 🆕 category_column_mapping에서 코드 카테고리 정보 조회
+      const categoryInfo = await query<{
+        physical_column_name: string;
+        logical_column_name: string;
+      }>(
+        `SELECT physical_column_name, logical_column_name
+         FROM category_column_mapping
+         WHERE table_name = $1
+           AND company_code = $2`,
+        [tableName, companyCode]
+      );
 
-        return {
+      // 컬럼 정보 매핑
+      const columnMap = new Map<string, any>();
+      
+      // 먼저 information_schema에서 가져온 컬럼들로 기본 맵 생성
+      columns.forEach((column: any) => {
+        columnMap.set(column.column_name, {
           tableName: tableName,
           columnName: column.column_name,
-          columnLabel:
-            webTypeData?.column_label ||
-            this.getColumnLabel(column.column_name),
           dataType: column.data_type,
-          webType:
-            (webTypeData?.input_type as WebType) ||
-            this.inferWebType(column.data_type),
           isNullable: column.is_nullable,
           columnDefault: column.column_default || undefined,
           characterMaximumLength: column.character_maximum_length || undefined,
           numericPrecision: column.numeric_precision || undefined,
           numericScale: column.numeric_scale || undefined,
-          detailSettings: webTypeData?.detail_settings || undefined,
-        };
+        });
       });
+
+      console.log(`🗺️ [getTableColumns] 기본 columnMap 생성: ${columnMap.size}개`);
+
+      // table_type_columns에서 input_type 추가 (중복 시 최신 것만)
+      const addedTypes = new Set<string>();
+      typeInfo.forEach((type) => {
+        const colName = type.column_name;
+        if (!addedTypes.has(colName) && columnMap.has(colName)) {
+          const col = columnMap.get(colName);
+          col.inputType = type.input_type;
+          col.webType = type.input_type; // webType도 동일하게 설정
+          col.detailSettings = type.detail_settings;
+          addedTypes.add(colName);
+          
+          if (colName === 'currency_code') {
+            console.log(`✅ [getTableColumns] currency_code inputType 설정됨: ${type.input_type}`);
+          }
+        }
+      });
+
+      console.log(`🏷️ [getTableColumns] inputType 추가 완료: ${addedTypes.size}개`);
+
+      // column_labels에서 라벨 추가
+      labelInfo.forEach((label) => {
+        const col = columnMap.get(label.column_name);
+        if (col) {
+          col.columnLabel = label.column_label || this.getColumnLabel(label.column_name);
+        }
+      });
+
+      // category_column_mapping에서 코드 카테고리 추가
+      categoryInfo.forEach((cat) => {
+        const col = columnMap.get(cat.physical_column_name);
+        if (col) {
+          col.codeCategory = cat.logical_column_name;
+        }
+      });
+
+      // 최종 결과 생성
+      const result = Array.from(columnMap.values()).map((col) => ({
+        ...col,
+        // 기본값 설정
+        columnLabel: col.columnLabel || this.getColumnLabel(col.columnName),
+        inputType: col.inputType || this.inferWebType(col.dataType),
+        webType: col.webType || this.inferWebType(col.dataType),
+        detailSettings: col.detailSettings || undefined,
+        codeCategory: col.codeCategory || undefined,
+      }));
+
+      // 디버깅: currency_code의 최종 inputType 확인
+      const currencyCodeResult = result.find(r => r.columnName === 'currency_code');
+      if (currencyCodeResult) {
+        console.log(`🎯 [getTableColumns] 최종 currency_code:`, {
+          inputType: currencyCodeResult.inputType,
+          webType: currencyCodeResult.webType,
+          dataType: currencyCodeResult.dataType
+        });
+      }
+
+      console.log(`✅ [getTableColumns] 반환: ${result.length}개 컬럼`);
+      return result;
     } catch (error) {
       console.error("테이블 컬럼 조회 실패:", error);
       throw new Error("테이블 컬럼 정보를 조회할 수 없습니다.");
@@ -2013,55 +2112,109 @@ export class ScreenManagementService {
   }
 
   /**
-   * 화면에 연결된 모달 화면들을 자동 감지
-   * 버튼 컴포넌트의 popup 액션에서 targetScreenId를 추출
+   * 화면에 연결된 모달/화면들을 재귀적으로 자동 감지
+   * - 버튼 컴포넌트: popup/modal/edit/openModalWithData 액션의 targetScreenId
+   * - 조건부 컨테이너: sections[].screenId (조건별 화면 할당)
+   * - 중첩된 화면들도 모두 감지 (재귀)
    */
   async detectLinkedModalScreens(
     screenId: number
   ): Promise<{ screenId: number; screenName: string; screenCode: string }[]> {
-    // 화면의 모든 레이아웃 조회
-    const layouts = await query<any>(
-      `SELECT layout_id, properties
-       FROM screen_layouts
-       WHERE screen_id = $1
-         AND component_type = 'component'
-         AND properties IS NOT NULL`,
-      [screenId]
-    );
+    console.log(`\n🔍 [재귀 감지 시작] 화면 ID: ${screenId}`);
+    
+    const allLinkedScreenIds = new Set<number>();
+    const visited = new Set<number>(); // 무한 루프 방지
+    const queue: number[] = [screenId]; // BFS 큐
 
-    const linkedScreenIds = new Set<number>();
+    // BFS로 연결된 모든 화면 탐색
+    while (queue.length > 0) {
+      const currentScreenId = queue.shift()!;
+      
+      // 이미 방문한 화면은 스킵 (순환 참조 방지)
+      if (visited.has(currentScreenId)) {
+        console.log(`⏭️  이미 방문한 화면 스킵: ${currentScreenId}`);
+        continue;
+      }
+      
+      visited.add(currentScreenId);
+      console.log(`\n📋 현재 탐색 중인 화면: ${currentScreenId} (깊이: ${visited.size})`);
 
-    // 각 레이아웃에서 버튼의 popup/modal/edit 액션 확인
-    for (const layout of layouts) {
-      try {
-        const properties = layout.properties;
-        
-        // 버튼 컴포넌트인지 확인
-        if (properties?.componentType === "button" || properties?.componentType?.startsWith("button-")) {
-          const action = properties?.componentConfig?.action;
+      // 현재 화면의 모든 레이아웃 조회
+      const layouts = await query<any>(
+        `SELECT layout_id, properties
+         FROM screen_layouts
+         WHERE screen_id = $1
+           AND component_type = 'component'
+           AND properties IS NOT NULL`,
+        [currentScreenId]
+      );
+
+      console.log(`  📦 레이아웃 개수: ${layouts.length}`);
+
+      // 각 레이아웃에서 연결된 화면 ID 확인
+      for (const layout of layouts) {
+        try {
+          const properties = layout.properties;
           
-          // popup, modal, edit 액션이고 targetScreenId가 있는 경우
-          // edit 액션도 수정 폼 모달을 열기 때문에 포함
-          if ((action?.type === "popup" || action?.type === "modal" || action?.type === "edit") && action?.targetScreenId) {
-            const targetScreenId = parseInt(action.targetScreenId);
-            if (!isNaN(targetScreenId)) {
-              linkedScreenIds.add(targetScreenId);
-              console.log(`🔗 연결된 모달 화면 발견: screenId=${targetScreenId}, actionType=${action.type} (레이아웃 ${layout.layout_id})`);
+          // 1. 버튼 컴포넌트의 액션 확인
+          if (properties?.componentType === "button" || properties?.componentType?.startsWith("button-")) {
+            const action = properties?.componentConfig?.action;
+            
+            const modalActionTypes = ["popup", "modal", "edit", "openModalWithData"];
+            if (modalActionTypes.includes(action?.type) && action?.targetScreenId) {
+              const targetScreenId = parseInt(action.targetScreenId);
+              if (!isNaN(targetScreenId) && targetScreenId !== currentScreenId) {
+                // 메인 화면이 아닌 경우에만 추가
+                if (targetScreenId !== screenId) {
+                  allLinkedScreenIds.add(targetScreenId);
+                }
+                // 아직 방문하지 않은 화면이면 큐에 추가
+                if (!visited.has(targetScreenId)) {
+                  queue.push(targetScreenId);
+                  console.log(`  🔗 [버튼] 연결된 화면 발견: ${targetScreenId} (action: ${action.type}) → 큐에 추가`);
+                }
+              }
             }
           }
+          
+          // 2. conditional-container 컴포넌트의 sections 확인
+          if (properties?.componentType === "conditional-container") {
+            const sections = properties?.componentConfig?.sections || [];
+            
+            for (const section of sections) {
+              if (section?.screenId) {
+                const sectionScreenId = parseInt(section.screenId);
+                if (!isNaN(sectionScreenId) && sectionScreenId !== currentScreenId) {
+                  // 메인 화면이 아닌 경우에만 추가
+                  if (sectionScreenId !== screenId) {
+                    allLinkedScreenIds.add(sectionScreenId);
+                  }
+                  // 아직 방문하지 않은 화면이면 큐에 추가
+                  if (!visited.has(sectionScreenId)) {
+                    queue.push(sectionScreenId);
+                    console.log(`  🔗 [조건부컨테이너] 연결된 화면 발견: ${sectionScreenId} (condition: ${section.condition}) → 큐에 추가`);
+                  }
+                }
+              }
+            }
+          }
+        } catch (error) {
+          console.warn(`  ⚠️  레이아웃 ${layout.layout_id} 파싱 오류:`, error);
         }
-      } catch (error) {
-        // JSON 파싱 오류 등은 무시하고 계속 진행
-        console.warn(`레이아웃 ${layout.layout_id} 파싱 오류:`, error);
       }
     }
 
+    console.log(`\n✅ [재귀 감지 완료] 총 방문한 화면: ${visited.size}개, 연결된 화면: ${allLinkedScreenIds.size}개`);
+    console.log(`   방문한 화면 ID: [${Array.from(visited).join(", ")}]`);
+    console.log(`   연결된 화면 ID: [${Array.from(allLinkedScreenIds).join(", ")}]`);
+
     // 감지된 화면 ID들의 정보 조회
-    if (linkedScreenIds.size === 0) {
+    if (allLinkedScreenIds.size === 0) {
+      console.log(`ℹ️  연결된 화면이 없습니다.`);
       return [];
     }
 
-    const screenIds = Array.from(linkedScreenIds);
+    const screenIds = Array.from(allLinkedScreenIds);
     const placeholders = screenIds.map((_, i) => `$${i + 1}`).join(", ");
     
     const linkedScreens = await query<any>(
@@ -2073,6 +2226,11 @@ export class ScreenManagementService {
       screenIds
     );
 
+    console.log(`\n📋 최종 감지된 화면 목록:`);
+    linkedScreens.forEach((s: any) => {
+      console.log(`   - ${s.screen_name} (ID: ${s.screen_id}, 코드: ${s.screen_code})`);
+    });
+
     return linkedScreens.map((s) => ({
       screenId: s.screen_id,
       screenName: s.screen_name,
@@ -2342,23 +2500,23 @@ export class ScreenManagementService {
     for (const layout of layouts) {
       try {
         const properties = layout.properties;
+        let needsUpdate = false;
 
-        // 버튼 컴포넌트인지 확인
+        // 1. 버튼 컴포넌트의 targetScreenId 업데이트
         if (
           properties?.componentType === "button" ||
           properties?.componentType?.startsWith("button-")
         ) {
           const action = properties?.componentConfig?.action;
 
-          // targetScreenId가 있는 액션 (popup, modal, edit)
+          // targetScreenId가 있는 액션 (popup, modal, edit, openModalWithData)
+          const modalActionTypes = ["popup", "modal", "edit", "openModalWithData"];
           if (
-            (action?.type === "popup" ||
-              action?.type === "modal" ||
-              action?.type === "edit") &&
+            modalActionTypes.includes(action?.type) &&
             action?.targetScreenId
           ) {
             const oldScreenId = parseInt(action.targetScreenId);
-            console.log(`🔍 버튼 발견: layout ${layout.layout_id}, action=${action.type}, targetScreenId=${oldScreenId}`);
+            console.log(`🔍 [버튼] 발견: layout ${layout.layout_id}, action=${action.type}, targetScreenId=${oldScreenId}`);
 
             // 매핑에 있으면 업데이트
             if (screenIdMapping.has(oldScreenId)) {
@@ -2368,31 +2526,63 @@ export class ScreenManagementService {
               // properties 업데이트
               properties.componentConfig.action.targetScreenId =
                 newScreenId.toString();
+              needsUpdate = true;
 
-              // 데이터베이스 업데이트
-              await query(
-                `UPDATE screen_layouts
-                 SET properties = $1
-                 WHERE layout_id = $2`,
-                [JSON.stringify(properties), layout.layout_id]
-              );
-
-              updateCount++;
               console.log(
-                `🔗 버튼 targetScreenId 업데이트: ${oldScreenId} → ${newScreenId} (layout ${layout.layout_id})`
+                `🔗 [버튼] targetScreenId 업데이트 준비: ${oldScreenId} → ${newScreenId} (layout ${layout.layout_id})`
               );
             } else {
               console.log(`⚠️ 매핑 없음: ${oldScreenId} (업데이트 건너뜀)`);
             }
           }
         }
+
+        // 2. conditional-container 컴포넌트의 sections[].screenId 업데이트
+        if (properties?.componentType === "conditional-container") {
+          const sections = properties?.componentConfig?.sections || [];
+          
+          for (const section of sections) {
+            if (section?.screenId) {
+              const oldScreenId = parseInt(section.screenId);
+              console.log(`🔍 [조건부컨테이너] section 발견: layout ${layout.layout_id}, condition=${section.condition}, screenId=${oldScreenId}`);
+
+              // 매핑에 있으면 업데이트
+              if (screenIdMapping.has(oldScreenId)) {
+                const newScreenId = screenIdMapping.get(oldScreenId)!;
+                console.log(`✅ 매핑 발견: ${oldScreenId} → ${newScreenId}`);
+
+                // section.screenId 업데이트
+                section.screenId = newScreenId;
+                needsUpdate = true;
+
+                console.log(
+                  `🔗 [조건부컨테이너] screenId 업데이트 준비: ${oldScreenId} → ${newScreenId} (layout ${layout.layout_id}, condition=${section.condition})`
+                );
+              } else {
+                console.log(`⚠️ 매핑 없음: ${oldScreenId} (업데이트 건너뜀)`);
+              }
+            }
+          }
+        }
+
+        // 3. 업데이트가 필요한 경우 DB 저장
+        if (needsUpdate) {
+          await query(
+            `UPDATE screen_layouts
+             SET properties = $1
+             WHERE layout_id = $2`,
+            [JSON.stringify(properties), layout.layout_id]
+          );
+          updateCount++;
+          console.log(`💾 레이아웃 ${layout.layout_id} 업데이트 완료`);
+        }
       } catch (error) {
         console.warn(`❌ 레이아웃 ${layout.layout_id} 업데이트 오류:`, error);
         // 개별 레이아웃 오류는 무시하고 계속 진행
       }
     }
 
-    console.log(`✅ 총 ${updateCount}개 버튼의 targetScreenId 업데이트 완료`);
+    console.log(`✅ 총 ${updateCount}개 레이아웃의 연결된 화면 ID 업데이트 완료 (버튼 + 조건부컨테이너)`);
     return updateCount;
   }
 }
diff --git a/backend-node/src/services/tableCategoryValueService.ts b/backend-node/src/services/tableCategoryValueService.ts
index bffb0d05..2a379ae0 100644
--- a/backend-node/src/services/tableCategoryValueService.ts
+++ b/backend-node/src/services/tableCategoryValueService.ts
@@ -445,7 +445,129 @@ class TableCategoryValueService {
   }
 
   /**
-   * 카테고리 값 삭제 (비활성화)
+   * 카테고리 값 사용 여부 확인
+   * 실제 데이터 테이블에서 해당 카테고리 값이 사용되고 있는지 확인
+   */
+  async checkCategoryValueUsage(
+    valueId: number,
+    companyCode: string
+  ): Promise<{ isUsed: boolean; usedInTables: any[]; totalCount: number }> {
+    const pool = getPool();
+
+    try {
+      logger.info("카테고리 값 사용 여부 확인", { valueId, companyCode });
+
+      // 1. 카테고리 값 정보 조회
+      let valueQuery: string;
+      let valueParams: any[];
+
+      if (companyCode === "*") {
+        valueQuery = `
+          SELECT table_name, column_name, value_code
+          FROM table_column_category_values
+          WHERE value_id = $1
+        `;
+        valueParams = [valueId];
+      } else {
+        valueQuery = `
+          SELECT table_name, column_name, value_code
+          FROM table_column_category_values
+          WHERE value_id = $1
+            AND company_code = $2
+        `;
+        valueParams = [valueId, companyCode];
+      }
+
+      const valueResult = await pool.query(valueQuery, valueParams);
+
+      if (valueResult.rowCount === 0) {
+        throw new Error("카테고리 값을 찾을 수 없습니다");
+      }
+
+      const { table_name, column_name, value_code } = valueResult.rows[0];
+
+      // 2. 실제 데이터 테이블에서 사용 여부 확인
+      // 테이블이 존재하는지 먼저 확인
+      const tableExistsQuery = `
+        SELECT EXISTS (
+          SELECT FROM information_schema.tables 
+          WHERE table_schema = 'public'
+            AND table_name = $1
+        ) as exists
+      `;
+
+      const tableExistsResult = await pool.query(tableExistsQuery, [table_name]);
+
+      if (!tableExistsResult.rows[0].exists) {
+        logger.info("테이블이 존재하지 않음", { table_name });
+        return { isUsed: false, usedInTables: [], totalCount: 0 };
+      }
+
+      // 3. 해당 테이블에서 value_code를 사용하는 데이터 개수 확인
+      let dataCountQuery: string;
+      let dataCountParams: any[];
+
+      if (companyCode === "*") {
+        dataCountQuery = `
+          SELECT COUNT(*) as count
+          FROM ${table_name}
+          WHERE ${column_name} = $1
+        `;
+        dataCountParams = [value_code];
+      } else {
+        dataCountQuery = `
+          SELECT COUNT(*) as count
+          FROM ${table_name}
+          WHERE ${column_name} = $1
+            AND company_code = $2
+        `;
+        dataCountParams = [value_code, companyCode];
+      }
+
+      const dataCountResult = await pool.query(dataCountQuery, dataCountParams);
+      const totalCount = parseInt(dataCountResult.rows[0].count);
+      const isUsed = totalCount > 0;
+
+      // 4. 사용 중인 메뉴 목록 조회 (해당 테이블을 사용하는 화면/메뉴)
+      const menuQuery = `
+        SELECT DISTINCT
+          mi.objid as menu_objid,
+          mi.menu_name_kor as menu_name,
+          mi.menu_url
+        FROM menu_info mi
+        INNER JOIN screen_menu_assignments sma ON sma.menu_objid = mi.objid
+        INNER JOIN screen_definitions sd ON sd.screen_id = sma.screen_id
+        WHERE sd.table_name = $1
+          AND mi.company_code = $2
+        ORDER BY mi.menu_name_kor
+      `;
+
+      const menuResult = await pool.query(menuQuery, [table_name, companyCode]);
+
+      const usedInTables = menuResult.rows.map((row) => ({
+        menuObjid: row.menu_objid,
+        menuName: row.menu_name,
+        menuUrl: row.menu_url,
+        tableName: table_name,
+        columnName: column_name,
+      }));
+
+      logger.info("카테고리 값 사용 여부 확인 완료", {
+        valueId,
+        isUsed,
+        totalCount,
+        usedInMenusCount: usedInTables.length,
+      });
+
+      return { isUsed, usedInTables, totalCount };
+    } catch (error: any) {
+      logger.error(`카테고리 값 사용 여부 확인 실패: ${error.message}`);
+      throw error;
+    }
+  }
+
+  /**
+   * 카테고리 값 삭제 (물리적 삭제)
    */
   async deleteCategoryValue(
     valueId: number,
@@ -455,7 +577,24 @@ class TableCategoryValueService {
     const pool = getPool();
 
     try {
-      // 하위 값 체크 (멀티테넌시 적용)
+      // 1. 사용 여부 확인
+      const usage = await this.checkCategoryValueUsage(valueId, companyCode);
+
+      if (usage.isUsed) {
+        let errorMessage = "이 카테고리 값을 삭제할 수 없습니다.\n";
+        errorMessage += `\n현재 ${usage.totalCount}개의 데이터에서 사용 중입니다.`;
+
+        if (usage.usedInTables.length > 0) {
+          const menuNames = usage.usedInTables.map((t) => t.menuName).join(", ");
+          errorMessage += `\n\n다음 메뉴에서 사용 중입니다:\n${menuNames}`;
+        }
+
+        errorMessage += "\n\n메뉴에서 사용하는 카테고리 항목을 수정한 후 다시 삭제해주세요.";
+
+        throw new Error(errorMessage);
+      }
+
+      // 2. 하위 값 체크 (멀티테넌시 적용)
       let checkQuery: string;
       let checkParams: any[];
       
@@ -465,7 +604,6 @@ class TableCategoryValueService {
           SELECT COUNT(*) as count
           FROM table_column_category_values
           WHERE parent_value_id = $1
-            AND is_active = true
         `;
         checkParams = [valueId];
       } else {
@@ -475,7 +613,6 @@ class TableCategoryValueService {
           FROM table_column_category_values
           WHERE parent_value_id = $1
             AND company_code = $2
-            AND is_active = true
         `;
         checkParams = [valueId, companyCode];
       }
@@ -486,27 +623,25 @@ class TableCategoryValueService {
         throw new Error("하위 카테고리 값이 있어 삭제할 수 없습니다");
       }
 
-      // 비활성화 (멀티테넌시 적용)
+      // 3. 물리적 삭제 (멀티테넌시 적용)
       let deleteQuery: string;
       let deleteParams: any[];
       
       if (companyCode === "*") {
         // 최고 관리자: 모든 카테고리 값 삭제 가능
         deleteQuery = `
-          UPDATE table_column_category_values
-          SET is_active = false, updated_at = NOW(), updated_by = $2
+          DELETE FROM table_column_category_values
           WHERE value_id = $1
         `;
-        deleteParams = [valueId, userId];
+        deleteParams = [valueId];
       } else {
         // 일반 회사: 자신의 카테고리 값만 삭제 가능
         deleteQuery = `
-          UPDATE table_column_category_values
-          SET is_active = false, updated_at = NOW(), updated_by = $3
+          DELETE FROM table_column_category_values
           WHERE value_id = $1
             AND company_code = $2
         `;
-        deleteParams = [valueId, companyCode, userId];
+        deleteParams = [valueId, companyCode];
       }
 
       const result = await pool.query(deleteQuery, deleteParams);
@@ -515,7 +650,7 @@ class TableCategoryValueService {
         throw new Error("카테고리 값을 찾을 수 없거나 권한이 없습니다");
       }
 
-      logger.info("카테고리 값 삭제(비활성화) 완료", {
+      logger.info("카테고리 값 삭제 완료", {
         valueId,
         companyCode,
       });
diff --git a/backend-node/src/services/tableManagementService.ts b/backend-node/src/services/tableManagementService.ts
index 8ce3c9d4..38fc77b1 100644
--- a/backend-node/src/services/tableManagementService.ts
+++ b/backend-node/src/services/tableManagementService.ts
@@ -144,6 +144,19 @@ export class TableManagementService {
         logger.info(
           `컬럼 정보 캐시에서 조회: ${tableName}, ${cachedResult.columns.length}/${cachedResult.total}개`
         );
+
+        // 디버깅: 캐시된 currency_code 확인
+        const cachedCurrency = cachedResult.columns.find(
+          (col: any) => col.columnName === "currency_code"
+        );
+        if (cachedCurrency) {
+          console.log(`💾 [캐시] currency_code:`, {
+            columnName: cachedCurrency.columnName,
+            inputType: cachedCurrency.inputType,
+            webType: cachedCurrency.webType,
+          });
+        }
+
         return cachedResult;
       }
 
@@ -174,6 +187,8 @@ export class TableManagementService {
               c.data_type as "dbType",
               COALESCE(cl.input_type, 'text') as "webType",
               COALESCE(ttc.input_type, cl.input_type, 'direct') as "inputType",
+              ttc.input_type as "ttc_input_type",
+              cl.input_type as "cl_input_type",
               COALESCE(ttc.detail_settings::text, cl.detail_settings, '') as "detailSettings",
               COALESCE(cl.description, '') as "description",
               c.is_nullable as "isNullable",
@@ -782,8 +797,13 @@ export class TableManagementService {
         ]
       );
 
+      // 🔥 캐시 무효화: 해당 테이블의 컬럼 캐시 삭제
+      const cacheKeyPattern = `${CacheKeys.TABLE_COLUMNS(tableName, 1, 1000)}_${companyCode}`;
+      cache.delete(cacheKeyPattern);
+      cache.delete(CacheKeys.TABLE_COLUMN_COUNT(tableName));
+
       logger.info(
-        `컬럼 입력 타입 설정 완료: ${tableName}.${columnName} = ${inputType}, company: ${companyCode}`
+        `컬럼 입력 타입 설정 완료: ${tableName}.${columnName} = ${inputType}, company: ${companyCode} (캐시 무효화 완료)`
       );
     } catch (error) {
       logger.error(
diff --git a/backend-node/src/utils/dataFilterUtil.ts b/backend-node/src/utils/dataFilterUtil.ts
index d00861fb..a4e81fd6 100644
--- a/backend-node/src/utils/dataFilterUtil.ts
+++ b/backend-node/src/utils/dataFilterUtil.ts
@@ -6,9 +6,28 @@
 export interface ColumnFilter {
   id: string;
   columnName: string;
-  operator: "equals" | "not_equals" | "in" | "not_in" | "contains" | "starts_with" | "ends_with" | "is_null" | "is_not_null";
+  operator: 
+    | "equals" 
+    | "not_equals" 
+    | "in" 
+    | "not_in" 
+    | "contains" 
+    | "starts_with" 
+    | "ends_with" 
+    | "is_null" 
+    | "is_not_null"
+    | "greater_than"
+    | "less_than"
+    | "greater_than_or_equal"
+    | "less_than_or_equal"
+    | "between"
+    | "date_range_contains";
   value: string | string[];
-  valueType: "static" | "category" | "code";
+  valueType: "static" | "category" | "code" | "dynamic";
+  rangeConfig?: {
+    startColumn: string;
+    endColumn: string;
+  };
 }
 
 export interface DataFilterConfig {
@@ -123,6 +142,71 @@ export function buildDataFilterWhereClause(
         conditions.push(`${columnRef} IS NOT NULL`);
         break;
 
+      case "greater_than":
+        conditions.push(`${columnRef} > $${paramIndex}`);
+        params.push(value);
+        paramIndex++;
+        break;
+
+      case "less_than":
+        conditions.push(`${columnRef} < $${paramIndex}`);
+        params.push(value);
+        paramIndex++;
+        break;
+
+      case "greater_than_or_equal":
+        conditions.push(`${columnRef} >= $${paramIndex}`);
+        params.push(value);
+        paramIndex++;
+        break;
+
+      case "less_than_or_equal":
+        conditions.push(`${columnRef} <= $${paramIndex}`);
+        params.push(value);
+        paramIndex++;
+        break;
+
+      case "between":
+        if (Array.isArray(value) && value.length === 2) {
+          conditions.push(`${columnRef} BETWEEN $${paramIndex} AND $${paramIndex + 1}`);
+          params.push(value[0], value[1]);
+          paramIndex += 2;
+        }
+        break;
+
+      case "date_range_contains":
+        // 날짜 범위 포함: start_date <= value <= end_date
+        // filter.rangeConfig = { startColumn: "start_date", endColumn: "end_date" }
+        // NULL 처리:
+        // - start_date만 있고 end_date가 NULL이면: start_date <= value (이후 계속)
+        // - end_date만 있고 start_date가 NULL이면: value <= end_date (이전 계속)
+        // - 둘 다 있으면: start_date <= value <= end_date
+        if (filter.rangeConfig && filter.rangeConfig.startColumn && filter.rangeConfig.endColumn) {
+          const startCol = getColumnRef(filter.rangeConfig.startColumn);
+          const endCol = getColumnRef(filter.rangeConfig.endColumn);
+          
+          // value가 "TODAY"면 현재 날짜로 변환
+          const actualValue = filter.valueType === "dynamic" && value === "TODAY" 
+            ? "CURRENT_DATE" 
+            : `$${paramIndex}`;
+          
+          if (actualValue === "CURRENT_DATE") {
+            // CURRENT_DATE는 파라미터가 아니므로 직접 SQL에 포함
+            // NULL 처리: (start_date IS NULL OR start_date <= CURRENT_DATE) AND (end_date IS NULL OR end_date >= CURRENT_DATE)
+            conditions.push(
+              `((${startCol} IS NULL OR ${startCol} <= CURRENT_DATE) AND (${endCol} IS NULL OR ${endCol} >= CURRENT_DATE))`
+            );
+          } else {
+            // NULL 처리: (start_date IS NULL OR start_date <= $param) AND (end_date IS NULL OR end_date >= $param)
+            conditions.push(
+              `((${startCol} IS NULL OR ${startCol} <= $${paramIndex}) AND (${endCol} IS NULL OR ${endCol} >= $${paramIndex}))`
+            );
+            params.push(value);
+            paramIndex++;
+          }
+        }
+        break;
+
       default:
         // 알 수 없는 연산자는 무시
         break;
diff --git a/docs/기간별_단가_설정_가이드.md b/docs/기간별_단가_설정_가이드.md
new file mode 100644
index 00000000..67bed5f9
--- /dev/null
+++ b/docs/기간별_단가_설정_가이드.md
@@ -0,0 +1,382 @@
+# 기간별 단가 설정 시스템 구현 가이드
+
+## 개요
+
+**선택항목 상세입력(selected-items-detail-input)** 컴포넌트를 활용하여 기간별 단가를 설정하는 범용 시스템입니다.
+
+## 데이터베이스 설계
+
+### 1. 마이그레이션 실행
+
+```bash
+# 마이그레이션 파일 위치
+db/migrations/999_add_period_price_columns_to_customer_item_mapping.sql
+
+# 실행 (로컬)
+npm run migrate:local
+
+# 또는 수동 실행
+psql -U your_user -d erp_db -f db/migrations/999_add_period_price_columns_to_customer_item_mapping.sql
+```
+
+### 2. 추가된 컬럼들
+
+| 컬럼명 | 타입 | 설명 | 사진 항목 |
+|--------|------|------|-----------|
+| `start_date` | DATE | 기간 시작일 | ✅ 시작일 DatePicker |
+| `end_date` | DATE | 기간 종료일 | ✅ 종료일 DatePicker |
+| `discount_type` | VARCHAR(50) | 할인 방식 | ✅ 할인율/할인금액 Select |
+| `discount_value` | NUMERIC(15,2) | 할인율 또는 할인금액 | ✅ 숫자 입력 |
+| `rounding_type` | VARCHAR(50) | 반올림 방식 | ✅ 반올림/절삭/올림 Select |
+| `rounding_unit_value` | VARCHAR(50) | 반올림 단위 | ✅ 1원/10원/100원/1,000원 Select |
+| `calculated_price` | NUMERIC(15,2) | 계산된 최종 단가 | ✅ 계산 결과 표시 |
+| `is_base_price` | BOOLEAN | 기준단가 여부 | ✅ 기준단가 Checkbox |
+
+## 화면 편집기 설정 방법
+
+### Step 1: 선택항목 상세입력 컴포넌트 추가
+
+1. 화면 편집기에서 "선택항목 상세입력" 컴포넌트를 캔버스에 드래그앤드롭
+2. 컴포넌트 ID: `customer-item-price-periods`
+
+### Step 2: 데이터 소스 설정
+
+- **원본 데이터 테이블**: `item_info` (품목 정보)
+- **저장 대상 테이블**: `customer_item_mapping`
+- **데이터 소스 ID**: URL 파라미터에서 자동 설정 (Button 컴포넌트가 전달)
+
+### Step 3: 표시할 원본 데이터 컬럼 설정
+
+이전 화면(품목 선택 모달)에서 전달받은 품목 정보를 표시:
+
+```
+컬럼1: item_code (품목코드)
+컬럼2: item_name (품목명)
+컬럼3: spec (규격)
+```
+
+### Step 4: 필드 그룹 2개 생성
+
+#### 그룹 1: 거래처 품목/품명 관리 (group_customer)
+
+| 필드명 | 라벨 | 타입 | 설명 |
+|--------|------|------|------|
+| `customer_item_code` | 거래처 품번 | text | 거래처에서 사용하는 품번 |
+| `customer_item_name` | 거래처 품명 | text | 거래처에서 사용하는 품명 |
+
+#### 그룹 2: 기간별 단가 설정 (group_period_price)
+
+| 필드명 | 라벨 | 타입 | 자동 채우기 | 설명 |
+|--------|------|------|-------------|------|
+| `start_date` | 시작일 | date | - | 단가 적용 시작일 |
+| `end_date` | 종료일 | date | - | 단가 적용 종료일 (NULL이면 무기한) |
+| `current_unit_price` | 단가 | number | `item_info.standard_price` | 기본 단가 (품목에서 자동 채우기) |
+| `currency_code` | 통화 | code/category | - | 통화 코드 (KRW, USD 등) |
+| `discount_type` | 할인 방식 | code/category | - | 할인율없음/할인율(%)/할인금액 |
+| `discount_value` | 할인값 | number | - | 할인율(5) 또는 할인금액 |
+| `rounding_type` | 반올림 방식 | code/category | - | 반올림없음/반올림/절삭/올림 |
+| `rounding_unit_value` | 반올림 단위 | code/category | - | 1원/10원/100원/1,000원 |
+| `calculated_price` | 최종 단가 | number | - | 계산된 최종 단가 (읽기 전용) |
+| `is_base_price` | 기준단가 | checkbox | - | 기준단가 여부 |
+
+### Step 5: 그룹별 표시 항목 설정 (DisplayItems)
+
+**그룹 2 (기간별 단가 설정)의 표시 설정:**
+
+```
+1. [필드] start_date | 라벨: "" | 형식: date | 빈 값: 기본값 (미설정)
+2. [텍스트] " ~ "
+3. [필드] end_date | 라벨: "" | 형식: date | 빈 값: 기본값 (무기한)
+4. [텍스트] " | "
+5. [필드] calculated_price | 라벨: "" | 형식: currency | 빈 값: 기본값 (계산 중)
+6. [텍스트] " "
+7. [필드] currency_code | 라벨: "" | 형식: text | 빈 값: 기본값 (KRW)
+8. [조건] is_base_price가 true이면 → [배지] "기준단가" (variant: default)
+```
+
+**렌더링 예시:**
+```
+2024-01-01 ~ 2024-06-30 | 50,000 KRW [기준단가]
+2024-07-01 ~ 무기한 | 55,000 KRW
+```
+
+## 데이터 흐름
+
+### 1. 품목 선택 모달 (이전 화면)
+
+```tsx
+// TableList 컴포넌트에서 품목 선택
+<Button
+  onClick={() => {
+    const selectedItems = tableData.filter(item => selectedRowIds.includes(item.id));
+    
+    // modalDataStore에 데이터 저장
+    useModalDataStore.getState().setData("item_info", selectedItems);
+    
+    // 다음 화면으로 이동 (dataSourceId 전달)
+    router.push("/screen/period-price-settings?dataSourceId=item_info");
+  }}
+>
+  다음
+</Button>
+```
+
+### 2. 기간별 단가 설정 화면
+
+```tsx
+// 선택항목 상세입력 컴포넌트가 자동으로 처리
+// 1. URL 파라미터에서 dataSourceId 읽기
+// 2. modalDataStore에서 item_info 데이터 가져오기
+// 3. 사용자가 그룹별로 여러 개의 기간별 단가 입력
+// 4. 저장 버튼 클릭 시 customer_item_mapping 테이블에 저장
+```
+
+### 3. 저장 데이터 구조
+
+**하나의 품목(item_id = "ITEM001")에 대해 3개의 기간별 단가를 입력한 경우:**
+
+```sql
+-- customer_item_mapping 테이블에 3개의 행으로 저장
+INSERT INTO customer_item_mapping (
+  customer_id, item_id, 
+  customer_item_code, customer_item_name,
+  start_date, end_date, 
+  current_unit_price, currency_code,
+  discount_type, discount_value,
+  rounding_type, rounding_unit_value,
+  calculated_price, is_base_price
+) VALUES
+-- 첫 번째 기간 (기준단가)
+('CUST001', 'ITEM001', 
+ 'CUST-A-001', '실리콘 고무 시트',
+ '2024-01-01', '2024-06-30',
+ 50000, 'KRW',
+ '할인율없음', 0,
+ '반올림', '100원',
+ 50000, true),
+
+-- 두 번째 기간
+('CUST001', 'ITEM001',
+ 'CUST-A-001', '실리콘 고무 시트',
+ '2024-07-01', '2024-12-31',
+ 50000, 'KRW',
+ '할인율(%)', 5,
+ '절삭', '1원',
+ 47500, false),
+
+-- 세 번째 기간 (무기한)
+('CUST001', 'ITEM001',
+ 'CUST-A-001', '실리콘 고무 시트',
+ '2025-01-01', NULL,
+ 50000, 'KRW',
+ '할인금액', 3000,
+ '올림', '1000원',
+ 47000, false);
+```
+
+## 계산 로직 (선택사항)
+
+단가 계산을 자동화하려면 프론트엔드에서 `calculated_price`를 자동 계산:
+
+```typescript
+const calculatePrice = (
+  basePrice: number, 
+  discountType: string, 
+  discountValue: number,
+  roundingType: string,
+  roundingUnit: string
+): number => {
+  let price = basePrice;
+  
+  // 1단계: 할인 적용
+  if (discountType === "할인율(%)") {
+    price = price * (1 - discountValue / 100);
+  } else if (discountType === "할인금액") {
+    price = price - discountValue;
+  }
+  
+  // 2단계: 반올림 적용
+  const unitMap: Record<string, number> = {
+    "1원": 1,
+    "10원": 10,
+    "100원": 100,
+    "1,000원": 1000,
+  };
+  
+  const unit = unitMap[roundingUnit] || 1;
+  
+  if (roundingType === "반올림") {
+    price = Math.round(price / unit) * unit;
+  } else if (roundingType === "절삭") {
+    price = Math.floor(price / unit) * unit;
+  } else if (roundingType === "올림") {
+    price = Math.ceil(price / unit) * unit;
+  }
+  
+  return price;
+};
+
+// 필드 변경 시 자동 계산
+useEffect(() => {
+  const calculatedPrice = calculatePrice(
+    basePrice,
+    discountType,
+    discountValue,
+    roundingType,
+    roundingUnit
+  );
+  
+  // calculated_price 필드 업데이트
+  handleFieldChange(itemId, groupId, entryId, "calculated_price", calculatedPrice);
+}, [basePrice, discountType, discountValue, roundingType, roundingUnit]);
+```
+
+## 백엔드 API 구현 (필요시)
+
+### 기간별 단가 조회
+
+```typescript
+// GET /api/customer-item/price-periods?customer_id=CUST001&item_id=ITEM001
+router.get("/price-periods", async (req, res) => {
+  const { customer_id, item_id } = req.query;
+  const companyCode = req.user!.companyCode;
+  
+  const query = `
+    SELECT * FROM customer_item_mapping
+    WHERE customer_id = $1
+      AND item_id = $2
+      AND company_code = $3
+    ORDER BY start_date ASC
+  `;
+  
+  const result = await pool.query(query, [customer_id, item_id, companyCode]);
+  
+  return res.json({ success: true, data: result.rows });
+});
+```
+
+### 기간별 단가 저장
+
+```typescript
+// POST /api/customer-item/price-periods
+router.post("/price-periods", async (req, res) => {
+  const { items } = req.body; // 선택항목 상세입력 컴포넌트에서 전달
+  const companyCode = req.user!.companyCode;
+  
+  const client = await pool.connect();
+  
+  try {
+    await client.query("BEGIN");
+    
+    for (const item of items) {
+      // item.fieldGroups.group_period_price 배열의 각 항목을 INSERT
+      const periodPrices = item.fieldGroups.group_period_price || [];
+      
+      for (const periodPrice of periodPrices) {
+        const query = `
+          INSERT INTO customer_item_mapping (
+            company_code, customer_id, item_id,
+            customer_item_code, customer_item_name,
+            start_date, end_date,
+            current_unit_price, currency_code,
+            discount_type, discount_value,
+            rounding_type, rounding_unit_value,
+            calculated_price, is_base_price
+          ) VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9, $10, $11, $12, $13, $14, $15)
+        `;
+        
+        await client.query(query, [
+          companyCode,
+          item.originalData.customer_id,
+          item.originalData.item_id,
+          periodPrice.customer_item_code,
+          periodPrice.customer_item_name,
+          periodPrice.start_date,
+          periodPrice.end_date || null,
+          periodPrice.current_unit_price,
+          periodPrice.currency_code,
+          periodPrice.discount_type,
+          periodPrice.discount_value,
+          periodPrice.rounding_type,
+          periodPrice.rounding_unit_value,
+          periodPrice.calculated_price,
+          periodPrice.is_base_price
+        ]);
+      }
+    }
+    
+    await client.query("COMMIT");
+    
+    return res.json({ success: true, message: "기간별 단가가 저장되었습니다." });
+  } catch (error) {
+    await client.query("ROLLBACK");
+    console.error("기간별 단가 저장 실패:", error);
+    return res.status(500).json({ success: false, error: "저장 실패" });
+  } finally {
+    client.release();
+  }
+});
+```
+
+## 사용 시나리오 예시
+
+### 시나리오 1: 거래처별 단가 관리
+
+1. 거래처 선택 모달 → 거래처 선택 → 다음
+2. 품목 선택 모달 → 품목 여러 개 선택 → 다음
+3. **기간별 단가 설정 화면**
+   - 품목1 (실리콘 고무 시트)
+     - **그룹1 추가**: 거래처 품번: CUST-A-001, 품명: 실리콘 시트
+     - **그룹2 추가**: 2024-01-01 ~ 2024-06-30, 50,000원 (기준단가)
+     - **그룹2 추가**: 2024-07-01 ~ 무기한, 할인율 5% → 47,500원
+   - 품목2 (스테인리스 판)
+     - **그룹1 추가**: 거래처 품번: CUST-A-002, 품명: SUS304 판
+     - **그룹2 추가**: 2024-01-01 ~ 무기한, 150,000원 (기준단가)
+4. 저장 버튼 클릭 → customer_item_mapping 테이블에 4개 행 저장
+
+### 시나리오 2: 단순 단가 입력
+
+필드 그룹을 사용하지 않고 단일 입력도 가능:
+
+```
+그룹 없이 필드 정의:
+- customer_item_code
+- customer_item_name
+- current_unit_price
+- currency_code
+
+→ 각 품목당 1개의 행만 저장
+```
+
+## 장점
+
+### 1. 범용성
+- 기간별 단가뿐만 아니라 **모든 숫자 계산 시나리오**에 적용 가능
+- 견적서, 발주서, 판매 단가, 구매 단가 등
+
+### 2. 유연성
+- 필드 그룹으로 자유롭게 섹션 구성
+- 표시 항목 설정으로 UI 커스터마이징
+
+### 3. 데이터 무결성
+- 1:N 관계로 여러 기간별 데이터 관리
+- 기간 중복 체크는 백엔드에서 처리
+
+### 4. 사용자 경험
+- 품목별로 여러 개의 기간별 단가를 손쉽게 입력
+- 입력 완료 후 작은 카드로 요약 표시
+
+## 다음 단계
+
+1. **마이그레이션 실행** (999_add_period_price_columns_to_customer_item_mapping.sql)
+2. **화면 편집기에서 설정** (위 Step 1~5 참고)
+3. **백엔드 API 구현** (저장/조회 엔드포인트)
+4. **계산 로직 추가** (선택사항: 자동 계산)
+5. **테스트** (품목 선택 → 기간별 단가 입력 → 저장 → 조회)
+
+## 참고 자료
+
+- 선택항목 상세입력 컴포넌트: `frontend/lib/registry/components/selected-items-detail-input/`
+- 타입 정의: `frontend/lib/registry/components/selected-items-detail-input/types.ts`
+- 설정 패널: `SelectedItemsDetailInputConfigPanel.tsx`
+
diff --git a/frontend/MODAL_REPEATER_TABLE_DEBUG.md b/frontend/MODAL_REPEATER_TABLE_DEBUG.md
new file mode 100644
index 00000000..0f0f66ce
--- /dev/null
+++ b/frontend/MODAL_REPEATER_TABLE_DEBUG.md
@@ -0,0 +1,185 @@
+# Modal Repeater Table 디버깅 가이드
+
+## 📊 콘솔 로그 확인 순서
+
+새로고침 후 수주 등록 모달을 열고, 아래 순서대로 콘솔 로그를 확인하세요:
+
+### 1️⃣ 컴포넌트 마운트 (초기 로드)
+
+```
+🎬 ModalRepeaterTableComponent 마운트: {
+  config: {...},
+  propColumns: [...],
+  columns: [...],
+  columnsLength: N,  // ⚠️ 0이면 문제!
+  value: [],
+  valueLength: 0,
+  sourceTable: "item_info",
+  sourceColumns: [...],
+  uniqueField: "item_number"
+}
+```
+
+**✅ 정상:**
+- `columnsLength: 8` (품번, 품명, 규격, 재질, 수량, 단가, 금액, 납기일)
+- `columns` 배열에 각 컬럼의 `field`, `label`, `type` 정보가 있어야 함
+
+**❌ 문제:**
+- `columnsLength: 0` → **이것이 문제의 원인!**
+- 빈 배열이면 테이블에 컬럼이 표시되지 않음
+
+---
+
+### 2️⃣ 항목 검색 모달 열림
+
+```
+🚪 모달 열림 - uniqueField: "item_number", multiSelect: true
+```
+
+---
+
+### 3️⃣ 품목 체크 (선택)
+
+```
+🖱️ 행 클릭: {
+  item: { item_number: "SLI-2025-0003", item_name: "실리콘 고무 시트", ... },
+  uniqueField: "item_number",
+  itemValue: "SLI-2025-0003",
+  currentSelected: 0,
+  selectedValues: []
+}
+
+✅ 매칭 발견: { selectedValue: "SLI-2025-0003", itemValue: "SLI-2025-0003", uniqueField: "item_number" }
+```
+
+---
+
+### 4️⃣ 추가 버튼 클릭
+
+```
+✅ ItemSelectionModal 추가 버튼 클릭: {
+  selectedCount: 1,
+  selectedItems: [{ item_number: "SLI-2025-0003", item_name: "실리콘 고무 시트", ... }],
+  uniqueField: "item_number"
+}
+```
+
+---
+
+### 5️⃣ 데이터 추가 처리
+
+```
+➕ handleAddItems 호출: {
+  selectedItems: [{ item_number: "SLI-2025-0003", ... }],
+  currentValue: [],
+  columns: [...],  // ⚠️ 여기도 확인!
+  calculationRules: [...]
+}
+
+📝 기본값 적용 후: [{ item_number: "SLI-2025-0003", quantity: 1, ... }]
+
+🔢 계산 필드 적용 후: [{ item_number: "SLI-2025-0003", quantity: 1, selling_price: 1000, amount: 1000, ... }]
+
+✅ 최종 데이터 (onChange 호출): [{ item_number: "SLI-2025-0003", quantity: 1, selling_price: 1000, amount: 1000, ... }]
+```
+
+---
+
+### 6️⃣ Renderer 업데이트
+
+```
+🔄 ModalRepeaterTableRenderer onChange 호출: {
+  previousValue: [],
+  newValue: [{ item_number: "SLI-2025-0003", ... }]
+}
+```
+
+---
+
+### 7️⃣ value 변경 감지
+
+```
+📦 ModalRepeaterTableComponent value 변경: {
+  valueLength: 1,
+  value: [{ item_number: "SLI-2025-0003", ... }],
+  columns: [...]  // ⚠️ 여기도 확인!
+}
+```
+
+---
+
+### 8️⃣ 테이블 리렌더링
+
+```
+📊 RepeaterTable 데이터 업데이트: {
+  rowCount: 1,
+  data: [{ item_number: "SLI-2025-0003", ... }],
+  columns: ["item_number", "item_name", "specification", "material", "quantity", "selling_price", "amount", "delivery_date"]
+}
+```
+
+---
+
+## 🔍 문제 진단
+
+### Case 1: columns가 비어있음 (columnsLength: 0)
+
+**원인:**
+- 화면관리 시스템에서 modal-repeater-table 컴포넌트의 `columns` 설정을 하지 않음
+- DB에 컬럼 설정이 저장되지 않음
+
+**해결:**
+1. 화면 관리 페이지로 이동
+2. 해당 화면 편집
+3. modal-repeater-table 컴포넌트 선택
+4. 우측 설정 패널에서 "컬럼 설정" 탭 열기
+5. 다음 컬럼들을 추가:
+   - 품번 (item_number, text, 편집불가)
+   - 품명 (item_name, text, 편집불가)
+   - 규격 (specification, text, 편집불가)
+   - 재질 (material, text, 편집불가)
+   - 수량 (quantity, number, 편집가능, 기본값: 1)
+   - 단가 (selling_price, number, 편집가능)
+   - 금액 (amount, number, 편집불가, 계산필드)
+   - 납기일 (delivery_date, date, 편집가능)
+6. 저장
+
+---
+
+### Case 2: 로그가 8번까지 나오는데 화면에 안 보임
+
+**원인:**
+- React 리렌더링 문제
+- 화면관리 시스템의 상태 동기화 문제
+
+**해결:**
+1. 브라우저 개발자 도구 → Elements 탭
+2. `#component-comp_5jdmuzai .border.rounded-md table tbody` 찾기
+3. 실제 DOM에 `<tr>` 요소가 추가되었는지 확인
+4. 추가되었다면 CSS 문제 (display: none 등)
+5. 추가 안 되었다면 컴포넌트 렌더링 문제
+
+---
+
+### Case 3: 로그가 5번까지만 나오고 멈춤
+
+**원인:**
+- `onChange` 콜백이 제대로 전달되지 않음
+- Renderer의 `updateComponent`가 작동하지 않음
+
+**해결:**
+- 이미 수정한 `ModalRepeaterTableRenderer.tsx` 코드 확인
+- `handleChange` 함수가 호출되는지 확인
+
+---
+
+## 📝 다음 단계
+
+위 로그를 **모두** 복사해서 공유해주세요. 특히:
+
+1. **🎬 마운트 로그의 `columnsLength` 값**
+2. **로그가 어디까지 출력되는지**
+3. **Elements 탭에서 `tbody` 내부 HTML 구조**
+
+이 정보로 정확한 문제를 진단할 수 있습니다!
+
diff --git a/frontend/app/(main)/admin/dashboard/DashboardListClient.tsx b/frontend/app/(main)/admin/dashboard/DashboardListClient.tsx
index d8eeae61..e7680584 100644
--- a/frontend/app/(main)/admin/dashboard/DashboardListClient.tsx
+++ b/frontend/app/(main)/admin/dashboard/DashboardListClient.tsx
@@ -18,32 +18,26 @@ import { Pagination, PaginationInfo } from "@/components/common/Pagination";
 import { DeleteConfirmModal } from "@/components/common/DeleteConfirmModal";
 import { Plus, Search, Edit, Trash2, Copy, MoreVertical, AlertCircle, RefreshCw } from "lucide-react";
 
-interface DashboardListClientProps {
-  initialDashboards: Dashboard[];
-  initialPagination: {
-    total: number;
-    page: number;
-    limit: number;
-  };
-}
-
 /**
  * 대시보드 목록 클라이언트 컴포넌트
+ * - CSR 방식으로 초기 데이터 로드
  * - 대시보드 목록 조회
  * - 대시보드 생성/수정/삭제/복사
  */
-export default function DashboardListClient({ initialDashboards, initialPagination }: DashboardListClientProps) {
+export default function DashboardListClient() {
   const router = useRouter();
   const { toast } = useToast();
-  const [dashboards, setDashboards] = useState<Dashboard[]>(initialDashboards);
-  const [loading, setLoading] = useState(false); // 초기 로딩은 서버에서 완료
+  
+  // 상태 관리
+  const [dashboards, setDashboards] = useState<Dashboard[]>([]);
+  const [loading, setLoading] = useState(true); // CSR이므로 초기 로딩 true
   const [error, setError] = useState<string | null>(null);
   const [searchTerm, setSearchTerm] = useState("");
 
   // 페이지네이션 상태
-  const [currentPage, setCurrentPage] = useState(initialPagination.page);
-  const [pageSize, setPageSize] = useState(initialPagination.limit);
-  const [totalCount, setTotalCount] = useState(initialPagination.total);
+  const [currentPage, setCurrentPage] = useState(1);
+  const [pageSize, setPageSize] = useState(10);
+  const [totalCount, setTotalCount] = useState(0);
 
   // 모달 상태
   const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
@@ -73,17 +67,8 @@ export default function DashboardListClient({ initialDashboards, initialPaginati
     }
   };
 
-  // 초기 로드 여부 추적
-  const [isInitialLoad, setIsInitialLoad] = useState(true);
-
+  // 검색어/페이지 변경 시 fetch (초기 로딩 포함)
   useEffect(() => {
-    // 초기 로드는 건너뛰기 (서버에서 이미 데이터를 가져왔음)
-    if (isInitialLoad) {
-      setIsInitialLoad(false);
-      return;
-    }
-
-    // 이후 검색어/페이지 변경 시에만 fetch
     loadDashboards();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [searchTerm, currentPage, pageSize]);
@@ -91,7 +76,7 @@ export default function DashboardListClient({ initialDashboards, initialPaginati
   // 페이지네이션 정보 계산
   const paginationInfo: PaginationInfo = {
     currentPage,
-    totalPages: Math.ceil(totalCount / pageSize),
+    totalPages: Math.ceil(totalCount / pageSize) || 1,
     totalItems: totalCount,
     itemsPerPage: pageSize,
     startItem: totalCount === 0 ? 0 : (currentPage - 1) * pageSize + 1,
@@ -300,7 +285,14 @@ export default function DashboardListClient({ initialDashboards, initialPaginati
               <TableBody>
                 {dashboards.map((dashboard) => (
                   <TableRow key={dashboard.id} className="hover:bg-muted/50 border-b transition-colors">
-                    <TableCell className="h-16 text-sm font-medium">{dashboard.title}</TableCell>
+                    <TableCell className="h-16 text-sm font-medium">
+                      <button
+                        onClick={() => router.push(`/admin/dashboard/edit/${dashboard.id}`)}
+                        className="hover:text-primary cursor-pointer text-left transition-colors hover:underline"
+                      >
+                        {dashboard.title}
+                      </button>
+                    </TableCell>
                     <TableCell className="text-muted-foreground h-16 max-w-md truncate text-sm">
                       {dashboard.description || "-"}
                     </TableCell>
@@ -355,7 +347,12 @@ export default function DashboardListClient({ initialDashboards, initialPaginati
                 {/* 헤더 */}
                 <div className="mb-4 flex items-start justify-between">
                   <div className="flex-1">
-                    <h3 className="text-base font-semibold">{dashboard.title}</h3>
+                    <button
+                      onClick={() => router.push(`/admin/dashboard/edit/${dashboard.id}`)}
+                      className="hover:text-primary cursor-pointer text-left transition-colors hover:underline"
+                    >
+                      <h3 className="text-base font-semibold">{dashboard.title}</h3>
+                    </button>
                     <p className="text-muted-foreground mt-1 text-sm">{dashboard.id}</p>
                   </div>
                 </div>
diff --git a/frontend/app/(main)/admin/dashboard/page.tsx b/frontend/app/(main)/admin/dashboard/page.tsx
index 8d78600c..7d09bafc 100644
--- a/frontend/app/(main)/admin/dashboard/page.tsx
+++ b/frontend/app/(main)/admin/dashboard/page.tsx
@@ -1,73 +1,22 @@
 import DashboardListClient from "@/app/(main)/admin/dashboard/DashboardListClient";
-import { cookies } from "next/headers";
 
 /**
- * 서버에서 초기 대시보드 목록 fetch
+ * 대시보드 관리 페이지
+ * - 클라이언트 컴포넌트를 렌더링하는 래퍼
+ * - 초기 로딩부터 CSR로 처리
  */
-async function getInitialDashboards() {
-  try {
-    // 서버 사이드 전용: 백엔드 API 직접 호출
-    // 도커 네트워크 내부에서는 서비스 이름 사용, 로컬에서는 127.0.0.1
-    const backendUrl = process.env.SERVER_API_URL || "http://backend:8080";
-
-    // 쿠키에서 authToken 추출
-    const cookieStore = await cookies();
-    const authToken = cookieStore.get("authToken")?.value;
-
-    if (!authToken) {
-      // 토큰이 없으면 빈 데이터 반환 (클라이언트에서 로드)
-      return {
-        dashboards: [],
-        pagination: { total: 0, page: 1, limit: 10 },
-      };
-    }
-
-    const response = await fetch(`${backendUrl}/api/dashboards/my?page=1&limit=10`, {
-      cache: "no-store", // 항상 최신 데이터
-      headers: {
-        "Content-Type": "application/json",
-        Authorization: `Bearer ${authToken}`, // Authorization 헤더로 전달
-      },
-    });
-
-    if (!response.ok) {
-      throw new Error(`Failed to fetch dashboards: ${response.status}`);
-    }
-
-    const data = await response.json();
-    return {
-      dashboards: data.data || [],
-      pagination: data.pagination || { total: 0, page: 1, limit: 10 },
-    };
-  } catch (error) {
-    console.error("Server-side fetch error:", error);
-    // 에러 발생 시 빈 데이터 반환 (클라이언트에서 재시도 가능)
-    return {
-      dashboards: [],
-      pagination: { total: 0, page: 1, limit: 10 },
-    };
-  }
-}
-
-/**
- * 대시보드 관리 페이지 (서버 컴포넌트)
- * - 페이지 헤더 + 초기 데이터를 서버에서 렌더링
- * - 클라이언트 컴포넌트로 초기 데이터 전달
- */
-export default async function DashboardListPage() {
-  const initialData = await getInitialDashboards();
-
+export default function DashboardListPage() {
   return (
     <div className="bg-background flex min-h-screen flex-col">
       <div className="space-y-6 p-6">
-        {/* 페이지 헤더 (서버에서 렌더링) */}
+        {/* 페이지 헤더 */}
         <div className="space-y-2 border-b pb-4">
           <h1 className="text-3xl font-bold tracking-tight">대시보드 관리</h1>
           <p className="text-muted-foreground text-sm">대시보드를 생성하고 관리할 수 있습니다</p>
         </div>
 
-        {/* 나머지 컨텐츠 (클라이언트 컴포넌트 + 서버 데이터) */}
-        <DashboardListClient initialDashboards={initialData.dashboards} initialPagination={initialData.pagination} />
+        {/* 클라이언트 컴포넌트 */}
+        <DashboardListClient />
       </div>
     </div>
   );
diff --git a/frontend/app/(main)/screens/[screenId]/page.tsx b/frontend/app/(main)/screens/[screenId]/page.tsx
index ebfbd3e7..3b75f262 100644
--- a/frontend/app/(main)/screens/[screenId]/page.tsx
+++ b/frontend/app/(main)/screens/[screenId]/page.tsx
@@ -65,6 +65,9 @@ function ScreenViewPage() {
   // 플로우 새로고침을 위한 키 (값이 변경되면 플로우 데이터가 리렌더링됨)
   const [flowRefreshKey, setFlowRefreshKey] = useState(0);
 
+  // 🆕 조건부 컨테이너 높이 추적 (컴포넌트 ID → 높이)
+  const [conditionalContainerHeights, setConditionalContainerHeights] = useState<Record<string, number>>({});
+
   // 편집 모달 상태
   const [editModalOpen, setEditModalOpen] = useState(false);
   const [editModalConfig, setEditModalConfig] = useState<{
@@ -402,19 +405,39 @@ function ScreenViewPage() {
                 (c) => (c as any).componentId === "table-search-widget"
               );
 
-              // TableSearchWidget 높이 차이를 계산하여 Y 위치 조정
+              // 디버그: 모든 컴포넌트 타입 확인
+              console.log("🔍 전체 컴포넌트 타입:", regularComponents.map(c => ({
+                id: c.id,
+                type: c.type,
+                componentType: (c as any).componentType,
+                componentId: (c as any).componentId,
+              })));
+              
+              // 🆕 조건부 컨테이너들을 찾기
+              const conditionalContainers = regularComponents.filter(
+                (c) => (c as any).componentId === "conditional-container" || (c as any).componentType === "conditional-container"
+              );
+              
+              console.log("🔍 조건부 컨테이너 발견:", conditionalContainers.map(c => ({
+                id: c.id,
+                y: c.position.y,
+                size: c.size,
+              })));
+
+              // TableSearchWidget 및 조건부 컨테이너 높이 차이를 계산하여 Y 위치 조정
               const adjustedComponents = regularComponents.map((component) => {
                 const isTableSearchWidget = (component as any).componentId === "table-search-widget";
+                const isConditionalContainer = (component as any).componentId === "conditional-container";
                 
-                if (isTableSearchWidget) {
-                  // TableSearchWidget 자체는 조정하지 않음
+                if (isTableSearchWidget || isConditionalContainer) {
+                  // 자기 자신은 조정하지 않음
                   return component;
                 }
                 
                 let totalHeightAdjustment = 0;
                 
+                // TableSearchWidget 높이 조정
                 for (const widget of tableSearchWidgets) {
-                  // 현재 컴포넌트가 이 위젯 아래에 있는지 확인
                   const isBelow = component.position.y > widget.position.y;
                   const heightDiff = getHeightDiff(screenId, widget.id);
                   
@@ -423,6 +446,31 @@ function ScreenViewPage() {
                   }
                 }
                 
+                // 🆕 조건부 컨테이너 높이 조정
+                for (const container of conditionalContainers) {
+                  const isBelow = component.position.y > container.position.y;
+                  const actualHeight = conditionalContainerHeights[container.id];
+                  const originalHeight = container.size?.height || 200;
+                  const heightDiff = actualHeight ? (actualHeight - originalHeight) : 0;
+                  
+                  console.log(`🔍 높이 조정 체크:`, {
+                    componentId: component.id,
+                    componentY: component.position.y,
+                    containerY: container.position.y,
+                    isBelow,
+                    actualHeight,
+                    originalHeight,
+                    heightDiff,
+                    containerId: container.id,
+                    containerSize: container.size,
+                  });
+                  
+                  if (isBelow && heightDiff > 0) {
+                    totalHeightAdjustment += heightDiff;
+                    console.log(`📐 컴포넌트 ${component.id} 위치 조정: ${heightDiff}px (조건부 컨테이너 ${container.id})`);
+                  }
+                }
+                
                 if (totalHeightAdjustment > 0) {
                   return {
                     ...component,
@@ -491,6 +539,12 @@ function ScreenViewPage() {
                         onFormDataChange={(fieldName, value) => {
                           setFormData((prev) => ({ ...prev, [fieldName]: value }));
                         }}
+                        onHeightChange={(componentId, newHeight) => {
+                          setConditionalContainerHeights((prev) => ({
+                            ...prev,
+                            [componentId]: newHeight,
+                          }));
+                        }}
                       >
                         {/* 자식 컴포넌트들 */}
                         {(component.type === "group" || component.type === "container" || component.type === "area") &&
diff --git a/frontend/app/test-autocomplete-mapping/page.tsx b/frontend/app/test-autocomplete-mapping/page.tsx
new file mode 100644
index 00000000..234c75f6
--- /dev/null
+++ b/frontend/app/test-autocomplete-mapping/page.tsx
@@ -0,0 +1,141 @@
+"use client";
+
+import React, { useState } from "react";
+import { AutocompleteSearchInputComponent } from "@/lib/registry/components/autocomplete-search-input/AutocompleteSearchInputComponent";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Label } from "@/components/ui/label";
+import { Input } from "@/components/ui/input";
+
+export default function TestAutocompleteMapping() {
+  const [selectedValue, setSelectedValue] = useState("");
+  const [customerName, setCustomerName] = useState("");
+  const [address, setAddress] = useState("");
+  const [phone, setPhone] = useState("");
+
+  return (
+    <div className="container mx-auto py-8 space-y-6">
+      <Card>
+        <CardHeader>
+          <CardTitle>AutocompleteSearchInput 필드 자동 매핑 테스트</CardTitle>
+          <CardDescription>
+            거래처를 선택하면 아래 입력 필드들이 자동으로 채워집니다
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-6">
+          {/* 검색 컴포넌트 */}
+          <div className="space-y-2">
+            <Label>거래처 검색</Label>
+            <AutocompleteSearchInputComponent
+              config={{
+                tableName: "customer_mng",
+                displayField: "customer_name",
+                valueField: "customer_code",
+                searchFields: ["customer_name", "customer_code"],
+                placeholder: "거래처명 또는 코드로 검색",
+                enableFieldMapping: true,
+                fieldMappings: [
+                  {
+                    sourceField: "customer_name",
+                    targetField: "customer_name_input",
+                    label: "거래처명",
+                  },
+                  {
+                    sourceField: "address",
+                    targetField: "address_input",
+                    label: "주소",
+                  },
+                  {
+                    sourceField: "phone",
+                    targetField: "phone_input",
+                    label: "전화번호",
+                  },
+                ],
+              }}
+              value={selectedValue}
+              onChange={(value, fullData) => {
+                setSelectedValue(value);
+                console.log("선택된 항목:", fullData);
+              }}
+            />
+          </div>
+
+          {/* 구분선 */}
+          <div className="border-t pt-6">
+            <h3 className="text-sm font-semibold mb-4">
+              자동으로 채워지는 필드들
+            </h3>
+            <div className="space-y-4">
+              {/* 거래처명 */}
+              <div className="space-y-2">
+                <Label htmlFor="customer_name_input">거래처명</Label>
+                <Input
+                  id="customer_name_input"
+                  value={customerName}
+                  onChange={(e) => setCustomerName(e.target.value)}
+                  placeholder="자동으로 채워집니다"
+                />
+              </div>
+
+              {/* 주소 */}
+              <div className="space-y-2">
+                <Label htmlFor="address_input">주소</Label>
+                <Input
+                  id="address_input"
+                  value={address}
+                  onChange={(e) => setAddress(e.target.value)}
+                  placeholder="자동으로 채워집니다"
+                />
+              </div>
+
+              {/* 전화번호 */}
+              <div className="space-y-2">
+                <Label htmlFor="phone_input">전화번호</Label>
+                <Input
+                  id="phone_input"
+                  value={phone}
+                  onChange={(e) => setPhone(e.target.value)}
+                  placeholder="자동으로 채워집니다"
+                />
+              </div>
+            </div>
+          </div>
+
+          {/* 상태 표시 */}
+          <div className="border-t pt-6">
+            <h3 className="text-sm font-semibold mb-2">현재 상태</h3>
+            <div className="p-4 bg-muted rounded-lg">
+              <pre className="text-xs">
+                {JSON.stringify(
+                  {
+                    selectedValue,
+                    customerName,
+                    address,
+                    phone,
+                  },
+                  null,
+                  2
+                )}
+              </pre>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* 사용 안내 */}
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-base">사용 방법</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-2 text-sm">
+          <ol className="list-decimal list-inside space-y-2">
+            <li>위의 검색 필드에 거래처명이나 코드를 입력하세요</li>
+            <li>드롭다운에서 원하는 거래처를 선택하세요</li>
+            <li>아래 입력 필드들이 자동으로 채워지는 것을 확인하세요</li>
+            <li>필요한 경우 자동으로 채워진 값을 수정할 수 있습니다</li>
+          </ol>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
+
diff --git a/frontend/app/test-entity-search/page.tsx b/frontend/app/test-entity-search/page.tsx
new file mode 100644
index 00000000..802024d9
--- /dev/null
+++ b/frontend/app/test-entity-search/page.tsx
@@ -0,0 +1,27 @@
+"use client";
+
+import React from "react";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+
+export default function TestEntitySearchPage() {
+  return (
+    <div className="container mx-auto space-y-6 p-6">
+      <div>
+        <h1 className="text-3xl font-bold">EntitySearchInput 테스트</h1>
+        <p className="text-muted-foreground mt-2">이 페이지는 빌드 에러로 인해 임시로 비활성화되었습니다.</p>
+      </div>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>빌드 에러 수정 중</CardTitle>
+          <CardDescription>순환 참조 문제를 해결한 후 다시 활성화됩니다.</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <p className="text-muted-foreground text-sm">
+            에러 메시지: ReferenceError: Cannot access &apos;h&apos; before initialization
+          </p>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
diff --git a/frontend/app/test-order-registration/page.tsx b/frontend/app/test-order-registration/page.tsx
new file mode 100644
index 00000000..fe6a005f
--- /dev/null
+++ b/frontend/app/test-order-registration/page.tsx
@@ -0,0 +1,27 @@
+"use client";
+
+import React from "react";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+
+export default function TestOrderRegistrationPage() {
+  return (
+    <div className="container mx-auto space-y-6 p-6">
+      <div>
+        <h1 className="text-3xl font-bold">수주 등록 테스트</h1>
+        <p className="text-muted-foreground mt-2">이 페이지는 빌드 에러로 인해 임시로 비활성화되었습니다.</p>
+      </div>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>빌드 에러 수정 중</CardTitle>
+          <CardDescription>ModalRepeaterTable 순환 참조 문제를 해결한 후 다시 활성화됩니다.</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <p className="text-muted-foreground text-sm">
+            에러 메시지: ReferenceError: Cannot access &apos;h&apos; before initialization
+          </p>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
diff --git a/frontend/components/admin/dashboard/CanvasElement.tsx b/frontend/components/admin/dashboard/CanvasElement.tsx
index ce08c522..2bb85051 100644
--- a/frontend/components/admin/dashboard/CanvasElement.tsx
+++ b/frontend/components/admin/dashboard/CanvasElement.tsx
@@ -812,69 +812,70 @@ export function CanvasElement({
       }}
       onMouseDown={handleMouseDown}
     >
-      {/* 헤더 */}
-      <div className="flex cursor-move items-center justify-between px-2 py-1">
-        <div className="flex items-center gap-2">
-          {/* 차트 타입 전환 드롭다운 (차트일 경우만) */}
-          {element.type === "chart" && (
-            <Select
-              value={element.subtype}
-              onValueChange={(newSubtype: string) => {
-                onUpdate(element.id, { subtype: newSubtype as ElementSubtype });
-              }}
-            >
-              <SelectTrigger
-                className="h-6 w-[120px] text-[11px]"
-                onClick={(e) => e.stopPropagation()}
-                onMouseDown={(e) => e.stopPropagation()}
+      {/* 헤더 - showHeader가 false이면 숨김 */}
+      {element.showHeader !== false && (
+        <div className="flex cursor-move items-center justify-between px-2 py-1">
+          <div className="flex items-center gap-2">
+            {/* 차트 타입 전환 드롭다운 (차트일 경우만) */}
+            {element.type === "chart" && (
+              <Select
+                value={element.subtype}
+                onValueChange={(newSubtype: string) => {
+                  onUpdate(element.id, { subtype: newSubtype as ElementSubtype });
+                }}
               >
-                <SelectValue />
-              </SelectTrigger>
-              <SelectContent className="z-[99999]" onClick={(e) => e.stopPropagation()}>
-                {getChartCategory(element.subtype) === "axis-based" ? (
-                  <SelectGroup>
-                    <SelectLabel>축 기반 차트</SelectLabel>
-                    <SelectItem value="bar">바 차트</SelectItem>
-                    <SelectItem value="horizontal-bar">수평 바 차트</SelectItem>
-                    <SelectItem value="stacked-bar">누적 바 차트</SelectItem>
-                    <SelectItem value="line">꺾은선 차트</SelectItem>
-                    <SelectItem value="area">영역 차트</SelectItem>
-                    <SelectItem value="combo">콤보 차트</SelectItem>
-                  </SelectGroup>
-                ) : (
-                  <SelectGroup>
-                    <SelectLabel>원형 차트</SelectLabel>
-                    <SelectItem value="pie">원형 차트</SelectItem>
-                    <SelectItem value="donut">도넛 차트</SelectItem>
-                  </SelectGroup>
-                )}
-              </SelectContent>
-            </Select>
-          )}
-          {/* 제목 */}
-          {!element.type || element.type !== "chart" ? (
-            element.subtype === "map-summary-v2" && !element.customTitle ? null : (
-              <span className="text-foreground text-xs font-bold">{element.customTitle || element.title}</span>
-            )
-          ) : null}
+                <SelectTrigger
+                  className="h-6 w-[120px] text-[11px]"
+                  onClick={(e) => e.stopPropagation()}
+                  onMouseDown={(e) => e.stopPropagation()}
+                >
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent className="z-[99999]" onClick={(e) => e.stopPropagation()}>
+                  {getChartCategory(element.subtype) === "axis-based" ? (
+                    <SelectGroup>
+                      <SelectLabel>축 기반 차트</SelectLabel>
+                      <SelectItem value="bar">바 차트</SelectItem>
+                      <SelectItem value="horizontal-bar">수평 바 차트</SelectItem>
+                      <SelectItem value="stacked-bar">누적 바 차트</SelectItem>
+                      <SelectItem value="line">꺾은선 차트</SelectItem>
+                      <SelectItem value="area">영역 차트</SelectItem>
+                      <SelectItem value="combo">콤보 차트</SelectItem>
+                    </SelectGroup>
+                  ) : (
+                    <SelectGroup>
+                      <SelectLabel>원형 차트</SelectLabel>
+                      <SelectItem value="pie">원형 차트</SelectItem>
+                      <SelectItem value="donut">도넛 차트</SelectItem>
+                    </SelectGroup>
+                  )}
+                </SelectContent>
+              </Select>
+            )}
+            {/* 제목 */}
+            {!element.type || element.type !== "chart" ? (
+              element.subtype === "map-summary-v2" && !element.customTitle ? null : (
+                <span className="text-foreground text-xs font-bold">{element.customTitle || element.title}</span>
+              )
+            ) : null}
+          </div>
         </div>
-        <div className="flex gap-1">
-          {/* 삭제 버튼 */}
-          <Button
-            variant="ghost"
-            size="icon"
-            className="element-close hover:bg-destructive text-muted-foreground h-5 w-5 hover:text-white"
-            onClick={handleRemove}
-            onMouseDown={(e) => e.stopPropagation()}
-            title="삭제"
-          >
-            <X className="h-3 w-3" />
-          </Button>
-        </div>
-      </div>
+      )}
+
+      {/* 삭제 버튼 - 항상 표시 (우측 상단 절대 위치) */}
+      <Button
+        variant="ghost"
+        size="icon"
+        className="element-close hover:bg-destructive text-muted-foreground absolute top-1 right-1 z-10 h-5 w-5 hover:text-white"
+        onClick={handleRemove}
+        onMouseDown={(e) => e.stopPropagation()}
+        title="삭제"
+      >
+        <X className="h-3 w-3" />
+      </Button>
 
       {/* 내용 */}
-      <div className="relative h-[calc(100%-32px)] px-2 pb-2">
+      <div className={`relative px-2 pb-2 ${element.showHeader !== false ? "h-[calc(100%-32px)]" : "h-full"}`}>
         {element.type === "chart" ? (
           // 차트 렌더링
           <div className="bg-background h-full w-full">
diff --git a/frontend/components/admin/dashboard/QueryEditor.tsx b/frontend/components/admin/dashboard/QueryEditor.tsx
index 8f0b65e0..50e57689 100644
--- a/frontend/components/admin/dashboard/QueryEditor.tsx
+++ b/frontend/components/admin/dashboard/QueryEditor.tsx
@@ -1,12 +1,11 @@
 "use client";
 
 import React, { useState, useCallback } from "react";
-import { ChartDataSource, QueryResult, ChartConfig } from "./types";
+import { ChartDataSource, QueryResult } from "./types";
 import { ExternalDbConnectionAPI } from "@/lib/api/externalDbConnection";
 import { dashboardApi } from "@/lib/api/dashboard";
 import { Button } from "@/components/ui/button";
 import { Textarea } from "@/components/ui/textarea";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { Label } from "@/components/ui/label";
 import { Card } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
@@ -14,7 +13,6 @@ import { Alert, AlertDescription } from "@/components/ui/alert";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
 import { Play, Loader2, Database, Code, ChevronDown, ChevronRight } from "lucide-react";
-import { applyQueryFilters } from "./utils/queryHelpers";
 
 interface QueryEditorProps {
   dataSource?: ChartDataSource;
@@ -106,7 +104,6 @@ export function QueryEditor({ dataSource, onDataSourceChange, onQueryTest }: Que
         ...dataSource,
         type: "database",
         query: query.trim(),
-        refreshInterval: dataSource?.refreshInterval ?? 0,
         lastExecuted: new Date().toISOString(),
       });
     } catch (err) {
@@ -168,8 +165,8 @@ ORDER BY 하위부서수 DESC`,
       {/* 쿼리 에디터 헤더 */}
       <div className="flex items-center justify-between">
         <div className="flex items-center gap-1.5">
-          <Database className="h-3.5 w-3.5 text-primary" />
-          <h4 className="text-xs font-semibold text-foreground">SQL 쿼리 에디터</h4>
+          <Database className="text-primary h-3.5 w-3.5" />
+          <h4 className="text-foreground text-xs font-semibold">SQL 쿼리 에디터</h4>
         </div>
         <Button onClick={executeQuery} disabled={isExecuting || !query.trim()} size="sm" className="h-7 text-xs">
           {isExecuting ? (
@@ -188,7 +185,7 @@ ORDER BY 하위부서수 DESC`,
 
       {/* 샘플 쿼리 아코디언 */}
       <Collapsible open={sampleQueryOpen} onOpenChange={setSampleQueryOpen}>
-        <CollapsibleTrigger className="flex w-full items-center gap-1.5 rounded border border-border bg-muted px-2 py-1.5 text-xs font-medium text-foreground transition-colors hover:bg-muted">
+        <CollapsibleTrigger className="border-border bg-muted text-foreground hover:bg-muted flex w-full items-center gap-1.5 rounded border px-2 py-1.5 text-xs font-medium transition-colors">
           {sampleQueryOpen ? <ChevronDown className="h-3 w-3" /> : <ChevronRight className="h-3 w-3" />}
           샘플 쿼리
         </CollapsibleTrigger>
@@ -196,33 +193,33 @@ ORDER BY 하위부서수 DESC`,
           <div className="flex flex-wrap gap-1.5">
             <button
               onClick={() => insertSampleQuery("users")}
-              className="flex items-center gap-1 rounded border border-border bg-background px-2 py-1 text-[11px] transition-colors hover:bg-muted"
+              className="border-border bg-background hover:bg-muted flex items-center gap-1 rounded border px-2 py-1 text-[11px] transition-colors"
             >
               <Code className="h-3 w-3" />
               부서별 사용자
             </button>
             <button
               onClick={() => insertSampleQuery("dept")}
-              className="flex items-center gap-1 rounded border border-border bg-background px-2 py-1 text-[11px] transition-colors hover:bg-muted"
+              className="border-border bg-background hover:bg-muted flex items-center gap-1 rounded border px-2 py-1 text-[11px] transition-colors"
             >
               <Code className="h-3 w-3" />
               부서 정보
             </button>
             <button
               onClick={() => insertSampleQuery("usersByDate")}
-              className="rounded border border-border bg-background px-2 py-1 text-[11px] transition-colors hover:bg-muted"
+              className="border-border bg-background hover:bg-muted rounded border px-2 py-1 text-[11px] transition-colors"
             >
               월별 가입 추이
             </button>
             <button
               onClick={() => insertSampleQuery("usersByPosition")}
-              className="rounded border border-border bg-background px-2 py-1 text-[11px] transition-colors hover:bg-muted"
+              className="border-border bg-background hover:bg-muted rounded border px-2 py-1 text-[11px] transition-colors"
             >
               직급별 분포
             </button>
             <button
               onClick={() => insertSampleQuery("deptHierarchy")}
-              className="rounded border border-border bg-background px-2 py-1 text-[11px] transition-colors hover:bg-muted"
+              className="border-border bg-background hover:bg-muted rounded border px-2 py-1 text-[11px] transition-colors"
             >
               부서 계층
             </button>
@@ -247,46 +244,6 @@ ORDER BY 하위부서수 DESC`,
         </div>
       </div>
 
-      {/* 새로고침 간격 설정 */}
-      <div className="flex items-center gap-2">
-        <Label className="text-xs">자동 새로고침:</Label>
-        <Select
-          value={String(dataSource?.refreshInterval ?? 0)}
-          onValueChange={(value) =>
-            onDataSourceChange({
-              ...dataSource,
-              type: "database",
-              query,
-              refreshInterval: parseInt(value),
-            })
-          }
-        >
-          <SelectTrigger className="h-7 w-24 text-xs">
-            <SelectValue />
-          </SelectTrigger>
-          <SelectContent className="z-[99999]">
-            <SelectItem value="0" className="text-xs">
-              수동
-            </SelectItem>
-            <SelectItem value="10000" className="text-xs">
-              10초
-            </SelectItem>
-            <SelectItem value="30000" className="text-xs">
-              30초
-            </SelectItem>
-            <SelectItem value="60000" className="text-xs">
-              1분
-            </SelectItem>
-            <SelectItem value="300000" className="text-xs">
-              5분
-            </SelectItem>
-            <SelectItem value="600000" className="text-xs">
-              10분
-            </SelectItem>
-          </SelectContent>
-        </Select>
-      </div>
-
       {/* 오류 메시지 */}
       {error && (
         <Alert variant="destructive" className="py-2">
@@ -300,15 +257,15 @@ ORDER BY 하위부서수 DESC`,
       {/* 쿼리 결과 미리보기 */}
       {queryResult && (
         <Card>
-          <div className="border-b border-border bg-muted px-2 py-1.5">
+          <div className="border-border bg-muted border-b px-2 py-1.5">
             <div className="flex items-center justify-between">
               <div className="flex items-center gap-1.5">
-                <span className="text-xs font-medium text-foreground">쿼리 결과</span>
+                <span className="text-foreground text-xs font-medium">쿼리 결과</span>
                 <Badge variant="secondary" className="h-4 text-[10px]">
                   {queryResult.rows.length}행
                 </Badge>
               </div>
-              <span className="text-[10px] text-muted-foreground">실행 시간: {queryResult.executionTime}ms</span>
+              <span className="text-muted-foreground text-[10px]">실행 시간: {queryResult.executionTime}ms</span>
             </div>
           </div>
 
@@ -339,13 +296,13 @@ ORDER BY 하위부서수 DESC`,
                 </Table>
 
                 {queryResult.rows.length > 10 && (
-                  <div className="mt-2 text-center text-[10px] text-muted-foreground">
+                  <div className="text-muted-foreground mt-2 text-center text-[10px]">
                     ... 및 {queryResult.rows.length - 10}개 더 (미리보기는 10행까지만 표시)
                   </div>
                 )}
               </div>
             ) : (
-              <div className="py-6 text-center text-xs text-muted-foreground">결과가 없습니다.</div>
+              <div className="text-muted-foreground py-6 text-center text-xs">결과가 없습니다.</div>
             )}
           </div>
         </Card>
@@ -353,169 +310,3 @@ ORDER BY 하위부서수 DESC`,
     </div>
   );
 }
-
-/**
- * 샘플 쿼리 결과 생성 함수
- */
-function generateSampleQueryResult(query: string): QueryResult {
-  // 쿼리에서 키워드 추출하여 적절한 샘플 데이터 생성
-  const queryLower = query.toLowerCase();
-
-  // 디버깅용 로그
-  // console.log('generateSampleQueryResult called with query:', query.substring(0, 100));
-
-  // 가장 구체적인 조건부터 먼저 체크 (순서 중요!)
-  const isComparison =
-    queryLower.includes("galaxy") ||
-    queryLower.includes("갤럭시") ||
-    queryLower.includes("아이폰") ||
-    queryLower.includes("iphone");
-  const isRegional = queryLower.includes("region") || queryLower.includes("지역");
-  const isMonthly = queryLower.includes("month");
-  const isSales = queryLower.includes("sales") || queryLower.includes("매출");
-  const isUsers = queryLower.includes("users") || queryLower.includes("사용자");
-  const isProducts = queryLower.includes("product") || queryLower.includes("상품");
-  const isWeekly = queryLower.includes("week");
-
-  // console.log('Sample data type detection:', {
-  //   isComparison,
-  //   isRegional,
-  //   isWeekly,
-  //   isProducts,
-  //   isMonthly,
-  //   isSales,
-  //   isUsers,
-  //   querySnippet: query.substring(0, 200)
-  // });
-
-  let columns: string[];
-  let rows: Record<string, any>[];
-
-  // 더 구체적인 조건부터 먼저 체크 (순서 중요!)
-  if (isComparison) {
-    // console.log('✅ Using COMPARISON data');
-    // 제품 비교 데이터 (다중 시리즈)
-    columns = ["month", "galaxy_sales", "iphone_sales", "other_sales"];
-    rows = [
-      { month: "2024-01", galaxy_sales: 450000, iphone_sales: 620000, other_sales: 130000 },
-      { month: "2024-02", galaxy_sales: 520000, iphone_sales: 680000, other_sales: 150000 },
-      { month: "2024-03", galaxy_sales: 480000, iphone_sales: 590000, other_sales: 110000 },
-      { month: "2024-04", galaxy_sales: 610000, iphone_sales: 650000, other_sales: 160000 },
-      { month: "2024-05", galaxy_sales: 720000, iphone_sales: 780000, other_sales: 180000 },
-      { month: "2024-06", galaxy_sales: 680000, iphone_sales: 690000, other_sales: 170000 },
-      { month: "2024-07", galaxy_sales: 750000, iphone_sales: 800000, other_sales: 170000 },
-      { month: "2024-08", galaxy_sales: 690000, iphone_sales: 720000, other_sales: 170000 },
-      { month: "2024-09", galaxy_sales: 730000, iphone_sales: 750000, other_sales: 170000 },
-      { month: "2024-10", galaxy_sales: 800000, iphone_sales: 810000, other_sales: 170000 },
-      { month: "2024-11", galaxy_sales: 870000, iphone_sales: 880000, other_sales: 170000 },
-      { month: "2024-12", galaxy_sales: 950000, iphone_sales: 990000, other_sales: 160000 },
-    ];
-    // COMPARISON 데이터를 반환하고 함수 종료
-    // console.log('COMPARISON data generated:', {
-    //   columns,
-    //   rowCount: rows.length,
-    //   sampleRow: rows[0],
-    //   allRows: rows,
-    //   fieldTypes: {
-    //     month: typeof rows[0].month,
-    //     galaxy_sales: typeof rows[0].galaxy_sales,
-    //     iphone_sales: typeof rows[0].iphone_sales,
-    //     other_sales: typeof rows[0].other_sales
-    //   },
-    //   firstFewRows: rows.slice(0, 3),
-    //   lastFewRows: rows.slice(-3)
-    // });
-    return {
-      columns,
-      rows,
-      totalRows: rows.length,
-      executionTime: Math.floor(Math.random() * 200) + 100,
-    };
-  } else if (isRegional) {
-    // console.log('✅ Using REGIONAL data');
-    // 지역별 분기별 매출
-    columns = ["지역", "Q1", "Q2", "Q3", "Q4"];
-    rows = [
-      { 지역: "서울", Q1: 1200000, Q2: 1350000, Q3: 1420000, Q4: 1580000 },
-      { 지역: "경기", Q1: 980000, Q2: 1120000, Q3: 1180000, Q4: 1290000 },
-      { 지역: "부산", Q1: 650000, Q2: 720000, Q3: 780000, Q4: 850000 },
-      { 지역: "대구", Q1: 450000, Q2: 490000, Q3: 520000, Q4: 580000 },
-      { 지역: "인천", Q1: 520000, Q2: 580000, Q3: 620000, Q4: 690000 },
-      { 지역: "광주", Q1: 380000, Q2: 420000, Q3: 450000, Q4: 490000 },
-      { 지역: "대전", Q1: 410000, Q2: 460000, Q3: 490000, Q4: 530000 },
-    ];
-  } else if (isWeekly && isUsers) {
-    // console.log('✅ Using USERS data');
-    // 사용자 가입 추이
-    columns = ["week", "new_users"];
-    rows = [
-      { week: "2024-W10", new_users: 23 },
-      { week: "2024-W11", new_users: 31 },
-      { week: "2024-W12", new_users: 28 },
-      { week: "2024-W13", new_users: 35 },
-      { week: "2024-W14", new_users: 42 },
-      { week: "2024-W15", new_users: 38 },
-      { week: "2024-W16", new_users: 45 },
-      { week: "2024-W17", new_users: 52 },
-      { week: "2024-W18", new_users: 48 },
-      { week: "2024-W19", new_users: 55 },
-      { week: "2024-W20", new_users: 61 },
-      { week: "2024-W21", new_users: 58 },
-    ];
-  } else if (isProducts && !isComparison) {
-    // console.log('✅ Using PRODUCTS data');
-    // 상품별 판매량
-    columns = ["product_name", "total_sold", "revenue"];
-    rows = [
-      { product_name: "스마트폰", total_sold: 156, revenue: 234000000 },
-      { product_name: "노트북", total_sold: 89, revenue: 178000000 },
-      { product_name: "태블릿", total_sold: 134, revenue: 67000000 },
-      { product_name: "이어폰", total_sold: 267, revenue: 26700000 },
-      { product_name: "스마트워치", total_sold: 98, revenue: 49000000 },
-      { product_name: "키보드", total_sold: 78, revenue: 15600000 },
-      { product_name: "마우스", total_sold: 145, revenue: 8700000 },
-      { product_name: "모니터", total_sold: 67, revenue: 134000000 },
-      { product_name: "프린터", total_sold: 34, revenue: 17000000 },
-      { product_name: "웹캠", total_sold: 89, revenue: 8900000 },
-    ];
-  } else if (isMonthly && isSales && !isComparison) {
-    // console.log('✅ Using MONTHLY SALES data');
-    // 월별 매출 데이터
-    columns = ["month", "sales", "order_count"];
-    rows = [
-      { month: "2024-01", sales: 1200000, order_count: 45 },
-      { month: "2024-02", sales: 1350000, order_count: 52 },
-      { month: "2024-03", sales: 1180000, order_count: 41 },
-      { month: "2024-04", sales: 1420000, order_count: 58 },
-      { month: "2024-05", sales: 1680000, order_count: 67 },
-      { month: "2024-06", sales: 1540000, order_count: 61 },
-      { month: "2024-07", sales: 1720000, order_count: 71 },
-      { month: "2024-08", sales: 1580000, order_count: 63 },
-      { month: "2024-09", sales: 1650000, order_count: 68 },
-      { month: "2024-10", sales: 1780000, order_count: 75 },
-      { month: "2024-11", sales: 1920000, order_count: 82 },
-      { month: "2024-12", sales: 2100000, order_count: 89 },
-    ];
-  } else {
-    // console.log('⚠️ Using DEFAULT data');
-    // 기본 샘플 데이터
-    columns = ["category", "value", "count"];
-    rows = [
-      { category: "A", value: 100, count: 10 },
-      { category: "B", value: 150, count: 15 },
-      { category: "C", value: 120, count: 12 },
-      { category: "D", value: 180, count: 18 },
-      { category: "E", value: 90, count: 9 },
-      { category: "F", value: 200, count: 20 },
-      { category: "G", value: 110, count: 11 },
-      { category: "H", value: 160, count: 16 },
-    ];
-  }
-
-  return {
-    columns,
-    rows,
-    totalRows: rows.length,
-    executionTime: Math.floor(Math.random() * 200) + 100, // 100-300ms
-  };
-}
diff --git a/frontend/components/admin/dashboard/WidgetConfigSidebar.tsx b/frontend/components/admin/dashboard/WidgetConfigSidebar.tsx
index a18abf9a..db608645 100644
--- a/frontend/components/admin/dashboard/WidgetConfigSidebar.tsx
+++ b/frontend/components/admin/dashboard/WidgetConfigSidebar.tsx
@@ -46,7 +46,7 @@ const needsDataSource = (subtype: ElementSubtype): boolean => {
     "chart",
     "map-summary-v2",
     "risk-alert-v2",
-    "yard-management-3d",
+    // "yard-management-3d", // 데이터 탭 불필요 (레이아웃 선택만 사용)
     "todo",
     "document",
     "work-history",
@@ -449,13 +449,30 @@ export function WidgetConfigSidebar({ element, isOpen, onClose, onApply }: Widge
               </div>
             </div>
 
+            {/* 레이아웃 선택 (야드 관리 3D 위젯 전용) */}
+            {element.subtype === "yard-management-3d" && (
+              <div className="bg-background rounded-lg p-3 shadow-sm">
+                <Label htmlFor="layout-id" className="mb-2 block text-xs font-semibold">
+                  레이아웃 선택
+                </Label>
+                <p className="text-muted-foreground mb-2 text-xs">표시할 디지털 트윈 레이아웃을 선택하세요</p>
+                <div className="text-muted-foreground text-xs">
+                  <p>위젯 내부에서 레이아웃을 선택할 수 있습니다.</p>
+                  <p className="mt-1">편집 모드에서 레이아웃 목록을 확인하고 선택하세요.</p>
+                </div>
+              </div>
+            )}
+
             {/* 자동 새로고침 설정 (지도 위젯 전용) */}
             {element.subtype === "map-summary-v2" && (
               <div className="bg-background rounded-lg p-3 shadow-sm">
                 <Label htmlFor="refresh-interval" className="mb-2 block text-xs font-semibold">
                   자동 새로고침 간격
                 </Label>
-                <Select value={refreshInterval.toString()} onValueChange={(value) => setRefreshInterval(parseInt(value))}>
+                <Select
+                  value={refreshInterval.toString()}
+                  onValueChange={(value) => setRefreshInterval(parseInt(value))}
+                >
                   <SelectTrigger id="refresh-interval" className="h-9 text-sm">
                     <SelectValue placeholder="간격 선택" />
                   </SelectTrigger>
@@ -579,30 +596,16 @@ export function WidgetConfigSidebar({ element, isOpen, onClose, onApply }: Widge
                   refreshInterval={element.chartConfig?.refreshInterval || 5}
                   markerType={element.chartConfig?.markerType || "circle"}
                   onRefreshIntervalChange={(interval) => {
-                    setElement((prev) =>
-                      prev
-                        ? {
-                            ...prev,
-                            chartConfig: {
-                              ...prev.chartConfig,
-                              refreshInterval: interval,
-                            },
-                          }
-                        : prev
-                    );
+                    setChartConfig((prev) => ({
+                      ...prev,
+                      refreshInterval: interval,
+                    }));
                   }}
                   onMarkerTypeChange={(type) => {
-                    setElement((prev) =>
-                      prev
-                        ? {
-                            ...prev,
-                            chartConfig: {
-                              ...prev.chartConfig,
-                              markerType: type,
-                            },
-                          }
-                        : prev
-                    );
+                    setChartConfig((prev) => ({
+                      ...prev,
+                      markerType: type,
+                    }));
                   }}
                 />
               )}
@@ -619,20 +622,20 @@ export function WidgetConfigSidebar({ element, isOpen, onClose, onApply }: Widge
         <Button variant="outline" onClick={onClose} className="h-9 flex-1 text-sm">
           취소
         </Button>
-        <Button 
-          onClick={handleApply} 
+        <Button
+          onClick={handleApply}
           className="h-9 flex-1 text-sm"
           disabled={
             // 다중 데이터 소스 위젯: 데이터 소스가 있는데 endpoint가 비어있으면 비활성화
             // (데이터 소스가 없는 건 OK - 연결 해제하는 경우)
-            (element?.subtype === "map-summary-v2" || 
-             element?.subtype === "chart" || 
-             element?.subtype === "list-v2" || 
-             element?.subtype === "custom-metric-v2" || 
-             element?.subtype === "risk-alert-v2") &&
-            dataSources && 
-            dataSources.length > 0 && 
-            dataSources.some(ds => ds.type === "api" && !ds.endpoint)
+            (element?.subtype === "map-summary-v2" ||
+              element?.subtype === "chart" ||
+              element?.subtype === "list-v2" ||
+              element?.subtype === "custom-metric-v2" ||
+              element?.subtype === "risk-alert-v2") &&
+            dataSources &&
+            dataSources.length > 0 &&
+            dataSources.some((ds) => ds.type === "api" && !ds.endpoint)
           }
         >
           적용
diff --git a/frontend/components/admin/dashboard/data-sources/MultiApiConfig.tsx b/frontend/components/admin/dashboard/data-sources/MultiApiConfig.tsx
index 2aba31f8..5c516491 100644
--- a/frontend/components/admin/dashboard/data-sources/MultiApiConfig.tsx
+++ b/frontend/components/admin/dashboard/data-sources/MultiApiConfig.tsx
@@ -26,8 +26,6 @@ export default function MultiApiConfig({ dataSource, onChange, onTestResult }: M
   const [sampleData, setSampleData] = useState<any[]>([]); // 샘플 데이터 (최대 3개)
   const [columnSearchTerm, setColumnSearchTerm] = useState(""); // 컬럼 검색어
 
-  console.log("🔧 MultiApiConfig - dataSource:", dataSource);
-
   // 외부 API 커넥션 목록 로드
   useEffect(() => {
     const loadApiConnections = async () => {
@@ -51,14 +49,12 @@ export default function MultiApiConfig({ dataSource, onChange, onTestResult }: M
       return;
     }
 
-    console.log("불러온 커넥션:", connection);
 
     // base_url과 endpoint_path를 조합하여 전체 URL 생성
     const fullEndpoint = connection.endpoint_path
       ? `${connection.base_url}${connection.endpoint_path}`
       : connection.base_url;
 
-    console.log("전체 엔드포인트:", fullEndpoint);
 
     const updates: Partial<ChartDataSource> = {
       endpoint: fullEndpoint,
@@ -76,7 +72,6 @@ export default function MultiApiConfig({ dataSource, onChange, onTestResult }: M
           value,
         });
       });
-      console.log("기본 헤더 적용:", headers);
     }
 
     // 인증 설정이 있으면 헤더 또는 쿼리 파라미터에 추가
@@ -91,7 +86,6 @@ export default function MultiApiConfig({ dataSource, onChange, onTestResult }: M
               key: authConfig.keyName,
               value: authConfig.keyValue,
             });
-            console.log("API Key 헤더 추가:", authConfig.keyName);
           } else if (authConfig.keyLocation === "query" && authConfig.keyName && authConfig.keyValue) {
             // UTIC API는 'key'를 사용하므로, 'apiKey'를 'key'로 변환
             const actualKeyName = authConfig.keyName === "apiKey" ? "key" : authConfig.keyName;
@@ -100,7 +94,6 @@ export default function MultiApiConfig({ dataSource, onChange, onTestResult }: M
               key: actualKeyName,
               value: authConfig.keyValue,
             });
-            console.log("API Key 쿼리 파라미터 추가:", actualKeyName, "(원본:", authConfig.keyName, ")");
           }
           break;
 
@@ -111,7 +104,6 @@ export default function MultiApiConfig({ dataSource, onChange, onTestResult }: M
               key: "Authorization",
               value: `Bearer ${authConfig.token}`,
             });
-            console.log("Bearer Token 헤더 추가");
           }
           break;
 
@@ -123,7 +115,6 @@ export default function MultiApiConfig({ dataSource, onChange, onTestResult }: M
               key: "Authorization",
               value: `Basic ${credentials}`,
             });
-            console.log("Basic Auth 헤더 추가");
           }
           break;
 
@@ -134,7 +125,6 @@ export default function MultiApiConfig({ dataSource, onChange, onTestResult }: M
               key: "Authorization",
               value: `Bearer ${authConfig.accessToken}`,
             });
-            console.log("OAuth2 Token 헤더 추가");
           }
           break;
       }
@@ -148,7 +138,6 @@ export default function MultiApiConfig({ dataSource, onChange, onTestResult }: M
       updates.queryParams = queryParams;
     }
 
-    console.log("최종 업데이트:", updates);
     onChange(updates);
   };
 
@@ -235,12 +224,12 @@ export default function MultiApiConfig({ dataSource, onChange, onTestResult }: M
 
       const result = await response.json();
 
+      console.log("🌐 [API 테스트 결과]", result.data);
+
       if (result.success) {
         // 텍스트 데이터 파싱 함수 (MapTestWidgetV2와 동일)
         const parseTextData = (text: string): any[] => {
           try {
-            console.log("🔍 텍스트 파싱 시작 (처음 500자):", text.substring(0, 500));
-            
             const lines = text.split('\n').filter(line => {
               const trimmed = line.trim();
               return trimmed && 
@@ -249,8 +238,6 @@ export default function MultiApiConfig({ dataSource, onChange, onTestResult }: M
                      !trimmed.startsWith('---');
             });
             
-            console.log(`📝 유효한 라인: ${lines.length}개`);
-            
             if (lines.length === 0) return [];
             
             const result: any[] = [];
@@ -278,7 +265,6 @@ export default function MultiApiConfig({ dataSource, onChange, onTestResult }: M
               }
             }
             
-            console.log("📊 파싱 결과:", result.length, "개");
             return result;
           } catch (error) {
             console.error("❌ 텍스트 파싱 오류:", error);
@@ -291,10 +277,8 @@ export default function MultiApiConfig({ dataSource, onChange, onTestResult }: M
         
         // 텍스트 데이터 체크 (기상청 API 등)
         if (data && typeof data === 'object' && data.text && typeof data.text === 'string') {
-          console.log("📄 텍스트 형식 데이터 감지, CSV 파싱 시도");
           const parsedData = parseTextData(data.text);
           if (parsedData.length > 0) {
-            console.log(`✅ CSV 파싱 성공: ${parsedData.length}개 행`);
             data = parsedData;
           }
         } else if (dataSource.jsonPath) {
@@ -306,6 +290,8 @@ export default function MultiApiConfig({ dataSource, onChange, onTestResult }: M
 
         const rows = Array.isArray(data) ? data : [data];
         
+        console.log("📊 [최종 파싱된 데이터]", rows);
+
         // 컬럼 목록 및 타입 추출
         if (rows.length > 0) {
           const columns = Object.keys(rows[0]);
@@ -336,9 +322,6 @@ export default function MultiApiConfig({ dataSource, onChange, onTestResult }: M
           
           // 샘플 데이터 저장 (최대 3개)
           setSampleData(rows.slice(0, 3));
-          
-          console.log("📊 발견된 컬럼:", columns);
-          console.log("📊 컬럼 타입:", types);
         }
         
         // 위도/경도 또는 coordinates 필드 또는 지역 코드 체크
@@ -422,7 +405,6 @@ export default function MultiApiConfig({ dataSource, onChange, onTestResult }: M
           id={`endpoint-${dataSource.id}`}
           value={dataSource.endpoint || ""}
           onChange={(e) => {
-            console.log("📝 API URL 변경:", e.target.value);
             onChange({ endpoint: e.target.value });
           }}
           placeholder="https://api.example.com/data"
@@ -546,6 +528,7 @@ export default function MultiApiConfig({ dataSource, onChange, onTestResult }: M
           <SelectContent>
             <SelectItem value="circle" className="text-xs">동그라미</SelectItem>
             <SelectItem value="arrow" className="text-xs">화살표</SelectItem>
+            <SelectItem value="truck" className="text-xs">트럭</SelectItem>
           </SelectContent>
         </Select>
         <p className="text-[10px] text-muted-foreground">
diff --git a/frontend/components/admin/dashboard/data-sources/MultiDatabaseConfig.tsx b/frontend/components/admin/dashboard/data-sources/MultiDatabaseConfig.tsx
index 9f5d21f3..b8eb31ef 100644
--- a/frontend/components/admin/dashboard/data-sources/MultiDatabaseConfig.tsx
+++ b/frontend/components/admin/dashboard/data-sources/MultiDatabaseConfig.tsx
@@ -199,14 +199,14 @@ export default function MultiDatabaseConfig({ dataSource, onChange, onTestResult
           onValueChange={(value: "current" | "external") => onChange({ connectionType: value })}
         >
           <div className="flex items-center space-x-2">
-            <RadioGroupItem value="current" id={"current-${dataSource.id}"} />
-            <Label htmlFor={"current-${dataSource.id}"} className="text-xs font-normal">
+            <RadioGroupItem value="current" id={`current-${dataSource.id}`} />
+            <Label htmlFor={`current-${dataSource.id}`} className="text-xs font-normal">
               현재 데이터베이스
             </Label>
           </div>
           <div className="flex items-center space-x-2">
-            <RadioGroupItem value="external" id={"external-${dataSource.id}"} />
-            <Label htmlFor={"external-${dataSource.id}"} className="text-xs font-normal">
+            <RadioGroupItem value="external" id={`external-${dataSource.id}`} />
+            <Label htmlFor={`external-${dataSource.id}`} className="text-xs font-normal">
               외부 데이터베이스
             </Label>
           </div>
@@ -216,7 +216,7 @@ export default function MultiDatabaseConfig({ dataSource, onChange, onTestResult
       {/* 외부 DB 선택 */}
       {dataSource.connectionType === "external" && (
         <div className="space-y-2">
-          <Label htmlFor={"external-conn-${dataSource.id}"} className="text-xs">
+          <Label htmlFor={`external-conn-${dataSource.id}`} className="text-xs">
             외부 데이터베이스 선택 *
           </Label>
           {loadingConnections ? (
@@ -246,7 +246,7 @@ export default function MultiDatabaseConfig({ dataSource, onChange, onTestResult
       {/* SQL 쿼리 */}
       <div className="space-y-2">
         <div className="flex items-center justify-between">
-          <Label htmlFor={"query-${dataSource.id}"} className="text-xs">
+          <Label htmlFor={`query-${dataSource.id}`} className="text-xs">
             SQL 쿼리 *
           </Label>
           <Select
@@ -313,7 +313,7 @@ ORDER BY 하위부서수 DESC`,
           </Select>
         </div>
         <Textarea
-          id={"query-${dataSource.id}"}
+          id={`query-${dataSource.id}`}
           value={dataSource.query || ""}
           onChange={(e) => onChange({ query: e.target.value })}
           placeholder="SELECT * FROM table_name WHERE ..."
@@ -340,6 +340,9 @@ ORDER BY 하위부서수 DESC`,
             <SelectItem value="arrow" className="text-xs">
               화살표
             </SelectItem>
+            <SelectItem value="truck" className="text-xs">
+              트럭
+            </SelectItem>
           </SelectContent>
         </Select>
         <p className="text-muted-foreground text-[10px]">지도에 표시할 마커의 모양을 선택합니다</p>
diff --git a/frontend/components/admin/dashboard/types.ts b/frontend/components/admin/dashboard/types.ts
index e0fdb3a1..b8026c02 100644
--- a/frontend/components/admin/dashboard/types.ts
+++ b/frontend/components/admin/dashboard/types.ts
@@ -163,7 +163,10 @@ export interface ChartDataSource {
   markerColor?: string; // 마커 색상 (예: "#ff0000")
   polygonColor?: string; // 폴리곤 색상 (예: "#0000ff")
   polygonOpacity?: number; // 폴리곤 투명도 (0.0 ~ 1.0, 기본값: 0.5)
-  markerType?: string; // 마커 종류 (circle, arrow)
+  markerType?: string; // 마커 종류 (circle, arrow, truck)
+  minZoom?: number; // 최소 줌 레벨 (최대로 멀리 보기, 기본값: 2)
+  maxZoom?: number; // 최대 줌 레벨 (최대로 가까이 보기, 기본값: 18)
+  initialZoom?: number; // 초기 줌 레벨 (기본값: 13)
 
   // 컬럼 매핑 (다중 데이터 소스 통합용)
   columnMapping?: Record<string, string>; // { 원본컬럼: 표시이름 } (예: { "name": "product" })
@@ -397,6 +400,7 @@ export interface CustomMetricConfig {
   unit?: string; // 표시 단위 (원, 건, % 등)
   color?: "indigo" | "green" | "blue" | "purple" | "orange" | "gray"; // 카드 색상
   decimals?: number; // 소수점 자릿수 (기본: 0)
+  refreshInterval?: number; // 자동 새로고침 간격 (초, 0이면 비활성)
 
   // 필터 조건
   filters?: Array<{
diff --git a/frontend/components/admin/dashboard/widget-sections/CustomMetricSection.tsx b/frontend/components/admin/dashboard/widget-sections/CustomMetricSection.tsx
index f7f89e96..97c0f395 100644
--- a/frontend/components/admin/dashboard/widget-sections/CustomMetricSection.tsx
+++ b/frontend/components/admin/dashboard/widget-sections/CustomMetricSection.tsx
@@ -89,68 +89,70 @@ export function CustomMetricSection({ queryResult, config, onConfigChange }: Cus
         </div>
 
         {config.filters && config.filters.length > 0 ? (
-          <div className="space-y-2">
+          <div className="space-y-3">
             {config.filters.map((filter, index) => (
-              <div key={index} className="bg-muted/50 flex items-center gap-2 rounded-md border p-2">
-                {/* 컬럼 선택 */}
-                <Select value={filter.column} onValueChange={(value) => updateFilter(index, "column", value)}>
-                  <SelectTrigger className="h-8 flex-1 text-xs">
-                    <SelectValue />
-                  </SelectTrigger>
-                  <SelectContent>
-                    {queryResult.columns.map((col) => (
-                      <SelectItem key={col} value={col} className="text-xs">
-                        {col}
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
+              <div key={index} className="bg-muted/50 space-y-2 rounded-md border p-3">
+                {/* 첫 번째 줄: 컬럼 선택 */}
+                <div className="flex items-center gap-2">
+                  <Select value={filter.column} onValueChange={(value) => updateFilter(index, "column", value)}>
+                    <SelectTrigger className="h-9 flex-1 text-sm">
+                      <SelectValue placeholder="컬럼 선택" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {queryResult.columns.map((col) => (
+                        <SelectItem key={col} value={col} className="text-sm">
+                          {col}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                  
+                  {/* 삭제 버튼 */}
+                  <Button onClick={() => removeFilter(index)} variant="ghost" size="icon" className="h-9 w-9 shrink-0">
+                    <X className="h-4 w-4" />
+                  </Button>
+                </div>
 
-                {/* 연산자 선택 */}
+                {/* 두 번째 줄: 연산자 선택 */}
                 <Select value={filter.operator} onValueChange={(value) => updateFilter(index, "operator", value)}>
-                  <SelectTrigger className="h-8 w-[100px] text-xs">
-                    <SelectValue />
+                  <SelectTrigger className="h-9 w-full text-sm">
+                    <SelectValue placeholder="연산자 선택" />
                   </SelectTrigger>
                   <SelectContent>
-                    <SelectItem value="=" className="text-xs">
+                    <SelectItem value="=" className="text-sm">
                       같음 (=)
                     </SelectItem>
-                    <SelectItem value="!=" className="text-xs">
+                    <SelectItem value="!=" className="text-sm">
                       다름 (≠)
                     </SelectItem>
-                    <SelectItem value=">" className="text-xs">
+                    <SelectItem value=">" className="text-sm">
                       큼 (&gt;)
                     </SelectItem>
-                    <SelectItem value="<" className="text-xs">
+                    <SelectItem value="<" className="text-sm">
                       작음 (&lt;)
                     </SelectItem>
-                    <SelectItem value=">=" className="text-xs">
+                    <SelectItem value=">=" className="text-sm">
                       크거나 같음 (≥)
                     </SelectItem>
-                    <SelectItem value="<=" className="text-xs">
+                    <SelectItem value="<=" className="text-sm">
                       작거나 같음 (≤)
                     </SelectItem>
-                    <SelectItem value="contains" className="text-xs">
+                    <SelectItem value="contains" className="text-sm">
                       포함
                     </SelectItem>
-                    <SelectItem value="not_contains" className="text-xs">
+                    <SelectItem value="not_contains" className="text-sm">
                       미포함
                     </SelectItem>
                   </SelectContent>
                 </Select>
 
-                {/* 값 입력 */}
+                {/* 세 번째 줄: 값 입력 */}
                 <Input
                   value={filter.value}
                   onChange={(e) => updateFilter(index, "value", e.target.value)}
-                  placeholder="값"
-                  className="h-8 flex-1 text-xs"
+                  placeholder="값을 입력하세요"
+                  className="h-9 w-full text-sm"
                 />
-
-                {/* 삭제 버튼 */}
-                <Button onClick={() => removeFilter(index)} variant="ghost" size="icon" className="h-8 w-8">
-                  <X className="h-3 w-3" />
-                </Button>
               </div>
             ))}
           </div>
@@ -231,6 +233,29 @@ export function CustomMetricSection({ queryResult, config, onConfigChange }: Cus
         />
       </div>
 
+      {/* 6. 자동 새로고침 간격 */}
+      <div className="space-y-2">
+        <Label className="text-xs font-medium">자동 새로고침</Label>
+        <Select
+          value={(config.refreshInterval ?? 30).toString()}
+          onValueChange={(value) => onConfigChange({ refreshInterval: parseInt(value) })}
+        >
+          <SelectTrigger className="h-9 text-xs">
+            <SelectValue placeholder="간격 선택" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="0" className="text-xs">없음</SelectItem>
+            <SelectItem value="10" className="text-xs">10초</SelectItem>
+            <SelectItem value="30" className="text-xs">30초</SelectItem>
+            <SelectItem value="60" className="text-xs">1분</SelectItem>
+            <SelectItem value="300" className="text-xs">5분</SelectItem>
+          </SelectContent>
+        </Select>
+        <p className="text-[10px] text-muted-foreground">
+          통계 데이터를 자동으로 갱신하는 주기
+        </p>
+      </div>
+
       {/* 미리보기 */}
       {config.valueColumn && config.aggregation && (
         <div className="bg-muted/50 space-y-1 rounded-md border p-3">
@@ -241,7 +266,7 @@ export function CustomMetricSection({ queryResult, config, onConfigChange }: Cus
             <div className="space-y-1">
               <p className="text-xs font-medium">필터:</p>
               {config.filters.map((filter, idx) => (
-                <p key={idx} className="text-muted-foreground text-xs">
+                <p key={idx} className="text-muted-foreground text-xs" dir="ltr">
                   · {filter.column} {filter.operator} &quot;{filter.value}&quot;
                 </p>
               ))}
diff --git a/frontend/components/admin/dashboard/widget-sections/ListWidgetSection.tsx b/frontend/components/admin/dashboard/widget-sections/ListWidgetSection.tsx
index 8459716e..2e84f123 100644
--- a/frontend/components/admin/dashboard/widget-sections/ListWidgetSection.tsx
+++ b/frontend/components/admin/dashboard/widget-sections/ListWidgetSection.tsx
@@ -32,7 +32,7 @@ export function ListWidgetSection({ queryResult, config, onConfigChange }: ListW
       {config.columns.length > 0 && (
         <div className="rounded-lg bg-background p-3 shadow-sm">
           <Label className="mb-2 block text-xs font-semibold">테이블 옵션</Label>
-          <ListTableOptions config={config} onChange={onConfigChange} />
+          <ListTableOptions config={config} onConfigChange={onConfigChange} />
         </div>
       )}
     </div>
diff --git a/frontend/components/admin/dashboard/widget-sections/MapConfigSection.tsx b/frontend/components/admin/dashboard/widget-sections/MapConfigSection.tsx
index 3ed5fe24..b47bc0a2 100644
--- a/frontend/components/admin/dashboard/widget-sections/MapConfigSection.tsx
+++ b/frontend/components/admin/dashboard/widget-sections/MapConfigSection.tsx
@@ -20,32 +20,30 @@ interface MapConfigSectionProps {
  * - 자동 새로고침 간격 설정
  * - 마커 종류 선택
  */
-export function MapConfigSection({ 
-  queryResult, 
+export function MapConfigSection({
+  queryResult,
   refreshInterval = 5,
   markerType = "circle",
   onRefreshIntervalChange,
-  onMarkerTypeChange 
+  onMarkerTypeChange,
 }: MapConfigSectionProps) {
   // 쿼리 결과가 없으면 안내 메시지 표시
   if (!queryResult || !queryResult.columns || queryResult.columns.length === 0) {
     return (
-      <div className="rounded-lg bg-background p-3 shadow-sm">
+      <div className="bg-background rounded-lg p-3 shadow-sm">
         <Label className="mb-2 block text-xs font-semibold">지도 설정</Label>
         <Alert>
           <AlertCircle className="h-4 w-4" />
-          <AlertDescription className="text-xs">
-            먼저 데이터 소스를 설정하고 쿼리를 테스트해주세요.
-          </AlertDescription>
+          <AlertDescription className="text-xs">먼저 데이터 소스를 설정하고 쿼리를 테스트해주세요.</AlertDescription>
         </Alert>
       </div>
     );
   }
 
   return (
-    <div className="rounded-lg bg-background p-3 shadow-sm">
+    <div className="bg-background rounded-lg p-3 shadow-sm">
       <Label className="mb-3 block text-xs font-semibold">지도 설정</Label>
-      
+
       <div className="space-y-3">
         {/* 자동 새로고침 간격 */}
         <div className="space-y-1.5">
@@ -60,16 +58,24 @@ export function MapConfigSection({
               <SelectValue placeholder="새로고침 간격 선택" />
             </SelectTrigger>
             <SelectContent>
-              <SelectItem value="0" className="text-xs">없음</SelectItem>
-              <SelectItem value="5" className="text-xs">5초</SelectItem>
-              <SelectItem value="10" className="text-xs">10초</SelectItem>
-              <SelectItem value="30" className="text-xs">30초</SelectItem>
-              <SelectItem value="60" className="text-xs">1분</SelectItem>
+              <SelectItem value="0" className="text-xs">
+                없음
+              </SelectItem>
+              <SelectItem value="5" className="text-xs">
+                5초
+              </SelectItem>
+              <SelectItem value="10" className="text-xs">
+                10초
+              </SelectItem>
+              <SelectItem value="30" className="text-xs">
+                30초
+              </SelectItem>
+              <SelectItem value="60" className="text-xs">
+                1분
+              </SelectItem>
             </SelectContent>
           </Select>
-          <p className="text-[10px] text-muted-foreground">
-            마커 데이터를 자동으로 갱신하는 주기를 설정합니다
-          </p>
+          <p className="text-muted-foreground text-[10px]">마커 데이터를 자동으로 갱신하는 주기를 설정합니다</p>
         </div>
 
         {/* 마커 종류 선택 */}
@@ -77,24 +83,25 @@ export function MapConfigSection({
           <Label htmlFor="marker-type" className="text-xs">
             마커 종류
           </Label>
-          <Select
-            value={markerType}
-            onValueChange={(value) => onMarkerTypeChange?.(value)}
-          >
+          <Select value={markerType} onValueChange={(value) => onMarkerTypeChange?.(value)}>
             <SelectTrigger id="marker-type" className="h-9 text-xs">
               <SelectValue placeholder="마커 종류 선택" />
             </SelectTrigger>
             <SelectContent>
-              <SelectItem value="circle" className="text-xs">동그라미</SelectItem>
-              <SelectItem value="arrow" className="text-xs">화살표</SelectItem>
+              <SelectItem value="circle" className="text-xs">
+                동그라미
+              </SelectItem>
+              <SelectItem value="arrow" className="text-xs">
+                화살표
+              </SelectItem>
+              <SelectItem value="truck" className="text-xs">
+                트럭
+              </SelectItem>
             </SelectContent>
           </Select>
-          <p className="text-[10px] text-muted-foreground">
-            지도에 표시할 마커의 모양을 선택합니다
-          </p>
+          <p className="text-muted-foreground text-[10px]">지도에 표시할 마커의 모양을 선택합니다</p>
         </div>
       </div>
     </div>
   );
 }
-
diff --git a/frontend/components/admin/dashboard/widgets/YardManagement3DWidget.tsx b/frontend/components/admin/dashboard/widgets/YardManagement3DWidget.tsx
index 41e30b96..91f58650 100644
--- a/frontend/components/admin/dashboard/widgets/YardManagement3DWidget.tsx
+++ b/frontend/components/admin/dashboard/widgets/YardManagement3DWidget.tsx
@@ -2,12 +2,12 @@
 
 import { useState, useEffect } from "react";
 import { Button } from "@/components/ui/button";
-import { ResizableDialog, ResizableDialogContent, ResizableDialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
 import { Plus, Check, Trash2 } from "lucide-react";
 import YardLayoutCreateModal from "./yard-3d/YardLayoutCreateModal";
-import YardEditor from "./yard-3d/YardEditor";
-import Yard3DViewer from "./yard-3d/Yard3DViewer";
-import { yardLayoutApi } from "@/lib/api/yardLayoutApi";
+import DigitalTwinEditor from "./yard-3d/DigitalTwinEditor";
+import DigitalTwinViewer from "./yard-3d/DigitalTwinViewer";
+import { getLayouts, createLayout, deleteLayout } from "@/lib/api/digitalTwin";
 import type { YardManagementConfig } from "../types";
 
 interface YardLayout {
@@ -40,9 +40,16 @@ export default function YardManagement3DWidget({
   const loadLayouts = async () => {
     try {
       setIsLoading(true);
-      const response = await yardLayoutApi.getAllLayouts();
-      if (response.success) {
-        setLayouts(response.data as YardLayout[]);
+      const response = await getLayouts();
+      if (response.success && response.data) {
+        setLayouts(response.data.map((layout: any) => ({
+          id: layout.id,
+          name: layout.layout_name,
+          description: layout.description || "",
+          placement_count: layout.object_count || 0,
+          created_at: layout.created_at,
+          updated_at: layout.updated_at,
+        })));
       }
     } catch (error) {
       console.error("야드 레이아웃 목록 조회 실패:", error);
@@ -81,11 +88,21 @@ export default function YardManagement3DWidget({
   // 새 레이아웃 생성
   const handleCreateLayout = async (name: string) => {
     try {
-      const response = await yardLayoutApi.createLayout({ name });
-      if (response.success) {
+      const response = await createLayout({
+        layoutName: name,
+        description: "",
+      });
+      if (response.success && response.data) {
         await loadLayouts();
         setIsCreateModalOpen(false);
-        setEditingLayout(response.data as YardLayout);
+        setEditingLayout({
+          id: response.data.id,
+          name: response.data.layout_name,
+          description: response.data.description || "",
+          placement_count: 0,
+          created_at: response.data.created_at,
+          updated_at: response.data.updated_at,
+        });
       }
     } catch (error) {
       console.error("야드 레이아웃 생성 실패:", error);
@@ -110,7 +127,7 @@ export default function YardManagement3DWidget({
     if (!deleteLayoutId) return;
 
     try {
-      const response = await yardLayoutApi.deleteLayout(deleteLayoutId);
+      const response = await deleteLayout(deleteLayoutId);
       if (response.success) {
         // 삭제된 레이아웃이 현재 선택된 레이아웃이면 설정 초기화
         if (config?.layoutId === deleteLayoutId && onConfigChange) {
@@ -125,11 +142,15 @@ export default function YardManagement3DWidget({
     }
   };
 
-  // 편집 모드: 편집 중인 경우 YardEditor 표시
+  // 편집 모드: 편집 중인 경우 DigitalTwinEditor 표시
   if (isEditMode && editingLayout) {
     return (
       <div className="h-full w-full">
-        <YardEditor layout={editingLayout} onBack={handleEditComplete} />
+        <DigitalTwinEditor 
+          layoutId={editingLayout.id} 
+          layoutName={editingLayout.name}
+          onBack={handleEditComplete} 
+        />
       </div>
     );
   }
@@ -269,10 +290,10 @@ export default function YardManagement3DWidget({
     );
   }
 
-  // 선택된 레이아웃의 3D 뷰어 표시
+  // 선택된 레이아웃의 디지털 트윈 뷰어 표시
   return (
     <div className="h-full w-full">
-      <Yard3DViewer layoutId={config.layoutId} />
+      <DigitalTwinViewer layoutId={config.layoutId} />
     </div>
   );
 }
diff --git a/frontend/components/admin/dashboard/widgets/yard-3d/DigitalTwinEditor.tsx b/frontend/components/admin/dashboard/widgets/yard-3d/DigitalTwinEditor.tsx
new file mode 100644
index 00000000..88e844d3
--- /dev/null
+++ b/frontend/components/admin/dashboard/widgets/yard-3d/DigitalTwinEditor.tsx
@@ -0,0 +1,1756 @@
+"use client";
+
+import { useState, useEffect, useMemo } from "react";
+import { Button } from "@/components/ui/button";
+import { ArrowLeft, Save, Loader2, Grid3x3, Move, Box, Package, Truck, Check } from "lucide-react";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";
+import dynamic from "next/dynamic";
+import { useToast } from "@/hooks/use-toast";
+import type { PlacedObject, ToolType, Warehouse, Area, Location, ObjectType } from "@/types/digitalTwin";
+import {
+  getWarehouses,
+  getAreas,
+  getLocations,
+  getLayoutById,
+  updateLayout,
+  getMaterialCounts,
+  getMaterials,
+  getHierarchyData,
+  getChildrenData,
+  type HierarchyData,
+} from "@/lib/api/digitalTwin";
+import type { MaterialData } from "@/types/digitalTwin";
+import { ExternalDbConnectionAPI } from "@/lib/api/externalDbConnection";
+import HierarchyConfigPanel, { HierarchyConfig } from "./HierarchyConfigPanel";
+import { validateSpatialContainment, updateChildrenPositions, getAllDescendants } from "./spatialContainment";
+
+// 백엔드 DB 객체 타입 (snake_case)
+interface DbObject {
+  id: number;
+  object_type: ObjectType;
+  object_name: string;
+  position_x: string;
+  position_y: string;
+  position_z: string;
+  size_x: string;
+  size_y: string;
+  size_z: string;
+  rotation?: string;
+  color: string;
+  area_key?: string;
+  loca_key?: string;
+  loc_type?: string;
+  material_count?: number;
+  material_preview_height?: string;
+  parent_id?: number;
+  display_order?: number;
+  locked?: boolean;
+  visible?: boolean;
+}
+
+const Yard3DCanvas = dynamic(() => import("./Yard3DCanvas"), {
+  ssr: false,
+  loading: () => (
+    <div className="bg-muted flex h-full items-center justify-center">
+      <Loader2 className="text-muted-foreground h-8 w-8 animate-spin" />
+    </div>
+  ),
+});
+
+interface DigitalTwinEditorProps {
+  layoutId: number;
+  layoutName: string;
+  onBack: () => void;
+}
+
+export default function DigitalTwinEditor({ layoutId, layoutName, onBack }: DigitalTwinEditorProps) {
+  const { toast } = useToast();
+  const [placedObjects, setPlacedObjects] = useState<PlacedObject[]>([]);
+  const [selectedObject, setSelectedObject] = useState<PlacedObject | null>(null);
+  const [draggedTool, setDraggedTool] = useState<ToolType | null>(null);
+  const [draggedAreaData, setDraggedAreaData] = useState<Area | null>(null); // 드래그 중인 Area 정보
+  const [draggedLocationData, setDraggedLocationData] = useState<Location | null>(null); // 드래그 중인 Location 정보
+  const [isLoading, setIsLoading] = useState(true);
+  const [isSaving, setIsSaving] = useState(false);
+  const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
+  const [externalDbConnections, setExternalDbConnections] = useState<{ id: number; name: string; db_type: string }[]>(
+    [],
+  );
+  const [selectedDbConnection, setSelectedDbConnection] = useState<number | null>(null);
+  const [selectedWarehouse, setSelectedWarehouse] = useState<string | null>(null);
+  const [warehouses, setWarehouses] = useState<Warehouse[]>([]);
+  const [availableAreas, setAvailableAreas] = useState<Area[]>([]);
+  const [availableLocations, setAvailableLocations] = useState<Location[]>([]);
+  const [nextObjectId, setNextObjectId] = useState(-1);
+  const [loadingWarehouses, setLoadingWarehouses] = useState(false);
+  const [loadingAreas, setLoadingAreas] = useState(false);
+  const [loadingLocations, setLoadingLocations] = useState(false);
+  const [materials, setMaterials] = useState<MaterialData[]>([]);
+  const [loadingMaterials, setLoadingMaterials] = useState(false);
+  const [showMaterialPanel, setShowMaterialPanel] = useState(false);
+
+  // 동적 계층 구조 설정
+  const [hierarchyConfig, setHierarchyConfig] = useState<HierarchyConfig | null>(null);
+  const [availableTables, setAvailableTables] = useState<string[]>([]);
+  const [loadingTables, setLoadingTables] = useState(false);
+
+  // 레거시: 테이블 매핑 (구 Area/Location 방식 호환용)
+  const [selectedTables, setSelectedTables] = useState<{
+    warehouse: string;
+    area: string;
+    location: string;
+    material: string;
+  }>({
+    warehouse: "",
+    area: "",
+    location: "",
+    material: "",
+  });
+  const [tableColumns, setTableColumns] = useState<{
+    warehouse?: { name: string; code: string };
+    area?: { name: string; code: string; warehouseCode: string };
+    location?: { name: string; code: string; areaCode: string };
+  }>({});
+  const [selectedColumns, setSelectedColumns] = useState<{
+    warehouseKey: string;
+    warehouseName: string;
+    areaKey: string;
+    areaName: string;
+    areaWarehouseKey: string;
+    locationKey: string;
+    locationName: string;
+    locationAreaKey: string;
+    materialKey?: string;
+  }>({
+    warehouseKey: "WAREKEY",
+    warehouseName: "WARENAME",
+    areaKey: "AREAKEY",
+    areaName: "AREANAME",
+    areaWarehouseKey: "WAREKEY",
+    locationKey: "LOCAKEY",
+    locationName: "LOCANAME",
+    locationAreaKey: "AREAKEY",
+    materialKey: "LOCAKEY",
+  });
+
+  // placedObjects를 YardPlacement 형식으로 변환 (useMemo로 최적화)
+  const placements = useMemo(() => {
+    const now = new Date().toISOString(); // 한 번만 생성
+    return placedObjects.map((obj) => ({
+      id: obj.id,
+      yard_layout_id: layoutId,
+      material_code: null,
+      material_name: obj.name,
+      name: obj.name, // 객체 이름 (야드 이름 표시용)
+      quantity: null,
+      unit: null,
+      position_x: obj.position.x,
+      position_y: obj.position.y,
+      position_z: obj.position.z,
+      size_x: obj.size.x,
+      size_y: obj.size.y,
+      size_z: obj.size.z,
+      color: obj.color,
+      data_source_type: obj.type,
+      data_source_config: null,
+      data_binding: null,
+      created_at: now, // 고정된 값 사용
+      updated_at: now, // 고정된 값 사용
+      material_count: obj.materialCount,
+      material_preview_height: obj.materialPreview?.height,
+    }));
+  }, [placedObjects, layoutId]);
+
+  // 외부 DB 연결 목록 로드
+  useEffect(() => {
+    const loadExternalDbConnections = async () => {
+      try {
+        const connections = await ExternalDbConnectionAPI.getConnections({ is_active: "Y" });
+        console.log("🔍 외부 DB 연결 목록 (is_active=Y):", connections);
+        console.log(
+          "🔍 연결 ID들:",
+          connections.map((c) => c.id),
+        );
+        setExternalDbConnections(
+          connections.map((conn) => ({
+            id: conn.id!,
+            name: conn.connection_name,
+            db_type: conn.db_type,
+          })),
+        );
+      } catch (error) {
+        console.error("외부 DB 연결 목록 조회 실패:", error);
+        toast({
+          variant: "destructive",
+          title: "오류",
+          description: "외부 DB 연결 목록을 불러오는데 실패했습니다.",
+        });
+      }
+    };
+
+    loadExternalDbConnections();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []); // 컴포넌트 마운트 시 한 번만 실행
+
+  // 외부 DB 선택 시 테이블 목록 로드
+  useEffect(() => {
+    if (!selectedDbConnection) {
+      setAvailableTables([]);
+      setSelectedTables({ warehouse: "", area: "", location: "", material: "" }); // warehouse는 HierarchyConfigPanel에서 관리
+      return;
+    }
+
+    const loadTables = async () => {
+      try {
+        setLoadingTables(true);
+        const { getTables } = await import("@/lib/api/digitalTwin");
+        const response = await getTables(selectedDbConnection);
+        if (response.success && response.data) {
+          const tableNames = response.data.map((t) => t.table_name);
+          setAvailableTables(tableNames);
+          console.log("📋 테이블 목록:", tableNames);
+        }
+      } catch (error) {
+        console.error("테이블 목록 조회 실패:", error);
+        toast({
+          variant: "destructive",
+          title: "오류",
+          description: "테이블 목록을 불러오는데 실패했습니다.",
+        });
+      } finally {
+        setLoadingTables(false);
+      }
+    };
+
+    loadTables();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selectedDbConnection]);
+
+  // 동적 계층 구조 데이터 로드
+  useEffect(() => {
+    const loadHierarchy = async () => {
+      if (!selectedDbConnection || !hierarchyConfig) {
+        return;
+      }
+
+      // 필수 필드 검증: 창고가 선택되었는지 확인
+      if (!hierarchyConfig.warehouseKey) {
+        return;
+      }
+
+      // 레벨 설정 검증
+      if (!hierarchyConfig.levels || hierarchyConfig.levels.length === 0) {
+        return;
+      }
+
+      // 각 레벨의 필수 필드 검증
+      for (const level of hierarchyConfig.levels) {
+        if (!level.tableName || !level.keyColumn || !level.nameColumn) {
+          return;
+        }
+      }
+
+      try {
+        const response = await getHierarchyData(selectedDbConnection, hierarchyConfig);
+        if (response.success && response.data) {
+          const { warehouse, levels, materials } = response.data;
+
+          // 창고 데이터 설정
+          if (warehouse) {
+            setWarehouses(warehouse);
+          }
+
+          // 레벨 데이터 설정
+          // 기존 호환성을 위해 레벨 1 -> Area, 레벨 2 -> Location으로 매핑
+          // TODO: UI를 동적으로 생성하도록 개선 필요
+          const level1 = levels.find((l) => l.level === 1);
+          if (level1) {
+            setAvailableAreas(level1.data);
+          }
+
+          const level2 = levels.find((l) => l.level === 2);
+          if (level2) {
+            setAvailableLocations(level2.data);
+          }
+
+          console.log("계층 데이터 로드 완료:", response.data);
+        }
+      } catch (error) {
+        console.error("계층 데이터 로드 실패:", error);
+      }
+    };
+
+    loadHierarchy();
+  }, [selectedDbConnection, hierarchyConfig]);
+
+  // 테이블 컬럼 로드
+  const loadColumnsForTable = async (tableName: string, type: "warehouse" | "area" | "location" | "material") => {
+    if (!selectedDbConnection || !tableName) return;
+
+    try {
+      const { getTablePreview } = await import("@/lib/api/digitalTwin");
+      const response = await getTablePreview(selectedDbConnection, tableName);
+
+      console.log(`📊 ${type} 테이블 미리보기:`, response);
+
+      if (response.success && response.data && response.data.length > 0) {
+        const columns = Object.keys(response.data[0]);
+        setTableColumns((prev) => ({ ...prev, [type]: columns }));
+
+        // 자동 매핑 시도 (기본값 설정)
+        if (type === "warehouse") {
+          const keyCol = columns.find((c) => c.includes("KEY") || c.includes("ID")) || columns[0];
+          const nameCol = columns.find((c) => c.includes("NAME") || c.includes("NAM")) || columns[1] || columns[0];
+          setSelectedColumns((prev) => ({ ...prev, warehouseKey: keyCol, warehouseName: nameCol }));
+        }
+      } else {
+        console.warn(`⚠️ ${tableName} 테이블에 데이터가 없습니다.`);
+        toast({
+          variant: "default", // destructive 대신 default로 변경 (단순 알림)
+          title: "데이터 없음",
+          description: `${tableName} 테이블에 데이터가 없습니다.`,
+        });
+      }
+    } catch (error) {
+      console.error(`컬럼 로드 실패 (${tableName}):`, error);
+    }
+  };
+
+  // 외부 DB 선택 시 창고 목록 로드 (테이블이 선택되어 있을 때만)
+  useEffect(() => {
+    if (!selectedDbConnection || !selectedTables.warehouse) {
+      setWarehouses([]);
+      setSelectedWarehouse(null);
+      return;
+    }
+
+    const loadWarehouses = async () => {
+      if (!hierarchyConfig?.warehouse?.tableName) {
+        return;
+      }
+      try {
+        setLoadingWarehouses(true);
+        const response = await getWarehouses(selectedDbConnection, hierarchyConfig.warehouse.tableName);
+        console.log("📦 창고 API 응답:", response);
+        if (response.success && response.data) {
+          console.log("📦 창고 데이터:", response.data);
+          setWarehouses(response.data);
+        } else {
+          // 외부 DB 연결이 유효하지 않으면 선택 초기화
+          console.warn("외부 DB 연결이 유효하지 않습니다:", selectedDbConnection);
+          setSelectedDbConnection(null);
+          toast({
+            variant: "destructive",
+            title: "외부 DB 연결 오류",
+            description: "저장된 외부 DB 연결을 찾을 수 없습니다. 다시 선택해주세요.",
+          });
+        }
+      } catch (error: any) {
+        console.error("창고 목록 조회 실패:", error);
+        // 외부 DB 연결이 존재하지 않으면 선택 초기화
+        if (error.response?.status === 500 && error.response?.data?.error?.includes("연결 정보를 찾을 수 없습니다")) {
+          setSelectedDbConnection(null);
+          toast({
+            variant: "destructive",
+            title: "외부 DB 연결 오류",
+            description: "저장된 외부 DB 연결을 찾을 수 없습니다. 다시 선택해주세요.",
+          });
+        } else {
+          toast({
+            variant: "destructive",
+            title: "오류",
+            description: "창고 목록을 불러오는데 실패했습니다.",
+          });
+        }
+      } finally {
+        setLoadingWarehouses(false);
+      }
+    };
+
+    loadWarehouses();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selectedDbConnection, hierarchyConfig?.warehouse?.tableName]); // hierarchyConfig.warehouse.tableName 추가
+
+  // 창고 선택 시 Area 목록 로드
+  useEffect(() => {
+    if (!selectedDbConnection || !selectedWarehouse) {
+      setAvailableAreas([]);
+      return;
+    }
+
+    // Area 테이블명이 설정되지 않으면 API 호출 스킵
+    if (!selectedTables.area) {
+      setAvailableAreas([]);
+      return;
+    }
+
+    const loadAreas = async () => {
+      try {
+        setLoadingAreas(true);
+        const response = await getAreas(selectedDbConnection, selectedTables.area, selectedWarehouse);
+        if (response.success && response.data) {
+          setAvailableAreas(response.data);
+        }
+      } catch (error) {
+        console.error("Area 목록 조회 실패:", error);
+        toast({
+          variant: "destructive",
+          title: "오류",
+          description: "Area 목록을 불러오는데 실패했습니다.",
+        });
+      } finally {
+        setLoadingAreas(false);
+      }
+    };
+
+    loadAreas();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selectedDbConnection, selectedWarehouse, selectedTables.area]); // toast 제거, area 테이블 추가
+
+  // 레이아웃 데이터 로드
+  const [layoutData, setLayoutData] = useState<{ layout: any; objects: any[] } | null>(null);
+
+  useEffect(() => {
+    const loadLayout = async () => {
+      try {
+        setIsLoading(true);
+        const response = await getLayoutById(layoutId);
+
+        if (response.success && response.data) {
+          const { layout, objects } = response.data;
+          setLayoutData({ layout, objects }); // 레이아웃 데이터 저장
+
+          // 외부 DB 연결 ID 복원
+          if (layout.external_db_connection_id) {
+            setSelectedDbConnection(layout.external_db_connection_id);
+          }
+
+          // 계층 구조 설정 로드
+          if (layout.hierarchy_config) {
+            try {
+              // hierarchy_config가 문자열이면 파싱, 객체면 그대로 사용
+              const config =
+                typeof layout.hierarchy_config === "string"
+                  ? JSON.parse(layout.hierarchy_config)
+                  : layout.hierarchy_config;
+              setHierarchyConfig(config);
+
+              // 선택된 테이블 정보도 복원
+              const newSelectedTables: any = {
+                warehouse: config.warehouse?.tableName || "",
+                area: "",
+                location: "",
+                material: "",
+              };
+
+              if (config.levels && config.levels.length > 0) {
+                // 레벨 1 = Area
+                if (config.levels[0]?.tableName) {
+                  newSelectedTables.area = config.levels[0].tableName;
+                }
+                // 레벨 2 = Location
+                if (config.levels[1]?.tableName) {
+                  newSelectedTables.location = config.levels[1].tableName;
+                }
+              }
+
+              // 자재 테이블 정보
+              if (config.material?.tableName) {
+                newSelectedTables.material = config.material.tableName;
+              }
+
+              setSelectedTables(newSelectedTables);
+            } catch (e) {
+              console.error("계층 구조 설정 파싱 실패:", e);
+            }
+          }
+
+          // 객체 데이터 변환 (DB -> PlacedObject)
+          const loadedObjects: PlacedObject[] = (objects as unknown as DbObject[]).map((obj) => ({
+            id: obj.id,
+            type: obj.object_type,
+            name: obj.object_name,
+            position: {
+              x: parseFloat(obj.position_x),
+              y: parseFloat(obj.position_y),
+              z: parseFloat(obj.position_z),
+            },
+            size: {
+              x: parseFloat(obj.size_x),
+              y: parseFloat(obj.size_y),
+              z: parseFloat(obj.size_z),
+            },
+            rotation: obj.rotation ? parseFloat(obj.rotation) : 0,
+            color: obj.color,
+            areaKey: obj.area_key,
+            locaKey: obj.loca_key,
+            locType: obj.loc_type,
+            materialCount: obj.material_count,
+            materialPreview: obj.material_preview_height
+              ? { height: parseFloat(obj.material_preview_height) }
+              : undefined,
+            parentId: obj.parent_id,
+            displayOrder: obj.display_order,
+            locked: obj.locked,
+            visible: obj.visible !== false,
+            hierarchyLevel: obj.hierarchy_level || 1,
+            parentKey: obj.parent_key,
+            externalKey: obj.external_key,
+          }));
+
+          setPlacedObjects(loadedObjects);
+
+          // 다음 임시 ID 설정 (기존 ID 중 최소값 - 1)
+          const minId = Math.min(...loadedObjects.map((o) => o.id), 0);
+          setNextObjectId(minId - 1);
+
+          setHasUnsavedChanges(false);
+
+          toast({
+            title: "레이아웃 불러오기 완료",
+            description: `${loadedObjects.length}개의 객체를 불러왔습니다.`,
+          });
+
+          // Location 객체들의 자재 개수 로드
+          const locationObjects = loadedObjects.filter(
+            (obj) =>
+              (obj.type === "location-bed" ||
+                obj.type === "location-stp" ||
+                obj.type === "location-temp" ||
+                obj.type === "location-dest") &&
+              obj.locaKey,
+          );
+          if (locationObjects.length > 0) {
+            const locaKeys = locationObjects.map((obj) => obj.locaKey!);
+            setTimeout(() => {
+              loadMaterialCountsForLocations(locaKeys);
+            }, 100);
+          }
+        } else {
+          throw new Error(response.error || "레이아웃 조회 실패");
+        }
+      } catch (error) {
+        console.error("레이아웃 로드 실패:", error);
+        const errorMessage = error instanceof Error ? error.message : "레이아웃을 불러오는데 실패했습니다.";
+        toast({
+          variant: "destructive",
+          title: "오류",
+          description: errorMessage,
+        });
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    loadLayout();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [layoutId]); // toast 제거
+
+  // 외부 DB 연결 자동 선택 (externalDbConnections 로드 완료 시)
+  useEffect(() => {
+    console.log("🔍 useEffect 실행:", {
+      layoutData: !!layoutData,
+      external_db_connection_id: layoutData?.layout?.external_db_connection_id,
+      externalDbConnections: externalDbConnections.length,
+    });
+
+    if (!layoutData || !layoutData.layout.external_db_connection_id || externalDbConnections.length === 0) {
+      console.log("🔍 조건 미충족으로 종료");
+      return;
+    }
+
+    const layout = layoutData.layout;
+    console.log("🔍 외부 DB 연결 자동 선택 시도");
+    console.log("🔍 레이아웃의 external_db_connection_id:", layout.external_db_connection_id);
+    console.log("🔍 사용 가능한 연결 목록:", externalDbConnections);
+
+    const connectionExists = externalDbConnections.some((conn) => conn.id === layout.external_db_connection_id);
+    console.log("🔍 연결 존재 여부:", connectionExists);
+
+    if (connectionExists) {
+      setSelectedDbConnection(layout.external_db_connection_id);
+      if (layout.warehouse_key) {
+        setSelectedWarehouse(layout.warehouse_key);
+      }
+      console.log("✅ 외부 DB 연결 자동 선택 완료:", layout.external_db_connection_id);
+    } else {
+      console.warn("⚠️ 저장된 외부 DB 연결을 찾을 수 없습니다:", layout.external_db_connection_id);
+      console.warn(
+        "⚠️ 사용 가능한 연결 ID들:",
+        externalDbConnections.map((c) => c.id),
+      );
+      toast({
+        variant: "destructive",
+        title: "외부 DB 연결 오류",
+        description: "저장된 외부 DB 연결을 찾을 수 없습니다. 다시 선택해주세요.",
+      });
+    }
+  }, [layoutData, externalDbConnections]); // layoutData와 externalDbConnections가 모두 준비되면 실행
+
+  // 도구 타입별 기본 설정
+  const getToolDefaults = (type: ToolType): Partial<PlacedObject> => {
+    switch (type) {
+      case "area":
+        return {
+          name: "영역",
+          size: { x: 20, y: 0.1, z: 20 }, // 4x4 칸
+          color: "#3b82f6", // 파란색
+        };
+      case "location-bed":
+        return {
+          name: "베드(BED)",
+          size: { x: 5, y: 2, z: 5 }, // 1x1 칸
+          color: "#10b981", // 에메랄드
+        };
+      case "location-stp":
+        return {
+          name: "정차포인트(STP)",
+          size: { x: 5, y: 0.5, z: 5 }, // 1x1 칸, 낮은 높이
+          color: "#f59e0b", // 주황색
+        };
+      case "location-temp":
+        return {
+          name: "임시베드(TMP)",
+          size: { x: 5, y: 2, z: 5 }, // 베드와 동일
+          color: "#10b981", // 베드와 동일
+        };
+      case "location-dest":
+        return {
+          name: "지정착지(DES)",
+          size: { x: 5, y: 2, z: 5 }, // 베드와 동일
+          color: "#10b981", // 베드와 동일
+        };
+      // case "crane-gantry":
+      //   return {
+      //     name: "겐트리 크레인",
+      //     size: { x: 5, y: 8, z: 5 }, // 1x1 칸
+      //     color: "#22c55e", // 녹색
+      //   };
+      case "crane-mobile":
+        return {
+          name: "크레인",
+          size: { x: 5, y: 6, z: 5 }, // 1x1 칸
+          color: "#eab308", // 노란색
+        };
+      case "rack":
+        return {
+          name: "랙",
+          size: { x: 5, y: 3, z: 5 }, // 1x1 칸
+          color: "#a855f7", // 보라색
+        };
+      // case "material":
+      //   return {
+      //     name: "자재",
+      //     size: { x: 5, y: 2, z: 5 }, // 1x1 칸
+      //     color: "#ef4444", // 빨간색
+      //   };
+    }
+  };
+
+  // 도구 드래그 시작
+  const handleToolDragStart = (toolType: ToolType) => {
+    setDraggedTool(toolType);
+  };
+
+  // 캔버스에 드롭
+  const handleCanvasDrop = (x: number, z: number) => {
+    if (!draggedTool) return;
+
+    const defaults = getToolDefaults(draggedTool);
+
+    // Area는 바닥(y=0.05)에, 다른 객체는 중앙 정렬
+    const yPosition = draggedTool === "area" ? 0.05 : (defaults.size?.y || 1) / 2;
+
+    // 외부 DB 데이터에서 드래그한 경우 해당 정보 사용
+    let objectName = defaults.name || "새 객체";
+    let areaKey: string | undefined = undefined;
+    let locaKey: string | undefined = undefined;
+    let locType: string | undefined = undefined;
+    let hierarchyLevel = 1;
+    let parentKey: string | undefined = undefined;
+    let externalKey: string | undefined = undefined;
+
+    if (draggedTool === "area" && draggedAreaData) {
+      objectName = draggedAreaData.AREANAME;
+      areaKey = draggedAreaData.AREAKEY;
+      // 계층 정보 설정 (예: Area는 레벨 1)
+      hierarchyLevel = 1;
+      externalKey = draggedAreaData.AREAKEY;
+    } else if (
+      (draggedTool === "location-bed" ||
+        draggedTool === "location-stp" ||
+        draggedTool === "location-temp" ||
+        draggedTool === "location-dest") &&
+      draggedLocationData
+    ) {
+      objectName = draggedLocationData.LOCANAME || draggedLocationData.LOCAKEY;
+      areaKey = draggedLocationData.AREAKEY;
+      locaKey = draggedLocationData.LOCAKEY;
+      locType = draggedLocationData.LOCTYPE;
+      // 계층 정보 설정 (예: Location은 레벨 2)
+      hierarchyLevel = 2;
+      parentKey = draggedLocationData.AREAKEY;
+      externalKey = draggedLocationData.LOCAKEY;
+    }
+
+    const newObject: PlacedObject = {
+      id: nextObjectId,
+      type: draggedTool,
+      name: objectName,
+      position: { x, y: yPosition, z },
+      size: defaults.size || { x: 5, y: 5, z: 5 },
+      color: defaults.color || "#9ca3af",
+      areaKey,
+      locaKey,
+      locType,
+      hierarchyLevel,
+      parentKey,
+      externalKey,
+    };
+
+    // 공간적 종속성 검증
+    if (hierarchyConfig && hierarchyLevel > 1) {
+      const validation = validateSpatialContainment(
+        {
+          id: newObject.id,
+          position: newObject.position,
+          size: newObject.size,
+          hierarchyLevel: newObject.hierarchyLevel || 1,
+          parentId: newObject.parentId,
+        },
+        placedObjects.map((obj) => ({
+          id: obj.id,
+          position: obj.position,
+          size: obj.size,
+          hierarchyLevel: obj.hierarchyLevel || 1,
+          parentId: obj.parentId,
+        })),
+      );
+
+      if (!validation.valid) {
+        toast({
+          variant: "destructive",
+          title: "배치 오류",
+          description: "하위 영역은 반드시 상위 영역 내부에 배치되어야 합니다.",
+        });
+        return;
+      }
+
+      // 부모 ID 설정
+      if (validation.parent) {
+        newObject.parentId = validation.parent.id;
+      }
+    }
+
+    setPlacedObjects((prev) => [...prev, newObject]);
+    setSelectedObject(newObject);
+    setNextObjectId((prev) => prev - 1);
+    setHasUnsavedChanges(true);
+    setDraggedTool(null);
+    setDraggedAreaData(null);
+    setDraggedLocationData(null);
+
+    // Location 배치 시 자재 개수 로드
+    if (
+      (draggedTool === "location-bed" ||
+        draggedTool === "location-stp" ||
+        draggedTool === "location-temp" ||
+        draggedTool === "location-dest") &&
+      locaKey
+    ) {
+      // 새 객체 추가 후 자재 개수 로드 (약간의 딜레이를 두어 state 업데이트 완료 후 실행)
+      setTimeout(() => {
+        loadMaterialCountsForLocations([locaKey!]);
+      }, 100);
+    }
+  };
+
+  // Location의 자재 목록 로드
+  const loadMaterialsForLocation = async (locaKey: string) => {
+    if (!selectedDbConnection || !hierarchyConfig?.material) {
+      toast({
+        variant: "destructive",
+        title: "자재 조회 실패",
+        description: "자재 테이블 설정이 필요합니다.",
+      });
+      return;
+    }
+
+    try {
+      setLoadingMaterials(true);
+      setShowMaterialPanel(true);
+      const response = await getMaterials(selectedDbConnection, {
+        ...hierarchyConfig.material,
+        locaKey: locaKey,
+      });
+      if (response.success && response.data) {
+        // layerColumn이 있으면 정렬
+        const sortedMaterials = hierarchyConfig.material.layerColumn
+          ? response.data.sort((a: any, b: any) => {
+              const aLayer = a[hierarchyConfig.material!.layerColumn!] || 0;
+              const bLayer = b[hierarchyConfig.material!.layerColumn!] || 0;
+              return aLayer - bLayer;
+            })
+          : response.data;
+        setMaterials(sortedMaterials);
+      } else {
+        setMaterials([]);
+        toast({
+          variant: "destructive",
+          title: "자재 조회 실패",
+          description: response.error || "자재 목록을 불러올 수 없습니다.",
+        });
+      }
+    } catch (error) {
+      console.error("자재 로드 실패:", error);
+      setMaterials([]);
+      toast({
+        variant: "destructive",
+        title: "오류",
+        description: "자재 목록을 불러오는데 실패했습니다.",
+      });
+    } finally {
+      setLoadingMaterials(false);
+    }
+  };
+
+  // 객체 클릭
+  const handleObjectClick = (objectId: number | null) => {
+    if (objectId === null) {
+      setSelectedObject(null);
+      setShowMaterialPanel(false);
+      return;
+    }
+
+    const obj = placedObjects.find((o) => o.id === objectId);
+    setSelectedObject(obj || null);
+
+    // Area를 클릭한 경우, 해당 Area의 Location 목록 로드
+    if (obj && obj.type === "area" && obj.areaKey && selectedDbConnection) {
+      loadLocationsForArea(obj.areaKey);
+      setShowMaterialPanel(false);
+    }
+    // Location을 클릭한 경우, 해당 Location의 자재 목록 로드
+    else if (
+      obj &&
+      (obj.type === "location-bed" ||
+        obj.type === "location-stp" ||
+        obj.type === "location-temp" ||
+        obj.type === "location-dest") &&
+      obj.locaKey &&
+      selectedDbConnection
+    ) {
+      loadMaterialsForLocation(obj.locaKey);
+    } else {
+      setShowMaterialPanel(false);
+    }
+  };
+
+  // Location별 자재 개수 로드 (locaKeys를 직접 받음)
+  const loadMaterialCountsForLocations = async (locaKeys: string[]) => {
+    if (!selectedDbConnection || locaKeys.length === 0) return;
+
+    try {
+      const response = await getMaterialCounts(selectedDbConnection, selectedTables.material, locaKeys);
+      if (response.success && response.data) {
+        // 각 Location 객체에 자재 개수 업데이트
+        setPlacedObjects((prev) =>
+          prev.map((obj) => {
+            const materialCount = response.data?.find((mc) => mc.LOCAKEY === obj.locaKey);
+            if (materialCount) {
+              return {
+                ...obj,
+                materialCount: materialCount.material_count,
+                materialPreview: {
+                  height: materialCount.max_layer * 1.5, // 층당 1.5 높이 (시각적)
+                },
+              };
+            }
+            return obj;
+          }),
+        );
+      }
+    } catch (error) {
+      console.error("자재 개수 로드 실패:", error);
+    }
+  };
+
+  // 특정 Area의 Location 목록 로드
+  const loadLocationsForArea = async (areaKey: string) => {
+    if (!selectedDbConnection) return;
+
+    try {
+      setLoadingLocations(true);
+      const response = await getLocations(selectedDbConnection, selectedTables.location, areaKey);
+      if (response.success && response.data) {
+        setAvailableLocations(response.data);
+        toast({
+          title: "Location 로드 완료",
+          description: `${response.data.length}개 Location을 불러왔습니다.`,
+        });
+      }
+    } catch (error) {
+      console.error("Location 목록 조회 실패:", error);
+      toast({
+        variant: "destructive",
+        title: "오류",
+        description: "Location 목록을 불러오는데 실패했습니다.",
+      });
+    } finally {
+      setLoadingLocations(false);
+    }
+  };
+
+  // 객체 이동
+  const handleObjectMove = (objectId: number, newX: number, newZ: number, newY?: number) => {
+    setPlacedObjects((prev) => {
+      const targetObj = prev.find((obj) => obj.id === objectId);
+      if (!targetObj) return prev;
+
+      const oldPosition = targetObj.position;
+      const newPosition = {
+        x: newX,
+        y: newY !== undefined ? newY : oldPosition.y,
+        z: newZ,
+      };
+
+      // 1. 이동 대상 객체 업데이트
+      let updatedObjects = prev.map((obj) => {
+        if (obj.id === objectId) {
+          return { ...obj, position: newPosition };
+        }
+        return obj;
+      });
+
+      // 2. 그룹 이동: 자식 객체들도 함께 이동
+      const spatialObjects = updatedObjects.map((obj) => ({
+        id: obj.id,
+        position: obj.position,
+        size: obj.size,
+        hierarchyLevel: obj.hierarchyLevel || 1,
+        parentId: obj.parentId,
+      }));
+
+      const descendants = getAllDescendants(objectId, spatialObjects);
+
+      if (descendants.length > 0) {
+        const delta = {
+          x: newPosition.x - oldPosition.x,
+          y: newPosition.y - oldPosition.y,
+          z: newPosition.z - oldPosition.z,
+        };
+
+        updatedObjects = updatedObjects.map((obj) => {
+          if (descendants.some((d) => d.id === obj.id)) {
+            return {
+              ...obj,
+              position: {
+                x: obj.position.x + delta.x,
+                y: obj.position.y + delta.y,
+                z: obj.position.z + delta.z,
+              },
+            };
+          }
+          return obj;
+        });
+      }
+
+      return updatedObjects;
+    });
+
+    if (selectedObject?.id === objectId) {
+      setSelectedObject((prev) => {
+        if (!prev) return null;
+        const newPosition = { ...prev.position, x: newX, z: newZ };
+        if (newY !== undefined) {
+          newPosition.y = newY;
+        }
+        return { ...prev, position: newPosition };
+      });
+    }
+
+    setHasUnsavedChanges(true);
+  };
+
+  // 객체 속성 업데이트
+  const handleObjectUpdate = (updates: Partial<PlacedObject>) => {
+    if (!selectedObject) return;
+
+    let finalUpdates = { ...updates };
+
+    // 크기 변경 시에만 5 단위로 스냅하고 위치 조정 (position 변경은 제외)
+    if (updates.size && !updates.position) {
+      // placedObjects 배열에서 실제 저장된 객체를 가져옴 (selectedObject 상태가 아닌)
+      const actualObject = placedObjects.find((obj) => obj.id === selectedObject.id);
+      if (!actualObject) return;
+
+      const oldSize = actualObject.size;
+      const newSize = { ...oldSize, ...updates.size };
+
+      // W, D를 5 단위로 스냅
+      newSize.x = Math.max(5, Math.round(newSize.x / 5) * 5);
+      newSize.z = Math.max(5, Math.round(newSize.z / 5) * 5);
+
+      // H는 자유롭게 (Area 제외)
+      if (actualObject.type !== "area") {
+        newSize.y = Math.max(0.1, newSize.y);
+      }
+
+      // 크기 차이 계산
+      const deltaX = newSize.x - oldSize.x;
+      const deltaZ = newSize.z - oldSize.z;
+      const deltaY = newSize.y - oldSize.y;
+
+      // 위치 조정: 왼쪽/뒤쪽/바닥 모서리 고정, 오른쪽/앞쪽/위쪽으로만 늘어남
+      // Three.js는 중심점 기준이므로 크기 차이의 절반만큼 위치 이동
+      // actualObject.position (실제 배열의 position)을 기준으로 계산
+      const newPosition = {
+        ...actualObject.position,
+        x: actualObject.position.x + deltaX / 2, // 오른쪽으로 늘어남
+        y: actualObject.position.y + deltaY / 2, // 위쪽으로 늘어남 (바닥 고정)
+        z: actualObject.position.z + deltaZ / 2, // 앞쪽으로 늘어남
+      };
+
+      finalUpdates = {
+        ...finalUpdates,
+        size: newSize,
+        position: newPosition,
+      };
+    }
+
+    setPlacedObjects((prev) => prev.map((obj) => (obj.id === selectedObject.id ? { ...obj, ...finalUpdates } : obj)));
+
+    setSelectedObject((prev) => (prev ? { ...prev, ...finalUpdates } : null));
+    setHasUnsavedChanges(true);
+  };
+
+  // 객체 삭제
+  const handleObjectDelete = () => {
+    if (!selectedObject) return;
+
+    setPlacedObjects((prev) => prev.filter((obj) => obj.id !== selectedObject.id));
+    setSelectedObject(null);
+    setHasUnsavedChanges(true);
+  };
+
+  // 저장
+  const handleSave = async () => {
+    if (!selectedDbConnection) {
+      toast({
+        title: "외부 DB 선택 필요",
+        description: "외부 데이터베이스 연결을 선택하세요.",
+        variant: "destructive",
+      });
+      return;
+    }
+
+    if (!selectedWarehouse) {
+      toast({
+        title: "창고 선택 필요",
+        description: "창고를 선택하세요.",
+        variant: "destructive",
+      });
+      return;
+    }
+
+    setIsSaving(true);
+    try {
+      const response = await updateLayout(layoutId, {
+        layoutName: layoutName,
+        description: undefined,
+        hierarchyConfig: hierarchyConfig, // 계층 구조 설정
+        externalDbConnectionId: selectedDbConnection, // 외부 DB 연결 ID
+        warehouseKey: selectedWarehouse, // 선택된 창고
+        objects: placedObjects.map((obj, index) => ({
+          ...obj,
+          displayOrder: index, // 현재 순서대로 저장
+        })),
+      });
+
+      if (response.success) {
+        toast({
+          title: "저장 완료",
+          description: `${placedObjects.length}개의 객체가 저장되었습니다.`,
+        });
+
+        setHasUnsavedChanges(false);
+
+        // 저장 후 DB에서 할당된 ID로 객체 업데이트 (필요 시)
+        // 현재는 updateLayout이 기존 객체 삭제 후 재생성하므로
+        // 레이아웃 다시 불러오기
+        const reloadResponse = await getLayoutById(layoutId);
+        if (reloadResponse.success && reloadResponse.data) {
+          const { objects } = reloadResponse.data;
+          const reloadedObjects: PlacedObject[] = (objects as unknown as DbObject[]).map((obj) => ({
+            id: obj.id,
+            type: obj.object_type,
+            name: obj.object_name,
+            position: {
+              x: parseFloat(obj.position_x),
+              y: parseFloat(obj.position_y),
+              z: parseFloat(obj.position_z),
+            },
+            size: {
+              x: parseFloat(obj.size_x),
+              y: parseFloat(obj.size_y),
+              z: parseFloat(obj.size_z),
+            },
+            rotation: obj.rotation ? parseFloat(obj.rotation) : 0,
+            color: obj.color,
+            areaKey: obj.area_key,
+            locaKey: obj.loca_key,
+            locType: obj.loc_type,
+            materialCount: obj.material_count,
+            materialPreview: obj.material_preview_height
+              ? { height: parseFloat(obj.material_preview_height) }
+              : undefined,
+            parentId: obj.parent_id,
+            displayOrder: obj.display_order,
+            locked: obj.locked,
+            visible: obj.visible !== false,
+          }));
+
+          setPlacedObjects(reloadedObjects);
+        }
+      } else {
+        throw new Error(response.error || "레이아웃 저장 실패");
+      }
+    } catch (error) {
+      console.error("저장 실패:", error);
+      const errorMessage = error instanceof Error ? error.message : "레이아웃 저장에 실패했습니다.";
+      toast({
+        title: "저장 실패",
+        description: errorMessage,
+        variant: "destructive",
+      });
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  return (
+    <div className="bg-background flex h-full flex-col">
+      {/* 상단 툴바 */}
+      <div className="flex items-center justify-between border-b p-4">
+        <div className="flex items-center gap-4">
+          <Button variant="ghost" size="sm" onClick={onBack}>
+            <ArrowLeft className="mr-2 h-4 w-4" />
+            목록으로
+          </Button>
+          <div>
+            <h2 className="text-lg font-semibold">{layoutName}</h2>
+            <p className="text-muted-foreground text-sm">디지털 트윈 야드 편집</p>
+          </div>
+        </div>
+
+        <div className="flex items-center gap-2">
+          {hasUnsavedChanges && <span className="text-warning text-sm font-medium">미저장 변경사항 있음</span>}
+          <Button size="sm" onClick={handleSave} disabled={isSaving || !hasUnsavedChanges}>
+            {isSaving ? (
+              <>
+                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                저장 중...
+              </>
+            ) : (
+              <>
+                <Save className="mr-2 h-4 w-4" />
+                저장
+              </>
+            )}
+          </Button>
+        </div>
+      </div>
+
+      {/* 도구 팔레트 */}
+      <div className="bg-muted flex items-center justify-center gap-2 border-b p-4">
+        <span className="text-muted-foreground text-sm font-medium">도구:</span>
+        {[
+          { type: "area" as ToolType, label: "영역", icon: Grid3x3, color: "text-blue-500" },
+          { type: "location-bed" as ToolType, label: "베드", icon: Package, color: "text-emerald-500" },
+          { type: "location-stp" as ToolType, label: "정차", icon: Move, color: "text-orange-500" },
+          // { type: "crane-gantry" as ToolType, label: "겐트리", icon: Combine, color: "text-green-500" },
+          { type: "crane-mobile" as ToolType, label: "크레인", icon: Truck, color: "text-yellow-500" },
+          { type: "rack" as ToolType, label: "랙", icon: Box, color: "text-purple-500" },
+        ].map((tool) => {
+          const Icon = tool.icon;
+          return (
+            <div
+              key={tool.type}
+              draggable
+              onDragStart={() => handleToolDragStart(tool.type)}
+              className="bg-background hover:bg-accent flex cursor-grab items-center gap-1 rounded-md border px-3 py-2 transition-colors active:cursor-grabbing"
+              title={`${tool.label} 드래그하여 배치`}
+            >
+              <Icon className={`h-4 w-4 ${tool.color}`} />
+              <span className="text-xs">{tool.label}</span>
+            </div>
+          );
+        })}
+      </div>
+
+      {/* 메인 영역 */}
+      <div className="flex flex-1 overflow-hidden">
+        {/* 좌측: 외부 DB 선택 + 객체 목록 */}
+        <div className="flex h-full w-[20%] flex-col border-r">
+          {/* 스크롤 영역 */}
+          <div className="flex-1 space-y-6 overflow-y-auto p-4">
+            {/* 외부 DB 선택 */}
+            <div>
+              <Label className="mb-2 block text-sm font-semibold">외부 데이터베이스</Label>
+              <Select
+                value={selectedDbConnection?.toString() || ""}
+                onValueChange={(value) => {
+                  setSelectedDbConnection(parseInt(value));
+                  setSelectedWarehouse(null);
+                  setHasUnsavedChanges(true);
+                }}
+              >
+                <SelectTrigger className="h-10 text-sm">
+                  <SelectValue placeholder="DB 선택..." />
+                </SelectTrigger>
+                <SelectContent>
+                  {externalDbConnections.map((conn) => (
+                    <SelectItem key={conn.id} value={conn.id.toString()} className="text-sm">
+                      {conn.name}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+
+            {/* 창고 테이블 및 컬럼 매핑 */}
+            {selectedDbConnection && (
+              <div className="space-y-3">
+                <Label className="text-sm font-semibold">창고 선택</Label>
+
+                {/* 이 레이아웃의 창고 선택 */}
+                {hierarchyConfig?.warehouse?.tableName && hierarchyConfig?.warehouse?.keyColumn && (
+                  <div>
+                    <Label className="text-muted-foreground mb-1 block text-xs">이 레이아웃의 창고</Label>
+                    {loadingWarehouses ? (
+                      <div className="flex h-9 items-center justify-center rounded-md border">
+                        <Loader2 className="text-muted-foreground h-4 w-4 animate-spin" />
+                      </div>
+                    ) : (
+                      <Select
+                        value={selectedWarehouse || ""}
+                        onValueChange={(value) => {
+                          setSelectedWarehouse(value);
+                          // hierarchyConfig 업데이트 (없으면 새로 생성)
+                          setHierarchyConfig((prev) => ({
+                            warehouseKey: value,
+                            levels: prev?.levels || [],
+                            material: prev?.material,
+                          }));
+                          setHasUnsavedChanges(true);
+                        }}
+                      >
+                        <SelectTrigger className="h-9 text-xs">
+                          <SelectValue placeholder="창고 선택..." />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {warehouses.map((wh: any) => {
+                            const keyCol = hierarchyConfig.warehouse!.keyColumn;
+                            const nameCol = hierarchyConfig.warehouse!.nameColumn;
+                            return (
+                              <SelectItem key={wh[keyCol]} value={wh[keyCol]} className="text-xs">
+                                {wh[nameCol] || wh[keyCol]}
+                              </SelectItem>
+                            );
+                          })}
+                        </SelectContent>
+                      </Select>
+                    )}
+                  </div>
+                )}
+              </div>
+            )}
+
+            {/* 계층 설정 패널 (신규) */}
+            {selectedDbConnection && (
+              <HierarchyConfigPanel
+                externalDbConnectionId={selectedDbConnection}
+                hierarchyConfig={hierarchyConfig}
+                onHierarchyConfigChange={(config) => {
+                  // 새로운 객체로 생성하여 참조 변경 (useEffect 트리거를 위해)
+                  setHierarchyConfig({ ...config });
+
+                  // 레벨 테이블 정보를 selectedTables와 동기화
+                  const newSelectedTables: any = { ...selectedTables };
+
+                  // 창고 테이블 정보
+                  if (config.warehouse?.tableName) {
+                    newSelectedTables.warehouse = config.warehouse.tableName;
+                  }
+
+                  if (config.levels && config.levels.length > 0) {
+                    // 레벨 1 = Area
+                    if (config.levels[0]?.tableName) {
+                      newSelectedTables.area = config.levels[0].tableName;
+                    }
+                    // 레벨 2 = Location
+                    if (config.levels[1]?.tableName) {
+                      newSelectedTables.location = config.levels[1].tableName;
+                    }
+                  }
+
+                  // 자재 테이블 정보
+                  if (config.material?.tableName) {
+                    newSelectedTables.material = config.material.tableName;
+                  }
+
+                  setSelectedTables(newSelectedTables);
+                  setHasUnsavedChanges(true);
+                }}
+                availableTables={availableTables}
+                onLoadTables={async () => {
+                  // 이미 로드되어 있으므로 스킵
+                }}
+                onLoadColumns={async (tableName: string) => {
+                  try {
+                    const response = await ExternalDbConnectionAPI.getTableColumns(selectedDbConnection, tableName);
+                    if (response.success && response.data) {
+                      // 객체 배열을 문자열 배열로 변환
+                      return response.data.map((col: any) =>
+                        typeof col === "string" ? col : col.column_name || col.COLUMN_NAME || String(col),
+                      );
+                    }
+                    return [];
+                  } catch (error) {
+                    console.error("컬럼 로드 실패:", error);
+                    return [];
+                  }
+                }}
+              />
+            )}
+
+            {/* Area 목록 */}
+            {selectedDbConnection && selectedWarehouse && (
+              <div className="space-y-3">
+                <div className="flex items-center justify-between">
+                  <h4 className="text-sm font-semibold">사용 가능한 Area</h4>
+                  {loadingAreas && <Loader2 className="text-muted-foreground h-3 w-3 animate-spin" />}
+                </div>
+
+                {availableAreas.length === 0 ? (
+                  <p className="text-muted-foreground text-xs">Area가 없습니다</p>
+                ) : (
+                  <div className="space-y-2">
+                    {availableAreas.map((area) => {
+                      // 이미 배치된 Area인지 확인
+                      const isPlaced = placedObjects.some((obj) => obj.areaKey === area.AREAKEY);
+
+                      return (
+                        <div
+                          key={area.AREAKEY}
+                          draggable={!isPlaced}
+                          onDragStart={() => {
+                            if (isPlaced) return;
+                            // Area 정보를 임시 저장
+                            setDraggedTool("area");
+                            setDraggedAreaData(area);
+                          }}
+                          onDragEnd={() => {
+                            setDraggedAreaData(null);
+                          }}
+                          className={`rounded-lg border p-3 transition-all ${
+                            isPlaced
+                              ? "bg-muted text-muted-foreground cursor-not-allowed opacity-60"
+                              : "bg-background hover:bg-accent cursor-grab active:cursor-grabbing"
+                          }`}
+                        >
+                          <div className="flex items-center justify-between">
+                            <div className="flex-1">
+                              <p className="text-sm font-medium">{area.AREANAME}</p>
+                              <p className="text-muted-foreground text-xs">{area.AREAKEY}</p>
+                            </div>
+                            {isPlaced ? (
+                              <span className="text-muted-foreground text-xs">배치됨</span>
+                            ) : (
+                              <Grid3x3 className="text-muted-foreground h-4 w-4" />
+                            )}
+                          </div>
+                        </div>
+                      );
+                    })}
+                  </div>
+                )}
+              </div>
+            )}
+
+            {/* Location 목록 (Area 클릭 시 표시) */}
+            {availableLocations.length > 0 && (
+              <div className="space-y-3 border-t pt-4">
+                <div className="flex items-center justify-between">
+                  <h4 className="text-sm font-semibold">사용 가능한 Location</h4>
+                  {loadingLocations && <Loader2 className="text-muted-foreground h-3 w-3 animate-spin" />}
+                </div>
+
+                <div className="space-y-2">
+                  {availableLocations.map((location) => {
+                    // Location 타입에 따라 ObjectType 결정
+                    let locationType: ToolType = "location-bed";
+                    if (location.LOCTYPE === "STP") {
+                      locationType = "location-stp";
+                    } else if (location.LOCTYPE === "TMP") {
+                      locationType = "location-temp";
+                    } else if (location.LOCTYPE === "DES") {
+                      locationType = "location-dest";
+                    }
+
+                    // Location이 이미 배치되었는지 확인
+                    const isLocationPlaced = placedObjects.some(
+                      (obj) =>
+                        (obj.type === "location-bed" ||
+                          obj.type === "location-stp" ||
+                          obj.type === "location-temp" ||
+                          obj.type === "location-dest") &&
+                        obj.locaKey === location.LOCAKEY,
+                    );
+
+                    return (
+                      <div
+                        key={location.LOCAKEY}
+                        draggable={!isLocationPlaced}
+                        onDragStart={() => {
+                          if (!isLocationPlaced) {
+                            setDraggedTool(locationType);
+                            setDraggedLocationData(location);
+                          }
+                        }}
+                        onDragEnd={() => {
+                          setDraggedLocationData(null);
+                        }}
+                        className={`rounded-lg border p-3 transition-all ${
+                          isLocationPlaced
+                            ? "bg-muted text-muted-foreground cursor-not-allowed opacity-60"
+                            : "bg-background hover:bg-accent cursor-grab active:cursor-grabbing"
+                        }`}
+                      >
+                        <div className="flex items-center justify-between">
+                          <div className="flex-1">
+                            <p className="text-sm font-medium">{location.LOCANAME || location.LOCAKEY}</p>
+                            <div className="text-muted-foreground mt-1 flex items-center gap-2 text-xs">
+                              <span>{location.LOCAKEY}</span>
+                              <span className="bg-muted rounded px-1.5 py-0.5">{location.LOCTYPE}</span>
+                            </div>
+                          </div>
+                          {isLocationPlaced ? (
+                            <Check className="h-4 w-4 text-green-500" />
+                          ) : (
+                            <Package className="text-muted-foreground h-4 w-4" />
+                          )}
+                        </div>
+                      </div>
+                    );
+                  })}
+                </div>
+              </div>
+            )}
+          </div>
+
+          {/* 배치된 객체 목록 */}
+          <div className="flex-1 overflow-y-auto p-4">
+            <h3 className="mb-3 text-sm font-semibold">배치된 객체 ({placedObjects.length})</h3>
+
+            {placedObjects.length === 0 ? (
+              <div className="text-muted-foreground text-center text-sm">상단 도구를 드래그하여 배치하세요</div>
+            ) : (
+              <div className="space-y-2">
+                {placedObjects.map((obj) => (
+                  <div
+                    key={obj.id}
+                    onClick={() => handleObjectClick(obj.id)}
+                    className={`cursor-pointer rounded-lg border p-3 transition-all ${
+                      selectedObject?.id === obj.id ? "border-primary bg-primary/10" : "hover:border-primary/50"
+                    }`}
+                  >
+                    <div className="flex items-center justify-between">
+                      <span className="text-sm font-medium">{obj.name}</span>
+                      <div className="h-3 w-3 rounded-full" style={{ backgroundColor: obj.color }} />
+                    </div>
+                    <p className="text-muted-foreground mt-1 text-xs">
+                      위치: ({obj.position.x.toFixed(1)}, {obj.position.z.toFixed(1)})
+                    </p>
+                    {obj.areaKey && <p className="text-muted-foreground mt-1 text-xs">Area: {obj.areaKey}</p>}
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+        </div>
+
+        {/* 중앙: 3D 캔버스 */}
+        <div
+          className="h-full flex-1 bg-gray-100"
+          onDragOver={(e) => e.preventDefault()}
+          onDrop={(e) => {
+            e.preventDefault();
+            const rect = e.currentTarget.getBoundingClientRect();
+            const rawX = ((e.clientX - rect.left) / rect.width - 0.5) * 100;
+            const rawZ = ((e.clientY - rect.top) / rect.height - 0.5) * 100;
+
+            // 그리드 크기 (5 단위)
+            const gridSize = 5;
+
+            // 그리드에 스냅
+            // Area(20x20)는 그리드 교차점에, 다른 객체(5x5)는 타일 중앙에
+            let snappedX = Math.round(rawX / gridSize) * gridSize;
+            let snappedZ = Math.round(rawZ / gridSize) * gridSize;
+
+            // 5x5 객체는 타일 중앙으로 오프셋 (Area는 제외)
+            if (draggedTool !== "area") {
+              snappedX += gridSize / 2;
+              snappedZ += gridSize / 2;
+            }
+
+            handleCanvasDrop(snappedX, snappedZ);
+          }}
+        >
+          {isLoading ? (
+            <div className="flex h-full items-center justify-center">
+              <Loader2 className="text-muted-foreground h-8 w-8 animate-spin" />
+            </div>
+          ) : (
+            <Yard3DCanvas
+              placements={placements}
+              selectedPlacementId={selectedObject?.id || null}
+              onPlacementClick={(placement) => handleObjectClick(placement?.id || null)}
+              onPlacementDrag={(id, position) => handleObjectMove(id, position.x, position.z, position.y)}
+              focusOnPlacementId={null}
+              onCollisionDetected={() => {}}
+            />
+          )}
+        </div>
+
+        {/* 우측: 객체 속성 편집 or 자재 목록 */}
+        <div className="h-full w-[25%] overflow-y-auto border-l">
+          {showMaterialPanel && selectedObject ? (
+            /* 자재 목록 패널 */
+            <div className="p-4">
+              <div className="mb-4 flex items-center justify-between">
+                <div>
+                  <h3 className="text-lg font-semibold">자재 목록</h3>
+                  <p className="text-muted-foreground text-xs">
+                    {selectedObject.name} ({selectedObject.locaKey})
+                  </p>
+                </div>
+                <Button variant="ghost" size="sm" onClick={() => setShowMaterialPanel(false)}>
+                  닫기
+                </Button>
+              </div>
+
+              {loadingMaterials ? (
+                <div className="flex h-32 items-center justify-center">
+                  <Loader2 className="text-muted-foreground h-6 w-6 animate-spin" />
+                </div>
+              ) : materials.length === 0 ? (
+                <div className="text-muted-foreground flex h-32 items-center justify-center text-sm">
+                  자재가 없습니다
+                </div>
+              ) : (
+                <Accordion type="single" collapsible className="w-full">
+                  {materials.map((material, index) => {
+                    const layerColumn = hierarchyConfig?.material?.layerColumn || "LOLAYER";
+                    const keyColumn = hierarchyConfig?.material?.keyColumn || "STKKEY";
+                    const displayColumns = hierarchyConfig?.material?.displayColumns || [];
+
+                    const layerValue = material[layerColumn] || index + 1;
+                    const keyValue = material[keyColumn] || `자재 ${index + 1}`;
+
+                    return (
+                      <AccordionItem key={`${keyValue}-${index}`} value={`item-${index}`} className="border-b">
+                        <AccordionTrigger className="px-2 py-3 hover:no-underline">
+                          <div className="flex w-full items-center justify-between pr-2">
+                            <span className="text-sm font-medium">층 {layerValue}</span>
+                            <span className="text-muted-foreground max-w-[150px] truncate text-xs">{keyValue}</span>
+                          </div>
+                        </AccordionTrigger>
+                        <AccordionContent className="px-2 pb-3">
+                          {displayColumns.length === 0 ? (
+                            <p className="text-muted-foreground py-2 text-center text-xs">
+                              표시할 컬럼이 설정되지 않았습니다
+                            </p>
+                          ) : (
+                            <div className="space-y-1.5">
+                              {displayColumns.map((item) => (
+                                <div key={item.column} className="flex justify-between gap-2 text-xs">
+                                  <span className="text-muted-foreground shrink-0">{item.label}:</span>
+                                  <span className="text-right font-medium break-all">
+                                    {material[item.column] || "-"}
+                                  </span>
+                                </div>
+                              ))}
+                            </div>
+                          )}
+                        </AccordionContent>
+                      </AccordionItem>
+                    );
+                  })}
+                </Accordion>
+              )}
+            </div>
+          ) : selectedObject ? (
+            <div className="p-4">
+              <h3 className="mb-4 text-lg font-semibold">객체 속성</h3>
+
+              <div className="space-y-4">
+                {/* 이름 */}
+                <div>
+                  <Label htmlFor="object-name" className="text-sm">
+                    이름
+                  </Label>
+                  <Input
+                    id="object-name"
+                    value={selectedObject.name}
+                    onChange={(e) => handleObjectUpdate({ name: e.target.value })}
+                    className="mt-1.5 h-9 text-sm"
+                  />
+                </div>
+
+                {/* 위치 */}
+                <div>
+                  <Label className="text-sm">위치</Label>
+                  <div className="mt-1.5 grid grid-cols-2 gap-2">
+                    <div>
+                      <Label htmlFor="pos-x" className="text-muted-foreground text-xs">
+                        X
+                      </Label>
+                      <Input
+                        id="pos-x"
+                        type="number"
+                        value={selectedObject.position.x.toFixed(1)}
+                        onChange={(e) =>
+                          handleObjectUpdate({
+                            position: {
+                              ...selectedObject.position,
+                              x: parseFloat(e.target.value),
+                            },
+                          })
+                        }
+                        className="h-9 text-sm"
+                      />
+                    </div>
+                    <div>
+                      <Label htmlFor="pos-z" className="text-muted-foreground text-xs">
+                        Z
+                      </Label>
+                      <Input
+                        id="pos-z"
+                        type="number"
+                        value={selectedObject.position.z.toFixed(1)}
+                        onChange={(e) =>
+                          handleObjectUpdate({
+                            position: {
+                              ...selectedObject.position,
+                              z: parseFloat(e.target.value),
+                            },
+                          })
+                        }
+                        className="h-9 text-sm"
+                      />
+                    </div>
+                  </div>
+                </div>
+
+                {/* 크기 */}
+                <div>
+                  <Label className="text-sm">크기</Label>
+                  <div className="mt-1.5 grid grid-cols-3 gap-2">
+                    <div>
+                      <Label htmlFor="size-x" className="text-muted-foreground text-xs">
+                        W (5 단위)
+                      </Label>
+                      <Input
+                        id="size-x"
+                        type="number"
+                        step="5"
+                        min="5"
+                        value={selectedObject.size.x}
+                        onChange={(e) =>
+                          handleObjectUpdate({
+                            size: {
+                              ...selectedObject.size,
+                              x: parseFloat(e.target.value),
+                            },
+                          })
+                        }
+                        className="h-9 text-sm"
+                      />
+                    </div>
+                    <div>
+                      <Label htmlFor="size-y" className="text-muted-foreground text-xs">
+                        H
+                      </Label>
+                      <Input
+                        id="size-y"
+                        type="number"
+                        value={selectedObject.size.y}
+                        onChange={(e) =>
+                          handleObjectUpdate({
+                            size: {
+                              ...selectedObject.size,
+                              y: parseFloat(e.target.value),
+                            },
+                          })
+                        }
+                        className="h-9 text-sm"
+                      />
+                    </div>
+                    <div>
+                      <Label htmlFor="size-z" className="text-muted-foreground text-xs">
+                        D (5 단위)
+                      </Label>
+                      <Input
+                        id="size-z"
+                        type="number"
+                        step="5"
+                        min="5"
+                        value={selectedObject.size.z}
+                        onChange={(e) =>
+                          handleObjectUpdate({
+                            size: {
+                              ...selectedObject.size,
+                              z: parseFloat(e.target.value),
+                            },
+                          })
+                        }
+                        className="h-9 text-sm"
+                      />
+                    </div>
+                  </div>
+                </div>
+
+                {/* 색상 */}
+                <div>
+                  <Label htmlFor="object-color" className="text-sm">
+                    색상
+                  </Label>
+                  <Input
+                    id="object-color"
+                    type="color"
+                    value={selectedObject.color}
+                    onChange={(e) => handleObjectUpdate({ color: e.target.value })}
+                    className="mt-1.5 h-9"
+                  />
+                </div>
+
+                {/* 삭제 버튼 */}
+                <Button variant="destructive" size="sm" onClick={handleObjectDelete} className="w-full">
+                  객체 삭제
+                </Button>
+              </div>
+            </div>
+          ) : (
+            <div className="flex h-full items-center justify-center p-4 text-center">
+              <p className="text-muted-foreground text-sm">객체를 선택하면 속성을 편집할 수 있습니다</p>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/components/admin/dashboard/widgets/yard-3d/DigitalTwinViewer.tsx b/frontend/components/admin/dashboard/widgets/yard-3d/DigitalTwinViewer.tsx
new file mode 100644
index 00000000..3945a692
--- /dev/null
+++ b/frontend/components/admin/dashboard/widgets/yard-3d/DigitalTwinViewer.tsx
@@ -0,0 +1,538 @@
+"use client";
+
+import { useState, useEffect, useMemo } from "react";
+import { Loader2, Search, Filter, X } from "lucide-react";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Button } from "@/components/ui/button";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import dynamic from "next/dynamic";
+import { useToast } from "@/hooks/use-toast";
+import type { PlacedObject, MaterialData } from "@/types/digitalTwin";
+import { getLayoutById, getMaterials } from "@/lib/api/digitalTwin";
+
+const Yard3DCanvas = dynamic(() => import("./Yard3DCanvas"), {
+  ssr: false,
+  loading: () => (
+    <div className="bg-muted flex h-full items-center justify-center">
+      <Loader2 className="text-muted-foreground h-8 w-8 animate-spin" />
+    </div>
+  ),
+});
+
+interface DigitalTwinViewerProps {
+  layoutId: number;
+}
+
+export default function DigitalTwinViewer({ layoutId }: DigitalTwinViewerProps) {
+  const { toast } = useToast();
+  const [placedObjects, setPlacedObjects] = useState<PlacedObject[]>([]);
+  const [selectedObject, setSelectedObject] = useState<PlacedObject | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [materials, setMaterials] = useState<MaterialData[]>([]);
+  const [loadingMaterials, setLoadingMaterials] = useState(false);
+  const [showInfoPanel, setShowInfoPanel] = useState(false);
+  const [externalDbConnectionId, setExternalDbConnectionId] = useState<number | null>(null);
+  const [layoutName, setLayoutName] = useState<string>("");
+  const [hierarchyConfig, setHierarchyConfig] = useState<any>(null);
+
+  // 검색 및 필터
+  const [searchQuery, setSearchQuery] = useState("");
+  const [filterType, setFilterType] = useState<string>("all");
+
+  // 레이아웃 데이터 로드
+  useEffect(() => {
+    const loadLayout = async () => {
+      try {
+        setIsLoading(true);
+        const response = await getLayoutById(layoutId);
+
+        if (response.success && response.data) {
+          const { layout, objects } = response.data;
+
+          // 레이아웃 정보 저장 (snake_case와 camelCase 모두 지원)
+          setLayoutName(layout.layout_name || layout.layoutName);
+          setExternalDbConnectionId(layout.external_db_connection_id || layout.externalDbConnectionId);
+
+          // hierarchy_config 저장
+          if (layout.hierarchy_config) {
+            const config =
+              typeof layout.hierarchy_config === "string"
+                ? JSON.parse(layout.hierarchy_config)
+                : layout.hierarchy_config;
+            setHierarchyConfig(config);
+          }
+
+          // 객체 데이터 변환
+          const loadedObjects: PlacedObject[] = objects.map((obj: any) => {
+            const objectType = obj.object_type;
+            return {
+              id: obj.id,
+              type: objectType,
+              name: obj.object_name,
+              position: {
+                x: parseFloat(obj.position_x),
+                y: parseFloat(obj.position_y),
+                z: parseFloat(obj.position_z),
+              },
+              size: {
+                x: parseFloat(obj.size_x),
+                y: parseFloat(obj.size_y),
+                z: parseFloat(obj.size_z),
+              },
+              rotation: obj.rotation ? parseFloat(obj.rotation) : 0,
+              color: getObjectColor(objectType), // 타입별 기본 색상 사용
+              areaKey: obj.area_key,
+              locaKey: obj.loca_key,
+              locType: obj.loc_type,
+              materialCount: obj.material_count,
+              materialPreview: obj.material_preview_height
+                ? { height: parseFloat(obj.material_preview_height) }
+                : undefined,
+              parentId: obj.parent_id,
+              displayOrder: obj.display_order,
+              locked: obj.locked,
+              visible: obj.visible !== false,
+            };
+          });
+
+          setPlacedObjects(loadedObjects);
+        } else {
+          throw new Error(response.error || "레이아웃 조회 실패");
+        }
+      } catch (error) {
+        console.error("레이아웃 로드 실패:", error);
+        const errorMessage = error instanceof Error ? error.message : "레이아웃을 불러오는데 실패했습니다.";
+        toast({
+          variant: "destructive",
+          title: "오류",
+          description: errorMessage,
+        });
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    loadLayout();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [layoutId]); // toast 제거 - 무한 루프 방지
+
+  // Location의 자재 목록 로드
+  const loadMaterialsForLocation = async (locaKey: string, externalDbConnectionId: number) => {
+    if (!hierarchyConfig?.material) {
+      console.warn("hierarchyConfig.material이 없습니다. 자재 로드를 건너뜁니다.");
+      return;
+    }
+
+    try {
+      setLoadingMaterials(true);
+      setShowInfoPanel(true);
+
+      const response = await getMaterials(externalDbConnectionId, {
+        tableName: hierarchyConfig.material.tableName,
+        keyColumn: hierarchyConfig.material.keyColumn,
+        locationKeyColumn: hierarchyConfig.material.locationKeyColumn,
+        layerColumn: hierarchyConfig.material.layerColumn,
+        locaKey: locaKey,
+      });
+      if (response.success && response.data) {
+        const layerColumn = hierarchyConfig.material.layerColumn || "LOLAYER";
+        const sortedMaterials = response.data.sort((a: any, b: any) => (a[layerColumn] || 0) - (b[layerColumn] || 0));
+        setMaterials(sortedMaterials);
+      } else {
+        setMaterials([]);
+      }
+    } catch (error) {
+      console.error("자재 로드 실패:", error);
+      setMaterials([]);
+    } finally {
+      setLoadingMaterials(false);
+    }
+  };
+
+  // 객체 클릭
+  const handleObjectClick = (objectId: number | null) => {
+    if (objectId === null) {
+      setSelectedObject(null);
+      setShowInfoPanel(false);
+      return;
+    }
+
+    const obj = placedObjects.find((o) => o.id === objectId);
+    setSelectedObject(obj || null);
+
+    // Location을 클릭한 경우, 자재 정보 표시
+    if (
+      obj &&
+      (obj.type === "location-bed" ||
+        obj.type === "location-stp" ||
+        obj.type === "location-temp" ||
+        obj.type === "location-dest") &&
+      obj.locaKey &&
+      externalDbConnectionId
+    ) {
+      setShowInfoPanel(true);
+      loadMaterialsForLocation(obj.locaKey, externalDbConnectionId);
+    } else {
+      setShowInfoPanel(true);
+      setMaterials([]);
+    }
+  };
+
+  // 타입별 개수 계산 (useMemo로 최적화)
+  const typeCounts = useMemo(() => {
+    const counts: Record<string, number> = {
+      all: placedObjects.length,
+      area: 0,
+      "location-bed": 0,
+      "location-stp": 0,
+      "location-temp": 0,
+      "location-dest": 0,
+      "crane-mobile": 0,
+      rack: 0,
+    };
+
+    placedObjects.forEach((obj) => {
+      if (counts[obj.type] !== undefined) {
+        counts[obj.type]++;
+      }
+    });
+
+    return counts;
+  }, [placedObjects]);
+
+  // 필터링된 객체 목록 (useMemo로 최적화)
+  const filteredObjects = useMemo(() => {
+    return placedObjects.filter((obj) => {
+      // 타입 필터
+      if (filterType !== "all" && obj.type !== filterType) {
+        return false;
+      }
+
+      // 검색 쿼리
+      if (searchQuery) {
+        const query = searchQuery.toLowerCase();
+        return (
+          obj.name.toLowerCase().includes(query) ||
+          obj.areaKey?.toLowerCase().includes(query) ||
+          obj.locaKey?.toLowerCase().includes(query)
+        );
+      }
+
+      return true;
+    });
+  }, [placedObjects, filterType, searchQuery]);
+
+  // 객체 타입별 기본 색상 (useMemo로 최적화)
+  const getObjectColor = useMemo(() => {
+    return (type: string): string => {
+      const colorMap: Record<string, string> = {
+        area: "#3b82f6", // 파란색
+        "location-bed": "#2563eb", // 진한 파란색
+        "location-stp": "#6b7280", // 회색
+        "location-temp": "#f59e0b", // 주황색
+        "location-dest": "#10b981", // 초록색
+        "crane-mobile": "#8b5cf6", // 보라색
+        rack: "#ef4444", // 빨간색
+      };
+      return colorMap[type] || "#3b82f6";
+    };
+  }, []);
+
+  // 3D 캔버스용 placements 변환 (useMemo로 최적화)
+  const canvasPlacements = useMemo(() => {
+    return placedObjects.map((obj) => ({
+      id: obj.id,
+      name: obj.name,
+      position_x: obj.position.x,
+      position_y: obj.position.y,
+      position_z: obj.position.z,
+      size_x: obj.size.x,
+      size_y: obj.size.y,
+      size_z: obj.size.z,
+      color: obj.color,
+      data_source_type: obj.type,
+      material_count: obj.materialCount,
+      material_preview_height: obj.materialPreview?.height,
+      yard_layout_id: undefined,
+      material_code: null,
+      material_name: null,
+      quantity: null,
+      unit: null,
+      data_source_config: undefined,
+      data_binding: undefined,
+      created_at: new Date().toISOString(),
+      updated_at: new Date().toISOString(),
+    }));
+  }, [placedObjects]);
+
+  if (isLoading) {
+    return (
+      <div className="flex h-full items-center justify-center">
+        <Loader2 className="text-muted-foreground h-8 w-8 animate-spin" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="bg-background flex h-full flex-col">
+      {/* 상단 헤더 */}
+      <div className="flex items-center justify-between border-b p-4">
+        <div>
+          <h2 className="text-lg font-semibold">{layoutName || "디지털 트윈 야드"}</h2>
+          <p className="text-muted-foreground text-sm">읽기 전용 뷰</p>
+        </div>
+      </div>
+
+      {/* 메인 영역 */}
+      <div className="flex flex-1 overflow-hidden">
+        {/* 좌측: 검색/필터 */}
+        <div className="flex h-full w-64 flex-shrink-0 flex-col border-r">
+          <div className="space-y-4 p-4">
+            {/* 검색 */}
+            <div>
+              <Label className="mb-2 block text-sm font-semibold">검색</Label>
+              <div className="relative">
+                <Search className="text-muted-foreground absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2" />
+                <Input
+                  value={searchQuery}
+                  onChange={(e) => setSearchQuery(e.target.value)}
+                  placeholder="이름, Area, Location 검색..."
+                  className="h-10 pl-9 text-sm"
+                />
+                {searchQuery && (
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="absolute top-1/2 right-1 h-7 w-7 -translate-y-1/2 p-0"
+                    onClick={() => setSearchQuery("")}
+                  >
+                    <X className="h-3 w-3" />
+                  </Button>
+                )}
+              </div>
+            </div>
+
+            {/* 타입 필터 */}
+            <div>
+              <Label className="mb-2 block text-sm font-semibold">타입 필터</Label>
+              <Select value={filterType} onValueChange={setFilterType}>
+                <SelectTrigger className="h-10 text-sm">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="all">전체 ({typeCounts.all})</SelectItem>
+                  <SelectItem value="area">Area ({typeCounts.area})</SelectItem>
+                  <SelectItem value="location-bed">베드(BED) ({typeCounts["location-bed"]})</SelectItem>
+                  <SelectItem value="location-stp">정차포인트(STP) ({typeCounts["location-stp"]})</SelectItem>
+                  <SelectItem value="location-temp">임시베드(TMP) ({typeCounts["location-temp"]})</SelectItem>
+                  <SelectItem value="location-dest">지정착지(DES) ({typeCounts["location-dest"]})</SelectItem>
+                  <SelectItem value="crane-mobile">크레인 ({typeCounts["crane-mobile"]})</SelectItem>
+                  <SelectItem value="rack">랙 ({typeCounts.rack})</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+
+            {/* 필터 초기화 */}
+            {(searchQuery || filterType !== "all") && (
+              <Button
+                variant="outline"
+                size="sm"
+                className="h-9 w-full text-sm"
+                onClick={() => {
+                  setSearchQuery("");
+                  setFilterType("all");
+                }}
+              >
+                필터 초기화
+              </Button>
+            )}
+          </div>
+
+          {/* 객체 목록 */}
+          <div className="flex-1 overflow-y-auto border-t p-4">
+            <Label className="mb-2 block text-sm font-semibold">객체 목록 ({filteredObjects.length})</Label>
+            {filteredObjects.length === 0 ? (
+              <div className="text-muted-foreground flex h-32 items-center justify-center text-center text-sm">
+                {searchQuery ? "검색 결과가 없습니다" : "객체가 없습니다"}
+              </div>
+            ) : (
+              <div className="space-y-2">
+                {filteredObjects.map((obj) => {
+                  // 타입별 레이블
+                  let typeLabel = obj.type;
+                  if (obj.type === "location-bed") typeLabel = "베드(BED)";
+                  else if (obj.type === "location-stp") typeLabel = "정차포인트(STP)";
+                  else if (obj.type === "location-temp") typeLabel = "임시베드(TMP)";
+                  else if (obj.type === "location-dest") typeLabel = "지정착지(DES)";
+                  else if (obj.type === "crane-mobile") typeLabel = "크레인";
+                  else if (obj.type === "area") typeLabel = "Area";
+                  else if (obj.type === "rack") typeLabel = "랙";
+
+                  return (
+                    <div
+                      key={obj.id}
+                      onClick={() => handleObjectClick(obj.id)}
+                      className={`bg-background hover:bg-accent cursor-pointer rounded-lg border p-3 transition-all ${
+                        selectedObject?.id === obj.id ? "ring-primary bg-primary/5 ring-2" : "hover:shadow-sm"
+                      }`}
+                    >
+                      <div className="flex items-start justify-between">
+                        <div className="flex-1">
+                          <p className="text-sm font-medium">{obj.name}</p>
+                          <div className="text-muted-foreground mt-1 flex items-center gap-2 text-xs">
+                            <span
+                              className="inline-block h-2 w-2 rounded-full"
+                              style={{ backgroundColor: getObjectColor(obj.type) }}
+                            />
+                            <span>{typeLabel}</span>
+                          </div>
+                        </div>
+                      </div>
+
+                      {/* 추가 정보 */}
+                      <div className="mt-2 space-y-1">
+                        {obj.areaKey && (
+                          <p className="text-muted-foreground text-xs">
+                            Area: <span className="font-medium">{obj.areaKey}</span>
+                          </p>
+                        )}
+                        {obj.locaKey && (
+                          <p className="text-muted-foreground text-xs">
+                            Location: <span className="font-medium">{obj.locaKey}</span>
+                          </p>
+                        )}
+                        {obj.materialCount !== undefined && obj.materialCount > 0 && (
+                          <p className="text-xs text-yellow-600">
+                            자재: <span className="font-semibold">{obj.materialCount}개</span>
+                          </p>
+                        )}
+                      </div>
+                    </div>
+                  );
+                })}
+              </div>
+            )}
+          </div>
+        </div>
+
+        {/* 중앙: 3D 캔버스 */}
+        <div className="relative flex-1">
+          {!isLoading && (
+            <Yard3DCanvas
+              placements={canvasPlacements}
+              selectedPlacementId={selectedObject?.id || null}
+              onPlacementClick={(placement) => handleObjectClick(placement?.id || null)}
+              focusOnPlacementId={null}
+              onCollisionDetected={() => {}}
+            />
+          )}
+        </div>
+
+        {/* 우측: 정보 패널 */}
+        <div className="h-full w-[480px] flex-shrink-0 overflow-y-auto border-l">
+          {selectedObject ? (
+            <div className="p-4">
+              <div className="mb-4">
+                <h3 className="text-lg font-semibold">상세 정보</h3>
+                <p className="text-muted-foreground text-xs">{selectedObject.name}</p>
+              </div>
+
+              {/* 기본 정보 */}
+              <div className="bg-muted space-y-3 rounded-lg p-3">
+                <div>
+                  <Label className="text-muted-foreground text-xs">타입</Label>
+                  <p className="text-sm font-medium">{selectedObject.type}</p>
+                </div>
+                {selectedObject.areaKey && (
+                  <div>
+                    <Label className="text-muted-foreground text-xs">Area Key</Label>
+                    <p className="text-sm font-medium">{selectedObject.areaKey}</p>
+                  </div>
+                )}
+                {selectedObject.locaKey && (
+                  <div>
+                    <Label className="text-muted-foreground text-xs">Location Key</Label>
+                    <p className="text-sm font-medium">{selectedObject.locaKey}</p>
+                  </div>
+                )}
+                {selectedObject.materialCount !== undefined && selectedObject.materialCount > 0 && (
+                  <div>
+                    <Label className="text-muted-foreground text-xs">자재 개수</Label>
+                    <p className="text-sm font-medium">{selectedObject.materialCount}개</p>
+                  </div>
+                )}
+              </div>
+
+              {/* 자재 목록 (Location인 경우) - 아코디언 */}
+              {(selectedObject.type === "location-bed" ||
+                selectedObject.type === "location-stp" ||
+                selectedObject.type === "location-temp" ||
+                selectedObject.type === "location-dest") && (
+                <div className="mt-4">
+                  {loadingMaterials ? (
+                    <div className="flex h-32 items-center justify-center">
+                      <Loader2 className="text-muted-foreground h-6 w-6 animate-spin" />
+                    </div>
+                  ) : materials.length === 0 ? (
+                    <div className="text-muted-foreground flex h-32 items-center justify-center text-center text-sm">
+                      {externalDbConnectionId ? "자재가 없습니다" : "외부 DB 연결이 설정되지 않았습니다"}
+                    </div>
+                  ) : (
+                    <div className="space-y-2">
+                      <Label className="mb-2 block text-sm font-semibold">자재 목록 ({materials.length}개)</Label>
+                      {materials.map((material, index) => {
+                        const displayColumns = hierarchyConfig?.material?.displayColumns || [];
+                        return (
+                          <details
+                            key={`${material.STKKEY}-${index}`}
+                            className="bg-muted group hover:bg-accent rounded-lg border transition-colors"
+                          >
+                            <summary className="flex cursor-pointer items-center justify-between p-3 text-sm font-medium">
+                              <div className="flex-1">
+                                <div className="flex items-center gap-2">
+                                  <span className="font-semibold">
+                                    층 {material[hierarchyConfig?.material?.layerColumn || "LOLAYER"]}
+                                  </span>
+                                  {displayColumns[0] && (
+                                    <span className="text-muted-foreground text-xs">
+                                      {material[displayColumns[0].column]}
+                                    </span>
+                                  )}
+                                </div>
+                              </div>
+                              <svg
+                                className="text-muted-foreground h-4 w-4 transition-transform group-open:rotate-180"
+                                fill="none"
+                                stroke="currentColor"
+                                viewBox="0 0 24 24"
+                              >
+                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+                              </svg>
+                            </summary>
+                            <div className="space-y-2 border-t p-3 pt-3">
+                              {displayColumns.map((colConfig: any) => (
+                                <div key={colConfig.column} className="flex justify-between text-xs">
+                                  <span className="text-muted-foreground">{colConfig.label}:</span>
+                                  <span className="font-medium">{material[colConfig.column] || "-"}</span>
+                                </div>
+                              ))}
+                            </div>
+                          </details>
+                        );
+                      })}
+                    </div>
+                  )}
+                </div>
+              )}
+            </div>
+          ) : (
+            <div className="flex h-full items-center justify-center p-4">
+              <p className="text-muted-foreground text-sm">객체를 선택하세요</p>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/components/admin/dashboard/widgets/yard-3d/HIERARCHY_MIGRATION_GUIDE.md b/frontend/components/admin/dashboard/widgets/yard-3d/HIERARCHY_MIGRATION_GUIDE.md
new file mode 100644
index 00000000..5a7e01fb
--- /dev/null
+++ b/frontend/components/admin/dashboard/widgets/yard-3d/HIERARCHY_MIGRATION_GUIDE.md
@@ -0,0 +1,410 @@
+# 디지털 트윈 동적 계층 구조 마이그레이션 가이드
+
+## 개요
+
+**기존 구조**: Area(구역) → Location(위치) 고정 2단계  
+**신규 구조**: 동적 N-Level 계층 (영역 → 하위 영역 → ... → 자재)
+
+---
+
+## 1. 데이터베이스 마이그레이션
+
+### 실행 방법
+```bash
+# PostgreSQL 컨테이너 접속
+docker exec -it pms-db psql -U postgres -d erp
+
+# 마이그레이션 실행
+\i db/migrations/042_refactor_digital_twin_hierarchy.sql
+```
+
+### 변경 사항
+- `digital_twin_layout` 테이블에 `hierarchy_config` JSONB 컬럼 추가
+- 기존 테이블 매핑 컬럼들 제거 (warehouse_table_name, area_table_name 등)
+- `digital_twin_objects` 테이블에 계층 관련 컬럼 추가:
+  - `hierarchy_level`: 계층 레벨 (1, 2, 3, ...)
+  - `parent_key`: 부모 객체의 외부 DB 키
+  - `external_key`: 자신의 외부 DB 키
+
+---
+
+## 2. 백엔드 API 변경 사항
+
+### 신규 API 엔드포인트
+
+#### 전체 계층 데이터 조회
+```
+POST /api/digital-twin/data/hierarchy
+Request Body:
+{
+  "externalDbConnectionId": 15,
+  "hierarchyConfig": "{...}" // JSON 문자열
+}
+
+Response:
+{
+  "success": true,
+  "data": {
+    "warehouse": [...],
+    "levels": [
+      { "level": 1, "name": "구역", "data": [...] },
+      { "level": 2, "name": "위치", "data": [...] }
+    ],
+    "materials": [
+      { "location_key": "LOC001", "count": 150 }
+    ]
+  }
+}
+```
+
+#### 특정 부모의 하위 데이터 조회
+```
+POST /api/digital-twin/data/children
+Request Body:
+{
+  "externalDbConnectionId": 15,
+  "hierarchyConfig": "{...}",
+  "parentLevel": 1,
+  "parentKey": "AREA001"
+}
+
+Response:
+{
+  "success": true,
+  "data": [...] // 다음 레벨 데이터
+}
+```
+
+### 레거시 API (호환성 유지)
+- `/api/digital-twin/data/warehouses` (GET)
+- `/api/digital-twin/data/areas` (GET)
+- `/api/digital-twin/data/locations` (GET)
+- `/api/digital-twin/data/materials` (GET)
+- `/api/digital-twin/data/material-counts` (POST로 변경)
+
+---
+
+## 3. 프론트엔드 변경 사항
+
+### 새로운 컴포넌트
+
+#### `HierarchyConfigPanel.tsx`
+동적 계층 구조 설정 UI
+
+**사용 방법:**
+```tsx
+import HierarchyConfigPanel from "./HierarchyConfigPanel";
+
+<HierarchyConfigPanel
+  externalDbConnectionId={selectedDbConnection}
+  hierarchyConfig={hierarchyConfig}
+  onHierarchyConfigChange={setHierarchyConfig}
+  availableTables={availableTables}
+  onLoadTables={loadTablesFromDb}
+  onLoadColumns={loadColumnsFromTable}
+/>
+```
+
+### 계층 구조 설정 예시
+
+```json
+{
+  "warehouse": {
+    "tableName": "MWARMA",
+    "keyColumn": "WAREKEY",
+    "nameColumn": "WARENAME"
+  },
+  "levels": [
+    {
+      "level": 1,
+      "name": "구역",
+      "tableName": "MAREMA",
+      "keyColumn": "AREAKEY",
+      "nameColumn": "AREANAME",
+      "parentKeyColumn": "WAREKEY",
+      "objectTypes": ["area"]
+    },
+    {
+      "level": 2,
+      "name": "위치",
+      "tableName": "MLOCMA",
+      "keyColumn": "LOCAKEY",
+      "nameColumn": "LOCANAME",
+      "parentKeyColumn": "AREAKEY",
+      "typeColumn": "LOCTYPE",
+      "objectTypes": ["location-bed", "location-stp"]
+    }
+  ],
+  "material": {
+    "tableName": "WSTKKY",
+    "keyColumn": "STKKEY",
+    "locationKeyColumn": "LOCAKEY",
+    "layerColumn": "LOLAYER",
+    "quantityColumn": "STKQUAN"
+  }
+}
+```
+
+---
+
+## 4. 공간적 종속성 (Spatial Containment)
+
+### 새로운 유틸리티: `spatialContainment.ts`
+
+#### 주요 함수
+
+**1. 포함 여부 확인**
+```typescript
+import { isContainedIn } from "./spatialContainment";
+
+const isValid = isContainedIn(childObject, parentObject);
+// 자식 객체가 부모 객체 내부에 있는지 AABB로 검증
+```
+
+**2. 유효한 부모 찾기**
+```typescript
+import { findValidParent } from "./spatialContainment";
+
+const parent = findValidParent(draggedChild, allObjects, hierarchyLevels);
+// 드래그 중인 자식 객체를 포함하는 부모 객체 자동 감지
+```
+
+**3. 검증**
+```typescript
+import { validateSpatialContainment } from "./spatialContainment";
+
+const result = validateSpatialContainment(child, allObjects);
+if (!result.valid) {
+  alert("하위 영역은 반드시 상위 영역 내부에 배치되어야 합니다!");
+}
+```
+
+**4. 그룹 이동 (부모 이동 시 자식도 함께)**
+```typescript
+import { updateChildrenPositions, getAllDescendants } from "./spatialContainment";
+
+// 부모 객체 이동 시
+const updatedChildren = updateChildrenPositions(
+  parentObject,
+  oldPosition,
+  newPosition,
+  allObjects
+);
+
+// 모든 하위 자손(재귀) 가져오기
+const descendants = getAllDescendants(parentId, allObjects);
+```
+
+---
+
+## 5. DigitalTwinEditor 통합 방법
+
+### Step 1: HierarchyConfigPanel 추가
+```tsx
+// DigitalTwinEditor.tsx
+
+import HierarchyConfigPanel, { HierarchyConfig } from "./HierarchyConfigPanel";
+
+const [hierarchyConfig, setHierarchyConfig] = useState<HierarchyConfig | null>(null);
+
+// 좌측 사이드바에 추가
+<HierarchyConfigPanel
+  externalDbConnectionId={selectedDbConnection}
+  hierarchyConfig={hierarchyConfig}
+  onHierarchyConfigChange={setHierarchyConfig}
+  availableTables={availableTables}
+  onLoadTables={loadTables}
+  onLoadColumns={loadColumns}
+/>
+```
+
+### Step 2: 계층 데이터 로드
+```tsx
+import { getHierarchyData, getChildrenData } from "@/lib/api/digitalTwin";
+
+const loadHierarchyData = async () => {
+  if (!selectedDbConnection || !hierarchyConfig) return;
+
+  const response = await getHierarchyData(selectedDbConnection, hierarchyConfig);
+  if (response.success && response.data) {
+    // 창고 데이터
+    setWarehouses(response.data.warehouse);
+    
+    // 각 레벨 데이터
+    response.data.levels.forEach((level) => {
+      if (level.level === 1) {
+        setAvailableAreas(level.data);
+      } else if (level.level === 2) {
+        setAvailableLocations(level.data);
+      }
+      // ... 추가 레벨
+    });
+    
+    // 자재 개수
+    setMaterialCounts(response.data.materials);
+  }
+};
+```
+
+### Step 3: Yard3DCanvas에서 검증
+```tsx
+// Yard3DCanvas.tsx 또는 DigitalTwinEditor.tsx
+
+import { validateSpatialContainment } from "./spatialContainment";
+
+const handleObjectDrop = (droppedObject: PlacedObject) => {
+  const result = validateSpatialContainment(
+    {
+      id: droppedObject.id,
+      position: droppedObject.position,
+      size: droppedObject.size,
+      hierarchyLevel: droppedObject.hierarchyLevel || 1,
+      parentId: droppedObject.parentId,
+    },
+    placedObjects.map((obj) => ({
+      id: obj.id,
+      position: obj.position,
+      size: obj.size,
+      hierarchyLevel: obj.hierarchyLevel || 1,
+      parentId: obj.parentId,
+    }))
+  );
+
+  if (!result.valid) {
+    toast({
+      variant: "destructive",
+      title: "배치 오류",
+      description: "하위 영역은 반드시 상위 영역 내부에 배치되어야 합니다.",
+    });
+    return; // 배치 취소
+  }
+
+  // 유효하면 부모 ID 업데이트
+  droppedObject.parentId = result.parent?.id;
+  
+  // 상태 업데이트
+  setPlacedObjects([...placedObjects, droppedObject]);
+};
+```
+
+### Step 4: 그룹 이동 구현
+```tsx
+import { updateChildrenPositions, getAllDescendants } from "./spatialContainment";
+
+const handleObjectMove = (
+  movedObject: PlacedObject,
+  oldPosition: { x: number; y: number; z: number },
+  newPosition: { x: number; y: number; z: number }
+) => {
+  // 이동한 객체 업데이트
+  const updatedObjects = placedObjects.map((obj) =>
+    obj.id === movedObject.id
+      ? { ...obj, position: newPosition }
+      : obj
+  );
+
+  // 모든 하위 자손 가져오기
+  const descendants = getAllDescendants(
+    movedObject.id,
+    placedObjects.map((obj) => ({
+      id: obj.id,
+      position: obj.position,
+      size: obj.size,
+      hierarchyLevel: obj.hierarchyLevel || 1,
+      parentId: obj.parentId,
+    }))
+  );
+
+  // 하위 자손들도 같이 이동
+  const delta = {
+    x: newPosition.x - oldPosition.x,
+    y: newPosition.y - oldPosition.y,
+    z: newPosition.z - oldPosition.z,
+  };
+
+  descendants.forEach((descendant) => {
+    const index = updatedObjects.findIndex((obj) => obj.id === descendant.id);
+    if (index !== -1) {
+      updatedObjects[index].position = {
+        x: updatedObjects[index].position.x + delta.x,
+        y: updatedObjects[index].position.y + delta.y,
+        z: updatedObjects[index].position.z + delta.z,
+      };
+    }
+  });
+
+  setPlacedObjects(updatedObjects);
+};
+```
+
+---
+
+## 6. 테스트 시나리오
+
+### 테스트 1: 계층 구조 설정
+1. 외부 DB 선택
+2. 창고 테이블 선택 및 컬럼 매핑
+3. 레벨 추가 (레벨 1: 구역, 레벨 2: 위치)
+4. 각 레벨의 테이블 및 컬럼 매핑
+5. 자재 테이블 설정
+6. "저장" 클릭하여 `hierarchy_config` 저장
+
+### 테스트 2: 데이터 로드
+1. 계층 구조 설정 완료 후
+2. 창고 선택
+3. 각 레벨 데이터가 좌측 패널에 표시되는지 확인
+4. 자재 개수가 올바르게 표시되는지 확인
+
+### 테스트 3: 3D 배치 및 공간적 종속성
+1. 레벨 1 (구역) 객체를 3D 캔버스에 드래그앤드롭
+2. 레벨 2 (위치) 객체를 레벨 1 객체 **내부**에 드래그앤드롭 → 성공
+3. 레벨 2 객체를 레벨 1 객체 **외부**에 드롭 → 오류 메시지 표시
+
+### 테스트 4: 그룹 이동
+1. 레벨 1 객체를 이동
+2. 해당 레벨 1 객체의 모든 하위 객체(레벨 2, 3, ...)도 같이 이동하는지 확인
+3. 부모-자식 관계가 유지되는지 확인
+
+### 테스트 5: 레이아웃 저장/로드
+1. 위 단계를 완료한 후 "저장" 클릭
+2. 페이지 새로고침
+3. 레이아웃을 다시 로드하여 계층 구조 및 객체 위치가 복원되는지 확인
+
+---
+
+## 7. 마이그레이션 체크리스트
+
+- [ ] DB 마이그레이션 실행 (042_refactor_digital_twin_hierarchy.sql)
+- [ ] 백엔드 API 테스트 (Postman/cURL)
+- [ ] `HierarchyConfigPanel` 컴포넌트 통합
+- [ ] `spatialContainment.ts` 유틸리티 통합
+- [ ] `DigitalTwinEditor`에서 계층 데이터 로드 구현
+- [ ] `Yard3DCanvas`에서 공간적 종속성 검증 구현
+- [ ] 그룹 이동 기능 구현
+- [ ] 모든 테스트 시나리오 통과
+- [ ] 레거시 API와의 호환성 확인
+
+---
+
+## 8. 주의사항
+
+1. **기존 레이아웃 데이터**: 마이그레이션 전 기존 레이아웃이 있다면 백업 필요
+2. **컬럼 매핑 검증**: 외부 DB 테이블의 컬럼명이 변경될 수 있으므로 auto-mapping 로직 필수
+3. **성능**: N-Level이 3단계 이상 깊어지면 재귀 쿼리 성능 모니터링 필요
+4. **권한**: 외부 DB에 대한 읽기 권한 확인
+
+---
+
+## 9. 향후 개선 사항
+
+1. **드래그 중 실시간 검증**: 드래그하는 동안 부모 영역 하이라이트
+2. **시각적 피드백**: 유효한 배치 위치를 그리드에 색상으로 표시
+3. **계층 구조 시각화**: 좌측 패널에 트리 구조로 표시
+4. **Undo/Redo**: 객체 배치 실행 취소 기능
+5. **스냅 가이드**: 부모 영역 테두리에 스냅 가이드라인 표시
+
+---
+
+**작성일**: 2025-11-20  
+**작성자**: AI Assistant
+
diff --git a/frontend/components/admin/dashboard/widgets/yard-3d/HierarchyConfigPanel.tsx b/frontend/components/admin/dashboard/widgets/yard-3d/HierarchyConfigPanel.tsx
new file mode 100644
index 00000000..8a6f4bfd
--- /dev/null
+++ b/frontend/components/admin/dashboard/widgets/yard-3d/HierarchyConfigPanel.tsx
@@ -0,0 +1,559 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Loader2, Plus, Trash2, GripVertical } from "lucide-react";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Separator } from "@/components/ui/separator";
+
+// 계층 레벨 설정 인터페이스
+export interface HierarchyLevel {
+  level: number;
+  name: string;
+  tableName: string;
+  keyColumn: string;
+  nameColumn: string;
+  parentKeyColumn: string;
+  typeColumn?: string;
+  objectTypes: string[];
+}
+
+// 전체 계층 구조 설정
+export interface HierarchyConfig {
+  warehouseKey: string; // 이 레이아웃이 속한 창고 키 (예: "DY99")
+  warehouse?: {
+    tableName: string; // 창고 테이블명 (예: "MWARMA")
+    keyColumn: string;
+    nameColumn: string;
+  };
+  levels: HierarchyLevel[];
+  material?: {
+    tableName: string;
+    keyColumn: string;
+    locationKeyColumn: string;
+    layerColumn?: string;
+    quantityColumn?: string;
+    displayColumns?: Array<{ column: string; label: string }>; // 우측 패널에 표시할 컬럼들 (컬럼명 + 표시명)
+  };
+}
+
+interface HierarchyConfigPanelProps {
+  externalDbConnectionId: number | null;
+  hierarchyConfig: HierarchyConfig | null;
+  onHierarchyConfigChange: (config: HierarchyConfig) => void;
+  availableTables: string[];
+  onLoadTables: () => Promise<void>;
+  onLoadColumns: (tableName: string) => Promise<string[]>;
+}
+
+export default function HierarchyConfigPanel({
+  externalDbConnectionId,
+  hierarchyConfig,
+  onHierarchyConfigChange,
+  availableTables,
+  onLoadTables,
+  onLoadColumns,
+}: HierarchyConfigPanelProps) {
+  const [localConfig, setLocalConfig] = useState<HierarchyConfig>(
+    hierarchyConfig || {
+      warehouseKey: "",
+      levels: [],
+    },
+  );
+
+  const [loadingColumns, setLoadingColumns] = useState(false);
+  const [columnsCache, setColumnsCache] = useState<{ [tableName: string]: string[] }>({});
+
+  // 외부에서 변경된 경우 동기화
+  useEffect(() => {
+    if (hierarchyConfig) {
+      setLocalConfig(hierarchyConfig);
+    }
+  }, [hierarchyConfig]);
+
+  // 테이블 선택 시 컬럼 로드
+  const handleTableChange = async (tableName: string, type: "warehouse" | "material" | number) => {
+    if (columnsCache[tableName]) return; // 이미 로드된 경우 스킵
+
+    setLoadingColumns(true);
+    try {
+      const columns = await onLoadColumns(tableName);
+      setColumnsCache((prev) => ({ ...prev, [tableName]: columns }));
+    } catch (error) {
+      console.error("컬럼 로드 실패:", error);
+    } finally {
+      setLoadingColumns(false);
+    }
+  };
+
+  // 창고 키 변경 (제거됨 - 상위 컴포넌트에서 처리)
+
+  // 레벨 추가
+  const handleAddLevel = () => {
+    const maxLevel = localConfig.levels.length > 0 ? Math.max(...localConfig.levels.map((l) => l.level)) : 0;
+    const newLevel: HierarchyLevel = {
+      level: maxLevel + 1,
+      name: `레벨 ${maxLevel + 1}`,
+      tableName: "",
+      keyColumn: "",
+      nameColumn: "",
+      parentKeyColumn: "",
+      objectTypes: [],
+    };
+
+    const newConfig = {
+      ...localConfig,
+      levels: [...localConfig.levels, newLevel],
+    };
+    setLocalConfig(newConfig);
+    // onHierarchyConfigChange(newConfig); // 즉시 전달하지 않음
+  };
+
+  // 레벨 삭제
+  const handleRemoveLevel = (level: number) => {
+    const newConfig = {
+      ...localConfig,
+      levels: localConfig.levels.filter((l) => l.level !== level),
+    };
+    setLocalConfig(newConfig);
+    // onHierarchyConfigChange(newConfig); // 즉시 전달하지 않음
+  };
+
+  // 레벨 설정 변경
+  const handleLevelChange = (level: number, field: keyof HierarchyLevel, value: any) => {
+    const newConfig = {
+      ...localConfig,
+      levels: localConfig.levels.map((l) => (l.level === level ? { ...l, [field]: value } : l)),
+    };
+    setLocalConfig(newConfig);
+    // onHierarchyConfigChange(newConfig); // 즉시 전달하지 않음
+  };
+
+  // 자재 설정 변경
+  const handleMaterialChange = (field: keyof NonNullable<HierarchyConfig["material"]>, value: string) => {
+    const newConfig = {
+      ...localConfig,
+      material: {
+        ...localConfig.material,
+        [field]: value,
+      } as NonNullable<HierarchyConfig["material"]>,
+    };
+    setLocalConfig(newConfig);
+    // onHierarchyConfigChange(newConfig); // 즉시 전달하지 않음
+  };
+
+  // 창고 설정 변경
+  const handleWarehouseChange = (field: keyof NonNullable<HierarchyConfig["warehouse"]>, value: string) => {
+    const newWarehouse = {
+      ...localConfig.warehouse,
+      [field]: value,
+    } as NonNullable<HierarchyConfig["warehouse"]>;
+    setLocalConfig({ ...localConfig, warehouse: newWarehouse });
+  };
+
+  // 설정 적용
+  const handleApplyConfig = () => {
+    onHierarchyConfigChange(localConfig);
+  };
+
+  if (!externalDbConnectionId) {
+    return <div className="text-muted-foreground p-4 text-center text-sm">외부 DB를 먼저 선택하세요</div>;
+  }
+
+  return (
+    <div className="space-y-4">
+      {/* 창고 설정 */}
+      <Card>
+        <CardHeader className="p-4 pb-3">
+          <CardTitle className="text-sm">창고 설정</CardTitle>
+          <CardDescription className="text-[10px]">창고 테이블 및 컬럼 매핑</CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-2 p-4 pt-0">
+          {/* 창고 테이블 선택 */}
+          <div>
+            <Label className="text-[10px]">테이블</Label>
+            <Select
+              value={localConfig.warehouse?.tableName || ""}
+              onValueChange={async (value) => {
+                handleWarehouseChange("tableName", value);
+                await handleTableChange(value, "warehouse");
+              }}
+            >
+              <SelectTrigger className="h-7 text-[10px]">
+                <SelectValue placeholder="테이블 선택..." />
+              </SelectTrigger>
+              <SelectContent>
+                {availableTables.map((table) => (
+                  <SelectItem key={table} value={table} className="text-[10px]">
+                    {table}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+
+          {/* 창고 컬럼 매핑 */}
+          {localConfig.warehouse?.tableName && columnsCache[localConfig.warehouse.tableName] && (
+            <div className="space-y-2">
+              <div>
+                <Label className="text-[10px]">ID 컬럼</Label>
+                <Select
+                  value={localConfig.warehouse.keyColumn || ""}
+                  onValueChange={(value) => handleWarehouseChange("keyColumn", value)}
+                >
+                  <SelectTrigger className="h-7 text-[10px]">
+                    <SelectValue placeholder="선택..." />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {columnsCache[localConfig.warehouse.tableName].map((col) => (
+                      <SelectItem key={col} value={col} className="text-[10px]">
+                        {col}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+
+              <div>
+                <Label className="text-[10px]">이름 컬럼</Label>
+                <Select
+                  value={localConfig.warehouse.nameColumn || ""}
+                  onValueChange={(value) => handleWarehouseChange("nameColumn", value)}
+                >
+                  <SelectTrigger className="h-7 text-[10px]">
+                    <SelectValue placeholder="선택..." />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {columnsCache[localConfig.warehouse.tableName].map((col) => (
+                      <SelectItem key={col} value={col} className="text-[10px]">
+                        {col}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
+      {/* 계층 레벨 목록 */}
+      <Card>
+        <CardHeader className="p-4 pb-3">
+          <CardTitle className="text-sm">계층 레벨</CardTitle>
+          <CardDescription className="text-[10px]">영역, 하위 영역 등</CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-3 p-4 pt-0">
+          {localConfig.levels.length === 0 && (
+            <div className="text-muted-foreground py-6 text-center text-xs">레벨을 추가하세요</div>
+          )}
+
+          {localConfig.levels.map((level) => (
+            <Card key={level.level} className="border-muted">
+              <CardHeader className="flex flex-row items-center justify-between p-3">
+                <div className="flex items-center gap-2">
+                  <GripVertical className="text-muted-foreground h-4 w-4" />
+                  <Input
+                    value={level.name}
+                    onChange={(e) => handleLevelChange(level.level, "name", e.target.value)}
+                    className="h-7 w-32 text-xs"
+                    placeholder="레벨명"
+                  />
+                </div>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => handleRemoveLevel(level.level)}
+                  className="h-7 w-7 p-0"
+                >
+                  <Trash2 className="h-3 w-3" />
+                </Button>
+              </CardHeader>
+              <CardContent className="space-y-2 p-3 pt-0">
+                <div>
+                  <Label className="text-[10px]">테이블</Label>
+                  <Select
+                    value={level.tableName}
+                    onValueChange={(val) => {
+                      handleLevelChange(level.level, "tableName", val);
+                      handleTableChange(val, level.level);
+                    }}
+                  >
+                    <SelectTrigger className="h-7 text-[10px]">
+                      <SelectValue placeholder="테이블 선택" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {availableTables.map((table) => (
+                        <SelectItem key={table} value={table} className="text-xs">
+                          {table}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+
+                {level.tableName && columnsCache[level.tableName] && (
+                  <>
+                      <div>
+                        <Label className="text-[10px]">ID 컬럼</Label>
+                        <Select
+                          value={level.keyColumn}
+                          onValueChange={(val) => handleLevelChange(level.level, "keyColumn", val)}
+                        >
+                          <SelectTrigger className="h-7 text-[10px]">
+                            <SelectValue />
+                          </SelectTrigger>
+                          <SelectContent>
+                            {columnsCache[level.tableName].map((col) => (
+                              <SelectItem key={col} value={col} className="text-xs">
+                                {col}
+                              </SelectItem>
+                            ))}
+                          </SelectContent>
+                        </Select>
+                      </div>
+
+                      <div>
+                        <Label className="text-[10px]">이름 컬럼</Label>
+                        <Select
+                          value={level.nameColumn}
+                          onValueChange={(val) => handleLevelChange(level.level, "nameColumn", val)}
+                        >
+                          <SelectTrigger className="h-7 text-[10px]">
+                            <SelectValue />
+                          </SelectTrigger>
+                          <SelectContent>
+                            {columnsCache[level.tableName].map((col) => (
+                              <SelectItem key={col} value={col} className="text-xs">
+                                {col}
+                              </SelectItem>
+                            ))}
+                          </SelectContent>
+                        </Select>
+                    </div>
+
+                    <div>
+                      <Label className="text-[10px]">부모 키 컬럼</Label>
+                      <Select
+                        value={level.parentKeyColumn}
+                        onValueChange={(val) => handleLevelChange(level.level, "parentKeyColumn", val)}
+                      >
+                        <SelectTrigger className="h-7 text-[10px]">
+                          <SelectValue placeholder="부모 키 컬럼" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {columnsCache[level.tableName].map((col) => (
+                            <SelectItem key={col} value={col} className="text-xs">
+                              {col}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    </div>
+
+                    <div>
+                      <Label className="text-[10px]">타입 컬럼 (선택)</Label>
+                      <Select
+                        value={level.typeColumn || "__none__"}
+                        onValueChange={(val) =>
+                          handleLevelChange(level.level, "typeColumn", val === "__none__" ? undefined : val)
+                        }
+                      >
+                        <SelectTrigger className="h-7 text-[10px]">
+                          <SelectValue placeholder="타입 컬럼 (선택)" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="__none__">없음</SelectItem>
+                          {columnsCache[level.tableName].map((col) => (
+                            <SelectItem key={col} value={col} className="text-xs">
+                              {col}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    </div>
+                  </>
+                )}
+              </CardContent>
+            </Card>
+          ))}
+
+          <Button variant="outline" size="sm" onClick={handleAddLevel} className="h-8 w-full text-xs">
+            <Plus className="mr-1 h-3 w-3" />
+            레벨 추가
+          </Button>
+        </CardContent>
+      </Card>
+
+      {/* 자재 설정 */}
+      <Card>
+        <CardHeader className="p-4 pb-3">
+          <CardTitle className="text-sm">자재 설정</CardTitle>
+          <CardDescription className="text-[10px]">최하위 레벨의 데이터</CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-3 p-4 pt-0">
+          <div>
+            <Label className="text-[10px]">테이블</Label>
+            <Select
+              value={localConfig.material?.tableName || ""}
+              onValueChange={(val) => {
+                handleMaterialChange("tableName", val);
+                handleTableChange(val, "material");
+              }}
+            >
+              <SelectTrigger className="h-8 text-xs">
+                <SelectValue placeholder="테이블 선택" />
+              </SelectTrigger>
+              <SelectContent>
+                {availableTables.map((table) => (
+                  <SelectItem key={table} value={table} className="text-xs">
+                    {table}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+
+          {localConfig.material?.tableName && columnsCache[localConfig.material.tableName] && (
+            <>
+                <div>
+                  <Label className="text-[10px]">ID 컬럼</Label>
+                  <Select
+                    value={localConfig.material.keyColumn}
+                    onValueChange={(val) => handleMaterialChange("keyColumn", val)}
+                  >
+                    <SelectTrigger className="h-7 text-[10px]">
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {columnsCache[localConfig.material.tableName].map((col) => (
+                        <SelectItem key={col} value={col} className="text-xs">
+                          {col}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+
+                <div>
+                  <Label className="text-[10px]">위치 키 컬럼</Label>
+                  <Select
+                    value={localConfig.material.locationKeyColumn}
+                    onValueChange={(val) => handleMaterialChange("locationKeyColumn", val)}
+                  >
+                    <SelectTrigger className="h-7 text-[10px]">
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {columnsCache[localConfig.material.tableName].map((col) => (
+                        <SelectItem key={col} value={col} className="text-xs">
+                          {col}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+              </div>
+
+                <div>
+                  <Label className="text-[10px]">레이어 컬럼 (선택)</Label>
+                  <Select
+                  value={localConfig.material.layerColumn || "__none__"}
+                  onValueChange={(val) => handleMaterialChange("layerColumn", val === "__none__" ? undefined : val)}
+                  >
+                    <SelectTrigger className="h-7 text-[10px]">
+                      <SelectValue placeholder="레이어 컬럼" />
+                    </SelectTrigger>
+                    <SelectContent>
+                    <SelectItem value="__none__">없음</SelectItem>
+                      {columnsCache[localConfig.material.tableName].map((col) => (
+                        <SelectItem key={col} value={col} className="text-xs">
+                          {col}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+
+                <div>
+                  <Label className="text-[10px]">수량 컬럼 (선택)</Label>
+                  <Select
+                  value={localConfig.material.quantityColumn || "__none__"}
+                  onValueChange={(val) => handleMaterialChange("quantityColumn", val === "__none__" ? undefined : val)}
+                  >
+                    <SelectTrigger className="h-7 text-[10px]">
+                      <SelectValue placeholder="수량 컬럼" />
+                    </SelectTrigger>
+                    <SelectContent>
+                    <SelectItem value="__none__">없음</SelectItem>
+                      {columnsCache[localConfig.material.tableName].map((col) => (
+                        <SelectItem key={col} value={col} className="text-xs">
+                          {col}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+              </div>
+
+              <Separator className="my-3" />
+
+              {/* 표시 컬럼 선택 */}
+              <div>
+                <Label className="text-[10px]">우측 패널 표시 컬럼</Label>
+                <p className="text-muted-foreground mb-2 text-[9px]">
+                  자재 클릭 시 표시할 정보를 선택하고 라벨을 입력하세요
+                </p>
+                <div className="max-h-60 space-y-2 overflow-y-auto rounded border p-2">
+                  {columnsCache[localConfig.material.tableName].map((col) => {
+                    const displayItem = localConfig.material?.displayColumns?.find((d) => d.column === col);
+                    const isSelected = !!displayItem;
+                    return (
+                      <div key={col} className="flex items-center gap-2">
+                        <input
+                          type="checkbox"
+                          checked={isSelected}
+                          onChange={(e) => {
+                            const currentDisplay = localConfig.material?.displayColumns || [];
+                            const newDisplay = e.target.checked
+                              ? [...currentDisplay, { column: col, label: col }]
+                              : currentDisplay.filter((d) => d.column !== col);
+                            handleMaterialChange("displayColumns", newDisplay);
+                          }}
+                          className="h-3 w-3 shrink-0"
+                        />
+                        <span className="w-20 shrink-0 text-[10px]">{col}</span>
+                        {isSelected && (
+                          <Input
+                            value={displayItem?.label || col}
+                            onChange={(e) => {
+                              const currentDisplay = localConfig.material?.displayColumns || [];
+                              const newDisplay = currentDisplay.map((d) =>
+                                d.column === col ? { ...d, label: e.target.value } : d,
+                              );
+                              handleMaterialChange("displayColumns", newDisplay);
+                            }}
+                            placeholder="표시명 입력..."
+                            className="h-6 flex-1 text-[10px]"
+                          />
+                        )}
+                      </div>
+                    );
+                  })}
+                </div>
+              </div>
+            </>
+          )}
+        </CardContent>
+      </Card>
+
+      {/* 적용 버튼 */}
+      <div className="flex justify-end">
+        <Button onClick={handleApplyConfig} className="h-10 gap-2 text-sm font-medium">
+          설정 적용
+        </Button>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/components/admin/dashboard/widgets/yard-3d/Yard3DCanvas.tsx b/frontend/components/admin/dashboard/widgets/yard-3d/Yard3DCanvas.tsx
index eba640cf..3de44b02 100644
--- a/frontend/components/admin/dashboard/widgets/yard-3d/Yard3DCanvas.tsx
+++ b/frontend/components/admin/dashboard/widgets/yard-3d/Yard3DCanvas.tsx
@@ -2,7 +2,7 @@
 
 import { Canvas, useThree } from "@react-three/fiber";
 import { OrbitControls, Grid, Box, Text } from "@react-three/drei";
-import { Suspense, useRef, useState, useEffect } from "react";
+import { Suspense, useRef, useState, useEffect, useMemo } from "react";
 import * as THREE from "three";
 
 interface YardPlacement {
@@ -10,6 +10,7 @@ interface YardPlacement {
   yard_layout_id?: number;
   material_code?: string | null;
   material_name?: string | null;
+  name?: string | null; // 객체 이름 (야드 이름 등)
   quantity?: number | null;
   unit?: string | null;
   position_x: number;
@@ -22,6 +23,8 @@ interface YardPlacement {
   data_source_type?: string | null;
   data_source_config?: any;
   data_binding?: any;
+  material_count?: number; // Location의 자재 개수
+  material_preview_height?: number; // 자재 스택 높이 (시각적)
 }
 
 interface Yard3DCanvasProps {
@@ -37,12 +40,9 @@ interface Yard3DCanvasProps {
 // 좌표를 그리드 칸의 중심에 스냅 (마인크래프트 스타일)
 // Three.js Box의 position은 중심점이므로, 그리드 칸의 중심에 배치해야 칸에 딱 맞음
 function snapToGrid(value: number, gridSize: number): number {
-  // 가장 가까운 그리드 칸 찾기
-  const gridIndex = Math.round(value / gridSize);
-  // 그리드 칸의 중심점 반환
-  // gridSize=5일 때: ..., -7.5, -2.5, 2.5, 7.5, 12.5, 17.5...
-  // 이렇게 하면 Box가 칸 안에 정확히 들어감
-  return gridIndex * gridSize + gridSize / 2;
+  // 가장 가까운 그리드 교차점으로 스냅 (오프셋 없음)
+  // DigitalTwinEditor에서 오프셋 처리하므로 여기서는 순수 스냅만
+  return Math.round(value / gridSize) * gridSize;
 }
 
 // 자재 박스 컴포넌트 (드래그 가능)
@@ -55,7 +55,6 @@ function MaterialBox({
   onDragEnd,
   gridSize = 5,
   allPlacements = [],
-  onCollisionDetected,
 }: {
   placement: YardPlacement;
   isSelected: boolean;
@@ -71,19 +70,70 @@ function MaterialBox({
   const [isDragging, setIsDragging] = useState(false);
   const dragStartPos = useRef<{ x: number; y: number; z: number }>({ x: 0, y: 0, z: 0 });
   const mouseStartPos = useRef<{ x: number; y: number }>({ x: 0, y: 0 });
+  const dragOffset = useRef<{ x: number; z: number }>({ x: 0, z: 0 }); // 마우스와 객체 중심 간 오프셋
   const { camera, gl } = useThree();
+  const [glowIntensity, setGlowIntensity] = useState(1);
+
+  // 선택 시 빛나는 애니메이션
+  useEffect(() => {
+    if (!isSelected) {
+      setGlowIntensity(1);
+      return;
+    }
+
+    let animationId: number;
+    const startTime = Date.now();
+
+    const animate = () => {
+      const elapsed = Date.now() - startTime;
+      const intensity = 1 + Math.sin(elapsed * 0.003) * 0.5; // 0.5 ~ 1.5 사이 진동
+      setGlowIntensity(intensity);
+      animationId = requestAnimationFrame(animate);
+    };
+
+    animate();
+
+    return () => {
+      if (animationId) {
+        cancelAnimationFrame(animationId);
+      }
+    };
+  }, [isSelected]);
 
   // 특정 좌표에 요소를 배치할 수 있는지 확인하고, 필요하면 Y 위치를 조정
   const checkCollisionAndAdjustY = (x: number, y: number, z: number): { hasCollision: boolean; adjustedY: number } => {
-    const palletHeight = 0.3; // 팔레트 높이
-    const palletGap = 0.05; // 팔레트와 박스 사이 간격
+    if (!allPlacements || allPlacements.length === 0) {
+      // 다른 객체가 없으면 기본 높이
+      const objectType = placement.data_source_type as string | null;
+      const defaultY = objectType === "area" ? 0.05 : (placement.size_y || gridSize) / 2;
+      return {
+        hasCollision: false,
+        adjustedY: defaultY,
+      };
+    }
 
-    const mySize = placement.size_x || gridSize; // 내 크기 (5)
-    const myHalfSize = mySize / 2; // 2.5
-    const mySizeY = placement.size_y || gridSize; // 박스 높이 (5)
-    const myTotalHeight = mySizeY + palletHeight + palletGap; // 팔레트 포함한 전체 높이
+    // 내 크기 정보
+    const mySizeX = placement.size_x || gridSize;
+    const mySizeZ = placement.size_z || gridSize;
+    const mySizeY = placement.size_y || gridSize;
 
-    let maxYBelow = gridSize / 2; // 기본 바닥 높이 (2.5)
+    // 내 바운딩 박스 (좌측 하단 모서리 기준)
+    const myMinX = x - mySizeX / 2;
+    const myMaxX = x + mySizeX / 2;
+    const myMinZ = z - mySizeZ / 2;
+    const myMaxZ = z + mySizeZ / 2;
+
+    const objectType = placement.data_source_type as string | null;
+    const defaultY = objectType === "area" ? 0.05 : mySizeY / 2;
+    let maxYBelow = defaultY;
+
+    // Area는 스택되지 않음 (항상 바닥에 배치)
+    if (objectType === "area") {
+      return {
+        hasCollision: false,
+        adjustedY: defaultY,
+      };
+    }
 
     for (const p of allPlacements) {
       // 자기 자신은 제외
@@ -91,39 +141,31 @@ function MaterialBox({
         continue;
       }
 
-      const pSize = p.size_x || gridSize; // 상대방 크기 (5)
-      const pHalfSize = pSize / 2; // 2.5
-      const pSizeY = p.size_y || gridSize; // 상대방 박스 높이 (5)
-      const pTotalHeight = pSizeY + palletHeight + palletGap; // 상대방 팔레트 포함 전체 높이
+      // 상대방 크기 정보
+      const pSizeX = p.size_x || gridSize;
+      const pSizeZ = p.size_z || gridSize;
+      const pSizeY = p.size_y || gridSize;
 
-      // 1단계: 넓은 범위로 겹침 감지 (살짝만 가까이 가도 감지)
-      const detectionMargin = 0.5; // 감지 범위 확장 (0.5 유닛)
-      const isNearby =
-        Math.abs(x - p.position_x) < myHalfSize + pHalfSize + detectionMargin && // X축 근접
-        Math.abs(z - p.position_z) < myHalfSize + pHalfSize + detectionMargin; // Z축 근접
+      // 상대방 바운딩 박스
+      const pMinX = p.position_x - pSizeX / 2;
+      const pMaxX = p.position_x + pSizeX / 2;
+      const pMinZ = p.position_z - pSizeZ / 2;
+      const pMaxZ = p.position_z + pSizeZ / 2;
 
-      if (isNearby) {
-        // 2단계: 실제로 겹치는지 정확히 판단 (바닥에 둘지, 위에 둘지 결정)
-        const isActuallyOverlapping =
-          Math.abs(x - p.position_x) < myHalfSize + pHalfSize && // X축 실제 겹침
-          Math.abs(z - p.position_z) < myHalfSize + pHalfSize; // Z축 실제 겹침
+      // AABB 충돌 감지 (2D 평면에서)
+      const isOverlapping = myMinX < pMaxX && myMaxX > pMinX && myMinZ < pMaxZ && myMaxZ > pMinZ;
 
-        if (isActuallyOverlapping) {
-          // 실제로 겹침: 위에 배치
-          // 상대방 전체 높이 (박스 + 팔레트)의 윗면 계산
-          const topOfOtherElement = p.position_y + pTotalHeight / 2;
-          // 내 전체 높이의 절반을 더해서 내가 올라갈 Y 위치 계산
-          const myYOnTop = topOfOtherElement + myTotalHeight / 2;
+      if (isOverlapping) {
+        // 겹침: 상대방 위에 배치
+        const topOfOtherElement = p.position_y + pSizeY / 2;
+        const myYOnTop = topOfOtherElement + mySizeY / 2;
 
-          if (myYOnTop > maxYBelow) {
-            maxYBelow = myYOnTop;
-          }
+        if (myYOnTop > maxYBelow) {
+          maxYBelow = myYOnTop;
         }
-        // 근처에만 있고 실제로 안 겹침: 바닥에 배치 (maxYBelow 유지)
       }
     }
 
-    // 요청한 Y와 조정된 Y가 다르면 충돌로 간주 (위로 올려야 함)
     const needsAdjustment = Math.abs(y - maxYBelow) > 0.1;
 
     return {
@@ -160,46 +202,60 @@ function MaterialBox({
         e.preventDefault();
         e.stopPropagation();
 
-        // 마우스 이동 거리 계산 (픽셀)
-        const deltaX = e.clientX - mouseStartPos.current.x;
-        const deltaY = e.clientY - mouseStartPos.current.y;
+        // 마우스 좌표를 정규화 (-1 ~ 1)
+        const rect = gl.domElement.getBoundingClientRect();
+        const mouseX = ((e.clientX - rect.left) / rect.width) * 2 - 1;
+        const mouseY = -((e.clientY - rect.top) / rect.height) * 2 + 1;
 
-        // 카메라 거리를 고려한 스케일 팩터
-        const distance = camera.position.distanceTo(meshRef.current.position);
-        const scaleFactor = distance / 500; // 조정 가능한 값
+        // Raycaster로 바닥 평면과의 교차점 계산
+        const raycaster = new THREE.Raycaster();
+        raycaster.setFromCamera(new THREE.Vector2(mouseX, mouseY), camera);
 
-        // 카메라 방향 벡터
-        const cameraDirection = new THREE.Vector3();
-        camera.getWorldDirection(cameraDirection);
+        // 바닥 평면 (y = 0)
+        const plane = new THREE.Plane(new THREE.Vector3(0, 1, 0), 0);
+        const intersectPoint = new THREE.Vector3();
+        const hasIntersection = raycaster.ray.intersectPlane(plane, intersectPoint);
 
-        // 카메라의 우측 벡터 (X축 이동용)
-        const right = new THREE.Vector3();
-        right.crossVectors(camera.up, cameraDirection).normalize();
+        if (!hasIntersection) {
+          return;
+        }
 
-        // 실제 3D 공간에서의 이동량 계산
-        const moveRight = right.multiplyScalar(-deltaX * scaleFactor);
-        const moveForward = new THREE.Vector3(-cameraDirection.x, 0, -cameraDirection.z)
-          .normalize()
-          .multiplyScalar(deltaY * scaleFactor);
-
-        // 최종 위치 계산
-        const finalX = dragStartPos.current.x + moveRight.x + moveForward.x;
-        const finalZ = dragStartPos.current.z + moveRight.z + moveForward.z;
+        // 마우스 위치에 드래그 시작 시 저장한 오프셋 적용
+        const finalX = intersectPoint.x + dragOffset.current.x;
+        const finalZ = intersectPoint.z + dragOffset.current.z;
 
         // NaN 검증
         if (isNaN(finalX) || isNaN(finalZ)) {
           return;
         }
 
-        // 그리드에 스냅
-        const snappedX = snapToGrid(finalX, gridSize);
-        const snappedZ = snapToGrid(finalZ, gridSize);
+        // 객체의 좌측 하단 모서리 좌표 계산 (크기 / 2를 빼서)
+        const sizeX = placement.size_x || 5;
+        const sizeZ = placement.size_z || 5;
+
+        const cornerX = finalX - sizeX / 2;
+        const cornerZ = finalZ - sizeZ / 2;
+
+        // 좌측 하단 모서리를 그리드에 스냅
+        const snappedCornerX = snapToGrid(cornerX, gridSize);
+        const snappedCornerZ = snapToGrid(cornerZ, gridSize);
+
+        // 스냅된 모서리로부터 중심 위치 계산
+        const finalSnappedX = snappedCornerX + sizeX / 2;
+        const finalSnappedZ = snappedCornerZ + sizeZ / 2;
+
+        console.log("🐛 드래그 중:", {
+          마우스_화면: { x: e.clientX, y: e.clientY },
+          정규화_마우스: { x: mouseX, y: mouseY },
+          교차점: { x: finalX, z: finalZ },
+          스냅후: { x: finalSnappedX, z: finalSnappedZ },
+        });
 
         // 충돌 체크 및 Y 위치 조정
-        const { adjustedY } = checkCollisionAndAdjustY(snappedX, dragStartPos.current.y, snappedZ);
+        const { adjustedY } = checkCollisionAndAdjustY(finalSnappedX, dragStartPos.current.y, finalSnappedZ);
 
-        // 즉시 mesh 위치 업데이트 (조정된 Y 위치로)
-        meshRef.current.position.set(finalX, adjustedY, finalZ);
+        // 즉시 mesh 위치 업데이트 (스냅된 위치로)
+        meshRef.current.position.set(finalSnappedX, adjustedY, finalSnappedZ);
 
         // ⚠️ 드래그 중에는 상태 업데이트 안 함 (미리보기만)
         // 실제 저장은 handleGlobalMouseUp에서만 수행
@@ -217,23 +273,21 @@ function MaterialBox({
         const hasMoved = deltaX > minMovement || deltaZ > minMovement;
 
         if (hasMoved) {
-          // 실제로 드래그한 경우: 그리드에 스냅
-          const snappedX = snapToGrid(currentPos.x, gridSize);
-          const snappedZ = snapToGrid(currentPos.z, gridSize);
-
-          // Y 위치 조정 (마인크래프트처럼 쌓기)
-          const { adjustedY } = checkCollisionAndAdjustY(snappedX, currentPos.y, snappedZ);
+          // 실제로 드래그한 경우: 이미 handleGlobalMouseMove에서 스냅됨
+          // currentPos는 이미 스냅+오프셋이 적용된 값이므로 그대로 사용
+          const finalX = currentPos.x;
+          const finalY = currentPos.y;
+          const finalZ = currentPos.z;
 
           // ✅ 항상 배치 가능 (위로 올라가므로)
-          console.log("✅ 배치 완료! 저장:", { x: snappedX, y: adjustedY, z: snappedZ });
-          meshRef.current.position.set(snappedX, adjustedY, snappedZ);
+          console.log("✅ 배치 완료! 저장:", { x: finalX, y: finalY, z: finalZ });
 
-          // 최종 위치 저장 (조정된 Y 위치로)
+          // 최종 위치 저장
           if (onDrag) {
             onDrag({
-              x: snappedX,
-              y: adjustedY,
-              z: snappedZ,
+              x: finalX,
+              y: finalY,
+              z: finalZ,
             });
           }
         } else {
@@ -284,6 +338,29 @@ function MaterialBox({
         y: e.clientY,
       };
 
+      // 마우스 클릭 위치를 3D 좌표로 변환
+      const rect = gl.domElement.getBoundingClientRect();
+      const mouseX = ((e.clientX - rect.left) / rect.width) * 2 - 1;
+      const mouseY = -((e.clientY - rect.top) / rect.height) * 2 + 1;
+
+      const raycaster = new THREE.Raycaster();
+      raycaster.setFromCamera(new THREE.Vector2(mouseX, mouseY), camera);
+
+      // 바닥 평면과의 교차점 계산
+      const plane = new THREE.Plane(new THREE.Vector3(0, 1, 0), 0);
+      const intersectPoint = new THREE.Vector3();
+      const hasIntersection = raycaster.ray.intersectPlane(plane, intersectPoint);
+
+      if (hasIntersection) {
+        // 마우스 클릭 위치와 객체 중심 간의 오프셋 저장
+        dragOffset.current = {
+          x: currentPos.x - intersectPoint.x,
+          z: currentPos.z - intersectPoint.z,
+        };
+      } else {
+        dragOffset.current = { x: 0, z: 0 };
+      }
+
       setIsDragging(true);
       gl.domElement.style.cursor = "grabbing";
       if (onDragStart) {
@@ -304,6 +381,525 @@ function MaterialBox({
   // 팔레트 위치 계산: 박스 하단부터 시작
   const palletYOffset = -(boxHeight / 2) - palletHeight / 2 - palletGap;
 
+  // 객체 타입 (data_source_type에 저장됨)
+  const objectType = placement.data_source_type as string | null;
+
+  // 타입별 렌더링
+  const renderObjectByType = () => {
+    switch (objectType) {
+      case "area":
+        // Area: 투명한 바닥 + 두꺼운 외곽선 (mesh) + 이름 텍스트
+        const borderThickness = 0.3; // 외곽선 두께
+        return (
+          <>
+            {/* 투명한 메쉬 (클릭 영역) */}
+            <mesh>
+              <boxGeometry args={[boxWidth, 0.1, boxDepth]} />
+              <meshBasicMaterial transparent opacity={0} />
+            </mesh>
+
+            {/* 두꺼운 외곽선 - 4개의 막대로 구현 */}
+            {/* 상단 */}
+            <mesh position={[0, 0.05, -boxDepth / 2]}>
+              <boxGeometry args={[boxWidth + borderThickness, 0.2, borderThickness]} />
+              <meshBasicMaterial color={isSelected ? "#ffffff" : placement.color} transparent opacity={0.9} />
+            </mesh>
+            {/* 하단 */}
+            <mesh position={[0, 0.05, boxDepth / 2]}>
+              <boxGeometry args={[boxWidth + borderThickness, 0.2, borderThickness]} />
+              <meshBasicMaterial color={isSelected ? "#ffffff" : placement.color} transparent opacity={0.9} />
+            </mesh>
+            {/* 좌측 */}
+            <mesh position={[-boxWidth / 2, 0.05, 0]}>
+              <boxGeometry args={[borderThickness, 0.2, boxDepth - borderThickness]} />
+              <meshBasicMaterial color={isSelected ? "#ffffff" : placement.color} transparent opacity={0.9} />
+            </mesh>
+            {/* 우측 */}
+            <mesh position={[boxWidth / 2, 0.05, 0]}>
+              <boxGeometry args={[borderThickness, 0.2, boxDepth - borderThickness]} />
+              <meshBasicMaterial color={isSelected ? "#ffffff" : placement.color} transparent opacity={0.9} />
+            </mesh>
+
+            {/* 선택 시 빛나는 효과 */}
+            {isSelected && (
+              <>
+                <mesh position={[0, 0.08, -boxDepth / 2]}>
+                  <boxGeometry args={[boxWidth + borderThickness * 2, 0.25, borderThickness * 1.5]} />
+                  <meshBasicMaterial color={placement.color} transparent opacity={0.5} />
+                </mesh>
+                <mesh position={[0, 0.08, boxDepth / 2]}>
+                  <boxGeometry args={[boxWidth + borderThickness * 2, 0.25, borderThickness * 1.5]} />
+                  <meshBasicMaterial color={placement.color} transparent opacity={0.5} />
+                </mesh>
+                <mesh position={[-boxWidth / 2, 0.08, 0]}>
+                  <boxGeometry args={[borderThickness * 1.5, 0.25, boxDepth]} />
+                  <meshBasicMaterial color={placement.color} transparent opacity={0.5} />
+                </mesh>
+                <mesh position={[boxWidth / 2, 0.08, 0]}>
+                  <boxGeometry args={[borderThickness * 1.5, 0.25, boxDepth]} />
+                  <meshBasicMaterial color={placement.color} transparent opacity={0.5} />
+                </mesh>
+              </>
+            )}
+
+            {/* Area 이름 텍스트 */}
+            {placement.name && (
+              <Text
+                position={[0, 0.15, 0]}
+                rotation={[-Math.PI / 2, 0, 0]}
+                fontSize={Math.min(boxWidth, boxDepth) * 0.2}
+                color={placement.color}
+                anchorX="center"
+                anchorY="middle"
+                outlineWidth={0.05}
+                outlineColor="#000000"
+              >
+                {placement.name}
+              </Text>
+            )}
+          </>
+        );
+
+      case "location-bed":
+      case "location-temp":
+      case "location-dest":
+        // 베드 타입 Location: 초록색 상자
+        return (
+          <>
+            <Box args={[boxWidth, boxHeight, boxDepth]}>
+              <meshStandardMaterial
+                color={placement.color}
+                roughness={0.5}
+                metalness={0.3}
+                emissive={isSelected ? placement.color : "#000000"}
+                emissiveIntensity={isSelected ? glowIntensity * 0.8 : 0}
+              />
+            </Box>
+
+            {/* 대표 자재 스택 (자재가 있을 때만) */}
+            {placement.material_count !== undefined &&
+              placement.material_count > 0 &&
+              placement.material_preview_height && (
+                <Box
+                  args={[boxWidth * 0.7, placement.material_preview_height, boxDepth * 0.7]}
+                  position={[0, boxHeight / 2 + placement.material_preview_height / 2, 0]}
+                >
+                  <meshStandardMaterial
+                    color="#ef4444"
+                    roughness={0.6}
+                    metalness={0.2}
+                    emissive={isSelected ? "#ef4444" : "#000000"}
+                    emissiveIntensity={isSelected ? glowIntensity * 0.3 : 0}
+                    transparent
+                    opacity={0.7}
+                  />
+                </Box>
+              )}
+
+            {/* Location 이름 */}
+            {placement.name && (
+              <Text
+                position={[0, boxHeight / 2 + 0.3, 0]}
+                rotation={[-Math.PI / 2, 0, 0]}
+                fontSize={Math.min(boxWidth, boxDepth) * 0.15}
+                color="#ffffff"
+                anchorX="center"
+                anchorY="middle"
+                outlineWidth={0.03}
+                outlineColor="#000000"
+              >
+                {placement.name}
+              </Text>
+            )}
+
+            {/* 자재 개수 */}
+            {placement.material_count !== undefined && placement.material_count > 0 && (
+              <Text
+                position={[0, boxHeight / 2 + 0.6, 0]}
+                rotation={[-Math.PI / 2, 0, 0]}
+                fontSize={Math.min(boxWidth, boxDepth) * 0.12}
+                color="#fbbf24"
+                anchorX="center"
+                anchorY="middle"
+                outlineWidth={0.03}
+                outlineColor="#000000"
+              >
+                {`자재: ${placement.material_count}개`}
+              </Text>
+            )}
+          </>
+        );
+
+      case "location-stp":
+        // 정차포인트(STP): 주황색 낮은 플랫폼
+        return (
+          <>
+            <Box args={[boxWidth, boxHeight, boxDepth]}>
+              <meshStandardMaterial
+                color={placement.color}
+                roughness={0.6}
+                metalness={0.2}
+                emissive={isSelected ? placement.color : "#000000"}
+                emissiveIntensity={isSelected ? glowIntensity * 0.8 : 0}
+              />
+            </Box>
+
+            {/* Location 이름 */}
+            {placement.name && (
+              <Text
+                position={[0, boxHeight / 2 + 0.3, 0]}
+                rotation={[-Math.PI / 2, 0, 0]}
+                fontSize={Math.min(boxWidth, boxDepth) * 0.15}
+                color="#ffffff"
+                anchorX="center"
+                anchorY="middle"
+                outlineWidth={0.03}
+                outlineColor="#000000"
+              >
+                {placement.name}
+              </Text>
+            )}
+
+            {/* 자재 개수 (STP는 정차포인트라 자재가 없을 수 있음) */}
+            {placement.material_count !== undefined && placement.material_count > 0 && (
+              <Text
+                position={[0, boxHeight / 2 + 0.6, 0]}
+                rotation={[-Math.PI / 2, 0, 0]}
+                fontSize={Math.min(boxWidth, boxDepth) * 0.12}
+                color="#fbbf24"
+                anchorX="center"
+                anchorY="middle"
+                outlineWidth={0.03}
+                outlineColor="#000000"
+              >
+                {`자재: ${placement.material_count}개`}
+              </Text>
+            )}
+          </>
+        );
+
+      // case "gantry-crane":
+      //   // 겐트리 크레인: 기둥 2개 + 상단 빔
+      //   return (
+      //     <group>
+      //       {/* 왼쪽 기둥 */}
+      //       <Box args={[boxWidth * 0.1, boxHeight, boxDepth * 0.1]} position={[-boxWidth * 0.4, 0, 0]}>
+      //         <meshStandardMaterial
+      //           color={placement.color}
+      //           roughness={0.3}
+      //           metalness={0.7}
+      //           emissive={isSelected ? placement.color : "#000000"}
+      //           emissiveIntensity={isSelected ? glowIntensity : 0}
+      //         />
+      //       </Box>
+      //       {/* 오른쪽 기둥 */}
+      //       <Box args={[boxWidth * 0.1, boxHeight, boxDepth * 0.1]} position={[boxWidth * 0.4, 0, 0]}>
+      //         <meshStandardMaterial
+      //           color={placement.color}
+      //           roughness={0.3}
+      //           metalness={0.7}
+      //           emissive={isSelected ? placement.color : "#000000"}
+      //           emissiveIntensity={isSelected ? glowIntensity : 0}
+      //         />
+      //       </Box>
+      //       {/* 상단 빔 */}
+      //       <Box args={[boxWidth, boxHeight * 0.15, boxDepth * 0.15]} position={[0, boxHeight * 0.42, 0]}>
+      //         <meshStandardMaterial
+      //           color={placement.color}
+      //           roughness={0.3}
+      //           metalness={0.7}
+      //           emissive={isSelected ? placement.color : "#000000"}
+      //           emissiveIntensity={isSelected ? glowIntensity : 0}
+      //         />
+      //       </Box>
+      //       {/* 호이스트 (크레인 훅) */}
+      //       <Box args={[boxWidth * 0.08, boxHeight * 0.3, boxDepth * 0.08]} position={[0, boxHeight * 0.1, 0]}>
+      //         <meshStandardMaterial
+      //           color="#fbbf24"
+      //           roughness={0.4}
+      //           metalness={0.6}
+      //           emissive={isSelected ? "#fbbf24" : "#000000"}
+      //           emissiveIntensity={isSelected ? glowIntensity * 0.6 : 0}
+      //         />
+      //       </Box>
+      //     </group>
+      //   );
+
+      case "crane-mobile":
+        // 이동식 크레인: 하부(트랙) + 회전대 + 캐빈 + 붐대 + 카운터웨이트 + 후크
+        return (
+          <group>
+            {/* 하부 - 크롤러 트랙 (좌측) */}
+            <Box
+              args={[boxWidth * 0.3, boxHeight * 0.15, boxDepth * 0.95]}
+              position={[-boxWidth * 0.3, -boxHeight * 0.42, 0]}
+            >
+              <meshStandardMaterial
+                color="#1f2937"
+                roughness={0.8}
+                metalness={0.3}
+                emissive={isSelected ? "#1f2937" : "#000000"}
+                emissiveIntensity={isSelected ? glowIntensity * 0.3 : 0}
+              />
+            </Box>
+            {/* 하부 - 크롤러 트랙 (우측) */}
+            <Box
+              args={[boxWidth * 0.3, boxHeight * 0.15, boxDepth * 0.95]}
+              position={[boxWidth * 0.3, -boxHeight * 0.42, 0]}
+            >
+              <meshStandardMaterial
+                color="#1f2937"
+                roughness={0.8}
+                metalness={0.3}
+                emissive={isSelected ? "#1f2937" : "#000000"}
+                emissiveIntensity={isSelected ? glowIntensity * 0.3 : 0}
+              />
+            </Box>
+
+            {/* 회전 플랫폼 */}
+            <Box args={[boxWidth * 0.85, boxHeight * 0.12, boxDepth * 0.85]} position={[0, -boxHeight * 0.3, 0]}>
+              <meshStandardMaterial
+                color={placement.color}
+                roughness={0.3}
+                metalness={0.7}
+                emissive={isSelected ? placement.color : "#000000"}
+                emissiveIntensity={isSelected ? glowIntensity : 0}
+              />
+            </Box>
+
+            {/* 엔진룸 (뒤쪽) */}
+            <Box
+              args={[boxWidth * 0.6, boxHeight * 0.25, boxDepth * 0.3]}
+              position={[0, -boxHeight * 0.15, boxDepth * 0.25]}
+            >
+              <meshStandardMaterial
+                color={placement.color}
+                roughness={0.4}
+                metalness={0.6}
+                emissive={isSelected ? placement.color : "#000000"}
+                emissiveIntensity={isSelected ? glowIntensity * 0.8 : 0}
+              />
+            </Box>
+
+            {/* 캐빈 (운전실) - 앞쪽 */}
+            <Box
+              args={[boxWidth * 0.35, boxHeight * 0.3, boxDepth * 0.35]}
+              position={[0, -boxHeight * 0.1, -boxDepth * 0.2]}
+            >
+              <meshStandardMaterial
+                color="#374151"
+                roughness={0.2}
+                metalness={0.8}
+                emissive={isSelected ? "#60a5fa" : "#000000"}
+                emissiveIntensity={isSelected ? glowIntensity * 0.5 : 0}
+              />
+            </Box>
+
+            {/* 붐대 베이스 (회전 지점) */}
+            <Box args={[boxWidth * 0.2, boxHeight * 0.2, boxDepth * 0.2]} position={[0, -boxHeight * 0.05, 0]}>
+              <meshStandardMaterial
+                color="#4b5563"
+                roughness={0.3}
+                metalness={0.8}
+                emissive={isSelected ? "#4b5563" : "#000000"}
+                emissiveIntensity={isSelected ? glowIntensity * 0.4 : 0}
+              />
+            </Box>
+
+            {/* 메인 붐대 (하단 섹션) */}
+            <Box
+              args={[boxWidth * 0.15, boxHeight * 0.5, boxDepth * 0.15]}
+              position={[0, boxHeight * 0.1, -boxDepth * 0.15]}
+              rotation={[Math.PI / 4.5, 0, 0]}
+            >
+              <meshStandardMaterial
+                color="#fbbf24"
+                roughness={0.3}
+                metalness={0.7}
+                emissive={isSelected ? "#fbbf24" : "#000000"}
+                emissiveIntensity={isSelected ? glowIntensity * 0.7 : 0}
+              />
+            </Box>
+
+            {/* 메인 붐대 (상단 섹션 - 연장) */}
+            <Box
+              args={[boxWidth * 0.12, boxHeight * 0.4, boxDepth * 0.12]}
+              position={[0, boxHeight * 0.3, -boxDepth * 0.35]}
+              rotation={[Math.PI / 5, 0, 0]}
+            >
+              <meshStandardMaterial
+                color="#fbbf24"
+                roughness={0.3}
+                metalness={0.7}
+                emissive={isSelected ? "#fbbf24" : "#000000"}
+                emissiveIntensity={isSelected ? glowIntensity * 0.7 : 0}
+              />
+            </Box>
+
+            {/* 카운터웨이트 (뒤쪽 균형추) */}
+            <Box
+              args={[boxWidth * 0.5, boxHeight * 0.2, boxDepth * 0.25]}
+              position={[0, -boxHeight * 0.05, boxDepth * 0.3]}
+            >
+              <meshStandardMaterial
+                color="#6b7280"
+                roughness={0.6}
+                metalness={0.4}
+                emissive={isSelected ? "#6b7280" : "#000000"}
+                emissiveIntensity={isSelected ? glowIntensity * 0.3 : 0}
+              />
+            </Box>
+
+            {/* 후크 케이블 */}
+            <Box
+              args={[boxWidth * 0.02, boxHeight * 0.3, boxDepth * 0.02]}
+              position={[0, boxHeight * 0.15, -boxDepth * 0.4]}
+            >
+              <meshStandardMaterial color="#1f2937" roughness={0.4} metalness={0.6} />
+            </Box>
+
+            {/* 후크 */}
+            <Box args={[boxWidth * 0.08, boxHeight * 0.08, boxDepth * 0.08]} position={[0, 0, -boxDepth * 0.4]}>
+              <meshStandardMaterial
+                color="#ef4444"
+                roughness={0.3}
+                metalness={0.8}
+                emissive={isSelected ? "#ef4444" : "#000000"}
+                emissiveIntensity={isSelected ? glowIntensity * 0.8 : 0}
+              />
+            </Box>
+
+            {/* 지브 와이어 (지지 케이블) */}
+            <Box
+              args={[boxWidth * 0.015, boxHeight * 0.35, boxDepth * 0.015]}
+              position={[0, boxHeight * 0.25, -boxDepth * 0.05]}
+              rotation={[Math.PI / 6, 0, 0]}
+            >
+              <meshStandardMaterial color="#1f2937" roughness={0.3} metalness={0.7} />
+            </Box>
+          </group>
+        );
+
+      case "rack":
+        // 랙: 프레임 구조
+        return (
+          <group>
+            {/* 4개 기둥 */}
+            {[
+              [-boxWidth * 0.4, -boxDepth * 0.4],
+              [boxWidth * 0.4, -boxDepth * 0.4],
+              [-boxWidth * 0.4, boxDepth * 0.4],
+              [boxWidth * 0.4, boxDepth * 0.4],
+            ].map(([x, z], idx) => (
+              <Box key={`pillar-${idx}`} args={[boxWidth * 0.08, boxHeight, boxDepth * 0.08]} position={[x, 0, z]}>
+                <meshStandardMaterial
+                  color={placement.color}
+                  roughness={0.3}
+                  metalness={0.7}
+                  emissive={isSelected ? placement.color : "#000000"}
+                  emissiveIntensity={isSelected ? 0.5 : 0}
+                />
+              </Box>
+            ))}
+            {/* 선반 (3단) */}
+            {[-boxHeight * 0.3, 0, boxHeight * 0.3].map((y, idx) => (
+              <Box key={`shelf-${idx}`} args={[boxWidth * 0.9, boxHeight * 0.05, boxDepth * 0.9]} position={[0, y, 0]}>
+                <meshStandardMaterial
+                  color="#6b7280"
+                  roughness={0.5}
+                  metalness={0.5}
+                  emissive={isSelected ? "#6b7280" : "#000000"}
+                  emissiveIntensity={isSelected ? glowIntensity * 0.6 : 0}
+                />
+              </Box>
+            ))}
+          </group>
+        );
+
+      case "plate-stack":
+      default:
+        // 후판 스택: 팔레트 + 박스 (기존 렌더링)
+        return (
+          <>
+            {/* 팔레트 그룹 - 박스 하단에 붙어있도록 */}
+            <group position={[0, palletYOffset, 0]}>
+              {/* 상단 가로 판자들 (5개) */}
+              {[-boxDepth * 0.4, -boxDepth * 0.2, 0, boxDepth * 0.2, boxDepth * 0.4].map((zOffset, idx) => (
+                <Box
+                  key={`top-${idx}`}
+                  args={[boxWidth * 0.95, palletHeight * 0.3, boxDepth * 0.15]}
+                  position={[0, palletHeight * 0.35, zOffset]}
+                >
+                  <meshStandardMaterial color="#8B4513" roughness={0.95} metalness={0.0} />
+                  <lineSegments>
+                    <edgesGeometry
+                      args={[new THREE.BoxGeometry(boxWidth * 0.95, palletHeight * 0.3, boxDepth * 0.15)]}
+                    />
+                    <lineBasicMaterial color="#000000" opacity={0.3} transparent />
+                  </lineSegments>
+                </Box>
+              ))}
+
+              {/* 중간 세로 받침대 (3개) */}
+              {[-boxWidth * 0.35, 0, boxWidth * 0.35].map((xOffset, idx) => (
+                <Box
+                  key={`middle-${idx}`}
+                  args={[boxWidth * 0.12, palletHeight * 0.4, boxDepth * 0.2]}
+                  position={[xOffset, 0, 0]}
+                >
+                  <meshStandardMaterial color="#654321" roughness={0.98} metalness={0.0} />
+                  <lineSegments>
+                    <edgesGeometry
+                      args={[new THREE.BoxGeometry(boxWidth * 0.12, palletHeight * 0.4, boxDepth * 0.2)]}
+                    />
+                    <lineBasicMaterial color="#000000" opacity={0.4} transparent />
+                  </lineSegments>
+                </Box>
+              ))}
+
+              {/* 하단 가로 판자들 (3개) */}
+              {[-boxDepth * 0.3, 0, boxDepth * 0.3].map((zOffset, idx) => (
+                <Box
+                  key={`bottom-${idx}`}
+                  args={[boxWidth * 0.95, palletHeight * 0.25, boxDepth * 0.18]}
+                  position={[0, -palletHeight * 0.35, zOffset]}
+                >
+                  <meshStandardMaterial color="#6B4423" roughness={0.97} metalness={0.0} />
+                  <lineSegments>
+                    <edgesGeometry
+                      args={[new THREE.BoxGeometry(boxWidth * 0.95, palletHeight * 0.25, boxDepth * 0.18)]}
+                    />
+                    <lineBasicMaterial color="#000000" opacity={0.3} transparent />
+                  </lineSegments>
+                </Box>
+              ))}
+            </group>
+
+            {/* 메인 박스 */}
+            <Box args={[boxWidth, boxHeight, boxDepth]} position={[0, 0, 0]}>
+              {/* 메인 재질 - 골판지 느낌 */}
+              <meshStandardMaterial
+                color={placement.color}
+                opacity={isConfigured ? (isSelected ? 1 : 0.8) : 0.5}
+                transparent
+                emissive={isSelected ? "#ffffff" : "#000000"}
+                emissiveIntensity={isSelected ? 0.2 : 0}
+                wireframe={!isConfigured}
+                roughness={0.95}
+                metalness={0.05}
+              />
+
+              {/* 외곽선 - 더 진하게 */}
+              <lineSegments>
+                <edgesGeometry args={[new THREE.BoxGeometry(boxWidth, boxHeight, boxDepth)]} />
+                <lineBasicMaterial color="#000000" opacity={0.6} transparent linewidth={1.5} />
+              </lineSegments>
+            </Box>
+          </>
+        );
+    }
+  };
+
   return (
     <group
       ref={meshRef}
@@ -328,141 +924,7 @@ function MaterialBox({
         }
       }}
     >
-      {/* 팔레트 그룹 - 박스 하단에 붙어있도록 */}
-      <group position={[0, palletYOffset, 0]}>
-        {/* 상단 가로 판자들 (5개) */}
-        {[-boxDepth * 0.4, -boxDepth * 0.2, 0, boxDepth * 0.2, boxDepth * 0.4].map((zOffset, idx) => (
-          <Box
-            key={`top-${idx}`}
-            args={[boxWidth * 0.95, palletHeight * 0.3, boxDepth * 0.15]}
-            position={[0, palletHeight * 0.35, zOffset]}
-          >
-            <meshStandardMaterial color="#8B4513" roughness={0.95} metalness={0.0} />
-            <lineSegments>
-              <edgesGeometry args={[new THREE.BoxGeometry(boxWidth * 0.95, palletHeight * 0.3, boxDepth * 0.15)]} />
-              <lineBasicMaterial color="#000000" opacity={0.3} transparent />
-            </lineSegments>
-          </Box>
-        ))}
-
-        {/* 중간 세로 받침대 (3개) */}
-        {[-boxWidth * 0.35, 0, boxWidth * 0.35].map((xOffset, idx) => (
-          <Box
-            key={`middle-${idx}`}
-            args={[boxWidth * 0.12, palletHeight * 0.4, boxDepth * 0.2]}
-            position={[xOffset, 0, 0]}
-          >
-            <meshStandardMaterial color="#654321" roughness={0.98} metalness={0.0} />
-            <lineSegments>
-              <edgesGeometry args={[new THREE.BoxGeometry(boxWidth * 0.12, palletHeight * 0.4, boxDepth * 0.2)]} />
-              <lineBasicMaterial color="#000000" opacity={0.4} transparent />
-            </lineSegments>
-          </Box>
-        ))}
-
-        {/* 하단 가로 판자들 (3개) */}
-        {[-boxDepth * 0.3, 0, boxDepth * 0.3].map((zOffset, idx) => (
-          <Box
-            key={`bottom-${idx}`}
-            args={[boxWidth * 0.95, palletHeight * 0.25, boxDepth * 0.18]}
-            position={[0, -palletHeight * 0.35, zOffset]}
-          >
-            <meshStandardMaterial color="#6B4423" roughness={0.97} metalness={0.0} />
-            <lineSegments>
-              <edgesGeometry args={[new THREE.BoxGeometry(boxWidth * 0.95, palletHeight * 0.25, boxDepth * 0.18)]} />
-              <lineBasicMaterial color="#000000" opacity={0.3} transparent />
-            </lineSegments>
-          </Box>
-        ))}
-      </group>
-
-      {/* 메인 박스 */}
-      <Box args={[boxWidth, boxHeight, boxDepth]} position={[0, 0, 0]}>
-        {/* 메인 재질 - 골판지 느낌 */}
-        <meshStandardMaterial
-          color={placement.color}
-          opacity={isConfigured ? (isSelected ? 1 : 0.8) : 0.5}
-          transparent
-          emissive={isSelected ? "#ffffff" : "#000000"}
-          emissiveIntensity={isSelected ? 0.2 : 0}
-          wireframe={!isConfigured}
-          roughness={0.95}
-          metalness={0.05}
-        />
-
-        {/* 외곽선 - 더 진하게 */}
-        <lineSegments>
-          <edgesGeometry args={[new THREE.BoxGeometry(boxWidth, boxHeight, boxDepth)]} />
-          <lineBasicMaterial color="#1a1a1a" opacity={0.8} transparent />
-        </lineSegments>
-      </Box>
-
-      {/* 포장 테이프 (가로) - 윗면 */}
-      {isConfigured && (
-        <>
-          {/* 테이프 세로 */}
-          <Box args={[boxWidth * 0.12, 0.02, boxDepth * 0.95]} position={[0, boxHeight / 2 + 0.01, 0]}>
-            <meshStandardMaterial color="#d4a574" opacity={0.7} transparent roughness={0.3} metalness={0.3} />
-          </Box>
-        </>
-      )}
-
-      {/* 자재명 라벨 스티커 (앞면) - 흰색 배경 */}
-      {isConfigured && placement.material_name && (
-        <group position={[0, boxHeight * 0.1, boxDepth / 2 + 0.02]}>
-          {/* 라벨 배경 (흰색 스티커) */}
-          <Box args={[boxWidth * 0.7, boxHeight * 0.25, 0.01]}>
-            <meshStandardMaterial color="#ffffff" roughness={0.4} metalness={0.1} />
-            <lineSegments>
-              <edgesGeometry args={[new THREE.BoxGeometry(boxWidth * 0.7, boxHeight * 0.25, 0.01)]} />
-              <lineBasicMaterial color="#cccccc" opacity={0.8} transparent />
-            </lineSegments>
-          </Box>
-          {/* 라벨 텍스트 */}
-          <Text
-            position={[0, 0, 0.02]}
-            fontSize={0.3}
-            color="#000000"
-            anchorX="center"
-            anchorY="middle"
-            fontWeight="bold"
-          >
-            {placement.material_name}
-          </Text>
-        </group>
-      )}
-
-      {/* 수량 라벨 (윗면) - 큰 글씨 */}
-      {isConfigured && placement.quantity && (
-        <Text
-          position={[0, boxHeight / 2 + 0.03, 0]}
-          rotation={[-Math.PI / 2, 0, 0]}
-          fontSize={0.6}
-          color="#000000"
-          anchorX="center"
-          anchorY="middle"
-          outlineWidth={0.1}
-          outlineColor="#ffffff"
-          fontWeight="bold"
-        >
-          {placement.quantity} {placement.unit || ""}
-        </Text>
-      )}
-
-      {/* 디테일 표시 */}
-      {isConfigured && (
-        <>
-          {/* 화살표 표시 (이 쪽이 위) */}
-          <group position={[0, boxHeight * 0.35, boxDepth / 2 + 0.01]}>
-            <Text fontSize={0.6} color="#000000" anchorX="center" anchorY="middle">
-              ▲
-            </Text>
-            <Text position={[0, -0.4, 0]} fontSize={0.3} color="#666666" anchorX="center" anchorY="middle">
-              UP
-            </Text>
-          </group>
-        </>
-      )}
+      {renderObjectByType()}
     </group>
   );
 }
@@ -563,15 +1025,18 @@ function Scene({
       <directionalLight position={[10, 10, 5]} intensity={1} />
       <directionalLight position={[-10, -10, -5]} intensity={0.3} />
 
+      {/* 배경색 */}
+      <color attach="background" args={["#f3f4f6"]} />
+
       {/* 바닥 그리드 (타일을 4등분) */}
       <Grid
         args={[100, 100]}
         cellSize={gridSize / 2} // 타일을 2x2로 나눔 (2.5칸)
         cellThickness={0.6}
-        cellColor="#1f2937" // 얇은 선 (서브 그리드) - 매우 어두운 회색
+        cellColor="#d1d5db" // 얇은 선 (서브 그리드) - 밝은 회색
         sectionSize={gridSize} // 타일 경계선 (5칸마다)
         sectionThickness={1.5}
-        sectionColor="#374151" // 타일 경계는 조금 밝게
+        sectionColor="#6b7280" // 타일 경계는 조금 어둡게
         fadeDistance={200}
         fadeStrength={1}
         followCamera={false}
@@ -640,7 +1105,7 @@ export default function Yard3DCanvas({
   };
 
   return (
-    <div className="h-full w-full bg-foreground" onClick={handleCanvasClick}>
+    <div className="h-full w-full bg-gray-100" onClick={handleCanvasClick}>
       <Canvas
         camera={{
           position: [50, 30, 50],
diff --git a/frontend/components/admin/dashboard/widgets/yard-3d/Yard3DCanvas_NEW.tsx b/frontend/components/admin/dashboard/widgets/yard-3d/Yard3DCanvas_NEW.tsx
new file mode 100644
index 00000000..e1e185e2
--- /dev/null
+++ b/frontend/components/admin/dashboard/widgets/yard-3d/Yard3DCanvas_NEW.tsx
@@ -0,0 +1,290 @@
+// (이전 import 및 interface 동일, mobile-crane case만 교체)
+// 실제로는 기존 파일에서 mobile-crane 케이스만 교체
+
+// mobile-crane 케이스를 다음으로 교체:
+
+case "mobile-crane":
+  // 이동식 크레인: 하부(트랙) + 회전대 + 캐빈 + 붐대 + 카운터웨이트 + 후크
+  return (
+    <group>
+      {/* ========== 하부 크롤러 트랙 시스템 ========== */}
+      {/* 좌측 트랙 메인 */}
+      <Box args={[boxWidth * 0.28, boxHeight * 0.18, boxDepth * 0.98]} position={[-boxWidth * 0.31, -boxHeight * 0.41, 0]}>
+        <meshStandardMaterial
+          color="#1a1a1a"
+          roughness={0.9}
+          metalness={0.2}
+          emissive={isSelected ? "#1a1a1a" : "#000000"}
+          emissiveIntensity={isSelected ? glowIntensity * 0.2 : 0}
+        />
+      </Box>
+      {/* 좌측 트랙 상부 롤러 */}
+      <Box args={[boxWidth * 0.32, boxHeight * 0.08, boxDepth * 0.12]} position={[-boxWidth * 0.31, -boxHeight * 0.28, -boxDepth * 0.42]}>
+        <meshStandardMaterial color="#2d3748" roughness={0.7} metalness={0.5} />
+      </Box>
+      <Box args={[boxWidth * 0.32, boxHeight * 0.08, boxDepth * 0.12]} position={[-boxWidth * 0.31, -boxHeight * 0.28, 0]}>
+        <meshStandardMaterial color="#2d3748" roughness={0.7} metalness={0.5} />
+      </Box>
+      <Box args={[boxWidth * 0.32, boxHeight * 0.08, boxDepth * 0.12]} position={[-boxWidth * 0.31, -boxHeight * 0.28, boxDepth * 0.42]}>
+        <meshStandardMaterial color="#2d3748" roughness={0.7} metalness={0.5} />
+      </Box>
+
+      {/* 우측 트랙 메인 */}
+      <Box args={[boxWidth * 0.28, boxHeight * 0.18, boxDepth * 0.98]} position={[boxWidth * 0.31, -boxHeight * 0.41, 0]}>
+        <meshStandardMaterial
+          color="#1a1a1a"
+          roughness={0.9}
+          metalness={0.2}
+          emissive={isSelected ? "#1a1a1a" : "#000000"}
+          emissiveIntensity={isSelected ? glowIntensity * 0.2 : 0}
+        />
+      </Box>
+      {/* 우측 트랙 상부 롤러 */}
+      <Box args={[boxWidth * 0.32, boxHeight * 0.08, boxDepth * 0.12]} position={[boxWidth * 0.31, -boxHeight * 0.28, -boxDepth * 0.42]}>
+        <meshStandardMaterial color="#2d3748" roughness={0.7} metalness={0.5} />
+      </Box>
+      <Box args={[boxWidth * 0.32, boxHeight * 0.08, boxDepth * 0.12]} position={[boxWidth * 0.31, -boxHeight * 0.28, 0]}>
+        <meshStandardMaterial color="#2d3748" roughness={0.7} metalness={0.5} />
+      </Box>
+      <Box args={[boxWidth * 0.32, boxHeight * 0.08, boxDepth * 0.12]} position={[boxWidth * 0.31, -boxHeight * 0.28, boxDepth * 0.42]}>
+        <meshStandardMaterial color="#2d3748" roughness={0.7} metalness={0.5} />
+      </Box>
+
+      {/* 트랙 연결 프레임 */}
+      <Box args={[boxWidth * 0.12, boxHeight * 0.06, boxDepth * 0.98]} position={[0, -boxHeight * 0.39, 0]}>
+        <meshStandardMaterial color="#374151" roughness={0.5} metalness={0.6} />
+      </Box>
+
+      {/* ========== 회전 상부 구조 ========== */}
+      {/* 메인 회전 플랫폼 */}
+      <Box args={[boxWidth * 0.88, boxHeight * 0.15, boxDepth * 0.88]} position={[0, -boxHeight * 0.28, 0]}>
+        <meshStandardMaterial
+          color={placement.color}
+          roughness={0.25}
+          metalness={0.75}
+          emissive={isSelected ? placement.color : "#000000"}
+          emissiveIntensity={isSelected ? glowIntensity * 0.9 : 0}
+        />
+      </Box>
+      {/* 회전 베어링 하우징 */}
+      <Box args={[boxWidth * 0.45, boxHeight * 0.08, boxDepth * 0.45]} position={[0, -boxHeight * 0.35, 0]}>
+        <meshStandardMaterial color="#4b5563" roughness={0.4} metalness={0.8} />
+      </Box>
+
+      {/* ========== 엔진 및 유압 시스템 ========== */}
+      {/* 엔진룸 메인 */}
+      <Box args={[boxWidth * 0.65, boxHeight * 0.32, boxDepth * 0.35]} position={[0, -boxHeight * 0.12, boxDepth * 0.24]}>
+        <meshStandardMaterial
+          color={placement.color}
+          roughness={0.35}
+          metalness={0.65}
+          emissive={isSelected ? placement.color : "#000000"}
+          emissiveIntensity={isSelected ? glowIntensity * 0.8 : 0}
+        />
+      </Box>
+      {/* 유압 펌프 하우징 */}
+      <Box args={[boxWidth * 0.25, boxHeight * 0.18, boxDepth * 0.25]} position={[-boxWidth * 0.25, -boxHeight * 0.15, boxDepth * 0.18]}>
+        <meshStandardMaterial color="#dc2626" roughness={0.4} metalness={0.7} />
+      </Box>
+      <Box args={[boxWidth * 0.25, boxHeight * 0.18, boxDepth * 0.25]} position={[boxWidth * 0.25, -boxHeight * 0.15, boxDepth * 0.18]}>
+        <meshStandardMaterial color="#dc2626" roughness={0.4} metalness={0.7} />
+      </Box>
+      {/* 배기 파이프 */}
+      <Box args={[boxWidth * 0.08, boxHeight * 0.35, boxDepth * 0.08]} position={[boxWidth * 0.2, -boxHeight * 0.02, boxDepth * 0.35]}>
+        <meshStandardMaterial color="#1f2937" roughness={0.3} metalness={0.8} />
+      </Box>
+
+      {/* ========== 운전실 (캐빈) ========== */}
+      {/* 캐빈 메인 바디 */}
+      <Box args={[boxWidth * 0.38, boxHeight * 0.35, boxDepth * 0.38]} position={[0, -boxHeight * 0.08, -boxDepth * 0.18]}>
+        <meshStandardMaterial
+          color="#2d3748"
+          roughness={0.15}
+          metalness={0.85}
+          emissive={isSelected ? "#3b82f6" : "#000000"}
+          emissiveIntensity={isSelected ? glowIntensity * 0.6 : 0}
+        />
+      </Box>
+      {/* 캐빈 창문 */}
+      <Box args={[boxWidth * 0.35, boxHeight * 0.25, boxDepth * 0.02]} position={[0, -boxHeight * 0.05, -boxDepth * 0.37]}>
+        <meshStandardMaterial
+          color="#60a5fa"
+          roughness={0.05}
+          metalness={0.95}
+          transparent
+          opacity={0.6}
+          emissive={isSelected ? "#60a5fa" : "#000000"}
+          emissiveIntensity={isSelected ? glowIntensity * 0.8 : 0}
+        />
+      </Box>
+      {/* 캐빈 지붕 */}
+      <Box args={[boxWidth * 0.4, boxHeight * 0.05, boxDepth * 0.4]} position={[0, boxHeight * 0.07, -boxDepth * 0.18]}>
+        <meshStandardMaterial color="#374151" roughness={0.3} metalness={0.7} />
+      </Box>
+
+      {/* ========== 붐대 시스템 ========== */}
+      {/* 붐대 마운트 베이스 */}
+      <Box args={[boxWidth * 0.25, boxHeight * 0.25, boxDepth * 0.25]} position={[0, -boxHeight * 0.02, 0]}>
+        <meshStandardMaterial
+          color="#4b5563"
+          roughness={0.25}
+          metalness={0.85}
+          emissive={isSelected ? "#4b5563" : "#000000"}
+          emissiveIntensity={isSelected ? glowIntensity * 0.5 : 0}
+        />
+      </Box>
+      {/* 붐대 힌지 실린더 (유압) */}
+      <Box
+        args={[boxWidth * 0.12, boxHeight * 0.28, boxDepth * 0.12]}
+        position={[0, boxHeight * 0.02, boxDepth * 0.08]}
+        rotation={[Math.PI / 3, 0, 0]}
+      >
+        <meshStandardMaterial color="#dc2626" roughness={0.3} metalness={0.8} />
+      </Box>
+
+      {/* 메인 붐대 하단 섹션 */}
+      <Box
+        args={[boxWidth * 0.18, boxHeight * 0.55, boxDepth * 0.18]}
+        position={[0, boxHeight * 0.12, -boxDepth * 0.13]}
+        rotation={[Math.PI / 4.2, 0, 0]}
+      >
+        <meshStandardMaterial
+          color="#f59e0b"
+          roughness={0.25}
+          metalness={0.75}
+          emissive={isSelected ? "#f59e0b" : "#000000"}
+          emissiveIntensity={isSelected ? glowIntensity * 0.75 : 0}
+        />
+      </Box>
+      {/* 붐대 상단 섹션 (텔레스코픽) */}
+      <Box
+        args={[boxWidth * 0.14, boxHeight * 0.45, boxDepth * 0.14]}
+        position={[0, boxHeight * 0.32, -boxDepth * 0.32]}
+        rotation={[Math.PI / 4.8, 0, 0]}
+      >
+        <meshStandardMaterial
+          color="#fbbf24"
+          roughness={0.25}
+          metalness={0.75}
+          emissive={isSelected ? "#fbbf24" : "#000000"}
+          emissiveIntensity={isSelected ? glowIntensity * 0.75 : 0}
+        />
+      </Box>
+      {/* 붐대 최상단 섹션 */}
+      <Box
+        args={[boxWidth * 0.1, boxHeight * 0.32, boxDepth * 0.1]}
+        position={[0, boxHeight * 0.45, -boxDepth * 0.44]}
+        rotation={[Math.PI / 5.5, 0, 0]}
+      >
+        <meshStandardMaterial
+          color="#fbbf24"
+          roughness={0.25}
+          metalness={0.75}
+          emissive={isSelected ? "#fbbf24" : "#000000"}
+          emissiveIntensity={isSelected ? glowIntensity * 0.75 : 0}
+        />
+      </Box>
+
+      {/* 붐대 트러스 구조 (디테일) */}
+      {[-0.15, -0.05, 0.05, 0.15].map((offset, idx) => (
+        <Box
+          key={`truss-${idx}`}
+          args={[boxWidth * 0.02, boxHeight * 0.5, boxDepth * 0.02]}
+          position={[offset, boxHeight * 0.12, -boxDepth * 0.13]}
+          rotation={[Math.PI / 4.2, 0, 0]}
+        >
+          <meshStandardMaterial color="#1f2937" roughness={0.4} metalness={0.7} />
+        </Box>
+      ))}
+
+      {/* ========== 카운터웨이트 시스템 ========== */}
+      {/* 카운터웨이트 메인 블록 */}
+      <Box args={[boxWidth * 0.55, boxHeight * 0.25, boxDepth * 0.28]} position={[0, -boxHeight * 0.03, boxDepth * 0.32]}>
+        <meshStandardMaterial
+          color="#52525b"
+          roughness={0.7}
+          metalness={0.4}
+          emissive={isSelected ? "#52525b" : "#000000"}
+          emissiveIntensity={isSelected ? glowIntensity * 0.3 : 0}
+        />
+      </Box>
+      {/* 카운터웨이트 추가 블록 (상단) */}
+      <Box args={[boxWidth * 0.48, boxHeight * 0.18, boxDepth * 0.22]} position={[0, boxHeight * 0.08, boxDepth * 0.32]}>
+        <meshStandardMaterial color="#3f3f46" roughness={0.7} metalness={0.4} />
+      </Box>
+      {/* 카운터웨이트 프레임 */}
+      <Box args={[boxWidth * 0.58, boxHeight * 0.08, boxDepth * 0.32]} position={[0, -boxHeight * 0.16, boxDepth * 0.32]}>
+        <meshStandardMaterial color="#1f2937" roughness={0.5} metalness={0.7} />
+      </Box>
+
+      {/* ========== 후크 및 케이블 시스템 ========== */}
+      {/* 붐대 끝단 풀리 */}
+      <Box args={[boxWidth * 0.08, boxHeight * 0.08, boxDepth * 0.08]} position={[0, boxHeight * 0.52, -boxDepth * 0.52]}>
+        <meshStandardMaterial color="#1f2937" roughness={0.3} metalness={0.8} />
+      </Box>
+      
+      {/* 메인 호이스트 케이블 */}
+      <Box args={[boxWidth * 0.025, boxHeight * 0.42, boxDepth * 0.025]} position={[0, boxHeight * 0.28, -boxDepth * 0.52]}>
+        <meshStandardMaterial
+          color="#0f172a"
+          roughness={0.3}
+          metalness={0.7}
+        />
+      </Box>
+
+      {/* 후크 블록 상단 */}
+      <Box args={[boxWidth * 0.12, boxHeight * 0.08, boxDepth * 0.12]} position={[0, boxHeight * 0.04, -boxDepth * 0.52]}>
+        <meshStandardMaterial color="#1f2937" roughness={0.3} metalness={0.8} />
+      </Box>
+      {/* 후크 메인 (빨간색 안전색) */}
+      <Box args={[boxWidth * 0.1, boxHeight * 0.12, boxDepth * 0.1]} position={[0, -boxHeight * 0.02, -boxDepth * 0.52]}>
+        <meshStandardMaterial
+          color="#dc2626"
+          roughness={0.25}
+          metalness={0.85}
+          emissive={isSelected ? "#dc2626" : "#000000"}
+          emissiveIntensity={isSelected ? glowIntensity * 0.9 : 0}
+        />
+      </Box>
+
+      {/* 지브 지지 케이블 (좌측) */}
+      <Box
+        args={[boxWidth * 0.018, boxHeight * 0.38, boxDepth * 0.018]}
+        position={[-boxWidth * 0.06, boxHeight * 0.28, -boxDepth * 0.08]}
+        rotation={[Math.PI / 5.5, 0, 0]}
+      >
+        <meshStandardMaterial color="#0f172a" roughness={0.2} metalness={0.8} />
+      </Box>
+      {/* 지브 지지 케이블 (우측) */}
+      <Box
+        args={[boxWidth * 0.018, boxHeight * 0.38, boxDepth * 0.018]}
+        position={[boxWidth * 0.06, boxHeight * 0.28, -boxDepth * 0.08]}
+        rotation={[Math.PI / 5.5, 0, 0]}
+      >
+        <meshStandardMaterial color="#0f172a" roughness={0.2} metalness={0.8} />
+      </Box>
+
+      {/* ========== 조명 및 안전 장치 ========== */}
+      {/* 작업등 (전방) */}
+      <Box args={[boxWidth * 0.06, boxHeight * 0.04, boxDepth * 0.04]} position={[0, boxHeight * 0.09, -boxDepth * 0.4]}>
+        <meshStandardMaterial
+          color="#fef08a"
+          roughness={0.1}
+          metalness={0.9}
+          emissive="#fef08a"
+          emissiveIntensity={isSelected ? glowIntensity * 1.2 : 0.3}
+        />
+      </Box>
+      {/* 경고등 (붐대 상단) */}
+      <Box args={[boxWidth * 0.04, boxHeight * 0.04, boxDepth * 0.04]} position={[0, boxHeight * 0.54, -boxDepth * 0.5]}>
+        <meshStandardMaterial
+          color="#ef4444"
+          roughness={0.1}
+          metalness={0.9}
+          emissive="#ef4444"
+          emissiveIntensity={isSelected ? glowIntensity * 1.5 : 0.4}
+        />
+      </Box>
+    </group>
+  );
+
diff --git a/frontend/components/admin/dashboard/widgets/yard-3d/YardEditor.tsx b/frontend/components/admin/dashboard/widgets/yard-3d/YardEditor.tsx
index 555820b6..5a0c5871 100644
--- a/frontend/components/admin/dashboard/widgets/yard-3d/YardEditor.tsx
+++ b/frontend/components/admin/dashboard/widgets/yard-3d/YardEditor.tsx
@@ -8,7 +8,7 @@ import dynamic from "next/dynamic";
 import { YardLayout, YardPlacement } from "./types";
 import { Alert, AlertDescription } from "@/components/ui/alert";
 import { AlertCircle, CheckCircle, XCircle } from "lucide-react";
-import { ResizableDialog, ResizableDialogContent, ResizableDialogHeader, DialogTitle, ResizableDialogDescription } from "@/components/ui/dialog";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { useToast } from "@/hooks/use-toast";
diff --git a/frontend/components/admin/dashboard/widgets/yard-3d/spatialContainment.ts b/frontend/components/admin/dashboard/widgets/yard-3d/spatialContainment.ts
new file mode 100644
index 00000000..098d33ee
--- /dev/null
+++ b/frontend/components/admin/dashboard/widgets/yard-3d/spatialContainment.ts
@@ -0,0 +1,164 @@
+/**
+ * 공간적 종속성 검증 유틸리티
+ * 
+ * 하위 영역이 상위 영역 내부에 배치되는지 검증
+ */
+
+export interface SpatialObject {
+  id: number;
+  position: { x: number; y: number; z: number };
+  size: { x: number; y: number; z: number };
+  hierarchyLevel: number;
+  parentId?: number;
+  parentKey?: string; // 외부 DB 키 (데이터 바인딩용)
+}
+
+/**
+ * 객체 A가 객체 B 안에 포함되는지 확인 (AABB)
+ */
+export function isContainedIn(child: SpatialObject, parent: SpatialObject): boolean {
+  // AABB (Axis-Aligned Bounding Box) 계산
+  const childMin = {
+    x: child.position.x - child.size.x / 2,
+    z: child.position.z - child.size.z / 2,
+  };
+  const childMax = {
+    x: child.position.x + child.size.x / 2,
+    z: child.position.z + child.size.z / 2,
+  };
+
+  const parentMin = {
+    x: parent.position.x - parent.size.x / 2,
+    z: parent.position.z - parent.size.z / 2,
+  };
+  const parentMax = {
+    x: parent.position.x + parent.size.x / 2,
+    z: parent.position.z + parent.size.z / 2,
+  };
+
+  // 자식 객체의 모든 모서리가 부모 객체 내부에 있어야 함 (XZ 평면에서)
+  return (
+    childMin.x >= parentMin.x &&
+    childMax.x <= parentMax.x &&
+    childMin.z >= parentMin.z &&
+    childMax.z <= parentMax.z
+  );
+}
+
+/**
+ * 드래그 시 부모 영역을 찾아서 검증
+ * @param child 드래그 중인 자식 객체
+ * @param allObjects 모든 배치된 객체들
+ * @param hierarchyLevels 계층 레벨 설정 (1, 2, 3, ...)
+ * @returns 유효한 부모 객체 또는 null
+ */
+export function findValidParent(
+  child: SpatialObject,
+  allObjects: SpatialObject[],
+  hierarchyLevels: number
+): SpatialObject | null {
+  // 최상위 레벨(레벨 1)은 부모가 없음
+  if (child.hierarchyLevel === 1) {
+    return null;
+  }
+
+  // 부모 레벨 (자신보다 1단계 위)
+  const parentLevel = child.hierarchyLevel - 1;
+
+  // 부모 레벨의 모든 객체 중에서 포함하는 객체 찾기
+  const possibleParents = allObjects.filter(
+    (obj) => obj.hierarchyLevel === parentLevel
+  );
+
+  for (const parent of possibleParents) {
+    if (isContainedIn(child, parent)) {
+      return parent;
+    }
+  }
+
+  // 포함하는 부모가 없으면 null
+  return null;
+}
+
+/**
+ * 드래그 종료 시 공간적 종속성 검증
+ * @param child 드래그 종료된 자식 객체
+ * @param allObjects 모든 배치된 객체들
+ * @returns { valid: boolean, parent: SpatialObject | null }
+ */
+export function validateSpatialContainment(
+  child: SpatialObject,
+  allObjects: SpatialObject[]
+): { valid: boolean; parent: SpatialObject | null } {
+  // 최상위 레벨은 항상 유효
+  if (child.hierarchyLevel === 1) {
+    return { valid: true, parent: null };
+  }
+
+  const parent = findValidParent(child, allObjects, child.hierarchyLevel);
+
+  return {
+    valid: parent !== null,
+    parent: parent,
+  };
+}
+
+/**
+ * 부모 객체 이동 시 모든 자식 객체의 위치 재계산
+ * @param parent 이동한 부모 객체
+ * @param oldPosition 이전 위치
+ * @param newPosition 새 위치
+ * @param allObjects 모든 배치된 객체들
+ * @returns 업데이트된 자식 객체 배열
+ */
+export function updateChildrenPositions(
+  parent: SpatialObject,
+  oldPosition: { x: number; y: number; z: number },
+  newPosition: { x: number; y: number; z: number },
+  allObjects: SpatialObject[]
+): SpatialObject[] {
+  const delta = {
+    x: newPosition.x - oldPosition.x,
+    y: newPosition.y - oldPosition.y,
+    z: newPosition.z - oldPosition.z,
+  };
+
+  // 직계 자식 (부모 ID가 일치하는 객체)
+  const directChildren = allObjects.filter(
+    (obj) => obj.parentId === parent.id
+  );
+
+  // 자식들의 위치 업데이트
+  return directChildren.map((child) => ({
+    ...child,
+    position: {
+      x: child.position.x + delta.x,
+      y: child.position.y + delta.y,
+      z: child.position.z + delta.z,
+    },
+  }));
+}
+
+/**
+ * 특정 객체의 모든 하위 자손 찾기 (재귀)
+ * @param parentId 부모 객체 ID
+ * @param allObjects 모든 배치된 객체들
+ * @returns 모든 하위 자손 객체 배열
+ */
+export function getAllDescendants(
+  parentId: number,
+  allObjects: SpatialObject[]
+): SpatialObject[] {
+  const directChildren = allObjects.filter((obj) => obj.parentId === parentId);
+  
+  let descendants = [...directChildren];
+  
+  // 재귀적으로 손자, 증손자... 찾기
+  for (const child of directChildren) {
+    const grandChildren = getAllDescendants(child.id, allObjects);
+    descendants = [...descendants, ...grandChildren];
+  }
+  
+  return descendants;
+}
+
diff --git a/frontend/components/common/ScreenModal.tsx b/frontend/components/common/ScreenModal.tsx
index 609c2b43..f44e2227 100644
--- a/frontend/components/common/ScreenModal.tsx
+++ b/frontend/components/common/ScreenModal.tsx
@@ -15,6 +15,8 @@ import { screenApi } from "@/lib/api/screen";
 import { ComponentData } from "@/types/screen";
 import { toast } from "sonner";
 import { useAuth } from "@/hooks/useAuth";
+import { TableOptionsProvider } from "@/contexts/TableOptionsContext";
+import { TableSearchWidgetHeightProvider } from "@/contexts/TableSearchWidgetHeightContext";
 
 interface ScreenModalState {
   isOpen: boolean;
@@ -29,7 +31,7 @@ interface ScreenModalProps {
 }
 
 export const ScreenModal: React.FC<ScreenModalProps> = ({ className }) => {
-  const { userId } = useAuth();
+  const { userId, userName, user } = useAuth();
 
   const [modalState, setModalState] = useState<ScreenModalState>({
     isOpen: false,
@@ -54,11 +56,11 @@ export const ScreenModal: React.FC<ScreenModalProps> = ({ className }) => {
 
   // 폼 데이터 상태 추가
   const [formData, setFormData] = useState<Record<string, any>>({});
-  
+
   // 연속 등록 모드 상태 (localStorage에 저장하여 리렌더링에 영향받지 않도록)
   const continuousModeRef = useRef(false);
   const [, setForceUpdate] = useState(0); // 강제 리렌더링용 (값은 사용하지 않음)
-  
+
   // localStorage에서 연속 모드 상태 복원
   useEffect(() => {
     const savedMode = localStorage.getItem("screenModal_continuousMode");
@@ -119,7 +121,19 @@ export const ScreenModal: React.FC<ScreenModalProps> = ({ className }) => {
   // 전역 모달 이벤트 리스너
   useEffect(() => {
     const handleOpenModal = (event: CustomEvent) => {
-      const { screenId, title, description, size } = event.detail;
+      const { screenId, title, description, size, urlParams } = event.detail;
+
+      // 🆕 URL 파라미터가 있으면 현재 URL에 추가
+      if (urlParams && typeof window !== "undefined") {
+        const currentUrl = new URL(window.location.href);
+        Object.entries(urlParams).forEach(([key, value]) => {
+          currentUrl.searchParams.set(key, String(value));
+        });
+        // pushState로 URL 변경 (페이지 새로고침 없이)
+        window.history.pushState({}, "", currentUrl.toString());
+        console.log("✅ URL 파라미터 추가:", urlParams);
+      }
+
       setModalState({
         isOpen: true,
         screenId,
@@ -130,6 +144,15 @@ export const ScreenModal: React.FC<ScreenModalProps> = ({ className }) => {
     };
 
     const handleCloseModal = () => {
+      // 🆕 URL 파라미터 제거
+      if (typeof window !== "undefined") {
+        const currentUrl = new URL(window.location.href);
+        // dataSourceId 파라미터 제거
+        currentUrl.searchParams.delete("dataSourceId");
+        window.history.pushState({}, "", currentUrl.toString());
+        console.log("🧹 URL 파라미터 제거");
+      }
+
       setModalState({
         isOpen: false,
         screenId: null,
@@ -150,14 +173,14 @@ export const ScreenModal: React.FC<ScreenModalProps> = ({ className }) => {
       // console.log("💾 저장 성공 이벤트 수신");
       // console.log("📌 현재 연속 모드 상태 (ref):", isContinuousMode);
       // console.log("📌 localStorage:", localStorage.getItem("screenModal_continuousMode"));
-      
+
       if (isContinuousMode) {
         // 연속 모드: 폼만 초기화하고 모달은 유지
         // console.log("✅ 연속 모드 활성화 - 폼만 초기화");
-        
+
         // 폼만 초기화 (연속 모드 상태는 localStorage에 저장되어 있으므로 유지됨)
         setFormData({});
-        
+
         toast.success("저장되었습니다. 계속 입력하세요.");
       } else {
         // 일반 모드: 모달 닫기
@@ -198,13 +221,139 @@ export const ScreenModal: React.FC<ScreenModalProps> = ({ className }) => {
 
       console.log("API 응답:", { screenInfo, layoutData });
 
+      // 🆕 URL 파라미터 확인 (수정 모드)
+      if (typeof window !== "undefined") {
+        const urlParams = new URLSearchParams(window.location.search);
+        const mode = urlParams.get("mode");
+        const editId = urlParams.get("editId");
+        const tableName = urlParams.get("tableName") || screenInfo.tableName;
+        const groupByColumnsParam = urlParams.get("groupByColumns");
+
+        console.log("📋 URL 파라미터 확인:", { mode, editId, tableName, groupByColumnsParam });
+
+        // 수정 모드이고 editId가 있으면 해당 레코드 조회
+        if (mode === "edit" && editId && tableName) {
+          try {
+            console.log("🔍 수정 데이터 조회 시작:", { tableName, editId, groupByColumnsParam });
+
+            const { dataApi } = await import("@/lib/api/data");
+
+            // groupByColumns 파싱
+            let groupByColumns: string[] = [];
+            if (groupByColumnsParam) {
+              try {
+                groupByColumns = JSON.parse(groupByColumnsParam);
+                console.log("✅ [ScreenModal] groupByColumns 파싱 성공:", groupByColumns);
+              } catch (e) {
+                console.warn("groupByColumns 파싱 실패:", e);
+              }
+            } else {
+              console.warn("⚠️ [ScreenModal] groupByColumnsParam이 없습니다!");
+            }
+
+            console.log("🚀 [ScreenModal] API 호출 직전:", {
+              tableName,
+              editId,
+              enableEntityJoin: true,
+              groupByColumns,
+              groupByColumnsLength: groupByColumns.length,
+            });
+
+            // 🆕 apiClient를 named import로 가져오기
+            const { apiClient } = await import("@/lib/api/client");
+            const params: any = {
+              enableEntityJoin: true, // 엔티티 조인 활성화 (모든 엔티티 컬럼 자동 포함)
+            };
+            if (groupByColumns.length > 0) {
+              params.groupByColumns = JSON.stringify(groupByColumns);
+              console.log("✅ [ScreenModal] groupByColumns를 params에 추가:", params.groupByColumns);
+            }
+
+            console.log("📡 [ScreenModal] 실제 API 요청:", {
+              url: `/data/${tableName}/${editId}`,
+              params,
+            });
+
+            const apiResponse = await apiClient.get(`/data/${tableName}/${editId}`, { params });
+            const response = apiResponse.data;
+
+            console.log("📩 [ScreenModal] API 응답 받음:", {
+              success: response.success,
+              hasData: !!response.data,
+              dataType: response.data ? (Array.isArray(response.data) ? "배열" : "객체") : "없음",
+              dataLength: Array.isArray(response.data) ? response.data.length : 1,
+            });
+
+            if (response.success && response.data) {
+              // 배열인 경우 (그룹핑) vs 단일 객체
+              const isArray = Array.isArray(response.data);
+
+              if (isArray) {
+                console.log(`✅ 수정 데이터 로드 완료 (그룹 레코드: ${response.data.length}개)`);
+                console.log("📦 전체 데이터 (JSON):", JSON.stringify(response.data, null, 2));
+              } else {
+                console.log("✅ 수정 데이터 로드 완료 (필드 수:", Object.keys(response.data).length, ")");
+                console.log("📊 모든 필드 키:", Object.keys(response.data));
+                console.log("📦 전체 데이터 (JSON):", JSON.stringify(response.data, null, 2));
+              }
+
+              // 🔧 날짜 필드 정규화 (타임존 제거)
+              const normalizeDates = (data: any): any => {
+                if (Array.isArray(data)) {
+                  return data.map(normalizeDates);
+                }
+                
+                if (typeof data !== 'object' || data === null) {
+                  return data;
+                }
+                
+                const normalized: any = {};
+                for (const [key, value] of Object.entries(data)) {
+                  if (typeof value === 'string' && /^\d{4}-\d{2}-\d{2}T/.test(value)) {
+                    // ISO 날짜 형식 감지: YYYY-MM-DD만 추출
+                    const before = value;
+                    const after = value.split('T')[0];
+                    console.log(`🔧 [날짜 정규화] ${key}: ${before} → ${after}`);
+                    normalized[key] = after;
+                  } else {
+                    normalized[key] = value;
+                  }
+                }
+                return normalized;
+              };
+              
+              console.log("📥 [ScreenModal] API 응답 원본:", JSON.stringify(response.data, null, 2));
+              const normalizedData = normalizeDates(response.data);
+              console.log("📥 [ScreenModal] 정규화 후:", JSON.stringify(normalizedData, null, 2));
+              
+              // 🔧 배열 데이터는 formData로 설정하지 않음 (SelectedItemsDetailInput만 사용)
+              if (Array.isArray(normalizedData)) {
+                console.log("⚠️ [ScreenModal] 그룹 레코드(배열)는 formData로 설정하지 않음. SelectedItemsDetailInput만 사용합니다.");
+                setFormData(normalizedData); // SelectedItemsDetailInput이 직접 사용
+              } else {
+                setFormData(normalizedData);
+              }
+
+              // setFormData 직후 확인
+              console.log("🔄 setFormData 호출 완료 (날짜 정규화됨)");
+            } else {
+              console.error("❌ 수정 데이터 로드 실패:", response.error);
+              toast.error("데이터를 불러올 수 없습니다.");
+            }
+          } catch (error) {
+            console.error("❌ 수정 데이터 조회 오류:", error);
+            toast.error("데이터를 불러오는 중 오류가 발생했습니다.");
+          }
+        }
+      }
+
       // screenApi는 직접 데이터를 반환하므로 .success 체크 불필요
       if (screenInfo && layoutData) {
         const components = layoutData.components || [];
 
         // 화면 관리에서 설정한 해상도 사용 (우선순위)
         const screenResolution = (layoutData as any).screenResolution || (screenInfo as any).screenResolution;
-        
+
         let dimensions;
         if (screenResolution && screenResolution.width && screenResolution.height) {
           // 화면 관리에서 설정한 해상도 사용
@@ -220,7 +369,7 @@ export const ScreenModal: React.FC<ScreenModalProps> = ({ className }) => {
           dimensions = calculateScreenDimensions(components);
           console.log("⚠️ 자동 계산된 크기 사용:", dimensions);
         }
-        
+
         setScreenDimensions(dimensions);
 
         setScreenData({
@@ -245,6 +394,17 @@ export const ScreenModal: React.FC<ScreenModalProps> = ({ className }) => {
   };
 
   const handleClose = () => {
+    // 🔧 URL 파라미터 제거 (mode, editId, tableName 등)
+    if (typeof window !== "undefined") {
+      const currentUrl = new URL(window.location.href);
+      currentUrl.searchParams.delete("mode");
+      currentUrl.searchParams.delete("editId");
+      currentUrl.searchParams.delete("tableName");
+      currentUrl.searchParams.delete("groupByColumns");
+      window.history.pushState({}, "", currentUrl.toString());
+      console.log("🧹 [ScreenModal] URL 파라미터 제거 (모달 닫힘)");
+    }
+    
     setModalState({
       isOpen: false,
       screenId: null,
@@ -280,17 +440,17 @@ export const ScreenModal: React.FC<ScreenModalProps> = ({ className }) => {
   };
 
   const modalStyle = getModalStyle();
-  
+
   // 안정적인 modalId를 상태로 저장 (모달이 닫혀도 유지)
   const [persistedModalId, setPersistedModalId] = useState<string | undefined>(undefined);
-  
+
   // modalId 생성 및 업데이트
   useEffect(() => {
     // 모달이 열려있고 screenId가 있을 때만 업데이트
     if (!modalState.isOpen) return;
-    
+
     let newModalId: string | undefined;
-    
+
     // 1순위: screenId (가장 안정적)
     if (modalState.screenId) {
       newModalId = `screen-modal-${modalState.screenId}`;
@@ -328,11 +488,17 @@ export const ScreenModal: React.FC<ScreenModalProps> = ({ className }) => {
       //   result: newModalId,
       // });
     }
-    
+
     if (newModalId) {
       setPersistedModalId(newModalId);
     }
-  }, [modalState.isOpen, modalState.screenId, modalState.title, screenData?.screenInfo?.tableName, screenData?.screenInfo?.screenName]);
+  }, [
+    modalState.isOpen,
+    modalState.screenId,
+    modalState.title,
+    screenData?.screenInfo?.tableName,
+    screenData?.screenInfo?.screenName,
+  ]);
 
   return (
     <ResizableDialog open={modalState.isOpen} onOpenChange={handleClose}>
@@ -373,55 +539,62 @@ export const ScreenModal: React.FC<ScreenModalProps> = ({ className }) => {
               </div>
             </div>
           ) : screenData ? (
-            <div
-              className="relative bg-white mx-auto"
-              style={{
-                width: `${screenDimensions?.width || 800}px`,
-                height: `${screenDimensions?.height || 600}px`,
-                transformOrigin: "center center",
-              }}
-            >
-              {screenData.components.map((component) => {
-                // 화면 관리 해상도를 사용하는 경우 offset 조정 불필요
-                const offsetX = screenDimensions?.offsetX || 0;
-                const offsetY = screenDimensions?.offsetY || 0;
+            <TableOptionsProvider>
+              <div
+                className="relative mx-auto bg-white"
+                style={{
+                  width: `${screenDimensions?.width || 800}px`,
+                  height: `${screenDimensions?.height || 600}px`,
+                  transformOrigin: "center center",
+                }}
+              >
+                {screenData.components.map((component) => {
+                  // 화면 관리 해상도를 사용하는 경우 offset 조정 불필요
+                  const offsetX = screenDimensions?.offsetX || 0;
+                  const offsetY = screenDimensions?.offsetY || 0;
 
-                // offset이 0이면 원본 위치 사용 (화면 관리 해상도 사용 시)
-                const adjustedComponent = (offsetX === 0 && offsetY === 0) ? component : {
-                  ...component,
-                  position: {
-                    ...component.position,
-                    x: parseFloat(component.position?.x?.toString() || "0") - offsetX,
-                    y: parseFloat(component.position?.y?.toString() || "0") - offsetY,
-                  },
-                };
+                  // offset이 0이면 원본 위치 사용 (화면 관리 해상도 사용 시)
+                  const adjustedComponent =
+                    offsetX === 0 && offsetY === 0
+                      ? component
+                      : {
+                          ...component,
+                          position: {
+                            ...component.position,
+                            x: parseFloat(component.position?.x?.toString() || "0") - offsetX,
+                            y: parseFloat(component.position?.y?.toString() || "0") - offsetY,
+                          },
+                        };
 
-                return (
-                  <InteractiveScreenViewerDynamic
-                    key={component.id}
-                    component={adjustedComponent}
-                    allComponents={screenData.components}
-                    formData={formData}
-                    onFormDataChange={(fieldName, value) => {
-                      // console.log(`🎯 ScreenModal onFormDataChange 호출: ${fieldName} = "${value}"`);
-                      // console.log("📋 현재 formData:", formData);
-                      setFormData((prev) => {
-                        const newFormData = {
+                  return (
+                    <InteractiveScreenViewerDynamic
+                      key={component.id}
+                      component={adjustedComponent}
+                      allComponents={screenData.components}
+                      formData={formData}
+                      onFormDataChange={(fieldName, value) => {
+                        setFormData((prev) => ({
                           ...prev,
                           [fieldName]: value,
-                        };
-                        // console.log("📝 ScreenModal 업데이트된 formData:", newFormData);
-                        return newFormData;
-                      });
-                    }}
-                    screenInfo={{
-                      id: modalState.screenId!,
-                      tableName: screenData.screenInfo?.tableName,
-                    }}
-                  />
-                );
-              })}
-            </div>
+                        }));
+                      }}
+                      onRefresh={() => {
+                        // 부모 화면의 테이블 새로고침 이벤트 발송
+                        console.log("🔄 모달에서 부모 화면 테이블 새로고침 이벤트 발송");
+                        window.dispatchEvent(new CustomEvent("refreshTable"));
+                      }}
+                      screenInfo={{
+                        id: modalState.screenId!,
+                        tableName: screenData.screenInfo?.tableName,
+                      }}
+                      userId={userId}
+                      userName={userName}
+                      companyCode={user?.companyCode}
+                    />
+                  );
+                })}
+              </div>
+            </TableOptionsProvider>
           ) : (
             <div className="flex h-full items-center justify-center">
               <p className="text-muted-foreground">화면 데이터가 없습니다.</p>
@@ -443,10 +616,7 @@ export const ScreenModal: React.FC<ScreenModalProps> = ({ className }) => {
                 // console.log("🔄 연속 모드 변경:", isChecked);
               }}
             />
-            <Label
-              htmlFor="continuous-mode"
-              className="text-sm font-normal cursor-pointer select-none"
-            >
+            <Label htmlFor="continuous-mode" className="cursor-pointer text-sm font-normal select-none">
               저장 후 계속 입력 (연속 등록 모드)
             </Label>
           </div>
diff --git a/frontend/components/dashboard/widgets/CustomMetricTestWidget.tsx b/frontend/components/dashboard/widgets/CustomMetricTestWidget.tsx
index 1b78801e..6a5f235c 100644
--- a/frontend/components/dashboard/widgets/CustomMetricTestWidget.tsx
+++ b/frontend/components/dashboard/widgets/CustomMetricTestWidget.tsx
@@ -70,23 +70,22 @@ export default function CustomMetricTestWidget({ element }: CustomMetricTestWidg
   const [value, setValue] = useState<number>(0);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
+  const [lastUpdateTime, setLastUpdateTime] = useState<Date | null>(null);
 
   const config = element?.customMetricConfig;
 
-  console.log("📊 [CustomMetricTestWidget] 렌더링:", {
-    element,
-    config,
-    dataSource: element?.dataSource,
-  });
-
   useEffect(() => {
     loadData();
 
-    // 자동 새로고침 (30초마다)
-    const interval = setInterval(loadData, 30000);
-    return () => clearInterval(interval);
+    // 자동 새로고침 (설정된 간격마다, 0이면 비활성)
+    const refreshInterval = config?.refreshInterval ?? 30; // 기본값: 30초
+
+    if (refreshInterval > 0) {
+      const interval = setInterval(loadData, refreshInterval * 1000);
+      return () => clearInterval(interval);
+    }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [element]);
+  }, [element, config?.refreshInterval]);
 
   const loadData = async () => {
     try {
@@ -132,6 +131,7 @@ export default function CustomMetricTestWidget({ element }: CustomMetricTestWidg
           if (config?.valueColumn && config?.aggregation) {
             const calculatedValue = calculateMetric(rows, config.valueColumn, config.aggregation);
             setValue(calculatedValue);
+            setLastUpdateTime(new Date()); // 업데이트 시간 기록
           } else {
             setValue(0);
           }
@@ -192,6 +192,7 @@ export default function CustomMetricTestWidget({ element }: CustomMetricTestWidg
           if (config?.valueColumn && config?.aggregation) {
             const calculatedValue = calculateMetric(rows, config.valueColumn, config.aggregation);
             setValue(calculatedValue);
+            setLastUpdateTime(new Date()); // 업데이트 시간 기록
           } else {
             setValue(0);
           }
@@ -200,7 +201,6 @@ export default function CustomMetricTestWidget({ element }: CustomMetricTestWidg
         }
       }
     } catch (err) {
-      console.error("데이터 로드 실패:", err);
       setError(err instanceof Error ? err.message : "데이터를 불러올 수 없습니다");
     } finally {
       setLoading(false);
@@ -283,6 +283,16 @@ export default function CustomMetricTestWidget({ element }: CustomMetricTestWidg
         <span className="text-primary text-4xl font-bold">{formattedValue}</span>
         {config?.unit && <span className="text-muted-foreground text-lg">{config.unit}</span>}
       </div>
+
+      {/* 마지막 업데이트 시간 */}
+      {lastUpdateTime && (
+        <div className="text-muted-foreground mt-3 text-[10px]">
+          {lastUpdateTime.toLocaleTimeString("ko-KR")}
+          {config?.refreshInterval && config.refreshInterval > 0 && (
+            <span className="ml-1">• {config.refreshInterval}초마다 갱신</span>
+          )}
+        </div>
+      )}
     </div>
   );
 }
diff --git a/frontend/components/dashboard/widgets/CustomMetricWidget.tsx b/frontend/components/dashboard/widgets/CustomMetricWidget.tsx
index fcd5593f..7c39c731 100644
--- a/frontend/components/dashboard/widgets/CustomMetricWidget.tsx
+++ b/frontend/components/dashboard/widgets/CustomMetricWidget.tsx
@@ -70,17 +70,22 @@ export default function CustomMetricWidget({ element }: CustomMetricWidgetProps)
   const [value, setValue] = useState<number>(0);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
+  const [lastUpdateTime, setLastUpdateTime] = useState<Date | null>(null);
 
   const config = element?.customMetricConfig;
 
   useEffect(() => {
     loadData();
 
-    // 자동 새로고침 (30초마다)
-    const interval = setInterval(loadData, 30000);
-    return () => clearInterval(interval);
+    // 자동 새로고침 (설정된 간격마다, 0이면 비활성)
+    const refreshInterval = config?.refreshInterval ?? 30; // 기본값: 30초
+
+    if (refreshInterval > 0) {
+      const interval = setInterval(loadData, refreshInterval * 1000);
+      return () => clearInterval(interval);
+    }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [element]);
+  }, [element, config?.refreshInterval]);
 
   const loadData = async () => {
     try {
@@ -198,15 +203,16 @@ export default function CustomMetricWidget({ element }: CustomMetricWidgetProps)
       setError(err instanceof Error ? err.message : "데이터를 불러올 수 없습니다");
     } finally {
       setLoading(false);
+      setLastUpdateTime(new Date());
     }
   };
 
   if (loading) {
     return (
-      <div className="flex h-full items-center justify-center bg-background">
+      <div className="bg-background flex h-full items-center justify-center">
         <div className="text-center">
           <div className="border-primary mx-auto h-8 w-8 animate-spin rounded-full border-2 border-t-transparent" />
-          <p className="mt-2 text-sm text-muted-foreground">데이터 로딩 중...</p>
+          <p className="text-muted-foreground mt-2 text-sm">데이터 로딩 중...</p>
         </div>
       </div>
     );
@@ -214,12 +220,12 @@ export default function CustomMetricWidget({ element }: CustomMetricWidgetProps)
 
   if (error) {
     return (
-      <div className="flex h-full items-center justify-center bg-background p-4">
+      <div className="bg-background flex h-full items-center justify-center p-4">
         <div className="text-center">
-          <p className="text-sm text-destructive">⚠️ {error}</p>
+          <p className="text-destructive text-sm">⚠️ {error}</p>
           <button
             onClick={loadData}
-            className="mt-2 rounded bg-destructive/10 px-3 py-1 text-xs text-destructive hover:bg-destructive/20"
+            className="bg-destructive/10 text-destructive hover:bg-destructive/20 mt-2 rounded px-3 py-1 text-xs"
           >
             다시 시도
           </button>
@@ -238,10 +244,10 @@ export default function CustomMetricWidget({ element }: CustomMetricWidgetProps)
   // 설정이 없으면 안내 화면
   if (!hasDataSource || !hasConfig) {
     return (
-      <div className="flex h-full items-center justify-center bg-background p-4">
+      <div className="bg-background flex h-full items-center justify-center p-4">
         <div className="max-w-xs space-y-2 text-center">
-          <h3 className="text-sm font-bold text-foreground">통계 카드</h3>
-          <div className="space-y-1.5 text-xs text-foreground">
+          <h3 className="text-foreground text-sm font-bold">통계 카드</h3>
+          <div className="text-foreground space-y-1.5 text-xs">
             <p className="font-medium">📊 단일 통계 위젯</p>
             <ul className="space-y-0.5 text-left">
               <li>• 데이터 소스에서 쿼리를 실행합니다</li>
@@ -250,7 +256,7 @@ export default function CustomMetricWidget({ element }: CustomMetricWidgetProps)
               <li>• COUNT, SUM, AVG, MIN, MAX 지원</li>
             </ul>
           </div>
-          <div className="mt-2 rounded-lg bg-primary/10 p-2 text-[10px] text-primary">
+          <div className="bg-primary/10 text-primary mt-2 rounded-lg p-2 text-[10px]">
             <p className="font-medium">⚙️ 설정 방법</p>
             <p>1. 데이터 탭에서 쿼리 실행</p>
             <p>2. 필터 조건 추가 (선택사항)</p>
@@ -268,7 +274,7 @@ export default function CustomMetricWidget({ element }: CustomMetricWidgetProps)
 
   // 통계 카드 렌더링
   return (
-    <div className="flex h-full w-full flex-col items-center justify-center bg-card p-6 text-center">
+    <div className="bg-card flex h-full w-full flex-col items-center justify-center p-6 text-center">
       {/* 제목 */}
       <div className="text-muted-foreground mb-2 text-sm font-medium">{config?.title || "통계"}</div>
 
@@ -277,6 +283,16 @@ export default function CustomMetricWidget({ element }: CustomMetricWidgetProps)
         <span className="text-primary text-4xl font-bold">{formattedValue}</span>
         {config?.unit && <span className="text-muted-foreground text-lg">{config.unit}</span>}
       </div>
+
+      {/* 마지막 업데이트 시간 */}
+      {lastUpdateTime && (
+        <div className="text-muted-foreground mt-3 text-[10px]">
+          {lastUpdateTime.toLocaleTimeString("ko-KR")}
+          {config?.refreshInterval && config.refreshInterval > 0 && (
+            <span className="ml-1">• {config.refreshInterval}초마다 갱신</span>
+          )}
+        </div>
+      )}
     </div>
   );
 }
diff --git a/frontend/components/dashboard/widgets/MapTestWidgetV2.tsx b/frontend/components/dashboard/widgets/MapTestWidgetV2.tsx
index 5df1663a..9cb2aa39 100644
--- a/frontend/components/dashboard/widgets/MapTestWidgetV2.tsx
+++ b/frontend/components/dashboard/widgets/MapTestWidgetV2.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-require-imports */
 "use client";
 
-import React, { useEffect, useState, useCallback, useMemo } from "react";
+import React, { useEffect, useState, useCallback, useMemo, useRef } from "react";
 import dynamic from "next/dynamic";
 import { DashboardElement, ChartDataSource } from "@/components/admin/dashboard/types";
 import { Button } from "@/components/ui/button";
@@ -10,6 +10,20 @@ import { applyColumnMapping } from "@/lib/utils/columnMapping";
 import { getApiUrl } from "@/lib/utils/apiUrl";
 import "leaflet/dist/leaflet.css";
 
+// Popup 말풍선 꼬리 제거 스타일
+if (typeof document !== "undefined") {
+  const style = document.createElement("style");
+  style.textContent = `
+    .leaflet-popup-tip-container {
+      display: none !important;
+    }
+    .leaflet-popup-content-wrapper {
+      border-radius: 8px !important;
+    }
+  `;
+  document.head.appendChild(style);
+}
+
 // Leaflet 아이콘 경로 설정 (엑박 방지)
 if (typeof window !== "undefined") {
   import("leaflet").then((L) => {
@@ -66,7 +80,7 @@ interface PolygonData {
 
 export default function MapTestWidgetV2({ element }: MapTestWidgetV2Props) {
   const [markers, setMarkers] = useState<MarkerData[]>([]);
-  const [prevMarkers, setPrevMarkers] = useState<MarkerData[]>([]); // 이전 마커 위치 저장
+  const prevMarkersRef = useRef<MarkerData[]>([]); // 이전 마커 위치 저장 (useRef 사용)
   const [polygons, setPolygons] = useState<PolygonData[]>([]);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
@@ -96,11 +110,8 @@ export default function MapTestWidgetV2({ element }: MapTestWidgetV2Props) {
   // 다중 데이터 소스 로딩
   const loadMultipleDataSources = useCallback(async () => {
     if (!dataSources || dataSources.length === 0) {
-      // // console.log("⚠️ 데이터 소스가 없습니다.");
       return;
     }
-
-    // // console.log(`🔄 ${dataSources.length}개의 데이터 소스 로딩 시작...`);
     setLoading(true);
     setError(null);
 
@@ -109,8 +120,6 @@ export default function MapTestWidgetV2({ element }: MapTestWidgetV2Props) {
       const results = await Promise.allSettled(
         dataSources.map(async (source) => {
           try {
-            // // console.log(`📡 데이터 소스 "${source.name || source.id}" 로딩 중...`);
-
             if (source.type === "api") {
               return await loadRestApiData(source);
             } else if (source.type === "database") {
@@ -119,7 +128,6 @@ export default function MapTestWidgetV2({ element }: MapTestWidgetV2Props) {
 
             return { markers: [], polygons: [] };
           } catch (err: any) {
-            console.error(`❌ 데이터 소스 "${source.name || source.id}" 로딩 실패:`, err);
             return { markers: [], polygons: [] };
           }
         }),
@@ -130,35 +138,24 @@ export default function MapTestWidgetV2({ element }: MapTestWidgetV2Props) {
       const allPolygons: PolygonData[] = [];
 
       results.forEach((result, index) => {
-        // // console.log(`🔍 결과 ${index}:`, result);
-
         if (result.status === "fulfilled" && result.value) {
           const value = result.value as { markers: MarkerData[]; polygons: PolygonData[] };
-          // // console.log(`✅ 데이터 소스 ${index} 성공:`, value);
 
           // 마커 병합
           if (value.markers && Array.isArray(value.markers)) {
-            // // console.log(`  → 마커 ${value.markers.length}개 추가`);
             allMarkers.push(...value.markers);
           }
 
           // 폴리곤 병합
           if (value.polygons && Array.isArray(value.polygons)) {
-            // // console.log(`  → 폴리곤 ${value.polygons.length}개 추가`);
             allPolygons.push(...value.polygons);
           }
-        } else if (result.status === "rejected") {
-          console.error(`❌ 데이터 소스 ${index} 실패:`, result.reason);
         }
       });
 
-      // // console.log(`✅ 총 ${allMarkers.length}개의 마커, ${allPolygons.length}개의 폴리곤 로딩 완료`);
-      // // console.log("📍 최종 마커 데이터:", allMarkers);
-      // // console.log("🔷 최종 폴리곤 데이터:", allPolygons);
-
       // 이전 마커 위치와 비교하여 진행 방향 계산
       const markersWithHeading = allMarkers.map((marker) => {
-        const prevMarker = prevMarkers.find((pm) => pm.id === marker.id);
+        const prevMarker = prevMarkersRef.current.find((pm) => pm.id === marker.id);
 
         if (prevMarker && (prevMarker.lat !== marker.lat || prevMarker.lng !== marker.lng)) {
           // 이동했으면 방향 계산
@@ -178,21 +175,19 @@ export default function MapTestWidgetV2({ element }: MapTestWidgetV2Props) {
         };
       });
 
-      setPrevMarkers(markersWithHeading); // 다음 비교를 위해 현재 위치 저장
+      prevMarkersRef.current = markersWithHeading; // 다음 비교를 위해 현재 위치 저장 (useRef 사용)
       setMarkers(markersWithHeading);
       setPolygons(allPolygons);
       setLastRefreshTime(new Date());
     } catch (err: any) {
-      console.error("❌ 데이터 로딩 중 오류:", err);
       setError(err.message);
     } finally {
       setLoading(false);
     }
-  }, [dataSources, prevMarkers, calculateHeading]);
+  }, [dataSources, calculateHeading]); // prevMarkersRef는 의존성에 포함하지 않음 (useRef이므로)
 
   // 수동 새로고침 핸들러
   const handleManualRefresh = useCallback(() => {
-    // // console.log("🔄 수동 새로고침 버튼 클릭");
     loadMultipleDataSources();
   }, [loadMultipleDataSources]);
 
@@ -200,8 +195,6 @@ export default function MapTestWidgetV2({ element }: MapTestWidgetV2Props) {
   const loadRestApiData = async (
     source: ChartDataSource,
   ): Promise<{ markers: MarkerData[]; polygons: PolygonData[] }> => {
-    // // console.log(`🌐 REST API 데이터 로딩 시작:`, source.name, `mapDisplayType:`, source.mapDisplayType);
-
     if (!source.endpoint) {
       throw new Error("API endpoint가 없습니다.");
     }
@@ -256,13 +249,12 @@ export default function MapTestWidgetV2({ element }: MapTestWidgetV2Props) {
 
     // 텍스트 형식 데이터 체크 (기상청 API 등)
     if (data && typeof data === "object" && data.text && typeof data.text === "string") {
-      // // console.log("📄 텍스트 형식 데이터 감지, CSV 파싱 시도");
       const parsedData = parseTextData(data.text);
       if (parsedData.length > 0) {
-        // // console.log(`✅ CSV 파싱 성공: ${parsedData.length}개 행`);
         // 컬럼 매핑 적용
         const mappedData = applyColumnMapping(parsedData, source.columnMapping);
-        return convertToMapData(mappedData, source.name || source.id || "API", source.mapDisplayType, source);
+        const result = convertToMapData(mappedData, source.name || source.id || "API", source.mapDisplayType, source);
+        return result;
       }
     }
 
@@ -280,15 +272,14 @@ export default function MapTestWidgetV2({ element }: MapTestWidgetV2Props) {
     const mappedRows = applyColumnMapping(rows, source.columnMapping);
 
     // 마커와 폴리곤으로 변환 (mapDisplayType + dataSource 전달)
-    return convertToMapData(mappedRows, source.name || source.id || "API", source.mapDisplayType, source);
+    const finalResult = convertToMapData(mappedRows, source.name || source.id || "API", source.mapDisplayType, source);
+    return finalResult;
   };
 
   // Database 데이터 로딩
   const loadDatabaseData = async (
     source: ChartDataSource,
   ): Promise<{ markers: MarkerData[]; polygons: PolygonData[] }> => {
-    // // console.log(`💾 Database 데이터 로딩 시작:`, source.name, `mapDisplayType:`, source.mapDisplayType);
-
     if (!source.query) {
       throw new Error("SQL 쿼리가 없습니다.");
     }
@@ -330,7 +321,6 @@ export default function MapTestWidgetV2({ element }: MapTestWidgetV2Props) {
   // XML 데이터 파싱 (UTIC API 등)
   const parseXmlData = (xmlText: string): any[] => {
     try {
-      // // console.log("    📄 XML 파싱 시작");
       const parser = new DOMParser();
       const xmlDoc = parser.parseFromString(xmlText, "text/xml");
 
@@ -349,10 +339,8 @@ export default function MapTestWidgetV2({ element }: MapTestWidgetV2Props) {
         results.push(obj);
       }
 
-      // // console.log(`    ✅ XML 파싱 완료: ${results.length}개 레코드`);
       return results;
     } catch (error) {
-      console.error("    ❌ XML 파싱 실패:", error);
       return [];
     }
   };
@@ -360,11 +348,8 @@ export default function MapTestWidgetV2({ element }: MapTestWidgetV2Props) {
   // 텍스트 데이터 파싱 (CSV, 기상청 형식 등)
   const parseTextData = (text: string): any[] => {
     try {
-      // // console.log("    🔍 원본 텍스트 (처음 500자):", text.substring(0, 500));
-
       // XML 형식 감지
       if (text.trim().startsWith("<?xml") || text.trim().startsWith("<result>")) {
-        // // console.log("    📄 XML 형식 데이터 감지");
         return parseXmlData(text);
       }
 
@@ -373,8 +358,6 @@ export default function MapTestWidgetV2({ element }: MapTestWidgetV2Props) {
         return trimmed && !trimmed.startsWith("#") && !trimmed.startsWith("=") && !trimmed.startsWith("---");
       });
 
-      // // console.log(`    📝 유효한 라인: ${lines.length}개`);
-
       if (lines.length === 0) return [];
 
       // CSV 형식으로 파싱
@@ -384,8 +367,6 @@ export default function MapTestWidgetV2({ element }: MapTestWidgetV2Props) {
         const line = lines[i];
         const values = line.split(",").map((v) => v.trim().replace(/,=$/g, ""));
 
-        // // console.log(`    라인 ${i}:`, values);
-
         // 기상특보 형식: 지역코드, 지역명, 하위코드, 하위지역명, 발표시각, 특보종류, 등급, 발표상태, 설명
         if (values.length >= 4) {
           const obj: any = {
@@ -404,14 +385,11 @@ export default function MapTestWidgetV2({ element }: MapTestWidgetV2Props) {
           obj.name = obj.subRegion || obj.region || obj.code;
 
           result.push(obj);
-          // console.log(`      ✅ 파싱 성공:`, obj);
         }
       }
 
-      // // console.log("    📊 최종 파싱 결과:", result.length, "개");
       return result;
     } catch (error) {
-      console.error("    ❌ 텍스트 파싱 오류:", error);
       return [];
     }
   };
@@ -423,23 +401,15 @@ export default function MapTestWidgetV2({ element }: MapTestWidgetV2Props) {
     mapDisplayType?: "auto" | "marker" | "polygon",
     dataSource?: ChartDataSource,
   ): { markers: MarkerData[]; polygons: PolygonData[] } => {
-    // // console.log(`🔄 ${sourceName} 데이터 변환 시작:`, rows.length, "개 행");
-    // // console.log(`   📌 mapDisplayType:`, mapDisplayType, `(타입: ${typeof mapDisplayType})`);
-    // // console.log(`   🎨 마커 색상:`, dataSource?.markerColor, `폴리곤 색상:`, dataSource?.polygonColor);
-
     if (rows.length === 0) return { markers: [], polygons: [] };
 
     const markers: MarkerData[] = [];
     const polygons: PolygonData[] = [];
 
     rows.forEach((row, index) => {
-      // // console.log(`  행 ${index}:`, row);
-
       // 텍스트 데이터 체크 (기상청 API 등)
       if (row && typeof row === "object" && row.text && typeof row.text === "string") {
-        // // console.log("    📄 텍스트 형식 데이터 감지, CSV 파싱 시도");
         const parsedData = parseTextData(row.text);
-        // // console.log(`    ✅ CSV 파싱 결과: ${parsedData.length}개 행`);
 
         // 파싱된 데이터를 재귀적으로 변환 (색상 정보 전달)
         const result = convertToMapData(parsedData, sourceName, mapDisplayType, dataSource);
@@ -450,17 +420,15 @@ export default function MapTestWidgetV2({ element }: MapTestWidgetV2Props) {
 
       // 폴리곤 데이터 체크 (coordinates 필드가 배열인 경우 또는 강제 polygon 모드)
       if (row.coordinates && Array.isArray(row.coordinates) && row.coordinates.length > 0) {
-        // // console.log(`    → coordinates 발견:`, row.coordinates.length, "개");
         // coordinates가 [lat, lng] 배열의 배열인지 확인
         const firstCoord = row.coordinates[0];
         if (Array.isArray(firstCoord) && firstCoord.length === 2) {
-          // console.log(`    → 폴리곤으로 처리:`, row.name);
           polygons.push({
-            id: row.id || row.code || `polygon-${index}`,
+            id: `${sourceName}-polygon-${index}-${row.code || row.id || Date.now()}`, // 고유 ID 생성
             name: row.name || row.title || `영역 ${index + 1}`,
             coordinates: row.coordinates as [number, number][],
             status: row.status || row.level,
-            description: row.description || JSON.stringify(row, null, 2),
+            description: JSON.stringify(row, null, 2), // 항상 전체 row 객체를 JSON으로 저장
             source: sourceName,
             color: dataSource?.polygonColor || getColorByStatus(row.status || row.level),
           });
@@ -471,13 +439,12 @@ export default function MapTestWidgetV2({ element }: MapTestWidgetV2Props) {
       // 지역명으로 해상 구역 확인 (auto 또는 polygon 모드일 때만)
       const regionName = row.name || row.area || row.region || row.location || row.subRegion;
       if (regionName && MARITIME_ZONES[regionName] && mapDisplayType !== "marker") {
-        // // console.log(`    → 해상 구역 발견: ${regionName}, 폴리곤으로 처리`);
         polygons.push({
           id: `${sourceName}-polygon-${index}-${row.code || row.id || Date.now()}`, // 고유 ID 생성
           name: regionName,
           coordinates: MARITIME_ZONES[regionName] as [number, number][],
           status: row.status || row.level,
-          description: row.description || `${row.type || ""} ${row.level || ""}`.trim() || JSON.stringify(row, null, 2),
+          description: JSON.stringify(row, null, 2), // 항상 전체 row 객체를 JSON으로 저장
           source: sourceName,
           color: dataSource?.polygonColor || getColorByStatus(row.status || row.level),
         });
@@ -494,24 +461,20 @@ export default function MapTestWidgetV2({ element }: MapTestWidgetV2Props) {
         (row.code || row.areaCode || row.regionCode || row.tmFc || row.stnId)
       ) {
         const regionCode = row.code || row.areaCode || row.regionCode || row.tmFc || row.stnId;
-        // // console.log(`    → 지역 코드 발견: ${regionCode}, 위도/경도 변환 시도`);
         const coords = getCoordinatesByRegionCode(regionCode);
         if (coords) {
           lat = coords.lat;
           lng = coords.lng;
-          // console.log(`    → 변환 성공: (${lat}, ${lng})`);
         }
       }
 
       // 지역명으로도 시도
       if ((lat === undefined || lng === undefined) && (row.name || row.area || row.region || row.location)) {
         const regionName = row.name || row.area || row.region || row.location;
-        // // console.log(`    → 지역명 발견: ${regionName}, 위도/경도 변환 시도`);
         const coords = getCoordinatesByRegionName(regionName);
         if (coords) {
           lat = coords.lat;
           lng = coords.lng;
-          // console.log(`    → 변환 성공: (${lat}, ${lng})`);
         }
       }
 
@@ -519,34 +482,32 @@ export default function MapTestWidgetV2({ element }: MapTestWidgetV2Props) {
       if (mapDisplayType === "polygon") {
         const regionName = row.name || row.subRegion || row.region || row.area;
         if (regionName) {
-          // console.log(`    🔷 강제 폴리곤 모드: ${regionName} → 폴리곤으로 추가 (GeoJSON 매칭)`);
           polygons.push({
-            id: `${sourceName}-polygon-${index}-${row.code || row.id || Date.now()}`,
+            id: `${sourceName}-polygon-${index}-${row.code || row.id || Date.now()}`, // 고유 ID 생성
             name: regionName,
             coordinates: [], // GeoJSON에서 좌표를 가져올 것
             status: row.status || row.level,
-            description: row.description || JSON.stringify(row, null, 2),
+            description: JSON.stringify(row, null, 2), // 항상 전체 row 객체를 JSON으로 저장
             source: sourceName,
             color: dataSource?.polygonColor || getColorByStatus(row.status || row.level),
           });
-        } else {
-          // console.log(`    ⚠️ 강제 폴리곤 모드지만 지역명 없음 - 스킵`);
         }
         return; // 폴리곤으로 처리했으므로 마커로는 추가하지 않음
       }
 
       // 위도/경도가 있고 polygon 모드가 아니면 마커로 처리
       if (lat !== undefined && lng !== undefined && (mapDisplayType as string) !== "polygon") {
-        // // console.log(`    → 마커로 처리: (${lat}, ${lng})`);
         markers.push({
-          id: `${sourceName}-marker-${index}-${row.code || row.id || Date.now()}`, // 고유 ID 생성
+          // 진행 방향(heading) 계산을 위해 ID는 새로고침마다 바뀌지 않도록 고정값 사용
+          // 중복 방지를 위해 sourceName과 index를 조합하여 고유 ID 생성
+          id: `${sourceName}-${row.id || row.code || "marker"}-${index}`,
           lat: Number(lat),
           lng: Number(lng),
           latitude: Number(lat),
           longitude: Number(lng),
           name: row.name || row.title || row.area || row.region || `위치 ${index + 1}`,
           status: row.status || row.level,
-          description: row.description || JSON.stringify(row, null, 2),
+          description: JSON.stringify(row, null, 2), // 항상 전체 row 객체를 JSON으로 저장
           source: sourceName,
           color: dataSource?.markerColor || "#3b82f6", // 사용자 지정 색상 또는 기본 파랑
         });
@@ -554,24 +515,19 @@ export default function MapTestWidgetV2({ element }: MapTestWidgetV2Props) {
         // 위도/경도가 없는 육지 지역 → 폴리곤으로 추가 (GeoJSON 매칭용)
         const regionName = row.name || row.subRegion || row.region || row.area;
         if (regionName) {
-          // console.log(`    📍 위도/경도 없지만 지역명 있음: ${regionName} → 폴리곤으로 추가 (GeoJSON 매칭)`);
           polygons.push({
-            id: `${sourceName}-polygon-${index}-${row.code || row.id || Date.now()}`,
+            id: `${sourceName}-polygon-${index}-${row.code || row.id || Date.now()}`, // 고유 ID 생성
             name: regionName,
             coordinates: [], // GeoJSON에서 좌표를 가져올 것
             status: row.status || row.level,
-            description: row.description || JSON.stringify(row, null, 2),
+            description: JSON.stringify(row, null, 2), // 항상 전체 row 객체를 JSON으로 저장
             source: sourceName,
             color: dataSource?.polygonColor || getColorByStatus(row.status || row.level),
           });
-        } else {
-          // console.log(`    ⚠️ 위도/경도 없고 지역명도 없음 - 스킵`);
-          // console.log(`    데이터:`, row);
         }
       }
     });
 
-    // // console.log(`✅ ${sourceName}: 마커 ${markers.length}개, 폴리곤 ${polygons.length}개 변환 완료`);
     return { markers, polygons };
   };
 
@@ -627,6 +583,97 @@ export default function MapTestWidgetV2({ element }: MapTestWidgetV2Props) {
 
   // 해상 구역 폴리곤 좌표 (기상청 특보 구역 기준)
   const MARITIME_ZONES: Record<string, Array<[number, number]>> = {
+    // 서해 해역
+    "인천·경기북부앞바다": [
+      [37.8, 125.8],
+      [37.8, 126.5],
+      [37.3, 126.5],
+      [37.3, 125.8],
+    ],
+    "인천·경기남부앞바다": [
+      [37.3, 125.7],
+      [37.3, 126.4],
+      [36.8, 126.4],
+      [36.8, 125.7],
+    ],
+    충남북부앞바다: [
+      [36.8, 125.6],
+      [36.8, 126.3],
+      [36.3, 126.3],
+      [36.3, 125.6],
+    ],
+    충남남부앞바다: [
+      [36.3, 125.5],
+      [36.3, 126.2],
+      [35.8, 126.2],
+      [35.8, 125.5],
+    ],
+    전북북부앞바다: [
+      [35.8, 125.4],
+      [35.8, 126.1],
+      [35.3, 126.1],
+      [35.3, 125.4],
+    ],
+    전북남부앞바다: [
+      [35.3, 125.3],
+      [35.3, 126.0],
+      [34.8, 126.0],
+      [34.8, 125.3],
+    ],
+    전남북부서해앞바다: [
+      [35.5, 125.2],
+      [35.5, 125.9],
+      [35.0, 125.9],
+      [35.0, 125.2],
+    ],
+    전남중부서해앞바다: [
+      [35.0, 125.1],
+      [35.0, 125.8],
+      [34.5, 125.8],
+      [34.5, 125.1],
+    ],
+    전남남부서해앞바다: [
+      [34.5, 125.0],
+      [34.5, 125.7],
+      [34.0, 125.7],
+      [34.0, 125.0],
+    ],
+    서해중부안쪽먼바다: [
+      [37.5, 124.5],
+      [37.5, 126.0],
+      [36.0, 126.0],
+      [36.0, 124.5],
+    ],
+    서해중부바깥먼바다: [
+      [37.5, 123.5],
+      [37.5, 125.0],
+      [36.0, 125.0],
+      [36.0, 123.5],
+    ],
+    서해남부북쪽안쪽먼바다: [
+      [36.0, 124.5],
+      [36.0, 126.0],
+      [35.0, 126.0],
+      [35.0, 124.5],
+    ],
+    서해남부북쪽바깥먼바다: [
+      [36.0, 123.5],
+      [36.0, 125.0],
+      [35.0, 125.0],
+      [35.0, 123.5],
+    ],
+    서해남부남쪽안쪽먼바다: [
+      [35.0, 124.0],
+      [35.0, 125.5],
+      [34.0, 125.5],
+      [34.0, 124.0],
+    ],
+    서해남부남쪽바깥먼바다: [
+      [35.0, 123.0],
+      [35.0, 124.5],
+      [33.5, 124.5],
+      [33.5, 123.0],
+    ],
     // 제주도 해역
     제주도남부앞바다: [
       [33.25, 126.0],
@@ -862,7 +909,6 @@ export default function MapTestWidgetV2({ element }: MapTestWidgetV2Props) {
     const nameColumn = columns.find((col) => /^(name|title|이름|명칭|location)$/i.test(col));
 
     if (!latColumn || !lngColumn) {
-      console.warn("⚠️ 위도/경도 컬럼을 찾을 수 없습니다.");
       return [];
     }
 
@@ -896,10 +942,9 @@ export default function MapTestWidgetV2({ element }: MapTestWidgetV2Props) {
       try {
         const response = await fetch("/geojson/korea-municipalities.json");
         const data = await response.json();
-        // // console.log("🗺️ GeoJSON 로드 완료:", data.features?.length, "개 시/군/구");
         setGeoJsonData(data);
       } catch (err) {
-        console.error("❌ GeoJSON 로드 실패:", err);
+        // GeoJSON 로드 실패 처리
       }
     };
     loadGeoJsonData();
@@ -934,9 +979,8 @@ export default function MapTestWidgetV2({ element }: MapTestWidgetV2Props) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [dataSources, element?.chartConfig?.refreshInterval]);
 
-  // 타일맵 URL (chartConfig에서 가져오기)
-  const tileMapUrl =
-    element?.chartConfig?.tileMapUrl || `https://api.vworld.kr/req/wmts/1.0.0/${VWORLD_API_KEY}/Base/{z}/{y}/{x}.png`;
+  // 타일맵 URL (VWorld 한국 지도)
+  const tileMapUrl = `https://api.vworld.kr/req/wmts/1.0.0/${VWORLD_API_KEY}/Base/{z}/{y}/{x}.png`;
 
   // 지도 중심점 계산
   const center: [number, number] =
@@ -945,7 +989,7 @@ export default function MapTestWidgetV2({ element }: MapTestWidgetV2Props) {
           markers.reduce((sum, m) => sum + m.lat, 0) / markers.length,
           markers.reduce((sum, m) => sum + m.lng, 0) / markers.length,
         ]
-      : [37.5665, 126.978]; // 기본: 서울
+      : [36.5, 127.5]; // 한국 중심
 
   return (
     <div className="bg-background flex h-full w-full flex-col">
@@ -982,19 +1026,28 @@ export default function MapTestWidgetV2({ element }: MapTestWidgetV2Props) {
             <p className="text-destructive text-sm">{error}</p>
           </div>
         ) : (
-          <MapContainer center={center} zoom={13} style={{ width: "100%", height: "100%" }} className="z-0">
-            <TileLayer url={tileMapUrl} attribution="&copy; VWorld" maxZoom={19} />
+          <MapContainer
+            key={`map-widget-${element.id}`}
+            center={center}
+            zoom={element.chartConfig?.initialZoom ?? 8}
+            minZoom={element.chartConfig?.minZoom ?? 8}
+            maxZoom={element.chartConfig?.maxZoom ?? 18}
+            scrollWheelZoom
+            doubleClickZoom
+            touchZoom
+            zoomControl
+            style={{ width: "100%", height: "100%" }}
+            className="z-0"
+          >
+            <TileLayer
+              url={tileMapUrl}
+              attribution="&copy; VWorld"
+              minZoom={element.chartConfig?.minZoom ?? 8}
+              maxZoom={element.chartConfig?.maxZoom ?? 18}
+            />
 
             {/* 폴리곤 렌더링 */}
             {/* GeoJSON 렌더링 (육지 지역 경계선) */}
-            {(() => {
-              // console.log(`🗺️ GeoJSON 렌더링 조건 체크:`, {
-              //   geoJsonData: !!geoJsonData,
-              //   polygonsLength: polygons.length,
-              //   polygonNames: polygons.map(p => p.name),
-              // });
-              return null;
-            })()}
             {geoJsonData && polygons.length > 0 ? (
               <GeoJSON
                 key={JSON.stringify(polygons.map((p) => p.id))} // 폴리곤 변경 시 재렌더링
@@ -1009,31 +1062,25 @@ export default function MapTestWidgetV2({ element }: MapTestWidgetV2Props) {
 
                     // 정확한 매칭
                     if (p.name === sigName) {
-                      // console.log(`✅ 정확 매칭: ${p.name} === ${sigName}`);
                       return true;
                     }
                     if (p.name === ctpName) {
-                      // console.log(`✅ 정확 매칭: ${p.name} === ${ctpName}`);
                       return true;
                     }
 
                     // 부분 매칭 (GeoJSON 지역명에 폴리곤 이름이 포함되는지)
                     if (sigName && sigName.includes(p.name)) {
-                      // console.log(`✅ 부분 매칭: ${sigName} includes ${p.name}`);
                       return true;
                     }
                     if (ctpName && ctpName.includes(p.name)) {
-                      // console.log(`✅ 부분 매칭: ${ctpName} includes ${p.name}`);
                       return true;
                     }
 
                     // 역방향 매칭 (폴리곤 이름에 GeoJSON 지역명이 포함되는지)
                     if (sigName && p.name.includes(sigName)) {
-                      // console.log(`✅ 역방향 매칭: ${p.name} includes ${sigName}`);
                       return true;
                     }
                     if (ctpName && p.name.includes(ctpName)) {
-                      // console.log(`✅ 역방향 매칭: ${p.name} includes ${ctpName}`);
                       return true;
                     }
 
@@ -1069,64 +1116,162 @@ export default function MapTestWidgetV2({ element }: MapTestWidgetV2Props) {
                   });
 
                   if (matchingPolygon) {
-                    layer.bindPopup(`
-                      <div class="min-w-[200px]">
-                        <div class="mb-2 font-semibold">${matchingPolygon.name}</div>
-                        ${matchingPolygon.source ? `<div class="mb-1 text-xs text-muted-foreground">출처: ${matchingPolygon.source}</div>` : ""}
-                        ${matchingPolygon.status ? `<div class="mb-1 text-xs">상태: ${matchingPolygon.status}</div>` : ""}
-                        ${matchingPolygon.description ? `<div class="mt-2 max-h-[200px] overflow-auto text-xs"><pre class="whitespace-pre-wrap">${matchingPolygon.description}</pre></div>` : ""}
-                      </div>
-                    `);
+                    // 폴리곤의 데이터 소스 찾기
+                    const polygonDataSource = dataSources?.find((ds) => ds.name === matchingPolygon.source);
+                    const popupFields = polygonDataSource?.popupFields;
+
+                    let popupContent = "";
+
+                    // popupFields가 설정되어 있으면 설정된 필드만 표시
+                    if (popupFields && popupFields.length > 0 && matchingPolygon.description) {
+                      try {
+                        const parsed = JSON.parse(matchingPolygon.description);
+                        popupContent = `
+                          <div class="min-w-[200px]">
+                            ${matchingPolygon.source ? `<div class="mb-2 border-b pb-2"><div class="text-gray-500 text-xs">📡 ${matchingPolygon.source}</div></div>` : ""}
+                            <div class="bg-gray-100 rounded p-2">
+                              <div class="text-gray-900 mb-1 text-xs font-semibold">상세 정보</div>
+                              <div class="space-y-2">
+                                ${popupFields
+                                  .map((field) => {
+                                    const value = parsed[field.fieldName];
+                                    if (value === undefined || value === null) return "";
+                                    return `<div class="text-xs"><span class="text-gray-600 font-medium">${field.label}:</span> <span class="text-gray-900">${value}</span></div>`;
+                                  })
+                                  .join("")}
+                              </div>
+                            </div>
+                          </div>
+                        `;
+                      } catch (error) {
+                        // JSON 파싱 실패 시 기본 표시
+                        popupContent = `
+                          <div class="min-w-[200px]">
+                            <div class="mb-2 font-semibold">${matchingPolygon.name}</div>
+                            ${matchingPolygon.source ? `<div class="mb-1 text-xs text-muted-foreground">출처: ${matchingPolygon.source}</div>` : ""}
+                            ${matchingPolygon.status ? `<div class="mb-1 text-xs">상태: ${matchingPolygon.status}</div>` : ""}
+                            ${matchingPolygon.description ? `<div class="mt-2 max-h-[200px] overflow-auto text-xs"><pre class="whitespace-pre-wrap">${matchingPolygon.description}</pre></div>` : ""}
+                          </div>
+                        `;
+                      }
+                    } else {
+                      // popupFields가 없으면 전체 데이터 표시
+                      popupContent = `
+                        <div class="min-w-[200px]">
+                          <div class="mb-2 font-semibold">${matchingPolygon.name}</div>
+                          ${matchingPolygon.source ? `<div class="mb-1 text-xs text-muted-foreground">출처: ${matchingPolygon.source}</div>` : ""}
+                          ${matchingPolygon.status ? `<div class="mb-1 text-xs">상태: ${matchingPolygon.status}</div>` : ""}
+                          ${matchingPolygon.description ? `<div class="mt-2 max-h-[200px] overflow-auto text-xs"><pre class="whitespace-pre-wrap">${matchingPolygon.description}</pre></div>` : ""}
+                        </div>
+                      `;
+                    }
+
+                    layer.bindPopup(popupContent);
                   }
                 }}
               />
-            ) : (
-              <>
-                {/* console.log(`⚠️ GeoJSON 렌더링 안 됨: geoJsonData=${!!geoJsonData}, polygons=${polygons.length}`) */}
-              </>
-            )}
+            ) : null}
 
             {/* 폴리곤 렌더링 (해상 구역만) */}
             {polygons
               .filter((p) => MARITIME_ZONES[p.name])
-              .map((polygon) => (
-                <Polygon
-                  key={polygon.id}
-                  positions={polygon.coordinates}
-                  pathOptions={{
-                    color: polygon.color || "#3b82f6",
-                    fillColor: polygon.color || "#3b82f6",
-                    fillOpacity: 0.3,
-                    weight: 2,
-                  }}
-                >
-                  <Popup>
-                    <div className="min-w-[200px]">
-                      <div className="mb-2 font-semibold">{polygon.name}</div>
-                      {polygon.source && (
-                        <div className="text-muted-foreground mb-1 text-xs">출처: {polygon.source}</div>
-                      )}
-                      {polygon.status && <div className="mb-1 text-xs">상태: {polygon.status}</div>}
-                      {polygon.description && (
-                        <div className="mt-2 max-h-[200px] overflow-auto text-xs">
-                          <pre className="whitespace-pre-wrap">{polygon.description}</pre>
-                        </div>
-                      )}
-                    </div>
-                  </Popup>
-                </Polygon>
-              ))}
+              .map((polygon) => {
+                // 폴리곤의 데이터 소스 찾기
+                const polygonDataSource = dataSources?.find((ds) => ds.name === polygon.source);
+                const popupFields = polygonDataSource?.popupFields;
+
+                return (
+                  <Polygon
+                    key={polygon.id}
+                    positions={polygon.coordinates}
+                    pathOptions={{
+                      color: polygon.color || "#3b82f6",
+                      fillColor: polygon.color || "#3b82f6",
+                      fillOpacity: 0.3,
+                      weight: 2,
+                    }}
+                  >
+                    <Popup>
+                      <div className="min-w-[200px]">
+                        {/* popupFields가 설정되어 있으면 설정된 필드만 표시 */}
+                        {popupFields && popupFields.length > 0 && polygon.description ? (
+                          (() => {
+                            try {
+                              const parsed = JSON.parse(polygon.description);
+                              return (
+                                <>
+                                  {polygon.source && (
+                                    <div className="mb-2 border-b pb-2">
+                                      <div className="text-muted-foreground text-xs">📡 {polygon.source}</div>
+                                    </div>
+                                  )}
+                                  <div className="bg-muted rounded p-2">
+                                    <div className="text-foreground mb-1 text-xs font-semibold">상세 정보</div>
+                                    <div className="space-y-2">
+                                      {popupFields.map((field, idx) => {
+                                        const value = parsed[field.fieldName];
+                                        if (value === undefined || value === null) return null;
+                                        return (
+                                          <div key={idx} className="text-xs">
+                                            <span className="text-muted-foreground font-medium">{field.label}:</span>{" "}
+                                            <span className="text-foreground">{String(value)}</span>
+                                          </div>
+                                        );
+                                      })}
+                                    </div>
+                                  </div>
+                                </>
+                              );
+                            } catch (error) {
+                              // JSON 파싱 실패 시 기본 표시
+                              return (
+                                <>
+                                  <div className="mb-2 font-semibold">{polygon.name}</div>
+                                  {polygon.source && (
+                                    <div className="text-muted-foreground mb-1 text-xs">출처: {polygon.source}</div>
+                                  )}
+                                  {polygon.status && <div className="mb-1 text-xs">상태: {polygon.status}</div>}
+                                  {polygon.description && (
+                                    <div className="mt-2 max-h-[200px] overflow-auto text-xs">
+                                      <pre className="whitespace-pre-wrap">{polygon.description}</pre>
+                                    </div>
+                                  )}
+                                </>
+                              );
+                            }
+                          })()
+                        ) : (
+                          // popupFields가 없으면 전체 데이터 표시
+                          <>
+                            <div className="mb-2 font-semibold">{polygon.name}</div>
+                            {polygon.source && (
+                              <div className="text-muted-foreground mb-1 text-xs">출처: {polygon.source}</div>
+                            )}
+                            {polygon.status && <div className="mb-1 text-xs">상태: {polygon.status}</div>}
+                            {polygon.description && (
+                              <div className="mt-2 max-h-[200px] overflow-auto text-xs">
+                                <pre className="whitespace-pre-wrap">{polygon.description}</pre>
+                              </div>
+                            )}
+                          </>
+                        )}
+                      </div>
+                    </Popup>
+                  </Polygon>
+                );
+              })}
 
             {/* 마커 렌더링 */}
             {markers.map((marker) => {
-              // 첫 번째 데이터 소스의 마커 종류 가져오기
-              const firstDataSource = dataSources?.[0];
-              const markerType = firstDataSource?.markerType || "circle";
+              // 마커의 소스에 해당하는 데이터 소스 찾기
+              const sourceDataSource = dataSources?.find((ds) => ds.name === marker.source) || dataSources?.[0];
+              const markerType = sourceDataSource?.markerType || "circle";
 
               let markerIcon: any;
               if (typeof window !== "undefined") {
                 const L = require("leaflet");
-                const heading = marker.heading || 0;
+                // heading이 없거나 0일 때 기본값 90(동쪽/오른쪽)으로 설정하여 처음에 오른쪽을 보게 함
+                const heading = marker.heading || 90;
 
                 if (markerType === "arrow") {
                   // 화살표 마커
@@ -1143,28 +1288,12 @@ export default function MapTestWidgetV2({ element }: MapTestWidgetV2Props) {
                         filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
                       ">
                         <svg width="40" height="40" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
-                          <!-- 화살표 몸통 -->
+                          <!-- 이등변 삼각형 화살표 (뾰족한 방향 표시) -->
                           <polygon 
-                            points="20,5 25,15 23,15 23,25 17,25 17,15 15,15" 
+                            points="20,5 28,30 12,30" 
                             fill="${marker.color || "#3b82f6"}" 
                             stroke="white" 
-                            stroke-width="1.5"
-                          />
-                          <!-- 화살촉 -->
-                          <polygon 
-                            points="20,2 28,12 12,12" 
-                            fill="${marker.color || "#3b82f6"}" 
-                            stroke="white" 
-                            stroke-width="1.5"
-                          />
-                          <!-- 중심점 -->
-                          <circle 
-                            cx="20" 
-                            cy="30" 
-                            r="3" 
-                            fill="white" 
-                            stroke="${marker.color || "#3b82f6"}" 
-                            stroke-width="1.5"
+                            stroke-width="2"
                           />
                         </svg>
                       </div>
@@ -1172,6 +1301,77 @@ export default function MapTestWidgetV2({ element }: MapTestWidgetV2Props) {
                     iconSize: [40, 40],
                     iconAnchor: [20, 20],
                   });
+                } else if (markerType === "truck") {
+                  // 트럭 마커
+                  // 트럭 아이콘이 오른쪽(90도)을 보고 있으므로, 북쪽(0도)으로 가려면 -90도 회전 필요
+                  const rotation = heading - 90;
+
+                  markerIcon = L.divIcon({
+                    className: "custom-truck-marker",
+                    html: `
+                      <div style="
+                        width: 48px;
+                        height: 48px;
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                        transform: translate(-50%, -50%) rotate(${rotation}deg);
+                        filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
+                      ">
+                        <svg width="48" height="48" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
+                          <g>
+                            <!-- 트럭 적재함 -->
+                            <rect 
+                              x="10" 
+                              y="12" 
+                              width="12" 
+                              height="10" 
+                              fill="${marker.color || "#3b82f6"}" 
+                              stroke="white" 
+                              stroke-width="1.5"
+                              rx="1"
+                            />
+                            <!-- 트럭 운전석 -->
+                            <path 
+                              d="M 22 14 L 22 22 L 28 22 L 28 18 L 26 14 Z" 
+                              fill="${marker.color || "#3b82f6"}" 
+                              stroke="white" 
+                              stroke-width="1.5"
+                            />
+                            <!-- 운전석 창문 -->
+                            <rect 
+                              x="23" 
+                              y="15" 
+                              width="3" 
+                              height="4" 
+                              fill="white"
+                              opacity="0.8"
+                            />
+                            <!-- 앞 바퀴 -->
+                            <circle 
+                              cx="25" 
+                              cy="23" 
+                              r="2.5" 
+                              fill="#333" 
+                              stroke="white" 
+                              stroke-width="1"
+                            />
+                            <!-- 뒷 바퀴 -->
+                            <circle 
+                              cx="14" 
+                              cy="23" 
+                              r="2.5" 
+                              fill="#333" 
+                              stroke="white" 
+                              stroke-width="1"
+                            />
+                          </g>
+                        </svg>
+                      </div>
+                    `,
+                    iconSize: [48, 48],
+                    iconAnchor: [24, 24],
+                  });
                 } else {
                   // 동그라미 마커 (기본)
                   markerIcon = L.divIcon({
@@ -1227,8 +1427,9 @@ export default function MapTestWidgetV2({ element }: MapTestWidgetV2Props) {
                       <div className="space-y-2">
                         {marker.description &&
                           (() => {
-                            const firstDataSource = dataSources?.[0];
-                            const popupFields = firstDataSource?.popupFields;
+                            // 마커의 소스에 해당하는 데이터 소스 찾기
+                            const sourceDataSource = dataSources?.find((ds) => ds.name === marker.source);
+                            const popupFields = sourceDataSource?.popupFields;
 
                             // popupFields가 설정되어 있으면 설정된 필드만 표시
                             if (popupFields && popupFields.length > 0) {
diff --git a/frontend/components/dashboard/widgets/RiskAlertTestWidget.tsx b/frontend/components/dashboard/widgets/RiskAlertTestWidget.tsx
index 8aa2e3e2..30ee99a5 100644
--- a/frontend/components/dashboard/widgets/RiskAlertTestWidget.tsx
+++ b/frontend/components/dashboard/widgets/RiskAlertTestWidget.tsx
@@ -377,8 +377,8 @@ export default function RiskAlertTestWidget({ element }: RiskAlertTestWidgetProp
         new Date().toISOString();
 
       const alert: Alert = {
-        id: row.id || row.alert_id || row.incidentId || row.eventId || 
-          row.code || row.subCode || `${sourceName}-${index}-${Date.now()}`,
+        // 중복 방지를 위해 소스명과 인덱스를 포함하여 고유 ID 생성
+        id: `${sourceName}-${index}-${row.id || row.alert_id || row.incidentId || row.eventId || row.code || row.subCode || Date.now()}`,
         type,
         severity,
         title,
@@ -614,8 +614,9 @@ export default function RiskAlertTestWidget({ element }: RiskAlertTestWidgetProp
             <p className="text-sm">알림이 없습니다</p>
           </div>
         ) : (
-          filteredAlerts.map((alert) => (
-            <Card key={alert.id} className="p-2">
+          filteredAlerts.map((alert, idx) => (
+            // key 중복 방지를 위해 인덱스 추가
+            <Card key={`${alert.id}-${idx}`} className="p-2">
               <div className="flex items-start gap-2">
                 <div className={`mt-0.5 rounded-full p-1 ${alert.severity === "high" ? "bg-destructive/10 text-destructive" : alert.severity === "medium" ? "bg-warning/10 text-warning" : "bg-primary/10 text-primary"}`}>
                   {getTypeIcon(alert.type)}
@@ -636,9 +637,10 @@ export default function RiskAlertTestWidget({ element }: RiskAlertTestWidgetProp
                   <div className="mt-1 flex items-center gap-2 text-[9px] text-muted-foreground">
                     <span>
                       {(() => {
-                        const ts = String(alert.timestamp);
+                        const original = String(alert.timestamp);
+                        const ts = original.replace(/\s+/g, ""); // 공백 제거
                         
-                        // yyyyMMddHHmm 형식 감지 (예: 20251114 1000)
+                        // yyyyMMddHHmm 형식 감지 (12자리 숫자)
                         if (/^\d{12}$/.test(ts)) {
                           const year = ts.substring(0, 4);
                           const month = ts.substring(4, 6);
@@ -646,12 +648,20 @@ export default function RiskAlertTestWidget({ element }: RiskAlertTestWidgetProp
                           const hour = ts.substring(8, 10);
                           const minute = ts.substring(10, 12);
                           const date = new Date(`${year}-${month}-${day}T${hour}:${minute}:00`);
-                          return isNaN(date.getTime()) ? ts : date.toLocaleString("ko-KR");
+                          return isNaN(date.getTime()) ? original : date.toLocaleString("ko-KR");
+                        }
+                        
+                        // "2025년 11월 14일 13시 20분" 형식
+                        const koreanMatch = original.match(/(\d{4})년\s*(\d{1,2})월\s*(\d{1,2})일\s*(\d{1,2})시\s*(\d{1,2})분/);
+                        if (koreanMatch) {
+                          const [, year, month, day, hour, minute] = koreanMatch;
+                          const date = new Date(`${year}-${month.padStart(2, '0')}-${day.padStart(2, '0')}T${hour.padStart(2, '0')}:${minute.padStart(2, '0')}:00`);
+                          return isNaN(date.getTime()) ? original : date.toLocaleString("ko-KR");
                         }
                         
                         // ISO 형식 또는 일반 날짜 형식
-                        const date = new Date(ts);
-                        return isNaN(date.getTime()) ? ts : date.toLocaleString("ko-KR");
+                        const date = new Date(original);
+                        return isNaN(date.getTime()) ? original : date.toLocaleString("ko-KR");
                       })()}
                     </span>
                     {alert.source && <span>· {alert.source}</span>}
diff --git a/frontend/components/order/OrderCustomerSearch.tsx b/frontend/components/order/OrderCustomerSearch.tsx
new file mode 100644
index 00000000..bcd351f9
--- /dev/null
+++ b/frontend/components/order/OrderCustomerSearch.tsx
@@ -0,0 +1,49 @@
+"use client";
+
+import React from "react";
+import { AutocompleteSearchInputComponent } from "@/lib/registry/components/autocomplete-search-input";
+
+/**
+ * 수주 등록 전용 거래처 검색 컴포넌트
+ * 
+ * 이 컴포넌트는 수주 등록 화면 전용이며, 설정이 고정되어 있습니다.
+ * 범용 AutocompleteSearchInput과 달리 customer_mng 테이블만 조회합니다.
+ */
+
+interface OrderCustomerSearchProps {
+  /** 현재 선택된 거래처 코드 */
+  value: string;
+  /** 거래처 선택 시 콜백 (거래처 코드, 전체 데이터) */
+  onChange: (customerCode: string | null, fullData?: any) => void;
+  /** 비활성화 여부 */
+  disabled?: boolean;
+}
+
+export function OrderCustomerSearch({
+  value,
+  onChange,
+  disabled = false,
+}: OrderCustomerSearchProps) {
+  return (
+    <AutocompleteSearchInputComponent
+      // 고정 설정 (수주 등록 전용)
+      tableName="customer_mng"
+      displayField="customer_name"
+      valueField="customer_code"
+      searchFields={[
+        "customer_name",
+        "customer_code",
+        "business_number",
+      ]}
+      placeholder="거래처명 입력하여 검색"
+      showAdditionalInfo
+      additionalFields={["customer_code", "address", "contact_phone"]}
+      
+      // 외부에서 제어 가능한 prop
+      value={value}
+      onChange={onChange}
+      disabled={disabled}
+    />
+  );
+}
+
diff --git a/frontend/components/order/OrderItemRepeaterTable.tsx b/frontend/components/order/OrderItemRepeaterTable.tsx
new file mode 100644
index 00000000..dd38ee5a
--- /dev/null
+++ b/frontend/components/order/OrderItemRepeaterTable.tsx
@@ -0,0 +1,128 @@
+"use client";
+
+import React from "react";
+import { ModalRepeaterTableComponent } from "@/lib/registry/components/modal-repeater-table";
+import type {
+  RepeaterColumnConfig,
+  CalculationRule,
+} from "@/lib/registry/components/modal-repeater-table";
+
+/**
+ * 수주 등록 전용 품목 반복 테이블 컴포넌트
+ * 
+ * 이 컴포넌트는 수주 등록 화면 전용이며, 설정이 고정되어 있습니다.
+ * 범용 ModalRepeaterTable과 달리 item_info 테이블만 조회하며,
+ * 수주 등록에 필요한 컬럼과 계산 공식이 미리 설정되어 있습니다.
+ */
+
+interface OrderItemRepeaterTableProps {
+  /** 현재 선택된 품목 목록 */
+  value: any[];
+  /** 품목 목록 변경 시 콜백 */
+  onChange: (items: any[]) => void;
+  /** 비활성화 여부 */
+  disabled?: boolean;
+}
+
+// 수주 등록 전용 컬럼 설정 (고정)
+const ORDER_COLUMNS: RepeaterColumnConfig[] = [
+  {
+    field: "item_number",
+    label: "품번",
+    editable: false,
+    width: "120px",
+  },
+  {
+    field: "item_name",
+    label: "품명",
+    editable: false,
+    width: "180px",
+  },
+  {
+    field: "specification",
+    label: "규격",
+    editable: false,
+    width: "150px",
+  },
+  {
+    field: "material",
+    label: "재질",
+    editable: false,
+    width: "120px",
+  },
+  {
+    field: "quantity",
+    label: "수량",
+    type: "number",
+    editable: true,
+    required: true,
+    defaultValue: 1,
+    width: "100px",
+  },
+  {
+    field: "selling_price",
+    label: "단가",
+    type: "number",
+    editable: true,
+    required: true,
+    width: "120px",
+  },
+  {
+    field: "amount",
+    label: "금액",
+    type: "number",
+    editable: false,
+    calculated: true,
+    width: "120px",
+  },
+  {
+    field: "delivery_date",
+    label: "납기일",
+    type: "date",
+    editable: true,
+    width: "130px",
+  },
+];
+
+// 수주 등록 전용 계산 공식 (고정)
+const ORDER_CALCULATION_RULES: CalculationRule[] = [
+  {
+    result: "amount",
+    formula: "quantity * selling_price",
+    dependencies: ["quantity", "selling_price"],
+  },
+];
+
+export function OrderItemRepeaterTable({
+  value,
+  onChange,
+  disabled = false,
+}: OrderItemRepeaterTableProps) {
+  return (
+    <ModalRepeaterTableComponent
+      // 고정 설정 (수주 등록 전용)
+      sourceTable="item_info"
+      sourceColumns={[
+        "item_number",
+        "item_name",
+        "specification",
+        "material",
+        "unit",
+        "selling_price",
+      ]}
+      sourceSearchFields={["item_name", "item_number", "specification"]}
+      modalTitle="품목 검색 및 선택"
+      modalButtonText="품목 검색"
+      multiSelect={true}
+      columns={ORDER_COLUMNS}
+      calculationRules={ORDER_CALCULATION_RULES}
+      uniqueField="item_number"
+      
+      // 외부에서 제어 가능한 prop
+      value={value}
+      onChange={onChange}
+      disabled={disabled}
+    />
+  );
+}
+
diff --git a/frontend/components/order/OrderRegistrationModal.tsx b/frontend/components/order/OrderRegistrationModal.tsx
new file mode 100644
index 00000000..bd780038
--- /dev/null
+++ b/frontend/components/order/OrderRegistrationModal.tsx
@@ -0,0 +1,530 @@
+"use client";
+
+import React, { useState } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { OrderCustomerSearch } from "./OrderCustomerSearch";
+import { OrderItemRepeaterTable } from "./OrderItemRepeaterTable";
+import { toast } from "sonner";
+import { apiClient } from "@/lib/api/client";
+
+interface OrderRegistrationModalProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onSuccess?: () => void;
+}
+
+export function OrderRegistrationModal({
+  open,
+  onOpenChange,
+  onSuccess,
+}: OrderRegistrationModalProps) {
+  // 입력 방식
+  const [inputMode, setInputMode] = useState<string>("customer_first");
+
+  // 판매 유형 (국내/해외)
+  const [salesType, setSalesType] = useState<string>("domestic");
+
+  // 단가 기준 (기준단가/거래처별단가)
+  const [priceType, setPriceType] = useState<string>("standard");
+
+  // 폼 데이터
+  const [formData, setFormData] = useState<any>({
+    customerCode: "",
+    customerName: "",
+    contactPerson: "",
+    deliveryDestination: "",
+    deliveryAddress: "",
+    deliveryDate: "",
+    memo: "",
+    // 무역 정보 (해외 판매 시)
+    incoterms: "",
+    paymentTerms: "",
+    currency: "KRW",
+    portOfLoading: "",
+    portOfDischarge: "",
+    hsCode: "",
+  });
+
+  // 선택된 품목 목록
+  const [selectedItems, setSelectedItems] = useState<any[]>([]);
+
+  // 저장 중
+  const [isSaving, setIsSaving] = useState(false);
+
+  // 저장 처리
+  const handleSave = async () => {
+    try {
+      // 유효성 검사
+      if (!formData.customerCode) {
+        toast.error("거래처를 선택해주세요");
+        return;
+      }
+
+      if (selectedItems.length === 0) {
+        toast.error("품목을 추가해주세요");
+        return;
+      }
+
+      setIsSaving(true);
+
+      // 수주 등록 API 호출
+      const orderData: any = {
+        inputMode,
+        salesType,
+        priceType,
+        customerCode: formData.customerCode,
+        contactPerson: formData.contactPerson,
+        deliveryDestination: formData.deliveryDestination,
+        deliveryAddress: formData.deliveryAddress,
+        deliveryDate: formData.deliveryDate,
+        items: selectedItems,
+        memo: formData.memo,
+      };
+
+      // 해외 판매 시 무역 정보 추가
+      if (salesType === "export") {
+        orderData.tradeInfo = {
+          incoterms: formData.incoterms,
+          paymentTerms: formData.paymentTerms,
+          currency: formData.currency,
+          portOfLoading: formData.portOfLoading,
+          portOfDischarge: formData.portOfDischarge,
+          hsCode: formData.hsCode,
+        };
+      }
+
+      const response = await apiClient.post("/orders", orderData);
+
+      if (response.data.success) {
+        toast.success("수주가 등록되었습니다");
+        onOpenChange(false);
+        onSuccess?.();
+
+        // 폼 초기화
+        resetForm();
+      } else {
+        toast.error(response.data.message || "수주 등록에 실패했습니다");
+      }
+    } catch (error: any) {
+      console.error("수주 등록 오류:", error);
+      toast.error(
+        error.response?.data?.message || "수주 등록 중 오류가 발생했습니다"
+      );
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  // 취소 처리
+  const handleCancel = () => {
+    onOpenChange(false);
+    resetForm();
+  };
+
+  // 폼 초기화
+  const resetForm = () => {
+    setInputMode("customer_first");
+    setSalesType("domestic");
+    setPriceType("standard");
+    setFormData({
+      customerCode: "",
+      customerName: "",
+      contactPerson: "",
+      deliveryDestination: "",
+      deliveryAddress: "",
+      deliveryDate: "",
+      memo: "",
+      incoterms: "",
+      paymentTerms: "",
+      currency: "KRW",
+      portOfLoading: "",
+      portOfDischarge: "",
+      hsCode: "",
+    });
+    setSelectedItems([]);
+  };
+
+  // 전체 금액 계산
+  const totalAmount = selectedItems.reduce(
+    (sum, item) => sum + (item.amount || 0),
+    0
+  );
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-[95vw] sm:max-w-[1200px] max-h-[90vh] overflow-y-auto">
+        <DialogHeader>
+          <DialogTitle className="text-base sm:text-lg">수주 등록</DialogTitle>
+          <DialogDescription className="text-xs sm:text-sm">
+            새로운 수주를 등록합니다
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-6">
+          {/* 상단 셀렉트 박스 3개 */}
+          <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
+            {/* 입력 방식 */}
+            <div className="space-y-2">
+              <Label htmlFor="inputMode" className="text-xs sm:text-sm flex items-center gap-1">
+                <span className="text-amber-500">📝</span> 입력 방식
+              </Label>
+              <Select value={inputMode} onValueChange={setInputMode}>
+                <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm">
+                  <SelectValue placeholder="입력 방식 선택" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="customer_first">거래처 우선</SelectItem>
+                  <SelectItem value="quotation">견대 방식</SelectItem>
+                  <SelectItem value="unit_price">단가 방식</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+
+            {/* 판매 유형 */}
+            <div className="space-y-2">
+              <Label htmlFor="salesType" className="text-xs sm:text-sm flex items-center gap-1">
+                <span className="text-blue-500">🌏</span> 판매 유형
+              </Label>
+              <Select value={salesType} onValueChange={setSalesType}>
+                <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm">
+                  <SelectValue placeholder="판매 유형 선택" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="domestic">국내 판매</SelectItem>
+                  <SelectItem value="export">해외 판매</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+
+            {/* 단가 기준 */}
+            <div className="space-y-2">
+              <Label htmlFor="priceType" className="text-xs sm:text-sm flex items-center gap-1">
+                <span className="text-green-500">💰</span> 단가 방식
+              </Label>
+              <Select value={priceType} onValueChange={setPriceType}>
+                <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm">
+                  <SelectValue placeholder="단가 방식 선택" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="standard">기준 단가</SelectItem>
+                  <SelectItem value="customer">거래처별 단가</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+
+          {/* 거래처 정보 (항상 표시) */}
+          {inputMode === "customer_first" && (
+            <div className="rounded-lg border border-gray-200 bg-gray-50/50 p-4 space-y-4">
+              <div className="flex items-center gap-2 text-sm font-semibold text-gray-700">
+                <span>🏢</span>
+                <span>거래처 정보</span>
+              </div>
+
+              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+                {/* 거래처 */}
+                <div className="space-y-2">
+                  <Label className="text-xs sm:text-sm">거래처 *</Label>
+                  <OrderCustomerSearch
+                    value={formData.customerCode}
+                    onChange={(code, fullData) => {
+                      setFormData({
+                        ...formData,
+                        customerCode: code || "",
+                        customerName: fullData?.customer_name || "",
+                      });
+                    }}
+                  />
+                </div>
+
+                {/* 담당자 */}
+                <div className="space-y-2">
+                  <Label htmlFor="contactPerson" className="text-xs sm:text-sm">
+                    담당자
+                  </Label>
+                  <input
+                    type="text"
+                    id="contactPerson"
+                    placeholder="담당자"
+                    value={formData.contactPerson}
+                    onChange={(e) =>
+                      setFormData({ ...formData, contactPerson: e.target.value })
+                    }
+                    className="flex h-8 w-full rounded-md border border-input bg-background px-3 py-2 text-xs ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 sm:h-10 sm:text-sm"
+                  />
+                </div>
+
+                {/* 납품처 */}
+                <div className="space-y-2">
+                  <Label htmlFor="deliveryDestination" className="text-xs sm:text-sm">
+                    납품처
+                  </Label>
+                  <input
+                    type="text"
+                    id="deliveryDestination"
+                    placeholder="납품처"
+                    value={formData.deliveryDestination}
+                    onChange={(e) =>
+                      setFormData({ ...formData, deliveryDestination: e.target.value })
+                    }
+                    className="flex h-8 w-full rounded-md border border-input bg-background px-3 py-2 text-xs ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 sm:h-10 sm:text-sm"
+                  />
+                </div>
+
+                {/* 납품장소 */}
+                <div className="space-y-2">
+                  <Label htmlFor="deliveryAddress" className="text-xs sm:text-sm">
+                    납품장소
+                  </Label>
+                  <input
+                    type="text"
+                    id="deliveryAddress"
+                    placeholder="납품장소"
+                    value={formData.deliveryAddress}
+                    onChange={(e) =>
+                      setFormData({ ...formData, deliveryAddress: e.target.value })
+                    }
+                    className="flex h-8 w-full rounded-md border border-input bg-background px-3 py-2 text-xs ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 sm:h-10 sm:text-sm"
+                  />
+                </div>
+              </div>
+            </div>
+          )}
+
+          {inputMode === "quotation" && (
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+              <div className="space-y-2">
+                <Label className="text-xs sm:text-sm">견대 번호 *</Label>
+                <input
+                  type="text"
+                  placeholder="견대 번호를 입력하세요"
+                  className="flex h-8 w-full rounded-md border border-input bg-background px-3 py-2 text-xs ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 sm:h-10 sm:text-sm"
+                />
+              </div>
+            </div>
+          )}
+
+          {inputMode === "unit_price" && (
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+              <div className="space-y-2">
+                <Label className="text-xs sm:text-sm">단가 방식 설정</Label>
+                <input
+                  type="text"
+                  placeholder="단가 정보 입력"
+                  className="flex h-8 w-full rounded-md border border-input bg-background px-3 py-2 text-xs ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 sm:h-10 sm:text-sm"
+                />
+              </div>
+            </div>
+          )}
+
+          {/* 추가된 품목 */}
+          <div className="space-y-2">
+            <Label className="text-xs sm:text-sm">추가된 품목</Label>
+            <OrderItemRepeaterTable
+              value={selectedItems}
+              onChange={setSelectedItems}
+            />
+          </div>
+
+          {/* 전체 금액 표시 */}
+          {selectedItems.length > 0 && (
+            <div className="flex justify-end">
+              <div className="text-sm sm:text-base font-semibold">
+                전체 금액: {totalAmount.toLocaleString()}원
+              </div>
+            </div>
+          )}
+
+          {/* 무역 정보 (해외 판매 시에만 표시) */}
+          {salesType === "export" && (
+            <div className="rounded-lg border border-blue-200 bg-blue-50/50 p-4 space-y-4">
+              <div className="flex items-center gap-2 text-sm font-semibold text-blue-700">
+                <span>🌏</span>
+                <span>무역 정보</span>
+              </div>
+              
+              <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
+                {/* 인코텀즈 */}
+                <div className="space-y-2">
+                  <Label htmlFor="incoterms" className="text-xs sm:text-sm">
+                    인코텀즈
+                  </Label>
+                  <Select
+                    value={formData.incoterms}
+                    onValueChange={(value) =>
+                      setFormData({ ...formData, incoterms: value })
+                    }
+                  >
+                    <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm">
+                      <SelectValue placeholder="선택" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="EXW">EXW</SelectItem>
+                      <SelectItem value="FOB">FOB</SelectItem>
+                      <SelectItem value="CIF">CIF</SelectItem>
+                      <SelectItem value="DDP">DDP</SelectItem>
+                      <SelectItem value="DAP">DAP</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+
+                {/* 결제 조건 */}
+                <div className="space-y-2">
+                  <Label htmlFor="paymentTerms" className="text-xs sm:text-sm">
+                    결제 조건
+                  </Label>
+                  <Select
+                    value={formData.paymentTerms}
+                    onValueChange={(value) =>
+                      setFormData({ ...formData, paymentTerms: value })
+                    }
+                  >
+                    <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm">
+                      <SelectValue placeholder="선택" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="advance">선결제</SelectItem>
+                      <SelectItem value="cod">착불</SelectItem>
+                      <SelectItem value="lc">신용장(L/C)</SelectItem>
+                      <SelectItem value="net30">NET 30</SelectItem>
+                      <SelectItem value="net60">NET 60</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+
+                {/* 통화 */}
+                <div className="space-y-2">
+                  <Label htmlFor="currency" className="text-xs sm:text-sm">
+                    통화
+                  </Label>
+                  <Select
+                    value={formData.currency}
+                    onValueChange={(value) =>
+                      setFormData({ ...formData, currency: value })
+                    }
+                  >
+                    <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm">
+                      <SelectValue placeholder="통화 선택" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="KRW">KRW (원)</SelectItem>
+                      <SelectItem value="USD">USD (달러)</SelectItem>
+                      <SelectItem value="EUR">EUR (유로)</SelectItem>
+                      <SelectItem value="JPY">JPY (엔)</SelectItem>
+                      <SelectItem value="CNY">CNY (위안)</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+              </div>
+
+              <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
+                {/* 선적항 */}
+                <div className="space-y-2">
+                  <Label htmlFor="portOfLoading" className="text-xs sm:text-sm">
+                    선적항
+                  </Label>
+                  <input
+                    type="text"
+                    id="portOfLoading"
+                    placeholder="선적항"
+                    value={formData.portOfLoading}
+                    onChange={(e) =>
+                      setFormData({ ...formData, portOfLoading: e.target.value })
+                    }
+                    className="flex h-8 w-full rounded-md border border-input bg-background px-3 py-2 text-xs ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 sm:h-10 sm:text-sm"
+                  />
+                </div>
+
+                {/* 도착항 */}
+                <div className="space-y-2">
+                  <Label htmlFor="portOfDischarge" className="text-xs sm:text-sm">
+                    도착항
+                  </Label>
+                  <input
+                    type="text"
+                    id="portOfDischarge"
+                    placeholder="도착항"
+                    value={formData.portOfDischarge}
+                    onChange={(e) =>
+                      setFormData({ ...formData, portOfDischarge: e.target.value })
+                    }
+                    className="flex h-8 w-full rounded-md border border-input bg-background px-3 py-2 text-xs ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 sm:h-10 sm:text-sm"
+                  />
+                </div>
+
+                {/* HS Code */}
+                <div className="space-y-2">
+                  <Label htmlFor="hsCode" className="text-xs sm:text-sm">
+                    HS Code
+                  </Label>
+                  <input
+                    type="text"
+                    id="hsCode"
+                    placeholder="HS Code"
+                    value={formData.hsCode}
+                    onChange={(e) =>
+                      setFormData({ ...formData, hsCode: e.target.value })
+                    }
+                    className="flex h-8 w-full rounded-md border border-input bg-background px-3 py-2 text-xs ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 sm:h-10 sm:text-sm"
+                  />
+                </div>
+              </div>
+            </div>
+          )}
+
+          {/* 메모 */}
+          <div className="space-y-2">
+            <Label htmlFor="memo" className="text-xs sm:text-sm">
+              메모
+            </Label>
+            <textarea
+              id="memo"
+              placeholder="메모를 입력하세요"
+              value={formData.memo}
+              onChange={(e) =>
+                setFormData({ ...formData, memo: e.target.value })
+              }
+              className="border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex min-h-[80px] w-full rounded-md border px-3 py-2 text-sm focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
+              rows={3}
+            />
+          </div>
+        </div>
+
+        <DialogFooter className="gap-2 sm:gap-0">
+          <Button
+            variant="outline"
+            onClick={handleCancel}
+            disabled={isSaving}
+            className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
+          >
+            취소
+          </Button>
+          <Button
+            onClick={handleSave}
+            disabled={isSaving}
+            className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
+          >
+            {isSaving ? "저장 중..." : "저장"}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
diff --git a/frontend/components/order/README.md b/frontend/components/order/README.md
new file mode 100644
index 00000000..b5216632
--- /dev/null
+++ b/frontend/components/order/README.md
@@ -0,0 +1,374 @@
+# 수주 등록 컴포넌트
+
+## 개요
+
+수주 등록 기능을 위한 전용 컴포넌트들입니다. 이 컴포넌트들은 범용 컴포넌트를 래핑하여 수주 등록에 최적화된 고정 설정을 제공합니다.
+
+## 컴포넌트 구조
+
+```
+frontend/components/order/
+├── OrderRegistrationModal.tsx      # 수주 등록 메인 모달
+├── OrderCustomerSearch.tsx         # 거래처 검색 (전용)
+├── OrderItemRepeaterTable.tsx      # 품목 반복 테이블 (전용)
+└── README.md                        # 문서 (현재 파일)
+```
+
+## 1. OrderRegistrationModal
+
+수주 등록 메인 모달 컴포넌트입니다.
+
+### Props
+
+```typescript
+interface OrderRegistrationModalProps {
+  /** 모달 열림/닫힘 상태 */
+  open: boolean;
+  /** 모달 상태 변경 핸들러 */
+  onOpenChange: (open: boolean) => void;
+  /** 수주 등록 성공 시 콜백 */
+  onSuccess?: () => void;
+}
+```
+
+### 사용 예시
+
+```tsx
+import { OrderRegistrationModal } from "@/components/order/OrderRegistrationModal";
+
+function MyComponent() {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <>
+      <Button onClick={() => setIsOpen(true)}>수주 등록</Button>
+      
+      <OrderRegistrationModal
+        open={isOpen}
+        onOpenChange={setIsOpen}
+        onSuccess={() => {
+          console.log("수주 등록 완료!");
+          // 목록 새로고침 등
+        }}
+      />
+    </>
+  );
+}
+```
+
+### 기능
+
+- **입력 방식 선택**: 거래처 우선, 견적 방식, 단가 방식
+- **거래처 검색**: 자동완성 드롭다운으로 거래처 검색 및 선택
+- **품목 관리**: 모달에서 품목 검색 및 추가, 수량/단가 입력, 금액 자동 계산
+- **전체 금액 표시**: 추가된 품목들의 총 금액 계산
+- **유효성 검사**: 거래처 및 품목 필수 입력 체크
+
+---
+
+## 2. OrderCustomerSearch
+
+수주 등록 전용 거래처 검색 컴포넌트입니다.
+
+### 특징
+
+- `customer_mng` 테이블만 조회 (고정)
+- 거래처명, 거래처코드, 사업자번호로 검색 (고정)
+- 추가 정보 표시 (주소, 연락처)
+
+### Props
+
+```typescript
+interface OrderCustomerSearchProps {
+  /** 현재 선택된 거래처 코드 */
+  value: string;
+  /** 거래처 선택 시 콜백 (거래처 코드, 전체 데이터) */
+  onChange: (customerCode: string | null, fullData?: any) => void;
+  /** 비활성화 여부 */
+  disabled?: boolean;
+}
+```
+
+### 사용 예시
+
+```tsx
+import { OrderCustomerSearch } from "@/components/order/OrderCustomerSearch";
+
+function MyForm() {
+  const [customerCode, setCustomerCode] = useState("");
+  const [customerName, setCustomerName] = useState("");
+
+  return (
+    <OrderCustomerSearch
+      value={customerCode}
+      onChange={(code, fullData) => {
+        setCustomerCode(code || "");
+        setCustomerName(fullData?.customer_name || "");
+      }}
+    />
+  );
+}
+```
+
+### 고정 설정
+
+| 설정 | 값 | 설명 |
+|------|-----|------|
+| `tableName` | `customer_mng` | 거래처 테이블 |
+| `displayField` | `customer_name` | 표시 필드 |
+| `valueField` | `customer_code` | 값 필드 |
+| `searchFields` | `["customer_name", "customer_code", "business_number"]` | 검색 대상 필드 |
+| `additionalFields` | `["customer_code", "address", "contact_phone"]` | 추가 표시 필드 |
+
+---
+
+## 3. OrderItemRepeaterTable
+
+수주 등록 전용 품목 반복 테이블 컴포넌트입니다.
+
+### 특징
+
+- `item_info` 테이블만 조회 (고정)
+- 수주에 필요한 컬럼만 표시 (품번, 품명, 수량, 단가, 금액 등)
+- 금액 자동 계산 (`수량 * 단가`)
+
+### Props
+
+```typescript
+interface OrderItemRepeaterTableProps {
+  /** 현재 선택된 품목 목록 */
+  value: any[];
+  /** 품목 목록 변경 시 콜백 */
+  onChange: (items: any[]) => void;
+  /** 비활성화 여부 */
+  disabled?: boolean;
+}
+```
+
+### 사용 예시
+
+```tsx
+import { OrderItemRepeaterTable } from "@/components/order/OrderItemRepeaterTable";
+
+function MyForm() {
+  const [items, setItems] = useState([]);
+
+  return (
+    <OrderItemRepeaterTable
+      value={items}
+      onChange={setItems}
+    />
+  );
+}
+```
+
+### 고정 컬럼 설정
+
+| 필드 | 라벨 | 타입 | 편집 | 필수 | 계산 | 설명 |
+|------|------|------|------|------|------|------|
+| `id` | 품번 | text | ❌ | - | - | 품목 ID |
+| `item_name` | 품명 | text | ❌ | - | - | 품목명 |
+| `item_number` | 품목번호 | text | ❌ | - | - | 품목 번호 |
+| `quantity` | 수량 | number | ✅ | ✅ | - | 주문 수량 (기본값: 1) |
+| `selling_price` | 단가 | number | ✅ | ✅ | - | 판매 단가 |
+| `amount` | 금액 | number | ❌ | - | ✅ | 자동 계산 (수량 * 단가) |
+| `delivery_date` | 납품일 | date | ✅ | - | - | 납품 예정일 |
+| `note` | 비고 | text | ✅ | - | - | 추가 메모 |
+
+### 계산 규칙
+
+```javascript
+amount = quantity * selling_price
+```
+
+---
+
+## 범용 컴포넌트 vs 전용 컴포넌트
+
+### 왜 전용 컴포넌트를 만들었나?
+
+| 항목 | 범용 컴포넌트 | 전용 컴포넌트 |
+|------|--------------|--------------|
+| **목적** | 화면 편집기에서 다양한 용도로 사용 | 수주 등록 전용 |
+| **설정** | ConfigPanel에서 자유롭게 변경 가능 | 하드코딩으로 고정 |
+| **유연성** | 높음 (모든 테이블/필드 지원) | 낮음 (수주에 최적화) |
+| **안정성** | 사용자 실수 가능 | 설정 변경 불가로 안전 |
+| **위치** | `lib/registry/components/` | `components/order/` |
+
+### 범용 컴포넌트 (화면 편집기용)
+
+```tsx
+// ❌ 수주 등록에서 사용 금지
+<AutocompleteSearchInputComponent
+  tableName="???"  // ConfigPanel에서 변경 가능
+  displayField="???"  // 다른 테이블로 바꿀 수 있음
+  valueField="???"  // 필드가 맞지 않으면 에러
+/>
+```
+
+**문제점:**
+- 사용자가 `tableName`을 `item_info`로 변경하면 거래처가 아닌 품목이 조회됨
+- `valueField`를 변경하면 `formData.customerCode`에 잘못된 값 저장
+- 수주 로직이 깨짐
+
+### 전용 컴포넌트 (수주 등록용)
+
+```tsx
+// ✅ 수주 등록에서 사용
+<OrderCustomerSearch
+  value={customerCode}  // 외부에서 제어 가능
+  onChange={handleChange}  // 값 변경만 처리
+  // 나머지 설정은 내부에서 고정
+/>
+```
+
+**장점:**
+- 설정이 하드코딩되어 있어 변경 불가
+- 수주 등록 로직에 최적화
+- 안전하고 예측 가능
+
+---
+
+## API 엔드포인트
+
+### 거래처 검색
+
+```
+GET /api/entity-search/customer_mng
+Query Parameters:
+  - searchText: 검색어
+  - searchFields: customer_name,customer_code,business_number
+  - page: 페이지 번호
+  - limit: 페이지 크기
+```
+
+### 품목 검색
+
+```
+GET /api/entity-search/item_info
+Query Parameters:
+  - searchText: 검색어
+  - searchFields: item_name,id,item_number
+  - page: 페이지 번호
+  - limit: 페이지 크기
+```
+
+### 수주 등록
+
+```
+POST /api/orders
+Body:
+{
+  inputMode: "customer_first" | "quotation" | "unit_price",
+  customerCode: string,
+  deliveryDate?: string,
+  items: Array<{
+    id: string,
+    item_name: string,
+    quantity: number,
+    selling_price: number,
+    amount: number,
+    delivery_date?: string,
+    note?: string
+  }>,
+  memo?: string
+}
+
+Response:
+{
+  success: boolean,
+  data?: {
+    orderNumber: string,
+    orderId: number
+  },
+  message?: string
+}
+```
+
+---
+
+## 멀티테넌시 (Multi-Tenancy)
+
+모든 API 호출은 자동으로 `company_code` 필터링이 적용됩니다.
+
+- 거래처 검색: 현재 로그인한 사용자의 회사에 속한 거래처만 조회
+- 품목 검색: 현재 로그인한 사용자의 회사에 속한 품목만 조회
+- 수주 등록: 자동으로 현재 사용자의 `company_code` 추가
+
+---
+
+## 트러블슈팅
+
+### 1. 거래처가 검색되지 않음
+
+**원인**: `customer_mng` 테이블에 데이터가 없거나 `company_code`가 다름
+
+**해결**:
+```sql
+-- 거래처 데이터 확인
+SELECT * FROM customer_mng WHERE company_code = 'YOUR_COMPANY_CODE';
+```
+
+### 2. 품목이 검색되지 않음
+
+**원인**: `item_info` 테이블에 데이터가 없거나 `company_code`가 다름
+
+**해결**:
+```sql
+-- 품목 데이터 확인
+SELECT * FROM item_info WHERE company_code = 'YOUR_COMPANY_CODE';
+```
+
+### 3. 수주 등록 실패
+
+**원인**: 필수 필드 누락 또는 백엔드 API 오류
+
+**해결**:
+1. 브라우저 개발자 도구 콘솔 확인
+2. 네트워크 탭에서 API 응답 확인
+3. 백엔드 로그 확인
+
+---
+
+## 개발 참고 사항
+
+### 새로운 전용 컴포넌트 추가 시
+
+1. **범용 컴포넌트 활용**: 기존 범용 컴포넌트를 래핑
+2. **설정 고정**: 비즈니스 로직에 필요한 설정을 하드코딩
+3. **Props 최소화**: 외부에서 제어 가능한 최소한의 prop만 노출
+4. **문서 작성**: README에 사용법 및 고정 설정 명시
+
+### 예시: 견적 등록 전용 컴포넌트
+
+```tsx
+// QuotationCustomerSearch.tsx
+export function QuotationCustomerSearch({ value, onChange }: Props) {
+  return (
+    <AutocompleteSearchInputComponent
+      tableName="customer_mng"  // 고정
+      displayField="customer_name"  // 고정
+      valueField="customer_code"  // 고정
+      value={value}
+      onChange={onChange}
+    />
+  );
+}
+```
+
+---
+
+## 관련 파일
+
+- 범용 컴포넌트:
+  - `lib/registry/components/autocomplete-search-input/`
+  - `lib/registry/components/entity-search-input/`
+  - `lib/registry/components/modal-repeater-table/`
+
+- 백엔드 API:
+  - `backend-node/src/controllers/entitySearchController.ts`
+  - `backend-node/src/controllers/orderController.ts`
+
+- 계획서:
+  - `수주등록_화면_개발_계획서.md`
+
diff --git a/frontend/components/screen/InteractiveScreenViewer.tsx b/frontend/components/screen/InteractiveScreenViewer.tsx
index 62911f44..8c93380e 100644
--- a/frontend/components/screen/InteractiveScreenViewer.tsx
+++ b/frontend/components/screen/InteractiveScreenViewer.tsx
@@ -8,7 +8,7 @@ import { Checkbox } from "@/components/ui/checkbox";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { Calendar } from "@/components/ui/calendar";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
-import { ResizableDialog, ResizableDialogContent, ResizableDialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, ResizableDialog, ResizableDialogContent, ResizableDialogHeader } from "@/components/ui/dialog";
 import { CalendarIcon, File, Upload, X } from "lucide-react";
 import { format } from "date-fns";
 import { ko } from "date-fns/locale";
diff --git a/frontend/components/screen/InteractiveScreenViewerDynamic.tsx b/frontend/components/screen/InteractiveScreenViewerDynamic.tsx
index 639ffa0a..df134685 100644
--- a/frontend/components/screen/InteractiveScreenViewerDynamic.tsx
+++ b/frontend/components/screen/InteractiveScreenViewerDynamic.tsx
@@ -40,6 +40,12 @@ interface InteractiveScreenViewerProps {
     tableName?: string;
   };
   onSave?: () => Promise<void>;
+  onRefresh?: () => void;
+  onFlowRefresh?: () => void;
+  // 🆕 외부에서 전달받는 사용자 정보 (ScreenModal 등에서 사용)
+  userId?: string;
+  userName?: string;
+  companyCode?: string;
 }
 
 export const InteractiveScreenViewerDynamic: React.FC<InteractiveScreenViewerProps> = ({
@@ -50,9 +56,26 @@ export const InteractiveScreenViewerDynamic: React.FC<InteractiveScreenViewerPro
   hideLabel = false,
   screenInfo,
   onSave,
+  onRefresh,
+  onFlowRefresh,
+  userId: externalUserId,
+  userName: externalUserName,
+  companyCode: externalCompanyCode,
 }) => {
   const { isPreviewMode } = useScreenPreview(); // 프리뷰 모드 확인
-  const { userName, user } = useAuth();
+  const { userName: authUserName, user: authUser } = useAuth();
+
+  // 외부에서 전달받은 사용자 정보가 있으면 우선 사용 (ScreenModal 등에서)
+  const userName = externalUserName || authUserName;
+  const user =
+    externalUserId && externalUserId !== authUser?.userId
+      ? {
+          userId: externalUserId,
+          userName: externalUserName || authUserName || "",
+          companyCode: externalCompanyCode || authUser?.companyCode || "",
+          isAdmin: authUser?.isAdmin || false,
+        }
+      : authUser;
   const [localFormData, setLocalFormData] = useState<Record<string, any>>({});
   const [dateValues, setDateValues] = useState<Record<string, Date | undefined>>({});
 
@@ -126,59 +149,55 @@ export const InteractiveScreenViewerDynamic: React.FC<InteractiveScreenViewerPro
     const handleEnterKey = (e: KeyboardEvent) => {
       if (e.key === "Enter" && !e.shiftKey) {
         const target = e.target as HTMLElement;
-        
+
         // 한글 조합 중이면 무시 (한글 입력 문제 방지)
         if ((e as any).isComposing || e.keyCode === 229) {
           return;
         }
-        
+
         // textarea는 제외 (여러 줄 입력)
         if (target.tagName === "TEXTAREA") {
           return;
         }
-        
+
         // input, select 등의 폼 요소에서만 작동
-        if (
-          target.tagName === "INPUT" ||
-          target.tagName === "SELECT" ||
-          target.getAttribute("role") === "combobox"
-        ) {
+        if (target.tagName === "INPUT" || target.tagName === "SELECT" || target.getAttribute("role") === "combobox") {
           e.preventDefault();
-          
+
           // 모든 포커스 가능한 요소 찾기
           const focusableElements = document.querySelectorAll<HTMLElement>(
-            'input:not([disabled]):not([type="hidden"]), select:not([disabled]), textarea:not([disabled]), [role="combobox"]:not([disabled])'
+            'input:not([disabled]):not([type="hidden"]), select:not([disabled]), textarea:not([disabled]), [role="combobox"]:not([disabled])',
           );
-          
+
           // 화면에 보이는 순서(Y 좌표 → X 좌표)대로 정렬
           const focusableArray = Array.from(focusableElements).sort((a, b) => {
             const rectA = a.getBoundingClientRect();
             const rectB = b.getBoundingClientRect();
-            
+
             // Y 좌표 차이가 10px 이상이면 Y 좌표로 정렬 (위에서 아래로)
             if (Math.abs(rectA.top - rectB.top) > 10) {
               return rectA.top - rectB.top;
             }
-            
+
             // 같은 줄이면 X 좌표로 정렬 (왼쪽에서 오른쪽으로)
             return rectA.left - rectB.left;
           });
-          
+
           const currentIndex = focusableArray.indexOf(target);
-          
+
           if (currentIndex !== -1 && currentIndex < focusableArray.length - 1) {
             // 다음 요소로 포커스 이동
             const nextElement = focusableArray[currentIndex + 1];
             nextElement.focus();
-            
+
             // select() 제거: 한글 입력 시 이전 필드의 마지막 글자가 복사되는 버그 방지
           }
         }
       }
     };
-    
+
     document.addEventListener("keydown", handleEnterKey);
-    
+
     return () => {
       document.removeEventListener("keydown", handleEnterKey);
     };
@@ -189,31 +208,26 @@ export const InteractiveScreenViewerDynamic: React.FC<InteractiveScreenViewerPro
     const initAutoInputFields = async () => {
       for (const comp of allComponents) {
         // type: "component" 또는 type: "widget" 모두 처리
-        if (comp.type === 'widget' || comp.type === 'component') {
+        if (comp.type === "widget" || comp.type === "component") {
           const widget = comp as any;
           const fieldName = widget.columnName || widget.id;
-          
+
           // autoFill 처리 (테이블 조회 기반 자동 입력)
           if (widget.autoFill?.enabled || (comp as any).autoFill?.enabled) {
             const autoFillConfig = widget.autoFill || (comp as any).autoFill;
             const currentValue = formData[fieldName];
-            
-            if (currentValue === undefined || currentValue === '') {
+
+            if (currentValue === undefined || currentValue === "") {
               const { sourceTable, filterColumn, userField, displayColumn } = autoFillConfig;
-              
+
               // 사용자 정보에서 필터 값 가져오기
               const userValue = user?.[userField];
-              
+
               if (userValue && sourceTable && filterColumn && displayColumn) {
                 try {
                   const { tableTypeApi } = await import("@/lib/api/screen");
-                  const result = await tableTypeApi.getTableRecord(
-                    sourceTable,
-                    filterColumn,
-                    userValue,
-                    displayColumn
-                  );
-                  
+                  const result = await tableTypeApi.getTableRecord(sourceTable, filterColumn, userValue, displayColumn);
+
                   updateFormData(fieldName, result.value);
                 } catch (error) {
                   console.error(`autoFill 조회 실패: ${fieldName}`, error);
@@ -312,6 +326,7 @@ export const InteractiveScreenViewerDynamic: React.FC<InteractiveScreenViewerPro
           userId={user?.userId} // ✅ 사용자 ID 전달
           userName={user?.userName} // ✅ 사용자 이름 전달
           companyCode={user?.companyCode} // ✅ 회사 코드 전달
+          allComponents={allComponents} // 🆕 같은 화면의 모든 컴포넌트 전달 (TableList 자동 감지용)
           selectedRowsData={selectedRowsData}
           onSelectedRowsChange={(selectedRows, selectedData) => {
             console.log("🔍 테이블에서 선택된 행 데이터:", selectedData);
@@ -324,9 +339,14 @@ export const InteractiveScreenViewerDynamic: React.FC<InteractiveScreenViewerPro
             setFlowSelectedData(selectedData);
             setFlowSelectedStepId(stepId);
           }}
-          onRefresh={() => {
-            // 테이블 컴포넌트는 자체적으로 loadData 호출
-          }}
+          onRefresh={
+            onRefresh ||
+            (() => {
+              // 부모로부터 전달받은 onRefresh 또는 기본 동작
+              console.log("🔄 InteractiveScreenViewerDynamic onRefresh 호출");
+            })
+          }
+          onFlowRefresh={onFlowRefresh}
           onClose={() => {
             // buttonActions.ts가 이미 처리함
           }}
@@ -350,7 +370,7 @@ export const InteractiveScreenViewerDynamic: React.FC<InteractiveScreenViewerPro
       return React.cloneElement(element, {
         style: {
           ...element.props.style,
-          ...styleWithoutSize,  // width/height 제외한 스타일만 적용
+          ...styleWithoutSize, // width/height 제외한 스타일만 적용
           width: "100%",
           height: "100%",
           minHeight: "100%",
@@ -556,8 +576,8 @@ export const InteractiveScreenViewerDynamic: React.FC<InteractiveScreenViewerPro
           backgroundColor: config?.backgroundColor || comp.style?.backgroundColor,
           color: config?.textColor || comp.style?.color,
           // 부모 컨테이너 크기에 맞춤
-          width: '100%',
-          height: '100%',
+          width: "100%",
+          height: "100%",
         }}
       >
         {label || "버튼"}
@@ -682,18 +702,18 @@ export const InteractiveScreenViewerDynamic: React.FC<InteractiveScreenViewerPro
 
   // ✅ 격자 시스템 잔재 제거: style.width, style.height 무시
   const { width: styleWidth, height: styleHeight, ...styleWithoutSize } = style;
-  
+
   // TableSearchWidget의 경우 높이를 자동으로 설정
   const isTableSearchWidget = (component as any).componentId === "table-search-widget";
-  
+
   const componentStyle = {
     position: "absolute" as const,
     left: position?.x || 0,
     top: position?.y || 0,
     zIndex: position?.z || 1,
-    ...styleWithoutSize,  // width/height 제외한 스타일만 먼저 적용
-    width: size?.width || 200,  // size의 픽셀 값이 최종 우선순위
-    height: isTableSearchWidget ? "auto" : (size?.height || 10),
+    ...styleWithoutSize, // width/height 제외한 스타일만 먼저 적용
+    width: size?.width || 200, // size의 픽셀 값이 최종 우선순위
+    height: isTableSearchWidget ? "auto" : size?.height || 10,
     minHeight: isTableSearchWidget ? "48px" : undefined,
   };
 
diff --git a/frontend/components/screen/RealtimePreviewDynamic.tsx b/frontend/components/screen/RealtimePreviewDynamic.tsx
index 9ae2db82..93872289 100644
--- a/frontend/components/screen/RealtimePreviewDynamic.tsx
+++ b/frontend/components/screen/RealtimePreviewDynamic.tsx
@@ -60,6 +60,9 @@ interface RealtimePreviewProps {
   sortBy?: string;
   sortOrder?: "asc" | "desc";
   columnOrder?: string[];
+  
+  // 🆕 조건부 컨테이너 높이 변화 콜백
+  onHeightChange?: (componentId: string, newHeight: number) => void;
 }
 
 // 동적 위젯 타입 아이콘 (레지스트리에서 조회)
@@ -123,6 +126,7 @@ export const RealtimePreviewDynamic: React.FC<RealtimePreviewProps> = ({
   onFlowRefresh,
   formData,
   onFormDataChange,
+  onHeightChange, // 🆕 조건부 컨테이너 높이 변화 콜백
 }) => {
   const [actualHeight, setActualHeight] = React.useState<number | null>(null);
   const contentRef = React.useRef<HTMLDivElement>(null);
@@ -212,19 +216,18 @@ export const RealtimePreviewDynamic: React.FC<RealtimePreviewProps> = ({
   // 컴포넌트 기본 스타일 - 레이아웃은 항상 맨 아래
   // 🔥 모든 컴포넌트를 픽셀 기준으로 통일 (스케일로만 조정)
   const getWidth = () => {
-    // table-list는 화면 너비 전체 사용
-    if (component.componentConfig?.type === "table-list") {
-      // 디자인 해상도 기준으로 픽셀 반환
-      const screenWidth = 1920; // 기본 디자인 해상도
-      return `${screenWidth}px`;
-    }
-
-    // 모든 컴포넌트는 size.width 픽셀 사용
+    // 모든 컴포넌트는 size.width 픽셀 사용 (table-list 포함)
     const width = `${size?.width || 100}px`;
     return width;
   };
 
   const getHeight = () => {
+    // 🆕 조건부 컨테이너는 높이를 자동으로 설정 (내용물에 따라 자동 조정)
+    const isConditionalContainer = (component as any).componentType === "conditional-container";
+    if (isConditionalContainer && !isDesignMode) {
+      return "auto"; // 런타임에서는 내용물 높이에 맞춤
+    }
+
     // 플로우 위젯의 경우 측정된 높이 사용
     const isFlowWidget = component.type === "component" && (component as any).componentType === "flow-widget";
     if (isFlowWidget && actualHeight) {
@@ -259,19 +262,26 @@ export const RealtimePreviewDynamic: React.FC<RealtimePreviewProps> = ({
       }
     : component;
 
-  // componentStyle에서 width, height 제거 (size.width, size.height만 사용)
-  const { width: _styleWidth, height: _styleHeight, ...restComponentStyle } = componentStyle || {};
-  
   const baseStyle = {
     left: `${position.x}px`,
     top: `${position.y}px`,
-    ...restComponentStyle, // width/height 제외한 스타일 먼저 적용
-    width: getWidth(), // size.width로 덮어쓰기
-    height: getHeight(), // size.height로 덮어쓰기
+    ...componentStyle, // componentStyle 전체 적용 (DynamicComponentRenderer에서 이미 size가 변환됨)
+    width: getWidth(), // getWidth() 우선 (table-list 등 특수 케이스)
+    height: getHeight(), // getHeight() 우선 (flow-widget 등 특수 케이스)
     zIndex: component.type === "layout" ? 1 : position.z || 2,
     right: undefined,
   };
 
+  // 크기 정보는 필요시에만 디버깅 (개발 중 문제 발생 시 주석 해제)
+  // if (component.id && isSelected) {
+  //   console.log("📐 RealtimePreview baseStyle:", {
+  //     componentId: component.id,
+  //     componentType: (component as any).componentType || component.type,
+  //     sizeWidth: size?.width,
+  //     sizeHeight: size?.height,
+  //   });
+  // }
+
   // 🔍 DOM 렌더링 후 실제 크기 측정
   const innerDivRef = React.useRef<HTMLDivElement>(null);
   const outerDivRef = React.useRef<HTMLDivElement>(null);
@@ -325,7 +335,12 @@ export const RealtimePreviewDynamic: React.FC<RealtimePreviewProps> = ({
             (contentRef as any).current = node;
           }
         }}
-        className={`${component.type === "component" && (component as any).componentType === "flow-widget" ? "h-auto" : "h-full"} overflow-visible`}
+        className={`${
+          (component.type === "component" && (component as any).componentType === "flow-widget") ||
+          ((component as any).componentType === "conditional-container" && !isDesignMode)
+            ? "h-auto"
+            : "h-full"
+        } overflow-visible`}
         style={{ width: "100%", maxWidth: "100%" }}
       >
         <DynamicComponentRenderer
@@ -361,6 +376,7 @@ export const RealtimePreviewDynamic: React.FC<RealtimePreviewProps> = ({
           sortBy={sortBy}
           sortOrder={sortOrder}
           columnOrder={columnOrder}
+          onHeightChange={onHeightChange}
         />
       </div>
 
diff --git a/frontend/components/screen/ScreenDesigner.tsx b/frontend/components/screen/ScreenDesigner.tsx
index cafd3c41..dcd80a62 100644
--- a/frontend/components/screen/ScreenDesigner.tsx
+++ b/frontend/components/screen/ScreenDesigner.tsx
@@ -525,6 +525,34 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
           const finalKey = pathParts[pathParts.length - 1];
           current[finalKey] = value;
 
+          // 🆕 size 변경 시 style도 함께 업데이트 (파란 테두리와 실제 크기 동기화)
+          if (path === "size.width" || path === "size.height" || path === "size") {
+            if (!newComp.style) {
+              newComp.style = {};
+            }
+            
+            if (path === "size.width") {
+              newComp.style.width = `${value}px`;
+            } else if (path === "size.height") {
+              newComp.style.height = `${value}px`;
+            } else if (path === "size") {
+              // size 객체 전체가 변경된 경우
+              if (value.width !== undefined) {
+                newComp.style.width = `${value.width}px`;
+              }
+              if (value.height !== undefined) {
+                newComp.style.height = `${value.height}px`;
+              }
+            }
+            
+            console.log("🔄 size 변경 → style 동기화:", {
+              componentId: newComp.id,
+              path,
+              value,
+              updatedStyle: newComp.style,
+            });
+          }
+
           // gridColumns 변경 시 크기 자동 업데이트 제거 (격자 시스템 제거됨)
           // if (path === "gridColumns" && prevLayout.gridSettings) {
           //   const updatedSize = updateSizeFromGridColumns(newComp, prevLayout.gridSettings as GridUtilSettings);
@@ -2217,7 +2245,8 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
           labelColor: "#212121",
           labelFontWeight: "500",
           labelMarginBottom: "4px",
-          width: `${widthPercent}%`, // gridColumns에 맞춘 퍼센트 너비
+          width: `${componentSize.width}px`, // size와 동기화 (픽셀 단위)
+          height: `${componentSize.height}px`, // size와 동기화 (픽셀 단위)
         },
       };
 
diff --git a/frontend/components/screen/ScreenList.tsx b/frontend/components/screen/ScreenList.tsx
index 63ec2210..51a09164 100644
--- a/frontend/components/screen/ScreenList.tsx
+++ b/frontend/components/screen/ScreenList.tsx
@@ -1,12 +1,13 @@
 "use client";
 
-import { useState, useEffect } from "react";
+import { useState, useEffect, useCallback, useRef } from "react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Badge } from "@/components/ui/badge";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { Checkbox } from "@/components/ui/checkbox";
+import { useAuth } from "@/hooks/useAuth";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -66,17 +67,31 @@ type DeletedScreenDefinition = ScreenDefinition & {
 };
 
 export default function ScreenList({ onScreenSelect, selectedScreen, onDesignScreen }: ScreenListProps) {
+  const { user } = useAuth();
+  const isSuperAdmin = user?.userType === "SUPER_ADMIN" || user?.companyCode === "*";
+
   const [activeTab, setActiveTab] = useState("active");
   const [screens, setScreens] = useState<ScreenDefinition[]>([]);
   const [deletedScreens, setDeletedScreens] = useState<DeletedScreenDefinition[]>([]);
-  const [loading, setLoading] = useState(true);
+  const [loading, setLoading] = useState(true); // 초기 로딩
+  const [isSearching, setIsSearching] = useState(false); // 검색 중 로딩 (포커스 유지)
   const [searchTerm, setSearchTerm] = useState("");
+  const [debouncedSearchTerm, setDebouncedSearchTerm] = useState("");
+  const [selectedCompanyCode, setSelectedCompanyCode] = useState<string>("all");
+  const [companies, setCompanies] = useState<any[]>([]);
+  const [loadingCompanies, setLoadingCompanies] = useState(false);
   const [currentPage, setCurrentPage] = useState(1);
   const [totalPages, setTotalPages] = useState(1);
   const [isCreateOpen, setIsCreateOpen] = useState(false);
   const [isCopyOpen, setIsCopyOpen] = useState(false);
   const [screenToCopy, setScreenToCopy] = useState<ScreenDefinition | null>(null);
 
+  // 검색어 디바운스를 위한 타이머 ref
+  const debounceTimer = useRef<NodeJS.Timeout | null>(null);
+  
+  // 첫 로딩 여부를 추적 (한 번만 true)
+  const isFirstLoad = useRef(true);
+
   // 삭제 관련 상태
   const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
   const [screenToDelete, setScreenToDelete] = useState<ScreenDefinition | null>(null);
@@ -110,7 +125,10 @@ export default function ScreenList({ onScreenSelect, selectedScreen, onDesignScr
     screenName: "",
     description: "",
     isActive: "Y",
+    tableName: "",
   });
+  const [tables, setTables] = useState<string[]>([]);
+  const [loadingTables, setLoadingTables] = useState(false);
 
   // 미리보기 관련 상태
   const [previewDialogOpen, setPreviewDialogOpen] = useState(false);
@@ -119,14 +137,75 @@ export default function ScreenList({ onScreenSelect, selectedScreen, onDesignScr
   const [isLoadingPreview, setIsLoadingPreview] = useState(false);
   const [previewFormData, setPreviewFormData] = useState<Record<string, any>>({});
 
-  // 화면 목록 로드 (실제 API)
+  // 최고 관리자인 경우 회사 목록 로드
+  useEffect(() => {
+    if (isSuperAdmin) {
+      loadCompanies();
+    }
+  }, [isSuperAdmin]);
+
+  const loadCompanies = async () => {
+    try {
+      setLoadingCompanies(true);
+      const { apiClient } = await import("@/lib/api/client"); // named export
+      const response = await apiClient.get("/admin/companies");
+      const data = response.data.data || response.data || [];
+      setCompanies(data.map((c: any) => ({
+        companyCode: c.company_code || c.companyCode,
+        companyName: c.company_name || c.companyName,
+      })));
+    } catch (error) {
+      console.error("회사 목록 조회 실패:", error);
+    } finally {
+      setLoadingCompanies(false);
+    }
+  };
+
+  // 검색어 디바운스 처리 (150ms 지연 - 빠른 응답)
+  useEffect(() => {
+    // 이전 타이머 취소
+    if (debounceTimer.current) {
+      clearTimeout(debounceTimer.current);
+    }
+
+    // 새 타이머 설정
+    debounceTimer.current = setTimeout(() => {
+      setDebouncedSearchTerm(searchTerm);
+    }, 150);
+
+    // 클린업
+    return () => {
+      if (debounceTimer.current) {
+        clearTimeout(debounceTimer.current);
+      }
+    };
+  }, [searchTerm]);
+
+  // 화면 목록 로드 (실제 API) - debouncedSearchTerm 사용
   useEffect(() => {
     let abort = false;
     const load = async () => {
       try {
-        setLoading(true);
+        // 첫 로딩인 경우에만 loading=true, 그 외에는 isSearching=true
+        if (isFirstLoad.current) {
+          setLoading(true);
+          isFirstLoad.current = false; // 첫 로딩 완료 표시
+        } else {
+          setIsSearching(true);
+        }
+
         if (activeTab === "active") {
-          const resp = await screenApi.getScreens({ page: currentPage, size: 20, searchTerm });
+          const params: any = { page: currentPage, size: 20, searchTerm: debouncedSearchTerm };
+          
+          // 최고 관리자이고 특정 회사를 선택한 경우
+          if (isSuperAdmin && selectedCompanyCode !== "all") {
+            params.companyCode = selectedCompanyCode;
+          }
+
+          console.log("🔍 화면 목록 API 호출:", params); // 디버깅용
+          const resp = await screenApi.getScreens(params);
+          console.log("✅ 화면 목록 응답:", resp); // 디버깅용
+          
           if (abort) return;
           setScreens(resp.data || []);
           setTotalPages(Math.max(1, Math.ceil((resp.total || 0) / 20)));
@@ -137,7 +216,7 @@ export default function ScreenList({ onScreenSelect, selectedScreen, onDesignScr
           setTotalPages(Math.max(1, Math.ceil((resp.total || 0) / 20)));
         }
       } catch (e) {
-        // console.error("화면 목록 조회 실패", e);
+        console.error("화면 목록 조회 실패", e);
         if (activeTab === "active") {
           setScreens([]);
         } else {
@@ -145,28 +224,38 @@ export default function ScreenList({ onScreenSelect, selectedScreen, onDesignScr
         }
         setTotalPages(1);
       } finally {
-        if (!abort) setLoading(false);
+        if (!abort) {
+          setLoading(false);
+          setIsSearching(false);
+        }
       }
     };
     load();
     return () => {
       abort = true;
     };
-  }, [currentPage, searchTerm, activeTab]);
+  }, [currentPage, debouncedSearchTerm, activeTab, selectedCompanyCode, isSuperAdmin]);
 
   const filteredScreens = screens; // 서버 필터 기준 사용
 
   // 화면 목록 다시 로드
   const reloadScreens = async () => {
     try {
-      setLoading(true);
-      const resp = await screenApi.getScreens({ page: currentPage, size: 20, searchTerm });
+      setIsSearching(true);
+      const params: any = { page: currentPage, size: 20, searchTerm: debouncedSearchTerm };
+      
+      // 최고 관리자이고 특정 회사를 선택한 경우
+      if (isSuperAdmin && selectedCompanyCode !== "all") {
+        params.companyCode = selectedCompanyCode;
+      }
+      
+      const resp = await screenApi.getScreens(params);
       setScreens(resp.data || []);
       setTotalPages(Math.max(1, Math.ceil((resp.total || 0) / 20)));
     } catch (e) {
-      // console.error("화면 목록 조회 실패", e);
+      console.error("화면 목록 조회 실패", e);
     } finally {
-      setLoading(false);
+      setIsSearching(false);
     }
   };
 
@@ -174,14 +263,31 @@ export default function ScreenList({ onScreenSelect, selectedScreen, onDesignScr
     onScreenSelect(screen);
   };
 
-  const handleEdit = (screen: ScreenDefinition) => {
+  const handleEdit = async (screen: ScreenDefinition) => {
     setScreenToEdit(screen);
     setEditFormData({
       screenName: screen.screenName,
       description: screen.description || "",
       isActive: screen.isActive,
+      tableName: screen.tableName || "",
     });
     setEditDialogOpen(true);
+
+    // 테이블 목록 로드
+    try {
+      setLoadingTables(true);
+      const { tableManagementApi } = await import("@/lib/api/tableManagement");
+      const response = await tableManagementApi.getTableList();
+      if (response.success && response.data) {
+        // tableName만 추출 (camelCase)
+        const tableNames = response.data.map((table: any) => table.tableName);
+        setTables(tableNames);
+      }
+    } catch (error) {
+      console.error("테이블 목록 조회 실패:", error);
+    } finally {
+      setLoadingTables(false);
+    }
   };
 
   const handleEditSave = async () => {
@@ -405,18 +511,48 @@ export default function ScreenList({ onScreenSelect, selectedScreen, onDesignScr
     <div className="space-y-4">
       {/* 검색 및 필터 */}
       <div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
-        <div className="w-full sm:w-[400px]">
-          <div className="relative">
-            <Search className="text-muted-foreground absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2" />
-            <Input
-              placeholder="화면명, 코드, 테이블명으로 검색..."
-              value={searchTerm}
-              onChange={(e) => setSearchTerm(e.target.value)}
-              className="h-10 pl-10 text-sm"
-              disabled={activeTab === "trash"}
-            />
+        <div className="flex flex-col gap-4 sm:flex-row sm:items-center">
+          {/* 최고 관리자 전용: 회사 필터 */}
+          {isSuperAdmin && (
+            <div className="w-full sm:w-[200px]">
+              <Select value={selectedCompanyCode} onValueChange={setSelectedCompanyCode} disabled={activeTab === "trash"}>
+                <SelectTrigger className="h-10 text-sm">
+                  <SelectValue placeholder="전체 회사" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="all">전체 회사</SelectItem>
+                  {companies.map((company) => (
+                    <SelectItem key={company.companyCode} value={company.companyCode}>
+                      {company.companyName}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+          )}
+
+          {/* 검색 입력 */}
+          <div className="w-full sm:w-[400px]">
+            <div className="relative">
+              <Search className="text-muted-foreground absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2" />
+              <Input
+                key="screen-search-input" // 리렌더링 시에도 동일한 Input 유지
+                placeholder="화면명, 코드, 테이블명으로 검색..."
+                value={searchTerm}
+                onChange={(e) => setSearchTerm(e.target.value)}
+                className="h-10 pl-10 text-sm"
+                disabled={activeTab === "trash"}
+              />
+              {/* 검색 중 인디케이터 */}
+              {isSearching && (
+                <div className="absolute right-3 top-1/2 -translate-y-1/2">
+                  <div className="h-4 w-4 animate-spin rounded-full border-2 border-primary border-t-transparent" />
+                </div>
+              )}
+            </div>
           </div>
         </div>
+
         <Button
           onClick={() => setIsCreateOpen(true)}
           disabled={activeTab === "trash"}
@@ -1064,6 +1200,25 @@ export default function ScreenList({ onScreenSelect, selectedScreen, onDesignScr
                 placeholder="화면명을 입력하세요"
               />
             </div>
+            <div className="space-y-2">
+              <Label htmlFor="edit-tableName">테이블 *</Label>
+              <Select
+                value={editFormData.tableName}
+                onValueChange={(value) => setEditFormData({ ...editFormData, tableName: value })}
+                disabled={loadingTables}
+              >
+                <SelectTrigger id="edit-tableName">
+                  <SelectValue placeholder={loadingTables ? "로딩 중..." : "테이블을 선택하세요"} />
+                </SelectTrigger>
+                <SelectContent>
+                  {tables.map((tableName) => (
+                    <SelectItem key={tableName} value={tableName}>
+                      {tableName}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
             <div className="space-y-2">
               <Label htmlFor="edit-description">설명</Label>
               <Textarea
@@ -1094,7 +1249,7 @@ export default function ScreenList({ onScreenSelect, selectedScreen, onDesignScr
             <Button variant="outline" onClick={() => setEditDialogOpen(false)}>
               취소
             </Button>
-            <Button onClick={handleEditSave} disabled={!editFormData.screenName.trim()}>
+            <Button onClick={handleEditSave} disabled={!editFormData.screenName.trim() || !editFormData.tableName.trim()}>
               저장
             </Button>
           </DialogFooter>
diff --git a/frontend/components/screen/config-panels/ButtonConfigPanel.tsx b/frontend/components/screen/config-panels/ButtonConfigPanel.tsx
index 20e6f81b..1ef8fee4 100644
--- a/frontend/components/screen/config-panels/ButtonConfigPanel.tsx
+++ b/frontend/components/screen/config-panels/ButtonConfigPanel.tsx
@@ -8,7 +8,8 @@ import { Switch } from "@/components/ui/switch";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";
 import { Button } from "@/components/ui/button";
-import { Check, ChevronsUpDown, Search } from "lucide-react";
+import { Card } from "@/components/ui/card";
+import { Check, ChevronsUpDown, Search, Plus, X, ChevronUp, ChevronDown, Type, Database } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { ComponentData } from "@/types/screen";
 import { apiClient } from "@/lib/api/client";
@@ -16,6 +17,15 @@ import { ButtonDataflowConfigPanel } from "./ButtonDataflowConfigPanel";
 import { ImprovedButtonControlConfigPanel } from "./ImprovedButtonControlConfigPanel";
 import { FlowVisibilityConfigPanel } from "./FlowVisibilityConfigPanel";
 
+// 🆕 제목 블록 타입
+interface TitleBlock {
+  id: string;
+  type: "text" | "field";
+  value: string; // text: 텍스트 내용, field: 컬럼명
+  tableName?: string; // field일 때 테이블명
+  label?: string; // field일 때 표시용 라벨
+}
+
 interface ButtonConfigPanelProps {
   component: ComponentData;
   onUpdateProperty: (path: string, value: any) => void;
@@ -64,6 +74,15 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
   const [displayColumnOpen, setDisplayColumnOpen] = useState(false);
   const [displayColumnSearch, setDisplayColumnSearch] = useState("");
 
+  // 🆕 제목 블록 빌더 상태
+  const [titleBlocks, setTitleBlocks] = useState<TitleBlock[]>([]);
+  const [availableTables, setAvailableTables] = useState<Array<{ name: string; label: string }>>([]); // 시스템의 모든 테이블 목록
+  const [tableColumnsMap, setTableColumnsMap] = useState<Record<string, Array<{ name: string; label: string }>>>({});
+  const [blockTableSearches, setBlockTableSearches] = useState<Record<string, string>>({}); // 블록별 테이블 검색어
+  const [blockColumnSearches, setBlockColumnSearches] = useState<Record<string, string>>({}); // 블록별 컬럼 검색어
+  const [blockTablePopoverOpen, setBlockTablePopoverOpen] = useState<Record<string, boolean>>({}); // 블록별 테이블 Popover 열림 상태
+  const [blockColumnPopoverOpen, setBlockColumnPopoverOpen] = useState<Record<string, boolean>>({}); // 블록별 컬럼 Popover 열림 상태
+
   // 🎯 플로우 위젯이 화면에 있는지 확인
   const hasFlowWidget = useMemo(() => {
     const found = allComponents.some((comp: any) => {
@@ -95,9 +114,150 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
       editModalDescription: String(latestAction.editModalDescription || ""),
       targetUrl: String(latestAction.targetUrl || ""),
     });
+
+    // 🆕 제목 블록 초기화
+    if (latestAction.modalTitleBlocks && latestAction.modalTitleBlocks.length > 0) {
+      setTitleBlocks(latestAction.modalTitleBlocks);
+    } else {
+      // 기본값: 빈 배열
+      setTitleBlocks([]);
+    }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [component.id]);
 
+  // 🆕 제목 블록 핸들러
+  const addTextBlock = () => {
+    const newBlock: TitleBlock = {
+      id: `text-${Date.now()}`,
+      type: "text",
+      value: "",
+    };
+    const updatedBlocks = [...titleBlocks, newBlock];
+    setTitleBlocks(updatedBlocks);
+    onUpdateProperty("componentConfig.action.modalTitleBlocks", updatedBlocks);
+  };
+
+  const addFieldBlock = () => {
+    const newBlock: TitleBlock = {
+      id: `field-${Date.now()}`,
+      type: "field",
+      value: "",
+      tableName: "",
+      label: "",
+    };
+    const updatedBlocks = [...titleBlocks, newBlock];
+    setTitleBlocks(updatedBlocks);
+    onUpdateProperty("componentConfig.action.modalTitleBlocks", updatedBlocks);
+  };
+
+  const updateBlock = (id: string, updates: Partial<TitleBlock>) => {
+    const updatedBlocks = titleBlocks.map((block) =>
+      block.id === id ? { ...block, ...updates } : block
+    );
+    setTitleBlocks(updatedBlocks);
+    onUpdateProperty("componentConfig.action.modalTitleBlocks", updatedBlocks);
+  };
+
+  const removeBlock = (id: string) => {
+    const updatedBlocks = titleBlocks.filter((block) => block.id !== id);
+    setTitleBlocks(updatedBlocks);
+    onUpdateProperty("componentConfig.action.modalTitleBlocks", updatedBlocks);
+  };
+
+  const moveBlockUp = (id: string) => {
+    const index = titleBlocks.findIndex((b) => b.id === id);
+    if (index <= 0) return;
+    const newBlocks = [...titleBlocks];
+    [newBlocks[index - 1], newBlocks[index]] = [newBlocks[index], newBlocks[index - 1]];
+    setTitleBlocks(newBlocks);
+    onUpdateProperty("componentConfig.action.modalTitleBlocks", newBlocks);
+  };
+
+  const moveBlockDown = (id: string) => {
+    const index = titleBlocks.findIndex((b) => b.id === id);
+    if (index < 0 || index >= titleBlocks.length - 1) return;
+    const newBlocks = [...titleBlocks];
+    [newBlocks[index], newBlocks[index + 1]] = [newBlocks[index + 1], newBlocks[index]];
+    setTitleBlocks(newBlocks);
+    onUpdateProperty("componentConfig.action.modalTitleBlocks", newBlocks);
+  };
+
+  // 🆕 제목 미리보기 생성
+  const generateTitlePreview = (): string => {
+    if (titleBlocks.length === 0) return "(제목 없음)";
+    return titleBlocks
+      .map((block) => {
+        if (block.type === "text") {
+          return block.value || "(텍스트)";
+        } else {
+          return block.label || block.value || "(필드)";
+        }
+      })
+      .join("");
+  };
+
+  // 🆕 시스템의 모든 테이블 목록 로드
+  useEffect(() => {
+    const fetchAllTables = async () => {
+      try {
+        const response = await apiClient.get("/table-management/tables");
+        
+        if (response.data.success && response.data.data) {
+          const tables = response.data.data.map((table: any) => ({
+            name: table.tableName,
+            label: table.displayName || table.tableName,
+          }));
+          setAvailableTables(tables);
+          console.log(`✅ 전체 테이블 목록 로드 성공:`, tables.length);
+        }
+      } catch (error) {
+        console.error("테이블 목록 로드 실패:", error);
+      }
+    };
+    
+    fetchAllTables();
+  }, []);
+
+  // 🆕 특정 테이블의 컬럼 로드
+  const loadTableColumns = async (tableName: string) => {
+    if (!tableName || tableColumnsMap[tableName]) return;
+    
+    try {
+      const response = await apiClient.get(`/table-management/tables/${tableName}/columns`);
+      console.log(`📥 테이블 ${tableName} 컬럼 응답:`, response.data);
+      
+      if (response.data.success) {
+        // data가 배열인지 확인
+        let columnData = response.data.data;
+        
+        // data.columns 형태일 수도 있음
+        if (!Array.isArray(columnData) && columnData?.columns) {
+          columnData = columnData.columns;
+        }
+        
+        // data.data 형태일 수도 있음
+        if (!Array.isArray(columnData) && columnData?.data) {
+          columnData = columnData.data;
+        }
+        
+        if (Array.isArray(columnData)) {
+          const columns = columnData.map((col: any) => {
+            const name = col.name || col.columnName;
+            const label = col.displayName || col.label || col.columnLabel || name;
+            console.log(`  - 컬럼: ${name} → "${label}"`);
+            return { name, label };
+          });
+          setTableColumnsMap((prev) => ({ ...prev, [tableName]: columns }));
+          console.log(`✅ 테이블 ${tableName} 컬럼 로드 성공:`, columns.length, "개");
+        } else {
+          console.error("❌ 컬럼 데이터가 배열이 아닙니다:", columnData);
+        }
+      }
+    } catch (error) {
+      console.error("컬럼 로드 실패:", error);
+    }
+  };
+
   // 화면 목록 가져오기 (현재 편집 중인 화면의 회사 코드 기준)
   useEffect(() => {
     const fetchScreens = async () => {
@@ -274,6 +434,7 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
             <SelectItem value="edit">편집</SelectItem>
             <SelectItem value="copy">복사 (품목코드 초기화)</SelectItem>
             <SelectItem value="navigate">페이지 이동</SelectItem>
+            <SelectItem value="openModalWithData">데이터 전달 + 모달 열기 🆕</SelectItem>
             <SelectItem value="modal">모달 열기</SelectItem>
             <SelectItem value="control">제어 흐름</SelectItem>
             <SelectItem value="view_table_history">테이블 이력 보기</SelectItem>
@@ -409,6 +570,400 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
         </div>
       )}
 
+      {/* 🆕 데이터 전달 + 모달 열기 액션 설정 */}
+      {component.componentConfig?.action?.type === "openModalWithData" && (
+        <div className="mt-4 space-y-4 rounded-lg border bg-blue-50 p-4 dark:bg-blue-950/20">
+          <h4 className="text-sm font-medium text-foreground">데이터 전달 + 모달 설정</h4>
+          <p className="text-xs text-muted-foreground">
+            TableList에서 선택된 데이터를 다음 모달로 전달합니다
+          </p>
+
+          <div>
+            <Label htmlFor="data-source-id">
+              데이터 소스 ID <span className="text-primary">(선택사항)</span>
+            </Label>
+            <Input
+              id="data-source-id"
+              placeholder="비워두면 자동으로 감지됩니다"
+              value={component.componentConfig?.action?.dataSourceId || ""}
+              onChange={(e) => {
+                onUpdateProperty("componentConfig.action.dataSourceId", e.target.value);
+              }}
+            />
+            <p className="mt-1 text-xs text-primary font-medium">
+              ✨ 비워두면 현재 화면의 TableList를 자동으로 감지합니다
+            </p>
+            <p className="mt-1 text-xs text-muted-foreground">
+              • 자동 감지: 현재 화면의 TableList 선택 데이터<br/>
+              • 누적 전달: 이전 모달의 모든 데이터도 자동으로 함께 전달<br/>
+              • 다음 화면에서 tableName으로 바로 사용 가능<br/>
+              • 수동 설정: 필요시 직접 테이블명 입력 (예: item_info)
+            </p>
+          </div>
+
+          {/* 🆕 블록 기반 제목 빌더 */}
+          <div className="space-y-2">
+            <div className="flex items-center justify-between">
+              <Label>모달 제목 구성</Label>
+              <div className="flex gap-1">
+                <Button
+                  type="button"
+                  variant="outline"
+                  size="sm"
+                  onClick={addTextBlock}
+                  className="h-6 text-xs"
+                >
+                  <Type className="mr-1 h-3 w-3" />
+                  텍스트 추가
+                </Button>
+                <Button
+                  type="button"
+                  variant="outline"
+                  size="sm"
+                  onClick={addFieldBlock}
+                  className="h-6 text-xs"
+                >
+                  <Database className="mr-1 h-3 w-3" />
+                  필드 추가
+                </Button>
+              </div>
+            </div>
+
+            {/* 블록 목록 */}
+            <div className="space-y-2">
+              {titleBlocks.length === 0 ? (
+                <div className="text-center py-4 text-xs text-muted-foreground border-2 border-dashed rounded">
+                  텍스트나 필드를 추가하여 제목을 구성하세요
+                </div>
+              ) : (
+                titleBlocks.map((block, index) => (
+                  <Card key={block.id} className="p-2">
+                    <div className="flex items-start gap-2">
+                      {/* 순서 변경 버튼 */}
+                      <div className="flex flex-col gap-0.5">
+                        <Button
+                          type="button"
+                          variant="ghost"
+                          size="sm"
+                          onClick={() => moveBlockUp(block.id)}
+                          disabled={index === 0}
+                          className="h-5 w-5 p-0"
+                        >
+                          <ChevronUp className="h-3 w-3" />
+                        </Button>
+                        <Button
+                          type="button"
+                          variant="ghost"
+                          size="sm"
+                          onClick={() => moveBlockDown(block.id)}
+                          disabled={index === titleBlocks.length - 1}
+                          className="h-5 w-5 p-0"
+                        >
+                          <ChevronDown className="h-3 w-3" />
+                        </Button>
+                      </div>
+
+                      {/* 블록 타입 표시 */}
+                      <div className="flex-shrink-0 mt-1">
+                        {block.type === "text" ? (
+                          <Type className="h-4 w-4 text-blue-500" />
+                        ) : (
+                          <Database className="h-4 w-4 text-green-500" />
+                        )}
+                      </div>
+
+                      {/* 블록 설정 */}
+                      <div className="flex-1 space-y-2">
+                        {block.type === "text" ? (
+                          // 텍스트 블록
+                          <Input
+                            placeholder="텍스트 입력 (예: 품목 상세정보 - )"
+                            value={block.value}
+                            onChange={(e) => updateBlock(block.id, { value: e.target.value })}
+                            className="h-7 text-xs"
+                          />
+                        ) : (
+                          // 필드 블록
+                          <>
+                            {/* 테이블 선택 - Combobox */}
+                            <Popover
+                              open={blockTablePopoverOpen[block.id] || false}
+                              onOpenChange={(open) => {
+                                setBlockTablePopoverOpen((prev) => ({ ...prev, [block.id]: open }));
+                              }}
+                            >
+                              <PopoverTrigger asChild>
+                                <Button
+                                  variant="outline"
+                                  role="combobox"
+                                  className="h-7 w-full justify-between text-xs"
+                                >
+                                  {block.tableName
+                                    ? (availableTables.find((t) => t.name === block.tableName)?.label || block.tableName)
+                                    : "테이블 선택"}
+                                  <ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
+                                </Button>
+                              </PopoverTrigger>
+                              <PopoverContent className="w-full p-0" align="start">
+                                <Command shouldFilter={false}>
+                                  <CommandInput 
+                                    placeholder="테이블 검색 (라벨 또는 이름)..." 
+                                    className="h-7 text-xs"
+                                    value={blockTableSearches[block.id] || ""}
+                                    onValueChange={(value) => {
+                                      setBlockTableSearches((prev) => ({ ...prev, [block.id]: value }));
+                                    }}
+                                  />
+                                  <CommandList>
+                                    <CommandEmpty className="text-xs">테이블을 찾을 수 없습니다.</CommandEmpty>
+                                    <CommandGroup>
+                                      {availableTables
+                                        .filter((table) => {
+                                          const search = (blockTableSearches[block.id] || "").toLowerCase();
+                                          if (!search) return true;
+                                          return (
+                                            table.label.toLowerCase().includes(search) ||
+                                            table.name.toLowerCase().includes(search)
+                                          );
+                                        })
+                                        .map((table) => (
+                                          <CommandItem
+                                            key={table.name}
+                                            value={table.name}
+                                            onSelect={() => {
+                                              updateBlock(block.id, { tableName: table.name, value: "" });
+                                              loadTableColumns(table.name);
+                                              setBlockTableSearches((prev) => ({ ...prev, [block.id]: "" }));
+                                              setBlockTablePopoverOpen((prev) => ({ ...prev, [block.id]: false }));
+                                            }}
+                                            className="text-xs"
+                                          >
+                                            <Check
+                                              className={cn(
+                                                "mr-2 h-3 w-3",
+                                                block.tableName === table.name ? "opacity-100" : "opacity-0"
+                                              )}
+                                            />
+                                            <span className="font-medium">{table.label}</span>
+                                            <span className="ml-2 text-[10px] text-muted-foreground">({table.name})</span>
+                                          </CommandItem>
+                                        ))}
+                                    </CommandGroup>
+                                  </CommandList>
+                                </Command>
+                              </PopoverContent>
+                            </Popover>
+
+                            {block.tableName && (
+                              <>
+                                {/* 컬럼 선택 - Combobox (라벨명 표시) */}
+                                <Popover
+                                  open={blockColumnPopoverOpen[block.id] || false}
+                                  onOpenChange={(open) => {
+                                    setBlockColumnPopoverOpen((prev) => ({ ...prev, [block.id]: open }));
+                                  }}
+                                >
+                                  <PopoverTrigger asChild>
+                                    <Button
+                                      variant="outline"
+                                      role="combobox"
+                                      className="h-7 w-full justify-between text-xs"
+                                    >
+                                      {block.value
+                                        ? (tableColumnsMap[block.tableName]?.find((c) => c.name === block.value)?.label || block.value)
+                                        : "컬럼 선택"}
+                                      <ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
+                                    </Button>
+                                  </PopoverTrigger>
+                                  <PopoverContent className="w-full p-0" align="start">
+                                    <Command shouldFilter={false}>
+                                      <CommandInput 
+                                        placeholder="컬럼 검색 (라벨 또는 이름)..." 
+                                        className="h-7 text-xs"
+                                        value={blockColumnSearches[block.id] || ""}
+                                        onValueChange={(value) => {
+                                          setBlockColumnSearches((prev) => ({ ...prev, [block.id]: value }));
+                                        }}
+                                      />
+                                      <CommandList>
+                                        <CommandEmpty className="text-xs">컬럼을 찾을 수 없습니다.</CommandEmpty>
+                                        <CommandGroup>
+                                          {(tableColumnsMap[block.tableName] || [])
+                                            .filter((col) => {
+                                              const search = (blockColumnSearches[block.id] || "").toLowerCase();
+                                              if (!search) return true;
+                                              return (
+                                                col.label.toLowerCase().includes(search) ||
+                                                col.name.toLowerCase().includes(search)
+                                              );
+                                            })
+                                            .map((col) => (
+                                              <CommandItem
+                                                key={col.name}
+                                                value={col.name}
+                                                onSelect={() => {
+                                                  updateBlock(block.id, {
+                                                    value: col.name,
+                                                    label: col.label,
+                                                  });
+                                                  setBlockColumnSearches((prev) => ({ ...prev, [block.id]: "" }));
+                                                  setBlockColumnPopoverOpen((prev) => ({ ...prev, [block.id]: false }));
+                                                }}
+                                                className="text-xs"
+                                              >
+                                                <Check
+                                                  className={cn(
+                                                    "mr-2 h-3 w-3",
+                                                    block.value === col.name ? "opacity-100" : "opacity-0"
+                                                  )}
+                                                />
+                                                <span className="font-medium">{col.label}</span>
+                                                <span className="ml-2 text-[10px] text-muted-foreground">({col.name})</span>
+                                              </CommandItem>
+                                            ))}
+                                        </CommandGroup>
+                                      </CommandList>
+                                    </Command>
+                                  </PopoverContent>
+                                </Popover>
+
+                                <Input
+                                  placeholder="표시 라벨 (예: 품목명)"
+                                  value={block.label || ""}
+                                  onChange={(e) => updateBlock(block.id, { label: e.target.value })}
+                                  className="h-7 text-xs"
+                                />
+                              </>
+                            )}
+                          </>
+                        )}
+                      </div>
+
+                      {/* 삭제 버튼 */}
+                      <Button
+                        type="button"
+                        variant="ghost"
+                        size="sm"
+                        onClick={() => removeBlock(block.id)}
+                        className="h-7 w-7 p-0 text-red-500"
+                      >
+                        <X className="h-4 w-4" />
+                      </Button>
+                    </div>
+                  </Card>
+                ))
+              )}
+            </div>
+
+            {/* 미리보기 */}
+            {titleBlocks.length > 0 && (
+              <div className="mt-2 p-2 bg-muted rounded text-xs">
+                <span className="text-muted-foreground">미리보기: </span>
+                <span className="font-medium">{generateTitlePreview()}</span>
+              </div>
+            )}
+
+            <p className="text-[10px] text-muted-foreground">
+              • 텍스트: 고정 텍스트 입력 (예: "품목 상세정보 - ")<br/>
+              • 필드: 이전 화면 데이터로 자동 채워짐 (예: 품목명, 규격)<br/>
+              • 순서 변경: ↑↓ 버튼으로 자유롭게 배치<br/>
+              • 데이터가 없으면 "표시 라벨"이 대신 표시됩니다
+            </p>
+          </div>
+
+          <div>
+            <Label htmlFor="modal-size-with-data">모달 크기</Label>
+            <Select
+              value={component.componentConfig?.action?.modalSize || "lg"}
+              onValueChange={(value) => {
+                onUpdateProperty("componentConfig.action.modalSize", value);
+              }}
+            >
+              <SelectTrigger>
+                <SelectValue placeholder="모달 크기 선택" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="sm">작음 (Small)</SelectItem>
+                <SelectItem value="md">보통 (Medium)</SelectItem>
+                <SelectItem value="lg">큼 (Large) - 권장</SelectItem>
+                <SelectItem value="xl">매우 큼 (Extra Large)</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+
+          <div>
+            <Label htmlFor="target-screen-with-data">대상 화면 선택</Label>
+            <Popover open={modalScreenOpen} onOpenChange={setModalScreenOpen}>
+              <PopoverTrigger asChild>
+                <Button
+                  variant="outline"
+                  role="combobox"
+                  aria-expanded={modalScreenOpen}
+                  className="h-6 w-full justify-between px-2 py-0"
+                  style={{ fontSize: "12px" }}
+                  disabled={screensLoading}
+                >
+                  {config.action?.targetScreenId
+                    ? screens.find((screen) => screen.id === parseInt(config.action?.targetScreenId))?.name ||
+                      "화면을 선택하세요..."
+                    : "화면을 선택하세요..."}
+                  <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                </Button>
+              </PopoverTrigger>
+              <PopoverContent className="p-0" align="start" style={{ width: "var(--radix-popover-trigger-width)" }}>
+                <div className="flex flex-col">
+                  <div className="flex items-center border-b px-3 py-2">
+                    <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+                    <Input
+                      placeholder="화면 검색..."
+                      value={modalSearchTerm}
+                      onChange={(e) => setModalSearchTerm(e.target.value)}
+                      className="border-0 p-0 focus-visible:ring-0"
+                    />
+                  </div>
+                  <div className="max-h-[200px] overflow-auto">
+                    {(() => {
+                      const filteredScreens = filterScreens(modalSearchTerm);
+                      if (screensLoading) {
+                        return <div className="p-3 text-sm text-muted-foreground">화면 목록을 불러오는 중...</div>;
+                      }
+                      if (filteredScreens.length === 0) {
+                        return <div className="p-3 text-sm text-muted-foreground">검색 결과가 없습니다.</div>;
+                      }
+                      return filteredScreens.map((screen, index) => (
+                        <div
+                          key={`modal-data-screen-${screen.id}-${index}`}
+                          className="flex cursor-pointer items-center px-3 py-2 hover:bg-muted"
+                          onClick={() => {
+                            onUpdateProperty("componentConfig.action.targetScreenId", screen.id);
+                            setModalScreenOpen(false);
+                            setModalSearchTerm("");
+                          }}
+                        >
+                          <Check
+                            className={cn(
+                              "mr-2 h-4 w-4",
+                              parseInt(config.action?.targetScreenId) === screen.id ? "opacity-100" : "opacity-0",
+                            )}
+                          />
+                          <div className="flex flex-col">
+                            <span className="font-medium">{screen.name}</span>
+                            {screen.description && <span className="text-xs text-muted-foreground">{screen.description}</span>}
+                          </div>
+                        </div>
+                      ));
+                    })()}
+                  </div>
+                </div>
+              </PopoverContent>
+            </Popover>
+            <p className="mt-1 text-xs text-muted-foreground">
+              SelectedItemsDetailInput 컴포넌트가 있는 화면을 선택하세요
+            </p>
+          </div>
+        </div>
+      )}
+
       {/* 수정 액션 설정 */}
       {(component.componentConfig?.action?.type || "save") === "edit" && (
         <div className="mt-4 space-y-4 rounded-lg border bg-success/10 p-4">
diff --git a/frontend/components/screen/config-panels/DataFilterConfigPanel.tsx b/frontend/components/screen/config-panels/DataFilterConfigPanel.tsx
index f3fed8bf..724c2453 100644
--- a/frontend/components/screen/config-panels/DataFilterConfigPanel.tsx
+++ b/frontend/components/screen/config-panels/DataFilterConfigPanel.tsx
@@ -186,75 +186,93 @@ export function DataFilterConfigPanel({
                   </Button>
                 </div>
 
-                {/* 컬럼 선택 */}
-                <div>
-                  <Label className="text-xs">컬럼</Label>
-                  <Select
-                    value={filter.columnName}
-                    onValueChange={(value) => {
-                      const column = columns.find((col) => col.columnName === value);
-                      
-                      console.log("🔍 컬럼 선택:", {
-                        columnName: value,
-                        input_type: column?.input_type,
-                        column,
-                      });
-                      
-                      // 컬럼 타입에 따라 valueType 자동 설정
-                      let valueType: "static" | "category" | "code" = "static";
-                      if (column?.input_type === "category") {
-                        valueType = "category";
-                        console.log("📦 카테고리 컬럼 감지, 값 로딩 시작:", value);
-                        loadCategoryValues(value); // 카테고리 값 로드
-                      } else if (column?.input_type === "code") {
-                        valueType = "code";
-                      }
-                      
-                      // 한 번에 모든 변경사항 적용
-                      const newConfig = {
-                        ...localConfig,
-                        filters: localConfig.filters.map((f) =>
-                          f.id === filter.id 
-                            ? { ...f, columnName: value, valueType, value: "" } 
-                            : f
-                        ),
-                      };
-                      
-                      console.log("✅ 필터 설정 업데이트:", {
-                        filterId: filter.id,
-                        columnName: value,
-                        valueType,
-                        newConfig,
-                      });
-                      
-                      setLocalConfig(newConfig);
-                      onConfigChange(newConfig);
-                    }}
-                  >
-                    <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm">
-                      <SelectValue placeholder="컬럼 선택" />
-                    </SelectTrigger>
-                    <SelectContent>
-                      {columns.map((col) => (
-                        <SelectItem key={col.columnName} value={col.columnName}>
-                          {col.columnLabel || col.columnName}
-                          {(col.input_type === "category" || col.input_type === "code") && (
-                            <span className="ml-2 text-xs text-muted-foreground">
-                              ({col.input_type})
-                            </span>
-                          )}
-                        </SelectItem>
-                      ))}
-                    </SelectContent>
-                  </Select>
-                </div>
+                {/* 컬럼 선택 (날짜 범위 포함이 아닐 때만 표시) */}
+                {filter.operator !== "date_range_contains" && (
+                  <div>
+                    <Label className="text-xs">컬럼</Label>
+                    <Select
+                      value={filter.columnName}
+                      onValueChange={(value) => {
+                        const column = columns.find((col) => col.columnName === value);
+                        
+                        console.log("🔍 컬럼 선택:", {
+                          columnName: value,
+                          input_type: column?.input_type,
+                          column,
+                        });
+                        
+                        // 컬럼 타입에 따라 valueType 자동 설정
+                        let valueType: "static" | "category" | "code" = "static";
+                        if (column?.input_type === "category") {
+                          valueType = "category";
+                          console.log("📦 카테고리 컬럼 감지, 값 로딩 시작:", value);
+                          loadCategoryValues(value); // 카테고리 값 로드
+                        } else if (column?.input_type === "code") {
+                          valueType = "code";
+                        }
+                        
+                        // 한 번에 모든 변경사항 적용
+                        const newConfig = {
+                          ...localConfig,
+                          filters: localConfig.filters.map((f) =>
+                            f.id === filter.id 
+                              ? { ...f, columnName: value, valueType, value: "" } 
+                              : f
+                          ),
+                        };
+                        
+                        console.log("✅ 필터 설정 업데이트:", {
+                          filterId: filter.id,
+                          columnName: value,
+                          valueType,
+                          newConfig,
+                        });
+                        
+                        setLocalConfig(newConfig);
+                        onConfigChange(newConfig);
+                      }}
+                    >
+                      <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm">
+                        <SelectValue placeholder="컬럼 선택" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {columns.map((col) => (
+                          <SelectItem key={col.columnName} value={col.columnName}>
+                            {col.columnLabel || col.columnName}
+                            {(col.input_type === "category" || col.input_type === "code") && (
+                              <span className="ml-2 text-xs text-muted-foreground">
+                                ({col.input_type})
+                              </span>
+                            )}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                )}
 
                 {/* 연산자 선택 */}
                 <div>
                   <Label className="text-xs">연산자</Label>
                   <Select
                     value={filter.operator}
-                    onValueChange={(value: any) => handleFilterChange(filter.id, "operator", value)}
+                    onValueChange={(value: any) => {
+                      // date_range_contains 선택 시 한 번에 모든 변경사항 적용
+                      if (value === "date_range_contains") {
+                        const newConfig = {
+                          ...localConfig,
+                          filters: localConfig.filters.map((f) =>
+                            f.id === filter.id
+                              ? { ...f, operator: value, valueType: "dynamic", value: "TODAY" }
+                              : f
+                          ),
+                        };
+                        setLocalConfig(newConfig);
+                        onConfigChange(newConfig);
+                      } else {
+                        handleFilterChange(filter.id, "operator", value);
+                      }
+                    }}
                   >
                     <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm">
                       <SelectValue />
@@ -262,6 +280,11 @@ export function DataFilterConfigPanel({
                     <SelectContent>
                       <SelectItem value="equals">같음 (=)</SelectItem>
                       <SelectItem value="not_equals">같지 않음 (≠)</SelectItem>
+                      <SelectItem value="greater_than">크다 (&gt;)</SelectItem>
+                      <SelectItem value="less_than">작다 (&lt;)</SelectItem>
+                      <SelectItem value="greater_than_or_equal">크거나 같다 (≥)</SelectItem>
+                      <SelectItem value="less_than_or_equal">작거나 같다 (≤)</SelectItem>
+                      <SelectItem value="between">사이 (BETWEEN)</SelectItem>
                       <SelectItem value="in">포함됨 (IN)</SelectItem>
                       <SelectItem value="not_in">포함되지 않음 (NOT IN)</SelectItem>
                       <SelectItem value="contains">포함 (LIKE %value%)</SelectItem>
@@ -269,34 +292,138 @@ export function DataFilterConfigPanel({
                       <SelectItem value="ends_with">끝 (LIKE %value)</SelectItem>
                       <SelectItem value="is_null">NULL</SelectItem>
                       <SelectItem value="is_not_null">NOT NULL</SelectItem>
+                      <SelectItem value="date_range_contains">날짜 범위 포함 (기간 내)</SelectItem>
                     </SelectContent>
                   </Select>
                 </div>
 
-                {/* 값 타입 선택 (카테고리/코드 컬럼만) */}
-                {isCategoryOrCodeColumn(filter.columnName) && (
+                {/* 날짜 범위 포함 - 시작일/종료일 컬럼 선택 */}
+                {filter.operator === "date_range_contains" && (
+                  <>
+                    <div className="col-span-2">
+                      <p className="text-xs text-muted-foreground bg-muted/50 p-2 rounded">
+                        💡 날짜 범위 필터링 규칙:
+                        <br />• 시작일만 있고 종료일이 NULL → 시작일 이후 모든 데이터
+                        <br />• 종료일만 있고 시작일이 NULL → 종료일 이전 모든 데이터
+                        <br />• 둘 다 있으면 → 기간 내 데이터만
+                      </p>
+                    </div>
+                    <div>
+                      <Label className="text-xs">시작일 컬럼</Label>
+                      <Select
+                        value={filter.rangeConfig?.startColumn || ""}
+                        onValueChange={(value) => {
+                          const newRangeConfig = {
+                            ...filter.rangeConfig,
+                            startColumn: value,
+                            endColumn: filter.rangeConfig?.endColumn || "",
+                          };
+                          handleFilterChange(filter.id, "rangeConfig", newRangeConfig);
+                        }}
+                      >
+                        <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm">
+                          <SelectValue placeholder="시작일 컬럼 선택" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {columns.filter(col => 
+                            col.dataType?.toLowerCase().includes('date') || 
+                            col.dataType?.toLowerCase().includes('time')
+                          ).map((col) => (
+                            <SelectItem key={col.columnName} value={col.columnName}>
+                              {col.columnLabel || col.columnName}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    </div>
+                    <div>
+                      <Label className="text-xs">종료일 컬럼</Label>
+                      <Select
+                        value={filter.rangeConfig?.endColumn || ""}
+                        onValueChange={(value) => {
+                          const newRangeConfig = {
+                            ...filter.rangeConfig,
+                            startColumn: filter.rangeConfig?.startColumn || "",
+                            endColumn: value,
+                          };
+                          handleFilterChange(filter.id, "rangeConfig", newRangeConfig);
+                        }}
+                      >
+                        <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm">
+                          <SelectValue placeholder="종료일 컬럼 선택" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {columns.filter(col => 
+                            col.dataType?.toLowerCase().includes('date') || 
+                            col.dataType?.toLowerCase().includes('time')
+                          ).map((col) => (
+                            <SelectItem key={col.columnName} value={col.columnName}>
+                              {col.columnLabel || col.columnName}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    </div>
+                  </>
+                )}
+
+                {/* 값 타입 선택 (카테고리/코드 컬럼 또는 date_range_contains) */}
+                {(isCategoryOrCodeColumn(filter.columnName) || filter.operator === "date_range_contains") && (
                   <div>
                     <Label className="text-xs">값 타입</Label>
                     <Select
                       value={filter.valueType}
-                      onValueChange={(value: any) =>
-                        handleFilterChange(filter.id, "valueType", value)
-                      }
+                      onValueChange={(value: any) => {
+                        // dynamic 선택 시 한 번에 valueType과 value를 설정
+                        if (value === "dynamic" && filter.operator === "date_range_contains") {
+                          const newConfig = {
+                            ...localConfig,
+                            filters: localConfig.filters.map((f) =>
+                              f.id === filter.id
+                                ? { ...f, valueType: value, value: "TODAY" }
+                                : f
+                            ),
+                          };
+                          setLocalConfig(newConfig);
+                          onConfigChange(newConfig);
+                        } else {
+                          // static이나 다른 타입은 value를 빈 문자열로 초기화
+                          const newConfig = {
+                            ...localConfig,
+                            filters: localConfig.filters.map((f) =>
+                              f.id === filter.id
+                                ? { ...f, valueType: value, value: "" }
+                                : f
+                            ),
+                          };
+                          setLocalConfig(newConfig);
+                          onConfigChange(newConfig);
+                        }
+                      }}
                     >
                       <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm">
                         <SelectValue />
                       </SelectTrigger>
                       <SelectContent>
                         <SelectItem value="static">직접 입력</SelectItem>
-                        <SelectItem value="category">카테고리 선택</SelectItem>
-                        <SelectItem value="code">코드 선택</SelectItem>
+                        {filter.operator === "date_range_contains" && (
+                          <SelectItem value="dynamic">동적 값 (오늘 날짜)</SelectItem>
+                        )}
+                        {isCategoryOrCodeColumn(filter.columnName) && (
+                          <>
+                            <SelectItem value="category">카테고리 선택</SelectItem>
+                            <SelectItem value="code">코드 선택</SelectItem>
+                          </>
+                        )}
                       </SelectContent>
                     </Select>
                   </div>
                 )}
 
-                {/* 값 입력 (NULL 체크 제외) */}
-                {filter.operator !== "is_null" && filter.operator !== "is_not_null" && (
+                {/* 값 입력 (NULL 체크 및 date_range_contains의 dynamic 제외) */}
+                {filter.operator !== "is_null" && 
+                 filter.operator !== "is_not_null" && 
+                 !(filter.operator === "date_range_contains" && filter.valueType === "dynamic") && (
                   <div>
                     <Label className="text-xs">값</Label>
                     {/* 카테고리 타입이고 값 타입이 category인 경우 셀렉트박스 */}
@@ -328,11 +455,22 @@ export function DataFilterConfigPanel({
                         placeholder="쉼표로 구분 (예: 값1, 값2, 값3)"
                         className="h-8 text-xs sm:h-10 sm:text-sm"
                       />
+                    ) : filter.operator === "between" ? (
+                      <Input
+                        value={Array.isArray(filter.value) ? filter.value.join(" ~ ") : filter.value}
+                        onChange={(e) => {
+                          const values = e.target.value.split("~").map((v) => v.trim());
+                          handleFilterChange(filter.id, "value", values.length === 2 ? values : [values[0] || "", ""]);
+                        }}
+                        placeholder="시작 ~ 종료 (예: 2025-01-01 ~ 2025-12-31)"
+                        className="h-8 text-xs sm:h-10 sm:text-sm"
+                      />
                     ) : (
                       <Input
+                        type={filter.operator === "date_range_contains" ? "date" : "text"}
                         value={Array.isArray(filter.value) ? filter.value[0] || "" : filter.value}
                         onChange={(e) => handleFilterChange(filter.id, "value", e.target.value)}
-                        placeholder="필터 값 입력"
+                        placeholder={filter.operator === "date_range_contains" ? "비교할 날짜 선택" : "필터 값 입력"}
                         className="h-8 text-xs sm:h-10 sm:text-sm"
                       />
                     )}
@@ -341,10 +479,23 @@ export function DataFilterConfigPanel({
                         ? "카테고리 값을 선택하세요"
                         : filter.operator === "in" || filter.operator === "not_in"
                         ? "여러 값은 쉼표(,)로 구분하세요"
+                        : filter.operator === "between"
+                        ? "시작과 종료 값을 ~로 구분하세요"
+                        : filter.operator === "date_range_contains"
+                        ? "기간 내에 포함되는지 확인할 날짜를 선택하세요"
                         : "필터링할 값을 입력하세요"}
                     </p>
                   </div>
                 )}
+                
+                {/* date_range_contains의 dynamic 타입 안내 */}
+                {filter.operator === "date_range_contains" && filter.valueType === "dynamic" && (
+                  <div className="rounded-md bg-blue-50 p-2">
+                    <p className="text-[10px] text-blue-700">
+                      ℹ️ 오늘 날짜를 기준으로 기간 내 데이터를 필터링합니다.
+                    </p>
+                  </div>
+                )}
               </div>
             ))}
           </div>
diff --git a/frontend/components/screen/panels/ComponentsPanel.tsx b/frontend/components/screen/panels/ComponentsPanel.tsx
index 9d778383..41e36412 100644
--- a/frontend/components/screen/panels/ComponentsPanel.tsx
+++ b/frontend/components/screen/panels/ComponentsPanel.tsx
@@ -63,8 +63,9 @@ export function ComponentsPanel({
       ),
       action: allComponents.filter((c) => c.category === ComponentCategory.ACTION),
       display: allComponents.filter((c) => c.category === ComponentCategory.DISPLAY),
+      data: allComponents.filter((c) => c.category === ComponentCategory.DATA), // 🆕 데이터 카테고리 추가
       layout: allComponents.filter((c) => c.category === ComponentCategory.LAYOUT),
-      utility: allComponents.filter((c) => c.category === ComponentCategory.UTILITY), // 🆕 유틸리티 카테고리 추가
+      utility: allComponents.filter((c) => c.category === ComponentCategory.UTILITY),
     };
   }, [allComponents]);
 
@@ -92,6 +93,8 @@ export function ComponentsPanel({
         return <Palette className="h-6 w-6" />;
       case "action":
         return <Zap className="h-6 w-6" />;
+      case "data":
+        return <Database className="h-6 w-6" />;
       case "layout":
         return <Layers className="h-6 w-6" />;
       case "utility":
@@ -185,7 +188,7 @@ export function ComponentsPanel({
 
       {/* 카테고리 탭 */}
       <Tabs defaultValue="input" className="flex min-h-0 flex-1 flex-col">
-        <TabsList className="mb-3 grid h-8 w-full flex-shrink-0 grid-cols-6 gap-1 p-1">
+        <TabsList className="mb-3 grid h-8 w-full flex-shrink-0 grid-cols-7 gap-1 p-1">
           <TabsTrigger
             value="tables"
             className="flex items-center justify-center gap-0.5 px-0 text-[10px]"
@@ -198,6 +201,14 @@ export function ComponentsPanel({
             <Edit3 className="h-3 w-3" />
             <span className="hidden">입력</span>
           </TabsTrigger>
+          <TabsTrigger
+            value="data"
+            className="flex items-center justify-center gap-0.5 px-0 text-[10px]"
+            title="데이터"
+          >
+            <Grid className="h-3 w-3" />
+            <span className="hidden">데이터</span>
+          </TabsTrigger>
           <TabsTrigger
             value="action"
             className="flex items-center justify-center gap-0.5 px-0 text-[10px]"
@@ -260,6 +271,13 @@ export function ComponentsPanel({
             : renderEmptyState()}
         </TabsContent>
 
+        {/* 데이터 컴포넌트 */}
+        <TabsContent value="data" className="mt-0 flex-1 space-y-2 overflow-y-auto">
+          {getFilteredComponents("data").length > 0
+            ? getFilteredComponents("data").map(renderComponentCard)
+            : renderEmptyState()}
+        </TabsContent>
+
         {/* 액션 컴포넌트 */}
         <TabsContent value="action" className="mt-0 flex-1 space-y-2 overflow-y-auto">
           {getFilteredComponents("action").length > 0
diff --git a/frontend/components/screen/panels/DetailSettingsPanel.tsx b/frontend/components/screen/panels/DetailSettingsPanel.tsx
index ff43d19d..81e1b2a9 100644
--- a/frontend/components/screen/panels/DetailSettingsPanel.tsx
+++ b/frontend/components/screen/panels/DetailSettingsPanel.tsx
@@ -36,6 +36,9 @@ import { BadgeConfigPanel } from "../config-panels/BadgeConfigPanel";
 // 동적 컴포넌트 설정 패널
 import { DynamicComponentConfigPanel } from "@/lib/utils/getComponentConfigPanel";
 
+// ComponentRegistry import (동적 ConfigPanel 가져오기용)
+import { ComponentRegistry } from "@/lib/registry/ComponentRegistry";
+
 interface DetailSettingsPanelProps {
   selectedComponent?: ComponentData;
   onUpdateProperty: (componentId: string, path: string, value: any) => void;
@@ -859,6 +862,57 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
       onUpdateProperty(selectedComponent.id, path, value);
     };
 
+    const handleConfigChange = (newConfig: any) => {
+      onUpdateProperty(selectedComponent.id, "componentConfig.config", newConfig);
+    };
+
+    // 🆕 ComponentRegistry에서 ConfigPanel 가져오기
+    const componentId = selectedComponent.componentConfig?.type || selectedComponent.componentConfig?.id;
+    if (componentId) {
+      const definition = ComponentRegistry.getComponent(componentId);
+      if (definition?.configPanel) {
+        const ConfigPanelComponent = definition.configPanel;
+        const currentConfig = selectedComponent.componentConfig || {};
+
+        console.log("✅ ConfigPanel 표시:", {
+          componentId,
+          definitionName: definition.name,
+          hasConfigPanel: !!definition.configPanel,
+          currentConfig,
+        });
+
+        // 래퍼 컴포넌트: 새 ConfigPanel 인터페이스를 기존 패턴에 맞춤
+        const ConfigPanelWrapper = () => {
+          // Section Card, Section Paper 등 신규 컴포넌트는 componentConfig 바로 아래에 설정 저장
+          const config = currentConfig || definition.defaultProps?.componentConfig || {};
+          
+          const handleConfigChange = (newConfig: any) => {
+            // componentConfig 전체를 업데이트
+            onUpdateProperty(selectedComponent.id, "componentConfig", newConfig);
+          };
+
+          return (
+            <div className="space-y-4">
+              <div className="flex items-center gap-2 border-b pb-2">
+                <Settings className="h-4 w-4 text-primary" />
+                <h3 className="text-sm font-semibold">{definition.name} 설정</h3>
+              </div>
+              <ConfigPanelComponent config={config} onChange={handleConfigChange} />
+            </div>
+          );
+        };
+
+        return <ConfigPanelWrapper key={selectedComponent.id} />;
+      } else {
+        console.warn("⚠️ ConfigPanel 없음:", {
+          componentId,
+          definitionName: definition?.name,
+          hasDefinition: !!definition,
+        });
+      }
+    }
+
+    // 기존 하드코딩된 설정 패널들 (레거시)
     switch (componentType) {
       case "button":
       case "button-primary":
@@ -904,8 +958,10 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
         return (
           <div className="flex h-full flex-col items-center justify-center p-6 text-center">
             <Settings className="mb-4 h-12 w-12 text-gray-400" />
-            <h3 className="mb-2 text-lg font-medium text-gray-900">설정 패널 준비 중</h3>
-            <p className="text-sm text-gray-500">컴포넌트 타입 "{componentType}"의 설정 패널이 준비 중입니다.</p>
+            <h3 className="mb-2 text-lg font-medium text-gray-900">⚠️ 설정 패널 없음</h3>
+            <p className="text-sm text-gray-500">
+              컴포넌트 "{componentId || componentType}"에 대한 설정 패널이 없습니다.
+            </p>
           </div>
         );
     }
diff --git a/frontend/components/screen/panels/UnifiedPropertiesPanel.tsx b/frontend/components/screen/panels/UnifiedPropertiesPanel.tsx
index 4ebccd71..6c77b4f1 100644
--- a/frontend/components/screen/panels/UnifiedPropertiesPanel.tsx
+++ b/frontend/components/screen/panels/UnifiedPropertiesPanel.tsx
@@ -8,6 +8,7 @@ import { Badge } from "@/components/ui/badge";
 import { Separator } from "@/components/ui/separator";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { Checkbox } from "@/components/ui/checkbox";
+import { Textarea } from "@/components/ui/textarea";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
 import { ChevronDown, Settings, Info, Database, Trash2, Copy, Palette, Monitor } from "lucide-react";
 import {
@@ -48,6 +49,9 @@ import { ButtonConfigPanel } from "../config-panels/ButtonConfigPanel";
 import { CardConfigPanel } from "../config-panels/CardConfigPanel";
 import { DashboardConfigPanel } from "../config-panels/DashboardConfigPanel";
 import { StatsCardConfigPanel } from "../config-panels/StatsCardConfigPanel";
+
+// ComponentRegistry import (동적 ConfigPanel 가져오기용)
+import { ComponentRegistry } from "@/lib/registry/ComponentRegistry";
 import { ProgressBarConfigPanel } from "../config-panels/ProgressBarConfigPanel";
 import { ChartConfigPanel } from "../config-panels/ChartConfigPanel";
 import { AlertConfigPanel } from "../config-panels/AlertConfigPanel";
@@ -263,12 +267,74 @@ export const UnifiedPropertiesPanel: React.FC<UnifiedPropertiesPanelProps> = ({
   const renderComponentConfigPanel = () => {
     if (!selectedComponent) return null;
 
-    const componentType = selectedComponent.componentConfig?.type || selectedComponent.type;
+    // 🎯 Section Card, Section Paper 등 신규 컴포넌트는 componentType에서 감지
+    const componentType = 
+      selectedComponent.componentType ||  // ⭐ 1순위: ScreenDesigner가 설정한 componentType (section-card 등)
+      selectedComponent.componentConfig?.type || 
+      selectedComponent.componentConfig?.id ||
+      selectedComponent.type;
 
     const handleUpdateProperty = (path: string, value: any) => {
       onUpdateProperty(selectedComponent.id, path, value);
     };
 
+    const handleConfigChange = (newConfig: any) => {
+      onUpdateProperty(selectedComponent.id, "componentConfig.config", newConfig);
+    };
+
+    // 🆕 ComponentRegistry에서 ConfigPanel 가져오기 시도
+    const componentId = 
+      selectedComponent.componentType ||  // ⭐ section-card 등
+      selectedComponent.componentConfig?.type || 
+      selectedComponent.componentConfig?.id;
+    
+    if (componentId) {
+      const definition = ComponentRegistry.getComponent(componentId);
+      
+      if (definition?.configPanel) {
+        const ConfigPanelComponent = definition.configPanel;
+        const currentConfig = selectedComponent.componentConfig || {};
+
+        console.log("✅ ConfigPanel 표시:", {
+          componentId,
+          definitionName: definition.name,
+          hasConfigPanel: !!definition.configPanel,
+          currentConfig,
+        });
+
+        // 래퍼 컴포넌트: 새 ConfigPanel 인터페이스를 기존 패턴에 맞춤
+        const ConfigPanelWrapper = () => {
+          // Section Card, Section Paper 등 신규 컴포넌트는 componentConfig 바로 아래에 설정 저장
+          const config = currentConfig || definition.defaultProps?.componentConfig || {};
+          
+          const handleConfigChange = (newConfig: any) => {
+            // componentConfig 전체를 업데이트
+            onUpdateProperty(selectedComponent.id, "componentConfig", newConfig);
+          };
+
+          return (
+            <div className="space-y-4">
+              <div className="flex items-center gap-2 border-b pb-2">
+                <Settings className="h-4 w-4 text-primary" />
+                <h3 className="text-sm font-semibold">{definition.name} 설정</h3>
+              </div>
+              <ConfigPanelComponent config={config} onChange={handleConfigChange} />
+            </div>
+          );
+        };
+
+        return <ConfigPanelWrapper key={selectedComponent.id} />;
+      } else {
+        console.warn("⚠️ ComponentRegistry에서 ConfigPanel을 찾을 수 없음 - switch case로 이동:", {
+          componentId,
+          definitionName: definition?.name,
+          hasDefinition: !!definition,
+        });
+        // ConfigPanel이 없으면 아래 switch case로 넘어감
+      }
+    }
+
+    // 기존 하드코딩된 설정 패널들 (레거시)
     switch (componentType) {
       case "button":
       case "button-primary":
@@ -311,8 +377,291 @@ export const UnifiedPropertiesPanel: React.FC<UnifiedPropertiesPanelProps> = ({
       case "badge-status":
         return <BadgeConfigPanel component={selectedComponent} onUpdateProperty={handleUpdateProperty} />;
 
+      case "section-card":
+        return (
+          <div className="space-y-4 p-4">
+            <div className="space-y-2">
+              <h3 className="text-sm font-semibold">Section Card 설정</h3>
+              <p className="text-xs text-muted-foreground">
+                제목과 테두리가 있는 명확한 그룹화 컨테이너
+              </p>
+            </div>
+
+            {/* 헤더 표시 */}
+            <div className="flex items-center space-x-2">
+              <Checkbox
+                id="showHeader"
+                checked={selectedComponent.componentConfig?.showHeader !== false}
+                onCheckedChange={(checked) => {
+                  handleUpdateProperty(selectedComponent.id, "componentConfig.showHeader", checked);
+                }}
+              />
+              <Label htmlFor="showHeader" className="text-xs cursor-pointer">
+                헤더 표시
+              </Label>
+            </div>
+
+            {/* 제목 */}
+            {selectedComponent.componentConfig?.showHeader !== false && (
+              <div className="space-y-2">
+                <Label className="text-xs">제목</Label>
+                <Input
+                  value={selectedComponent.componentConfig?.title || ""}
+                  onChange={(e) => {
+                    handleUpdateProperty(selectedComponent.id, "componentConfig.title", e.target.value);
+                  }}
+                  placeholder="섹션 제목 입력"
+                  className="h-9 text-xs"
+                />
+              </div>
+            )}
+
+            {/* 설명 */}
+            {selectedComponent.componentConfig?.showHeader !== false && (
+              <div className="space-y-2">
+                <Label className="text-xs">설명 (선택)</Label>
+                <Textarea
+                  value={selectedComponent.componentConfig?.description || ""}
+                  onChange={(e) => {
+                    handleUpdateProperty(selectedComponent.id, "componentConfig.description", e.target.value);
+                  }}
+                  placeholder="섹션 설명 입력"
+                  className="text-xs resize-none"
+                  rows={2}
+                />
+              </div>
+            )}
+
+            {/* 패딩 */}
+            <div className="space-y-2">
+              <Label className="text-xs">내부 여백</Label>
+              <Select
+                value={selectedComponent.componentConfig?.padding || "md"}
+                onValueChange={(value) => {
+                  handleUpdateProperty(selectedComponent.id, "componentConfig.padding", value);
+                }}
+              >
+                <SelectTrigger className="h-9 text-xs">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="none">없음</SelectItem>
+                  <SelectItem value="sm">작게 (12px)</SelectItem>
+                  <SelectItem value="md">중간 (24px)</SelectItem>
+                  <SelectItem value="lg">크게 (32px)</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+
+            {/* 배경색 */}
+            <div className="space-y-2">
+              <Label className="text-xs">배경색</Label>
+              <Select
+                value={selectedComponent.componentConfig?.backgroundColor || "default"}
+                onValueChange={(value) => {
+                  handleUpdateProperty(selectedComponent.id, "componentConfig.backgroundColor", value);
+                }}
+              >
+                <SelectTrigger className="h-9 text-xs">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="default">기본 (카드)</SelectItem>
+                  <SelectItem value="muted">회색</SelectItem>
+                  <SelectItem value="transparent">투명</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+
+            {/* 테두리 스타일 */}
+            <div className="space-y-2">
+              <Label className="text-xs">테두리 스타일</Label>
+              <Select
+                value={selectedComponent.componentConfig?.borderStyle || "solid"}
+                onValueChange={(value) => {
+                  handleUpdateProperty(selectedComponent.id, "componentConfig.borderStyle", value);
+                }}
+              >
+                <SelectTrigger className="h-9 text-xs">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="solid">실선</SelectItem>
+                  <SelectItem value="dashed">점선</SelectItem>
+                  <SelectItem value="none">없음</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+
+            {/* 접기/펼치기 기능 */}
+            <div className="space-y-2 pt-2 border-t">
+              <div className="flex items-center space-x-2">
+                <Checkbox
+                  id="collapsible"
+                  checked={selectedComponent.componentConfig?.collapsible || false}
+                  onCheckedChange={(checked) => {
+                    handleUpdateProperty(selectedComponent.id, "componentConfig.collapsible", checked);
+                  }}
+                />
+                <Label htmlFor="collapsible" className="text-xs cursor-pointer">
+                  접기/펼치기 가능
+                </Label>
+              </div>
+
+              {selectedComponent.componentConfig?.collapsible && (
+                <div className="flex items-center space-x-2 ml-6">
+                  <Checkbox
+                    id="defaultOpen"
+                    checked={selectedComponent.componentConfig?.defaultOpen !== false}
+                    onCheckedChange={(checked) => {
+                      handleUpdateProperty(selectedComponent.id, "componentConfig.defaultOpen", checked);
+                    }}
+                  />
+                  <Label htmlFor="defaultOpen" className="text-xs cursor-pointer">
+                    기본으로 펼치기
+                  </Label>
+                </div>
+              )}
+            </div>
+          </div>
+        );
+
+      case "section-paper":
+        return (
+          <div className="space-y-4 p-4">
+            <div className="space-y-2">
+              <h3 className="text-sm font-semibold">Section Paper 설정</h3>
+              <p className="text-xs text-muted-foreground">
+                배경색 기반의 미니멀한 그룹화 컨테이너
+              </p>
+            </div>
+
+            {/* 배경색 */}
+            <div className="space-y-2">
+              <Label className="text-xs">배경색</Label>
+              <Select
+                value={selectedComponent.componentConfig?.backgroundColor || "default"}
+                onValueChange={(value) => {
+                  handleUpdateProperty(selectedComponent.id, "componentConfig.backgroundColor", value);
+                }}
+              >
+                <SelectTrigger className="h-9 text-xs">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="default">기본 (연한 회색)</SelectItem>
+                  <SelectItem value="muted">회색</SelectItem>
+                  <SelectItem value="accent">강조 (연한 파랑)</SelectItem>
+                  <SelectItem value="primary">브랜드 컬러</SelectItem>
+                  <SelectItem value="custom">커스텀</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+
+            {/* 커스텀 색상 */}
+            {selectedComponent.componentConfig?.backgroundColor === "custom" && (
+              <div className="space-y-2">
+                <Label className="text-xs">커스텀 색상</Label>
+                <Input
+                  type="color"
+                  value={selectedComponent.componentConfig?.customColor || "#f0f0f0"}
+                  onChange={(e) => {
+                    handleUpdateProperty(selectedComponent.id, "componentConfig.customColor", e.target.value);
+                  }}
+                  className="h-9"
+                />
+              </div>
+            )}
+
+            {/* 패딩 */}
+            <div className="space-y-2">
+              <Label className="text-xs">내부 여백</Label>
+              <Select
+                value={selectedComponent.componentConfig?.padding || "md"}
+                onValueChange={(value) => {
+                  handleUpdateProperty(selectedComponent.id, "componentConfig.padding", value);
+                }}
+              >
+                <SelectTrigger className="h-9 text-xs">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="none">없음</SelectItem>
+                  <SelectItem value="sm">작게 (12px)</SelectItem>
+                  <SelectItem value="md">중간 (16px)</SelectItem>
+                  <SelectItem value="lg">크게 (24px)</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+
+            {/* 둥근 모서리 */}
+            <div className="space-y-2">
+              <Label className="text-xs">둥근 모서리</Label>
+              <Select
+                value={selectedComponent.componentConfig?.roundedCorners || "md"}
+                onValueChange={(value) => {
+                  handleUpdateProperty(selectedComponent.id, "componentConfig.roundedCorners", value);
+                }}
+              >
+                <SelectTrigger className="h-9 text-xs">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="none">없음</SelectItem>
+                  <SelectItem value="sm">작게 (2px)</SelectItem>
+                  <SelectItem value="md">중간 (6px)</SelectItem>
+                  <SelectItem value="lg">크게 (8px)</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+
+            {/* 그림자 */}
+            <div className="space-y-2">
+              <Label className="text-xs">그림자</Label>
+              <Select
+                value={selectedComponent.componentConfig?.shadow || "none"}
+                onValueChange={(value) => {
+                  handleUpdateProperty(selectedComponent.id, "componentConfig.shadow", value);
+                }}
+              >
+                <SelectTrigger className="h-9 text-xs">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="none">없음</SelectItem>
+                  <SelectItem value="sm">작게</SelectItem>
+                  <SelectItem value="md">중간</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+
+            {/* 테두리 표시 */}
+            <div className="flex items-center space-x-2">
+              <Checkbox
+                id="showBorder"
+                checked={selectedComponent.componentConfig?.showBorder || false}
+                onCheckedChange={(checked) => {
+                  handleUpdateProperty(selectedComponent.id, "componentConfig.showBorder", checked);
+                }}
+              />
+              <Label htmlFor="showBorder" className="text-xs cursor-pointer">
+                미묘한 테두리 표시
+              </Label>
+            </div>
+          </div>
+        );
+
       default:
-        return null;
+        // ConfigPanel이 없는 경우 경고 표시
+        return (
+          <div className="flex h-full flex-col items-center justify-center p-6 text-center">
+            <Settings className="mb-4 h-12 w-12 text-muted-foreground" />
+            <h3 className="mb-2 text-base font-medium">⚠️ 설정 패널 없음</h3>
+            <p className="text-sm text-muted-foreground">
+              컴포넌트 "{componentId || componentType}"에 대한 설정 패널이 없습니다.
+            </p>
+          </div>
+        );
     }
   };
 
@@ -573,11 +922,8 @@ export const UnifiedPropertiesPanel: React.FC<UnifiedPropertiesPanelProps> = ({
 
   // 상세 설정 탭 (DetailSettingsPanel의 전체 로직 통합)
   const renderDetailTab = () => {
-    console.log("🔍 [renderDetailTab] selectedComponent.type:", selectedComponent.type);
-
     // 1. DataTable 컴포넌트
     if (selectedComponent.type === "datatable") {
-      console.log("✅ [renderDetailTab] DataTable 컴포넌트");
       return (
         <DataTableConfigPanel
           component={selectedComponent as DataTableComponent}
@@ -634,7 +980,6 @@ export const UnifiedPropertiesPanel: React.FC<UnifiedPropertiesPanelProps> = ({
 
     // 5. 새로운 컴포넌트 시스템 (type: "component")
     if (selectedComponent.type === "component") {
-      console.log("✅ [renderDetailTab] Component 타입");
       const componentId = (selectedComponent as any).componentType || selectedComponent.componentConfig?.type;
       const webType = selectedComponent.componentConfig?.webType;
 
@@ -694,7 +1039,6 @@ export const UnifiedPropertiesPanel: React.FC<UnifiedPropertiesPanelProps> = ({
             tables={tables}
             menuObjid={menuObjid} // 🆕 메뉴 OBJID 전달
             onChange={(newConfig) => {
-              console.log("🔄 DynamicComponentConfigPanel onChange:", newConfig);
               // 개별 속성별로 업데이트하여 다른 속성과의 충돌 방지
               Object.entries(newConfig).forEach(([key, value]) => {
                 handleUpdate(`componentConfig.${key}`, value);
diff --git a/frontend/components/screen/templates/NumberingRuleTemplate.ts b/frontend/components/screen/templates/NumberingRuleTemplate.ts
index 1f5b2eb6..db61ad11 100644
--- a/frontend/components/screen/templates/NumberingRuleTemplate.ts
+++ b/frontend/components/screen/templates/NumberingRuleTemplate.ts
@@ -77,3 +77,4 @@ export const numberingRuleTemplate = {
 
 
 
+
diff --git a/frontend/components/table-category/CategoryValueAddDialog.tsx b/frontend/components/table-category/CategoryValueAddDialog.tsx
index ae47cf44..c486cc1d 100644
--- a/frontend/components/table-category/CategoryValueAddDialog.tsx
+++ b/frontend/components/table-category/CategoryValueAddDialog.tsx
@@ -79,14 +79,14 @@ export const CategoryValueAddDialog: React.FC<
     const valueCode = generateCode(valueLabel);
 
     onAdd({
-      tableName: "",
-      columnName: "",
+      tableName: "", // CategoryValueManager에서 오버라이드됨
+      columnName: "", // CategoryValueManager에서 오버라이드됨
       valueCode,
       valueLabel: valueLabel.trim(),
-      description: description.trim(),
-      color: color,
+      description: description.trim() || undefined, // 빈 문자열 대신 undefined
+      color: color === "none" ? undefined : color, // "none"은 undefined로
       isDefault: false,
-    });
+    } as TableCategoryValue);
 
     // 초기화
     setValueLabel("");
diff --git a/frontend/components/table-category/CategoryValueManager.tsx b/frontend/components/table-category/CategoryValueManager.tsx
index fe9ac7be..98d23bae 100644
--- a/frontend/components/table-category/CategoryValueManager.tsx
+++ b/frontend/components/table-category/CategoryValueManager.tsx
@@ -184,11 +184,18 @@ export const CategoryValueManager: React.FC<CategoryValueManagerProps> = ({
           title: "성공",
           description: "카테고리 값이 삭제되었습니다",
         });
+      } else {
+        // 백엔드에서 반환한 상세 에러 메시지 표시
+        toast({
+          title: "삭제 불가",
+          description: response.error || response.message || "카테고리 값 삭제에 실패했습니다",
+          variant: "destructive",
+        });
       }
     } catch (error) {
       toast({
         title: "오류",
-        description: "카테고리 값 삭제에 실패했습니다",
+        description: "카테고리 값 삭제 중 오류가 발생했습니다",
         variant: "destructive",
       });
     }
diff --git a/frontend/components/ui/resizable-dialog.tsx b/frontend/components/ui/resizable-dialog.tsx
index 9e953784..bf50a1a1 100644
--- a/frontend/components/ui/resizable-dialog.tsx
+++ b/frontend/components/ui/resizable-dialog.tsx
@@ -377,8 +377,8 @@ const ResizableDialogContent = React.forwardRef<
         >
           <div 
             ref={contentRef} 
-            className="h-full w-full"
-            style={{ display: 'block', overflow: 'hidden' }}
+            className="h-full w-full relative"
+            style={{ display: 'block', overflow: 'hidden', pointerEvents: 'auto', zIndex: 1 }}
           >
             {children}
           </div>
@@ -387,45 +387,56 @@ const ResizableDialogContent = React.forwardRef<
           {/* 오른쪽 */}
           <div
             className="absolute right-0 top-0 h-full w-2 cursor-ew-resize hover:bg-primary/20 transition-colors"
+            style={{ pointerEvents: 'auto', zIndex: 10 }}
             onMouseDown={startResize("e")}
           />
           {/* 아래 */}
           <div
             className="absolute bottom-0 left-0 w-full h-2 cursor-ns-resize hover:bg-primary/20 transition-colors"
+            style={{ pointerEvents: 'auto', zIndex: 10 }}
             onMouseDown={startResize("s")}
           />
           {/* 오른쪽 아래 */}
           <div
             className="absolute right-0 bottom-0 w-4 h-4 cursor-nwse-resize hover:bg-primary/30 transition-colors"
+            style={{ pointerEvents: 'auto', zIndex: 10 }}
             onMouseDown={startResize("se")}
           />
           {/* 왼쪽 */}
           <div
             className="absolute left-0 top-0 h-full w-2 cursor-ew-resize hover:bg-primary/20 transition-colors"
+            style={{ pointerEvents: 'auto', zIndex: 10 }}
             onMouseDown={startResize("w")}
           />
           {/* 위 */}
           <div
             className="absolute top-0 left-0 w-full h-2 cursor-ns-resize hover:bg-primary/20 transition-colors"
+            style={{ pointerEvents: 'auto', zIndex: 10 }}
             onMouseDown={startResize("n")}
           />
           {/* 왼쪽 아래 */}
           <div
             className="absolute left-0 bottom-0 w-4 h-4 cursor-nesw-resize hover:bg-primary/30 transition-colors"
+            style={{ pointerEvents: 'auto', zIndex: 10 }}
             onMouseDown={startResize("sw")}
           />
           {/* 오른쪽 위 */}
           <div
             className="absolute right-0 top-0 w-4 h-4 cursor-nesw-resize hover:bg-primary/30 transition-colors"
+            style={{ pointerEvents: 'auto', zIndex: 10 }}
             onMouseDown={startResize("ne")}
           />
           {/* 왼쪽 위 */}
           <div
             className="absolute left-0 top-0 w-4 h-4 cursor-nwse-resize hover:bg-primary/30 transition-colors"
+            style={{ pointerEvents: 'auto', zIndex: 10 }}
             onMouseDown={startResize("nw")}
           />
 
-          <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+          <DialogPrimitive.Close 
+            className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"
+            style={{ zIndex: 20 }}
+          >
             <X className="h-4 w-4" />
             <span className="sr-only">Close</span>
           </DialogPrimitive.Close>
diff --git a/frontend/components/webtypes/RepeaterInput.tsx b/frontend/components/webtypes/RepeaterInput.tsx
index 5560e2a3..f81e8c9c 100644
--- a/frontend/components/webtypes/RepeaterInput.tsx
+++ b/frontend/components/webtypes/RepeaterInput.tsx
@@ -7,6 +7,7 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { Separator } from "@/components/ui/separator";
 import { Plus, X, GripVertical, ChevronDown, ChevronUp } from "lucide-react";
 import { RepeaterFieldGroupConfig, RepeaterData, RepeaterItemData, RepeaterFieldDefinition } from "@/types/repeater";
 import { cn } from "@/lib/utils";
diff --git a/frontend/lib/api/data.ts b/frontend/lib/api/data.ts
index b3c023bf..8436dcf4 100644
--- a/frontend/lib/api/data.ts
+++ b/frontend/lib/api/data.ts
@@ -42,10 +42,49 @@ export const dataApi = {
    * 특정 레코드 상세 조회
    * @param tableName 테이블명
    * @param id 레코드 ID
+   * @param enableEntityJoin Entity 조인 활성화 여부 (기본값: false)
+   * @param groupByColumns 그룹핑 기준 컬럼들 (배열)
    */
-  getRecordDetail: async (tableName: string, id: string | number): Promise<any> => {
-    const response = await apiClient.get(`/data/${tableName}/${id}`);
-    return response.data?.data || response.data;
+  getRecordDetail: async (
+    tableName: string, 
+    id: string | number, 
+    enableEntityJoin: boolean = false,
+    groupByColumns: string[] = []
+  ): Promise<{ success: boolean; data?: any; error?: string }> => {
+    try {
+      const params: any = {};
+      if (enableEntityJoin) {
+        params.enableEntityJoin = true;
+      }
+      if (groupByColumns.length > 0) {
+        params.groupByColumns = JSON.stringify(groupByColumns);
+      }
+      
+      console.log("🌐 [dataApi.getRecordDetail] API 호출:", {
+        tableName,
+        id,
+        enableEntityJoin,
+        groupByColumns,
+        params,
+        url: `/data/${tableName}/${id}`,
+      });
+      
+      const response = await apiClient.get(`/data/${tableName}/${id}`, { params });
+      
+      console.log("📥 [dataApi.getRecordDetail] API 응답:", {
+        success: response.data?.success,
+        dataType: Array.isArray(response.data?.data) ? "배열" : "객체",
+        dataCount: Array.isArray(response.data?.data) ? response.data.data.length : 1,
+      });
+      
+      return response.data; // { success: true, data: ... } 형식 그대로 반환
+    } catch (error: any) {
+      console.error("❌ [dataApi.getRecordDetail] API 오류:", error);
+      return {
+        success: false,
+        error: error.response?.data?.message || error.message || "레코드 조회 실패",
+      };
+    }
   },
 
   /**
@@ -55,6 +94,9 @@ export const dataApi = {
    * @param leftColumn 좌측 컬럼명
    * @param rightColumn 우측 컬럼명 (외래키)
    * @param leftValue 좌측 값 (필터링)
+   * @param dataFilter 데이터 필터
+   * @param enableEntityJoin Entity 조인 활성화
+   * @param displayColumns 표시할 컬럼 목록 (tableName.columnName 형식 포함)
    */
   getJoinedData: async (
     leftTable: string,
@@ -62,7 +104,15 @@ export const dataApi = {
     leftColumn: string,
     rightColumn: string,
     leftValue?: any,
-    dataFilter?: any, // 🆕 데이터 필터
+    dataFilter?: any,
+    enableEntityJoin?: boolean,
+    displayColumns?: Array<{ name: string; label?: string }>,
+    deduplication?: { // 🆕 중복 제거 설정
+      enabled: boolean;
+      groupByColumn: string;
+      keepStrategy: "latest" | "earliest" | "base_price" | "current_date";
+      sortColumn?: string;
+    },
   ): Promise<any[]> => {
     const response = await apiClient.get(`/data/join`, {
       params: {
@@ -71,7 +121,10 @@ export const dataApi = {
         leftColumn,
         rightColumn,
         leftValue,
-        dataFilter: dataFilter ? JSON.stringify(dataFilter) : undefined, // 🆕 데이터 필터 전달
+        dataFilter: dataFilter ? JSON.stringify(dataFilter) : undefined,
+        enableEntityJoin: enableEntityJoin ?? true,
+        displayColumns: displayColumns ? JSON.stringify(displayColumns) : undefined, // 🆕 표시 컬럼 전달
+        deduplication: deduplication ? JSON.stringify(deduplication) : undefined, // 🆕 중복 제거 설정 전달
       },
     });
     const raw = response.data || {};
@@ -115,4 +168,98 @@ export const dataApi = {
     const response = await apiClient.delete(`/data/${tableName}/${id}`);
     return response.data; // success, message 포함된 전체 응답 반환
   },
+
+  /**
+   * 조건에 맞는 모든 레코드 삭제 (그룹 삭제)
+   * @param tableName 테이블명
+   * @param filterConditions 삭제 조건 (예: { customer_id: "CUST-0002", item_id: "SLI-2025-0002" })
+   */
+  deleteGroupRecords: async (
+    tableName: string,
+    filterConditions: Record<string, any>
+  ): Promise<{ success: boolean; deleted?: number; message?: string; error?: string }> => {
+    try {
+      console.log(`🗑️ [dataApi] 그룹 삭제 요청:`, { tableName, filterConditions });
+      
+      const response = await apiClient.post(`/data/${tableName}/delete-group`, filterConditions);
+      
+      console.log(`✅ [dataApi] 그룹 삭제 성공:`, response.data);
+      return response.data;
+    } catch (error: any) {
+      console.error(`❌ [dataApi] 그룹 삭제 실패:`, error);
+      return {
+        success: false,
+        error: error.response?.data?.message || error.message || "그룹 삭제 실패",
+      };
+    }
+  },
+
+  /**
+   * 특정 레코드 상세 조회
+   * @param tableName 테이블명
+   * @param id 레코드 ID
+   * @param enableEntityJoin Entity 조인 활성화 여부 (기본값: false)
+   */
+  getRecordDetail: async (
+    tableName: string, 
+    id: string | number, 
+    enableEntityJoin: boolean = false
+  ): Promise<{ success: boolean; data?: any; error?: string }> => {
+    try {
+      const params: any = {};
+      if (enableEntityJoin) {
+        params.enableEntityJoin = "true";
+      }
+      const response = await apiClient.get(`/data/${tableName}/${id}`, { params });
+      return response.data; // { success: true, data: ... } 형식 그대로 반환
+    } catch (error: any) {
+      return {
+        success: false,
+        error: error.response?.data?.message || error.message || "레코드 조회 실패",
+      };
+    }
+  },
+
+  /**
+   * 그룹화된 데이터 UPSERT
+   * @param tableName 테이블명
+   * @param parentKeys 부모 키 (예: { customer_id: "CUST-0002", item_id: "SLI-2025-0002" })
+   * @param records 레코드 배열
+   */
+  upsertGroupedRecords: async (
+    tableName: string,
+    parentKeys: Record<string, any>,
+    records: Array<Record<string, any>>
+  ): Promise<{ success: boolean; inserted?: number; updated?: number; deleted?: number; message?: string; error?: string }> => {
+    try {
+      console.log("📡 [dataApi.upsertGroupedRecords] 요청 데이터:", {
+        tableName,
+        tableNameType: typeof tableName,
+        tableNameValue: JSON.stringify(tableName),
+        parentKeys,
+        recordsCount: records.length,
+      });
+
+      const requestBody = {
+        tableName,
+        parentKeys,
+        records,
+      };
+      console.log("📦 [dataApi.upsertGroupedRecords] 요청 본문 (JSON):", JSON.stringify(requestBody, null, 2));
+
+      const response = await apiClient.post('/data/upsert-grouped', requestBody);
+      return response.data;
+    } catch (error: any) {
+      console.error("❌ [dataApi.upsertGroupedRecords] 에러:", {
+        status: error.response?.status,
+        statusText: error.response?.statusText,
+        data: error.response?.data,
+        message: error.message,
+      });
+      return {
+        success: false,
+        error: error.response?.data?.message || error.message || "데이터 저장 실패",
+      };
+    }
+  },
 };
diff --git a/frontend/lib/api/digitalTwin.ts b/frontend/lib/api/digitalTwin.ts
new file mode 100644
index 00000000..c20525b4
--- /dev/null
+++ b/frontend/lib/api/digitalTwin.ts
@@ -0,0 +1,283 @@
+import { apiClient } from "./client";
+import type {
+  DigitalTwinLayout,
+  DigitalTwinLayoutDetail,
+  CreateLayoutRequest,
+  UpdateLayoutRequest,
+  Warehouse,
+  Area,
+  Location,
+  MaterialData,
+  MaterialCount,
+} from "@/types/digitalTwin";
+
+// API 응답 타입
+interface ApiResponse<T> {
+  success: boolean;
+  data?: T;
+  message?: string;
+  error?: string;
+}
+
+// ========== 레이아웃 관리 API ==========
+
+// 레이아웃 목록 조회
+export const getLayouts = async (params?: {
+  externalDbConnectionId?: number;
+  warehouseKey?: string;
+}): Promise<ApiResponse<DigitalTwinLayout[]>> => {
+  try {
+    const response = await apiClient.get("/digital-twin/layouts", { params });
+    return response.data;
+  } catch (error: any) {
+    return {
+      success: false,
+      error: error.response?.data?.message || error.message,
+    };
+  }
+};
+
+// 레이아웃 상세 조회
+export const getLayoutById = async (id: number): Promise<ApiResponse<DigitalTwinLayoutDetail>> => {
+  try {
+    const response = await apiClient.get(`/digital-twin/layouts/${id}`);
+    return response.data;
+  } catch (error: any) {
+    return {
+      success: false,
+      error: error.response?.data?.message || error.message,
+    };
+  }
+};
+
+// 레이아웃 생성
+export const createLayout = async (data: CreateLayoutRequest): Promise<ApiResponse<DigitalTwinLayout>> => {
+  try {
+    const response = await apiClient.post("/digital-twin/layouts", data);
+    return response.data;
+  } catch (error: any) {
+    return {
+      success: false,
+      error: error.response?.data?.message || error.message,
+    };
+  }
+};
+
+// 레이아웃 수정
+export const updateLayout = async (id: number, data: UpdateLayoutRequest): Promise<ApiResponse<DigitalTwinLayout>> => {
+  try {
+    const response = await apiClient.put(`/digital-twin/layouts/${id}`, data);
+    return response.data;
+  } catch (error: any) {
+    return {
+      success: false,
+      error: error.response?.data?.message || error.message,
+    };
+  }
+};
+
+// 레이아웃 삭제
+export const deleteLayout = async (id: number): Promise<ApiResponse<void>> => {
+  try {
+    const response = await apiClient.delete(`/digital-twin/layouts/${id}`);
+    return response.data;
+  } catch (error: any) {
+    return {
+      success: false,
+      error: error.response?.data?.message || error.message,
+    };
+  }
+};
+
+// ========== 외부 DB 테이블 조회 API ==========
+
+export const getTables = async (connectionId: number): Promise<ApiResponse<Array<{ table_name: string }>>> => {
+  try {
+    const response = await apiClient.get(`/digital-twin/data/tables/${connectionId}`);
+    return response.data;
+  } catch (error: any) {
+    return {
+      success: false,
+      error: error.response?.data?.message || error.message,
+    };
+  }
+};
+
+export const getTablePreview = async (connectionId: number, tableName: string): Promise<ApiResponse<any[]>> => {
+  try {
+    const response = await apiClient.get(`/digital-twin/data/table-preview/${connectionId}/${tableName}`);
+    return response.data;
+  } catch (error: any) {
+    return {
+      success: false,
+      error: error.response?.data?.message || error.message,
+    };
+  }
+};
+
+// ========== 외부 DB 데이터 조회 API ==========
+
+// 창고 목록 조회
+export const getWarehouses = async (
+  externalDbConnectionId: number,
+  tableName: string,
+): Promise<ApiResponse<Warehouse[]>> => {
+  try {
+    const response = await apiClient.get("/digital-twin/data/warehouses", {
+      params: { externalDbConnectionId, tableName },
+    });
+    return response.data;
+  } catch (error: any) {
+    return {
+      success: false,
+      error: error.response?.data?.message || error.message,
+    };
+  }
+};
+
+// Area 목록 조회
+export const getAreas = async (
+  externalDbConnectionId: number,
+  tableName: string,
+  warehouseKey: string,
+): Promise<ApiResponse<Area[]>> => {
+  try {
+    const response = await apiClient.get("/digital-twin/data/areas", {
+      params: { externalDbConnectionId, tableName, warehouseKey },
+    });
+    return response.data;
+  } catch (error: any) {
+    return {
+      success: false,
+      error: error.response?.data?.message || error.message,
+    };
+  }
+};
+
+// Location 목록 조회
+export const getLocations = async (
+  externalDbConnectionId: number,
+  tableName: string,
+  areaKey: string,
+): Promise<ApiResponse<Location[]>> => {
+  try {
+    const response = await apiClient.get("/digital-twin/data/locations", {
+      params: { externalDbConnectionId, tableName, areaKey },
+    });
+    return response.data;
+  } catch (error: any) {
+    return {
+      success: false,
+      error: error.response?.data?.message || error.message,
+    };
+  }
+};
+
+// 자재 목록 조회 (특정 Location)
+export const getMaterials = async (
+  externalDbConnectionId: number,
+  materialConfig: {
+    tableName: string;
+    keyColumn: string;
+    locationKeyColumn: string;
+    layerColumn?: string;
+    locaKey: string;
+  },
+): Promise<ApiResponse<MaterialData[]>> => {
+  try {
+    const response = await apiClient.get("/digital-twin/data/materials", {
+      params: {
+        externalDbConnectionId,
+        tableName: materialConfig.tableName,
+        keyColumn: materialConfig.keyColumn,
+        locationKeyColumn: materialConfig.locationKeyColumn,
+        layerColumn: materialConfig.layerColumn,
+        locaKey: materialConfig.locaKey,
+      },
+    });
+    return response.data;
+  } catch (error: any) {
+    return {
+      success: false,
+      error: error.response?.data?.message || error.message,
+    };
+  }
+};
+
+// 자재 개수 조회 (여러 Location)
+export const getMaterialCounts = async (
+  externalDbConnectionId: number,
+  tableName: string,
+  locaKeys: string[],
+): Promise<ApiResponse<MaterialCount[]>> => {
+  try {
+    const response = await apiClient.post("/digital-twin/data/material-counts", {
+      externalDbConnectionId,
+      tableName,
+      locationKeys: locaKeys,
+    });
+    return response.data;
+  } catch (error: any) {
+    return {
+      success: false,
+      error: error.response?.data?.message || error.message,
+    };
+  }
+};
+
+// ========== 동적 계층 구조 API ==========
+
+export interface HierarchyData {
+  warehouse: any[];
+  levels: Array<{
+    level: number;
+    name: string;
+    data: any[];
+  }>;
+  materials: Array<{
+    location_key: string;
+    count: number;
+  }>;
+}
+
+// 전체 계층 데이터 조회
+export const getHierarchyData = async (
+  externalDbConnectionId: number,
+  hierarchyConfig: any,
+): Promise<ApiResponse<HierarchyData>> => {
+  try {
+    const response = await apiClient.post("/digital-twin/data/hierarchy", {
+      externalDbConnectionId,
+      hierarchyConfig: JSON.stringify(hierarchyConfig),
+    });
+    return response.data;
+  } catch (error: any) {
+    return {
+      success: false,
+      error: error.response?.data?.message || error.message,
+    };
+  }
+};
+
+// 특정 부모의 하위 데이터 조회
+export const getChildrenData = async (
+  externalDbConnectionId: number,
+  hierarchyConfig: any,
+  parentLevel: number,
+  parentKey: string,
+): Promise<ApiResponse<any[]>> => {
+  try {
+    const response = await apiClient.post("/digital-twin/data/children", {
+      externalDbConnectionId,
+      hierarchyConfig: JSON.stringify(hierarchyConfig),
+      parentLevel,
+      parentKey,
+    });
+    return response.data;
+  } catch (error: any) {
+    return {
+      success: false,
+      error: error.response?.data?.message || error.message,
+    };
+  }
+};
diff --git a/frontend/lib/api/entityJoin.ts b/frontend/lib/api/entityJoin.ts
index 4402b557..a84f3355 100644
--- a/frontend/lib/api/entityJoin.ts
+++ b/frontend/lib/api/entityJoin.ts
@@ -71,25 +71,6 @@ export const entityJoinApi = {
       dataFilter?: any; // 🆕 데이터 필터
     } = {},
   ): Promise<EntityJoinResponse> => {
-    const searchParams = new URLSearchParams();
-
-    if (params.page) searchParams.append("page", params.page.toString());
-    if (params.size) searchParams.append("size", params.size.toString());
-    if (params.sortBy) searchParams.append("sortBy", params.sortBy);
-    if (params.sortOrder) searchParams.append("sortOrder", params.sortOrder);
-    if (params.enableEntityJoin !== undefined) {
-      searchParams.append("enableEntityJoin", params.enableEntityJoin.toString());
-    }
-
-    // 검색 조건 추가
-    if (params.search) {
-      Object.entries(params.search).forEach(([key, value]) => {
-        if (value !== undefined && value !== null && value !== "") {
-          searchParams.append(key, String(value));
-        }
-      });
-    }
-
     // 🔒 멀티테넌시: company_code 자동 필터링 활성화
     const autoFilter = {
       enabled: true,
@@ -99,7 +80,11 @@ export const entityJoinApi = {
 
     const response = await apiClient.get(`/table-management/tables/${tableName}/data-with-joins`, {
       params: {
-        ...params,
+        page: params.page,
+        size: params.size,
+        sortBy: params.sortBy,
+        sortOrder: params.sortOrder,
+        enableEntityJoin: params.enableEntityJoin,
         search: params.search ? JSON.stringify(params.search) : undefined,
         additionalJoinColumns: params.additionalJoinColumns ? JSON.stringify(params.additionalJoinColumns) : undefined,
         screenEntityConfigs: params.screenEntityConfigs ? JSON.stringify(params.screenEntityConfigs) : undefined, // 🎯 화면별 엔티티 설정
diff --git a/frontend/lib/api/tableCategoryValue.ts b/frontend/lib/api/tableCategoryValue.ts
index bcaf4582..9316beb0 100644
--- a/frontend/lib/api/tableCategoryValue.ts
+++ b/frontend/lib/api/tableCategoryValue.ts
@@ -109,7 +109,10 @@ export async function deleteCategoryValue(valueId: number) {
     return response.data;
   } catch (error: any) {
     console.error("카테고리 값 삭제 실패:", error);
-    return { success: false, error: error.message };
+    
+    // 백엔드에서 반환한 에러 메시지 전달
+    const errorMessage = error.response?.data?.message || error.message;
+    return { success: false, error: errorMessage, message: errorMessage };
   }
 }
 
diff --git a/frontend/lib/registry/DynamicComponentRenderer.tsx b/frontend/lib/registry/DynamicComponentRenderer.tsx
index 1791e9b0..4c95ceb8 100644
--- a/frontend/lib/registry/DynamicComponentRenderer.tsx
+++ b/frontend/lib/registry/DynamicComponentRenderer.tsx
@@ -262,7 +262,14 @@ export const DynamicComponentRenderer: React.FC<DynamicComponentRendererProps> =
 
         // 컴포넌트의 columnName에 해당하는 formData 값 추출
         const fieldName = (component as any).columnName || component.id;
-        const currentValue = formData?.[fieldName] || "";
+        
+        // modal-repeater-table은 배열 데이터를 다루므로 빈 배열로 초기화
+        let currentValue;
+        if (componentType === "modal-repeater-table") {
+          currentValue = formData?.[fieldName] || [];
+        } else {
+          currentValue = formData?.[fieldName] || "";
+        }
 
         // onChange 핸들러 - 컴포넌트 타입에 따라 다르게 처리
         const handleChange = (value: any) => {
@@ -274,31 +281,30 @@ export const DynamicComponentRenderer: React.FC<DynamicComponentRendererProps> =
           }
 
           if (onFormDataChange) {
+            // modal-repeater-table은 배열 데이터를 다룸
+            if (componentType === "modal-repeater-table") {
+              onFormDataChange(fieldName, actualValue);
+            }
             // RepeaterInput 같은 복합 컴포넌트는 전체 데이터를 전달
-            // 단순 input 컴포넌트는 (fieldName, value) 형태로 전달받음
-            if (componentType === "repeater-field-group" || componentType === "repeater") {
-              // fieldName과 함께 전달
+            else if (componentType === "repeater-field-group" || componentType === "repeater") {
               onFormDataChange(fieldName, actualValue);
             } else {
-              // 이미 fieldName이 포함된 경우는 그대로 전달
               onFormDataChange(fieldName, actualValue);
             }
           }
         };
 
         // 렌더러 props 구성
-        // component.style에서 height 제거 (RealtimePreviewDynamic에서 size.height로 처리)
-        // 단, layout 타입 컴포넌트(split-panel-layout 등)는 height 유지
-        const isLayoutComponent = 
-          component.type === "layout" || 
-          componentType === "split-panel-layout" ||
-          componentType?.includes("layout");
-        
-        const { height: _height, ...styleWithoutHeight } = component.style || {};
-
         // 숨김 값 추출
         const hiddenValue = component.hidden || component.componentConfig?.hidden;
 
+        // size.width와 size.height를 style.width와 style.height로 변환
+        const finalStyle: React.CSSProperties = {
+          ...component.style,
+          width: component.size?.width ? `${component.size.width}px` : component.style?.width,
+          height: component.size?.height ? `${component.size.height}px` : component.style?.height,
+        };
+
         const rendererProps = {
           component,
           isSelected,
@@ -307,9 +313,11 @@ export const DynamicComponentRenderer: React.FC<DynamicComponentRendererProps> =
           onDragEnd,
           size: component.size || newComponent.defaultSize,
           position: component.position,
-          style: isLayoutComponent ? component.style : styleWithoutHeight, // 레이아웃은 height 유지
+          style: finalStyle, // size를 포함한 최종 style
           config: component.componentConfig,
           componentConfig: component.componentConfig,
+          // componentConfig의 모든 속성을 props로 spread (tableName, displayField 등)
+          ...(component.componentConfig || {}),
           value: currentValue, // formData에서 추출한 현재 값 전달
           // 새로운 기능들 전달
           autoGeneration: component.autoGeneration || component.componentConfig?.autoGeneration,
diff --git a/frontend/lib/registry/components/autocomplete-search-input/AutocompleteSearchInputComponent.tsx b/frontend/lib/registry/components/autocomplete-search-input/AutocompleteSearchInputComponent.tsx
new file mode 100644
index 00000000..42baabdc
--- /dev/null
+++ b/frontend/lib/registry/components/autocomplete-search-input/AutocompleteSearchInputComponent.tsx
@@ -0,0 +1,225 @@
+"use client";
+
+import React, { useState, useEffect, useRef } from "react";
+import { Input } from "@/components/ui/input";
+import { X, Loader2, ChevronDown } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { useEntitySearch } from "../entity-search-input/useEntitySearch";
+import { EntitySearchResult } from "../entity-search-input/types";
+import { cn } from "@/lib/utils";
+import { AutocompleteSearchInputConfig, FieldMapping } from "./types";
+
+interface AutocompleteSearchInputProps extends Partial<AutocompleteSearchInputConfig> {
+  config?: AutocompleteSearchInputConfig;
+  filterCondition?: Record<string, any>;
+  disabled?: boolean;
+  value?: any;
+  onChange?: (value: any, fullData?: any) => void;
+  className?: string;
+}
+
+export function AutocompleteSearchInputComponent({
+  config,
+  tableName: propTableName,
+  displayField: propDisplayField,
+  valueField: propValueField,
+  searchFields: propSearchFields,
+  filterCondition = {},
+  placeholder: propPlaceholder,
+  disabled = false,
+  value,
+  onChange,
+  showAdditionalInfo: propShowAdditionalInfo,
+  additionalFields: propAdditionalFields,
+  className,
+}: AutocompleteSearchInputProps) {
+  // config prop 우선, 없으면 개별 prop 사용
+  const tableName = config?.tableName || propTableName || "";
+  const displayField = config?.displayField || propDisplayField || "";
+  const valueField = config?.valueField || propValueField || "";
+  const searchFields = config?.searchFields || propSearchFields || [displayField];
+  const placeholder = config?.placeholder || propPlaceholder || "검색...";
+  const showAdditionalInfo = config?.showAdditionalInfo ?? propShowAdditionalInfo ?? false;
+  const additionalFields = config?.additionalFields || propAdditionalFields || [];
+  const [inputValue, setInputValue] = useState("");
+  const [isOpen, setIsOpen] = useState(false);
+  const [selectedData, setSelectedData] = useState<EntitySearchResult | null>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const { searchText, setSearchText, results, loading, clearSearch } = useEntitySearch({
+    tableName,
+    searchFields,
+    filterCondition,
+  });
+
+  // value가 변경되면 표시값 업데이트
+  useEffect(() => {
+    if (value && selectedData) {
+      setInputValue(selectedData[displayField] || "");
+    } else if (!value) {
+      setInputValue("");
+      setSelectedData(null);
+    }
+  }, [value, displayField]);
+
+  // 외부 클릭 감지
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
+        setIsOpen(false);
+      }
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const newValue = e.target.value;
+    setInputValue(newValue);
+    setSearchText(newValue);
+    setIsOpen(true);
+  };
+
+  // 필드 자동 매핑 처리
+  const applyFieldMappings = (item: EntitySearchResult) => {
+    if (!config?.enableFieldMapping || !config?.fieldMappings) {
+      return;
+    }
+
+    config.fieldMappings.forEach((mapping: FieldMapping) => {
+      if (!mapping.sourceField || !mapping.targetField) {
+        return;
+      }
+
+      const value = item[mapping.sourceField];
+      
+      // DOM에서 타겟 필드 찾기 (id로 검색)
+      const targetElement = document.getElementById(mapping.targetField);
+      
+      if (targetElement) {
+        // input, textarea 등의 값 설정
+        if (
+          targetElement instanceof HTMLInputElement ||
+          targetElement instanceof HTMLTextAreaElement
+        ) {
+          targetElement.value = value?.toString() || "";
+          
+          // React의 change 이벤트 트리거
+          const event = new Event("input", { bubbles: true });
+          targetElement.dispatchEvent(event);
+        }
+      }
+    });
+  };
+
+  const handleSelect = (item: EntitySearchResult) => {
+    setSelectedData(item);
+    setInputValue(item[displayField] || "");
+    onChange?.(item[valueField], item);
+    
+    // 필드 자동 매핑 실행
+    applyFieldMappings(item);
+    
+    setIsOpen(false);
+  };
+
+  const handleClear = () => {
+    setInputValue("");
+    setSelectedData(null);
+    onChange?.(null, null);
+    setIsOpen(false);
+  };
+
+  const handleInputFocus = () => {
+    // 포커스 시 항상 검색 실행 (빈 값이면 전체 목록)
+    if (!selectedData) {
+      setSearchText(inputValue || "");
+      setIsOpen(true);
+    }
+  };
+
+  return (
+    <div className={cn("relative", className)} ref={containerRef}>
+      {/* 입력 필드 */}
+      <div className="relative">
+        <Input
+          value={inputValue}
+          onChange={handleInputChange}
+          onFocus={handleInputFocus}
+          placeholder={placeholder}
+          disabled={disabled}
+          className="h-8 text-xs sm:h-10 sm:text-sm pr-16"
+        />
+        <div className="absolute right-1 top-1/2 -translate-y-1/2 flex items-center gap-1">
+          {loading && (
+            <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
+          )}
+          {inputValue && !disabled && (
+            <Button
+              type="button"
+              variant="ghost"
+              size="sm"
+              onClick={handleClear}
+              className="h-6 w-6 p-0"
+            >
+              <X className="h-3 w-3" />
+            </Button>
+          )}
+          <ChevronDown className="h-4 w-4 text-muted-foreground" />
+        </div>
+      </div>
+
+      {/* 드롭다운 결과 */}
+      {isOpen && (results.length > 0 || loading) && (
+        <div className="absolute z-50 w-full mt-1 bg-background border rounded-md shadow-lg max-h-[300px] overflow-y-auto">
+          {loading && results.length === 0 ? (
+            <div className="p-4 text-center text-sm text-muted-foreground">
+              <Loader2 className="h-4 w-4 animate-spin mx-auto mb-2" />
+              검색 중...
+            </div>
+          ) : results.length === 0 ? (
+            <div className="p-4 text-center text-sm text-muted-foreground">
+              검색 결과가 없습니다
+            </div>
+          ) : (
+            <div className="py-1">
+              {results.map((item, index) => (
+                <button
+                  key={index}
+                  type="button"
+                  onClick={() => handleSelect(item)}
+                  className="w-full text-left px-3 py-2 hover:bg-accent text-xs sm:text-sm transition-colors"
+                >
+                  <div className="font-medium">{item[displayField]}</div>
+                  {additionalFields.length > 0 && (
+                    <div className="text-xs text-muted-foreground mt-1 space-y-0.5">
+                      {additionalFields.map((field) => (
+                        <div key={field}>
+                          {field}: {item[field] || "-"}
+                        </div>
+                      ))}
+                    </div>
+                  )}
+                </button>
+              ))}
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* 추가 정보 표시 */}
+      {showAdditionalInfo && selectedData && additionalFields.length > 0 && (
+        <div className="mt-2 text-xs text-muted-foreground space-y-1 px-2">
+          {additionalFields.map((field) => (
+            <div key={field} className="flex gap-2">
+              <span className="font-medium">{field}:</span>
+              <span>{selectedData[field] || "-"}</span>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
diff --git a/frontend/lib/registry/components/autocomplete-search-input/AutocompleteSearchInputConfigPanel.tsx b/frontend/lib/registry/components/autocomplete-search-input/AutocompleteSearchInputConfigPanel.tsx
new file mode 100644
index 00000000..96a212b1
--- /dev/null
+++ b/frontend/lib/registry/components/autocomplete-search-input/AutocompleteSearchInputConfigPanel.tsx
@@ -0,0 +1,801 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+import { Label } from "@/components/ui/label";
+import { Input } from "@/components/ui/input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Switch } from "@/components/ui/switch";
+import { Button } from "@/components/ui/button";
+import { Plus, X, Check, ChevronsUpDown } from "lucide-react";
+import { AutocompleteSearchInputConfig, FieldMapping, ValueFieldStorage } from "./types";
+import { tableManagementApi } from "@/lib/api/tableManagement";
+import { cn } from "@/lib/utils";
+
+interface AutocompleteSearchInputConfigPanelProps {
+  config: AutocompleteSearchInputConfig;
+  onConfigChange: (config: AutocompleteSearchInputConfig) => void;
+}
+
+export function AutocompleteSearchInputConfigPanel({
+  config,
+  onConfigChange,
+}: AutocompleteSearchInputConfigPanelProps) {
+  const [localConfig, setLocalConfig] = useState(config);
+  const [allTables, setAllTables] = useState<any[]>([]);
+  const [tableColumns, setTableColumns] = useState<any[]>([]);
+  const [isLoadingTables, setIsLoadingTables] = useState(false);
+  const [isLoadingColumns, setIsLoadingColumns] = useState(false);
+  const [openTableCombo, setOpenTableCombo] = useState(false);
+  const [openDisplayFieldCombo, setOpenDisplayFieldCombo] = useState(false);
+  const [openValueFieldCombo, setOpenValueFieldCombo] = useState(false);
+  const [openStorageTableCombo, setOpenStorageTableCombo] = useState(false);
+  const [openStorageColumnCombo, setOpenStorageColumnCombo] = useState(false);
+  const [storageTableColumns, setStorageTableColumns] = useState<any[]>([]);
+  const [isLoadingStorageColumns, setIsLoadingStorageColumns] = useState(false);
+
+  // 전체 테이블 목록 로드
+  useEffect(() => {
+    const loadTables = async () => {
+      setIsLoadingTables(true);
+      try {
+        const response = await tableManagementApi.getTableList();
+        if (response.success && response.data) {
+          setAllTables(response.data);
+        }
+      } catch (error) {
+        console.error("테이블 목록 로드 실패:", error);
+      } finally {
+        setIsLoadingTables(false);
+      }
+    };
+    loadTables();
+  }, []);
+
+  // 선택된 테이블의 컬럼 목록 로드
+  useEffect(() => {
+    const loadColumns = async () => {
+      if (!localConfig.tableName) {
+        setTableColumns([]);
+        return;
+      }
+
+      setIsLoadingColumns(true);
+      try {
+        const response = await tableManagementApi.getColumnList(localConfig.tableName);
+        if (response.success && response.data) {
+          setTableColumns(response.data.columns);
+        }
+      } catch (error) {
+        console.error("컬럼 목록 로드 실패:", error);
+        setTableColumns([]);
+      } finally {
+        setIsLoadingColumns(false);
+      }
+    };
+    loadColumns();
+  }, [localConfig.tableName]);
+
+  // 저장 대상 테이블의 컬럼 목록 로드
+  useEffect(() => {
+    const loadStorageColumns = async () => {
+      const storageTable = localConfig.valueFieldStorage?.targetTable;
+      if (!storageTable) {
+        setStorageTableColumns([]);
+        return;
+      }
+
+      setIsLoadingStorageColumns(true);
+      try {
+        const response = await tableManagementApi.getColumnList(storageTable);
+        if (response.success && response.data) {
+          setStorageTableColumns(response.data.columns);
+        }
+      } catch (error) {
+        console.error("저장 테이블 컬럼 로드 실패:", error);
+        setStorageTableColumns([]);
+      } finally {
+        setIsLoadingStorageColumns(false);
+      }
+    };
+    loadStorageColumns();
+  }, [localConfig.valueFieldStorage?.targetTable]);
+
+  useEffect(() => {
+    setLocalConfig(config);
+  }, [config]);
+
+  const updateConfig = (updates: Partial<AutocompleteSearchInputConfig>) => {
+    const newConfig = { ...localConfig, ...updates };
+    setLocalConfig(newConfig);
+    onConfigChange(newConfig);
+  };
+
+  const addSearchField = () => {
+    const fields = localConfig.searchFields || [];
+    updateConfig({ searchFields: [...fields, ""] });
+  };
+
+  const updateSearchField = (index: number, value: string) => {
+    const fields = [...(localConfig.searchFields || [])];
+    fields[index] = value;
+    updateConfig({ searchFields: fields });
+  };
+
+  const removeSearchField = (index: number) => {
+    const fields = [...(localConfig.searchFields || [])];
+    fields.splice(index, 1);
+    updateConfig({ searchFields: fields });
+  };
+
+  const addAdditionalField = () => {
+    const fields = localConfig.additionalFields || [];
+    updateConfig({ additionalFields: [...fields, ""] });
+  };
+
+  const updateAdditionalField = (index: number, value: string) => {
+    const fields = [...(localConfig.additionalFields || [])];
+    fields[index] = value;
+    updateConfig({ additionalFields: fields });
+  };
+
+  const removeAdditionalField = (index: number) => {
+    const fields = [...(localConfig.additionalFields || [])];
+    fields.splice(index, 1);
+    updateConfig({ additionalFields: fields });
+  };
+
+  // 필드 매핑 관리 함수
+  const addFieldMapping = () => {
+    const mappings = localConfig.fieldMappings || [];
+    updateConfig({
+      fieldMappings: [
+        ...mappings,
+        { sourceField: "", targetField: "", label: "" },
+      ],
+    });
+  };
+
+  const updateFieldMapping = (index: number, updates: Partial<FieldMapping>) => {
+    const mappings = [...(localConfig.fieldMappings || [])];
+    mappings[index] = { ...mappings[index], ...updates };
+    updateConfig({ fieldMappings: mappings });
+  };
+
+  const removeFieldMapping = (index: number) => {
+    const mappings = [...(localConfig.fieldMappings || [])];
+    mappings.splice(index, 1);
+    updateConfig({ fieldMappings: mappings });
+  };
+
+  return (
+    <div className="space-y-4 p-4">
+      <div className="space-y-2">
+        <Label className="text-xs sm:text-sm">테이블명 *</Label>
+        <Popover open={openTableCombo} onOpenChange={setOpenTableCombo}>
+          <PopoverTrigger asChild>
+            <Button
+              variant="outline"
+              role="combobox"
+              aria-expanded={openTableCombo}
+              className="h-8 w-full justify-between text-xs sm:h-10 sm:text-sm"
+              disabled={isLoadingTables}
+            >
+              {localConfig.tableName
+                ? allTables.find((t) => t.tableName === localConfig.tableName)?.displayName || localConfig.tableName
+                : isLoadingTables ? "로딩 중..." : "테이블 선택"}
+              <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent className="p-0" style={{ width: "var(--radix-popover-trigger-width)" }} align="start">
+            <Command>
+              <CommandInput placeholder="테이블 검색..." className="text-xs sm:text-sm" />
+              <CommandList>
+                <CommandEmpty className="text-xs sm:text-sm">테이블을 찾을 수 없습니다.</CommandEmpty>
+                <CommandGroup>
+                  {allTables.map((table) => (
+                    <CommandItem
+                      key={table.tableName}
+                      value={table.tableName}
+                      onSelect={() => {
+                        updateConfig({ tableName: table.tableName });
+                        setOpenTableCombo(false);
+                      }}
+                      className="text-xs sm:text-sm"
+                    >
+                      <Check className={cn("mr-2 h-4 w-4", localConfig.tableName === table.tableName ? "opacity-100" : "opacity-0")} />
+                      <div className="flex flex-col">
+                        <span className="font-medium">{table.displayName || table.tableName}</span>
+                        {table.displayName && <span className="text-[10px] text-gray-500">{table.tableName}</span>}
+                      </div>
+                    </CommandItem>
+                  ))}
+                </CommandGroup>
+              </CommandList>
+            </Command>
+          </PopoverContent>
+        </Popover>
+        <p className="text-[10px] text-muted-foreground">
+          검색할 데이터가 저장된 테이블을 선택하세요
+        </p>
+      </div>
+
+      <div className="space-y-2">
+        <Label className="text-xs sm:text-sm">표시 필드 *</Label>
+        <Popover open={openDisplayFieldCombo} onOpenChange={setOpenDisplayFieldCombo}>
+          <PopoverTrigger asChild>
+            <Button
+              variant="outline"
+              role="combobox"
+              aria-expanded={openDisplayFieldCombo}
+              className="h-8 w-full justify-between text-xs sm:h-10 sm:text-sm"
+              disabled={!localConfig.tableName || isLoadingColumns}
+            >
+              {localConfig.displayField
+                ? tableColumns.find((c) => c.columnName === localConfig.displayField)?.displayName || localConfig.displayField
+                : isLoadingColumns ? "로딩 중..." : "필드 선택"}
+              <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent className="p-0" style={{ width: "var(--radix-popover-trigger-width)" }} align="start">
+            <Command>
+              <CommandInput placeholder="필드 검색..." className="text-xs sm:text-sm" />
+              <CommandList>
+                <CommandEmpty className="text-xs sm:text-sm">필드를 찾을 수 없습니다.</CommandEmpty>
+                <CommandGroup>
+                  {tableColumns.map((column) => (
+                    <CommandItem
+                      key={column.columnName}
+                      value={column.columnName}
+                      onSelect={() => {
+                        updateConfig({ displayField: column.columnName });
+                        setOpenDisplayFieldCombo(false);
+                      }}
+                      className="text-xs sm:text-sm"
+                    >
+                      <Check className={cn("mr-2 h-4 w-4", localConfig.displayField === column.columnName ? "opacity-100" : "opacity-0")} />
+                      <div className="flex flex-col">
+                        <span className="font-medium">{column.displayName || column.columnName}</span>
+                        {column.displayName && <span className="text-[10px] text-gray-500">{column.columnName}</span>}
+                      </div>
+                    </CommandItem>
+                  ))}
+                </CommandGroup>
+              </CommandList>
+            </Command>
+          </PopoverContent>
+        </Popover>
+        <p className="text-[10px] text-muted-foreground">
+          사용자에게 보여줄 필드 (예: 거래처명)
+        </p>
+      </div>
+
+      <div className="space-y-2">
+        <Label className="text-xs sm:text-sm">값 필드 *</Label>
+        <Popover open={openValueFieldCombo} onOpenChange={setOpenValueFieldCombo}>
+          <PopoverTrigger asChild>
+            <Button
+              variant="outline"
+              role="combobox"
+              aria-expanded={openValueFieldCombo}
+              className="h-8 w-full justify-between text-xs sm:h-10 sm:text-sm"
+              disabled={!localConfig.tableName || isLoadingColumns}
+            >
+              {localConfig.valueField
+                ? tableColumns.find((c) => c.columnName === localConfig.valueField)?.displayName || localConfig.valueField
+                : isLoadingColumns ? "로딩 중..." : "필드 선택"}
+              <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent className="p-0" style={{ width: "var(--radix-popover-trigger-width)" }} align="start">
+            <Command>
+              <CommandInput placeholder="필드 검색..." className="text-xs sm:text-sm" />
+              <CommandList>
+                <CommandEmpty className="text-xs sm:text-sm">필드를 찾을 수 없습니다.</CommandEmpty>
+                <CommandGroup>
+                  {tableColumns.map((column) => (
+                    <CommandItem
+                      key={column.columnName}
+                      value={column.columnName}
+                      onSelect={() => {
+                        updateConfig({ valueField: column.columnName });
+                        setOpenValueFieldCombo(false);
+                      }}
+                      className="text-xs sm:text-sm"
+                    >
+                      <Check className={cn("mr-2 h-4 w-4", localConfig.valueField === column.columnName ? "opacity-100" : "opacity-0")} />
+                      <div className="flex flex-col">
+                        <span className="font-medium">{column.displayName || column.columnName}</span>
+                        {column.displayName && <span className="text-[10px] text-gray-500">{column.columnName}</span>}
+                      </div>
+                    </CommandItem>
+                  ))}
+                </CommandGroup>
+              </CommandList>
+            </Command>
+          </PopoverContent>
+        </Popover>
+        <p className="text-[10px] text-muted-foreground">
+          검색 테이블에서 가져올 값의 컬럼 (예: customer_code)
+        </p>
+      </div>
+
+      <div className="space-y-2">
+        <Label className="text-xs sm:text-sm">플레이스홀더</Label>
+        <Input
+          value={localConfig.placeholder || ""}
+          onChange={(e) => updateConfig({ placeholder: e.target.value })}
+          placeholder="검색..."
+          className="h-8 text-xs sm:h-10 sm:text-sm"
+        />
+      </div>
+
+      {/* 값 필드 저장 위치 설정 */}
+      <div className="space-y-4 border rounded-lg p-4 bg-card">
+        <div>
+          <h3 className="text-sm font-semibold mb-1">값 필드 저장 위치 (고급)</h3>
+          <p className="text-xs text-muted-foreground">
+            위에서 선택한 "값 필드"의 데이터를 어느 테이블/컬럼에 저장할지 지정합니다.
+            <br />
+            미설정 시 화면의 연결 테이블에 컴포넌트의 바인딩 필드로 자동 저장됩니다.
+          </p>
+        </div>
+
+        {/* 저장 테이블 선택 */}
+        <div className="space-y-2">
+          <Label className="text-xs sm:text-sm">저장 테이블</Label>
+          <Popover open={openStorageTableCombo} onOpenChange={setOpenStorageTableCombo}>
+            <PopoverTrigger asChild>
+              <Button
+                variant="outline"
+                role="combobox"
+                aria-expanded={openStorageTableCombo}
+                className="h-8 w-full justify-between text-xs sm:h-10 sm:text-sm"
+                disabled={isLoadingTables}
+              >
+                {localConfig.valueFieldStorage?.targetTable
+                  ? allTables.find((t) => t.tableName === localConfig.valueFieldStorage?.targetTable)?.displayName || 
+                    localConfig.valueFieldStorage.targetTable
+                  : "기본값 (화면 연결 테이블)"}
+                <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent className="p-0" style={{ width: "var(--radix-popover-trigger-width)" }} align="start">
+              <Command>
+                <CommandInput placeholder="테이블 검색..." className="text-xs sm:text-sm" />
+                <CommandList>
+                  <CommandEmpty className="text-xs sm:text-sm">테이블을 찾을 수 없습니다.</CommandEmpty>
+                  <CommandGroup>
+                    {/* 기본값 옵션 */}
+                    <CommandItem
+                      value=""
+                      onSelect={() => {
+                        updateConfig({
+                          valueFieldStorage: {
+                            ...localConfig.valueFieldStorage,
+                            targetTable: undefined,
+                            targetColumn: undefined,
+                          },
+                        });
+                        setOpenStorageTableCombo(false);
+                      }}
+                      className="text-xs sm:text-sm"
+                    >
+                      <Check className={cn("mr-2 h-4 w-4", !localConfig.valueFieldStorage?.targetTable ? "opacity-100" : "opacity-0")} />
+                      <div className="flex flex-col">
+                        <span className="font-medium">기본값</span>
+                        <span className="text-[10px] text-gray-500">화면의 연결 테이블 사용</span>
+                      </div>
+                    </CommandItem>
+                    {allTables.map((table) => (
+                      <CommandItem
+                        key={table.tableName}
+                        value={table.tableName}
+                        onSelect={() => {
+                          updateConfig({
+                            valueFieldStorage: {
+                              ...localConfig.valueFieldStorage,
+                              targetTable: table.tableName,
+                              targetColumn: undefined, // 테이블 변경 시 컬럼 초기화
+                            },
+                          });
+                          setOpenStorageTableCombo(false);
+                        }}
+                        className="text-xs sm:text-sm"
+                      >
+                        <Check
+                          className={cn(
+                            "mr-2 h-4 w-4",
+                            localConfig.valueFieldStorage?.targetTable === table.tableName ? "opacity-100" : "opacity-0"
+                          )}
+                        />
+                        <div className="flex flex-col">
+                          <span className="font-medium">{table.displayName || table.tableName}</span>
+                          {table.displayName && <span className="text-[10px] text-gray-500">{table.tableName}</span>}
+                        </div>
+                      </CommandItem>
+                    ))}
+                  </CommandGroup>
+                </CommandList>
+              </Command>
+            </PopoverContent>
+          </Popover>
+          <p className="text-[10px] text-muted-foreground">
+            값을 저장할 테이블 (기본값: 화면 연결 테이블)
+          </p>
+        </div>
+
+        {/* 저장 컬럼 선택 */}
+        {localConfig.valueFieldStorage?.targetTable && (
+          <div className="space-y-2">
+            <Label className="text-xs sm:text-sm">저장 컬럼</Label>
+            <Popover open={openStorageColumnCombo} onOpenChange={setOpenStorageColumnCombo}>
+              <PopoverTrigger asChild>
+                <Button
+                  variant="outline"
+                  role="combobox"
+                  aria-expanded={openStorageColumnCombo}
+                  className="h-8 w-full justify-between text-xs sm:h-10 sm:text-sm"
+                  disabled={isLoadingStorageColumns}
+                >
+                  {localConfig.valueFieldStorage?.targetColumn
+                    ? storageTableColumns.find((c) => c.columnName === localConfig.valueFieldStorage?.targetColumn)
+                        ?.displayName || localConfig.valueFieldStorage.targetColumn
+                    : isLoadingStorageColumns
+                    ? "로딩 중..."
+                    : "컬럼 선택"}
+                  <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                </Button>
+              </PopoverTrigger>
+              <PopoverContent className="p-0" style={{ width: "var(--radix-popover-trigger-width)" }} align="start">
+                <Command>
+                  <CommandInput placeholder="컬럼 검색..." className="text-xs sm:text-sm" />
+                  <CommandList>
+                    <CommandEmpty className="text-xs sm:text-sm">컬럼을 찾을 수 없습니다.</CommandEmpty>
+                    <CommandGroup>
+                      {storageTableColumns.map((column) => (
+                        <CommandItem
+                          key={column.columnName}
+                          value={column.columnName}
+                          onSelect={() => {
+                            updateConfig({
+                              valueFieldStorage: {
+                                ...localConfig.valueFieldStorage,
+                                targetColumn: column.columnName,
+                              },
+                            });
+                            setOpenStorageColumnCombo(false);
+                          }}
+                          className="text-xs sm:text-sm"
+                        >
+                          <Check
+                            className={cn(
+                              "mr-2 h-4 w-4",
+                              localConfig.valueFieldStorage?.targetColumn === column.columnName ? "opacity-100" : "opacity-0"
+                            )}
+                          />
+                          <div className="flex flex-col">
+                            <span className="font-medium">{column.displayName || column.columnName}</span>
+                            {column.displayName && <span className="text-[10px] text-gray-500">{column.columnName}</span>}
+                          </div>
+                        </CommandItem>
+                      ))}
+                    </CommandGroup>
+                  </CommandList>
+                </Command>
+              </PopoverContent>
+            </Popover>
+            <p className="text-[10px] text-muted-foreground">
+              값을 저장할 컬럼명
+            </p>
+          </div>
+        )}
+
+        {/* 설명 박스 */}
+        <div className="p-3 bg-blue-50 dark:bg-blue-950 rounded border border-blue-200 dark:border-blue-800">
+          <p className="text-xs font-medium mb-2 text-blue-800 dark:text-blue-200">
+            저장 위치 동작
+          </p>
+          <div className="text-[10px] text-blue-700 dark:text-blue-300 space-y-1">
+            {localConfig.valueFieldStorage?.targetTable ? (
+              <>
+                <p>
+                  선택한 값(<code className="font-mono bg-blue-100 dark:bg-blue-900 px-1 rounded">{localConfig.valueField}</code>)을
+                </p>
+                <p>
+                  <code className="font-mono bg-blue-100 dark:bg-blue-900 px-1 rounded">
+                    {localConfig.valueFieldStorage.targetTable}
+                  </code>{" "}
+                  테이블의{" "}
+                  <code className="font-mono bg-blue-100 dark:bg-blue-900 px-1 rounded">
+                    {localConfig.valueFieldStorage.targetColumn || "(컬럼 미지정)"}
+                  </code>{" "}
+                  컬럼에 저장합니다.
+                </p>
+              </>
+            ) : (
+              <p>기본값: 화면의 연결 테이블에 컴포넌트의 바인딩 필드로 저장됩니다.</p>
+            )}
+          </div>
+        </div>
+      </div>
+
+      <div className="space-y-2">
+        <div className="flex items-center justify-between">
+          <Label className="text-xs sm:text-sm">검색 필드</Label>
+          <Button
+            size="sm"
+            variant="outline"
+            onClick={addSearchField}
+            className="h-7 text-xs"
+            disabled={!localConfig.tableName || isLoadingColumns}
+          >
+            <Plus className="h-3 w-3 mr-1" />
+            추가
+          </Button>
+        </div>
+        <div className="space-y-2">
+          {(localConfig.searchFields || []).map((field, index) => (
+            <div key={index} className="flex items-center gap-2">
+              <Select
+                value={field}
+                onValueChange={(value) => updateSearchField(index, value)}
+                disabled={!localConfig.tableName || isLoadingColumns}
+              >
+                <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm flex-1">
+                  <SelectValue placeholder="필드 선택" />
+                </SelectTrigger>
+                <SelectContent>
+                  {tableColumns.map((col) => (
+                    <SelectItem key={col.columnName} value={col.columnName}>
+                      {col.displayName || col.columnName}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              <Button
+                size="sm"
+                variant="ghost"
+                onClick={() => removeSearchField(index)}
+                className="h-8 w-8 p-0"
+              >
+                <X className="h-4 w-4" />
+              </Button>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      <div className="space-y-2">
+        <div className="flex items-center justify-between">
+          <Label className="text-xs sm:text-sm">추가 정보 표시</Label>
+          <Switch
+            checked={localConfig.showAdditionalInfo || false}
+            onCheckedChange={(checked) =>
+              updateConfig({ showAdditionalInfo: checked })
+            }
+          />
+        </div>
+      </div>
+
+      {localConfig.showAdditionalInfo && (
+        <div className="space-y-2">
+          <div className="flex items-center justify-between">
+            <Label className="text-xs sm:text-sm">추가 필드</Label>
+            <Button
+              size="sm"
+              variant="outline"
+              onClick={addAdditionalField}
+              className="h-7 text-xs"
+              disabled={!localConfig.tableName || isLoadingColumns}
+            >
+              <Plus className="h-3 w-3 mr-1" />
+              추가
+            </Button>
+          </div>
+          <div className="space-y-2">
+            {(localConfig.additionalFields || []).map((field, index) => (
+              <div key={index} className="flex items-center gap-2">
+                <Select
+                  value={field}
+                  onValueChange={(value) => updateAdditionalField(index, value)}
+                  disabled={!localConfig.tableName || isLoadingColumns}
+                >
+                  <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm flex-1">
+                    <SelectValue placeholder="필드 선택" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {tableColumns.map((col) => (
+                      <SelectItem key={col.columnName} value={col.columnName}>
+                        {col.displayName || col.columnName}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+                <Button
+                  size="sm"
+                  variant="ghost"
+                  onClick={() => removeAdditionalField(index)}
+                  className="h-8 w-8 p-0"
+                >
+                  <X className="h-4 w-4" />
+                </Button>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* 필드 자동 매핑 설정 */}
+      <div className="space-y-4 border rounded-lg p-4 bg-card">
+        <div>
+          <h3 className="text-sm font-semibold mb-1">필드 자동 매핑</h3>
+          <p className="text-xs text-muted-foreground">
+            선택한 항목의 필드를 화면의 다른 입력 필드에 자동으로 채워넣습니다
+          </p>
+        </div>
+
+        <div className="space-y-2">
+          <div className="flex items-center justify-between">
+            <Label className="text-xs sm:text-sm">필드 매핑 활성화</Label>
+            <Switch
+              checked={localConfig.enableFieldMapping || false}
+              onCheckedChange={(checked) =>
+                updateConfig({ enableFieldMapping: checked })
+              }
+            />
+          </div>
+          <p className="text-[10px] text-muted-foreground">
+            활성화하면 항목 선택 시 설정된 필드들이 자동으로 채워집니다
+          </p>
+        </div>
+
+        {localConfig.enableFieldMapping && (
+          <div className="space-y-3">
+            <div className="flex items-center justify-between">
+              <Label className="text-xs sm:text-sm">매핑 필드 목록</Label>
+              <Button
+                size="sm"
+                variant="outline"
+                onClick={addFieldMapping}
+                className="h-7 text-xs"
+                disabled={!localConfig.tableName || isLoadingColumns}
+              >
+                <Plus className="h-3 w-3 mr-1" />
+                매핑 추가
+              </Button>
+            </div>
+
+            <div className="space-y-3">
+              {(localConfig.fieldMappings || []).map((mapping, index) => (
+                <div key={index} className="border rounded-lg p-3 space-y-3 bg-background">
+                  <div className="flex items-center justify-between">
+                    <span className="text-xs font-medium text-muted-foreground">
+                      매핑 #{index + 1}
+                    </span>
+                    <Button
+                      size="sm"
+                      variant="ghost"
+                      onClick={() => removeFieldMapping(index)}
+                      className="h-6 w-6 p-0"
+                    >
+                      <X className="h-3 w-3" />
+                    </Button>
+                  </div>
+
+                  {/* 표시명 */}
+                  <div className="space-y-1.5">
+                    <Label className="text-xs">표시명</Label>
+                    <Input
+                      value={mapping.label || ""}
+                      onChange={(e) =>
+                        updateFieldMapping(index, { label: e.target.value })
+                      }
+                      placeholder="예: 거래처명"
+                      className="h-8 text-xs sm:h-10 sm:text-sm"
+                    />
+                    <p className="text-[10px] text-muted-foreground">
+                      이 매핑의 설명 (선택사항)
+                    </p>
+                  </div>
+
+                  {/* 소스 필드 (테이블의 컬럼) */}
+                  <div className="space-y-1.5">
+                    <Label className="text-xs">
+                      소스 필드 (테이블 컬럼) *
+                    </Label>
+                    <Select
+                      value={mapping.sourceField}
+                      onValueChange={(value) =>
+                        updateFieldMapping(index, { sourceField: value })
+                      }
+                      disabled={!localConfig.tableName || isLoadingColumns}
+                    >
+                      <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm">
+                        <SelectValue placeholder="컬럼 선택" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {tableColumns.map((col) => (
+                          <SelectItem key={col.columnName} value={col.columnName}>
+                            <div className="flex flex-col">
+                              <span className="font-medium">
+                                {col.displayName || col.columnName}
+                              </span>
+                              {col.displayName && (
+                                <span className="text-[10px] text-gray-500">
+                                  {col.columnName}
+                                </span>
+                              )}
+                            </div>
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                    <p className="text-[10px] text-muted-foreground">
+                      가져올 데이터의 컬럼명
+                    </p>
+                  </div>
+
+                  {/* 타겟 필드 (화면의 input ID) */}
+                  <div className="space-y-1.5">
+                    <Label className="text-xs">
+                      타겟 필드 (화면 컴포넌트 ID) *
+                    </Label>
+                    <Input
+                      value={mapping.targetField}
+                      onChange={(e) =>
+                        updateFieldMapping(index, { targetField: e.target.value })
+                      }
+                      placeholder="예: customer_name_input"
+                      className="h-8 text-xs sm:h-10 sm:text-sm"
+                    />
+                    <p className="text-[10px] text-muted-foreground">
+                      값을 채울 화면 컴포넌트의 ID (예: input의 id 속성)
+                    </p>
+                  </div>
+
+                  {/* 예시 설명 */}
+                  <div className="p-2 bg-blue-50 dark:bg-blue-950 rounded border border-blue-200 dark:border-blue-800">
+                    <p className="text-[10px] text-blue-700 dark:text-blue-300">
+                      {mapping.sourceField && mapping.targetField ? (
+                        <>
+                          <span className="font-semibold">{mapping.label || "이 필드"}</span>: 테이블의{" "}
+                          <code className="font-mono bg-blue-100 dark:bg-blue-900 px-1 rounded">
+                            {mapping.sourceField}
+                          </code>{" "}
+                          값을 화면의{" "}
+                          <code className="font-mono bg-blue-100 dark:bg-blue-900 px-1 rounded">
+                            {mapping.targetField}
+                          </code>{" "}
+                          컴포넌트에 자동으로 채웁니다
+                        </>
+                      ) : (
+                        "소스 필드와 타겟 필드를 모두 선택하세요"
+                      )}
+                    </p>
+                  </div>
+                </div>
+              ))}
+            </div>
+
+            {/* 사용 안내 */}
+            {localConfig.fieldMappings && localConfig.fieldMappings.length > 0 && (
+              <div className="p-3 bg-amber-50 dark:bg-amber-950 rounded border border-amber-200 dark:border-amber-800">
+                <p className="text-xs font-medium mb-2 text-amber-800 dark:text-amber-200">
+                  사용 방법
+                </p>
+                <ul className="text-[10px] text-amber-700 dark:text-amber-300 space-y-1 list-disc list-inside">
+                  <li>화면에서 이 검색 컴포넌트로 항목을 선택하면</li>
+                  <li>설정된 매핑에 따라 다른 입력 필드들이 자동으로 채워집니다</li>
+                  <li>타겟 필드 ID는 화면 디자이너에서 설정한 컴포넌트 ID와 일치해야 합니다</li>
+                </ul>
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
diff --git a/frontend/lib/registry/components/autocomplete-search-input/AutocompleteSearchInputRenderer.tsx b/frontend/lib/registry/components/autocomplete-search-input/AutocompleteSearchInputRenderer.tsx
new file mode 100644
index 00000000..d52aebd8
--- /dev/null
+++ b/frontend/lib/registry/components/autocomplete-search-input/AutocompleteSearchInputRenderer.tsx
@@ -0,0 +1,33 @@
+"use client";
+
+import React from "react";
+import { AutoRegisteringComponentRenderer } from "../../AutoRegisteringComponentRenderer";
+import { AutocompleteSearchInputDefinition } from "./index";
+import { AutocompleteSearchInputComponent } from "./AutocompleteSearchInputComponent";
+
+/**
+ * AutocompleteSearchInput 렌더러
+ * 자동 등록 시스템을 사용하여 컴포넌트를 레지스트리에 등록
+ */
+export class AutocompleteSearchInputRenderer extends AutoRegisteringComponentRenderer {
+  static componentDefinition = AutocompleteSearchInputDefinition;
+
+  render(): React.ReactElement {
+    return <AutocompleteSearchInputComponent {...this.props} renderer={this} />;
+  }
+
+  /**
+   * 값 변경 처리
+   */
+  protected handleValueChange = (value: any) => {
+    this.updateComponent({ value });
+  };
+}
+
+// 자동 등록 실행
+AutocompleteSearchInputRenderer.registerSelf();
+
+// Hot Reload 지원 (개발 모드)
+if (process.env.NODE_ENV === "development") {
+  AutocompleteSearchInputRenderer.enableHotReload();
+}
diff --git a/frontend/lib/registry/components/autocomplete-search-input/README.md b/frontend/lib/registry/components/autocomplete-search-input/README.md
new file mode 100644
index 00000000..688d0c3a
--- /dev/null
+++ b/frontend/lib/registry/components/autocomplete-search-input/README.md
@@ -0,0 +1,114 @@
+# AutocompleteSearchInput 컴포넌트
+
+자동완성 드롭다운 방식의 엔티티 검색 입력 컴포넌트입니다.
+
+## 특징
+
+- 타이핑하면 즉시 드롭다운 표시
+- 빈 값일 때 전체 목록 조회
+- 추가 정보 표시 가능
+- X 버튼으로 선택 초기화
+- 외부 클릭 시 자동 닫힘
+- **필드 자동 매핑**: 선택한 항목의 값을 화면의 다른 입력 필드에 자동으로 채움
+
+## 사용 예시
+
+### 기본 사용
+
+```tsx
+<AutocompleteSearchInputComponent
+  tableName="customer_mng"
+  displayField="customer_name"
+  valueField="customer_code"
+  searchFields={["customer_name", "customer_code"]}
+  placeholder="거래처명 입력"
+  showAdditionalInfo
+  additionalFields={["customer_code", "address"]}
+  value={selectedCode}
+  onChange={(code, fullData) => {
+    console.log("선택됨:", code, fullData);
+  }}
+/>
+```
+
+### 필드 자동 매핑 사용
+
+```tsx
+<AutocompleteSearchInputComponent
+  config={{
+    tableName: "customer_mng",
+    displayField: "customer_name",
+    valueField: "customer_code",
+    searchFields: ["customer_name", "customer_code"],
+    placeholder: "거래처 검색",
+    enableFieldMapping: true,
+    fieldMappings: [
+      {
+        sourceField: "customer_name",  // 테이블의 컬럼명
+        targetField: "customer_name_input",  // 화면 input의 id
+        label: "거래처명"
+      },
+      {
+        sourceField: "address",
+        targetField: "address_input",
+        label: "주소"
+      },
+      {
+        sourceField: "phone",
+        targetField: "phone_input",
+        label: "전화번호"
+      }
+    ]
+  }}
+  onChange={(code, fullData) => {
+    console.log("선택됨:", code, fullData);
+    // 필드 매핑은 자동으로 실행됩니다
+  }}
+/>
+
+<!-- 화면의 다른 곳에 있는 입력 필드들 -->
+<input id="customer_name_input" placeholder="거래처명" />
+<input id="address_input" placeholder="주소" />
+<input id="phone_input" placeholder="전화번호" />
+```
+
+## 설정 옵션
+
+### 기본 설정
+
+- `tableName`: 검색할 테이블명
+- `displayField`: 표시할 필드
+- `valueField`: 값으로 사용할 필드
+- `searchFields`: 검색 대상 필드들
+- `placeholder`: 플레이스홀더
+- `showAdditionalInfo`: 추가 정보 표시 여부
+- `additionalFields`: 추가로 표시할 필드들
+
+### 값 필드 저장 위치 설정 (고급)
+
+- `valueFieldStorage`: 값 필드 저장 위치 지정
+  - `targetTable`: 저장할 테이블명 (미설정 시 화면 연결 테이블)
+  - `targetColumn`: 저장할 컬럼명 (미설정 시 바인딩 필드)
+
+### 필드 자동 매핑 설정
+
+- `enableFieldMapping`: 필드 자동 매핑 활성화 여부
+- `fieldMappings`: 매핑할 필드 목록
+  - `sourceField`: 소스 테이블의 컬럼명 (예: customer_name)
+  - `targetField`: 타겟 필드 ID (예: 화면의 input id 속성)
+  - `label`: 표시명 (선택사항)
+
+## 필드 자동 매핑 동작 방식
+
+1. 사용자가 검색 컴포넌트에서 항목을 선택합니다
+2. 선택된 항목의 데이터에서 `sourceField`에 해당하는 값을 가져옵니다
+3. 화면에서 `targetField` ID를 가진 컴포넌트를 찾습니다
+4. 해당 컴포넌트에 값을 자동으로 채워넣습니다
+5. React의 change 이벤트를 트리거하여 상태 업데이트를 유발합니다
+
+## 주의사항
+
+- 타겟 필드 ID는 화면 디자이너에서 설정한 컴포넌트 ID와 정확히 일치해야 합니다
+- 필드 매핑은 input, textarea 타입의 요소에만 동작합니다
+- 여러 필드를 한 번에 매핑할 수 있습니다
+
diff --git a/frontend/lib/registry/components/autocomplete-search-input/index.ts b/frontend/lib/registry/components/autocomplete-search-input/index.ts
new file mode 100644
index 00000000..59f2bf1e
--- /dev/null
+++ b/frontend/lib/registry/components/autocomplete-search-input/index.ts
@@ -0,0 +1,43 @@
+"use client";
+
+import { createComponentDefinition } from "../../utils/createComponentDefinition";
+import { ComponentCategory } from "@/types/component";
+import { AutocompleteSearchInputComponent } from "./AutocompleteSearchInputComponent";
+import { AutocompleteSearchInputConfigPanel } from "./AutocompleteSearchInputConfigPanel";
+
+/**
+ * AutocompleteSearchInput 컴포넌트 정의
+ * 자동완성 드롭다운 방식의 엔티티 검색 입력
+ */
+export const AutocompleteSearchInputDefinition = createComponentDefinition({
+  id: "autocomplete-search-input",
+  name: "자동완성 검색 입력",
+  nameEng: "Autocomplete Search Input",
+  description: "타이핑하면 드롭다운이 나타나는 엔티티 검색 입력 (거래처, 사용자 등)",
+  category: ComponentCategory.INPUT,
+  webType: "entity",
+  component: AutocompleteSearchInputComponent,
+  defaultConfig: {
+    tableName: "customer_mng",
+    displayField: "customer_name",
+    valueField: "customer_code",
+    searchFields: ["customer_name", "customer_code"],
+    placeholder: "검색...",
+    showAdditionalInfo: false,
+    additionalFields: [],
+  },
+  defaultSize: { width: 300, height: 40 },
+  configPanel: AutocompleteSearchInputConfigPanel,
+  icon: "Search",
+  tags: ["검색", "자동완성", "엔티티", "드롭다운", "거래처"],
+  version: "1.0.0",
+  author: "개발팀",
+});
+
+// 타입 내보내기
+export type { AutocompleteSearchInputConfig } from "./types";
+
+// 컴포넌트 내보내기
+export { AutocompleteSearchInputComponent } from "./AutocompleteSearchInputComponent";
+export { AutocompleteSearchInputRenderer } from "./AutocompleteSearchInputRenderer";
+
diff --git a/frontend/lib/registry/components/autocomplete-search-input/types.ts b/frontend/lib/registry/components/autocomplete-search-input/types.ts
new file mode 100644
index 00000000..802f27c7
--- /dev/null
+++ b/frontend/lib/registry/components/autocomplete-search-input/types.ts
@@ -0,0 +1,31 @@
+// 값 필드 저장 설정
+export interface ValueFieldStorage {
+  targetTable?: string; // 저장할 테이블명 (기본값: 화면의 연결 테이블)
+  targetColumn?: string; // 저장할 컬럼명 (기본값: 바인딩 필드)
+}
+
+// 필드 매핑 설정
+export interface FieldMapping {
+  sourceField: string; // 소스 테이블의 컬럼명 (예: customer_name)
+  targetField: string; // 매핑될 타겟 필드 ID (예: 화면의 input ID)
+  label?: string; // 표시명
+  targetTable?: string; // 저장할 테이블 (선택사항, 기본값은 화면 연결 테이블)
+  targetColumn?: string; // 저장할 컬럼명 (선택사항, targetField가 화면 ID가 아닌 경우)
+}
+
+export interface AutocompleteSearchInputConfig {
+  tableName: string;
+  displayField: string;
+  valueField: string;
+  searchFields?: string[];
+  filterCondition?: Record<string, any>;
+  placeholder?: string;
+  showAdditionalInfo?: boolean;
+  additionalFields?: string[];
+  // 값 필드 저장 위치 설정
+  valueFieldStorage?: ValueFieldStorage;
+  // 필드 자동 매핑 설정
+  enableFieldMapping?: boolean; // 필드 자동 매핑 활성화 여부
+  fieldMappings?: FieldMapping[]; // 매핑할 필드 목록
+}
+
diff --git a/frontend/lib/registry/components/autocomplete-search-input/사용_가이드.md b/frontend/lib/registry/components/autocomplete-search-input/사용_가이드.md
new file mode 100644
index 00000000..d8261e8f
--- /dev/null
+++ b/frontend/lib/registry/components/autocomplete-search-input/사용_가이드.md
@@ -0,0 +1,300 @@
+# AutocompleteSearchInput 컴포넌트 사용 가이드
+
+## 📌 이 컴포넌트는 무엇인가요?
+
+검색 가능한 드롭다운 선택 박스입니다.
+거래처, 품목, 직원 등을 검색해서 선택할 때 사용합니다.
+
+---
+
+## ⚙️ 패널 설정 방법
+
+### 1. 기본 검색 설정 (필수)
+
+#### 테이블명
+- **의미**: 어디서 검색할 것인가?
+- **예시**: `customer_mng` (거래처 테이블)
+
+#### 표시 필드
+- **의미**: 사용자에게 무엇을 보여줄 것인가?
+- **예시**: `customer_name` → 화면에 "삼성전자" 표시
+
+#### 값 필드
+- **의미**: 실제로 어떤 값을 가져올 것인가?
+- **예시**: `customer_code` → "CUST-0001" 가져오기
+
+#### 검색 필드 (선택)
+- **의미**: 어떤 컬럼으로 검색할 것인가?
+- **예시**: `customer_name`, `customer_code` 추가
+- **동작**: 이름으로도 검색, 코드로도 검색 가능
+
+---
+
+### 2. 값 필드 저장 위치 (고급, 선택)
+
+#### 저장 테이블
+- **기본값**: 화면의 연결 테이블에 자동 저장
+- **변경 시**: 다른 테이블에 저장 가능
+
+#### 저장 컬럼
+- **기본값**: 컴포넌트의 바인딩 필드
+- **변경 시**: 다른 컬럼에 저장 가능
+
+> 💡 **대부분은 기본값을 사용하면 됩니다!**
+
+---
+
+## 📖 사용 예제
+
+### 예제 1: 거래처 선택 (가장 일반적)
+
+#### 패널 설정
+```
+테이블명: customer_mng
+표시 필드: customer_name
+값 필드: customer_code
+검색 필드: customer_name, customer_code
+플레이스홀더: 거래처명 또는 코드 입력
+```
+
+#### 동작
+```
+사용자 입력: "삼성"
+드롭다운 표시: "삼성전자", "삼성물산", ...
+선택: "삼성전자"
+저장 값: "CUST-0001" (customer_code)
+```
+
+#### 결과
+```
+order_mng 테이블
+┌───────────┬───────────────┐
+│ order_id  │ customer_code │
+├───────────┼───────────────┤
+│ ORD-0001  │ CUST-0001     │ ✅
+└───────────┴───────────────┘
+```
+
+---
+
+### 예제 2: 거래처명을 직접 저장
+
+#### 패널 설정
+```
+테이블명: customer_mng
+표시 필드: customer_name
+값 필드: customer_name         ← 이름을 가져옴
+플레이스홀더: 거래처명 입력
+```
+
+#### 동작
+```
+사용자 선택: "삼성전자"
+저장 값: "삼성전자" (customer_name)
+```
+
+#### 결과
+```
+order_mng 테이블
+┌───────────┬───────────────┐
+│ order_id  │ customer_name │
+├───────────┼───────────────┤
+│ ORD-0001  │ 삼성전자       │ ✅
+└───────────┴───────────────┘
+```
+
+---
+
+### 예제 3: 품목 선택 (추가 정보 표시)
+
+#### 패널 설정
+```
+테이블명: item_mng
+표시 필드: item_name
+값 필드: item_code
+검색 필드: item_name, item_code, category
+플레이스홀더: 품목명, 코드, 카테고리로 검색
+
+추가 정보 표시: ON
+추가 필드: item_code, unit_price
+```
+
+#### 동작
+```
+드롭다운:
+┌────────────────────────────┐
+│ 삼성 노트북                 │
+│ item_code: ITEM-0123       │
+│ unit_price: 1,500,000      │
+├────────────────────────────┤
+│ LG 그램 노트북              │
+│ item_code: ITEM-0124       │
+│ unit_price: 1,800,000      │
+└────────────────────────────┘
+```
+
+---
+
+## 🎯 필드 선택 가이드
+
+### 언제 표시 필드 ≠ 값 필드 인가?
+
+**대부분의 경우 (권장)**
+```
+표시 필드: customer_name  (이름 - 사람이 읽기 쉬움)
+값 필드: customer_code    (코드 - 데이터베이스에 저장)
+
+이유:
+✅ 외래키 관계 유지
+✅ 데이터 무결성
+✅ 이름이 바뀌어도 코드는 그대로
+```
+
+### 언제 표시 필드 = 값 필드 인가?
+
+**특수한 경우**
+```
+표시 필드: customer_name
+값 필드: customer_name
+
+사용 케이스:
+- 이름 자체를 저장해야 할 때
+- 외래키가 필요 없을 때
+- 간단한 참조용 데이터
+```
+
+---
+
+## 💡 자주 묻는 질문
+
+### Q1. 저장 위치를 설정하지 않으면?
+
+**A**: 자동으로 화면의 연결 테이블에 바인딩 필드로 저장됩니다.
+
+```
+화면: 수주 등록 (연결 테이블: order_mng)
+컴포넌트 바인딩 필드: customer_code
+
+→ order_mng.customer_code에 자동 저장 ✅
+```
+
+---
+
+### Q2. 값 필드와 저장 위치의 차이는?
+
+**A**: 
+- **값 필드**: 검색 테이블에서 무엇을 가져올지
+- **저장 위치**: 가져온 값을 어디에 저장할지
+
+```
+값 필드: customer_mng.customer_code (어떤 값?)
+저장 위치: order_mng.customer_code (어디에?)
+```
+
+---
+
+### Q3. 검색 필드는 왜 여러 개 추가하나요?
+
+**A**: 여러 방법으로 검색할 수 있게 하기 위해서입니다.
+
+```
+검색 필드: [customer_name, customer_code]
+
+사용자가 "삼성" 입력 → customer_name에서 검색
+사용자가 "CUST" 입력 → customer_code에서 검색
+```
+
+---
+
+### Q4. 추가 정보 표시는 언제 사용하나요?
+
+**A**: 선택할 때 참고할 정보를 함께 보여주고 싶을 때 사용합니다.
+
+```
+추가 정보 표시: ON
+추가 필드: [address, phone]
+
+드롭다운:
+┌────────────────────────────┐
+│ 삼성전자                    │
+│ address: 서울시 서초구      │
+│ phone: 02-1234-5678        │
+└────────────────────────────┘
+```
+
+---
+
+## 🚀 빠른 시작
+
+### 1단계: 기본 설정만 입력
+
+```
+테이블명: [검색할 테이블]
+표시 필드: [사용자에게 보여줄 컬럼]
+값 필드: [저장할 컬럼]
+```
+
+### 2단계: 화면 디자이너에서 바인딩 필드 설정
+
+```
+컴포넌트 ID: customer_search
+바인딩 필드: customer_code
+```
+
+### 3단계: 완료!
+
+이제 사용자가 선택하면 자동으로 저장됩니다.
+
+---
+
+## ✅ 체크리스트
+
+설정 전:
+- [ ] 어느 테이블에서 검색할지 알고 있나요?
+- [ ] 사용자에게 무엇을 보여줄지 정했나요?
+- [ ] 어떤 값을 저장할지 정했나요?
+
+설정 후:
+- [ ] 검색이 정상적으로 되나요?
+- [ ] 드롭다운에 원하는 항목이 보이나요?
+- [ ] 선택 후 값이 저장되나요?
+
+---
+
+## 📊 설정 패턴 비교
+
+| 패턴 | 표시 필드 | 값 필드 | 사용 케이스 |
+|------|----------|---------|------------|
+| 1 | customer_name | customer_code | 이름 표시, 코드 저장 (일반적) |
+| 2 | customer_name | customer_name | 이름 표시, 이름 저장 (특수) |
+| 3 | item_name | item_code | 품목명 표시, 품목코드 저장 |
+| 4 | employee_name | employee_id | 직원명 표시, ID 저장 |
+
+---
+
+## 🎨 실전 팁
+
+### 1. 검색 필드는 2-3개가 적당
+```
+✅ 좋음: [name, code]
+✅ 좋음: [name, code, category]
+❌ 과함: [name, code, address, phone, email, ...]
+```
+
+### 2. 플레이스홀더는 구체적으로
+```
+❌ "검색..."
+✅ "거래처명 또는 코드 입력"
+✅ "품목명, 코드, 카테고리로 검색"
+```
+
+### 3. 추가 정보는 선택에 도움되는 것만
+```
+✅ 도움됨: 가격, 주소, 전화번호
+❌ 불필요: 등록일, 수정일, ID
+```
+
+---
+
+이 가이드로 autocomplete-search-input 컴포넌트를 쉽게 사용할 수 있습니다! 🎉
+
diff --git a/frontend/lib/registry/components/button-primary/ButtonPrimaryComponent.tsx b/frontend/lib/registry/components/button-primary/ButtonPrimaryComponent.tsx
index 183581ca..112a285c 100644
--- a/frontend/lib/registry/components/button-primary/ButtonPrimaryComponent.tsx
+++ b/frontend/lib/registry/components/button-primary/ButtonPrimaryComponent.tsx
@@ -52,6 +52,9 @@ export interface ButtonPrimaryComponentProps extends ComponentRendererProps {
   // 플로우 선택된 데이터 정보 (플로우 위젯 선택 액션용)
   flowSelectedData?: any[];
   flowSelectedStepId?: number | null;
+  
+  // 🆕 같은 화면의 모든 컴포넌트 (TableList 자동 감지용)
+  allComponents?: any[];
 }
 
 /**
@@ -88,6 +91,7 @@ export const ButtonPrimaryComponent: React.FC<ButtonPrimaryComponentProps> = ({
   selectedRowsData,
   flowSelectedData,
   flowSelectedStepId,
+  allComponents, // 🆕 같은 화면의 모든 컴포넌트
   ...props
 }) => {
   const { isPreviewMode } = useScreenPreview(); // 프리뷰 모드 확인
@@ -389,6 +393,16 @@ export const ButtonPrimaryComponent: React.FC<ButtonPrimaryComponentProps> = ({
         return;
       }
 
+      // 🆕 모든 컴포넌트의 설정 수집 (parentDataMapping 등)
+      const componentConfigs: Record<string, any> = {};
+      if (allComponents && Array.isArray(allComponents)) {
+        for (const comp of allComponents) {
+          if (comp.id && comp.componentConfig) {
+            componentConfigs[comp.id] = comp.componentConfig;
+          }
+        }
+      }
+
       const context: ButtonActionContext = {
         formData: formData || {},
         originalData: originalData || {}, // 부분 업데이트용 원본 데이터 추가
@@ -409,10 +423,14 @@ export const ButtonPrimaryComponent: React.FC<ButtonPrimaryComponentProps> = ({
         sortOrder, // 🆕 정렬 방향
         columnOrder, // 🆕 컬럼 순서
         tableDisplayData, // 🆕 화면에 표시된 데이터
+        // 🆕 같은 화면의 모든 컴포넌트 (TableList 자동 감지용)
+        allComponents,
         // 플로우 선택된 데이터 정보 추가
         flowSelectedData,
         flowSelectedStepId,
-      };
+        // 🆕 컴포넌트별 설정 (parentDataMapping 등)
+        componentConfigs,
+      } as ButtonActionContext;
 
       // 확인이 필요한 액션인지 확인
       if (confirmationRequiredActions.includes(processedConfig.action.type)) {
diff --git a/frontend/lib/registry/components/button-primary/ButtonPrimaryConfigPanel.tsx b/frontend/lib/registry/components/button-primary/ButtonPrimaryConfigPanel.tsx
deleted file mode 100644
index bbe1faed..00000000
--- a/frontend/lib/registry/components/button-primary/ButtonPrimaryConfigPanel.tsx
+++ /dev/null
@@ -1,77 +0,0 @@
-"use client";
-
-import React from "react";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { Checkbox } from "@/components/ui/checkbox";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
-import { ButtonPrimaryConfig } from "./types";
-
-export interface ButtonPrimaryConfigPanelProps {
-  config: ButtonPrimaryConfig;
-  onChange: (config: Partial<ButtonPrimaryConfig>) => void;
-}
-
-/**
- * ButtonPrimary 설정 패널
- * 컴포넌트의 설정값들을 편집할 수 있는 UI 제공
- */
-export const ButtonPrimaryConfigPanel: React.FC<ButtonPrimaryConfigPanelProps> = ({ config, onChange }) => {
-  const handleChange = (key: keyof ButtonPrimaryConfig, value: any) => {
-    onChange({ [key]: value });
-  };
-
-  return (
-    <div className="space-y-4">
-      <div className="text-sm font-medium">button-primary 설정</div>
-
-      {/* 버튼 관련 설정 */}
-      <div className="space-y-2">
-        <Label htmlFor="text">버튼 텍스트</Label>
-        <Input id="text" value={config.text || ""} onChange={(e) => handleChange("text", e.target.value)} />
-      </div>
-
-      <div className="space-y-2">
-        <Label htmlFor="actionType">액션 타입</Label>
-        <Select value={config.actionType || "button"} onValueChange={(value) => handleChange("actionType", value)}>
-          <SelectTrigger>
-            <SelectValue />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="button">Button</SelectItem>
-            <SelectItem value="submit">Submit</SelectItem>
-            <SelectItem value="reset">Reset</SelectItem>
-          </SelectContent>
-        </Select>
-      </div>
-
-      {/* 공통 설정 */}
-      <div className="space-y-2">
-        <Label htmlFor="disabled">비활성화</Label>
-        <Checkbox
-          id="disabled"
-          checked={config.disabled || false}
-          onCheckedChange={(checked) => handleChange("disabled", checked)}
-        />
-      </div>
-
-      <div className="space-y-2">
-        <Label htmlFor="required">필수 입력</Label>
-        <Checkbox
-          id="required"
-          checked={config.required || false}
-          onCheckedChange={(checked) => handleChange("required", checked)}
-        />
-      </div>
-
-      <div className="space-y-2">
-        <Label htmlFor="readonly">읽기 전용</Label>
-        <Checkbox
-          id="readonly"
-          checked={config.readonly || false}
-          onCheckedChange={(checked) => handleChange("readonly", checked)}
-        />
-      </div>
-    </div>
-  );
-};
diff --git a/frontend/lib/registry/components/button-primary/index.ts b/frontend/lib/registry/components/button-primary/index.ts
index f9e19a14..7710c338 100644
--- a/frontend/lib/registry/components/button-primary/index.ts
+++ b/frontend/lib/registry/components/button-primary/index.ts
@@ -5,7 +5,6 @@ import { createComponentDefinition } from "../../utils/createComponentDefinition
 import { ComponentCategory } from "@/types/component";
 import type { WebType } from "@/types/screen";
 import { ButtonPrimaryWrapper } from "./ButtonPrimaryComponent";
-import { ButtonPrimaryConfigPanel } from "./ButtonPrimaryConfigPanel";
 import { ButtonPrimaryConfig } from "./types";
 
 /**
@@ -31,7 +30,7 @@ export const ButtonPrimaryDefinition = createComponentDefinition({
     },
   },
   defaultSize: { width: 120, height: 40 },
-  configPanel: ButtonPrimaryConfigPanel,
+  configPanel: undefined, // 상세 설정 패널(ButtonConfigPanel)이 대신 사용됨
   icon: "MousePointer",
   tags: ["버튼", "액션", "클릭"],
   version: "1.0.0",
diff --git a/frontend/lib/registry/components/conditional-container/ConditionalContainerComponent.tsx b/frontend/lib/registry/components/conditional-container/ConditionalContainerComponent.tsx
new file mode 100644
index 00000000..d1aff6de
--- /dev/null
+++ b/frontend/lib/registry/components/conditional-container/ConditionalContainerComponent.tsx
@@ -0,0 +1,216 @@
+"use client";
+
+import React, { useState, useEffect, useRef } from "react";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { ConditionalContainerProps, ConditionalSection } from "./types";
+import { ConditionalSectionViewer } from "./ConditionalSectionViewer";
+import { cn } from "@/lib/utils";
+
+console.log("🚀 ConditionalContainerComponent 모듈 로드됨!");
+
+/**
+ * 조건부 컨테이너 컴포넌트
+ * 상단 셀렉트박스 값에 따라 하단에 다른 UI를 표시
+ */
+export function ConditionalContainerComponent({
+  config,
+  controlField: propControlField,
+  controlLabel: propControlLabel,
+  sections: propSections,
+  defaultValue: propDefaultValue,
+  showBorder: propShowBorder,
+  spacing: propSpacing,
+  value,
+  onChange,
+  formData,
+  onFormDataChange,
+  isDesignMode = false,
+  onUpdateComponent,
+  onDeleteComponent,
+  onSelectComponent,
+  selectedComponentId,
+  onHeightChange,
+  componentId,
+  style,
+  className,
+}: ConditionalContainerProps) {
+  console.log("🎯 ConditionalContainerComponent 렌더링!", {
+    isDesignMode,
+    hasOnHeightChange: !!onHeightChange,
+    componentId,
+  });
+  
+  // config prop 우선, 없으면 개별 prop 사용
+  const controlField = config?.controlField || propControlField || "condition";
+  const controlLabel = config?.controlLabel || propControlLabel || "조건 선택";
+  const sections = config?.sections || propSections || [];
+  const defaultValue = config?.defaultValue || propDefaultValue || sections[0]?.condition;
+  const showBorder = config?.showBorder ?? propShowBorder ?? true;
+  const spacing = config?.spacing || propSpacing || "normal";
+
+  // 현재 선택된 값
+  const [selectedValue, setSelectedValue] = useState<string>(
+    value || formData?.[controlField] || defaultValue || ""
+  );
+
+  // formData 변경 시 동기화
+  useEffect(() => {
+    if (formData?.[controlField]) {
+      setSelectedValue(formData[controlField]);
+    }
+  }, [formData, controlField]);
+
+  // 값 변경 핸들러
+  const handleValueChange = (newValue: string) => {
+    setSelectedValue(newValue);
+    
+    if (onChange) {
+      onChange(newValue);
+    }
+    
+    if (onFormDataChange) {
+      onFormDataChange(controlField, newValue);
+    }
+  };
+
+  // 컨테이너 높이 측정용 ref
+  const containerRef = useRef<HTMLDivElement>(null);
+  const previousHeightRef = useRef<number>(0);
+
+  // 🔍 디버그: props 확인
+  useEffect(() => {
+    console.log("🔍 ConditionalContainer props:", {
+      isDesignMode,
+      hasOnHeightChange: !!onHeightChange,
+      componentId,
+      selectedValue,
+    });
+  }, [isDesignMode, onHeightChange, componentId, selectedValue]);
+
+  // 높이 변화 감지 및 콜백 호출
+  useEffect(() => {
+    console.log("🔍 ResizeObserver 등록 조건:", {
+      hasContainer: !!containerRef.current,
+      isDesignMode,
+      hasOnHeightChange: !!onHeightChange,
+    });
+    
+    if (!containerRef.current || isDesignMode || !onHeightChange) return;
+
+    const resizeObserver = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        const newHeight = entry.contentRect.height;
+        
+        // 높이가 실제로 변경되었을 때만 콜백 호출
+        if (Math.abs(newHeight - previousHeightRef.current) > 5) {
+          console.log(`📏 조건부 컨테이너 높이 변화: ${previousHeightRef.current}px → ${newHeight}px`);
+          previousHeightRef.current = newHeight;
+          onHeightChange(newHeight);
+        }
+      }
+    });
+
+    resizeObserver.observe(containerRef.current);
+
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [isDesignMode, onHeightChange, selectedValue]); // selectedValue 변경 시에도 감지
+
+  // 간격 스타일
+  const spacingClass = {
+    tight: "space-y-2",
+    normal: "space-y-4",
+    loose: "space-y-8",
+  }[spacing];
+
+  return (
+    <div
+      ref={containerRef}
+      className={cn("w-full flex flex-col", spacingClass, className)}
+      style={style}
+    >
+      {/* 제어 셀렉트박스 */}
+      <div className="space-y-2 flex-shrink-0">
+        <Label htmlFor={controlField} className="text-xs sm:text-sm">
+          {controlLabel}
+        </Label>
+        <Select value={selectedValue} onValueChange={handleValueChange}>
+          <SelectTrigger
+            id={controlField}
+            className="h-8 text-xs sm:h-10 sm:text-sm"
+          >
+            <SelectValue placeholder="선택하세요" />
+          </SelectTrigger>
+          <SelectContent>
+            {sections.map((section) => (
+              <SelectItem key={section.id} value={section.condition}>
+                {section.label}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
+
+      {/* 조건별 섹션들 */}
+      <div className="flex-1 min-h-0">
+        {isDesignMode ? (
+          // 디자인 모드: 모든 섹션 표시
+          <div className={spacingClass}>
+            {sections.map((section) => (
+              <ConditionalSectionViewer
+                key={section.id}
+                sectionId={section.id}
+                condition={section.condition}
+                label={section.label}
+                screenId={section.screenId}
+                screenName={section.screenName}
+                isActive={selectedValue === section.condition}
+                isDesignMode={isDesignMode}
+                showBorder={showBorder}
+                formData={formData}
+                onFormDataChange={onFormDataChange}
+              />
+            ))}
+          </div>
+        ) : (
+          // 실행 모드: 활성 섹션만 표시
+          sections.map((section) =>
+            selectedValue === section.condition ? (
+              <ConditionalSectionViewer
+                key={section.id}
+                sectionId={section.id}
+                condition={section.condition}
+                label={section.label}
+                screenId={section.screenId}
+                screenName={section.screenName}
+                isActive={true}
+                isDesignMode={false}
+                showBorder={showBorder}
+                formData={formData}
+                onFormDataChange={onFormDataChange}
+              />
+            ) : null
+          )
+        )}
+
+        {/* 섹션이 없는 경우 안내 */}
+        {sections.length === 0 && isDesignMode && (
+          <div className="flex items-center justify-center min-h-[200px] border-2 border-dashed border-muted-foreground/30 rounded-lg bg-muted/20">
+            <p className="text-sm text-muted-foreground">
+              설정 패널에서 조건을 추가하세요
+            </p>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
diff --git a/frontend/lib/registry/components/conditional-container/ConditionalContainerConfigPanel.tsx b/frontend/lib/registry/components/conditional-container/ConditionalContainerConfigPanel.tsx
new file mode 100644
index 00000000..173bebc6
--- /dev/null
+++ b/frontend/lib/registry/components/conditional-container/ConditionalContainerConfigPanel.tsx
@@ -0,0 +1,343 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+import { Label } from "@/components/ui/label";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { Switch } from "@/components/ui/switch";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Plus, Trash2, GripVertical, Loader2 } from "lucide-react";
+import { ConditionalContainerConfig, ConditionalSection } from "./types";
+import { screenApi } from "@/lib/api/screen";
+
+interface ConditionalContainerConfigPanelProps {
+  config: ConditionalContainerConfig;
+  onConfigChange: (config: ConditionalContainerConfig) => void;
+}
+
+export function ConditionalContainerConfigPanel({
+  config,
+  onConfigChange,
+}: ConditionalContainerConfigPanelProps) {
+  const [localConfig, setLocalConfig] = useState<ConditionalContainerConfig>({
+    controlField: config.controlField || "condition",
+    controlLabel: config.controlLabel || "조건 선택",
+    sections: config.sections || [],
+    defaultValue: config.defaultValue || "",
+    showBorder: config.showBorder ?? true,
+    spacing: config.spacing || "normal",
+  });
+
+  // 화면 목록 상태
+  const [screens, setScreens] = useState<any[]>([]);
+  const [screensLoading, setScreensLoading] = useState(false);
+
+  // 화면 목록 로드
+  useEffect(() => {
+    const loadScreens = async () => {
+      setScreensLoading(true);
+      try {
+        const response = await screenApi.getScreens({ page: 1, size: 1000 });
+        if (response.data) {
+          setScreens(response.data);
+        }
+      } catch (error) {
+        console.error("화면 목록 로드 실패:", error);
+      } finally {
+        setScreensLoading(false);
+      }
+    };
+    loadScreens();
+  }, []);
+
+  // 설정 업데이트 헬퍼
+  const updateConfig = (updates: Partial<ConditionalContainerConfig>) => {
+    const newConfig = { ...localConfig, ...updates };
+    setLocalConfig(newConfig);
+    onConfigChange(newConfig);
+  };
+
+  // 새 섹션 추가
+  const addSection = () => {
+    const newSection: ConditionalSection = {
+      id: `section_${Date.now()}`,
+      condition: `condition_${localConfig.sections.length + 1}`,
+      label: `조건 ${localConfig.sections.length + 1}`,
+      screenId: null,
+      screenName: undefined,
+    };
+
+    updateConfig({
+      sections: [...localConfig.sections, newSection],
+    });
+  };
+
+  // 섹션 삭제
+  const removeSection = (sectionId: string) => {
+    updateConfig({
+      sections: localConfig.sections.filter((s) => s.id !== sectionId),
+    });
+  };
+
+  // 섹션 업데이트
+  const updateSection = (
+    sectionId: string,
+    updates: Partial<ConditionalSection>
+  ) => {
+    updateConfig({
+      sections: localConfig.sections.map((s) =>
+        s.id === sectionId ? { ...s, ...updates } : s
+      ),
+    });
+  };
+
+  return (
+    <div className="space-y-6 p-4">
+      <div>
+        <h3 className="text-sm font-semibold mb-4">조건부 컨테이너 설정</h3>
+
+        {/* 제어 필드 설정 */}
+        <div className="space-y-4 mb-6">
+          <div className="space-y-2">
+            <Label htmlFor="controlField" className="text-xs">
+              제어 필드명
+            </Label>
+            <Input
+              id="controlField"
+              value={localConfig.controlField}
+              onChange={(e) => updateConfig({ controlField: e.target.value })}
+              placeholder="예: inputMode"
+              className="h-8 text-xs"
+            />
+            <p className="text-[10px] text-muted-foreground">
+              formData에 저장될 필드명
+            </p>
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="controlLabel" className="text-xs">
+              셀렉트박스 라벨
+            </Label>
+            <Input
+              id="controlLabel"
+              value={localConfig.controlLabel}
+              onChange={(e) => updateConfig({ controlLabel: e.target.value })}
+              placeholder="예: 입력 방식"
+              className="h-8 text-xs"
+            />
+          </div>
+        </div>
+
+        {/* 조건별 섹션 설정 */}
+        <div className="space-y-4">
+          <div className="flex items-center justify-between">
+            <Label className="text-xs font-semibold">조건별 섹션</Label>
+            <Button
+              onClick={addSection}
+              size="sm"
+              variant="outline"
+              className="h-7 text-xs"
+            >
+              <Plus className="h-3 w-3 mr-1" />
+              섹션 추가
+            </Button>
+          </div>
+
+          {localConfig.sections.length === 0 ? (
+            <div className="text-center py-8 border-2 border-dashed rounded-lg">
+              <p className="text-xs text-muted-foreground">
+                조건별 섹션을 추가하세요
+              </p>
+            </div>
+          ) : (
+            <div className="space-y-3">
+              {localConfig.sections.map((section, index) => (
+                <div
+                  key={section.id}
+                  className="p-3 border rounded-lg space-y-3 bg-muted/20"
+                >
+                  {/* 섹션 헤더 */}
+                  <div className="flex items-center justify-between">
+                    <div className="flex items-center gap-2">
+                      <GripVertical className="h-4 w-4 text-muted-foreground" />
+                      <span className="text-xs font-medium">
+                        섹션 {index + 1}
+                      </span>
+                    </div>
+                    <Button
+                      onClick={() => removeSection(section.id)}
+                      size="sm"
+                      variant="ghost"
+                      className="h-6 w-6 p-0 text-destructive hover:text-destructive"
+                    >
+                      <Trash2 className="h-3 w-3" />
+                    </Button>
+                  </div>
+
+                  {/* 조건 값 */}
+                  <div className="space-y-1.5">
+                    <Label className="text-[10px] text-muted-foreground">
+                      조건 값 (고유값)
+                    </Label>
+                    <Input
+                      value={section.condition}
+                      onChange={(e) =>
+                        updateSection(section.id, { condition: e.target.value })
+                      }
+                      placeholder="예: customer_first"
+                      className="h-7 text-xs"
+                    />
+                  </div>
+
+                  {/* 조건 라벨 */}
+                  <div className="space-y-1.5">
+                    <Label className="text-[10px] text-muted-foreground">
+                      표시 라벨
+                    </Label>
+                    <Input
+                      value={section.label}
+                      onChange={(e) =>
+                        updateSection(section.id, { label: e.target.value })
+                      }
+                      placeholder="예: 거래처 우선"
+                      className="h-7 text-xs"
+                    />
+                  </div>
+
+                  {/* 화면 선택 */}
+                  <div className="space-y-1">
+                    <Label className="text-[10px] text-muted-foreground">
+                      표시할 화면
+                    </Label>
+                    {screensLoading ? (
+                      <div className="flex items-center gap-2 text-xs text-muted-foreground h-7 px-3 border rounded">
+                        <Loader2 className="h-3 w-3 animate-spin" />
+                        로딩 중...
+                      </div>
+                    ) : (
+                      <Select
+                        value={section.screenId?.toString() || "none"}
+                        onValueChange={(value) => {
+                          if (value === "none") {
+                            updateSection(section.id, {
+                              screenId: null,
+                              screenName: undefined,
+                            });
+                          } else {
+                            const screenId = parseInt(value);
+                            const selectedScreen = screens.find(
+                              (s) => s.screenId === screenId
+                            );
+                            updateSection(section.id, {
+                              screenId,
+                              screenName: selectedScreen?.screenName,
+                            });
+                          }
+                        }}
+                      >
+                        <SelectTrigger className="h-7 text-xs">
+                          <SelectValue placeholder="화면 선택..." />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="none">선택 안 함</SelectItem>
+                          {screens.map((screen) => (
+                            <SelectItem
+                              key={screen.screenId}
+                              value={screen.screenId.toString()}
+                            >
+                              {screen.screenName}
+                              {screen.description && (
+                                <span className="text-[10px] text-muted-foreground ml-1">
+                                  ({screen.description})
+                                </span>
+                              )}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    )}
+                    {section.screenId && (
+                      <div className="text-[10px] text-muted-foreground">
+                        화면 ID: {section.screenId}
+                      </div>
+                    )}
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+
+        {/* 기본값 설정 */}
+        {localConfig.sections.length > 0 && (
+          <div className="space-y-2 mt-4">
+            <Label htmlFor="defaultValue" className="text-xs">
+              기본 선택 값
+            </Label>
+            <Select
+              value={localConfig.defaultValue || ""}
+              onValueChange={(value) => updateConfig({ defaultValue: value })}
+            >
+              <SelectTrigger className="h-8 text-xs">
+                <SelectValue placeholder="기본값 선택" />
+              </SelectTrigger>
+              <SelectContent>
+                {localConfig.sections.map((section) => (
+                  <SelectItem key={section.id} value={section.condition}>
+                    {section.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+        )}
+
+        {/* 스타일 설정 */}
+        <div className="space-y-4 mt-6 pt-6 border-t">
+          <Label className="text-xs font-semibold">스타일 설정</Label>
+
+          {/* 테두리 표시 */}
+          <div className="flex items-center justify-between">
+            <Label htmlFor="showBorder" className="text-xs">
+              섹션 테두리 표시
+            </Label>
+            <Switch
+              id="showBorder"
+              checked={localConfig.showBorder}
+              onCheckedChange={(checked) =>
+                updateConfig({ showBorder: checked })
+              }
+            />
+          </div>
+
+          {/* 간격 설정 */}
+          <div className="space-y-2">
+            <Label htmlFor="spacing" className="text-xs">
+              섹션 간격
+            </Label>
+            <Select
+              value={localConfig.spacing || "normal"}
+              onValueChange={(value: any) => updateConfig({ spacing: value })}
+            >
+              <SelectTrigger className="h-8 text-xs">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="tight">좁게</SelectItem>
+                <SelectItem value="normal">보통</SelectItem>
+                <SelectItem value="loose">넓게</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
diff --git a/frontend/lib/registry/components/conditional-container/ConditionalContainerRenderer.tsx b/frontend/lib/registry/components/conditional-container/ConditionalContainerRenderer.tsx
new file mode 100644
index 00000000..a057590a
--- /dev/null
+++ b/frontend/lib/registry/components/conditional-container/ConditionalContainerRenderer.tsx
@@ -0,0 +1,20 @@
+"use client";
+
+import React from "react";
+import { ComponentRegistry } from "@/lib/registry/ComponentRegistry";
+import ConditionalContainerDefinition from "./index";
+import { ConditionalContainerComponent } from "./ConditionalContainerComponent";
+import { ConditionalContainerConfigPanel } from "./ConditionalContainerConfigPanel";
+
+// 컴포넌트 자동 등록
+if (typeof window !== "undefined") {
+  ComponentRegistry.registerComponent({
+    ...ConditionalContainerDefinition,
+    component: ConditionalContainerComponent,
+    renderer: ConditionalContainerComponent,
+    configPanel: ConditionalContainerConfigPanel,
+  } as any);
+}
+
+export { ConditionalContainerComponent };
+
diff --git a/frontend/lib/registry/components/conditional-container/ConditionalSectionViewer.tsx b/frontend/lib/registry/components/conditional-container/ConditionalSectionViewer.tsx
new file mode 100644
index 00000000..c660a0a8
--- /dev/null
+++ b/frontend/lib/registry/components/conditional-container/ConditionalSectionViewer.tsx
@@ -0,0 +1,161 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+import { ConditionalSectionViewerProps } from "./types";
+import { RealtimePreview } from "@/components/screen/RealtimePreviewDynamic";
+import { cn } from "@/lib/utils";
+import { Loader2 } from "lucide-react";
+import { screenApi } from "@/lib/api/screen";
+import { ComponentData } from "@/types/screen";
+import { useAuth } from "@/hooks/useAuth";
+
+/**
+ * 조건부 섹션 뷰어 컴포넌트
+ * 각 조건에 해당하는 화면을 표시
+ */
+export function ConditionalSectionViewer({
+  sectionId,
+  condition,
+  label,
+  screenId,
+  screenName,
+  isActive,
+  isDesignMode,
+  showBorder = true,
+  formData,
+  onFormDataChange,
+}: ConditionalSectionViewerProps) {
+  const { userId, userName, user } = useAuth();
+  const [isLoading, setIsLoading] = useState(false);
+  const [components, setComponents] = useState<ComponentData[]>([]);
+  const [screenInfo, setScreenInfo] = useState<{ id: number; tableName?: string } | null>(null);
+  const [screenResolution, setScreenResolution] = useState<{ width: number; height: number } | null>(null);
+
+  // 화면 로드
+  useEffect(() => {
+    if (!screenId) {
+      setComponents([]);
+      setScreenInfo(null);
+      setScreenResolution(null);
+      return;
+    }
+
+    const loadScreen = async () => {
+      setIsLoading(true);
+      try {
+        const [layout, screen] = await Promise.all([screenApi.getLayout(screenId), screenApi.getScreen(screenId)]);
+
+        setComponents(layout.components || []);
+        setScreenInfo({
+          id: screenId,
+          tableName: screen.tableName,
+        });
+        setScreenResolution(layout.screenResolution || null);
+      } catch (error) {
+        console.error("화면 로드 실패:", error);
+        setComponents([]);
+        setScreenInfo(null);
+        setScreenResolution(null);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    loadScreen();
+  }, [screenId]);
+
+  // 디자인 모드가 아니고 비활성 섹션이면 렌더링하지 않음
+  if (!isDesignMode && !isActive) {
+    return null;
+  }
+
+  return (
+    <div
+      className={cn(
+        "relative w-full transition-all",
+        isDesignMode && showBorder && "border-muted-foreground/30 bg-muted/20 rounded-lg border-2 border-dashed",
+        !isDesignMode && !isActive && "hidden",
+      )}
+      style={{
+        minHeight: isDesignMode ? "200px" : undefined,
+      }}
+      data-section-id={sectionId}
+    >
+      {/* 섹션 라벨 (디자인 모드에서만 표시) */}
+      {isDesignMode && (
+        <div className="bg-background text-muted-foreground absolute -top-3 left-4 z-10 px-2 text-xs font-medium">
+          {label} {isActive && "(활성)"}
+          {screenId && ` - 화면 ID: ${screenId}`}
+        </div>
+      )}
+
+      {/* 화면 미선택 안내 (디자인 모드 + 화면 없을 때) */}
+      {isDesignMode && !screenId && (
+        <div className="absolute inset-0 flex items-center justify-center">
+          <div className="text-muted-foreground text-center">
+            <p className="text-sm">설정 패널에서 화면을 선택하세요</p>
+            <p className="mt-1 text-xs">조건: {condition}</p>
+          </div>
+        </div>
+      )}
+
+      {/* 로딩 중 */}
+      {isLoading && (
+        <div className="bg-background/50 absolute inset-0 z-20 flex items-center justify-center">
+          <div className="flex flex-col items-center gap-2">
+            <Loader2 className="text-primary h-6 w-6 animate-spin" />
+            <p className="text-muted-foreground text-xs">화면 로드 중...</p>
+          </div>
+        </div>
+      )}
+
+      {/* 화면 렌더링 */}
+      {screenId && components.length > 0 && (
+        <>
+          {isDesignMode ? (
+            /* 디자인 모드: 화면 정보만 표시 */
+            <div className="absolute inset-0 flex items-center justify-center">
+              <div className="text-center">
+                <p className="text-foreground mb-2 text-sm font-medium">{screenName || `화면 ID: ${screenId}`}</p>
+                <p className="text-muted-foreground text-xs">
+                  {screenResolution?.width} x {screenResolution?.height}
+                </p>
+                <p className="text-muted-foreground mt-1 text-xs">컴포넌트 {components.length}개</p>
+              </div>
+            </div>
+          ) : (
+            /* 실행 모드: 실제 화면 렌더링 */
+            <div className="w-full">
+              {/* 화면 크기만큼의 절대 위치 캔버스 */}
+              <div
+                className="relative mx-auto"
+                style={{
+                  width: screenResolution?.width ? `${screenResolution.width}px` : "100%",
+                  height: screenResolution?.height ? `${screenResolution.height}px` : "auto",
+                  minHeight: "200px",
+                }}
+              >
+                {components.map((component) => (
+                  <RealtimePreview
+                    key={component.id}
+                    component={component}
+                    isSelected={false}
+                    isDesignMode={false}
+                    onClick={() => {}}
+                    screenId={screenInfo?.id}
+                    tableName={screenInfo?.tableName}
+                    userId={userId}
+                    userName={userName}
+                    companyCode={user?.companyCode}
+                    formData={formData}
+                    onFormDataChange={onFormDataChange}
+                  />
+                ))}
+              </div>
+            </div>
+          )}
+        </>
+      )}
+    </div>
+  );
+}
diff --git a/frontend/lib/registry/components/conditional-container/README.md b/frontend/lib/registry/components/conditional-container/README.md
new file mode 100644
index 00000000..bbd87911
--- /dev/null
+++ b/frontend/lib/registry/components/conditional-container/README.md
@@ -0,0 +1,293 @@
+# 조건부 컨테이너 (ConditionalContainer) - 화면 선택 방식
+
+제어 셀렉트박스 값에 따라 다른 **화면**을 표시하는 조건부 컨테이너 컴포넌트입니다.
+
+## 📋 개요
+
+화면 편집기에서 조건별로 표시할 화면을 선택하여 조건부 UI를 구성할 수 있는 컨테이너입니다. 상단의 셀렉트박스 값에 따라 하단에 미리 만들어진 화면을 표시합니다.
+
+## ✨ 주요 기능
+
+- ✅ **조건별 화면 전환**: 셀렉트박스 값에 따라 다른 화면 표시
+- ✅ **화면 재사용**: 기존에 만든 화면을 조건별로 할당
+- ✅ **간편한 구성**: 복잡한 입력 폼도 화면 선택으로 간단히 구성
+- ✅ **자동 동기화**: 화면 수정 시 자동 반영
+- ✅ **폼 데이터 연동**: formData와 자동 동기화
+- ✅ **커스터마이징**: 테두리, 간격, 기본값 등 설정 가능
+
+## 🎯 사용 사례
+
+### 1. 입력 방식 선택
+```
+[셀렉트: 입력 방식]
+├─ 거래처 우선: "거래처_우선_입력_화면" (화면 ID: 101)
+├─ 견적서 기반: "견적서_업로드_화면" (화면 ID: 102)
+└─ 단가 직접입력: "단가_직접입력_화면" (화면 ID: 103)
+```
+
+### 2. 판매 유형 선택
+```
+[셀렉트: 판매 유형]
+├─ 국내 판매: "국내판매_기본폼" (화면 ID: 201)
+└─ 해외 판매: "해외판매_무역정보폼" (화면 ID: 202)
+```
+
+### 3. 문서 유형 선택
+```
+[셀렉트: 문서 유형]
+├─ 신규 작성: "신규문서_입력폼" (화면 ID: 301)
+├─ 복사 생성: "문서복사_화면" (화면 ID: 302)
+└─ 불러오기: "파일업로드_화면" (화면 ID: 303)
+```
+
+## 📐 구조
+
+```
+┌─────────────────────────────────┐
+│  ConditionalContainer           │
+├─────────────────────────────────┤
+│  [제어 셀렉트박스]               │  ← controlField, controlLabel
+├─────────────────────────────────┤
+│  📄 조건 1: "옵션 A" 선택 시     │  ← sections[0]
+│  ┌─────────────────────────────┐│
+│  │ [선택된 화면이 표시됨]      ││  ← screenId로 지정된 화면
+│  │ (화면 ID: 101)              ││
+│  │                             ││
+│  └─────────────────────────────┘│
+├─────────────────────────────────┤
+│  📄 조건 2: "옵션 B" 선택 시     │  ← sections[1]
+│  ┌─────────────────────────────┐│
+│  │ [다른 화면이 표시됨]        ││  ← screenId로 지정된 다른 화면
+│  │ (화면 ID: 102)              ││
+│  └─────────────────────────────┘│
+└─────────────────────────────────┘
+```
+
+## 🔧 설정 방법
+
+### 1. 컴포넌트 추가
+화면 편집기의 컴포넌트 패널에서 **"조건부 컨테이너"**를 드래그하여 캔버스에 배치합니다.
+
+### 2. 설정 패널에서 구성
+
+#### 제어 필드 설정
+- **제어 필드명**: formData에 저장될 필드명 (예: `inputMode`)
+- **셀렉트박스 라벨**: 화면에 표시될 라벨 (예: "입력 방식")
+
+#### 조건별 섹션 추가
+1. **"섹션 추가"** 버튼 클릭
+2. 각 섹션 설정:
+   - **조건 값**: 고유한 값 (예: `customer_first`)
+   - **표시 라벨**: 사용자에게 보이는 텍스트 (예: "거래처 우선")
+
+#### 기본값 설정
+- 처음 화면 로드 시 선택될 기본 조건 선택
+
+#### 스타일 설정
+- **섹션 테두리 표시**: ON/OFF
+- **섹션 간격**: 좁게 / 보통 / 넓게
+
+### 3. 조건별 화면 선택
+
+1. **디자인 모드**에서 모든 조건 섹션이 표시됩니다
+2. 각 섹션의 **"표시할 화면"** 드롭다운에서 화면을 선택합니다
+3. 선택된 화면 ID와 이름이 자동으로 저장됩니다
+
+**장점:**
+- ✅ 이미 만든 화면을 재사용
+- ✅ 복잡한 입력 폼도 간단히 구성
+- ✅ 화면 수정 시 자동 반영
+
+### 4. 실행 모드 동작
+
+- 셀렉트박스에서 조건 선택
+- 선택된 조건의 **화면**이 표시됨
+- 다른 조건의 화면은 자동으로 숨김
+
+## 💻 기술 사양
+
+### Props
+
+```typescript
+interface ConditionalContainerProps {
+  // 제어 필드
+  controlField: string;        // 예: "inputMode"
+  controlLabel: string;        // 예: "입력 방식"
+  
+  // 조건별 섹션
+  sections: ConditionalSection[];
+  
+  // 기본값
+  defaultValue?: string;
+  
+  // 스타일
+  showBorder?: boolean;        // 기본: true
+  spacing?: "tight" | "normal" | "loose"; // 기본: "normal"
+  
+  // 폼 연동
+  formData?: Record<string, any>;
+  onFormDataChange?: (fieldName: string, value: any) => void;
+}
+
+interface ConditionalSection {
+  id: string;                  // 고유 ID
+  condition: string;           // 조건 값
+  label: string;               // 표시 라벨
+  screenId: number | null;     // 표시할 화면 ID
+  screenName?: string;         // 화면 이름 (표시용)
+}
+```
+
+### 기본 설정
+
+```typescript
+defaultSize: {
+  width: 800,
+  height: 600,
+}
+
+defaultConfig: {
+  controlField: "condition",
+  controlLabel: "조건 선택",
+  sections: [
+    {
+      id: "section_1",
+      condition: "option1",
+      label: "옵션 1",
+      screenId: null,      // 화면 미선택 상태
+    },
+    {
+      id: "section_2",
+      condition: "option2",
+      label: "옵션 2",
+      screenId: null,      // 화면 미선택 상태
+    },
+  ],
+  defaultValue: "option1",
+  showBorder: true,
+  spacing: "normal",
+}
+```
+
+## 🎨 디자인 모드 vs 실행 모드
+
+### 디자인 모드 (편집기)
+- ✅ 모든 조건 섹션 표시
+- ✅ 각 섹션에 "조건: XXX" 라벨 표시
+- ✅ 화면 선택 안내 메시지 (미선택 시)
+- ✅ 선택된 화면 ID 표시
+- ✅ 활성 조건 "(활성)" 표시
+
+### 실행 모드 (할당된 화면)
+- ✅ 선택된 조건의 화면만 표시
+- ✅ 다른 조건의 화면 자동 숨김
+- ✅ 깔끔한 UI (라벨, 점선 테두리 제거)
+- ✅ 선택된 화면이 완전히 통합되어 표시
+
+## 📊 폼 데이터 연동
+
+### 자동 동기화
+```typescript
+// formData 읽기
+formData[controlField] // 현재 선택된 값
+
+// formData 쓰기
+onFormDataChange(controlField, newValue)
+```
+
+### 예시
+```typescript
+// controlField = "salesType"
+formData = {
+  salesType: "export",  // ← 자동으로 여기에 저장됨
+  // ... 다른 필드들
+}
+
+// 셀렉트박스 값 변경 시 자동으로 formData 업데이트
+```
+
+## 🔍 주의사항
+
+1. **조건 값은 고유해야 함**: 각 섹션의 `condition` 값은 중복되면 안 됩니다
+2. **최소 1개 섹션 필요**: 섹션이 없으면 안내 메시지 표시
+3. **컴포넌트 ID 충돌 방지**: 각 섹션의 컴포넌트 ID는 전역적으로 고유해야 함
+
+## 📝 예시: 수주 입력 방식 선택
+
+```typescript
+{
+  controlField: "inputMode",
+  controlLabel: "입력 방식",
+  sections: [
+    {
+      id: "customer_first",
+      condition: "customer_first",
+      label: "거래처 우선",
+      components: [
+        // 거래처 검색 컴포넌트
+        // 품목 선택 테이블
+        // 저장 버튼
+      ]
+    },
+    {
+      id: "quotation",
+      condition: "quotation",
+      label: "견적서 기반",
+      components: [
+        // 견적서 검색 컴포넌트
+        // 견적서 내용 표시
+        // 수주 전환 버튼
+      ]
+    },
+    {
+      id: "unit_price",
+      condition: "unit_price",
+      label: "단가 직접입력",
+      components: [
+        // 품목 입력 테이블
+        // 단가 입력 필드들
+        // 계산 위젯
+      ]
+    }
+  ],
+  defaultValue: "customer_first",
+  showBorder: true,
+  spacing: "normal"
+}
+```
+
+## 🚀 로드맵
+
+- [ ] 다중 제어 필드 지원 (AND/OR 조건)
+- [ ] 섹션 전환 애니메이션
+- [ ] 조건별 검증 규칙
+- [ ] 템플릿 저장/불러오기
+
+## 🐛 트러블슈팅
+
+### Q: 섹션이 전환되지 않아요
+A: `controlField` 값이 formData에 제대로 저장되고 있는지 확인하세요.
+
+### Q: 컴포넌트가 드롭되지 않아요
+A: 디자인 모드인지 확인하고, 드롭존 영역에 정확히 드롭하세요.
+
+### Q: 다른 조건의 UI가 계속 보여요
+A: 실행 모드로 전환했는지 확인하세요. 디자인 모드에서는 모든 조건이 표시됩니다.
+
+## 📦 파일 구조
+
+```
+conditional-container/
+├── types.ts                              # 타입 정의
+├── ConditionalContainerComponent.tsx     # 메인 컴포넌트
+├── ConditionalSectionDropZone.tsx        # 드롭존 컴포넌트
+├── ConditionalContainerConfigPanel.tsx   # 설정 패널
+├── ConditionalContainerRenderer.tsx      # 렌더러 및 등록
+├── index.ts                              # 컴포넌트 정의
+└── README.md                             # 이 파일
+```
+
+## 🎉 완료!
+
+이제 화면 편집기에서 **조건부 컨테이너**를 사용하여 동적인 UI를 만들 수 있습니다! 🚀
+
diff --git a/frontend/lib/registry/components/conditional-container/index.ts b/frontend/lib/registry/components/conditional-container/index.ts
new file mode 100644
index 00000000..e4e31feb
--- /dev/null
+++ b/frontend/lib/registry/components/conditional-container/index.ts
@@ -0,0 +1,96 @@
+/**
+ * 조건부 컨테이너 컴포넌트
+ * 제어 셀렉트박스 값에 따라 다른 UI를 표시하는 컨테이너
+ */
+
+import { ComponentDefinition, ComponentCategory } from "@/types/component";
+
+export const ConditionalContainerDefinition: Omit<
+  ComponentDefinition,
+  "renderer" | "configPanel" | "component"
+> = {
+  id: "conditional-container",
+  name: "조건부 컨테이너",
+  category: ComponentCategory.LAYOUT,
+  webType: "container" as const,
+  description: "셀렉트박스 값에 따라 다른 UI를 표시하는 조건부 컨테이너",
+  icon: "GitBranch",
+  version: "1.0.0",
+  author: "WACE",
+  tags: ["조건부", "분기", "동적", "레이아웃"],
+
+  defaultSize: {
+    width: 1400,
+    height: 800,
+  },
+
+  defaultConfig: {
+    controlField: "condition",
+    controlLabel: "조건 선택",
+    sections: [
+      {
+        id: "section_1",
+        condition: "option1",
+        label: "옵션 1",
+        screenId: null,
+      },
+      {
+        id: "section_2",
+        condition: "option2",
+        label: "옵션 2",
+        screenId: null,
+      },
+    ],
+    defaultValue: "option1",
+    showBorder: true,
+    spacing: "normal",
+  },
+
+  defaultProps: {
+    style: {
+      width: "1400px",
+      height: "800px",
+    },
+  },
+
+  configSchema: {
+    controlField: {
+      type: "string",
+      label: "제어 필드명",
+      defaultValue: "condition",
+    },
+    controlLabel: {
+      type: "string",
+      label: "셀렉트박스 라벨",
+      defaultValue: "조건 선택",
+    },
+    sections: {
+      type: "array",
+      label: "조건별 섹션",
+      defaultValue: [],
+    },
+    defaultValue: {
+      type: "string",
+      label: "기본 선택 값",
+      defaultValue: "",
+    },
+    showBorder: {
+      type: "boolean",
+      label: "섹션 테두리 표시",
+      defaultValue: true,
+    },
+    spacing: {
+      type: "select",
+      label: "섹션 간격",
+      options: [
+        { label: "좁게", value: "tight" },
+        { label: "보통", value: "normal" },
+        { label: "넓게", value: "loose" },
+      ],
+      defaultValue: "normal",
+    },
+  },
+};
+
+export default ConditionalContainerDefinition;
+
diff --git a/frontend/lib/registry/components/conditional-container/types.ts b/frontend/lib/registry/components/conditional-container/types.ts
new file mode 100644
index 00000000..6f1964e9
--- /dev/null
+++ b/frontend/lib/registry/components/conditional-container/types.ts
@@ -0,0 +1,79 @@
+/**
+ * ConditionalContainer 컴포넌트 타입 정의
+ * 제어 셀렉트박스 값에 따라 다른 UI를 표시하는 조건부 컨테이너
+ */
+
+import { ComponentData } from "@/types/screen";
+
+export interface ConditionalSection {
+  id: string; // 고유 ID
+  condition: string; // 조건 값 (예: "customer_first", "quotation")
+  label: string; // 조건 라벨 (예: "거래처 우선", "견적서 기반")
+  screenId: number | null; // 이 조건일 때 표시할 화면 ID
+  screenName?: string; // 화면 이름 (표시용)
+}
+
+export interface ConditionalContainerConfig {
+  // 제어 셀렉트박스 설정
+  controlField: string; // 제어할 필드명 (예: "inputMode")
+  controlLabel: string; // 셀렉트박스 라벨 (예: "입력 방식")
+  
+  // 조건별 섹션
+  sections: ConditionalSection[];
+  
+  // 기본 선택 값
+  defaultValue?: string;
+  
+  // 스타일
+  showBorder?: boolean; // 섹션별 테두리 표시
+  spacing?: "tight" | "normal" | "loose"; // 섹션 간격
+}
+
+export interface ConditionalContainerProps {
+  config?: ConditionalContainerConfig;
+  
+  // 개별 props (config 우선)
+  controlField?: string;
+  controlLabel?: string;
+  sections?: ConditionalSection[];
+  defaultValue?: string;
+  showBorder?: boolean;
+  spacing?: "tight" | "normal" | "loose";
+  
+  // 폼 데이터 연동
+  value?: any; // 현재 선택된 값
+  onChange?: (value: string) => void;
+  formData?: Record<string, any>;
+  onFormDataChange?: (fieldName: string, value: any) => void;
+  
+  // 화면 편집기 관련
+  isDesignMode?: boolean; // 디자인 모드 여부
+  onUpdateComponent?: (componentId: string, updates: Partial<ComponentData>) => void;
+  onDeleteComponent?: (componentId: string) => void;
+  onSelectComponent?: (componentId: string) => void;
+  selectedComponentId?: string;
+  
+  // 높이 변화 알림 (아래 컴포넌트 재배치용)
+  onHeightChange?: (newHeight: number) => void;
+  componentId?: string; // 자신의 컴포넌트 ID
+  
+  // 스타일
+  style?: React.CSSProperties;
+  className?: string;
+}
+
+// 조건부 섹션 뷰어 Props
+export interface ConditionalSectionViewerProps {
+  sectionId: string;
+  condition: string;
+  label: string;
+  screenId: number | null; // 표시할 화면 ID
+  screenName?: string; // 화면 이름
+  isActive: boolean; // 현재 조건이 활성화되어 있는지
+  isDesignMode: boolean;
+  showBorder?: boolean;
+  // 폼 데이터 전달
+  formData?: Record<string, any>;
+  onFormDataChange?: (fieldName: string, value: any) => void;
+}
+
diff --git a/frontend/lib/registry/components/customer-item-mapping/CustomerItemMappingComponent.tsx b/frontend/lib/registry/components/customer-item-mapping/CustomerItemMappingComponent.tsx
new file mode 100644
index 00000000..178f8a4a
--- /dev/null
+++ b/frontend/lib/registry/components/customer-item-mapping/CustomerItemMappingComponent.tsx
@@ -0,0 +1,266 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+import { CustomerItemMappingConfig } from "./types";
+import { Checkbox } from "@/components/ui/checkbox";
+import { X } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+export interface CustomerItemMappingComponentProps {
+  component: any;
+  isDesignMode?: boolean;
+  isSelected?: boolean;
+  isInteractive?: boolean;
+  config?: CustomerItemMappingConfig;
+  className?: string;
+  style?: React.CSSProperties;
+  onClick?: (e?: React.MouseEvent) => void;
+  onDragStart?: (e: React.DragEvent) => void;
+  onDragEnd?: (e: React.DragEvent) => void;
+}
+
+export const CustomerItemMappingComponent: React.FC<CustomerItemMappingComponentProps> = ({
+  component,
+  isDesignMode = false,
+  isSelected = false,
+  config,
+  className,
+  style,
+  onClick,
+  onDragStart,
+  onDragEnd,
+}) => {
+  const finalConfig = {
+    ...config,
+    ...component.config,
+  } as CustomerItemMappingConfig;
+
+  const [data, setData] = useState<any[]>([]);
+  const [selectedRows, setSelectedRows] = useState<Set<string>>(new Set());
+  const [isAllSelected, setIsAllSelected] = useState(false);
+
+  // 데이터 로드 (실제 구현 시 API 호출)
+  useEffect(() => {
+    if (!isDesignMode && finalConfig.selectedTable) {
+      // TODO: API 호출로 데이터 로드
+      setData([]);
+    }
+  }, [finalConfig.selectedTable, isDesignMode]);
+
+  const handleSelectAll = (checked: boolean) => {
+    if (checked) {
+      const allIds = data.map((_, index) => `row-${index}`);
+      setSelectedRows(new Set(allIds));
+      setIsAllSelected(true);
+    } else {
+      setSelectedRows(new Set());
+      setIsAllSelected(false);
+    }
+  };
+
+  const handleRowSelection = (rowId: string, checked: boolean) => {
+    const newSelected = new Set(selectedRows);
+    if (checked) {
+      newSelected.add(rowId);
+    } else {
+      newSelected.delete(rowId);
+    }
+    setSelectedRows(newSelected);
+    setIsAllSelected(newSelected.size === data.length && data.length > 0);
+  };
+
+  const columns = finalConfig.columns || [];
+  const showCheckbox = finalConfig.checkbox?.enabled !== false;
+
+  // 스타일 계산
+  const componentStyle: React.CSSProperties = {
+    position: "relative",
+    display: "flex",
+    flexDirection: "column",
+    backgroundColor: "hsl(var(--background))",
+    overflow: "hidden",
+    boxSizing: "border-box",
+    width: "100%",
+    height: "100%",
+    minHeight: isDesignMode ? "300px" : "100%",
+    ...style, // style prop이 위의 기본값들을 덮어씀
+  };
+
+  // 이벤트 핸들러
+  const handleClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    onClick?.();
+  };
+
+  return (
+    <div
+      className={cn("w-full h-full", className)}
+      style={componentStyle}
+      onClick={handleClick}
+      onDragStart={isDesignMode ? onDragStart : undefined}
+      onDragEnd={isDesignMode ? onDragEnd : undefined}
+      draggable={isDesignMode}
+    >
+      {/* 헤더 */}
+      <div className="w-full border-border bg-muted flex h-12 flex-shrink-0 items-center justify-between border-b px-4 sm:h-14 sm:px-6">
+        <h3 className="text-sm font-semibold sm:text-base">
+          품목 추가 - {finalConfig.selectedTable || "[테이블 선택]"}
+          {finalConfig.showCompanyName && finalConfig.companyNameColumn && (
+            <span className="text-muted-foreground ml-2 text-xs font-normal sm:text-sm">
+              | {finalConfig.companyNameColumn}
+            </span>
+          )}
+        </h3>
+        <button className="hover:bg-muted-foreground/10 rounded p-1">
+          <X className="h-4 w-4 sm:h-5 sm:w-5" />
+        </button>
+      </div>
+
+      {/* 검색/카테고리 영역 */}
+      {finalConfig.showSearchArea && (
+        <div className="w-full border-border bg-background flex-shrink-0 border-b p-3 sm:p-4">
+          <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:gap-4">
+            {/* 검색 입력 */}
+            <div className="flex-1">
+              <div className="relative">
+                <input
+                  type="text"
+                  placeholder={finalConfig.searchPlaceholder || "품목코드, 품목명, 규격 검색"}
+                  className="border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring h-9 w-full rounded-md border px-3 py-1 text-xs focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 sm:h-10 sm:text-sm"
+                  disabled={isDesignMode}
+                />
+              </div>
+            </div>
+
+            {/* 카테고리 필터 */}
+            {finalConfig.enableCategoryFilter && (
+              <div className="w-full sm:w-auto sm:min-w-[160px]">
+                <select
+                  className="border-input bg-background ring-offset-background focus-visible:ring-ring h-9 w-full rounded-md border px-3 py-1 text-xs focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 sm:h-10 sm:text-sm"
+                  disabled={isDesignMode}
+                >
+                  {(finalConfig.categories || ["전체"]).map((category, idx) => (
+                    <option key={idx} value={category}>
+                      {category}
+                    </option>
+                  ))}
+                </select>
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+
+      {/* 목록 헤더 */}
+      <div className="w-full border-border bg-muted/50 flex h-10 flex-shrink-0 items-center justify-between border-b px-4 sm:h-12 sm:px-6">
+        <span className="text-xs font-semibold sm:text-sm">판매품목 목록</span>
+        <div className="flex items-center gap-3 sm:gap-6">
+          {showCheckbox && finalConfig.checkbox?.selectAll && (
+            <label className="flex cursor-pointer items-center gap-2">
+              <Checkbox checked={isAllSelected} onCheckedChange={handleSelectAll} />
+              <span className="text-xs sm:text-sm">전체 선택</span>
+            </label>
+          )}
+          <span className="text-muted-foreground text-xs font-medium sm:text-sm">
+            선택: {selectedRows.size}개
+          </span>
+        </div>
+      </div>
+
+      {/* 테이블 컨테이너 */}
+      <div className="flex w-full flex-1 flex-col overflow-hidden">
+        {/* 테이블 헤더 */}
+        {columns.length > 0 && (
+          <div className="border-border flex-shrink-0 border-b">
+            <div className="overflow-x-auto">
+              <table className="w-full" style={{ minWidth: "100%" }}>
+                <thead>
+                  <tr className="bg-muted/30 h-10 sm:h-12">
+                    {showCheckbox && (
+                      <th className="border-border w-12 border-r px-2 text-center sm:w-16 sm:px-3"></th>
+                    )}
+                    {columns.map((col, index) => (
+                      <th
+                        key={col}
+                        className={cn(
+                          "border-border text-foreground px-3 text-left text-xs font-semibold sm:px-6 sm:text-sm",
+                          index < columns.length - 1 && "border-r"
+                        )}
+                      >
+                        {col}
+                      </th>
+                    ))}
+                  </tr>
+                </thead>
+              </table>
+            </div>
+          </div>
+        )}
+
+        {/* 데이터 영역 */}
+        <div className="flex-1 overflow-y-auto">
+          {data.length === 0 ? (
+            <div className="flex h-full flex-col items-center justify-center gap-3 p-8 text-center sm:gap-4 sm:p-12">
+              <div className="bg-muted/50 flex h-16 w-16 items-center justify-center rounded-full sm:h-20 sm:w-20">
+                <svg
+                  className="text-muted-foreground h-8 w-8 sm:h-10 sm:w-10"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"
+                  />
+                </svg>
+              </div>
+              <div className="space-y-1 sm:space-y-2">
+                <p className="text-foreground text-base font-semibold sm:text-lg">
+                  {finalConfig.emptyMessage || "데이터가 없습니다"}
+                </p>
+                <p className="text-muted-foreground text-xs sm:text-sm">
+                  {finalConfig.emptyDescription || "품목 데이터가 추가되면 여기에 표시됩니다"}
+                </p>
+              </div>
+            </div>
+          ) : (
+            <div className="overflow-x-auto">
+              <table className="w-full" style={{ minWidth: "100%" }}>
+                <tbody>
+                  {data.map((row, index) => (
+                    <tr key={index} className="hover:bg-muted/50 border-b transition-colors">
+                      {showCheckbox && (
+                        <td className="border-border w-12 border-r px-2 text-center sm:w-16 sm:px-3">
+                          <Checkbox
+                            checked={selectedRows.has(`row-${index}`)}
+                            onCheckedChange={(checked) =>
+                              handleRowSelection(`row-${index}`, checked as boolean)
+                            }
+                          />
+                        </td>
+                      )}
+                      {columns.map((col, colIndex) => (
+                        <td
+                          key={col}
+                          className={cn(
+                            "border-border px-3 py-2 text-xs sm:px-6 sm:py-3 sm:text-sm",
+                            colIndex < columns.length - 1 && "border-r"
+                          )}
+                        >
+                          {row[col] || "-"}
+                        </td>
+                      ))}
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
diff --git a/frontend/lib/registry/components/customer-item-mapping/CustomerItemMappingConfigPanel.tsx b/frontend/lib/registry/components/customer-item-mapping/CustomerItemMappingConfigPanel.tsx
new file mode 100644
index 00000000..5aead062
--- /dev/null
+++ b/frontend/lib/registry/components/customer-item-mapping/CustomerItemMappingConfigPanel.tsx
@@ -0,0 +1,397 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+import { Label } from "@/components/ui/label";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import { CustomerItemMappingConfig } from "./types";
+import { tableTypeApi } from "@/lib/api/screen";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Plus, X } from "lucide-react";
+
+export interface CustomerItemMappingConfigPanelProps {
+  config: CustomerItemMappingConfig;
+  onChange: (config: CustomerItemMappingConfig) => void;
+  onConfigChange?: (config: CustomerItemMappingConfig) => void;
+  screenTableName?: string;
+  tableColumns?: any[];
+  tables?: any[];
+  allTables?: any[];
+  onTableChange?: (tableName: string) => void;
+  menuObjid?: number;
+}
+
+export const CustomerItemMappingConfigPanel: React.FC<
+  CustomerItemMappingConfigPanelProps
+> = ({ 
+  config, 
+  onChange, 
+  onConfigChange,
+  screenTableName,
+  tableColumns: propTableColumns,
+  tables: propTables,
+  allTables,
+  onTableChange: propOnTableChange,
+  menuObjid,
+}) => {
+  // onChange와 onConfigChange를 통합
+  const handleChange = (newConfig: CustomerItemMappingConfig) => {
+    onChange?.(newConfig);
+    onConfigChange?.(newConfig);
+  };
+  const [tables, setTables] = useState<any[]>([]);
+  const [availableColumns, setAvailableColumns] = useState<any[]>([]);
+
+  // 테이블 목록 로드
+  useEffect(() => {
+    const loadTables = async () => {
+      try {
+        const tableList = await tableTypeApi.getTables();
+        setTables(tableList);
+      } catch (error) {
+        console.error("테이블 목록 로드 실패:", error);
+      }
+    };
+    loadTables();
+  }, []);
+
+  // 선택된 테이블의 컬럼 목록 로드
+  useEffect(() => {
+    if (config.selectedTable) {
+      const loadColumns = async () => {
+        try {
+          const columns = await tableTypeApi.getColumns(config.selectedTable!);
+          setAvailableColumns(columns);
+        } catch (error) {
+          console.error("컬럼 목록 로드 실패:", error);
+        }
+      };
+      loadColumns();
+    }
+  }, [config.selectedTable]);
+
+  const handleTableChange = (tableName: string) => {
+    const newConfig = {
+      ...config,
+      selectedTable: tableName,
+      columns: [], // 테이블 변경 시 컬럼 초기화
+    };
+    handleChange(newConfig);
+    propOnTableChange?.(tableName);
+  };
+
+  const handleAddColumn = (columnName: string) => {
+    if (!config.columns.includes(columnName)) {
+      handleChange({
+        ...config,
+        columns: [...config.columns, columnName],
+      });
+    }
+  };
+
+  const handleRemoveColumn = (columnName: string) => {
+    handleChange({
+      ...config,
+      columns: config.columns.filter((col) => col !== columnName),
+    });
+  };
+
+  return (
+    <div className="space-y-6 p-4">
+      {/* 테이블 선택 */}
+      <div className="space-y-2">
+        <Label>테이블 선택</Label>
+        <Select value={config.selectedTable} onValueChange={handleTableChange}>
+          <SelectTrigger>
+            <SelectValue placeholder="테이블을 선택하세요" />
+          </SelectTrigger>
+          <SelectContent>
+            {tables.map((table) => (
+              <SelectItem key={table.tableName} value={table.tableName}>
+                {table.displayName || table.tableName}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
+
+      {/* 컬럼 설정 */}
+      <div className="space-y-2">
+        <Label>표시할 컬럼</Label>
+        <div className="space-y-2">
+          {/* 선택된 컬럼 목록 */}
+          {config.columns.length > 0 && (
+            <div className="border-border space-y-1 rounded border p-2">
+              {config.columns.map((col, index) => (
+                <div
+                  key={col}
+                  className="bg-muted flex items-center justify-between rounded px-2 py-1"
+                >
+                  <span className="text-sm">{col}</span>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => handleRemoveColumn(col)}
+                    className="h-6 w-6 p-0"
+                  >
+                    <X className="h-3 w-3" />
+                  </Button>
+                </div>
+              ))}
+            </div>
+          )}
+
+          {/* 컬럼 추가 */}
+          {availableColumns.length > 0 && (
+            <Select onValueChange={handleAddColumn}>
+              <SelectTrigger>
+                <SelectValue placeholder="컬럼 추가" />
+              </SelectTrigger>
+              <SelectContent>
+                {availableColumns
+                  .filter((col) => !config.columns.includes(col.columnName))
+                  .map((col) => (
+                    <SelectItem key={col.columnName} value={col.columnName}>
+                      {col.displayName || col.columnName}
+                    </SelectItem>
+                  ))}
+              </SelectContent>
+            </Select>
+          )}
+        </div>
+      </div>
+
+      {/* 체크박스 설정 */}
+      <div className="space-y-3">
+        <Label>체크박스 옵션</Label>
+        <div className="space-y-2">
+          <label className="flex items-center gap-2">
+            <Checkbox
+              checked={config.checkbox?.enabled !== false}
+              onCheckedChange={(checked) =>
+                handleChange({
+                  ...config,
+                  checkbox: {
+                    ...config.checkbox,
+                    enabled: checked as boolean,
+                  },
+                })
+              }
+            />
+            <span className="text-sm">체크박스 표시</span>
+          </label>
+
+          <label className="flex items-center gap-2">
+            <Checkbox
+              checked={config.checkbox?.selectAll !== false}
+              onCheckedChange={(checked) =>
+                handleChange({
+                  ...config,
+                  checkbox: {
+                    ...config.checkbox,
+                    selectAll: checked as boolean,
+                  },
+                })
+              }
+            />
+            <span className="text-sm">전체 선택 표시</span>
+          </label>
+
+          <label className="flex items-center gap-2">
+            <Checkbox
+              checked={config.checkbox?.multiple !== false}
+              onCheckedChange={(checked) =>
+                handleChange({
+                  ...config,
+                  checkbox: {
+                    ...config.checkbox,
+                    multiple: checked as boolean,
+                  },
+                })
+              }
+            />
+            <span className="text-sm">다중 선택 허용</span>
+          </label>
+        </div>
+      </div>
+
+      {/* 헤더 설정 */}
+      <div className="space-y-3">
+        <Label>헤더 설정</Label>
+        <label className="flex items-center gap-2">
+          <Checkbox
+            checked={config.showCompanyName === true}
+            onCheckedChange={(checked) =>
+              handleChange({
+                ...config,
+                showCompanyName: checked as boolean,
+              })
+            }
+          />
+          <span className="text-sm font-medium">회사명 표시</span>
+        </label>
+
+        {config.showCompanyName && availableColumns.length > 0 && (
+          <div className="space-y-2 pl-6">
+            <Label className="text-xs">회사명 컬럼</Label>
+            <Select
+              value={config.companyNameColumn || ""}
+              onValueChange={(value) =>
+                handleChange({
+                  ...config,
+                  companyNameColumn: value,
+                })
+              }
+            >
+              <SelectTrigger className="h-8 text-xs">
+                <SelectValue placeholder="컬럼 선택" />
+              </SelectTrigger>
+              <SelectContent>
+                {availableColumns.map((col) => (
+                  <SelectItem key={col.columnName} value={col.columnName} className="text-xs">
+                    {col.displayName || col.columnName}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+            <p className="text-muted-foreground text-[10px]">
+              헤더에 표시할 회사명 데이터가 있는 컬럼을 선택하세요
+            </p>
+          </div>
+        )}
+      </div>
+
+      {/* 검색 영역 설정 */}
+      <div className="space-y-3">
+        <Label>검색/필터 영역</Label>
+        
+        <label className="flex items-center gap-2">
+          <Checkbox
+            checked={config.showSearchArea === true}
+            onCheckedChange={(checked) =>
+              handleChange({
+                ...config,
+                showSearchArea: checked as boolean,
+              })
+            }
+          />
+          <span className="text-sm font-medium">
+            검색/필터 영역 표시
+          </span>
+        </label>
+
+        {config.showSearchArea && (
+          <div className="space-y-3 pl-6">
+            <div className="space-y-2">
+              <Label className="text-xs">검색 플레이스홀더</Label>
+              <Input
+                value={config.searchPlaceholder || ""}
+                onChange={(e) =>
+                  handleChange({
+                    ...config,
+                    searchPlaceholder: e.target.value,
+                  })
+                }
+                placeholder="품목코드, 품목명, 규격 검색"
+                className="h-8 text-xs"
+              />
+            </div>
+
+            {/* 카테고리 필터 설정 */}
+            <div className="space-y-2">
+              <label className="flex items-center gap-2">
+                <Checkbox
+                  checked={config.enableCategoryFilter === true}
+                  onCheckedChange={(checked) =>
+                    handleChange({
+                      ...config,
+                      enableCategoryFilter: checked as boolean,
+                    })
+                  }
+                />
+                <span className="text-xs font-medium">카테고리 필터 표시</span>
+              </label>
+
+              {config.enableCategoryFilter && (
+                <div className="space-y-2 pl-6">
+                  <Label className="text-xs">카테고리 목록 (쉼표로 구분)</Label>
+                  <Input
+                    value={(config.categories || []).join(", ")}
+                    onChange={(e) =>
+                      handleChange({
+                        ...config,
+                        categories: e.target.value.split(",").map((c) => c.trim()).filter(Boolean),
+                      })
+                    }
+                    placeholder="전체, 원자재, 반도체, 완제품"
+                    className="h-8 text-xs"
+                  />
+                  <p className="text-muted-foreground text-[10px]">
+                    예: 전체, 원자재, 반도체, 완제품
+                  </p>
+
+                  {availableColumns.length > 0 && (
+                    <>
+                      <Label className="text-xs">카테고리 데이터 컬럼</Label>
+                      <Select
+                        value={config.categoryColumn || ""}
+                        onValueChange={(value) =>
+                          handleChange({
+                            ...config,
+                            categoryColumn: value,
+                          })
+                        }
+                      >
+                        <SelectTrigger className="h-8 text-xs">
+                          <SelectValue placeholder="컬럼 선택" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {availableColumns.map((col) => (
+                            <SelectItem key={col.columnName} value={col.columnName} className="text-xs">
+                              {col.displayName || col.columnName}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    </>
+                  )}
+                </div>
+              )}
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* 빈 데이터 메시지 */}
+      <div className="space-y-2">
+        <Label>빈 데이터 메시지</Label>
+        <Input
+          value={config.emptyMessage || ""}
+          onChange={(e) =>
+            handleChange({ ...config, emptyMessage: e.target.value })
+          }
+          placeholder="데이터가 없습니다"
+        />
+      </div>
+
+      <div className="space-y-2">
+        <Label>빈 데이터 설명</Label>
+        <Input
+          value={config.emptyDescription || ""}
+          onChange={(e) =>
+            handleChange({ ...config, emptyDescription: e.target.value })
+          }
+          placeholder="품목 데이터가 추가되면 여기에 표시됩니다"
+        />
+      </div>
+    </div>
+  );
+};
+
diff --git a/frontend/lib/registry/components/customer-item-mapping/CustomerItemMappingRenderer.tsx b/frontend/lib/registry/components/customer-item-mapping/CustomerItemMappingRenderer.tsx
new file mode 100644
index 00000000..9baebb9b
--- /dev/null
+++ b/frontend/lib/registry/components/customer-item-mapping/CustomerItemMappingRenderer.tsx
@@ -0,0 +1,10 @@
+"use client";
+
+import { ComponentRegistry } from "../../ComponentRegistry";
+import { CustomerItemMappingDefinition } from "./index";
+
+// 컴포넌트 자동 등록
+ComponentRegistry.registerComponent(CustomerItemMappingDefinition);
+
+console.log("✅ CustomerItemMapping 컴포넌트 등록 완료");
+
diff --git a/frontend/lib/registry/components/customer-item-mapping/index.ts b/frontend/lib/registry/components/customer-item-mapping/index.ts
new file mode 100644
index 00000000..a0d9d6c9
--- /dev/null
+++ b/frontend/lib/registry/components/customer-item-mapping/index.ts
@@ -0,0 +1,46 @@
+"use client";
+
+import React from "react";
+import { createComponentDefinition } from "../../utils/createComponentDefinition";
+import { ComponentCategory } from "@/types/component";
+import { CustomerItemMappingComponent } from "./CustomerItemMappingComponent";
+import { CustomerItemMappingConfigPanel } from "./CustomerItemMappingConfigPanel";
+import { CustomerItemMappingConfig } from "./types";
+
+export const CustomerItemMappingDefinition = createComponentDefinition({
+  id: "customer-item-mapping",
+  name: "거래처별 품목정보",
+  nameEng: "Customer Item Mapping",
+  description: "거래처별 품목 정보를 표시하고 선택하는 컴포넌트",
+  category: ComponentCategory.DISPLAY,
+  webType: "text",
+  component: CustomerItemMappingComponent,
+  defaultConfig: {
+    selectedTable: undefined,
+    columns: [],
+    checkbox: {
+      enabled: true,
+      multiple: true,
+      selectAll: true,
+    },
+    showSearchArea: true, // 기본적으로 검색 영역 표시
+    searchAreaHeight: 80,
+    searchPlaceholder: "품목코드, 품목명, 규격 검색",
+    enableCategoryFilter: true, // 기본적으로 카테고리 필터 표시
+    categoryColumn: undefined,
+    categories: ["전체", "원자재", "반도체", "완제품"],
+    showCompanyName: false,
+    companyNameColumn: undefined,
+    emptyMessage: "데이터가 없습니다",
+    emptyDescription: "품목 데이터가 추가되면 여기에 표시됩니다",
+  } as CustomerItemMappingConfig,
+  defaultSize: { width: 800, height: 600 },
+  configPanel: CustomerItemMappingConfigPanel,
+  icon: "Package",
+  tags: ["거래처", "품목", "매핑", "목록"],
+  version: "1.0.0",
+  author: "개발팀",
+});
+
+export type { CustomerItemMappingConfig } from "./types";
+
diff --git a/frontend/lib/registry/components/customer-item-mapping/types.ts b/frontend/lib/registry/components/customer-item-mapping/types.ts
new file mode 100644
index 00000000..68382623
--- /dev/null
+++ b/frontend/lib/registry/components/customer-item-mapping/types.ts
@@ -0,0 +1,33 @@
+export interface CustomerItemMappingConfig {
+  // 테이블 설정
+  selectedTable?: string;
+  
+  // 컬럼 설정
+  columns: string[]; // 표시할 컬럼 목록
+  
+  // 체크박스 설정
+  checkbox: {
+    enabled: boolean;
+    multiple: boolean;
+    selectAll: boolean;
+  };
+  
+  // 검색/필터 영역
+  showSearchArea?: boolean;
+  searchAreaHeight?: number;
+  searchPlaceholder?: string; // 검색 플레이스홀더
+  
+  // 카테고리 필터
+  enableCategoryFilter?: boolean; // 카테고리 필터 활성화
+  categoryColumn?: string; // 카테고리 데이터 컬럼명
+  categories?: string[]; // 카테고리 목록 (예: ["전체", "원자재", "반도체", "완제품"])
+  
+  // 헤더 설정
+  showCompanyName?: boolean; // 회사명 표시 여부
+  companyNameColumn?: string; // 회사명을 가져올 컬럼명
+  
+  // 빈 데이터 메시지
+  emptyMessage?: string;
+  emptyDescription?: string;
+}
+
diff --git a/frontend/lib/registry/components/entity-search-input/EntitySearchInputComponent.tsx b/frontend/lib/registry/components/entity-search-input/EntitySearchInputComponent.tsx
new file mode 100644
index 00000000..cc6be643
--- /dev/null
+++ b/frontend/lib/registry/components/entity-search-input/EntitySearchInputComponent.tsx
@@ -0,0 +1,126 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { Search, X } from "lucide-react";
+import { EntitySearchModal } from "./EntitySearchModal";
+import { EntitySearchInputProps, EntitySearchResult } from "./types";
+import { cn } from "@/lib/utils";
+
+export function EntitySearchInputComponent({
+  tableName,
+  displayField,
+  valueField,
+  searchFields = [displayField],
+  mode = "combo",
+  placeholder = "검색...",
+  disabled = false,
+  filterCondition = {},
+  value,
+  onChange,
+  modalTitle = "검색",
+  modalColumns = [],
+  showAdditionalInfo = false,
+  additionalFields = [],
+  className,
+}: EntitySearchInputProps) {
+  const [modalOpen, setModalOpen] = useState(false);
+  const [displayValue, setDisplayValue] = useState("");
+  const [selectedData, setSelectedData] = useState<EntitySearchResult | null>(null);
+
+  // value가 변경되면 표시값 업데이트
+  useEffect(() => {
+    if (value && selectedData) {
+      setDisplayValue(selectedData[displayField] || "");
+    } else {
+      setDisplayValue("");
+      setSelectedData(null);
+    }
+  }, [value, displayField]);
+
+  const handleSelect = (newValue: any, fullData: EntitySearchResult) => {
+    setSelectedData(fullData);
+    setDisplayValue(fullData[displayField] || "");
+    onChange?.(newValue, fullData);
+  };
+
+  const handleClear = () => {
+    setDisplayValue("");
+    setSelectedData(null);
+    onChange?.(null, null);
+  };
+
+  const handleOpenModal = () => {
+    if (!disabled) {
+      setModalOpen(true);
+    }
+  };
+
+  return (
+    <div className={cn("space-y-2", className)}>
+      {/* 입력 필드 */}
+      <div className="flex gap-2">
+        <div className="relative flex-1">
+          <Input
+            value={displayValue}
+            onChange={(e) => setDisplayValue(e.target.value)}
+            placeholder={placeholder}
+            disabled={disabled}
+            readOnly={mode === "modal" || mode === "combo"}
+            className="h-8 text-xs sm:h-10 sm:text-sm pr-8"
+          />
+          {displayValue && !disabled && (
+            <Button
+              type="button"
+              variant="ghost"
+              size="sm"
+              onClick={handleClear}
+              className="absolute right-1 top-1/2 -translate-y-1/2 h-6 w-6 p-0"
+            >
+              <X className="h-3 w-3" />
+            </Button>
+          )}
+        </div>
+
+        {(mode === "modal" || mode === "combo") && (
+          <Button
+            type="button"
+            onClick={handleOpenModal}
+            disabled={disabled}
+            className="h-8 text-xs sm:h-10 sm:text-sm"
+          >
+            <Search className="h-4 w-4" />
+          </Button>
+        )}
+      </div>
+
+      {/* 추가 정보 표시 */}
+      {showAdditionalInfo && selectedData && additionalFields.length > 0 && (
+        <div className="text-xs text-muted-foreground space-y-1 px-2">
+          {additionalFields.map((field) => (
+            <div key={field} className="flex gap-2">
+              <span className="font-medium">{field}:</span>
+              <span>{selectedData[field] || "-"}</span>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* 검색 모달 */}
+      <EntitySearchModal
+        open={modalOpen}
+        onOpenChange={setModalOpen}
+        tableName={tableName}
+        displayField={displayField}
+        valueField={valueField}
+        searchFields={searchFields}
+        filterCondition={filterCondition}
+        modalTitle={modalTitle}
+        modalColumns={modalColumns}
+        onSelect={handleSelect}
+      />
+    </div>
+  );
+}
+
diff --git a/frontend/lib/registry/components/entity-search-input/EntitySearchInputConfigPanel.tsx b/frontend/lib/registry/components/entity-search-input/EntitySearchInputConfigPanel.tsx
new file mode 100644
index 00000000..888cdf77
--- /dev/null
+++ b/frontend/lib/registry/components/entity-search-input/EntitySearchInputConfigPanel.tsx
@@ -0,0 +1,498 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+import { Label } from "@/components/ui/label";
+import { Input } from "@/components/ui/input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Switch } from "@/components/ui/switch";
+import { Button } from "@/components/ui/button";
+import { Plus, X, Check, ChevronsUpDown } from "lucide-react";
+import { EntitySearchInputConfig } from "./config";
+import { tableManagementApi } from "@/lib/api/tableManagement";
+import { cn } from "@/lib/utils";
+
+interface EntitySearchInputConfigPanelProps {
+  config: EntitySearchInputConfig;
+  onConfigChange: (config: EntitySearchInputConfig) => void;
+}
+
+export function EntitySearchInputConfigPanel({
+  config,
+  onConfigChange,
+}: EntitySearchInputConfigPanelProps) {
+  const [localConfig, setLocalConfig] = useState(config);
+  const [allTables, setAllTables] = useState<any[]>([]);
+  const [tableColumns, setTableColumns] = useState<any[]>([]);
+  const [isLoadingTables, setIsLoadingTables] = useState(false);
+  const [isLoadingColumns, setIsLoadingColumns] = useState(false);
+  const [openTableCombo, setOpenTableCombo] = useState(false);
+  const [openDisplayFieldCombo, setOpenDisplayFieldCombo] = useState(false);
+  const [openValueFieldCombo, setOpenValueFieldCombo] = useState(false);
+
+  // 전체 테이블 목록 로드
+  useEffect(() => {
+    const loadTables = async () => {
+      setIsLoadingTables(true);
+      try {
+        const response = await tableManagementApi.getTableList();
+        if (response.success && response.data) {
+          setAllTables(response.data);
+        }
+      } catch (error) {
+        console.error("테이블 목록 로드 실패:", error);
+      } finally {
+        setIsLoadingTables(false);
+      }
+    };
+    loadTables();
+  }, []);
+
+  // 선택된 테이블의 컬럼 목록 로드
+  useEffect(() => {
+    const loadColumns = async () => {
+      if (!localConfig.tableName) {
+        setTableColumns([]);
+        return;
+      }
+
+      setIsLoadingColumns(true);
+      try {
+        const response = await tableManagementApi.getColumnList(localConfig.tableName);
+        if (response.success && response.data) {
+          setTableColumns(response.data.columns);
+        }
+      } catch (error) {
+        console.error("컬럼 목록 로드 실패:", error);
+        setTableColumns([]);
+      } finally {
+        setIsLoadingColumns(false);
+      }
+    };
+    loadColumns();
+  }, [localConfig.tableName]);
+
+  useEffect(() => {
+    setLocalConfig(config);
+  }, [config]);
+
+  const updateConfig = (updates: Partial<EntitySearchInputConfig>) => {
+    const newConfig = { ...localConfig, ...updates };
+    setLocalConfig(newConfig);
+    onConfigChange(newConfig);
+  };
+
+  const addSearchField = () => {
+    const fields = localConfig.searchFields || [];
+    updateConfig({ searchFields: [...fields, ""] });
+  };
+
+  const updateSearchField = (index: number, value: string) => {
+    const fields = [...(localConfig.searchFields || [])];
+    fields[index] = value;
+    updateConfig({ searchFields: fields });
+  };
+
+  const removeSearchField = (index: number) => {
+    const fields = [...(localConfig.searchFields || [])];
+    fields.splice(index, 1);
+    updateConfig({ searchFields: fields });
+  };
+
+  const addModalColumn = () => {
+    const columns = localConfig.modalColumns || [];
+    updateConfig({ modalColumns: [...columns, ""] });
+  };
+
+  const updateModalColumn = (index: number, value: string) => {
+    const columns = [...(localConfig.modalColumns || [])];
+    columns[index] = value;
+    updateConfig({ modalColumns: columns });
+  };
+
+  const removeModalColumn = (index: number) => {
+    const columns = [...(localConfig.modalColumns || [])];
+    columns.splice(index, 1);
+    updateConfig({ modalColumns: columns });
+  };
+
+  const addAdditionalField = () => {
+    const fields = localConfig.additionalFields || [];
+    updateConfig({ additionalFields: [...fields, ""] });
+  };
+
+  const updateAdditionalField = (index: number, value: string) => {
+    const fields = [...(localConfig.additionalFields || [])];
+    fields[index] = value;
+    updateConfig({ additionalFields: fields });
+  };
+
+  const removeAdditionalField = (index: number) => {
+    const fields = [...(localConfig.additionalFields || [])];
+    fields.splice(index, 1);
+    updateConfig({ additionalFields: fields });
+  };
+
+  return (
+    <div className="space-y-4 p-4">
+      <div className="space-y-2">
+        <Label className="text-xs sm:text-sm">테이블명 *</Label>
+        <Popover open={openTableCombo} onOpenChange={setOpenTableCombo}>
+          <PopoverTrigger asChild>
+            <Button
+              variant="outline"
+              role="combobox"
+              aria-expanded={openTableCombo}
+              className="h-8 w-full justify-between text-xs sm:h-10 sm:text-sm"
+              disabled={isLoadingTables}
+            >
+              {localConfig.tableName
+                ? allTables.find((t) => t.tableName === localConfig.tableName)?.displayName || localConfig.tableName
+                : isLoadingTables ? "로딩 중..." : "테이블 선택"}
+              <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent className="p-0" style={{ width: "var(--radix-popover-trigger-width)" }} align="start">
+            <Command>
+              <CommandInput placeholder="테이블 검색..." className="text-xs sm:text-sm" />
+              <CommandList>
+                <CommandEmpty className="text-xs sm:text-sm">테이블을 찾을 수 없습니다.</CommandEmpty>
+                <CommandGroup>
+                  {allTables.map((table) => (
+                    <CommandItem
+                      key={table.tableName}
+                      value={`${table.displayName || table.tableName}-${table.tableName}`}
+                      onSelect={() => {
+                        updateConfig({ tableName: table.tableName });
+                        setOpenTableCombo(false);
+                      }}
+                      className="text-xs sm:text-sm"
+                    >
+                      <Check
+                        className={cn(
+                          "mr-2 h-4 w-4",
+                          localConfig.tableName === table.tableName ? "opacity-100" : "opacity-0"
+                        )}
+                      />
+                      <div className="flex flex-col">
+                        <span className="font-medium">{table.displayName || table.tableName}</span>
+                        {table.displayName && table.displayName !== table.tableName && (
+                          <span className="text-[10px] text-gray-500">{table.tableName}</span>
+                        )}
+                      </div>
+                    </CommandItem>
+                  ))}
+                </CommandGroup>
+              </CommandList>
+            </Command>
+          </PopoverContent>
+        </Popover>
+      </div>
+
+      <div className="space-y-2">
+        <Label className="text-xs sm:text-sm">표시 필드 *</Label>
+        <Popover open={openDisplayFieldCombo} onOpenChange={setOpenDisplayFieldCombo}>
+          <PopoverTrigger asChild>
+            <Button
+              variant="outline"
+              role="combobox"
+              aria-expanded={openDisplayFieldCombo}
+              className="h-8 w-full justify-between text-xs sm:h-10 sm:text-sm"
+              disabled={!localConfig.tableName || isLoadingColumns}
+            >
+              {localConfig.displayField
+                ? tableColumns.find((c) => c.columnName === localConfig.displayField)?.displayName || localConfig.displayField
+                : isLoadingColumns ? "로딩 중..." : "필드 선택"}
+              <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent className="p-0" style={{ width: "var(--radix-popover-trigger-width)" }} align="start">
+            <Command>
+              <CommandInput placeholder="필드 검색..." className="text-xs sm:text-sm" />
+              <CommandList>
+                <CommandEmpty className="text-xs sm:text-sm">필드를 찾을 수 없습니다.</CommandEmpty>
+                <CommandGroup>
+                  {tableColumns.map((column) => (
+                    <CommandItem
+                      key={column.columnName}
+                      value={`${column.displayName || column.columnName}-${column.columnName}`}
+                      onSelect={() => {
+                        updateConfig({ displayField: column.columnName });
+                        setOpenDisplayFieldCombo(false);
+                      }}
+                      className="text-xs sm:text-sm"
+                    >
+                      <Check
+                        className={cn(
+                          "mr-2 h-4 w-4",
+                          localConfig.displayField === column.columnName ? "opacity-100" : "opacity-0"
+                        )}
+                      />
+                      <div className="flex flex-col">
+                        <span className="font-medium">{column.displayName || column.columnName}</span>
+                        {column.displayName && column.displayName !== column.columnName && (
+                          <span className="text-[10px] text-gray-500">{column.columnName}</span>
+                        )}
+                      </div>
+                    </CommandItem>
+                  ))}
+                </CommandGroup>
+              </CommandList>
+            </Command>
+          </PopoverContent>
+        </Popover>
+      </div>
+
+      <div className="space-y-2">
+        <Label className="text-xs sm:text-sm">값 필드 *</Label>
+        <Popover open={openValueFieldCombo} onOpenChange={setOpenValueFieldCombo}>
+          <PopoverTrigger asChild>
+            <Button
+              variant="outline"
+              role="combobox"
+              aria-expanded={openValueFieldCombo}
+              className="h-8 w-full justify-between text-xs sm:h-10 sm:text-sm"
+              disabled={!localConfig.tableName || isLoadingColumns}
+            >
+              {localConfig.valueField
+                ? tableColumns.find((c) => c.columnName === localConfig.valueField)?.displayName || localConfig.valueField
+                : isLoadingColumns ? "로딩 중..." : "필드 선택"}
+              <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent className="p-0" style={{ width: "var(--radix-popover-trigger-width)" }} align="start">
+            <Command>
+              <CommandInput placeholder="필드 검색..." className="text-xs sm:text-sm" />
+              <CommandList>
+                <CommandEmpty className="text-xs sm:text-sm">필드를 찾을 수 없습니다.</CommandEmpty>
+                <CommandGroup>
+                  {tableColumns.map((column) => (
+                    <CommandItem
+                      key={column.columnName}
+                      value={`${column.displayName || column.columnName}-${column.columnName}`}
+                      onSelect={() => {
+                        updateConfig({ valueField: column.columnName });
+                        setOpenValueFieldCombo(false);
+                      }}
+                      className="text-xs sm:text-sm"
+                    >
+                      <Check
+                        className={cn(
+                          "mr-2 h-4 w-4",
+                          localConfig.valueField === column.columnName ? "opacity-100" : "opacity-0"
+                        )}
+                      />
+                      <div className="flex flex-col">
+                        <span className="font-medium">{column.displayName || column.columnName}</span>
+                        {column.displayName && column.displayName !== column.columnName && (
+                          <span className="text-[10px] text-gray-500">{column.columnName}</span>
+                        )}
+                      </div>
+                    </CommandItem>
+                  ))}
+                </CommandGroup>
+              </CommandList>
+            </Command>
+          </PopoverContent>
+        </Popover>
+      </div>
+
+      <div className="space-y-2">
+        <Label className="text-xs sm:text-sm">UI 모드</Label>
+        <Select
+          value={localConfig.mode || "combo"}
+          onValueChange={(value: "autocomplete" | "modal" | "combo") =>
+            updateConfig({ mode: value })
+          }
+        >
+          <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="combo">콤보 (입력 + 모달)</SelectItem>
+            <SelectItem value="modal">모달만</SelectItem>
+            <SelectItem value="autocomplete">자동완성만</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+
+      <div className="space-y-2">
+        <Label className="text-xs sm:text-sm">플레이스홀더</Label>
+        <Input
+          value={localConfig.placeholder || ""}
+          onChange={(e) => updateConfig({ placeholder: e.target.value })}
+          placeholder="검색..."
+          className="h-8 text-xs sm:h-10 sm:text-sm"
+        />
+      </div>
+
+      {(localConfig.mode === "modal" || localConfig.mode === "combo") && (
+        <>
+          <div className="space-y-2">
+            <Label className="text-xs sm:text-sm">모달 제목</Label>
+            <Input
+              value={localConfig.modalTitle || ""}
+              onChange={(e) => updateConfig({ modalTitle: e.target.value })}
+              placeholder="검색 및 선택"
+              className="h-8 text-xs sm:h-10 sm:text-sm"
+            />
+          </div>
+
+          <div className="space-y-2">
+            <div className="flex items-center justify-between">
+              <Label className="text-xs sm:text-sm">모달 컬럼</Label>
+              <Button
+                size="sm"
+                variant="outline"
+                onClick={addModalColumn}
+                className="h-7 text-xs"
+                disabled={!localConfig.tableName || isLoadingColumns}
+              >
+                <Plus className="h-3 w-3 mr-1" />
+                추가
+              </Button>
+            </div>
+            <div className="space-y-2">
+              {(localConfig.modalColumns || []).map((column, index) => (
+                <div key={index} className="flex items-center gap-2">
+                  <Select
+                    value={column}
+                    onValueChange={(value) => updateModalColumn(index, value)}
+                    disabled={!localConfig.tableName || isLoadingColumns}
+                  >
+                    <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm flex-1">
+                      <SelectValue placeholder="컬럼 선택" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {tableColumns.map((col) => (
+                        <SelectItem key={col.columnName} value={col.columnName}>
+                          {col.displayName || col.columnName}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                  <Button
+                    size="sm"
+                    variant="ghost"
+                    onClick={() => removeModalColumn(index)}
+                    className="h-8 w-8 p-0"
+                  >
+                    <X className="h-4 w-4" />
+                  </Button>
+                </div>
+              ))}
+            </div>
+          </div>
+        </>
+      )}
+
+      <div className="space-y-2">
+        <div className="flex items-center justify-between">
+          <Label className="text-xs sm:text-sm">검색 필드</Label>
+          <Button
+            size="sm"
+            variant="outline"
+            onClick={addSearchField}
+            className="h-7 text-xs"
+            disabled={!localConfig.tableName || isLoadingColumns}
+          >
+            <Plus className="h-3 w-3 mr-1" />
+            추가
+          </Button>
+        </div>
+        <div className="space-y-2">
+          {(localConfig.searchFields || []).map((field, index) => (
+            <div key={index} className="flex items-center gap-2">
+              <Select
+                value={field}
+                onValueChange={(value) => updateSearchField(index, value)}
+                disabled={!localConfig.tableName || isLoadingColumns}
+              >
+                <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm flex-1">
+                  <SelectValue placeholder="필드 선택" />
+                </SelectTrigger>
+                <SelectContent>
+                  {tableColumns.map((col) => (
+                    <SelectItem key={col.columnName} value={col.columnName}>
+                      {col.displayName || col.columnName}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              <Button
+                size="sm"
+                variant="ghost"
+                onClick={() => removeSearchField(index)}
+                className="h-8 w-8 p-0"
+              >
+                <X className="h-4 w-4" />
+              </Button>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      <div className="space-y-2">
+        <div className="flex items-center justify-between">
+          <Label className="text-xs sm:text-sm">추가 정보 표시</Label>
+          <Switch
+            checked={localConfig.showAdditionalInfo || false}
+            onCheckedChange={(checked) =>
+              updateConfig({ showAdditionalInfo: checked })
+            }
+          />
+        </div>
+      </div>
+
+      {localConfig.showAdditionalInfo && (
+        <div className="space-y-2">
+          <div className="flex items-center justify-between">
+            <Label className="text-xs sm:text-sm">추가 필드</Label>
+            <Button
+              size="sm"
+              variant="outline"
+              onClick={addAdditionalField}
+              className="h-7 text-xs"
+              disabled={!localConfig.tableName || isLoadingColumns}
+            >
+              <Plus className="h-3 w-3 mr-1" />
+              추가
+            </Button>
+          </div>
+          <div className="space-y-2">
+            {(localConfig.additionalFields || []).map((field, index) => (
+              <div key={index} className="flex items-center gap-2">
+                <Select
+                  value={field}
+                  onValueChange={(value) => updateAdditionalField(index, value)}
+                  disabled={!localConfig.tableName || isLoadingColumns}
+                >
+                  <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm flex-1">
+                    <SelectValue placeholder="필드 선택" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {tableColumns.map((col) => (
+                      <SelectItem key={col.columnName} value={col.columnName}>
+                        {col.displayName || col.columnName}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+                <Button
+                  size="sm"
+                  variant="ghost"
+                  onClick={() => removeAdditionalField(index)}
+                  className="h-8 w-8 p-0"
+                >
+                  <X className="h-4 w-4" />
+                </Button>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
diff --git a/frontend/lib/registry/components/entity-search-input/EntitySearchInputRenderer.tsx b/frontend/lib/registry/components/entity-search-input/EntitySearchInputRenderer.tsx
new file mode 100644
index 00000000..d7eebac4
--- /dev/null
+++ b/frontend/lib/registry/components/entity-search-input/EntitySearchInputRenderer.tsx
@@ -0,0 +1,33 @@
+"use client";
+
+import React from "react";
+import { AutoRegisteringComponentRenderer } from "../../AutoRegisteringComponentRenderer";
+import { EntitySearchInputDefinition } from "./index";
+import { EntitySearchInputComponent } from "./EntitySearchInputComponent";
+
+/**
+ * EntitySearchInput 렌더러
+ * 자동 등록 시스템을 사용하여 컴포넌트를 레지스트리에 등록
+ */
+export class EntitySearchInputRenderer extends AutoRegisteringComponentRenderer {
+  static componentDefinition = EntitySearchInputDefinition;
+
+  render(): React.ReactElement {
+    return <EntitySearchInputComponent {...this.props} renderer={this} />;
+  }
+
+  /**
+   * 값 변경 처리
+   */
+  protected handleValueChange = (value: any) => {
+    this.updateComponent({ value });
+  };
+}
+
+// 자동 등록 실행
+EntitySearchInputRenderer.registerSelf();
+
+// Hot Reload 지원 (개발 모드)
+if (process.env.NODE_ENV === "development") {
+  EntitySearchInputRenderer.enableHotReload();
+}
diff --git a/frontend/lib/registry/components/entity-search-input/EntitySearchModal.tsx b/frontend/lib/registry/components/entity-search-input/EntitySearchModal.tsx
new file mode 100644
index 00000000..00daed0a
--- /dev/null
+++ b/frontend/lib/registry/components/entity-search-input/EntitySearchModal.tsx
@@ -0,0 +1,226 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Search, Loader2 } from "lucide-react";
+import { useEntitySearch } from "./useEntitySearch";
+import { EntitySearchResult } from "./types";
+
+interface EntitySearchModalProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  tableName: string;
+  displayField: string;
+  valueField: string;
+  searchFields?: string[];
+  filterCondition?: Record<string, any>;
+  modalTitle?: string;
+  modalColumns?: string[];
+  onSelect: (value: any, fullData: EntitySearchResult) => void;
+}
+
+export function EntitySearchModal({
+  open,
+  onOpenChange,
+  tableName,
+  displayField,
+  valueField,
+  searchFields = [displayField],
+  filterCondition = {},
+  modalTitle = "검색",
+  modalColumns = [],
+  onSelect,
+}: EntitySearchModalProps) {
+  const [localSearchText, setLocalSearchText] = useState("");
+  const {
+    results,
+    loading,
+    error,
+    pagination,
+    search,
+    clearSearch,
+    loadMore,
+  } = useEntitySearch({
+    tableName,
+    searchFields,
+    filterCondition,
+  });
+
+  // 모달 열릴 때 초기 검색
+  useEffect(() => {
+    if (open) {
+      search("", 1); // 빈 검색어로 전체 목록 조회
+    } else {
+      clearSearch();
+      setLocalSearchText("");
+    }
+  }, [open]);
+
+  const handleSearch = () => {
+    search(localSearchText, 1);
+  };
+
+  const handleSelect = (item: EntitySearchResult) => {
+    onSelect(item[valueField], item);
+    onOpenChange(false);
+  };
+
+  // 표시할 컬럼 결정
+  const displayColumns = modalColumns.length > 0 ? modalColumns : [displayField];
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-[95vw] sm:max-w-[800px] max-h-[90vh] overflow-y-auto">
+        <DialogHeader>
+          <DialogTitle className="text-base sm:text-lg">{modalTitle}</DialogTitle>
+          <DialogDescription className="text-xs sm:text-sm">
+            항목을 검색하고 선택하세요
+          </DialogDescription>
+        </DialogHeader>
+
+        {/* 검색 입력 */}
+        <div className="flex gap-2">
+          <Input
+            placeholder="검색어를 입력하세요"
+            value={localSearchText}
+            onChange={(e) => setLocalSearchText(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === "Enter") {
+                handleSearch();
+              }
+            }}
+            className="h-8 text-xs sm:h-10 sm:text-sm"
+          />
+          <Button
+            onClick={handleSearch}
+            disabled={loading}
+            className="h-8 text-xs sm:h-10 sm:text-sm"
+          >
+            {loading ? (
+              <Loader2 className="h-4 w-4 animate-spin" />
+            ) : (
+              <Search className="h-4 w-4" />
+            )}
+            <span className="ml-2">검색</span>
+          </Button>
+        </div>
+
+        {/* 오류 메시지 */}
+        {error && (
+          <div className="text-sm text-destructive bg-destructive/10 p-3 rounded-md">
+            {error}
+          </div>
+        )}
+
+        {/* 검색 결과 테이블 */}
+        <div className="border rounded-md overflow-hidden">
+          <div className="overflow-x-auto">
+            <table className="w-full text-xs sm:text-sm">
+              <thead className="bg-muted">
+                <tr>
+                  {displayColumns.map((col) => (
+                    <th
+                      key={col}
+                      className="px-4 py-2 text-left font-medium text-muted-foreground"
+                    >
+                      {col}
+                    </th>
+                  ))}
+                  <th className="px-4 py-2 text-left font-medium text-muted-foreground w-24">
+                    선택
+                  </th>
+                </tr>
+              </thead>
+              <tbody>
+                {loading && results.length === 0 ? (
+                  <tr>
+                    <td colSpan={displayColumns.length + 1} className="px-4 py-8 text-center">
+                      <Loader2 className="h-6 w-6 animate-spin mx-auto" />
+                      <p className="mt-2 text-muted-foreground">검색 중...</p>
+                    </td>
+                  </tr>
+                ) : results.length === 0 ? (
+                  <tr>
+                    <td colSpan={displayColumns.length + 1} className="px-4 py-8 text-center text-muted-foreground">
+                      검색 결과가 없습니다
+                    </td>
+                  </tr>
+                ) : (
+                  results.map((item, index) => {
+                    const uniqueKey = item[valueField] !== undefined ? `${item[valueField]}` : `row-${index}`;
+                    return (
+                    <tr
+                        key={uniqueKey}
+                      className="border-t hover:bg-accent cursor-pointer transition-colors"
+                      onClick={() => handleSelect(item)}
+                    >
+                        {displayColumns.map((col) => (
+                          <td key={`${uniqueKey}-${col}`} className="px-4 py-2">
+                          {item[col] || "-"}
+                        </td>
+                      ))}
+                      <td className="px-4 py-2">
+                        <Button
+                          size="sm"
+                          variant="outline"
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            handleSelect(item);
+                          }}
+                          className="h-7 text-xs"
+                        >
+                          선택
+                        </Button>
+                      </td>
+                    </tr>
+                  );
+                  })
+                )}
+              </tbody>
+            </table>
+          </div>
+        </div>
+
+        {/* 페이지네이션 정보 */}
+        {results.length > 0 && (
+          <div className="flex justify-between items-center text-xs sm:text-sm text-muted-foreground">
+            <span>
+              전체 {pagination.total}개 중 {results.length}개 표시
+            </span>
+            {pagination.page * pagination.limit < pagination.total && (
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={loadMore}
+                disabled={loading}
+                className="h-7 text-xs"
+              >
+                더 보기
+              </Button>
+            )}
+          </div>
+        )}
+
+        <DialogFooter className="gap-2 sm:gap-0">
+          <Button
+            variant="outline"
+            onClick={() => onOpenChange(false)}
+            className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
+          >
+            취소
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
diff --git a/frontend/lib/registry/components/entity-search-input/config.ts b/frontend/lib/registry/components/entity-search-input/config.ts
new file mode 100644
index 00000000..8f40faa2
--- /dev/null
+++ b/frontend/lib/registry/components/entity-search-input/config.ts
@@ -0,0 +1,14 @@
+export interface EntitySearchInputConfig {
+  tableName: string;
+  displayField: string;
+  valueField: string;
+  searchFields?: string[];
+  filterCondition?: Record<string, any>;
+  mode?: "autocomplete" | "modal" | "combo";
+  placeholder?: string;
+  modalTitle?: string;
+  modalColumns?: string[];
+  showAdditionalInfo?: boolean;
+  additionalFields?: string[];
+}
+
diff --git a/frontend/lib/registry/components/entity-search-input/index.ts b/frontend/lib/registry/components/entity-search-input/index.ts
new file mode 100644
index 00000000..3f70d0fe
--- /dev/null
+++ b/frontend/lib/registry/components/entity-search-input/index.ts
@@ -0,0 +1,53 @@
+"use client";
+
+import { createComponentDefinition } from "../../utils/createComponentDefinition";
+import { ComponentCategory } from "@/types/component";
+import { EntitySearchInputComponent } from "./EntitySearchInputComponent";
+import { EntitySearchInputConfigPanel } from "./EntitySearchInputConfigPanel";
+
+/**
+ * EntitySearchInput 컴포넌트 정의
+ * 모달 기반 엔티티 검색 입력
+ */
+export const EntitySearchInputDefinition = createComponentDefinition({
+  id: "entity-search-input",
+  name: "엔티티 검색 입력 (모달)",
+  nameEng: "Entity Search Input",
+  description: "모달을 통한 엔티티 검색 및 선택 (거래처, 품목 등)",
+  category: ComponentCategory.INPUT,
+  webType: "entity",
+  component: EntitySearchInputComponent,
+  defaultConfig: {
+    tableName: "customer_mng",
+    displayField: "customer_name",
+    valueField: "customer_code",
+    searchFields: ["customer_name", "customer_code"],
+    mode: "combo",
+    placeholder: "검색...",
+    modalTitle: "검색 및 선택",
+    modalColumns: ["customer_code", "customer_name", "address"],
+    showAdditionalInfo: false,
+    additionalFields: [],
+  },
+  defaultSize: { width: 300, height: 40 },
+  configPanel: EntitySearchInputConfigPanel,
+  icon: "Search",
+  tags: ["검색", "모달", "엔티티", "거래처", "품목"],
+  version: "1.0.0",
+  author: "개발팀",
+});
+
+// 타입 내보내기
+export type { EntitySearchInputConfig } from "./config";
+
+// 컴포넌트 내보내기
+export { EntitySearchInputComponent } from "./EntitySearchInputComponent";
+export { EntitySearchInputRenderer } from "./EntitySearchInputRenderer";
+export { EntitySearchModal } from "./EntitySearchModal";
+export { useEntitySearch } from "./useEntitySearch";
+export type {
+  EntitySearchInputProps,
+  EntitySearchResult,
+  EntitySearchResponse,
+} from "./types";
+
diff --git a/frontend/lib/registry/components/entity-search-input/types.ts b/frontend/lib/registry/components/entity-search-input/types.ts
new file mode 100644
index 00000000..532a240a
--- /dev/null
+++ b/frontend/lib/registry/components/entity-search-input/types.ts
@@ -0,0 +1,52 @@
+/**
+ * EntitySearchInput 컴포넌트 타입 정의
+ * 엔티티 테이블에서 데이터를 검색하고 선택하는 입력 컴포넌트
+ */
+
+export interface EntitySearchInputProps {
+  // 데이터 소스
+  tableName: string; // 검색할 테이블명 (예: "customer_mng")
+  displayField: string; // 표시할 필드 (예: "customer_name")
+  valueField: string; // 값으로 사용할 필드 (예: "customer_code")
+  searchFields?: string[]; // 검색 대상 필드들 (기본: [displayField])
+
+  // UI 모드
+  mode?: "autocomplete" | "modal" | "combo"; // 기본: "combo"
+  placeholder?: string;
+  disabled?: boolean;
+
+  // 필터링
+  filterCondition?: Record<string, any>; // 추가 WHERE 조건
+  companyCode?: string; // 멀티테넌시
+
+  // 선택된 값
+  value?: any;
+  onChange?: (value: any, fullData?: any) => void;
+
+  // 모달 설정 (mode가 "modal" 또는 "combo"일 때)
+  modalTitle?: string;
+  modalColumns?: string[]; // 모달에 표시할 컬럼들
+
+  // 추가 표시 정보
+  showAdditionalInfo?: boolean; // 선택 후 추가 정보 표시 (예: 주소)
+  additionalFields?: string[]; // 추가로 표시할 필드들
+
+  // 스타일
+  className?: string;
+}
+
+export interface EntitySearchResult {
+  [key: string]: any;
+}
+
+export interface EntitySearchResponse {
+  success: boolean;
+  data: EntitySearchResult[];
+  pagination?: {
+    total: number;
+    page: number;
+    limit: number;
+  };
+  error?: string;
+}
+
diff --git a/frontend/lib/registry/components/entity-search-input/useEntitySearch.ts b/frontend/lib/registry/components/entity-search-input/useEntitySearch.ts
new file mode 100644
index 00000000..1fac26d6
--- /dev/null
+++ b/frontend/lib/registry/components/entity-search-input/useEntitySearch.ts
@@ -0,0 +1,118 @@
+import { useState, useCallback, useEffect, useRef } from "react";
+import { apiClient } from "@/lib/api/client";
+import { EntitySearchResult, EntitySearchResponse } from "./types";
+
+interface UseEntitySearchProps {
+  tableName: string;
+  searchFields?: string[];
+  filterCondition?: Record<string, any>;
+}
+
+export function useEntitySearch({
+  tableName,
+  searchFields = [],
+  filterCondition = {},
+}: UseEntitySearchProps) {
+  const [searchText, setSearchText] = useState("");
+  const [results, setResults] = useState<EntitySearchResult[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [pagination, setPagination] = useState({
+    total: 0,
+    page: 1,
+    limit: 20,
+  });
+
+  // searchFields와 filterCondition을 ref로 관리하여 useCallback 의존성 문제 해결
+  const searchFieldsRef = useRef(searchFields);
+  const filterConditionRef = useRef(filterCondition);
+
+  useEffect(() => {
+    searchFieldsRef.current = searchFields;
+    filterConditionRef.current = filterCondition;
+  }, [searchFields, filterCondition]);
+
+  const search = useCallback(
+    async (text: string, page: number = 1) => {
+      // tableName 유효성 검증
+      if (!tableName || tableName === "undefined" || tableName === "null") {
+        console.warn("엔티티 검색 건너뜀: tableName이 없음", { tableName });
+        setError("테이블명이 설정되지 않았습니다. 컴포넌트 설정을 확인해주세요.");
+        return;
+      }
+
+      try {
+        setLoading(true);
+        setError(null);
+
+        const params = new URLSearchParams({
+          searchText: text,
+          searchFields: searchFieldsRef.current.join(","),
+          filterCondition: JSON.stringify(filterConditionRef.current),
+          page: page.toString(),
+          limit: pagination.limit.toString(),
+        });
+
+        const response = await apiClient.get<EntitySearchResponse>(
+          `/entity-search/${tableName}?${params.toString()}`
+        );
+
+        if (response.data.success) {
+          setResults(response.data.data);
+          if (response.data.pagination) {
+            setPagination(response.data.pagination);
+          }
+        } else {
+          setError(response.data.error || "검색에 실패했습니다");
+        }
+      } catch (err: any) {
+        console.error("Entity search error:", err);
+        const errorMessage = err.response?.data?.message || "검색 중 오류가 발생했습니다";
+        setError(errorMessage);
+      } finally {
+        setLoading(false);
+      }
+    },
+    [tableName, pagination.limit]
+  );
+
+  // 디바운스된 검색
+  useEffect(() => {
+    // searchText가 명시적으로 설정되지 않은 경우(null/undefined)만 건너뛰기
+    if (searchText === null || searchText === undefined) {
+      return;
+    }
+
+    const timer = setTimeout(() => {
+      // 빈 문자열("")도 검색 (전체 목록 조회)
+      search(searchText.trim(), 1);
+    }, 300); // 300ms 디바운스
+
+    return () => clearTimeout(timer);
+  }, [searchText, search]);
+
+  const clearSearch = useCallback(() => {
+    setSearchText("");
+    setResults([]);
+    setError(null);
+  }, []);
+
+  const loadMore = useCallback(() => {
+    if (pagination.page * pagination.limit < pagination.total) {
+      search(searchText, pagination.page + 1);
+    }
+  }, [search, searchText, pagination]);
+
+  return {
+    searchText,
+    setSearchText,
+    results,
+    loading,
+    error,
+    pagination,
+    search,
+    clearSearch,
+    loadMore,
+  };
+}
+
diff --git a/frontend/lib/registry/components/index.ts b/frontend/lib/registry/components/index.ts
index adc86414..98e53425 100644
--- a/frontend/lib/registry/components/index.ts
+++ b/frontend/lib/registry/components/index.ts
@@ -43,6 +43,21 @@ import "./flow-widget/FlowWidgetRenderer";
 import "./numbering-rule/NumberingRuleRenderer";
 import "./category-manager/CategoryManagerRenderer";
 import "./table-search-widget"; // 🆕 테이블 검색 필터 위젯
+import "./customer-item-mapping/CustomerItemMappingRenderer"; // 🆕 거래처별 품목정보
+
+// 🆕 수주 등록 관련 컴포넌트들
+import "./autocomplete-search-input/AutocompleteSearchInputRenderer";
+import "./entity-search-input/EntitySearchInputRenderer";
+import "./modal-repeater-table/ModalRepeaterTableRenderer";
+import "./order-registration-modal/OrderRegistrationModalRenderer";
+
+// 🆕 조건부 컨테이너 컴포넌트
+import "./conditional-container/ConditionalContainerRenderer";
+import "./selected-items-detail-input/SelectedItemsDetailInputRenderer";
+
+// 🆕 섹션 그룹화 레이아웃 컴포넌트
+import "./section-paper/SectionPaperRenderer"; // Section Paper (색종이 - 배경색 기반 그룹화) - Renderer 방식
+import "./section-card/SectionCardRenderer";  // Section Card (제목+테두리 기반 그룹화) - Renderer 방식
 
 /**
  * 컴포넌트 초기화 함수
diff --git a/frontend/lib/registry/components/modal-repeater-table/ItemSelectionModal.tsx b/frontend/lib/registry/components/modal-repeater-table/ItemSelectionModal.tsx
new file mode 100644
index 00000000..60da98f8
--- /dev/null
+++ b/frontend/lib/registry/components/modal-repeater-table/ItemSelectionModal.tsx
@@ -0,0 +1,333 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Search, Loader2 } from "lucide-react";
+import { useEntitySearch } from "../entity-search-input/useEntitySearch";
+import { ItemSelectionModalProps } from "./types";
+
+export function ItemSelectionModal({
+  open,
+  onOpenChange,
+  sourceTable,
+  sourceColumns,
+  sourceSearchFields = [],
+  multiSelect = true,
+  filterCondition = {},
+  modalTitle,
+  alreadySelected = [],
+  uniqueField,
+  onSelect,
+  columnLabels = {},
+}: ItemSelectionModalProps) {
+  const [localSearchText, setLocalSearchText] = useState("");
+  const [selectedItems, setSelectedItems] = useState<any[]>([]);
+
+  const { results, loading, error, search, clearSearch } = useEntitySearch({
+    tableName: sourceTable,
+    searchFields: sourceSearchFields.length > 0 ? sourceSearchFields : sourceColumns,
+    filterCondition,
+  });
+
+  // 모달 열릴 때 초기 검색
+  useEffect(() => {
+    if (open) {
+      search("", 1); // 빈 검색어로 전체 목록 조회
+      setSelectedItems([]);
+    } else {
+      clearSearch();
+      setLocalSearchText("");
+      setSelectedItems([]);
+    }
+  }, [open]);
+
+  const handleSearch = () => {
+    search(localSearchText, 1);
+  };
+
+  const handleToggleItem = (item: any) => {
+    const itemValue = uniqueField ? item[uniqueField] : undefined;
+    
+    if (!multiSelect) {
+      setSelectedItems([item]);
+      return;
+    }
+
+    // uniqueField 값이 undefined인 경우 객체 참조로 비교
+    if (uniqueField && (itemValue === undefined || itemValue === null)) {
+      console.warn(`⚠️ uniqueField "${uniqueField}"의 값이 undefined입니다. 객체 참조로 비교합니다.`);
+      const itemIsSelected = selectedItems.includes(item);
+      
+      if (itemIsSelected) {
+        const newSelected = selectedItems.filter((selected) => selected !== item);
+        setSelectedItems(newSelected);
+      } else {
+        setSelectedItems([...selectedItems, item]);
+      }
+      return;
+    }
+
+    const itemIsSelected = selectedItems.some((selected) => {
+      if (!uniqueField) {
+        return selected === item;
+      }
+      const selectedValue = selected[uniqueField];
+      if (selectedValue === undefined || selectedValue === null) {
+        return false;
+      }
+      return selectedValue === itemValue;
+    });
+
+    if (itemIsSelected) {
+      const newSelected = selectedItems.filter((selected) => {
+        if (!uniqueField) {
+          return selected !== item;
+        }
+        const selectedValue = selected[uniqueField];
+        if (selectedValue === undefined || selectedValue === null) {
+          return true;
+        }
+        return selectedValue !== itemValue;
+      });
+      setSelectedItems(newSelected);
+    } else {
+      setSelectedItems([...selectedItems, item]);
+    }
+  };
+
+  const handleConfirm = () => {
+    console.log("✅ ItemSelectionModal 추가:", selectedItems.length, "개 항목");
+
+    onSelect(selectedItems);
+    onOpenChange(false);
+  };
+
+  // 이미 추가된 항목인지 확인
+  const isAlreadyAdded = (item: any): boolean => {
+    if (!uniqueField) return false;
+    return alreadySelected.some(
+      (selected) => selected[uniqueField] === item[uniqueField]
+    );
+  };
+
+  // 이미 추가된 항목 제외한 결과 필터링
+  const filteredResults = results.filter((item) => !isAlreadyAdded(item));
+
+  // 선택된 항목인지 확인
+  const isSelected = (item: any): boolean => {
+    if (!uniqueField) {
+      return selectedItems.includes(item);
+    }
+    
+    const itemValue = item[uniqueField];
+    
+    // uniqueField 값이 undefined인 경우 객체 참조로 비교
+    if (itemValue === undefined || itemValue === null) {
+      return selectedItems.includes(item);
+    }
+    
+    const result = selectedItems.some((selected) => {
+      const selectedValue = selected[uniqueField];
+      
+      // selectedValue도 undefined면 안전하게 처리
+      if (selectedValue === undefined || selectedValue === null) {
+        return false;
+      }
+      
+      const isMatch = selectedValue === itemValue;
+      
+      if (isMatch) {
+        console.log("✅ 매칭 발견:", { 
+          selectedValue, 
+          itemValue,
+          uniqueField 
+        });
+      }
+      
+      return isMatch;
+    });
+    
+    return result;
+  };
+
+  // 유효한 컬럼만 필터링
+  const validColumns = sourceColumns.filter(col => col != null && col !== "");
+  const totalColumns = validColumns.length + (multiSelect ? 1 : 0);
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-[95vw] sm:max-w-[900px] max-h-[90vh] overflow-y-auto">
+        <DialogHeader>
+          <DialogTitle className="text-base sm:text-lg">{modalTitle}</DialogTitle>
+          <DialogDescription className="text-xs sm:text-sm">
+            항목을 검색하고 선택하세요
+            {multiSelect && " (다중 선택 가능)"}
+          </DialogDescription>
+        </DialogHeader>
+
+        {/* 검색 입력 */}
+        <div className="flex gap-2">
+          <Input
+            placeholder="검색어를 입력하세요"
+            value={localSearchText}
+            onChange={(e) => setLocalSearchText(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === "Enter") {
+                handleSearch();
+              }
+            }}
+            className="h-8 text-xs sm:h-10 sm:text-sm"
+          />
+          <Button
+            onClick={handleSearch}
+            disabled={loading}
+            className="h-8 text-xs sm:h-10 sm:text-sm"
+          >
+            {loading ? (
+              <Loader2 className="h-4 w-4 animate-spin" />
+            ) : (
+              <Search className="h-4 w-4" />
+            )}
+            <span className="ml-2">검색</span>
+          </Button>
+        </div>
+
+        {/* 선택된 항목 수 */}
+        {selectedItems.length > 0 && (
+          <div className="text-sm text-primary">
+            {selectedItems.length}개 항목 선택됨
+            {uniqueField && (
+              <span className="ml-2 text-xs text-muted-foreground">
+                ({selectedItems.map(item => item[uniqueField]).join(", ")})
+              </span>
+            )}
+          </div>
+        )}
+
+        {/* 오류 메시지 */}
+        {error && (
+          <div className="text-sm text-destructive bg-destructive/10 p-3 rounded-md">
+            {error}
+          </div>
+        )}
+
+        {/* 검색 결과 테이블 */}
+        <div className="border rounded-md overflow-hidden">
+          <div className="overflow-x-auto">
+            <table className="w-full text-xs sm:text-sm">
+              <thead className="bg-muted">
+                <tr>
+                  {multiSelect && (
+                    <th className="px-4 py-2 text-left font-medium text-muted-foreground w-12">
+                      선택
+                    </th>
+                  )}
+                  {validColumns.map((col) => (
+                    <th
+                      key={col}
+                      className="px-4 py-2 text-left font-medium text-muted-foreground"
+                    >
+                      {columnLabels[col] || col}
+                    </th>
+                  ))}
+                </tr>
+              </thead>
+              <tbody>
+                {loading && filteredResults.length === 0 ? (
+                  <tr>
+                    <td
+                      colSpan={totalColumns}
+                      className="px-4 py-8 text-center"
+                    >
+                      <Loader2 className="h-6 w-6 animate-spin mx-auto" />
+                      <p className="mt-2 text-muted-foreground">검색 중...</p>
+                    </td>
+                  </tr>
+                ) : filteredResults.length === 0 ? (
+                  <tr>
+                    <td
+                      colSpan={totalColumns}
+                      className="px-4 py-8 text-center text-muted-foreground"
+                    >
+                      {results.length > 0
+                        ? "모든 항목이 이미 추가되었습니다"
+                        : "검색 결과가 없습니다"}
+                    </td>
+                  </tr>
+                ) : (
+                  filteredResults.map((item, index) => {
+                    const selected = isSelected(item);
+                    const uniqueFieldValue = uniqueField ? item[uniqueField] : undefined;
+                    const itemKey = (uniqueFieldValue !== undefined && uniqueFieldValue !== null) 
+                      ? uniqueFieldValue 
+                      : `item-${index}`;
+
+                    return (
+                      <tr
+                        key={itemKey}
+                        className={`border-t transition-colors ${
+                          selected
+                            ? "bg-primary/10"
+                            : "hover:bg-accent cursor-pointer"
+                        }`}
+                        onClick={() => handleToggleItem(item)}
+                      >
+                        {multiSelect && (
+                          <td 
+                            className="px-4 py-2"
+                            onClick={(e) => {
+                              // 체크박스 영역 클릭을 행 클릭으로 전파
+                              e.stopPropagation();
+                              handleToggleItem(item);
+                            }}
+                          >
+                            <div className="pointer-events-none">
+                              <Checkbox checked={selected} />
+                            </div>
+                          </td>
+                        )}
+                        {validColumns.map((col) => (
+                          <td key={col} className="px-4 py-2">
+                            {item[col] || "-"}
+                          </td>
+                        ))}
+                      </tr>
+                    );
+                  })
+                )}
+              </tbody>
+            </table>
+          </div>
+        </div>
+
+        <DialogFooter className="gap-2 sm:gap-0">
+          <Button
+            variant="outline"
+            onClick={() => onOpenChange(false)}
+            className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
+          >
+            취소
+          </Button>
+          <Button
+            onClick={handleConfirm}
+            disabled={selectedItems.length === 0}
+            className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
+          >
+            추가 ({selectedItems.length})
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
diff --git a/frontend/lib/registry/components/modal-repeater-table/ModalRepeaterTableComponent.tsx b/frontend/lib/registry/components/modal-repeater-table/ModalRepeaterTableComponent.tsx
new file mode 100644
index 00000000..2003c5ef
--- /dev/null
+++ b/frontend/lib/registry/components/modal-repeater-table/ModalRepeaterTableComponent.tsx
@@ -0,0 +1,408 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+import { Button } from "@/components/ui/button";
+import { Plus } from "lucide-react";
+import { ItemSelectionModal } from "./ItemSelectionModal";
+import { RepeaterTable } from "./RepeaterTable";
+import { ModalRepeaterTableProps, RepeaterColumnConfig, JoinCondition } from "./types";
+import { useCalculation } from "./useCalculation";
+import { cn } from "@/lib/utils";
+import { apiClient } from "@/lib/api/client";
+
+interface ModalRepeaterTableComponentProps extends Partial<ModalRepeaterTableProps> {
+  config?: ModalRepeaterTableProps;
+}
+
+/**
+ * 외부 테이블에서 참조 값을 조회하는 함수
+ * @param referenceTable 참조 테이블명 (예: "customer_item_mapping")
+ * @param referenceField 참조할 컬럼명 (예: "basic_price")
+ * @param joinConditions 조인 조건 배열
+ * @param sourceItem 소스 데이터 (모달에서 선택한 항목)
+ * @param currentItem 현재 빌드 중인 항목 (이미 설정된 필드들)
+ * @returns 참조된 값 또는 undefined
+ */
+async function fetchReferenceValue(
+  referenceTable: string,
+  referenceField: string,
+  joinConditions: JoinCondition[],
+  sourceItem: any,
+  currentItem: any
+): Promise<any> {
+  if (joinConditions.length === 0) {
+    console.warn("⚠️ 조인 조건이 없습니다. 참조 조회를 건너뜁니다.");
+    return undefined;
+  }
+
+  try {
+    // 조인 조건을 WHERE 절로 변환
+    const whereConditions: Record<string, any> = {};
+    
+    for (const condition of joinConditions) {
+      const { sourceTable = "target", sourceField, targetField, operator = "=" } = condition;
+      
+      // 소스 테이블에 따라 값을 가져오기
+      let value: any;
+      if (sourceTable === "source") {
+        // 소스 테이블 (item_info 등): 모달에서 선택한 원본 데이터
+        value = sourceItem[sourceField];
+        console.log(`  📘 소스 테이블에서 값 가져오기: ${sourceField} =`, value);
+      } else {
+        // 저장 테이블 (sales_order_mng 등): 반복 테이블에 이미 복사된 값
+        value = currentItem[sourceField];
+        console.log(`  📗 저장 테이블(반복테이블)에서 값 가져오기: ${sourceField} =`, value);
+      }
+      
+      if (value === undefined || value === null) {
+        console.warn(`⚠️ 조인 조건의 소스 필드 "${sourceField}" 값이 없습니다. (sourceTable: ${sourceTable})`);
+        return undefined;
+      }
+      
+      // 연산자가 "=" 인 경우만 지원 (확장 가능)
+      if (operator === "=") {
+        whereConditions[targetField] = value;
+      } else {
+        console.warn(`⚠️ 연산자 "${operator}"는 아직 지원되지 않습니다.`);
+      }
+    }
+
+    console.log(`🔍 참조 조회 API 호출:`, {
+      table: referenceTable,
+      field: referenceField,
+      where: whereConditions,
+    });
+
+    // API 호출: 테이블 데이터 조회 (POST 방식)
+    const requestBody = {
+      search: whereConditions,  // ✅ filters → search 변경 (백엔드 파라미터명)
+      size: 1, // 첫 번째 결과만 가져오기
+      page: 1,
+    };
+    
+    console.log("📤 API 요청 Body:", JSON.stringify(requestBody, null, 2));
+    
+    const response = await apiClient.post(
+      `/table-management/tables/${referenceTable}/data`,
+      requestBody
+    );
+
+    console.log("📥 API 전체 응답:", {
+      success: response.data.success,
+      dataLength: response.data.data?.data?.length,  // ✅ data.data.data 구조
+      total: response.data.data?.total,              // ✅ data.data.total
+      firstRow: response.data.data?.data?.[0],       // ✅ data.data.data[0]
+    });
+
+    if (response.data.success && response.data.data?.data?.length > 0) {
+      const firstRow = response.data.data.data[0];  // ✅ data.data.data[0]
+      const value = firstRow[referenceField];
+      
+      console.log(`✅ 참조 조회 성공:`, {
+        table: referenceTable,
+        field: referenceField,
+        value,
+        fullRow: firstRow,
+      });
+      
+      return value;
+    } else {
+      console.warn(`⚠️ 참조 조회 결과 없음:`, {
+        table: referenceTable,
+        where: whereConditions,
+        responseData: response.data.data,
+        total: response.data.total,
+      });
+      return undefined;
+    }
+  } catch (error) {
+    console.error(`❌ 참조 조회 API 오류:`, error);
+    return undefined;
+  }
+}
+
+export function ModalRepeaterTableComponent({
+  config,
+  sourceTable: propSourceTable,
+  sourceColumns: propSourceColumns,
+  sourceSearchFields: propSourceSearchFields,
+  modalTitle: propModalTitle,
+  modalButtonText: propModalButtonText,
+  multiSelect: propMultiSelect,
+  columns: propColumns,
+  calculationRules: propCalculationRules,
+  value: propValue,
+  onChange: propOnChange,
+  uniqueField: propUniqueField,
+  filterCondition: propFilterCondition,
+  companyCode: propCompanyCode,
+  className,
+}: ModalRepeaterTableComponentProps) {
+  // config prop 우선, 없으면 개별 prop 사용
+  const sourceTable = config?.sourceTable || propSourceTable || "";
+  
+  // sourceColumns에서 빈 문자열 필터링
+  const rawSourceColumns = config?.sourceColumns || propSourceColumns || [];
+  const sourceColumns = rawSourceColumns.filter((col) => col && col.trim() !== "");
+  
+  const sourceSearchFields = config?.sourceSearchFields || propSourceSearchFields || [];
+  const modalTitle = config?.modalTitle || propModalTitle || "항목 검색";
+  const modalButtonText = config?.modalButtonText || propModalButtonText || "품목 검색";
+  const multiSelect = config?.multiSelect ?? propMultiSelect ?? true;
+  const calculationRules = config?.calculationRules || propCalculationRules || [];
+  const value = config?.value || propValue || [];
+  const onChange = config?.onChange || propOnChange || (() => {});
+  
+  // uniqueField 자동 보정: order_no는 item_info 테이블에 없으므로 item_number로 변경
+  const rawUniqueField = config?.uniqueField || propUniqueField;
+  const uniqueField = rawUniqueField === "order_no" && sourceTable === "item_info" 
+    ? "item_number" 
+    : rawUniqueField;
+  
+  const filterCondition = config?.filterCondition || propFilterCondition || {};
+  const companyCode = config?.companyCode || propCompanyCode;
+  const [modalOpen, setModalOpen] = useState(false);
+
+  // columns가 비어있으면 sourceColumns로부터 자동 생성
+  const columns = React.useMemo((): RepeaterColumnConfig[] => {
+    const configuredColumns = config?.columns || propColumns || [];
+    
+    if (configuredColumns.length > 0) {
+      console.log("✅ 설정된 columns 사용:", configuredColumns);
+      return configuredColumns;
+    }
+
+    // columns가 비어있으면 sourceColumns로부터 자동 생성
+    if (sourceColumns.length > 0) {
+      console.log("🔄 sourceColumns로부터 자동 생성:", sourceColumns);
+      const autoColumns: RepeaterColumnConfig[] = sourceColumns.map((field) => ({
+        field: field,
+        label: field, // 필드명을 라벨로 사용 (나중에 설정에서 변경 가능)
+        editable: false, // 기본적으로 읽기 전용
+        type: "text" as const,
+        width: "150px",
+      }));
+      console.log("📋 자동 생성된 columns:", autoColumns);
+      return autoColumns;
+    }
+
+    console.warn("⚠️ columns와 sourceColumns 모두 비어있음!");
+    return [];
+  }, [config?.columns, propColumns, sourceColumns]);
+
+  // 초기 props 로깅
+  useEffect(() => {
+    if (rawSourceColumns.length !== sourceColumns.length) {
+      console.warn(`⚠️ sourceColumns 필터링: ${rawSourceColumns.length}개 → ${sourceColumns.length}개 (빈 문자열 제거)`);
+    }
+    
+    if (rawUniqueField !== uniqueField) {
+      console.warn(`⚠️ uniqueField 자동 보정: "${rawUniqueField}" → "${uniqueField}"`);
+    }
+    
+    console.log("🎬 ModalRepeaterTableComponent 마운트:", {
+      columnsLength: columns.length,
+      sourceTable,
+      sourceColumns,
+      uniqueField,
+    });
+    
+    if (columns.length === 0) {
+      console.error("❌ columns가 비어있습니다! sourceColumns:", sourceColumns);
+    } else {
+      console.log("✅ columns 설정 완료:", columns.map(c => c.label || c.field).join(", "));
+    }
+  }, []);
+
+  // value 변경 감지
+  useEffect(() => {
+    console.log("📦 ModalRepeaterTableComponent value 변경:", {
+      valueLength: value.length,
+    });
+  }, [value]);
+
+  const { calculateRow, calculateAll } = useCalculation(calculationRules);
+
+  // 초기 데이터에 계산 필드 적용
+  useEffect(() => {
+    if (value.length > 0 && calculationRules.length > 0) {
+      const calculated = calculateAll(value);
+      // 값이 실제로 변경된 경우만 업데이트
+      if (JSON.stringify(calculated) !== JSON.stringify(value)) {
+        onChange(calculated);
+      }
+    }
+  }, []);
+
+  const handleAddItems = async (items: any[]) => {
+    console.log("➕ handleAddItems 호출:", items.length, "개 항목");
+    console.log("📋 소스 데이터:", items);
+
+    // 매핑 규칙에 따라 데이터 변환 (비동기 처리)
+    const mappedItems = await Promise.all(items.map(async (sourceItem) => {
+      const newItem: any = {};
+
+      // ⚠️ 중요: reference 매핑은 다른 컬럼에 의존할 수 있으므로
+      // 1단계: source/manual 매핑을 먼저 처리
+      // 2단계: reference 매핑을 나중에 처리
+      
+      const referenceColumns: typeof columns = [];
+      const otherColumns: typeof columns = [];
+      
+      for (const col of columns) {
+        if (col.mapping?.type === "reference") {
+          referenceColumns.push(col);
+        } else {
+          otherColumns.push(col);
+        }
+      }
+
+      // 1단계: source/manual 컬럼 먼저 처리
+      for (const col of otherColumns) {
+        console.log(`🔄 컬럼 "${col.field}" 매핑 처리:`, col.mapping);
+
+        // 1. 매핑 규칙이 있는 경우
+        if (col.mapping) {
+          if (col.mapping.type === "source") {
+            // 소스 테이블 컬럼에서 복사
+            const sourceField = col.mapping.sourceField;
+            if (sourceField && sourceItem[sourceField] !== undefined) {
+              newItem[col.field] = sourceItem[sourceField];
+              console.log(`  ✅ 소스 복사: ${sourceField} → ${col.field}:`, newItem[col.field]);
+            } else {
+              console.warn(`  ⚠️ 소스 필드 "${sourceField}" 값이 없음`);
+            }
+          } else if (col.mapping.type === "manual") {
+            // 사용자 입력 (빈 값)
+            newItem[col.field] = undefined;
+            console.log(`  ✏️ 수동 입력 필드`);
+          }
+        } 
+        // 2. 매핑 규칙이 없는 경우 - 소스 데이터에서 같은 필드명으로 복사
+        else if (sourceItem[col.field] !== undefined) {
+          newItem[col.field] = sourceItem[col.field];
+          console.log(`  📝 직접 복사: ${col.field}:`, newItem[col.field]);
+        }
+
+        // 3. 기본값 적용
+        if (col.defaultValue !== undefined && newItem[col.field] === undefined) {
+          newItem[col.field] = col.defaultValue;
+          console.log(`  🎯 기본값 적용: ${col.field}:`, col.defaultValue);
+        }
+      }
+
+      // 2단계: reference 컬럼 처리 (다른 컬럼들이 모두 설정된 후)
+      console.log("🔗 2단계: reference 컬럼 처리 시작");
+      for (const col of referenceColumns) {
+        console.log(`🔄 컬럼 "${col.field}" 참조 매핑 처리:`, col.mapping);
+        
+        // 외부 테이블 참조 (API 호출)
+        console.log(`  ⏳ 참조 조회 시작: ${col.mapping?.referenceTable}.${col.mapping?.referenceField}`);
+        
+        try {
+          const referenceValue = await fetchReferenceValue(
+            col.mapping!.referenceTable!,
+            col.mapping!.referenceField!,
+            col.mapping!.joinCondition || [],
+            sourceItem,
+            newItem
+          );
+          
+          if (referenceValue !== null && referenceValue !== undefined) {
+            newItem[col.field] = referenceValue;
+            console.log(`  ✅ 참조 조회 성공: ${col.field}:`, referenceValue);
+          } else {
+            newItem[col.field] = undefined;
+            console.warn(`  ⚠️ 참조 조회 결과 없음`);
+          }
+        } catch (error) {
+          console.error(`  ❌ 참조 조회 오류:`, error);
+          newItem[col.field] = undefined;
+        }
+        
+        // 기본값 적용
+        if (col.defaultValue !== undefined && newItem[col.field] === undefined) {
+          newItem[col.field] = col.defaultValue;
+          console.log(`  🎯 기본값 적용: ${col.field}:`, col.defaultValue);
+        }
+      }
+
+      console.log("📦 변환된 항목:", newItem);
+      return newItem;
+    }));
+
+    // 계산 필드 업데이트
+    const calculatedItems = calculateAll(mappedItems);
+
+    // 기존 데이터에 추가
+    const newData = [...value, ...calculatedItems];
+    console.log("✅ 최종 데이터:", newData.length, "개 항목");
+
+    onChange(newData);
+  };
+
+  const handleRowChange = (index: number, newRow: any) => {
+    // 계산 필드 업데이트
+    const calculatedRow = calculateRow(newRow);
+
+    // 데이터 업데이트
+    const newData = [...value];
+    newData[index] = calculatedRow;
+    onChange(newData);
+  };
+
+  const handleRowDelete = (index: number) => {
+    const newData = value.filter((_, i) => i !== index);
+    onChange(newData);
+  };
+
+  // 컬럼명 -> 라벨명 매핑 생성
+  const columnLabels = columns.reduce((acc, col) => {
+    acc[col.field] = col.label;
+    return acc;
+  }, {} as Record<string, string>);
+
+  return (
+    <div className={cn("space-y-4", className)}>
+      {/* 추가 버튼 */}
+      <div className="flex justify-between items-center">
+        <div className="text-sm text-muted-foreground">
+          {value.length > 0 && `${value.length}개 항목`}
+        </div>
+        <Button
+          onClick={() => setModalOpen(true)}
+          className="h-8 text-xs sm:h-10 sm:text-sm"
+        >
+          <Plus className="h-4 w-4 mr-2" />
+          {modalButtonText}
+        </Button>
+      </div>
+
+      {/* Repeater 테이블 */}
+      <RepeaterTable
+        columns={columns}
+        data={value}
+        onDataChange={onChange}
+        onRowChange={handleRowChange}
+        onRowDelete={handleRowDelete}
+      />
+
+      {/* 항목 선택 모달 */}
+      <ItemSelectionModal
+        open={modalOpen}
+        onOpenChange={setModalOpen}
+        sourceTable={sourceTable}
+        sourceColumns={sourceColumns}
+        sourceSearchFields={sourceSearchFields}
+        multiSelect={multiSelect}
+        filterCondition={filterCondition}
+        modalTitle={modalTitle}
+        alreadySelected={value}
+        uniqueField={uniqueField}
+        onSelect={handleAddItems}
+        columnLabels={columnLabels}
+      />
+    </div>
+  );
+}
+
diff --git a/frontend/lib/registry/components/modal-repeater-table/ModalRepeaterTableConfigPanel.tsx b/frontend/lib/registry/components/modal-repeater-table/ModalRepeaterTableConfigPanel.tsx
new file mode 100644
index 00000000..a8068c92
--- /dev/null
+++ b/frontend/lib/registry/components/modal-repeater-table/ModalRepeaterTableConfigPanel.tsx
@@ -0,0 +1,1456 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+import { Label } from "@/components/ui/label";
+import { Input } from "@/components/ui/input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Button } from "@/components/ui/button";
+import { Switch } from "@/components/ui/switch";
+import { Plus, X, Check, ChevronsUpDown } from "lucide-react";
+import { ModalRepeaterTableProps, RepeaterColumnConfig, ColumnMapping, CalculationRule } from "./types";
+import { tableManagementApi } from "@/lib/api/tableManagement";
+import { cn } from "@/lib/utils";
+
+interface ModalRepeaterTableConfigPanelProps {
+  config: Partial<ModalRepeaterTableProps>;
+  onConfigChange: (config: Partial<ModalRepeaterTableProps>) => void;
+}
+
+// 소스 컬럼 선택기 (동적 테이블별 컬럼 로드)
+function SourceColumnSelector({
+  sourceTable,
+  value,
+  onChange,
+}: {
+  sourceTable: string;
+  value: string;
+  onChange: (value: string) => void;
+}) {
+  const [columns, setColumns] = useState<{ columnName: string; displayName?: string }[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+
+  useEffect(() => {
+    const loadColumns = async () => {
+      if (!sourceTable) {
+        setColumns([]);
+        return;
+      }
+
+      setIsLoading(true);
+      try {
+        const response = await tableManagementApi.getColumnList(sourceTable);
+        if (response.success && response.data) {
+          setColumns(response.data.columns);
+        }
+      } catch (error) {
+        console.error("컬럼 로드 실패:", error);
+        setColumns([]);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+    loadColumns();
+  }, [sourceTable]);
+
+  return (
+    <Select value={value} onValueChange={onChange} disabled={!sourceTable || isLoading}>
+      <SelectTrigger className="h-10 text-sm w-full">
+        <SelectValue placeholder={isLoading ? "로딩 중..." : "컬럼 선택"} />
+      </SelectTrigger>
+      <SelectContent>
+        {columns.map((col) => (
+          <SelectItem key={col.columnName} value={col.columnName}>
+            {col.displayName || col.columnName}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  );
+}
+
+// 참조 컬럼 선택기 (동적 테이블별 컬럼 로드)
+function ReferenceColumnSelector({
+  referenceTable,
+  value,
+  onChange,
+}: {
+  referenceTable: string;
+  value: string;
+  onChange: (value: string) => void;
+}) {
+  const [columns, setColumns] = useState<{ columnName: string; displayName?: string }[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+
+  useEffect(() => {
+    const loadColumns = async () => {
+      if (!referenceTable) {
+        setColumns([]);
+        return;
+      }
+
+      setIsLoading(true);
+      try {
+        const response = await tableManagementApi.getColumnList(referenceTable);
+        if (response.success && response.data) {
+          setColumns(response.data.columns);
+        }
+      } catch (error) {
+        console.error("참조 컬럼 로드 실패:", error);
+        setColumns([]);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+    loadColumns();
+  }, [referenceTable]);
+
+  return (
+    <Select value={value} onValueChange={onChange} disabled={!referenceTable || isLoading}>
+      <SelectTrigger className="h-10 text-sm w-full">
+        <SelectValue placeholder={isLoading ? "로딩 중..." : "컬럼 선택"} />
+      </SelectTrigger>
+      <SelectContent>
+        {columns.map((col) => (
+          <SelectItem key={col.columnName} value={col.columnName}>
+            {col.displayName || col.columnName}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  );
+}
+
+export function ModalRepeaterTableConfigPanel({
+  config,
+  onConfigChange,
+}: ModalRepeaterTableConfigPanelProps) {
+  // 초기 설정 정리: 계산 규칙과 컬럼 설정 동기화
+  const cleanupInitialConfig = (initialConfig: Partial<ModalRepeaterTableProps>): Partial<ModalRepeaterTableProps> => {
+    // 계산 규칙이 없으면 모든 컬럼의 calculated 속성 제거
+    if (!initialConfig.calculationRules || initialConfig.calculationRules.length === 0) {
+      const cleanedColumns = (initialConfig.columns || []).map((col) => {
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        const { calculated, ...rest } = col;
+        return { ...rest, editable: true };
+      });
+      return { ...initialConfig, columns: cleanedColumns };
+    }
+
+    // 계산 규칙이 있으면 결과 필드만 calculated=true
+    const resultFields = new Set(initialConfig.calculationRules.map((rule) => rule.result));
+    const cleanedColumns = (initialConfig.columns || []).map((col) => {
+      if (resultFields.has(col.field)) {
+        // 계산 결과 필드는 calculated=true, editable=false
+        return { ...col, calculated: true, editable: false };
+      } else {
+        // 나머지 필드는 calculated 제거, editable=true
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        const { calculated, ...rest } = col;
+        return { ...rest, editable: true };
+      }
+    });
+
+    return { ...initialConfig, columns: cleanedColumns };
+  };
+
+  const [localConfig, setLocalConfig] = useState(cleanupInitialConfig(config));
+  const [allTables, setAllTables] = useState<{ tableName: string; displayName?: string }[]>([]);
+  const [tableColumns, setTableColumns] = useState<{ columnName: string; displayName?: string }[]>([]);
+  const [targetTableColumns, setTargetTableColumns] = useState<{ columnName: string; displayName?: string }[]>([]);
+  const [isLoadingTables, setIsLoadingTables] = useState(false);
+  const [isLoadingColumns, setIsLoadingColumns] = useState(false);
+  const [isLoadingTargetColumns, setIsLoadingTargetColumns] = useState(false);
+  const [openTableCombo, setOpenTableCombo] = useState(false);
+  const [openTargetTableCombo, setOpenTargetTableCombo] = useState(false);
+  const [openUniqueFieldCombo, setOpenUniqueFieldCombo] = useState(false);
+
+  // config 변경 시 localConfig 동기화 (cleanupInitialConfig 적용)
+  useEffect(() => {
+    const cleanedConfig = cleanupInitialConfig(config);
+    setLocalConfig(cleanedConfig);
+  }, [config]);
+
+  // 전체 테이블 목록 로드
+  useEffect(() => {
+    const loadTables = async () => {
+      setIsLoadingTables(true);
+      try {
+        const response = await tableManagementApi.getTableList();
+        if (response.success && response.data) {
+          setAllTables(response.data);
+        }
+      } catch (error) {
+        console.error("테이블 목록 로드 실패:", error);
+      } finally {
+        setIsLoadingTables(false);
+      }
+    };
+    loadTables();
+  }, []);
+
+  // 소스 테이블의 컬럼 목록 로드
+  useEffect(() => {
+    const loadColumns = async () => {
+      if (!localConfig.sourceTable) {
+        setTableColumns([]);
+        return;
+      }
+
+      setIsLoadingColumns(true);
+      try {
+        const response = await tableManagementApi.getColumnList(localConfig.sourceTable);
+        if (response.success && response.data) {
+          setTableColumns(response.data.columns);
+        }
+      } catch (error) {
+        console.error("컬럼 목록 로드 실패:", error);
+        setTableColumns([]);
+      } finally {
+        setIsLoadingColumns(false);
+      }
+    };
+    loadColumns();
+  }, [localConfig.sourceTable]);
+
+  // 저장 테이블의 컬럼 목록 로드
+  useEffect(() => {
+    const loadTargetColumns = async () => {
+      if (!localConfig.targetTable) {
+        setTargetTableColumns([]);
+        return;
+      }
+
+      setIsLoadingTargetColumns(true);
+      try {
+        const response = await tableManagementApi.getColumnList(localConfig.targetTable);
+        if (response.success && response.data) {
+          setTargetTableColumns(response.data.columns);
+        }
+      } catch (error) {
+        console.error("저장 테이블 컬럼 로드 실패:", error);
+        setTargetTableColumns([]);
+      } finally {
+        setIsLoadingTargetColumns(false);
+      }
+    };
+    loadTargetColumns();
+  }, [localConfig.targetTable]);
+
+  const updateConfig = (updates: Partial<ModalRepeaterTableProps>) => {
+    const newConfig = { ...localConfig, ...updates };
+    setLocalConfig(newConfig);
+    onConfigChange(newConfig);
+  };
+
+  const addSourceColumn = () => {
+    const columns = localConfig.sourceColumns || [];
+    updateConfig({ sourceColumns: [...columns, ""] });
+  };
+
+  const updateSourceColumn = (index: number, value: string) => {
+    const columns = [...(localConfig.sourceColumns || [])];
+    columns[index] = value;
+    updateConfig({ sourceColumns: columns });
+  };
+
+  const removeSourceColumn = (index: number) => {
+    const columns = [...(localConfig.sourceColumns || [])];
+    columns.splice(index, 1);
+    updateConfig({ sourceColumns: columns });
+  };
+
+  const addSearchField = () => {
+    const fields = localConfig.sourceSearchFields || [];
+    updateConfig({ sourceSearchFields: [...fields, ""] });
+  };
+
+  const updateSearchField = (index: number, value: string) => {
+    const fields = [...(localConfig.sourceSearchFields || [])];
+    fields[index] = value;
+    updateConfig({ sourceSearchFields: fields });
+  };
+
+  const removeSearchField = (index: number) => {
+    const fields = [...(localConfig.sourceSearchFields || [])];
+    fields.splice(index, 1);
+    updateConfig({ sourceSearchFields: fields });
+  };
+
+  // 🆕 저장 테이블 컬럼에서 반복 테이블 컬럼 추가
+  const addRepeaterColumnFromTarget = (columnName: string) => {
+    const columns = localConfig.columns || [];
+    
+    // 이미 존재하는 컬럼인지 확인
+    if (columns.some((col) => col.field === columnName)) {
+      alert("이미 추가된 컬럼입니다.");
+      return;
+    }
+
+    const targetCol = targetTableColumns.find((c) => c.columnName === columnName);
+    
+    const newColumn: RepeaterColumnConfig = {
+      field: columnName,
+      label: targetCol?.displayName || columnName,
+      type: "text",
+      width: "150px",
+      editable: true,
+      mapping: {
+        type: "manual",
+        referenceTable: localConfig.targetTable,
+        referenceField: columnName,
+      },
+    };
+
+    updateConfig({ columns: [...columns, newColumn] });
+  };
+
+  // 🆕 반복 테이블 컬럼 삭제
+  const removeRepeaterColumn = (index: number) => {
+    const columns = [...(localConfig.columns || [])];
+    columns.splice(index, 1);
+    updateConfig({ columns });
+  };
+
+  // 🆕 반복 테이블 컬럼 개별 수정
+  const updateRepeaterColumn = (index: number, updates: Partial<RepeaterColumnConfig>) => {
+    const columns = [...(localConfig.columns || [])];
+    columns[index] = { ...columns[index], ...updates };
+    updateConfig({ columns });
+  };
+
+  // 🆕 계산 규칙 관리
+  const addCalculationRule = () => {
+    const rules = localConfig.calculationRules || [];
+    const newRule: CalculationRule = {
+      result: "",
+      formula: "",
+      dependencies: [],
+    };
+    updateConfig({ calculationRules: [...rules, newRule] });
+  };
+
+  const updateCalculationRule = (index: number, updates: Partial<CalculationRule>) => {
+    const rules = [...(localConfig.calculationRules || [])];
+    const oldRule = rules[index];
+    const newRule = { ...oldRule, ...updates };
+    
+    // 결과 필드가 변경된 경우
+    if (updates.result !== undefined && oldRule.result !== updates.result) {
+      const columns = [...(localConfig.columns || [])];
+      
+      // 이전 결과 필드의 calculated 속성 제거
+      if (oldRule.result) {
+        const oldResultIndex = columns.findIndex((c) => c.field === oldRule.result);
+        if (oldResultIndex !== -1) {
+          // eslint-disable-next-line @typescript-eslint/no-unused-vars
+          const { calculated, ...rest } = columns[oldResultIndex];
+          columns[oldResultIndex] = { ...rest, editable: true };
+        }
+      }
+      
+      // 새 결과 필드를 calculated=true, editable=false로 설정
+      if (updates.result) {
+        const newResultIndex = columns.findIndex((c) => c.field === updates.result);
+        if (newResultIndex !== -1) {
+          columns[newResultIndex] = {
+            ...columns[newResultIndex],
+            calculated: true,
+            editable: false,
+          };
+        }
+      }
+      
+      rules[index] = newRule;
+      updateConfig({ calculationRules: rules, columns });
+      return;
+    }
+    
+    rules[index] = newRule;
+    updateConfig({ calculationRules: rules });
+  };
+
+  const removeCalculationRule = (index: number) => {
+    const rules = [...(localConfig.calculationRules || [])];
+    const removedRule = rules[index];
+    
+    // 결과 필드의 calculated 속성 제거
+    if (removedRule.result) {
+      const columns = [...(localConfig.columns || [])];
+      const resultIndex = columns.findIndex((c) => c.field === removedRule.result);
+      if (resultIndex !== -1) {
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        const { calculated, ...rest } = columns[resultIndex];
+        columns[resultIndex] = { ...rest, editable: true };
+      }
+      rules.splice(index, 1);
+      updateConfig({ calculationRules: rules, columns });
+      return;
+    }
+    
+    rules.splice(index, 1);
+    updateConfig({ calculationRules: rules });
+  };
+
+  return (
+    <div className="space-y-6 p-4">
+      {/* 소스/저장 테이블 설정 */}
+      <div className="space-y-4 border rounded-lg p-4 bg-card">
+        <div>
+          <h3 className="text-sm font-semibold mb-1">1. 소스 테이블 (데이터 검색)</h3>
+          <p className="text-xs text-muted-foreground">
+            항목 검색 모달에서 어떤 테이블의 어떤 컬럼 정보를 보여줄 건지 설정
+          </p>
+        </div>
+
+        {/* 소스 테이블 */}
+        <div className="space-y-2">
+          <Label className="text-xs sm:text-sm">소스 테이블 *</Label>
+          <Popover open={openTableCombo} onOpenChange={setOpenTableCombo}>
+            <PopoverTrigger asChild>
+              <Button
+                variant="outline"
+                role="combobox"
+                aria-expanded={openTableCombo}
+                className="h-8 w-full justify-between text-xs sm:h-10 sm:text-sm"
+                disabled={isLoadingTables}
+              >
+                {localConfig.sourceTable
+                  ? allTables.find((t) => t.tableName === localConfig.sourceTable)?.displayName || localConfig.sourceTable
+                  : isLoadingTables ? "로딩 중..." : "테이블 선택"}
+                <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent className="p-0" style={{ width: "var(--radix-popover-trigger-width)" }} align="start">
+              <Command>
+                <CommandInput placeholder="테이블 검색..." className="text-xs sm:text-sm" />
+                <CommandList>
+                  <CommandEmpty className="text-xs sm:text-sm">테이블을 찾을 수 없습니다.</CommandEmpty>
+                  <CommandGroup>
+                    {allTables.map((table) => (
+                      <CommandItem
+                        key={table.tableName}
+                        value={table.tableName}
+                        onSelect={() => {
+                          updateConfig({ sourceTable: table.tableName });
+                          setOpenTableCombo(false);
+                        }}
+                        className="text-xs sm:text-sm"
+                      >
+                        <Check className={cn("mr-2 h-4 w-4", localConfig.sourceTable === table.tableName ? "opacity-100" : "opacity-0")} />
+                        <div className="flex flex-col">
+                          <span className="font-medium">{table.displayName || table.tableName}</span>
+                          {table.displayName && <span className="text-[10px] text-gray-500">{table.tableName}</span>}
+                        </div>
+                      </CommandItem>
+                    ))}
+                  </CommandGroup>
+                </CommandList>
+              </Command>
+            </PopoverContent>
+          </Popover>
+          <p className="text-xs text-muted-foreground">
+            모달에서 검색할 데이터 테이블
+          </p>
+        </div>
+
+        <div className="border-t pt-4 mt-4">
+          <h3 className="text-sm font-semibold mb-1">2. 저장 테이블 (데이터 저장)</h3>
+          <p className="text-xs text-muted-foreground mb-2">
+            반복 테이블에 입력된 정보를 어떤 테이블에 저장할 건지 선택
+          </p>
+        </div>
+
+        {/* 저장 테이블 */}
+        <div className="space-y-2">
+          <Label className="text-xs sm:text-sm">저장 테이블 *</Label>
+          <Popover open={openTargetTableCombo} onOpenChange={setOpenTargetTableCombo}>
+            <PopoverTrigger asChild>
+              <Button
+                variant="outline"
+                role="combobox"
+                aria-expanded={openTargetTableCombo}
+                className="h-8 w-full justify-between text-xs sm:h-10 sm:text-sm"
+                disabled={isLoadingTables}
+              >
+                {localConfig.targetTable
+                  ? allTables.find((t) => t.tableName === localConfig.targetTable)?.displayName || localConfig.targetTable
+                  : isLoadingTables ? "로딩 중..." : "저장할 테이블 선택"}
+                <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent className="p-0" style={{ width: "var(--radix-popover-trigger-width)" }} align="start">
+              <Command>
+                <CommandInput placeholder="테이블 검색..." className="text-xs sm:text-sm" />
+                <CommandList>
+                  <CommandEmpty className="text-xs sm:text-sm">테이블을 찾을 수 없습니다.</CommandEmpty>
+                  <CommandGroup>
+                    {allTables.map((table) => (
+                      <CommandItem
+                        key={table.tableName}
+                        value={table.tableName}
+                        onSelect={() => {
+                          updateConfig({ targetTable: table.tableName });
+                          setOpenTargetTableCombo(false);
+                        }}
+                        className="text-xs sm:text-sm"
+                      >
+                        <Check className={cn("mr-2 h-4 w-4", localConfig.targetTable === table.tableName ? "opacity-100" : "opacity-0")} />
+                        <div className="flex flex-col">
+                          <span className="font-medium">{table.displayName || table.tableName}</span>
+                          {table.displayName && <span className="text-[10px] text-gray-500">{table.tableName}</span>}
+                        </div>
+                      </CommandItem>
+                    ))}
+                  </CommandGroup>
+                </CommandList>
+              </Command>
+            </PopoverContent>
+          </Popover>
+          <p className="text-xs text-muted-foreground">
+            반복 테이블 데이터를 저장할 대상 테이블
+          </p>
+        </div>
+
+        {/* 소스 컬럼 */}
+        <div className="space-y-2">
+          <div className="flex items-center justify-between">
+            <Label className="text-xs sm:text-sm">소스 컬럼</Label>
+            <Button
+              size="sm"
+              variant="outline"
+              onClick={addSourceColumn}
+              className="h-7 text-xs"
+              disabled={!localConfig.sourceTable || isLoadingColumns}
+            >
+              <Plus className="h-3 w-3 mr-1" />
+              추가
+            </Button>
+          </div>
+          <p className="text-xs text-muted-foreground">
+            모달 테이블에 표시할 컬럼들
+          </p>
+          <div className="space-y-2">
+            {(localConfig.sourceColumns || []).map((column, index) => (
+              <div key={index} className="flex items-center gap-2">
+                <Select
+                  value={column}
+                  onValueChange={(value) => updateSourceColumn(index, value)}
+                  disabled={!localConfig.sourceTable || isLoadingColumns}
+                >
+                  <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm flex-1">
+                    <SelectValue placeholder="컬럼 선택" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {tableColumns.map((col) => (
+                      <SelectItem key={col.columnName} value={col.columnName}>
+                        {col.displayName || col.columnName}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+                <Button
+                  size="sm"
+                  variant="ghost"
+                  onClick={() => removeSourceColumn(index)}
+                  className="h-8 w-8 p-0"
+                >
+                  <X className="h-4 w-4" />
+                </Button>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {/* 검색 필드 */}
+        <div className="space-y-2">
+          <div className="flex items-center justify-between">
+            <Label className="text-xs sm:text-sm">검색 필드</Label>
+            <Button
+              size="sm"
+              variant="outline"
+              onClick={addSearchField}
+              className="h-7 text-xs"
+              disabled={!localConfig.sourceTable || isLoadingColumns}
+            >
+              <Plus className="h-3 w-3 mr-1" />
+              추가
+            </Button>
+          </div>
+          <p className="text-xs text-muted-foreground">
+            모달에서 검색 가능한 필드들
+          </p>
+          <div className="space-y-2">
+            {(localConfig.sourceSearchFields || []).map((field, index) => (
+              <div key={index} className="flex items-center gap-2">
+                <Select
+                  value={field}
+                  onValueChange={(value) => updateSearchField(index, value)}
+                  disabled={!localConfig.sourceTable || isLoadingColumns}
+                >
+                  <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm flex-1">
+                    <SelectValue placeholder="필드 선택" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {tableColumns.map((col) => (
+                      <SelectItem key={col.columnName} value={col.columnName}>
+                        {col.displayName || col.columnName}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+                <Button
+                  size="sm"
+                  variant="ghost"
+                  onClick={() => removeSearchField(index)}
+                  className="h-8 w-8 p-0"
+                >
+                  <X className="h-4 w-4" />
+                </Button>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {/* 중복 체크 필드 */}
+        <div className="space-y-2">
+          <Label className="text-xs sm:text-sm">중복 체크 필드</Label>
+          <Popover open={openUniqueFieldCombo} onOpenChange={setOpenUniqueFieldCombo}>
+            <PopoverTrigger asChild>
+              <Button
+                variant="outline"
+                role="combobox"
+                aria-expanded={openUniqueFieldCombo}
+                className="h-8 w-full justify-between text-xs sm:h-10 sm:text-sm"
+                disabled={!localConfig.sourceTable || isLoadingColumns}
+              >
+                {localConfig.uniqueField
+                  ? tableColumns.find((c) => c.columnName === localConfig.uniqueField)?.displayName || localConfig.uniqueField
+                  : isLoadingColumns ? "로딩 중..." : "필드 선택"}
+                <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent className="p-0" style={{ width: "var(--radix-popover-trigger-width)" }} align="start">
+              <Command>
+                <CommandInput placeholder="필드 검색..." className="text-xs sm:text-sm" />
+                <CommandList>
+                  <CommandEmpty className="text-xs sm:text-sm">필드를 찾을 수 없습니다.</CommandEmpty>
+                  <CommandGroup>
+                    {tableColumns.map((column) => (
+                      <CommandItem
+                        key={column.columnName}
+                        value={column.columnName}
+                        onSelect={() => {
+                          updateConfig({ uniqueField: column.columnName });
+                          setOpenUniqueFieldCombo(false);
+                        }}
+                        className="text-xs sm:text-sm"
+                      >
+                        <Check className={cn("mr-2 h-4 w-4", localConfig.uniqueField === column.columnName ? "opacity-100" : "opacity-0")} />
+                        <div className="flex flex-col">
+                          <span className="font-medium">{column.displayName || column.columnName}</span>
+                          {column.displayName && <span className="text-[10px] text-gray-500">{column.columnName}</span>}
+                        </div>
+                      </CommandItem>
+                    ))}
+                  </CommandGroup>
+                </CommandList>
+              </Command>
+            </PopoverContent>
+          </Popover>
+          <p className="text-xs text-muted-foreground">
+            중복 추가를 방지할 고유 필드 (예: 품목 코드)
+          </p>
+        </div>
+      </div>
+
+      {/* 모달 설정 */}
+      <div className="space-y-4 border rounded-lg p-4">
+        <h3 className="text-sm font-semibold">모달 설정</h3>
+
+        <div className="space-y-2">
+          <Label className="text-xs sm:text-sm">모달 제목</Label>
+          <Input
+            value={localConfig.modalTitle || ""}
+            onChange={(e) => updateConfig({ modalTitle: e.target.value })}
+            placeholder="항목 검색 및 선택"
+            className="h-8 text-xs sm:h-10 sm:text-sm"
+          />
+        </div>
+
+        <div className="space-y-2">
+          <Label className="text-xs sm:text-sm">모달 버튼 텍스트</Label>
+          <Input
+            value={localConfig.modalButtonText || ""}
+            onChange={(e) => updateConfig({ modalButtonText: e.target.value })}
+            placeholder="항목 검색"
+            className="h-8 text-xs sm:h-10 sm:text-sm"
+          />
+        </div>
+
+        <div className="space-y-2">
+          <div className="flex items-center justify-between">
+            <Label className="text-xs sm:text-sm">다중 선택</Label>
+            <Switch
+              checked={localConfig.multiSelect ?? true}
+              onCheckedChange={(checked) =>
+                updateConfig({ multiSelect: checked })
+              }
+            />
+          </div>
+        </div>
+      </div>
+
+      {/* 반복 테이블 컬럼 관리 */}
+      <div className="space-y-4 border rounded-lg p-4 bg-card">
+        <div>
+          <h3 className="text-sm font-semibold mb-1">3. 반복 테이블 컬럼 (헤더 구성)</h3>
+          <p className="text-xs text-muted-foreground">
+            반복 테이블 헤더에 표시할 컬럼 옵션 - 어떤 컬럼을 화면에 보여줄지 선택
+          </p>
+        </div>
+
+        {/* 저장 테이블 컬럼 선택 */}
+        {localConfig.targetTable && targetTableColumns.length > 0 && (
+          <div className="space-y-2">
+            <Label className="text-xs sm:text-sm">저장 테이블 컬럼 선택</Label>
+            <div className="flex flex-wrap gap-2">
+              {targetTableColumns.map((col) => (
+                <Button
+                  key={col.columnName}
+                  size="sm"
+                  variant="outline"
+                  onClick={() => addRepeaterColumnFromTarget(col.columnName)}
+                  className="h-7 text-xs"
+                  disabled={isLoadingTargetColumns}
+                >
+                  <Plus className="h-3 w-3 mr-1" />
+                  {col.displayName || col.columnName}
+                </Button>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {/* 추가된 컬럼 목록 */}
+        {localConfig.columns && localConfig.columns.length > 0 && (
+          <div className="space-y-3">
+            <Label className="text-xs sm:text-sm">추가된 컬럼</Label>
+            <div className="flex flex-wrap gap-2">
+              {localConfig.columns.map((col, index) => (
+                <div
+                  key={index}
+                  className="inline-flex items-center gap-2 px-3 py-1.5 bg-primary/10 text-primary rounded-md text-xs"
+                >
+                  <span className="font-medium">{col.label}</span>
+                  <span className="text-[10px] opacity-70">
+                    ({col.mapping?.type === "source" ? "소스" : col.mapping?.type === "reference" ? "참조" : "수동입력"})
+                  </span>
+                  <button
+                    onClick={() => removeRepeaterColumn(index)}
+                    className="ml-1 hover:bg-primary/20 rounded p-0.5"
+                  >
+                    <X className="h-3 w-3" />
+                  </button>
+                </div>
+              ))}
+            </div>
+
+            {/* 개별 컬럼 설정 - 세로 레이아웃 */}
+            <div className="space-y-4">
+              {localConfig.columns.map((col, index) => (
+                <div key={index} className="border rounded-lg p-4 space-y-4">
+                  <div className="flex items-center justify-between">
+                    <h4 className="text-sm font-semibold">{col.label}</h4>
+                    <Button
+                      size="sm"
+                      variant="ghost"
+                      onClick={() => removeRepeaterColumn(index)}
+                      className="h-7 w-7 p-0"
+                    >
+                      <X className="h-4 w-4" />
+                    </Button>
+                  </div>
+
+                  {/* 세로 레이아웃: 모든 항목 동일한 너비/높이 */}
+                  <div className="grid grid-cols-1 gap-4">
+                    {/* 1. 품목명 */}
+                    <div className="space-y-2">
+                      <Label className="text-xs font-medium text-muted-foreground">
+                        품목명
+                      </Label>
+                      <Input
+                        value={col.label}
+                        onChange={(e) => updateRepeaterColumn(index, { label: e.target.value })}
+                        placeholder="화면에 표시될 이름"
+                        className="h-10 text-sm w-full"
+                      />
+                      <p className="text-[10px] text-muted-foreground">
+                        반복 테이블 헤더에 표시될 이름
+                      </p>
+                    </div>
+
+                    {/* 2. 컬럼명 */}
+                    <div className="space-y-2">
+                      <Label className="text-xs font-medium text-muted-foreground">
+                        컬럼명
+                      </Label>
+                      <Input
+                        value={col.field}
+                        onChange={(e) => updateRepeaterColumn(index, { field: e.target.value })}
+                        placeholder="데이터베이스 필드명"
+                        className="h-10 text-sm w-full"
+                      />
+                      <p className="text-[10px] text-muted-foreground">
+                        저장 테이블의 실제 컬럼명
+                      </p>
+                    </div>
+
+                    {/* 3. 컬럼 타입 */}
+                    <div className="space-y-2">
+                      <Label className="text-xs font-medium text-muted-foreground">
+                        컬럼 타입
+                      </Label>
+                      <Select
+                        value={col.type || "text"}
+                        onValueChange={(value) => updateRepeaterColumn(index, { type: value as "text" | "number" | "date" | "select" })}
+                      >
+                        <SelectTrigger className="h-10 text-sm w-full">
+                          <SelectValue />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="text">텍스트</SelectItem>
+                          <SelectItem value="number">숫자</SelectItem>
+                          <SelectItem value="date">날짜</SelectItem>
+                          <SelectItem value="select">선택</SelectItem>
+                        </SelectContent>
+                      </Select>
+                      <p className="text-[10px] text-muted-foreground">
+                        입력 필드 타입
+                      </p>
+                    </div>
+
+                    {/* 4. 매핑 설정 */}
+                    <div className="space-y-2">
+                      <Label className="text-xs font-medium text-muted-foreground">
+                        매핑 설정
+                      </Label>
+                      <Select
+                        value={col.mapping?.type || "manual"}
+                        onValueChange={(value) => updateRepeaterColumn(index, {
+                          mapping: {
+                            ...col.mapping,
+                            type: value as "source" | "reference" | "manual"
+                          }
+                        })}
+                      >
+                        <SelectTrigger className="h-10 text-sm w-full">
+                          <SelectValue />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="source">소스 테이블에서 복사</SelectItem>
+                          <SelectItem value="reference">외부 테이블 참조</SelectItem>
+                          <SelectItem value="manual">화면에서 입력 (수동)</SelectItem>
+                        </SelectContent>
+                      </Select>
+                      <p className="text-[10px] text-muted-foreground">
+                        {col.mapping?.type === "source" && "모달에서 선택한 항목의 값을 가져옴"}
+                        {col.mapping?.type === "reference" && "다른 테이블의 값을 참조"}
+                        {col.mapping?.type === "manual" && "사용자가 직접 입력"}
+                      </p>
+                    </div>
+
+                    {/* 5. 소스 정보 */}
+                    <div className="space-y-2">
+                      <Label className="text-xs font-medium text-muted-foreground">
+                        소스 정보
+                      </Label>
+                      
+                      {col.mapping?.type === "source" && (
+                        <div className="space-y-3">
+                          <div className="p-3 bg-blue-50 dark:bg-blue-950 rounded-md border border-blue-200 dark:border-blue-800">
+                            <p className="text-xs font-medium mb-2">소스 테이블에서 복사</p>
+                            <p className="text-[10px] text-muted-foreground">
+                              모달 검색에서 선택한 항목(소스 테이블)의 컬럼 값을 가져옴
+                            </p>
+                          </div>
+
+                          {/* 소스 테이블 선택 */}
+                          <div className="space-y-1.5">
+                            <Label className="text-[11px]">소스 테이블 선택 *</Label>
+                            <Select
+                              value={col.mapping?.referenceTable || localConfig.sourceTable || ""}
+                              onValueChange={(value) => updateRepeaterColumn(index, {
+                                mapping: {
+                                  ...col.mapping,
+                                  type: "source",
+                                  referenceTable: value,
+                                }
+                              })}
+                            >
+                              <SelectTrigger className="h-10 text-sm w-full">
+                                <SelectValue placeholder="테이블 선택" />
+                              </SelectTrigger>
+                              <SelectContent>
+                                {allTables.map((table) => (
+                                  <SelectItem key={table.tableName} value={table.tableName}>
+                                    {table.displayName || table.tableName}
+                                  </SelectItem>
+                                ))}
+                              </SelectContent>
+                            </Select>
+                            <p className="text-[10px] text-muted-foreground">
+                              값을 가져올 소스 테이블
+                            </p>
+                          </div>
+
+                          {/* 소스 컬럼 선택 */}
+                          <div className="space-y-1.5">
+                            <Label className="text-[11px]">소스 컬럼 선택 *</Label>
+                            <SourceColumnSelector
+                              sourceTable={col.mapping?.referenceTable || localConfig.sourceTable || ""}
+                              value={col.mapping?.sourceField || ""}
+                              onChange={(value) => updateRepeaterColumn(index, {
+                                mapping: {
+                                  ...col.mapping,
+                                  type: "source",
+                                  sourceField: value
+                                } as ColumnMapping
+                              })}
+                            />
+                            <p className="text-[10px] text-muted-foreground">
+                              가져올 컬럼명
+                            </p>
+                          </div>
+                        </div>
+                      )}
+
+                      {col.mapping?.type === "reference" && (
+                        <div className="space-y-3">
+                          <div className="p-3 bg-purple-50 dark:bg-purple-950 rounded-md border border-purple-200 dark:border-purple-800">
+                            <p className="text-xs font-medium mb-2">외부 테이블 참조</p>
+                            <p className="text-[10px] text-muted-foreground">
+                              다른 테이블의 컬럼 값을 조인하여 가져옴 (조인 조건 필요)
+                            </p>
+                          </div>
+
+                          {/* 참조 테이블 선택 */}
+                          <div className="space-y-1.5">
+                            <Label className="text-[11px]">참조 테이블 선택 *</Label>
+                            <Select
+                              value={col.mapping?.referenceTable || ""}
+                              onValueChange={(value) => updateRepeaterColumn(index, {
+                                mapping: {
+                                  ...col.mapping,
+                                  type: "reference",
+                                  referenceTable: value,
+                                }
+                              })}
+                            >
+                              <SelectTrigger className="h-10 text-sm w-full">
+                                <SelectValue placeholder="테이블 선택" />
+                              </SelectTrigger>
+                              <SelectContent>
+                                {allTables.map((table) => (
+                                  <SelectItem key={table.tableName} value={table.tableName}>
+                                    {table.displayName || table.tableName}
+                                  </SelectItem>
+                                ))}
+                              </SelectContent>
+                            </Select>
+                            <p className="text-[10px] text-muted-foreground">
+                              참조할 외부 테이블
+                            </p>
+                          </div>
+
+                          {/* 참조 컬럼 선택 */}
+                          <div className="space-y-1.5">
+                            <Label className="text-[11px]">참조 컬럼 선택 *</Label>
+                            <ReferenceColumnSelector
+                              referenceTable={col.mapping?.referenceTable || ""}
+                              value={col.mapping?.referenceField || ""}
+                              onChange={(value) => updateRepeaterColumn(index, {
+                                mapping: {
+                                  ...col.mapping,
+                                  type: "reference",
+                                  referenceField: value
+                                } as ColumnMapping
+                              })}
+                            />
+                            <p className="text-[10px] text-muted-foreground">
+                              가져올 컬럼명
+                            </p>
+                          </div>
+
+                          {/* 조인 조건 설정 */}
+                          <div className="space-y-2">
+                            <div className="flex items-center justify-between">
+                              <Label className="text-[11px]">조인 조건 *</Label>
+                              <Button
+                                size="sm"
+                                variant="outline"
+                                onClick={() => {
+                                  const currentConditions = col.mapping?.joinCondition || [];
+                                  updateRepeaterColumn(index, {
+                                    mapping: {
+                                      ...col.mapping,
+                                      type: "reference",
+                                      joinCondition: [
+                                        ...currentConditions,
+                                        { sourceField: "", targetField: "", operator: "=" }
+                                      ]
+                                    } as ColumnMapping
+                                  });
+                                }}
+                                className="h-6 text-[10px] px-2"
+                              >
+                                <Plus className="h-3 w-3 mr-1" />
+                                조인 조건 추가
+                              </Button>
+                            </div>
+                            <p className="text-[10px] text-muted-foreground">
+                              소스 테이블과 참조 테이블을 어떻게 매칭할지 설정
+                            </p>
+
+                            {/* 조인 조건 목록 */}
+                            <div className="space-y-2">
+                              {(col.mapping?.joinCondition || []).map((condition, condIndex) => (
+                                <div key={condIndex} className="p-3 border rounded-md bg-background space-y-2">
+                                  <div className="flex items-center justify-between mb-2">
+                                    <span className="text-[10px] font-medium text-muted-foreground">
+                                      조인 조건 {condIndex + 1}
+                                    </span>
+                                    <Button
+                                      size="sm"
+                                      variant="ghost"
+                                      onClick={() => {
+                                        const currentConditions = [...(col.mapping?.joinCondition || [])];
+                                        currentConditions.splice(condIndex, 1);
+                                        updateRepeaterColumn(index, {
+                                          mapping: {
+                                            ...col.mapping,
+                                            type: "reference",
+                                            joinCondition: currentConditions
+                                          } as ColumnMapping
+                                        });
+                                      }}
+                                      className="h-5 w-5 p-0"
+                                    >
+                                      <X className="h-3 w-3" />
+                                    </Button>
+                                  </div>
+
+                                  {/* 소스 테이블 선택 */}
+                                  <div className="space-y-1">
+                                    <Label className="text-[10px] text-muted-foreground">소스 테이블 (어느 테이블)</Label>
+                                    <Select
+                                      value={condition.sourceTable || "target"}
+                                      onValueChange={(value) => {
+                                        const currentConditions = [...(col.mapping?.joinCondition || [])];
+                                        currentConditions[condIndex] = {
+                                          ...currentConditions[condIndex],
+                                          sourceTable: value as "source" | "target"
+                                        };
+                                        updateRepeaterColumn(index, {
+                                          mapping: {
+                                            ...col.mapping,
+                                            type: "reference",
+                                            joinCondition: currentConditions
+                                          } as ColumnMapping
+                                        });
+                                      }}
+                                    >
+                                      <SelectTrigger className="h-9 text-xs w-full">
+                                        <SelectValue />
+                                      </SelectTrigger>
+                                      <SelectContent>
+                                        <SelectItem value="target">
+                                          <div className="flex flex-col">
+                                            <span className="font-medium">저장 테이블 (권장)</span>
+                                            <span className="text-[10px] text-muted-foreground">
+                                              {localConfig.targetTable || "sales_order_mng"}
+                                            </span>
+                                          </div>
+                                        </SelectItem>
+                                        <SelectItem value="source">
+                                          <div className="flex flex-col">
+                                            <span className="font-medium">소스 테이블</span>
+                                            <span className="text-[10px] text-muted-foreground">
+                                              {localConfig.sourceTable || "item_info"}
+                                            </span>
+                                          </div>
+                                        </SelectItem>
+                                      </SelectContent>
+                                    </Select>
+                                    <p className="text-[10px] text-muted-foreground">
+                                      반복 테이블 = 저장 테이블 컬럼 사용
+                                    </p>
+                                  </div>
+
+                                  {/* 소스 필드 */}
+                                  <div className="space-y-1">
+                                    <Label className="text-[10px] text-muted-foreground">소스 필드 (어느 컬럼)</Label>
+                                    <Select
+                                      value={condition.sourceField || ""}
+                                      onValueChange={(value) => {
+                                        const currentConditions = [...(col.mapping?.joinCondition || [])];
+                                        currentConditions[condIndex] = {
+                                          ...currentConditions[condIndex],
+                                          sourceField: value
+                                        };
+                                        updateRepeaterColumn(index, {
+                                          mapping: {
+                                            ...col.mapping,
+                                            type: "reference",
+                                            joinCondition: currentConditions
+                                          } as ColumnMapping
+                                        });
+                                      }}
+                                    >
+                                      <SelectTrigger className="h-9 text-xs w-full">
+                                        <SelectValue placeholder="컬럼 선택" />
+                                      </SelectTrigger>
+                                      <SelectContent>
+                                        {/* 저장 테이블 선택 시 */}
+                                        {(!condition.sourceTable || condition.sourceTable === "target") && (
+                                          <>
+                                            {/* 반복 테이블에 추가된 컬럼 */}
+                                            {(localConfig.columns || []).length > 0 && (
+                                              <>
+                                                <div className="px-2 py-1.5 text-[10px] font-semibold text-muted-foreground">
+                                                  반복 테이블 컬럼 (권장)
+                                                </div>
+                                                {localConfig.columns
+                                                  .filter((c) => c.field !== col.field)
+                                                  .map((repeaterCol) => (
+                                                    <SelectItem key={`repeater-${repeaterCol.field}`} value={repeaterCol.field}>
+                                                      <span className="font-medium">{repeaterCol.label}</span>
+                                                      <span className="text-[10px] text-muted-foreground ml-1">({repeaterCol.field})</span>
+                                                    </SelectItem>
+                                                  ))}
+                                              </>
+                                            )}
+                                            
+                                            {/* 저장 테이블의 모든 컬럼 */}
+                                            {targetTableColumns.length > 0 && (
+                                              <>
+                                                <div className="px-2 py-1.5 text-[10px] font-semibold text-muted-foreground border-t mt-1 pt-2">
+                                                  저장 테이블 전체 컬럼 ({localConfig.targetTable || "sales_order_mng"})
+                                                </div>
+                                                {targetTableColumns.map((targetCol) => (
+                                                  <SelectItem key={`target-${targetCol.columnName}`} value={targetCol.columnName}>
+                                                    {targetCol.displayName || targetCol.columnName}
+                                                  </SelectItem>
+                                                ))}
+                                              </>
+                                            )}
+                                          </>
+                                        )}
+                                        
+                                        {/* 소스 테이블 선택 시 */}
+                                        {condition.sourceTable === "source" && (
+                                          <>
+                                            {tableColumns.length > 0 && (
+                                              <>
+                                                <div className="px-2 py-1.5 text-[10px] font-semibold text-muted-foreground">
+                                                  소스 테이블 컬럼 ({localConfig.sourceTable || "item_info"})
+                                                </div>
+                                                {tableColumns.map((sourceCol) => (
+                                                  <SelectItem key={`source-${sourceCol.columnName}`} value={sourceCol.columnName}>
+                                                    {sourceCol.displayName || sourceCol.columnName}
+                                                  </SelectItem>
+                                                ))}
+                                              </>
+                                            )}
+                                          </>
+                                        )}
+                                      </SelectContent>
+                                    </Select>
+                                    <p className="text-[10px] text-muted-foreground">
+                                      {(!condition.sourceTable || condition.sourceTable === "target") 
+                                        ? "반복 테이블에 이미 추가된 컬럼"
+                                        : "모달에서 선택한 원본 데이터의 컬럼"}
+                                    </p>
+                                  </div>
+
+                                  {/* 연산자 */}
+                                  <div className="flex items-center justify-center">
+                                    <Select
+                                      value={condition.operator || "="}
+                                      onValueChange={(value) => {
+                                        const currentConditions = [...(col.mapping?.joinCondition || [])];
+                                        currentConditions[condIndex] = {
+                                          ...currentConditions[condIndex],
+                                          operator: value as "=" | "!=" | ">" | "<" | ">=" | "<="
+                                        };
+                                        updateRepeaterColumn(index, {
+                                          mapping: {
+                                            ...col.mapping,
+                                            type: "reference",
+                                            joinCondition: currentConditions
+                                          } as ColumnMapping
+                                        });
+                                      }}
+                                    >
+                                      <SelectTrigger className="h-9 text-xs w-20">
+                                        <SelectValue />
+                                      </SelectTrigger>
+                                      <SelectContent>
+                                        <SelectItem value="=">=</SelectItem>
+                                        <SelectItem value="!=">!=</SelectItem>
+                                        <SelectItem value=">">&gt;</SelectItem>
+                                        <SelectItem value="<">&lt;</SelectItem>
+                                        <SelectItem value=">=">&gt;=</SelectItem>
+                                        <SelectItem value="<=">&lt;=</SelectItem>
+                                      </SelectContent>
+                                    </Select>
+                                  </div>
+
+                                  {/* 대상 필드 */}
+                                  <div className="space-y-1">
+                                    <Label className="text-[10px] text-muted-foreground">대상 필드 (참조 테이블)</Label>
+                                    <ReferenceColumnSelector
+                                      referenceTable={col.mapping?.referenceTable || ""}
+                                      value={condition.targetField || ""}
+                                      onChange={(value) => {
+                                        const currentConditions = [...(col.mapping?.joinCondition || [])];
+                                        currentConditions[condIndex] = {
+                                          ...currentConditions[condIndex],
+                                          targetField: value
+                                        };
+                                        updateRepeaterColumn(index, {
+                                          mapping: {
+                                            ...col.mapping,
+                                            type: "reference",
+                                            joinCondition: currentConditions
+                                          } as ColumnMapping
+                                        });
+                                      }}
+                                    />
+                                  </div>
+
+                                  {/* 조인 조건 미리보기 */}
+                                  {condition.sourceField && condition.targetField && (
+                                    <div className="mt-2 p-2 bg-muted/50 rounded text-[10px] font-mono">
+                                      <span className="text-blue-600 dark:text-blue-400">
+                                        {condition.sourceTable === "source" 
+                                          ? localConfig.sourceTable 
+                                          : localConfig.targetTable || "저장테이블"}
+                                      </span>
+                                      <span className="text-muted-foreground">.{condition.sourceField}</span>
+                                      <span className="mx-2 text-purple-600 dark:text-purple-400">{condition.operator || "="}</span>
+                                      <span className="text-purple-600 dark:text-purple-400">{col.mapping?.referenceTable}</span>
+                                      <span className="text-muted-foreground">.{condition.targetField}</span>
+                                    </div>
+                                  )}
+                                </div>
+                              ))}
+
+                              {/* 조인 조건 없을 때 안내 */}
+                              {(!col.mapping?.joinCondition || col.mapping.joinCondition.length === 0) && (
+                                <div className="p-4 border-2 border-dashed rounded-lg text-center">
+                                  <p className="text-xs text-muted-foreground mb-2">
+                                    조인 조건이 없습니다
+                                  </p>
+                                  <p className="text-[10px] text-muted-foreground">
+                                    "조인 조건 추가" 버튼을 클릭하여 매칭 조건을 설정하세요
+                                  </p>
+                                </div>
+                              )}
+                            </div>
+
+                            {/* 조인 조건 예시 */}
+                            {col.mapping?.referenceTable && (
+                              <div className="p-3 bg-blue-50 dark:bg-blue-950 rounded-md border border-blue-200 dark:border-blue-800">
+                                <p className="text-xs font-medium mb-2">조인 조건 예시</p>
+                                <div className="space-y-1 text-[10px] text-muted-foreground">
+                                  <p>예) 거래처별 품목 단가 조회:</p>
+                                  <p className="ml-2 font-mono">• item_code = item_code</p>
+                                  <p className="ml-2 font-mono">• customer_code = customer_code</p>
+                                </div>
+                              </div>
+                            )}
+                          </div>
+                        </div>
+                      )}
+
+                      {col.mapping?.type === "manual" && (
+                        <div className="p-3 bg-green-50 dark:bg-green-950 rounded-md border border-green-200 dark:border-green-800">
+                          <p className="text-xs font-medium mb-2">화면에서 입력 (수동)</p>
+                          <p className="text-[10px] text-muted-foreground">
+                            사용자가 반복 테이블에서 직접 입력
+                          </p>
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* 계산 규칙 (자동 계산) */}
+      <div className="space-y-4 border rounded-lg p-4 bg-card">
+        <div>
+          <h3 className="text-sm font-semibold mb-1">4. 계산 규칙 (자동 계산)</h3>
+          <p className="text-xs text-muted-foreground">
+            반복 테이블 컬럼들을 조합하여 자동 계산 (예: 수량 x 단가 = 금액)
+          </p>
+        </div>
+
+        <div className="p-3 bg-amber-50 dark:bg-amber-950 rounded-md border border-amber-200 dark:border-amber-800">
+          <p className="text-xs font-medium mb-1">중요 안내</p>
+          <ul className="text-[10px] text-muted-foreground space-y-1">
+            <li>• <strong className="text-primary">결과 필드는 수정 불가</strong> (자동 계산됨)</li>
+            <li>• 계산 공식에 사용된 컬럼은 수정 가능</li>
+            <li>• 예시: order_qty * unit_price = total_amount</li>
+          </ul>
+        </div>
+
+        {localConfig.calculationRules && localConfig.calculationRules.length > 0 ? (
+          <div className="space-y-4">
+            {localConfig.calculationRules.map((rule, index) => (
+              <div key={index} className="border rounded-lg p-4 space-y-4 bg-gradient-to-br from-card to-muted/20">
+                <div className="flex items-center justify-between">
+                  <div className="flex items-center gap-2">
+                    <div className="w-6 h-6 rounded-full bg-primary text-primary-foreground flex items-center justify-center text-xs font-bold">
+                      {index + 1}
+                    </div>
+                    <h4 className="text-sm font-semibold">계산 규칙 {index + 1}</h4>
+                  </div>
+                  <Button
+                    size="sm"
+                    variant="ghost"
+                    onClick={() => removeCalculationRule(index)}
+                    className="h-7 w-7 p-0 hover:bg-destructive/10 hover:text-destructive"
+                  >
+                    <X className="h-4 w-4" />
+                  </Button>
+                </div>
+
+                <div className="grid grid-cols-1 gap-4">
+                  {/* 결과 필드 */}
+                  <div className="space-y-2">
+                    <Label className="text-xs font-medium text-muted-foreground">
+                      결과 필드 (계산된 값이 저장될 컬럼) *
+                    </Label>
+                    <Select
+                      value={rule.result || ""}
+                      onValueChange={(value) => updateCalculationRule(index, { result: value })}
+                    >
+                      <SelectTrigger className="h-10 text-sm w-full">
+                        <SelectValue placeholder="결과 컬럼 선택">
+                          {rule.result
+                            ? localConfig.columns?.find((c) => c.field === rule.result)?.label || rule.result
+                            : "결과 컬럼 선택"}
+                        </SelectValue>
+                      </SelectTrigger>
+                      <SelectContent>
+                        {(localConfig.columns || []).map((col) => (
+                          <SelectItem key={col.field} value={col.field}>
+                            {col.label} ({col.field})
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                    <p className="text-[10px] text-muted-foreground">
+                      이 컬럼은 자동 계산되어 수정 불가능합니다
+                    </p>
+                  </div>
+
+                  {/* 계산 공식 */}
+                  <div className="space-y-2">
+                    <Label className="text-xs font-medium text-muted-foreground">
+                      계산 공식 (JavaScript 표현식) *
+                    </Label>
+                    <Input
+                      value={rule.formula || ""}
+                      onChange={(e) => updateCalculationRule(index, { formula: e.target.value })}
+                      placeholder="예: order_qty * unit_price"
+                      className="h-10 text-sm w-full font-mono"
+                    />
+                    <p className="text-[10px] text-muted-foreground">
+                      사용 가능한 연산자: +, -, *, /, (), 필드명 사용
+                    </p>
+                  </div>
+
+                  {/* 현재 설정 표시 */}
+                  {rule.result && rule.formula && (
+                    <div className="p-3 bg-primary/5 border border-primary/20 rounded-md">
+                      <div className="flex items-center gap-2 mb-2">
+                        <div className="w-1 h-4 bg-primary rounded-full"></div>
+                        <p className="text-xs font-semibold text-primary">현재 설정</p>
+                      </div>
+                      <div className="flex items-center gap-2 text-sm">
+                        <span className="font-bold text-primary">
+                          {localConfig.columns?.find((c) => c.field === rule.result)?.label || rule.result}
+                        </span>
+                        <span className="text-muted-foreground">=</span>
+                        <code className="px-2 py-1 bg-muted rounded text-xs font-mono">
+                          {rule.formula}
+                        </code>
+                      </div>
+                    </div>
+                  )}
+                </div>
+              </div>
+            ))}
+          </div>
+        ) : (
+          <div className="text-center py-8 border-2 border-dashed rounded-lg">
+            <div className="w-12 h-12 mx-auto mb-3 rounded-full bg-muted flex items-center justify-center">
+              <Plus className="h-6 w-6 text-muted-foreground" />
+            </div>
+            <p className="text-sm font-medium mb-1">계산 규칙이 없습니다</p>
+            <p className="text-xs text-muted-foreground mb-4">
+              자동 계산이 필요한 컬럼이 있다면 규칙을 추가하세요
+            </p>
+            <Button size="sm" variant="outline" onClick={addCalculationRule}>
+              <Plus className="h-3 w-3 mr-1" />
+              첫 번째 규칙 추가
+            </Button>
+          </div>
+        )}
+
+        {localConfig.calculationRules && localConfig.calculationRules.length > 0 && (
+          <Button
+            size="sm"
+            variant="outline"
+            onClick={addCalculationRule}
+            className="w-full"
+          >
+            <Plus className="h-3 w-3 mr-1" />
+            계산 규칙 추가
+          </Button>
+        )}
+      </div>
+
+      {/* 설정 순서 안내 */}
+      <div className="p-4 bg-muted rounded-md text-xs text-muted-foreground">
+        <p className="font-medium mb-2">설정 순서:</p>
+        <ol className="space-y-1 list-decimal list-inside">
+          <li><strong>소스 테이블</strong> (검색용): 모달에서 검색할 데이터 테이블</li>
+          <li><strong>저장 테이블</strong> (저장용): 선택한 항목을 저장할 테이블</li>
+          <li><strong>반복 테이블 컬럼</strong>: 저장 테이블의 컬럼 선택 → 화면에 표시</li>
+          <li><strong>컬럼 매핑 설정</strong>: 각 컬럼의 초기값을 어디서 가져올지 설정</li>
+          <li><strong>계산 규칙</strong>: 자동 계산이 필요한 컬럼 설정 (선택사항)</li>
+        </ol>
+
+        <div className="mt-4 pt-4 border-t border-border">
+          <p className="font-medium mb-2">실제 사용 예시:</p>
+          <ul className="space-y-1.5 text-[10px]">
+            <li><strong>수주 등록 화면</strong></li>
+            <li className="ml-4">- 소스 테이블: <code className="bg-background px-1 py-0.5 rounded">item_info</code> (품목 검색)</li>
+            <li className="ml-4">- 저장 테이블: <code className="bg-background px-1 py-0.5 rounded">sales_order_mng</code> (수주 저장)</li>
+            <li className="ml-4">- 컬럼: part_name, quantity, unit_price, amount...</li>
+            <li className="ml-4">- 매핑: item_name → part_name (소스에서 복사)</li>
+            <li className="ml-4">- 계산: <code className="bg-background px-1 py-0.5 rounded">amount = quantity * unit_price</code></li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/lib/registry/components/modal-repeater-table/ModalRepeaterTableRenderer.tsx b/frontend/lib/registry/components/modal-repeater-table/ModalRepeaterTableRenderer.tsx
new file mode 100644
index 00000000..6362e1ce
--- /dev/null
+++ b/frontend/lib/registry/components/modal-repeater-table/ModalRepeaterTableRenderer.tsx
@@ -0,0 +1,52 @@
+"use client";
+
+import React from "react";
+import { AutoRegisteringComponentRenderer } from "../../AutoRegisteringComponentRenderer";
+import { ModalRepeaterTableDefinition } from "./index";
+import { ModalRepeaterTableComponent } from "./ModalRepeaterTableComponent";
+
+/**
+ * ModalRepeaterTable 렌더러
+ * 자동 등록 시스템을 사용하여 컴포넌트를 레지스트리에 등록
+ */
+export class ModalRepeaterTableRenderer extends AutoRegisteringComponentRenderer {
+  static componentDefinition = ModalRepeaterTableDefinition;
+
+  render(): React.ReactElement {
+    // onChange 콜백을 명시적으로 전달
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const handleChange = (newValue: any[]) => {
+      console.log("🔄 ModalRepeaterTableRenderer onChange:", newValue.length, "개 항목");
+
+      // 컴포넌트 업데이트
+      this.updateComponent({ value: newValue });
+
+      // 원본 onChange 콜백도 호출 (있다면)
+      if (this.props.onChange) {
+        this.props.onChange(newValue);
+      }
+    };
+
+    // renderer prop 제거 (불필요)
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const { onChange, ...restProps } = this.props;
+
+    return <ModalRepeaterTableComponent {...restProps} onChange={handleChange} />;
+  }
+
+  /**
+   * 값 변경 처리 (레거시 메서드 - 호환성 유지)
+   */
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  protected handleValueChange = (value: any) => {
+    this.updateComponent({ value });
+  };
+}
+
+// 자동 등록 실행
+ModalRepeaterTableRenderer.registerSelf();
+
+// Hot Reload 지원 (개발 모드)
+if (process.env.NODE_ENV === "development") {
+  ModalRepeaterTableRenderer.enableHotReload();
+}
diff --git a/frontend/lib/registry/components/modal-repeater-table/RepeaterTable.tsx b/frontend/lib/registry/components/modal-repeater-table/RepeaterTable.tsx
new file mode 100644
index 00000000..879cbce5
--- /dev/null
+++ b/frontend/lib/registry/components/modal-repeater-table/RepeaterTable.tsx
@@ -0,0 +1,184 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+import { Input } from "@/components/ui/input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Button } from "@/components/ui/button";
+import { Trash2 } from "lucide-react";
+import { RepeaterColumnConfig } from "./types";
+import { cn } from "@/lib/utils";
+
+interface RepeaterTableProps {
+  columns: RepeaterColumnConfig[];
+  data: any[];
+  onDataChange: (newData: any[]) => void;
+  onRowChange: (index: number, newRow: any) => void;
+  onRowDelete: (index: number) => void;
+}
+
+export function RepeaterTable({
+  columns,
+  data,
+  onDataChange,
+  onRowChange,
+  onRowDelete,
+}: RepeaterTableProps) {
+  const [editingCell, setEditingCell] = useState<{
+    rowIndex: number;
+    field: string;
+  } | null>(null);
+
+  // 데이터 변경 감지 (필요시 활성화)
+  // useEffect(() => {
+  //   console.log("📊 RepeaterTable 데이터 업데이트:", data.length, "개 행");
+  // }, [data]);
+
+  const handleCellEdit = (rowIndex: number, field: string, value: any) => {
+    const newRow = { ...data[rowIndex], [field]: value };
+    onRowChange(rowIndex, newRow);
+  };
+
+  const renderCell = (
+    row: any,
+    column: RepeaterColumnConfig,
+    rowIndex: number
+  ) => {
+    const isEditing =
+      editingCell?.rowIndex === rowIndex && editingCell?.field === column.field;
+    const value = row[column.field];
+
+    // 계산 필드는 편집 불가
+    if (column.calculated || !column.editable) {
+      return (
+        <div className="px-2 py-1">
+          {column.type === "number"
+            ? typeof value === "number"
+              ? value.toLocaleString()
+              : value || "0"
+            : value || "-"}
+        </div>
+      );
+    }
+
+    // 편집 가능한 필드
+    switch (column.type) {
+      case "number":
+        return (
+          <Input
+            type="number"
+            value={value || ""}
+            onChange={(e) =>
+              handleCellEdit(rowIndex, column.field, parseFloat(e.target.value) || 0)
+            }
+            className="h-7 text-xs"
+          />
+        );
+
+      case "date":
+        return (
+          <Input
+            type="date"
+            value={value || ""}
+            onChange={(e) => handleCellEdit(rowIndex, column.field, e.target.value)}
+            className="h-7 text-xs"
+          />
+        );
+
+      case "select":
+        return (
+          <Select
+            value={value || ""}
+            onValueChange={(newValue) =>
+              handleCellEdit(rowIndex, column.field, newValue)
+            }
+          >
+            <SelectTrigger className="h-7 text-xs">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              {column.selectOptions?.map((option) => (
+                <SelectItem key={option.value} value={option.value}>
+                  {option.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        );
+
+      default: // text
+        return (
+          <Input
+            type="text"
+            value={value || ""}
+            onChange={(e) => handleCellEdit(rowIndex, column.field, e.target.value)}
+            className="h-7 text-xs"
+          />
+        );
+    }
+  };
+
+  return (
+    <div className="border rounded-md overflow-hidden">
+      <div className="overflow-x-auto">
+        <table className="w-full text-xs sm:text-sm">
+          <thead className="bg-muted">
+            <tr>
+              <th className="px-4 py-2 text-left font-medium text-muted-foreground w-12">
+                #
+              </th>
+              {columns.map((col) => (
+                <th
+                  key={col.field}
+                  className="px-4 py-2 text-left font-medium text-muted-foreground"
+                  style={{ width: col.width }}
+                >
+                  {col.label}
+                  {col.required && <span className="text-destructive ml-1">*</span>}
+                </th>
+              ))}
+              <th className="px-4 py-2 text-left font-medium text-muted-foreground w-20">
+                삭제
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            {data.length === 0 ? (
+              <tr>
+                <td
+                  colSpan={columns.length + 2}
+                  className="px-4 py-8 text-center text-muted-foreground"
+                >
+                  추가된 항목이 없습니다
+                </td>
+              </tr>
+            ) : (
+              data.map((row, rowIndex) => (
+                <tr key={rowIndex} className="border-t hover:bg-accent/50">
+                  <td className="px-4 py-2 text-center text-muted-foreground">
+                    {rowIndex + 1}
+                  </td>
+                  {columns.map((col) => (
+                    <td key={col.field} className="px-2 py-1">
+                      {renderCell(row, col, rowIndex)}
+                    </td>
+                  ))}
+                  <td className="px-4 py-2 text-center">
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => onRowDelete(rowIndex)}
+                      className="h-7 w-7 p-0 text-destructive hover:text-destructive"
+                    >
+                      <Trash2 className="h-4 w-4" />
+                    </Button>
+                  </td>
+                </tr>
+              ))
+            )}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}
+
diff --git a/frontend/lib/registry/components/modal-repeater-table/index.ts b/frontend/lib/registry/components/modal-repeater-table/index.ts
new file mode 100644
index 00000000..1caf553d
--- /dev/null
+++ b/frontend/lib/registry/components/modal-repeater-table/index.ts
@@ -0,0 +1,52 @@
+"use client";
+
+import { createComponentDefinition } from "../../utils/createComponentDefinition";
+import { ComponentCategory } from "@/types/component";
+import { ModalRepeaterTableComponent } from "./ModalRepeaterTableComponent";
+import { ModalRepeaterTableConfigPanel } from "./ModalRepeaterTableConfigPanel";
+
+/**
+ * ModalRepeaterTable 컴포넌트 정의
+ * 모달 검색 + 동적 테이블 (반복기)
+ */
+export const ModalRepeaterTableDefinition = createComponentDefinition({
+  id: "modal-repeater-table",
+  name: "모달 반복 테이블",
+  nameEng: "Modal Repeater Table",
+  description: "모달에서 항목을 검색하여 동적으로 추가/편집할 수 있는 테이블 (수주 품목 등)",
+  category: ComponentCategory.DATA,
+  webType: "table",
+  component: ModalRepeaterTableComponent,
+  defaultConfig: {
+    sourceTable: "item_info",
+    sourceColumns: ["item_code", "item_name", "size", "unit_price"],
+    sourceSearchFields: ["item_code", "item_name"],
+    modalTitle: "항목 검색 및 선택",
+    modalButtonText: "항목 검색",
+    multiSelect: true,
+    columns: [],
+    uniqueField: "item_code",
+  },
+  defaultSize: { width: 800, height: 400 },
+  configPanel: ModalRepeaterTableConfigPanel,
+  icon: "Table",
+  tags: ["테이블", "반복", "동적", "모달", "수주", "품목"],
+  version: "1.0.0",
+  author: "개발팀",
+});
+
+// 타입 내보내기
+export type {
+  ModalRepeaterTableProps,
+  RepeaterColumnConfig,
+  CalculationRule,
+  ItemSelectionModalProps,
+} from "./types";
+
+// 컴포넌트 내보내기
+export { ModalRepeaterTableComponent } from "./ModalRepeaterTableComponent";
+export { ModalRepeaterTableRenderer } from "./ModalRepeaterTableRenderer";
+export { ItemSelectionModal } from "./ItemSelectionModal";
+export { RepeaterTable } from "./RepeaterTable";
+export { useCalculation } from "./useCalculation";
+
diff --git a/frontend/lib/registry/components/modal-repeater-table/types.ts b/frontend/lib/registry/components/modal-repeater-table/types.ts
new file mode 100644
index 00000000..180830ee
--- /dev/null
+++ b/frontend/lib/registry/components/modal-repeater-table/types.ts
@@ -0,0 +1,110 @@
+/**
+ * ModalRepeaterTable 컴포넌트 타입 정의
+ * 모달에서 데이터를 검색하여 선택하고, Repeater 테이블에 추가하는 컴포넌트
+ */
+
+export interface ModalRepeaterTableProps {
+  // 소스 데이터 (모달에서 가져올 데이터)
+  sourceTable: string; // 검색할 테이블 (예: "item_info")
+  sourceColumns: string[]; // 모달에 표시할 컬럼들
+  sourceSearchFields?: string[]; // 검색 가능한 필드들
+
+  // 🆕 저장 대상 테이블 설정
+  targetTable?: string; // 저장할 테이블 (예: "sales_order_mng")
+
+  // 모달 설정
+  modalTitle: string; // 모달 제목 (예: "품목 검색 및 선택")
+  modalButtonText?: string; // 모달 열기 버튼 텍스트 (기본: "품목 검색")
+  multiSelect?: boolean; // 다중 선택 허용 (기본: true)
+
+  // Repeater 테이블 설정
+  columns: RepeaterColumnConfig[]; // 테이블 컬럼 설정
+
+  // 계산 규칙
+  calculationRules?: CalculationRule[]; // 자동 계산 규칙
+
+  // 데이터
+  value: any[]; // 현재 추가된 항목들
+  onChange: (newData: any[]) => void; // 데이터 변경 콜백
+
+  // 중복 체크
+  uniqueField?: string; // 중복 체크할 필드 (예: "item_code")
+
+  // 필터링
+  filterCondition?: Record<string, any>;
+  companyCode?: string;
+
+  // 스타일
+  className?: string;
+}
+
+export interface RepeaterColumnConfig {
+  field: string; // 필드명
+  label: string; // 컬럼 헤더 라벨
+  type?: "text" | "number" | "date" | "select"; // 입력 타입
+  editable?: boolean; // 편집 가능 여부
+  calculated?: boolean; // 계산 필드 여부
+  width?: string; // 컬럼 너비
+  required?: boolean; // 필수 입력 여부
+  defaultValue?: any; // 기본값
+  selectOptions?: { value: string; label: string }[]; // select일 때 옵션
+  
+  // 🆕 컬럼 매핑 설정
+  mapping?: ColumnMapping; // 이 컬럼의 데이터를 어디서 가져올지 설정
+}
+
+/**
+ * 컬럼 매핑 설정
+ * 반복 테이블 컬럼이 어느 테이블의 어느 컬럼에서 값을 가져올지 정의
+ */
+export interface ColumnMapping {
+  /** 매핑 타입 */
+  type: "source" | "reference" | "manual";
+  
+  /** 매핑 타입별 설정 */
+  // type: "source" - 소스 테이블 (모달에서 선택한 항목)의 컬럼에서 가져오기
+  sourceField?: string; // 소스 테이블의 컬럼명 (예: "item_name")
+  
+  // type: "reference" - 외부 테이블 참조 (조인)
+  referenceTable?: string; // 참조 테이블명 (예: "customer_item_mapping")
+  referenceField?: string; // 참조 테이블에서 가져올 컬럼 (예: "basic_price")
+  joinCondition?: JoinCondition[]; // 조인 조건
+  
+  // type: "manual" - 사용자가 직접 입력
+}
+
+/**
+ * 조인 조건 정의
+ */
+export interface JoinCondition {
+  /** 소스 테이블 (어느 테이블의 컬럼인지) */
+  sourceTable?: string; // "source" (item_info) 또는 "target" (sales_order_mng)
+  /** 현재 테이블의 컬럼 (소스 테이블 또는 반복 테이블) */
+  sourceField: string;
+  /** 참조 테이블의 컬럼 */
+  targetField: string;
+  /** 비교 연산자 */
+  operator?: "=" | "!=" | ">" | "<" | ">=" | "<=";
+}
+
+export interface CalculationRule {
+  result: string; // 결과를 저장할 필드
+  formula: string; // 계산 공식 (예: "quantity * unit_price")
+  dependencies: string[]; // 의존하는 필드들
+}
+
+export interface ItemSelectionModalProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  sourceTable: string;
+  sourceColumns: string[];
+  sourceSearchFields?: string[];
+  multiSelect?: boolean;
+  filterCondition?: Record<string, any>;
+  modalTitle: string;
+  alreadySelected: any[]; // 이미 선택된 항목들 (중복 방지용)
+  uniqueField?: string;
+  onSelect: (items: any[]) => void;
+  columnLabels?: Record<string, string>; // 컬럼명 -> 라벨명 매핑
+}
+
diff --git a/frontend/lib/registry/components/modal-repeater-table/useCalculation.ts b/frontend/lib/registry/components/modal-repeater-table/useCalculation.ts
new file mode 100644
index 00000000..1f6f69f2
--- /dev/null
+++ b/frontend/lib/registry/components/modal-repeater-table/useCalculation.ts
@@ -0,0 +1,67 @@
+import { useCallback } from "react";
+import { CalculationRule } from "./types";
+
+/**
+ * 계산 필드 자동 업데이트 훅
+ */
+export function useCalculation(calculationRules: CalculationRule[] = []) {
+  /**
+   * 단일 행의 계산 필드 업데이트
+   */
+  const calculateRow = useCallback(
+    (row: any): any => {
+      if (calculationRules.length === 0) return row;
+
+      const updatedRow = { ...row };
+
+      for (const rule of calculationRules) {
+        try {
+          // formula에서 필드명 자동 추출 (영문자, 숫자, 언더스코어로 구성된 단어)
+          let formula = rule.formula;
+          const fieldMatches = formula.match(/[a-zA-Z_][a-zA-Z0-9_]*/g) || [];
+          
+          // 추출된 필드명들을 사용 (dependencies가 없으면 자동 추출 사용)
+          const dependencies = rule.dependencies && rule.dependencies.length > 0 
+            ? rule.dependencies 
+            : fieldMatches;
+
+          // 필드명을 실제 값으로 대체
+          for (const dep of dependencies) {
+            // 결과 필드는 제외
+            if (dep === rule.result) continue;
+            
+            const value = parseFloat(row[dep]) || 0;
+            // 정확한 필드명만 대체 (단어 경계 사용)
+            formula = formula.replace(new RegExp(`\\b${dep}\\b`, "g"), value.toString());
+          }
+
+          // 계산 실행 (Function 사용)
+          const result = new Function(`return ${formula}`)();
+          updatedRow[rule.result] = result;
+        } catch (error) {
+          console.error(`계산 오류 (${rule.formula}):`, error);
+          updatedRow[rule.result] = 0;
+        }
+      }
+
+      return updatedRow;
+    },
+    [calculationRules]
+  );
+
+  /**
+   * 전체 데이터의 계산 필드 업데이트
+   */
+  const calculateAll = useCallback(
+    (data: any[]): any[] => {
+      return data.map((row) => calculateRow(row));
+    },
+    [calculateRow]
+  );
+
+  return {
+    calculateRow,
+    calculateAll,
+  };
+}
+
diff --git a/frontend/lib/registry/components/order-registration-modal/OrderRegistrationModalConfigPanel.tsx b/frontend/lib/registry/components/order-registration-modal/OrderRegistrationModalConfigPanel.tsx
new file mode 100644
index 00000000..1cfc1bde
--- /dev/null
+++ b/frontend/lib/registry/components/order-registration-modal/OrderRegistrationModalConfigPanel.tsx
@@ -0,0 +1,93 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+import { Label } from "@/components/ui/label";
+import { Input } from "@/components/ui/input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+
+interface OrderRegistrationModalConfig {
+  buttonText?: string;
+  buttonVariant?: "default" | "secondary" | "outline" | "ghost";
+  buttonSize?: "default" | "sm" | "lg";
+}
+
+interface OrderRegistrationModalConfigPanelProps {
+  config: OrderRegistrationModalConfig;
+  onConfigChange: (config: OrderRegistrationModalConfig) => void;
+}
+
+export function OrderRegistrationModalConfigPanel({
+  config,
+  onConfigChange,
+}: OrderRegistrationModalConfigPanelProps) {
+  const [localConfig, setLocalConfig] = useState(config);
+
+  useEffect(() => {
+    setLocalConfig(config);
+  }, [config]);
+
+  const updateConfig = (updates: Partial<OrderRegistrationModalConfig>) => {
+    const newConfig = { ...localConfig, ...updates };
+    setLocalConfig(newConfig);
+    onConfigChange(newConfig);
+  };
+
+  return (
+    <div className="space-y-4 p-4">
+      <div className="space-y-2">
+        <Label className="text-xs sm:text-sm">버튼 텍스트</Label>
+        <Input
+          value={localConfig.buttonText || "수주 등록"}
+          onChange={(e) => updateConfig({ buttonText: e.target.value })}
+          placeholder="수주 등록"
+          className="h-8 text-xs sm:h-10 sm:text-sm"
+        />
+      </div>
+
+      <div className="space-y-2">
+        <Label className="text-xs sm:text-sm">버튼 스타일</Label>
+        <Select
+          value={localConfig.buttonVariant || "default"}
+          onValueChange={(value: any) => updateConfig({ buttonVariant: value })}
+        >
+          <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="default">기본</SelectItem>
+            <SelectItem value="secondary">보조</SelectItem>
+            <SelectItem value="outline">외곽선</SelectItem>
+            <SelectItem value="ghost">고스트</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+
+      <div className="space-y-2">
+        <Label className="text-xs sm:text-sm">버튼 크기</Label>
+        <Select
+          value={localConfig.buttonSize || "default"}
+          onValueChange={(value: any) => updateConfig({ buttonSize: value })}
+        >
+          <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="sm">작게</SelectItem>
+            <SelectItem value="default">기본</SelectItem>
+            <SelectItem value="lg">크게</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+
+      <div className="p-4 bg-muted rounded-md text-xs text-muted-foreground">
+        <p className="font-medium mb-2">💡 참고사항:</p>
+        <ul className="space-y-1 list-disc list-inside">
+          <li>버튼 클릭 시 수주 등록 모달이 열립니다</li>
+          <li>거래처 검색, 품목 선택 기능 포함</li>
+          <li>입력 방식: 거래처 우선/견적서/단가</li>
+        </ul>
+      </div>
+    </div>
+  );
+}
+
diff --git a/frontend/lib/registry/components/order-registration-modal/OrderRegistrationModalRenderer.tsx b/frontend/lib/registry/components/order-registration-modal/OrderRegistrationModalRenderer.tsx
new file mode 100644
index 00000000..a56edf67
--- /dev/null
+++ b/frontend/lib/registry/components/order-registration-modal/OrderRegistrationModalRenderer.tsx
@@ -0,0 +1,56 @@
+"use client";
+
+import React, { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Plus } from "lucide-react";
+import { OrderRegistrationModal } from "@/components/order/OrderRegistrationModal";
+import { ComponentRegistry } from "@/lib/registry/ComponentRegistry";
+import OrderRegistrationModalDefinition from "./index";
+import { OrderRegistrationModalConfigPanel } from "./OrderRegistrationModalConfigPanel";
+
+interface OrderRegistrationModalRendererProps {
+  buttonText?: string;
+  buttonVariant?: "default" | "secondary" | "outline" | "ghost" | "destructive";
+  buttonSize?: "default" | "sm" | "lg";
+  style?: React.CSSProperties;
+}
+
+export function OrderRegistrationModalRenderer({
+  buttonText = "수주 등록",
+  buttonVariant = "default",
+  buttonSize = "default",
+  style,
+}: OrderRegistrationModalRendererProps) {
+  const [isOpen, setIsOpen] = useState(false);
+
+  // style에서 width, height 제거 (h-full w-full로 제어)
+  const { width, height, ...restStyle } = style || {};
+
+  return (
+    <>
+      <Button
+        variant={buttonVariant}
+        size={buttonSize}
+        onClick={() => setIsOpen(true)}
+        className="h-full w-full"
+        style={restStyle}
+      >
+        <Plus className="mr-2 h-4 w-4" />
+        {buttonText}
+      </Button>
+
+      <OrderRegistrationModal open={isOpen} onOpenChange={setIsOpen} />
+    </>
+  );
+}
+
+// 컴포넌트 자동 등록
+if (typeof window !== "undefined") {
+  ComponentRegistry.registerComponent({
+    ...OrderRegistrationModalDefinition,
+    component: OrderRegistrationModalRenderer,
+    renderer: OrderRegistrationModalRenderer,
+    configPanel: OrderRegistrationModalConfigPanel,
+  } as any);
+}
+
diff --git a/frontend/lib/registry/components/order-registration-modal/index.ts b/frontend/lib/registry/components/order-registration-modal/index.ts
new file mode 100644
index 00000000..af0b42b1
--- /dev/null
+++ b/frontend/lib/registry/components/order-registration-modal/index.ts
@@ -0,0 +1,68 @@
+/**
+ * 수주등록 모달 컴포넌트
+ * 거래처 검색, 품목 선택, 수주 정보 입력을 한 번에 처리하는 모달
+ */
+
+import { ComponentDefinition, ComponentCategory } from "@/types/component";
+
+export const OrderRegistrationModalDefinition: Omit<ComponentDefinition, "renderer" | "configPanel" | "component"> = {
+  id: "order-registration-modal",
+  name: "수주등록 모달",
+  category: ComponentCategory.ACTION,
+  webType: "button" as const,
+  description: "거래처, 품목을 선택하여 수주를 등록하는 모달",
+  icon: "FileText",
+  version: "1.0.0",
+  author: "WACE",
+  tags: ["수주", "주문", "영업", "모달"],
+  
+  defaultSize: {
+    width: 120,
+    height: 40,
+  },
+  
+  defaultConfig: {
+    buttonText: "수주 등록",
+    buttonVariant: "default",
+    buttonSize: "default",
+  },
+  
+  defaultProps: {
+    style: {
+      width: "120px",
+      height: "40px",
+    },
+  },
+  
+  configSchema: {
+    buttonText: {
+      type: "string",
+      label: "버튼 텍스트",
+      defaultValue: "수주 등록",
+    },
+    buttonVariant: {
+      type: "select",
+      label: "버튼 스타일",
+      options: [
+        { label: "기본", value: "default" },
+        { label: "보조", value: "secondary" },
+        { label: "외곽선", value: "outline" },
+        { label: "고스트", value: "ghost" },
+      ],
+      defaultValue: "default",
+    },
+    buttonSize: {
+      type: "select",
+      label: "버튼 크기",
+      options: [
+        { label: "작게", value: "sm" },
+        { label: "기본", value: "default" },
+        { label: "크게", value: "lg" },
+      ],
+      defaultValue: "default",
+    },
+  },
+};
+
+export default OrderRegistrationModalDefinition;
+
diff --git a/frontend/lib/registry/components/section-card/SectionCardComponent.tsx b/frontend/lib/registry/components/section-card/SectionCardComponent.tsx
new file mode 100644
index 00000000..4b953bbc
--- /dev/null
+++ b/frontend/lib/registry/components/section-card/SectionCardComponent.tsx
@@ -0,0 +1,178 @@
+"use client";
+
+import React from "react";
+import { cn } from "@/lib/utils";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+
+export interface SectionCardProps {
+  component?: {
+    id: string;
+    componentConfig?: {
+      title?: string;
+      description?: string;
+      showHeader?: boolean;
+      headerPosition?: "top" | "left";
+      padding?: "none" | "sm" | "md" | "lg";
+      backgroundColor?: "default" | "muted" | "transparent";
+      borderStyle?: "solid" | "dashed" | "none";
+      collapsible?: boolean;
+      defaultOpen?: boolean;
+    };
+    style?: React.CSSProperties;
+  };
+  children?: React.ReactNode;
+  className?: string;
+  onClick?: (e?: React.MouseEvent) => void;
+  isSelected?: boolean;
+  isDesignMode?: boolean;
+}
+
+/**
+ * Section Card 컴포넌트
+ * 제목과 테두리가 있는 명확한 그룹화 컨테이너
+ */
+export function SectionCardComponent({
+  component,
+  children,
+  className,
+  onClick,
+  isSelected = false,
+  isDesignMode = false,
+}: SectionCardProps) {
+  const config = component?.componentConfig || {};
+  const [isOpen, setIsOpen] = React.useState(config.defaultOpen !== false);
+
+  // 🔄 실시간 업데이트를 위해 config에서 직접 읽기
+  const title = config.title || "";
+  const description = config.description || "";
+  const showHeader = config.showHeader !== false; // 기본값: true
+  const padding = config.padding || "md";
+  const backgroundColor = config.backgroundColor || "default";
+  const borderStyle = config.borderStyle || "solid";
+  const collapsible = config.collapsible || false;
+
+  // 🎯 디버깅: config 값 확인
+  React.useEffect(() => {
+    console.log("✅ Section Card Config:", {
+      title,
+      description,
+      showHeader,
+      fullConfig: config,
+    });
+  }, [config.title, config.description, config.showHeader]);
+
+  // 패딩 매핑
+  const paddingMap = {
+    none: "p-0",
+    sm: "p-3",
+    md: "p-6",
+    lg: "p-8",
+  };
+
+  // 배경색 매핑
+  const backgroundColorMap = {
+    default: "bg-card",
+    muted: "bg-muted/30",
+    transparent: "bg-transparent",
+  };
+
+  // 테두리 스타일 매핑
+  const borderStyleMap = {
+    solid: "border-solid",
+    dashed: "border-dashed",
+    none: "border-none",
+  };
+
+  const handleToggle = () => {
+    if (collapsible) {
+      setIsOpen(!isOpen);
+    }
+  };
+
+  return (
+    <Card
+      className={cn(
+        "transition-all",
+        backgroundColorMap[backgroundColor],
+        borderStyleMap[borderStyle],
+        borderStyle === "none" && "shadow-none",
+        isDesignMode && isSelected && "ring-2 ring-primary ring-offset-2",
+        isDesignMode && !children && "min-h-[150px]",
+        className
+      )}
+      style={component?.style}
+      onClick={onClick}
+    >
+      {/* 헤더 */}
+      {showHeader && (title || description || isDesignMode) && (
+        <CardHeader
+          className={cn(
+            "cursor-pointer",
+            collapsible && "hover:bg-accent/50 transition-colors"
+          )}
+          onClick={handleToggle}
+        >
+          <div className="flex items-center justify-between">
+            <div className="flex-1">
+              {(title || isDesignMode) && (
+                <CardTitle className="text-xl font-semibold">
+                  {title || (isDesignMode ? "섹션 제목" : "")}
+                </CardTitle>
+              )}
+              {(description || isDesignMode) && (
+                <CardDescription className="text-sm text-muted-foreground mt-1.5">
+                  {description || (isDesignMode ? "섹션 설명 (선택사항)" : "")}
+                </CardDescription>
+              )}
+            </div>
+            {collapsible && (
+              <div className={cn(
+                "ml-4 transition-transform",
+                isOpen ? "rotate-180" : "rotate-0"
+              )}>
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="20"
+                  height="20"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                >
+                  <path d="m6 9 6 6 6-6" />
+                </svg>
+              </div>
+            )}
+          </div>
+        </CardHeader>
+      )}
+
+      {/* 컨텐츠 */}
+      {(!collapsible || isOpen) && (
+        <CardContent className={cn(paddingMap[padding])}>
+          {/* 디자인 모드에서 빈 상태 안내 */}
+          {isDesignMode && !children && (
+            <div className="flex items-center justify-center py-12 text-muted-foreground text-sm">
+              <div className="text-center">
+                <div className="mb-2">🃏 Section Card</div>
+                <div className="text-xs">컴포넌트를 이곳에 배치하세요</div>
+              </div>
+            </div>
+          )}
+
+          {/* 자식 컴포넌트들 */}
+          {children}
+        </CardContent>
+      )}
+    </Card>
+  );
+}
+
diff --git a/frontend/lib/registry/components/section-card/SectionCardConfigPanel.tsx b/frontend/lib/registry/components/section-card/SectionCardConfigPanel.tsx
new file mode 100644
index 00000000..dd2b8d98
--- /dev/null
+++ b/frontend/lib/registry/components/section-card/SectionCardConfigPanel.tsx
@@ -0,0 +1,172 @@
+"use client";
+
+import React from "react";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Input } from "@/components/ui/input";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Textarea } from "@/components/ui/textarea";
+
+interface SectionCardConfigPanelProps {
+  config: any;
+  onChange: (config: any) => void;
+}
+
+export function SectionCardConfigPanel({
+  config,
+  onChange,
+}: SectionCardConfigPanelProps) {
+  const handleChange = (key: string, value: any) => {
+    const newConfig = {
+      ...config,
+      [key]: value,
+    };
+    onChange(newConfig);
+    
+    // 🎯 실시간 업데이트를 위한 이벤트 발생
+    if (typeof window !== "undefined") {
+      window.dispatchEvent(new CustomEvent("componentConfigChanged", {
+        detail: { config: newConfig }
+      }));
+    }
+  };
+
+  return (
+    <div className="space-y-4 p-4">
+      <div className="space-y-2">
+        <h3 className="text-sm font-semibold">Section Card 설정</h3>
+        <p className="text-xs text-muted-foreground">
+          제목과 테두리가 있는 명확한 그룹화 컨테이너
+        </p>
+      </div>
+
+      {/* 헤더 표시 */}
+      <div className="flex items-center space-x-2">
+        <Checkbox
+          id="showHeader"
+          checked={config.showHeader !== false}
+          onCheckedChange={(checked) => handleChange("showHeader", checked)}
+        />
+        <Label htmlFor="showHeader" className="text-xs cursor-pointer">
+          헤더 표시
+        </Label>
+      </div>
+
+      {/* 제목 */}
+      {config.showHeader !== false && (
+        <div className="space-y-2">
+          <Label className="text-xs">제목</Label>
+          <Input
+            value={config.title || ""}
+            onChange={(e) => handleChange("title", e.target.value)}
+            placeholder="섹션 제목 입력"
+            className="h-9 text-xs"
+          />
+        </div>
+      )}
+
+      {/* 설명 */}
+      {config.showHeader !== false && (
+        <div className="space-y-2">
+          <Label className="text-xs">설명 (선택)</Label>
+          <Textarea
+            value={config.description || ""}
+            onChange={(e) => handleChange("description", e.target.value)}
+            placeholder="섹션 설명 입력"
+            className="text-xs resize-none"
+            rows={2}
+          />
+        </div>
+      )}
+
+      {/* 패딩 */}
+      <div className="space-y-2">
+        <Label className="text-xs">내부 여백</Label>
+        <Select
+          value={config.padding || "md"}
+          onValueChange={(value) => handleChange("padding", value)}
+        >
+          <SelectTrigger className="h-9 text-xs">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="none">없음</SelectItem>
+            <SelectItem value="sm">작게 (12px)</SelectItem>
+            <SelectItem value="md">중간 (24px)</SelectItem>
+            <SelectItem value="lg">크게 (32px)</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+
+      {/* 배경색 */}
+      <div className="space-y-2">
+        <Label className="text-xs">배경색</Label>
+        <Select
+          value={config.backgroundColor || "default"}
+          onValueChange={(value) => handleChange("backgroundColor", value)}
+        >
+          <SelectTrigger className="h-9 text-xs">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="default">기본 (카드)</SelectItem>
+            <SelectItem value="muted">회색</SelectItem>
+            <SelectItem value="transparent">투명</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+
+      {/* 테두리 스타일 */}
+      <div className="space-y-2">
+        <Label className="text-xs">테두리 스타일</Label>
+        <Select
+          value={config.borderStyle || "solid"}
+          onValueChange={(value) => handleChange("borderStyle", value)}
+        >
+          <SelectTrigger className="h-9 text-xs">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="solid">실선</SelectItem>
+            <SelectItem value="dashed">점선</SelectItem>
+            <SelectItem value="none">없음</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+
+      {/* 접기/펼치기 기능 */}
+      <div className="space-y-2 pt-2 border-t">
+        <div className="flex items-center space-x-2">
+          <Checkbox
+            id="collapsible"
+            checked={config.collapsible || false}
+            onCheckedChange={(checked) => handleChange("collapsible", checked)}
+          />
+          <Label htmlFor="collapsible" className="text-xs cursor-pointer">
+            접기/펼치기 가능
+          </Label>
+        </div>
+
+        {config.collapsible && (
+          <div className="flex items-center space-x-2 ml-6">
+            <Checkbox
+              id="defaultOpen"
+              checked={config.defaultOpen !== false}
+              onCheckedChange={(checked) => handleChange("defaultOpen", checked)}
+            />
+            <Label htmlFor="defaultOpen" className="text-xs cursor-pointer">
+              기본으로 펼치기
+            </Label>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
diff --git a/frontend/lib/registry/components/section-card/SectionCardRenderer.tsx b/frontend/lib/registry/components/section-card/SectionCardRenderer.tsx
new file mode 100644
index 00000000..1bd23025
--- /dev/null
+++ b/frontend/lib/registry/components/section-card/SectionCardRenderer.tsx
@@ -0,0 +1,27 @@
+"use client";
+
+import React from "react";
+import { AutoRegisteringComponentRenderer } from "../../AutoRegisteringComponentRenderer";
+import { SectionCardDefinition } from "./index";
+import { SectionCardComponent } from "./SectionCardComponent";
+
+/**
+ * Section Card 렌더러
+ * 자동 등록 시스템을 사용하여 컴포넌트를 레지스트리에 등록
+ */
+export class SectionCardRenderer extends AutoRegisteringComponentRenderer {
+  static componentDefinition = SectionCardDefinition;
+
+  render(): React.ReactElement {
+    return <SectionCardComponent {...this.props} renderer={this} />;
+  }
+}
+
+// 자동 등록 실행
+SectionCardRenderer.registerSelf();
+
+// Hot Reload 지원 (개발 모드)
+if (process.env.NODE_ENV === "development") {
+  SectionCardRenderer.enableHotReload();
+}
+
diff --git a/frontend/lib/registry/components/section-card/index.ts b/frontend/lib/registry/components/section-card/index.ts
new file mode 100644
index 00000000..b93c9d85
--- /dev/null
+++ b/frontend/lib/registry/components/section-card/index.ts
@@ -0,0 +1,43 @@
+"use client";
+
+import { createComponentDefinition } from "../../utils/createComponentDefinition";
+import { ComponentCategory } from "@/types/component";
+import { SectionCardComponent } from "./SectionCardComponent";
+import { SectionCardConfigPanel } from "./SectionCardConfigPanel";
+
+/**
+ * Section Card 컴포넌트 정의
+ * 제목과 테두리가 있는 명확한 그룹화 컨테이너
+ */
+export const SectionCardDefinition = createComponentDefinition({
+  id: "section-card",
+  name: "Section Card",
+  nameEng: "Section Card",
+  description: "제목과 테두리가 있는 명확한 그룹화 컨테이너",
+  category: ComponentCategory.LAYOUT,
+  webType: "custom",
+  component: SectionCardComponent,
+  defaultConfig: {
+    title: "섹션 제목",
+    description: "",
+    showHeader: true,
+    padding: "md",
+    backgroundColor: "default",
+    borderStyle: "solid",
+    collapsible: false,
+    defaultOpen: true,
+  },
+  defaultSize: { width: 800, height: 250 },
+  configPanel: SectionCardConfigPanel,
+  icon: "LayoutPanelTop",
+  tags: ["섹션", "그룹", "카드", "컨테이너", "제목", "card"],
+  version: "1.0.0",
+  author: "WACE",
+});
+
+// 컴포넌트는 SectionCardRenderer에서 자동 등록됩니다
+
+export { SectionCardComponent } from "./SectionCardComponent";
+export { SectionCardConfigPanel } from "./SectionCardConfigPanel";
+export { SectionCardRenderer } from "./SectionCardRenderer";
+
diff --git a/frontend/lib/registry/components/section-paper/SectionPaperComponent.tsx b/frontend/lib/registry/components/section-paper/SectionPaperComponent.tsx
new file mode 100644
index 00000000..e8b06380
--- /dev/null
+++ b/frontend/lib/registry/components/section-paper/SectionPaperComponent.tsx
@@ -0,0 +1,138 @@
+"use client";
+
+import React from "react";
+import { cn } from "@/lib/utils";
+
+export interface SectionPaperProps {
+  component?: {
+    id: string;
+    componentConfig?: {
+      backgroundColor?: "default" | "muted" | "accent" | "primary" | "custom";
+      customColor?: string;
+      showBorder?: boolean;
+      borderStyle?: "none" | "subtle";
+      padding?: "none" | "sm" | "md" | "lg";
+      roundedCorners?: "none" | "sm" | "md" | "lg";
+      shadow?: "none" | "sm" | "md";
+    };
+    style?: React.CSSProperties;
+  };
+  children?: React.ReactNode;
+  className?: string;
+  onClick?: (e?: React.MouseEvent) => void;
+  isSelected?: boolean;
+  isDesignMode?: boolean;
+}
+
+/**
+ * Section Paper 컴포넌트
+ * 배경색만 있는 미니멀한 그룹화 컨테이너 (색종이 컨셉)
+ */
+export function SectionPaperComponent({
+  component,
+  children,
+  className,
+  onClick,
+  isSelected = false,
+  isDesignMode = false,
+}: SectionPaperProps) {
+  const config = component?.componentConfig || {};
+
+  // 배경색 매핑
+  const backgroundColorMap = {
+    default: "bg-muted/20",
+    muted: "bg-muted/30",
+    accent: "bg-accent/20",
+    primary: "bg-primary/5",
+    custom: "",
+  };
+
+  // 패딩 매핑
+  const paddingMap = {
+    none: "p-0",
+    sm: "p-3",
+    md: "p-4",
+    lg: "p-6",
+  };
+
+  // 둥근 모서리 매핑
+  const roundedMap = {
+    none: "rounded-none",
+    sm: "rounded-sm",
+    md: "rounded-md",
+    lg: "rounded-lg",
+  };
+
+  // 그림자 매핑
+  const shadowMap = {
+    none: "",
+    sm: "shadow-sm",
+    md: "shadow-md",
+  };
+
+  const backgroundColor = config.backgroundColor || "default";
+  const padding = config.padding || "md";
+  const rounded = config.roundedCorners || "md";
+  const shadow = config.shadow || "none";
+  const showBorder = config.showBorder || false;
+  const borderStyle = config.borderStyle || "subtle";
+
+  // 커스텀 배경색 처리
+  const customBgStyle =
+    backgroundColor === "custom" && config.customColor
+      ? { backgroundColor: config.customColor }
+      : {};
+
+  return (
+    <div
+      className={cn(
+        // 기본 스타일
+        "relative transition-colors",
+
+        // 배경색
+        backgroundColor !== "custom" && backgroundColorMap[backgroundColor],
+
+        // 패딩
+        paddingMap[padding],
+
+        // 둥근 모서리
+        roundedMap[rounded],
+
+        // 그림자
+        shadowMap[shadow],
+
+        // 테두리 (선택)
+        showBorder &&
+          borderStyle === "subtle" &&
+          "border border-border/30",
+
+        // 디자인 모드에서 선택된 상태
+        isDesignMode && isSelected && "ring-2 ring-primary ring-offset-2",
+
+        // 디자인 모드에서 빈 상태 표시
+        isDesignMode && !children && "min-h-[100px] border-2 border-dashed border-muted-foreground/30",
+
+        className
+      )}
+      style={{
+        ...customBgStyle,
+        ...component?.style,
+      }}
+      onClick={onClick}
+    >
+      {/* 디자인 모드에서 빈 상태 안내 */}
+      {isDesignMode && !children && (
+        <div className="flex items-center justify-center h-full text-muted-foreground text-sm">
+          <div className="text-center">
+            <div className="mb-1">📄 Section Paper</div>
+            <div className="text-xs">컴포넌트를 이곳에 배치하세요</div>
+          </div>
+        </div>
+      )}
+
+      {/* 자식 컴포넌트들 */}
+      {children}
+    </div>
+  );
+}
+
diff --git a/frontend/lib/registry/components/section-paper/SectionPaperConfigPanel.tsx b/frontend/lib/registry/components/section-paper/SectionPaperConfigPanel.tsx
new file mode 100644
index 00000000..76b1745f
--- /dev/null
+++ b/frontend/lib/registry/components/section-paper/SectionPaperConfigPanel.tsx
@@ -0,0 +1,151 @@
+"use client";
+
+import React from "react";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Input } from "@/components/ui/input";
+import { Checkbox } from "@/components/ui/checkbox";
+
+interface SectionPaperConfigPanelProps {
+  config: any;
+  onChange: (config: any) => void;
+}
+
+export function SectionPaperConfigPanel({
+  config,
+  onChange,
+}: SectionPaperConfigPanelProps) {
+  const handleChange = (key: string, value: any) => {
+    const newConfig = {
+      ...config,
+      [key]: value,
+    };
+    onChange(newConfig);
+    
+    // 🎯 실시간 업데이트를 위한 이벤트 발생
+    if (typeof window !== "undefined") {
+      window.dispatchEvent(new CustomEvent("componentConfigChanged", {
+        detail: { config: newConfig }
+      }));
+    }
+  };
+
+  return (
+    <div className="space-y-4 p-4">
+      <div className="space-y-2">
+        <h3 className="text-sm font-semibold">Section Paper 설정</h3>
+        <p className="text-xs text-muted-foreground">
+          배경색 기반의 미니멀한 그룹화 컨테이너
+        </p>
+      </div>
+
+      {/* 배경색 */}
+      <div className="space-y-2">
+        <Label className="text-xs">배경색</Label>
+        <Select
+          value={config.backgroundColor || "default"}
+          onValueChange={(value) => handleChange("backgroundColor", value)}
+        >
+          <SelectTrigger className="h-9 text-xs">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="default">기본 (연한 회색)</SelectItem>
+            <SelectItem value="muted">회색</SelectItem>
+            <SelectItem value="accent">강조 (연한 파랑)</SelectItem>
+            <SelectItem value="primary">브랜드 컬러</SelectItem>
+            <SelectItem value="custom">커스텀</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+
+      {/* 커스텀 색상 */}
+      {config.backgroundColor === "custom" && (
+        <div className="space-y-2">
+          <Label className="text-xs">커스텀 색상</Label>
+          <Input
+            type="color"
+            value={config.customColor || "#f0f0f0"}
+            onChange={(e) => handleChange("customColor", e.target.value)}
+            className="h-9"
+          />
+        </div>
+      )}
+
+      {/* 패딩 */}
+      <div className="space-y-2">
+        <Label className="text-xs">내부 여백</Label>
+        <Select
+          value={config.padding || "md"}
+          onValueChange={(value) => handleChange("padding", value)}
+        >
+          <SelectTrigger className="h-9 text-xs">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="none">없음</SelectItem>
+            <SelectItem value="sm">작게 (12px)</SelectItem>
+            <SelectItem value="md">중간 (16px)</SelectItem>
+            <SelectItem value="lg">크게 (24px)</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+
+      {/* 둥근 모서리 */}
+      <div className="space-y-2">
+        <Label className="text-xs">둥근 모서리</Label>
+        <Select
+          value={config.roundedCorners || "md"}
+          onValueChange={(value) => handleChange("roundedCorners", value)}
+        >
+          <SelectTrigger className="h-9 text-xs">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="none">없음</SelectItem>
+            <SelectItem value="sm">작게 (2px)</SelectItem>
+            <SelectItem value="md">중간 (6px)</SelectItem>
+            <SelectItem value="lg">크게 (8px)</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+
+      {/* 그림자 */}
+      <div className="space-y-2">
+        <Label className="text-xs">그림자</Label>
+        <Select
+          value={config.shadow || "none"}
+          onValueChange={(value) => handleChange("shadow", value)}
+        >
+          <SelectTrigger className="h-9 text-xs">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="none">없음</SelectItem>
+            <SelectItem value="sm">작게</SelectItem>
+            <SelectItem value="md">중간</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+
+      {/* 테두리 표시 */}
+      <div className="flex items-center space-x-2">
+        <Checkbox
+          id="showBorder"
+          checked={config.showBorder || false}
+          onCheckedChange={(checked) => handleChange("showBorder", checked)}
+        />
+        <Label htmlFor="showBorder" className="text-xs cursor-pointer">
+          미묘한 테두리 표시
+        </Label>
+      </div>
+    </div>
+  );
+}
+
diff --git a/frontend/lib/registry/components/section-paper/SectionPaperRenderer.tsx b/frontend/lib/registry/components/section-paper/SectionPaperRenderer.tsx
new file mode 100644
index 00000000..c4e653e1
--- /dev/null
+++ b/frontend/lib/registry/components/section-paper/SectionPaperRenderer.tsx
@@ -0,0 +1,27 @@
+"use client";
+
+import React from "react";
+import { AutoRegisteringComponentRenderer } from "../../AutoRegisteringComponentRenderer";
+import { SectionPaperDefinition } from "./index";
+import { SectionPaperComponent } from "./SectionPaperComponent";
+
+/**
+ * Section Paper 렌더러
+ * 자동 등록 시스템을 사용하여 컴포넌트를 레지스트리에 등록
+ */
+export class SectionPaperRenderer extends AutoRegisteringComponentRenderer {
+  static componentDefinition = SectionPaperDefinition;
+
+  render(): React.ReactElement {
+    return <SectionPaperComponent {...this.props} renderer={this} />;
+  }
+}
+
+// 자동 등록 실행
+SectionPaperRenderer.registerSelf();
+
+// Hot Reload 지원 (개발 모드)
+if (process.env.NODE_ENV === "development") {
+  SectionPaperRenderer.enableHotReload();
+}
+
diff --git a/frontend/lib/registry/components/section-paper/index.ts b/frontend/lib/registry/components/section-paper/index.ts
new file mode 100644
index 00000000..91e8c5c5
--- /dev/null
+++ b/frontend/lib/registry/components/section-paper/index.ts
@@ -0,0 +1,40 @@
+"use client";
+
+import { createComponentDefinition } from "../../utils/createComponentDefinition";
+import { ComponentCategory } from "@/types/component";
+import { SectionPaperComponent } from "./SectionPaperComponent";
+import { SectionPaperConfigPanel } from "./SectionPaperConfigPanel";
+
+/**
+ * Section Paper 컴포넌트 정의
+ * 배경색 기반의 미니멀한 그룹화 컨테이너 (색종이 컨셉)
+ */
+export const SectionPaperDefinition = createComponentDefinition({
+  id: "section-paper",
+  name: "Section Paper",
+  nameEng: "Section Paper",
+  description: "배경색 기반의 미니멀한 그룹화 컨테이너 (색종이 컨셉)",
+  category: ComponentCategory.LAYOUT,
+  webType: "custom",
+  component: SectionPaperComponent,
+  defaultConfig: {
+    backgroundColor: "default",
+    padding: "md",
+    roundedCorners: "md",
+    shadow: "none",
+    showBorder: false,
+  },
+  defaultSize: { width: 800, height: 200 },
+  configPanel: SectionPaperConfigPanel,
+  icon: "Square",
+  tags: ["섹션", "그룹", "배경", "컨테이너", "색종이", "paper"],
+  version: "1.0.0",
+  author: "WACE",
+});
+
+// 컴포넌트는 SectionPaperRenderer에서 자동 등록됩니다
+
+export { SectionPaperComponent } from "./SectionPaperComponent";
+export { SectionPaperConfigPanel } from "./SectionPaperConfigPanel";
+export { SectionPaperRenderer } from "./SectionPaperRenderer";
+
diff --git a/frontend/lib/registry/components/selected-items-detail-input/CalculationBuilder.tsx b/frontend/lib/registry/components/selected-items-detail-input/CalculationBuilder.tsx
new file mode 100644
index 00000000..92ac2e42
--- /dev/null
+++ b/frontend/lib/registry/components/selected-items-detail-input/CalculationBuilder.tsx
@@ -0,0 +1,429 @@
+"use client";
+
+import React, { useState } from "react";
+import { Label } from "@/components/ui/label";
+import { Button } from "@/components/ui/button";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Input } from "@/components/ui/input";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Plus, X, Calculator } from "lucide-react";
+import { CalculationNode, CalculationStep, AdditionalFieldDefinition } from "./types";
+
+interface CalculationBuilderProps {
+  steps: CalculationStep[];
+  availableFields: AdditionalFieldDefinition[];
+  onChange: (steps: CalculationStep[]) => void;
+}
+
+export const CalculationBuilder: React.FC<CalculationBuilderProps> = ({
+  steps,
+  availableFields,
+  onChange,
+}) => {
+  const [previewValues, setPreviewValues] = useState<Record<string, number>>({});
+
+  // 새 단계 추가
+  const addStep = () => {
+    const newStep: CalculationStep = {
+      id: `step_${Date.now()}`,
+      label: `단계 ${steps.length + 1}`,
+      expression: {
+        type: "field",
+        fieldName: "",
+      },
+    };
+    onChange([...steps, newStep]);
+  };
+
+  // 단계 삭제
+  const removeStep = (stepId: string) => {
+    onChange(steps.filter((s) => s.id !== stepId));
+  };
+
+  // 단계 업데이트
+  const updateStep = (stepId: string, updates: Partial<CalculationStep>) => {
+    onChange(
+      steps.map((s) => (s.id === stepId ? { ...s, ...updates } : s))
+    );
+  };
+
+  // 간단한 표현식 렌더링
+  const renderSimpleExpression = (step: CalculationStep) => {
+    return (
+      <div className="space-y-2">
+        <div className="flex items-center gap-2">
+          {/* 왼쪽 항 */}
+          <Select
+            value={step.expression.type === "field" ? step.expression.fieldName || "" : step.expression.type}
+            onValueChange={(value) => {
+              if (value === "previous") {
+                updateStep(step.id, {
+                  expression: { type: "previous" },
+                });
+              } else if (value === "constant") {
+                updateStep(step.id, {
+                  expression: { type: "constant", value: 0 },
+                });
+              } else {
+                updateStep(step.id, {
+                  expression: { type: "field", fieldName: value },
+                });
+              }
+            }}
+          >
+            <SelectTrigger className="h-8 flex-1 text-xs">
+              <SelectValue placeholder="항목 선택" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="previous">이전 결과</SelectItem>
+              <SelectItem value="constant">상수값</SelectItem>
+              {availableFields.map((field) => (
+                <SelectItem key={field.name} value={field.name}>
+                  {field.label || field.name}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+
+          {step.expression.type === "constant" && (
+            <Input
+              type="number"
+              value={step.expression.value || 0}
+              onChange={(e) => {
+                updateStep(step.id, {
+                  expression: {
+                    ...step.expression,
+                    value: parseFloat(e.target.value) || 0,
+                  },
+                });
+              }}
+              className="h-8 w-24 text-xs"
+              placeholder="값"
+            />
+          )}
+        </div>
+
+        {/* 연산 추가 버튼 */}
+        {step.expression.type !== "operation" && (
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => {
+              const currentExpression = step.expression;
+              updateStep(step.id, {
+                expression: {
+                  type: "operation",
+                  operator: "+",
+                  left: currentExpression,
+                  right: { type: "constant", value: 0 },
+                },
+              });
+            }}
+            className="h-7 text-xs"
+          >
+            <Plus className="h-3 w-3 mr-1" />
+            연산 추가
+          </Button>
+        )}
+
+        {/* 연산식 */}
+        {step.expression.type === "operation" && (
+          <div className="space-y-2 border-l-2 border-primary pl-3 ml-2">
+            {renderOperationExpression(step)}
+          </div>
+        )}
+      </div>
+    );
+  };
+
+  // 연산식 렌더링
+  const renderOperationExpression = (step: CalculationStep) => {
+    if (step.expression.type !== "operation") return null;
+
+    return (
+      <div className="flex items-center gap-2 flex-wrap">
+        {/* 왼쪽 항 */}
+        <div className="text-xs text-muted-foreground">
+          {renderNodeLabel(step.expression.left)}
+        </div>
+
+        {/* 연산자 */}
+        <Select
+          value={step.expression.operator || "+"}
+          onValueChange={(value) => {
+            updateStep(step.id, {
+              expression: {
+                ...step.expression,
+                operator: value as any,
+              },
+            });
+          }}
+        >
+          <SelectTrigger className="h-7 w-16 text-xs">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="+">+</SelectItem>
+            <SelectItem value="-">-</SelectItem>
+            <SelectItem value="*">×</SelectItem>
+            <SelectItem value="/">÷</SelectItem>
+            <SelectItem value="%">%</SelectItem>
+          </SelectContent>
+        </Select>
+
+        {/* 오른쪽 항 */}
+        <Select
+          value={
+            step.expression.right?.type === "field"
+              ? step.expression.right.fieldName || ""
+              : step.expression.right?.type || ""
+          }
+          onValueChange={(value) => {
+            if (value === "constant") {
+              updateStep(step.id, {
+                expression: {
+                  ...step.expression,
+                  right: { type: "constant", value: 0 },
+                },
+              });
+            } else {
+              updateStep(step.id, {
+                expression: {
+                  ...step.expression,
+                  right: { type: "field", fieldName: value },
+                },
+              });
+            }
+          }}
+        >
+          <SelectTrigger className="h-7 flex-1 text-xs">
+            <SelectValue placeholder="항목 선택" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="constant">상수값</SelectItem>
+            {availableFields.map((field) => (
+              <SelectItem key={field.name} value={field.name}>
+                {field.label || field.name}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+
+        {step.expression.right?.type === "constant" && (
+          <Input
+            type="number"
+            value={step.expression.right.value || 0}
+            onChange={(e) => {
+              updateStep(step.id, {
+                expression: {
+                  ...step.expression,
+                  right: {
+                    ...step.expression.right!,
+                    value: parseFloat(e.target.value) || 0,
+                  },
+                },
+              });
+            }}
+            className="h-7 w-24 text-xs"
+            placeholder="값"
+          />
+        )}
+      </div>
+    );
+  };
+
+  // 노드 라벨 표시
+  const renderNodeLabel = (node?: CalculationNode): string => {
+    if (!node) return "";
+    
+    switch (node.type) {
+      case "field":
+        const field = availableFields.find((f) => f.name === node.fieldName);
+        return field?.label || node.fieldName || "필드";
+      case "constant":
+        return String(node.value || 0);
+      case "previous":
+        return "이전 결과";
+      case "operation":
+        const left = renderNodeLabel(node.left);
+        const right = renderNodeLabel(node.right);
+        const op = node.operator === "*" ? "×" : node.operator === "/" ? "÷" : node.operator;
+        return `(${left} ${op} ${right})`;
+      default:
+        return "";
+    }
+  };
+
+  // 함수 적용 UI
+  const renderFunctionStep = (step: CalculationStep) => {
+    if (step.expression.type !== "function") return null;
+
+    return (
+      <div className="flex items-center gap-2">
+        <Select
+          value={step.expression.functionName || "round"}
+          onValueChange={(value) => {
+            updateStep(step.id, {
+              expression: {
+                type: "function",
+                functionName: value as any,
+                params: [{ type: "previous" }],
+              },
+            });
+          }}
+        >
+          <SelectTrigger className="h-8 w-32 text-xs">
+            <SelectValue placeholder="함수 선택" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="round">반올림</SelectItem>
+            <SelectItem value="floor">절삭</SelectItem>
+            <SelectItem value="ceil">올림</SelectItem>
+            <SelectItem value="abs">절댓값</SelectItem>
+          </SelectContent>
+        </Select>
+
+        {(step.expression.functionName === "round" ||
+          step.expression.functionName === "floor" ||
+          step.expression.functionName === "ceil") && (
+          <>
+            <span className="text-xs text-muted-foreground">단위:</span>
+            <Select
+              value={
+                step.expression.params?.[1]?.type === "field"
+                  ? step.expression.params[1].fieldName || ""
+                  : String(step.expression.params?.[1]?.value || "1")
+              }
+              onValueChange={(value) => {
+                const isField = availableFields.some((f) => f.name === value);
+                updateStep(step.id, {
+                  expression: {
+                    ...step.expression,
+                    params: [
+                      { type: "previous" },
+                      isField
+                        ? { type: "field", fieldName: value }
+                        : { type: "constant", value: parseFloat(value) },
+                    ],
+                  },
+                });
+              }}
+            >
+              <SelectTrigger className="h-8 w-32 text-xs">
+                <SelectValue placeholder="단위" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="1">1</SelectItem>
+                <SelectItem value="10">10</SelectItem>
+                <SelectItem value="100">100</SelectItem>
+                <SelectItem value="1000">1,000</SelectItem>
+                {availableFields.map((field) => (
+                  <SelectItem key={field.name} value={field.name}>
+                    {field.label || field.name}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </>
+        )}
+      </div>
+    );
+  };
+
+  return (
+    <div className="space-y-3">
+      <div className="flex items-center justify-between">
+        <Label className="text-xs font-semibold">계산식 빌더</Label>
+        <Button variant="outline" size="sm" onClick={addStep} className="h-7 text-xs">
+          <Plus className="h-3 w-3 mr-1" />
+          단계 추가
+        </Button>
+      </div>
+
+      {steps.length === 0 ? (
+        <Card className="border-dashed">
+          <CardContent className="py-6 text-center">
+            <Calculator className="h-8 w-8 mx-auto mb-2 text-muted-foreground" />
+            <p className="text-sm text-muted-foreground">
+              계산 단계를 추가하여 계산식을 만드세요
+            </p>
+          </CardContent>
+        </Card>
+      ) : (
+        <div className="space-y-2">
+          {steps.map((step, idx) => (
+            <Card key={step.id} className="border-primary/30">
+              <CardHeader className="pb-2 pt-3 px-3">
+                <div className="flex items-center justify-between">
+                  <CardTitle className="text-xs font-medium">
+                    {step.label || `단계 ${idx + 1}`}
+                  </CardTitle>
+                  <div className="flex items-center gap-1">
+                    <Input
+                      value={step.label}
+                      onChange={(e) => updateStep(step.id, { label: e.target.value })}
+                      placeholder={`단계 ${idx + 1}`}
+                      className="h-6 w-24 text-xs"
+                    />
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => removeStep(step.id)}
+                      className="h-6 w-6 p-0"
+                    >
+                      <X className="h-3 w-3" />
+                    </Button>
+                  </div>
+                </div>
+              </CardHeader>
+              <CardContent className="pb-3 px-3">
+                {step.expression.type === "function"
+                  ? renderFunctionStep(step)
+                  : renderSimpleExpression(step)}
+
+                {/* 함수 적용 버튼 */}
+                {step.expression.type !== "function" && (
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() => {
+                      updateStep(step.id, {
+                        expression: {
+                          type: "function",
+                          functionName: "round",
+                          params: [{ type: "previous" }, { type: "constant", value: 1 }],
+                        },
+                      });
+                    }}
+                    className="h-7 text-xs mt-2"
+                  >
+                    함수 적용
+                  </Button>
+                )}
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      )}
+
+      {/* 미리보기 */}
+      {steps.length > 0 && (
+        <Card className="bg-muted/30">
+          <CardContent className="py-3 px-3">
+            <div className="text-xs">
+              <span className="font-semibold">계산식:</span>
+              <div className="mt-1 font-mono text-muted-foreground">
+                {steps.map((step, idx) => (
+                  <div key={step.id}>
+                    {idx + 1}. {renderNodeLabel(step.expression)}
+                  </div>
+                ))}
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      )}
+    </div>
+  );
+};
+
diff --git a/frontend/lib/registry/components/selected-items-detail-input/README.md b/frontend/lib/registry/components/selected-items-detail-input/README.md
new file mode 100644
index 00000000..748e7207
--- /dev/null
+++ b/frontend/lib/registry/components/selected-items-detail-input/README.md
@@ -0,0 +1,248 @@
+# SelectedItemsDetailInput 컴포넌트
+
+선택된 항목들의 상세 정보를 입력하는 컴포넌트입니다.
+
+## 개요
+
+이 컴포넌트는 다음과 같은 흐름에서 사용됩니다:
+
+1. **첫 번째 모달**: TableList에서 여러 항목 선택 (체크박스)
+2. **버튼 클릭**: "다음" 버튼 클릭 → 선택된 데이터를 modalDataStore에 저장
+3. **두 번째 모달**: SelectedItemsDetailInput이 자동으로 데이터를 읽어와서 표시
+4. **추가 입력**: 각 항목별로 추가 정보 입력 (거래처 품번, 단가 등)
+5. **저장**: 모든 데이터를 백엔드로 일괄 전송
+
+## 주요 기능
+
+- ✅ 전달받은 원본 데이터 표시 (읽기 전용)
+- ✅ 각 항목별 추가 입력 필드 제공
+- ✅ Grid/Table 레이아웃 또는 Card 레이아웃 지원
+- ✅ 필드별 타입 지정 (text, number, date, select, checkbox, textarea)
+- ✅ 필수 입력 검증
+- ✅ 항목 삭제 기능 (선택적)
+
+## 사용 방법
+
+### 1단계: 첫 번째 모달 (품목 선택)
+
+```tsx
+// TableList 컴포넌트 설정
+{
+  type: "table-list",
+  config: {
+    selectedTable: "item_info",
+    multiSelect: true, // 다중 선택 활성화
+    columns: [
+      { columnName: "item_code", label: "품목코드" },
+      { columnName: "item_name", label: "품목명" },
+      { columnName: "spec", label: "규격" },
+      { columnName: "unit", label: "단위" },
+      { columnName: "price", label: "단가" }
+    ]
+  }
+}
+
+// "다음" 버튼 설정
+{
+  type: "button-primary",
+  config: {
+    text: "다음 (상세정보 입력)",
+    action: {
+      type: "openModalWithData", // 새 액션 타입
+      targetScreenId: "123", // 두 번째 모달 화면 ID
+      dataSourceId: "table-list-456" // TableList 컴포넌트 ID
+    }
+  }
+}
+```
+
+### 2단계: 두 번째 모달 (상세 입력)
+
+```tsx
+// SelectedItemsDetailInput 컴포넌트 설정
+{
+  type: "selected-items-detail-input",
+  config: {
+    dataSourceId: "table-list-456", // 첫 번째 모달의 TableList ID
+    targetTable: "sales_detail", // 최종 저장 테이블
+    layout: "grid", // 테이블 형식
+    
+    // 전달받은 원본 데이터 중 표시할 컬럼
+    displayColumns: ["item_code", "item_name", "spec", "unit"],
+    
+    // 추가 입력 필드 정의
+    additionalFields: [
+      {
+        name: "customer_item_code",
+        label: "거래처 품번",
+        type: "text",
+        required: false
+      },
+      {
+        name: "customer_item_name",
+        label: "거래처 품명",
+        type: "text",
+        required: false
+      },
+      {
+        name: "year",
+        label: "연도",
+        type: "select",
+        required: true,
+        options: [
+          { value: "2024", label: "2024년" },
+          { value: "2025", label: "2025년" }
+        ]
+      },
+      {
+        name: "currency",
+        label: "통화단위",
+        type: "select",
+        required: true,
+        options: [
+          { value: "KRW", label: "KRW (원)" },
+          { value: "USD", label: "USD (달러)" }
+        ]
+      },
+      {
+        name: "unit_price",
+        label: "단가",
+        type: "number",
+        required: true
+      },
+      {
+        name: "quantity",
+        label: "수량",
+        type: "number",
+        required: true
+      }
+    ],
+    
+    showIndex: true,
+    allowRemove: true // 항목 삭제 허용
+  }
+}
+```
+
+### 3단계: 저장 버튼
+
+```tsx
+{
+  type: "button-primary",
+    config: {
+    text: "저장",
+    action: {
+      type: "save",
+      targetTable: "sales_detail",
+      // formData에 selected_items 데이터가 자동으로 포함됨
+    }
+  }
+}
+```
+
+## 데이터 구조
+
+### 전달되는 데이터 형식
+
+```typescript
+const modalData: ModalDataItem[] = [
+  {
+    id: "SALE-003", // 항목 ID
+    originalData: { // 원본 데이터 (TableList에서 선택한 행)
+      item_code: "SALE-003",
+      item_name: "와셔 M8",
+      spec: "M8",
+      unit: "EA",
+      price: 50
+    },
+    additionalData: { // 사용자가 입력한 추가 데이터
+      customer_item_code: "ABC-001",
+      customer_item_name: "와셔",
+      year: "2025",
+      currency: "KRW",
+      unit_price: 50,
+      quantity: 100
+    }
+  },
+  // ... 더 많은 항목들
+];
+```
+
+## 설정 옵션
+
+| 속성 | 타입 | 기본값 | 설명 |
+|------|------|--------|------|
+| `dataSourceId` | string | - | 데이터를 전달하는 컴포넌트 ID (필수) |
+| `displayColumns` | string[] | [] | 표시할 원본 데이터 컬럼명 |
+| `additionalFields` | AdditionalFieldDefinition[] | [] | 추가 입력 필드 정의 |
+| `targetTable` | string | - | 최종 저장 대상 테이블 |
+| `layout` | "grid" \| "card" | "grid" | 레이아웃 모드 |
+| `showIndex` | boolean | true | 항목 번호 표시 여부 |
+| `allowRemove` | boolean | false | 항목 삭제 허용 여부 |
+| `emptyMessage` | string | "전달받은 데이터가 없습니다." | 빈 상태 메시지 |
+| `disabled` | boolean | false | 비활성화 여부 |
+| `readonly` | boolean | false | 읽기 전용 여부 |
+
+## 추가 필드 정의
+
+```typescript
+interface AdditionalFieldDefinition {
+  name: string;          // 필드명 (컬럼명)
+  label: string;         // 필드 라벨
+  type: "text" | "number" | "date" | "select" | "checkbox" | "textarea";
+  required?: boolean;    // 필수 입력 여부
+  placeholder?: string;  // 플레이스홀더
+  defaultValue?: any;    // 기본값
+  options?: Array<{ label: string; value: string }>; // 선택 옵션 (select 타입일 때)
+  validation?: {         // 검증 규칙
+    min?: number;
+    max?: number;
+    minLength?: number;
+    maxLength?: number;
+    pattern?: string;
+  };
+}
+```
+
+## 실전 예시: 수주 등록 화면
+
+### 시나리오
+1. 품목 선택 모달에서 여러 품목 선택
+2. "다음" 버튼 클릭
+3. 각 품목별로 거래처 정보, 단가, 수량 입력
+4. "저장" 버튼으로 일괄 저장
+
+### 구현
+```tsx
+// [모달 1] 품목 선택
+<TableList id="item-selection-table" multiSelect={true} />
+<Button action="openModalWithData" targetScreenId="detail-input-modal" dataSourceId="item-selection-table" />
+
+// [모달 2] 상세 입력
+<SelectedItemsDetailInput 
+  dataSourceId="item-selection-table"
+  displayColumns={["item_code", "item_name", "spec"]}
+  additionalFields={[
+    { name: "customer_item_code", label: "거래처 품번", type: "text" },
+    { name: "unit_price", label: "단가", type: "number", required: true },
+    { name: "quantity", label: "수량", type: "number", required: true }
+  ]}
+  targetTable="sales_detail"
+/>
+<Button action="save" />
+```
+
+## 주의사항
+
+1. **dataSourceId 일치**: 첫 번째 모달의 TableList ID와 두 번째 모달의 dataSourceId가 정확히 일치해야 합니다.
+2. **컬럼명 정확성**: displayColumns와 additionalFields의 name은 실제 데이터베이스 컬럼명과 일치해야 합니다.
+3. **필수 필드 검증**: required=true인 필드는 반드시 입력해야 저장이 가능합니다.
+4. **데이터 정리**: 모달이 닫힐 때 modalDataStore의 데이터가 자동으로 정리됩니다.
+
+## 향후 개선 사항
+
+- [ ] 일괄 수정 기능 (모든 항목에 같은 값 적용)
+- [ ] 엑셀 업로드로 일괄 입력
+- [ ] 조건부 필드 표시 (특정 조건에서만 필드 활성화)
+- [ ] 커스텀 검증 규칙
+- [ ] 실시간 계산 필드 (단가 × 수량 = 금액)
diff --git a/frontend/lib/registry/components/selected-items-detail-input/SelectedItemsDetailInputComponent.tsx b/frontend/lib/registry/components/selected-items-detail-input/SelectedItemsDetailInputComponent.tsx
new file mode 100644
index 00000000..925ca174
--- /dev/null
+++ b/frontend/lib/registry/components/selected-items-detail-input/SelectedItemsDetailInputComponent.tsx
@@ -0,0 +1,2271 @@
+"use client";
+
+import React, { useState, useEffect, useMemo, useCallback } from "react";
+import { useSearchParams } from "next/navigation";
+import { ComponentRendererProps } from "@/types/component";
+import { SelectedItemsDetailInputConfig, AdditionalFieldDefinition, ItemData, GroupEntry, DisplayItem } from "./types";
+import { useModalDataStore, ModalDataItem } from "@/stores/modalDataStore";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { X } from "lucide-react";
+import * as LucideIcons from "lucide-react";
+import { commonCodeApi } from "@/lib/api/commonCode";
+import { cn } from "@/lib/utils";
+
+export interface SelectedItemsDetailInputComponentProps extends ComponentRendererProps {
+  config?: SelectedItemsDetailInputConfig;
+}
+
+/**
+ * SelectedItemsDetailInput 컴포넌트
+ * 선택된 항목들의 상세 정보를 입력하는 컴포넌트
+ */
+export const SelectedItemsDetailInputComponent: React.FC<SelectedItemsDetailInputComponentProps> = ({
+  component,
+  isDesignMode = false,
+  isSelected = false,
+  isInteractive = false,
+  onClick,
+  onDragStart,
+  onDragEnd,
+  config,
+  className,
+  style,
+  formData,
+  onFormDataChange,
+  screenId,
+  ...props
+}) => {
+  // 🆕 URL 파라미터에서 dataSourceId 읽기
+  const searchParams = useSearchParams();
+  const urlDataSourceId = searchParams?.get("dataSourceId") || undefined;
+
+  // 컴포넌트 설정
+  const componentConfig = useMemo(
+    () =>
+      ({
+        dataSourceId: component.id || "default",
+        displayColumns: [],
+        additionalFields: [],
+        layout: "grid",
+        inputMode: "inline", // 🆕 기본값
+        showIndex: true,
+        allowRemove: false,
+        emptyMessage: "전달받은 데이터가 없습니다.",
+        targetTable: "",
+        ...config,
+        ...component.config,
+      }) as SelectedItemsDetailInputConfig,
+    [config, component.config, component.id],
+  );
+
+  // 🆕 dataSourceId 우선순위: URL 파라미터 > 컴포넌트 설정 > component.id
+  const dataSourceId = useMemo(
+    () => urlDataSourceId || componentConfig.dataSourceId || component.id || "default",
+    [urlDataSourceId, componentConfig.dataSourceId, component.id],
+  );
+
+  // 전체 레지스트리를 가져와서 컴포넌트 내부에서 필터링 (캐싱 문제 회피)
+  const dataRegistry = useModalDataStore((state) => state.dataRegistry);
+  const modalData = useMemo(() => dataRegistry[dataSourceId] || [], [dataRegistry, dataSourceId]);
+
+  // 전체 dataRegistry를 사용 (모든 누적 데이터에 접근 가능)
+  console.log("📦 [SelectedItemsDetailInput] 사용 가능한 모든 데이터:", {
+    keys: Object.keys(dataRegistry),
+    counts: Object.entries(dataRegistry).map(([key, data]: [string, any]) => ({
+      table: key,
+      count: data.length,
+    })),
+  });
+
+  const updateItemData = useModalDataStore((state) => state.updateItemData);
+
+  // 🆕 새로운 데이터 구조: 품목별로 여러 개의 상세 데이터
+  const [items, setItems] = useState<ItemData[]>([]);
+
+  // 🆕 입력 모드 상태 (modal 모드일 때 사용)
+  const [isEditing, setIsEditing] = useState(false);
+  const [editingItemId, setEditingItemId] = useState<string | null>(null); // 현재 편집 중인 품목 ID
+  const [editingGroupId, setEditingGroupId] = useState<string | null>(null); // 현재 편집 중인 그룹 ID
+  const [editingDetailId, setEditingDetailId] = useState<string | null>(null); // 현재 편집 중인 항목 ID
+
+  // 🆕 코드 카테고리별 옵션 캐싱
+  const [codeOptions, setCodeOptions] = useState<Record<string, Array<{ label: string; value: string }>>>({});
+
+  // 디버깅 로그
+  useEffect(() => {
+    console.log("📍 [SelectedItemsDetailInput] 설정 확인:", {
+      inputMode: componentConfig.inputMode,
+      urlDataSourceId,
+      configDataSourceId: componentConfig.dataSourceId,
+      componentId: component.id,
+      finalDataSourceId: dataSourceId,
+      isEditing,
+      editingItemId,
+    });
+  }, [
+    urlDataSourceId,
+    componentConfig.dataSourceId,
+    component.id,
+    dataSourceId,
+    componentConfig.inputMode,
+    isEditing,
+    editingItemId,
+  ]);
+
+  // 🆕 필드에 codeCategory가 있으면 자동으로 옵션 로드
+  useEffect(() => {
+    const loadCodeOptions = async () => {
+      console.log("🔄 [loadCodeOptions] 시작:", {
+        additionalFields: componentConfig.additionalFields,
+        targetTable: componentConfig.targetTable,
+      });
+
+      // 🆕 code/category 타입 필드 + codeCategory가 있는 필드 모두 처리
+      const codeFields = componentConfig.additionalFields?.filter(
+        (field) => field.inputType === "code" || field.inputType === "category",
+      );
+
+      console.log("🔍 [loadCodeOptions] code/category 필드:", codeFields);
+
+      if (!codeFields || codeFields.length === 0) {
+        console.log("⚠️ [loadCodeOptions] code/category 타입 필드가 없습니다");
+        return;
+      }
+
+      const newOptions: Record<string, Array<{ label: string; value: string }>> = { ...codeOptions };
+
+      // 🆕 대상 테이블의 컬럼 메타데이터에서 codeCategory 가져오기
+      const targetTable = componentConfig.targetTable;
+      let targetTableColumns: any[] = [];
+
+      if (targetTable) {
+        try {
+          const { tableTypeApi } = await import("@/lib/api/screen");
+          const columnsResponse = await tableTypeApi.getColumns(targetTable);
+          targetTableColumns = columnsResponse || [];
+        } catch (error) {
+          console.error("❌ 대상 테이블 컬럼 조회 실패:", error);
+        }
+      }
+
+      for (const field of codeFields) {
+        // 이미 로드된 옵션이면 스킵
+        if (newOptions[field.name]) {
+          console.log(`⏭️ 이미 로드된 옵션 (${field.name})`);
+          continue;
+        }
+
+        try {
+          // 🆕 category 타입이면 table_column_category_values에서 로드
+          if (field.inputType === "category" && targetTable) {
+            console.log(`🔄 카테고리 옵션 로드 시도 (${targetTable}.${field.name})`);
+
+            const { getCategoryValues } = await import("@/lib/api/tableCategoryValue");
+            const response = await getCategoryValues(targetTable, field.name, false);
+
+            console.log("📥 getCategoryValues 응답:", response);
+
+            if (response.success && response.data) {
+              newOptions[field.name] = response.data.map((item: any) => ({
+                label: item.value_label || item.valueLabel,
+                value: item.value_code || item.valueCode,
+              }));
+              console.log(`✅ 카테고리 옵션 로드 완료 (${field.name}):`, newOptions[field.name]);
+            } else {
+              console.error(`❌ 카테고리 옵션 로드 실패 (${field.name}):`, response.error || "응답 없음");
+            }
+          } else if (field.inputType === "code") {
+            // code 타입이면 기존대로 code_info에서 로드
+            // 이미 codeCategory가 있으면 사용
+            let codeCategory = field.codeCategory;
+
+            // 🆕 codeCategory가 없으면 대상 테이블 컬럼에서 찾기
+            if (!codeCategory && targetTableColumns.length > 0) {
+              const columnMeta = targetTableColumns.find(
+                (col: any) => (col.columnName || col.column_name) === field.name,
+              );
+              if (columnMeta) {
+                codeCategory = columnMeta.codeCategory || columnMeta.code_category;
+                console.log(`🔍 필드 "${field.name}"의 codeCategory를 메타데이터에서 찾음:`, codeCategory);
+              }
+            }
+
+            if (!codeCategory) {
+              console.warn(`⚠️ 필드 "${field.name}"의 codeCategory를 찾을 수 없습니다`);
+              continue;
+            }
+
+            const response = await commonCodeApi.options.getOptions(codeCategory);
+            if (response.success && response.data) {
+              newOptions[field.name] = response.data.map((opt) => ({
+                label: opt.label,
+                value: opt.value,
+              }));
+              console.log(`✅ 코드 옵션 로드 완료 (${codeCategory}):`, newOptions[field.name]);
+            }
+          }
+        } catch (error) {
+          console.error(`❌ 옵션 로드 실패 (${field.name}):`, error);
+        }
+      }
+
+      setCodeOptions(newOptions);
+    };
+
+    loadCodeOptions();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [componentConfig.additionalFields, componentConfig.targetTable]);
+
+  // 🆕 모달 데이터를 ItemData 구조로 변환 (그룹별 구조)
+  useEffect(() => {
+    // 🆕 수정 모드: formData에서 데이터 로드 (URL에 mode=edit이 있으면)
+    const urlParams = new URLSearchParams(window.location.search);
+    const mode = urlParams.get("mode");
+
+    if (mode === "edit" && formData) {
+      // 배열인지 단일 객체인지 확인
+      const isArray = Array.isArray(formData);
+      const dataArray = isArray ? formData : [formData];
+
+      if (dataArray.length === 0 || (dataArray.length === 1 && Object.keys(dataArray[0]).length === 0)) {
+        console.warn("⚠️ [SelectedItemsDetailInput] formData가 비어있음");
+        return;
+      }
+
+      console.log(
+        `📝 [SelectedItemsDetailInput] 수정 모드 - ${isArray ? "그룹 레코드" : "단일 레코드"} (${dataArray.length}개)`,
+      );
+      console.log("📝 [SelectedItemsDetailInput] formData (JSON):", JSON.stringify(dataArray, null, 2));
+
+      const groups = componentConfig.fieldGroups || [];
+      const additionalFields = componentConfig.additionalFields || [];
+
+      // 🆕 첫 번째 레코드의 originalData를 기본 항목으로 설정
+      const firstRecord = dataArray[0];
+      const mainFieldGroups: Record<string, GroupEntry[]> = {};
+
+      // 🔧 각 그룹별로 고유한 엔트리만 수집 (중복 제거)
+      groups.forEach((group) => {
+        const groupFields = additionalFields.filter((field: any) => field.groupId === group.id);
+
+        if (groupFields.length === 0) {
+          mainFieldGroups[group.id] = [];
+          return;
+        }
+
+        // 🆕 각 레코드에서 그룹 데이터 추출
+        const entriesMap = new Map<string, GroupEntry>();
+
+        dataArray.forEach((record) => {
+          const entryData: Record<string, any> = {};
+
+          groupFields.forEach((field: any) => {
+            let fieldValue = record[field.name];
+
+            // 🆕 값이 없으면 autoFillFrom 로직 적용
+            if ((fieldValue === undefined || fieldValue === null) && field.autoFillFrom) {
+              let sourceData: any = null;
+
+              if (field.autoFillFromTable) {
+                // 특정 테이블에서 가져오기
+                const tableData = dataRegistry[field.autoFillFromTable];
+                if (tableData && tableData.length > 0) {
+                  sourceData = tableData[0].originalData || tableData[0];
+                  console.log(
+                    `✅ [수정모드 autoFill] ${field.name} ← ${field.autoFillFrom} (테이블: ${field.autoFillFromTable}):`,
+                    sourceData?.[field.autoFillFrom],
+                  );
+                } else {
+                  // 🆕 dataRegistry에 없으면 record에서 직접 찾기 (Entity Join된 경우)
+                  sourceData = record;
+                  console.log(
+                    `⚠️ [수정모드 autoFill] dataRegistry에 ${field.autoFillFromTable} 없음, record에서 직접 찾기`,
+                  );
+                }
+              } else {
+                // record 자체에서 가져오기
+                sourceData = record;
+                console.log(
+                  `✅ [수정모드 autoFill] ${field.name} ← ${field.autoFillFrom} (레코드):`,
+                  sourceData?.[field.autoFillFrom],
+                );
+              }
+
+              if (sourceData && sourceData[field.autoFillFrom] !== undefined) {
+                fieldValue = sourceData[field.autoFillFrom];
+                console.log(`✅ [수정모드 autoFill] ${field.name} 값 설정:`, fieldValue);
+              } else {
+                // 🆕 Entity Join의 경우 sourceColumn_fieldName 형식으로도 찾기
+                // 예: item_id_standard_price, customer_id_customer_name
+                // autoFillFromTable에서 어떤 sourceColumn인지 추론
+                const possibleKeys = Object.keys(sourceData || {}).filter((key) =>
+                  key.endsWith(`_${field.autoFillFrom}`),
+                );
+
+                if (possibleKeys.length > 0) {
+                  fieldValue = sourceData[possibleKeys[0]];
+                  console.log(
+                    `✅ [수정모드 autoFill] ${field.name} Entity Join 키로 찾음 (${possibleKeys[0]}):`,
+                    fieldValue,
+                  );
+                } else {
+                  console.warn(
+                    `⚠️ [수정모드 autoFill] ${field.name} ← ${field.autoFillFrom} 실패 (시도한 키들: ${field.autoFillFrom}, *_${field.autoFillFrom})`,
+                  );
+                }
+              }
+            }
+
+            // 🔧 값이 없으면 기본값 사용 (false, 0, "" 등 falsy 값도 유효한 값으로 처리)
+            if (fieldValue === undefined || fieldValue === null) {
+              // 기본값이 있으면 사용, 없으면 필드 타입에 따라 기본값 설정
+              if (field.defaultValue !== undefined) {
+                fieldValue = field.defaultValue;
+              } else if (field.type === "checkbox") {
+                fieldValue = false; // checkbox는 기본값 false
+              } else {
+                // 다른 타입은 null로 유지 (필수 필드가 아니면 표시 안 됨)
+                return;
+              }
+            }
+
+            // 🔧 날짜 타입이면 YYYY-MM-DD 형식으로 변환 (타임존 제거)
+            if (field.type === "date" || field.type === "datetime") {
+              const dateStr = String(fieldValue);
+              const match = dateStr.match(/^(\d{4})-(\d{2})-(\d{2})/);
+              if (match) {
+                const [, year, month, day] = match;
+                fieldValue = `${year}-${month}-${day}`; // ISO 형식 유지 (시간 제거)
+              }
+            }
+
+            entryData[field.name] = fieldValue;
+          });
+
+          // 🔑 모든 필드 값을 합쳐서 고유 키 생성 (중복 제거 기준)
+          const entryKey = JSON.stringify(entryData);
+
+          if (!entriesMap.has(entryKey)) {
+            entriesMap.set(entryKey, {
+              id: `${group.id}_entry_${entriesMap.size + 1}`,
+              ...entryData,
+            });
+          }
+        });
+
+        mainFieldGroups[group.id] = Array.from(entriesMap.values());
+      });
+
+      // 그룹이 없으면 기본 그룹 생성
+      if (groups.length === 0) {
+        mainFieldGroups["default"] = [];
+      }
+
+      const newItem: ItemData = {
+        id: String(firstRecord.id || firstRecord.item_id || "edit"),
+        originalData: firstRecord, // 첫 번째 레코드를 대표 데이터로 사용
+        fieldGroups: mainFieldGroups,
+      };
+
+      setItems([newItem]);
+
+      console.log("✅ [SelectedItemsDetailInput] 수정 모드 데이터 로드 완료:", {
+        recordCount: dataArray.length,
+        item: newItem,
+        fieldGroupsKeys: Object.keys(mainFieldGroups),
+        firstGroupEntries: mainFieldGroups[groups[0]?.id]?.length || 0,
+      });
+      return;
+    }
+
+    // 생성 모드: modalData에서 데이터 로드
+    if (modalData && modalData.length > 0) {
+      console.log("📦 [SelectedItemsDetailInput] 데이터 수신:", modalData);
+
+      // 🆕 각 품목마다 빈 fieldGroups 객체를 가진 ItemData 생성
+      const groups = componentConfig.fieldGroups || [];
+      const newItems: ItemData[] = modalData.map((item) => {
+        const fieldGroups: Record<string, GroupEntry[]> = {};
+
+        // 각 그룹에 대해 빈 배열 초기화
+        groups.forEach((group) => {
+          fieldGroups[group.id] = [];
+        });
+
+        // 그룹이 없으면 기본 그룹 생성
+        if (groups.length === 0) {
+          fieldGroups["default"] = [];
+        }
+
+        // 🔧 modalData의 구조 확인: item.originalData가 있으면 그것을 사용, 없으면 item 자체를 사용
+        const actualData = (item as any).originalData || item;
+
+        return {
+          id: String(item.id),
+          originalData: actualData, // 🔧 실제 데이터 추출
+          fieldGroups,
+        };
+      });
+
+      setItems(newItems);
+
+      console.log("✅ [SelectedItemsDetailInput] items 설정 완료:", {
+        itemsLength: newItems.length,
+        groups: groups.map((g) => g.id),
+        firstItem: newItems[0],
+      });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [modalData, component.id, componentConfig.fieldGroups, formData]); // formData 의존성 추가
+
+  // 🆕 Cartesian Product 생성 함수 (items에서 모든 그룹의 조합을 생성)
+  const generateCartesianProduct = useCallback(
+    (itemsList: ItemData[]): Record<string, any>[] => {
+      const allRecords: Record<string, any>[] = [];
+      const groups = componentConfig.fieldGroups || [];
+      const additionalFields = componentConfig.additionalFields || [];
+
+      itemsList.forEach((item) => {
+        // 각 그룹의 엔트리 배열들을 준비
+        const groupEntriesArrays: GroupEntry[][] = groups.map((group) => item.fieldGroups[group.id] || []);
+
+        // Cartesian Product 재귀 함수
+        const cartesian = (arrays: GroupEntry[][], currentIndex: number, currentCombination: Record<string, any>) => {
+          if (currentIndex === arrays.length) {
+            // 모든 그룹을 순회했으면 조합 완성
+            allRecords.push({ ...currentCombination });
+            return;
+          }
+
+          const currentGroupEntries = arrays[currentIndex];
+          if (currentGroupEntries.length === 0) {
+            // 현재 그룹에 데이터가 없으면 빈 조합으로 다음 그룹 진행
+            cartesian(arrays, currentIndex + 1, currentCombination);
+            return;
+          }
+
+          // 현재 그룹의 각 엔트리마다 재귀
+          currentGroupEntries.forEach((entry) => {
+            const newCombination = { ...currentCombination };
+
+            // 현재 그룹의 필드들을 조합에 추가
+            const groupFields = additionalFields.filter((f) => f.groupId === groups[currentIndex].id);
+            groupFields.forEach((field) => {
+              if (entry[field.name] !== undefined) {
+                newCombination[field.name] = entry[field.name];
+              }
+            });
+
+            cartesian(arrays, currentIndex + 1, newCombination);
+          });
+        };
+
+        // 재귀 시작
+        cartesian(groupEntriesArrays, 0, {});
+      });
+
+      console.log("🔀 [generateCartesianProduct] 생성된 레코드:", {
+        count: allRecords.length,
+        records: allRecords,
+      });
+
+      return allRecords;
+    },
+    [componentConfig.fieldGroups, componentConfig.additionalFields],
+  );
+
+  // 🆕 저장 요청 시에만 데이터 전달 (이벤트 리스너 방식)
+  useEffect(() => {
+    const handleSaveRequest = async (event: Event) => {
+      // component.id를 문자열로 안전하게 변환
+      const componentKey = String(component.id || "selected_items");
+
+      console.log("🔔 [SelectedItemsDetailInput] beforeFormSave 이벤트 수신!", {
+        itemsCount: items.length,
+        hasOnFormDataChange: !!onFormDataChange,
+        componentId: component.id,
+        componentIdType: typeof component.id,
+        componentKey,
+      });
+
+      if (items.length === 0) {
+        console.warn("⚠️ [SelectedItemsDetailInput] 저장할 데이터 없음");
+        return;
+      }
+
+      // 🆕 수정 모드인지 확인 (URL에 mode=edit이 있으면)
+      const urlParams = new URLSearchParams(window.location.search);
+      const mode = urlParams.get("mode");
+      const isEditMode = mode === "edit";
+
+      console.log("📝 [SelectedItemsDetailInput] 저장 모드:", { mode, isEditMode });
+
+      if (isEditMode && componentConfig.parentDataMapping && componentConfig.parentDataMapping.length > 0) {
+        // 🔄 수정 모드: UPSERT API 사용
+        try {
+          console.log("🔄 [SelectedItemsDetailInput] UPSERT 모드로 저장 시작");
+          console.log("📋 [SelectedItemsDetailInput] componentConfig:", {
+            targetTable: componentConfig.targetTable,
+            parentDataMapping: componentConfig.parentDataMapping,
+            fieldGroups: componentConfig.fieldGroups,
+            additionalFields: componentConfig.additionalFields,
+          });
+
+          // 부모 키 추출 (parentDataMapping에서)
+          const parentKeys: Record<string, any> = {};
+
+          // formData 또는 items[0].originalData에서 부모 데이터 가져오기
+          // formData가 배열이면 첫 번째 항목 사용
+          let sourceData: any = formData;
+          if (Array.isArray(formData) && formData.length > 0) {
+            sourceData = formData[0];
+          } else if (!formData) {
+            sourceData = items[0]?.originalData || {};
+          }
+
+          console.log("📦 [SelectedItemsDetailInput] 부모 데이터 소스:", {
+            formDataType: Array.isArray(formData) ? "배열" : typeof formData,
+            sourceData,
+            sourceDataKeys: Object.keys(sourceData),
+            parentDataMapping: componentConfig.parentDataMapping,
+          });
+
+          console.log(
+            "🔍 [SelectedItemsDetailInput] sourceData 전체 내용 (JSON):",
+            JSON.stringify(sourceData, null, 2),
+          );
+
+          componentConfig.parentDataMapping.forEach((mapping) => {
+            // 🆕 Entity Join 필드도 처리 (예: customer_code -> customer_id_customer_code)
+            const value = getFieldValue(sourceData, mapping.sourceField);
+            if (value !== undefined && value !== null) {
+              parentKeys[mapping.targetField] = value;
+              console.log(`✅ [parentKeys] ${mapping.sourceField} → ${mapping.targetField}:`, value);
+            } else {
+              console.warn(
+                `⚠️ [SelectedItemsDetailInput] 부모 키 누락: ${mapping.sourceField} → ${mapping.targetField}`,
+              );
+            }
+          });
+
+          console.log("🔑 [SelectedItemsDetailInput] 부모 키:", parentKeys);
+
+          // items를 Cartesian Product로 변환
+          const records = generateCartesianProduct(items);
+
+          console.log("📦 [SelectedItemsDetailInput] UPSERT 레코드:", {
+            parentKeys,
+            recordCount: records.length,
+            records,
+          });
+
+          // targetTable 검증
+          if (!componentConfig.targetTable) {
+            console.error("❌ [SelectedItemsDetailInput] targetTable이 설정되지 않았습니다!");
+            window.dispatchEvent(
+              new CustomEvent("formSaveError", {
+                detail: { message: "대상 테이블이 설정되지 않았습니다." },
+              }),
+            );
+
+            // 🆕 기본 저장 건너뛰기
+            if (event instanceof CustomEvent && event.detail) {
+              event.detail.skipDefaultSave = true;
+            }
+            return;
+          }
+
+          // 🆕 먼저 기본 저장 로직 건너뛰기 설정 (UPSERT 전에!)
+          if (event instanceof CustomEvent) {
+            if (!event.detail) {
+              console.warn("⚠️ [SelectedItemsDetailInput] event.detail이 없습니다! 새로 생성합니다.");
+              // @ts-ignore - detail 재정의
+              event.detail = {};
+            }
+            event.detail.skipDefaultSave = true;
+            console.log("🚫 [SelectedItemsDetailInput] skipDefaultSave = true (UPSERT 전)", event.detail);
+          } else {
+            console.error("❌ [SelectedItemsDetailInput] event가 CustomEvent가 아닙니다!", event);
+          }
+
+          console.log("🎯 [SelectedItemsDetailInput] targetTable:", componentConfig.targetTable);
+          console.log("📡 [SelectedItemsDetailInput] UPSERT API 호출 직전:", {
+            tableName: componentConfig.targetTable,
+            tableNameType: typeof componentConfig.targetTable,
+            tableNameLength: componentConfig.targetTable?.length,
+            parentKeys,
+            recordsCount: records.length,
+          });
+
+          // UPSERT API 호출
+          const { dataApi } = await import("@/lib/api/data");
+          const result = await dataApi.upsertGroupedRecords(componentConfig.targetTable, parentKeys, records);
+
+          if (result.success) {
+            console.log("✅ [SelectedItemsDetailInput] UPSERT 성공:", {
+              inserted: result.inserted,
+              updated: result.updated,
+              deleted: result.deleted,
+            });
+
+            // 저장 성공 이벤트 발생
+            window.dispatchEvent(
+              new CustomEvent("formSaveSuccess", {
+                detail: { message: "데이터가 저장되었습니다." },
+              }),
+            );
+          } else {
+            console.error("❌ [SelectedItemsDetailInput] UPSERT 실패:", result.error);
+            window.dispatchEvent(
+              new CustomEvent("formSaveError", {
+                detail: { message: result.error || "데이터 저장 실패" },
+              }),
+            );
+          }
+        } catch (error) {
+          console.error("❌ [SelectedItemsDetailInput] UPSERT 오류:", error);
+          window.dispatchEvent(
+            new CustomEvent("formSaveError", {
+              detail: { message: "데이터 저장 중 오류가 발생했습니다." },
+            }),
+          );
+
+          // 🆕 오류 발생 시에도 기본 저장 건너뛰기 (중복 저장 방지)
+          if (event instanceof CustomEvent && event.detail) {
+            event.detail.skipDefaultSave = true;
+          }
+        }
+      } else {
+        // 📝 생성 모드: 기존 로직 (Cartesian Product 생성 후 formData에 추가)
+        console.log("📝 [SelectedItemsDetailInput] 생성 모드: 기존 저장 로직 사용");
+
+        console.log("📝 [SelectedItemsDetailInput] 저장 데이터 준비:", {
+          key: componentKey,
+          itemsCount: items.length,
+          firstItem: items[0],
+        });
+
+        // ✅ CustomEvent의 detail에 데이터 첨부
+        if (event instanceof CustomEvent && event.detail) {
+          // context.formData에 직접 추가
+          event.detail.formData[componentKey] = items;
+          console.log("✅ [SelectedItemsDetailInput] context.formData에 데이터 직접 추가 완료");
+        }
+
+        // 기존 onFormDataChange도 호출 (호환성)
+        if (onFormDataChange) {
+          onFormDataChange(componentKey, items);
+        }
+      }
+    };
+
+    // 저장 버튼 클릭 시 데이터 수집
+    window.addEventListener("beforeFormSave", handleSaveRequest as EventListener);
+
+    return () => {
+      window.removeEventListener("beforeFormSave", handleSaveRequest as EventListener);
+    };
+  }, [items, component.id, onFormDataChange, componentConfig, formData, generateCartesianProduct]);
+
+  // 스타일 계산
+  const componentStyle: React.CSSProperties = {
+    width: "100%",
+    height: "100%",
+    ...component.style,
+    ...style,
+  };
+
+  // 디자인 모드 스타일
+  if (isDesignMode) {
+    componentStyle.border = "1px dashed #cbd5e1";
+    componentStyle.borderColor = isSelected ? "#3b82f6" : "#cbd5e1";
+    componentStyle.padding = "16px";
+    componentStyle.borderRadius = "8px";
+  }
+
+  // 이벤트 핸들러
+  const handleClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    onClick?.();
+  };
+
+  // 🆕 실시간 단가 계산 함수 (설정 기반 + 카테고리 매핑)
+  const calculatePrice = useCallback(
+    (entry: GroupEntry): number => {
+      // 자동 계산 설정이 없으면 계산하지 않음
+      if (!componentConfig.autoCalculation) return 0;
+
+      const { inputFields, valueMapping } = componentConfig.autoCalculation;
+
+      // 기본 단가
+      const basePrice = parseFloat(entry[inputFields.basePrice] || "0");
+      if (basePrice === 0) return 0;
+
+      let price = basePrice;
+
+      // 1단계: 할인 적용
+      const discountTypeValue = entry[inputFields.discountType];
+      const discountValue = parseFloat(entry[inputFields.discountValue] || "0");
+
+      // 매핑을 통해 실제 연산 타입 결정
+      const discountOperation = valueMapping?.discountType?.[discountTypeValue] || "none";
+
+      if (discountOperation === "rate") {
+        price = price * (1 - discountValue / 100);
+      } else if (discountOperation === "amount") {
+        price = price - discountValue;
+      }
+
+      // 2단계: 반올림 적용
+      const roundingTypeValue = entry[inputFields.roundingType];
+      const roundingUnitValue = entry[inputFields.roundingUnit];
+
+      // 매핑을 통해 실제 연산 타입 결정
+      const roundingOperation = valueMapping?.roundingType?.[roundingTypeValue] || "none";
+      const unit = valueMapping?.roundingUnit?.[roundingUnitValue] || parseFloat(roundingUnitValue) || 1;
+
+      if (roundingOperation === "round") {
+        price = Math.round(price / unit) * unit;
+      } else if (roundingOperation === "floor") {
+        price = Math.floor(price / unit) * unit;
+      } else if (roundingOperation === "ceil") {
+        price = Math.ceil(price / unit) * unit;
+      }
+
+      return price;
+    },
+    [componentConfig.autoCalculation],
+  );
+
+  // 🆕 그룹별 필드 변경 핸들러: itemId + groupId + entryId + fieldName
+  const handleFieldChange = useCallback(
+    (itemId: string, groupId: string, entryId: string, fieldName: string, value: any) => {
+      console.log("📝 [handleFieldChange] 필드 값 변경:", {
+        itemId,
+        groupId,
+        entryId,
+        fieldName,
+        value,
+      });
+
+      setItems((prevItems) => {
+        return prevItems.map((item) => {
+          if (item.id !== itemId) return item;
+
+          const groupEntries = item.fieldGroups[groupId] || [];
+          const existingEntryIndex = groupEntries.findIndex((e) => e.id === entryId);
+
+          if (existingEntryIndex >= 0) {
+            // 기존 entry 업데이트 (항상 이 경로로만 진입)
+            const updatedEntries = [...groupEntries];
+            const updatedEntry = {
+              ...updatedEntries[existingEntryIndex],
+              [fieldName]: value,
+            };
+
+            console.log("✅ [handleFieldChange] Entry 업데이트:", {
+              beforeKeys: Object.keys(updatedEntries[existingEntryIndex]),
+              afterKeys: Object.keys(updatedEntry),
+              updatedEntry,
+            });
+
+            // 🆕 가격 관련 필드가 변경되면 자동 계산
+            if (componentConfig.autoCalculation) {
+              const { inputFields, targetField } = componentConfig.autoCalculation;
+              const priceRelatedFields = [
+                inputFields.basePrice,
+                inputFields.discountType,
+                inputFields.discountValue,
+                inputFields.roundingType,
+                inputFields.roundingUnit,
+              ];
+
+              if (priceRelatedFields.includes(fieldName)) {
+                const calculatedPrice = calculatePrice(updatedEntry);
+                updatedEntry[targetField] = calculatedPrice;
+                console.log("💰 [자동 계산]", {
+                  basePrice: updatedEntry[inputFields.basePrice],
+                  discountType: updatedEntry[inputFields.discountType],
+                  discountValue: updatedEntry[inputFields.discountValue],
+                  roundingType: updatedEntry[inputFields.roundingType],
+                  roundingUnit: updatedEntry[inputFields.roundingUnit],
+                  calculatedPrice,
+                  targetField,
+                });
+              }
+            }
+
+            updatedEntries[existingEntryIndex] = updatedEntry;
+            return {
+              ...item,
+              fieldGroups: {
+                ...item.fieldGroups,
+                [groupId]: updatedEntries,
+              },
+            };
+          } else {
+            // 이 경로는 발생하면 안 됨 (handleAddGroupEntry에서 미리 추가함)
+            console.warn("⚠️ entry가 없는데 handleFieldChange 호출됨:", { itemId, groupId, entryId });
+            return item;
+          }
+        });
+      });
+    },
+    [calculatePrice],
+  );
+
+  // 🆕 품목 제거 핸들러
+  const handleRemoveItem = (itemId: string) => {
+    setItems((prevItems) => prevItems.filter((item) => item.id !== itemId));
+  };
+
+  // 🆕 그룹 항목 추가 핸들러 (특정 그룹에 새 항목 추가)
+  const handleAddGroupEntry = (itemId: string, groupId: string) => {
+    const newEntryId = `entry-${Date.now()}`;
+
+    // 🔧 미리 빈 entry를 추가하여 리렌더링 방지 (autoFillFrom 처리)
+    setItems((prevItems) => {
+      return prevItems.map((item) => {
+        if (item.id !== itemId) return item;
+
+        const groupEntries = item.fieldGroups[groupId] || [];
+        const newEntry: GroupEntry = { id: newEntryId };
+
+        // 🆕 autoFillFrom 필드 자동 채우기 (tableName으로 직접 접근)
+        const groupFields = (componentConfig.additionalFields || []).filter((f) => f.groupId === groupId);
+
+        groupFields.forEach((field) => {
+          if (!field.autoFillFrom) return;
+
+          // 데이터 소스 결정
+          let sourceData: any = null;
+
+          if (field.autoFillFromTable) {
+            // 특정 테이블에서 가져오기
+            const tableData = dataRegistry[field.autoFillFromTable];
+            if (tableData && tableData.length > 0) {
+              // 첫 번째 항목 사용 (또는 매칭 로직 추가 가능)
+              sourceData = tableData[0].originalData || tableData[0];
+              console.log(
+                `✅ [autoFill 추가] ${field.name} ← ${field.autoFillFrom} (테이블: ${field.autoFillFromTable}):`,
+                sourceData?.[field.autoFillFrom],
+              );
+            } else {
+              // 🆕 dataRegistry에 없으면 item.originalData에서 찾기 (수정 모드)
+              sourceData = item.originalData;
+              console.log(`⚠️ [autoFill 추가] dataRegistry에 ${field.autoFillFromTable} 없음, originalData에서 찾기`);
+            }
+          } else {
+            // 주 데이터 소스 (item.originalData) 사용
+            sourceData = item.originalData;
+            console.log(
+              `✅ [autoFill 추가] ${field.name} ← ${field.autoFillFrom} (주 소스):`,
+              sourceData?.[field.autoFillFrom],
+            );
+          }
+
+          // 🆕 getFieldValue 사용하여 Entity Join 필드도 찾기
+          if (sourceData) {
+            const fieldValue = getFieldValue(sourceData, field.autoFillFrom);
+            if (fieldValue !== undefined && fieldValue !== null) {
+              newEntry[field.name] = fieldValue;
+              console.log(`✅ [autoFill 추가] ${field.name} 값 설정:`, fieldValue);
+            } else {
+              console.warn(`⚠️ [autoFill 추가] ${field.name} ← ${field.autoFillFrom} 실패`);
+            }
+          }
+        });
+
+        return {
+          ...item,
+          fieldGroups: {
+            ...item.fieldGroups,
+            [groupId]: [...groupEntries, newEntry],
+          },
+        };
+      });
+    });
+
+    setIsEditing(true);
+    setEditingItemId(itemId);
+    setEditingDetailId(newEntryId);
+    setEditingGroupId(groupId);
+  };
+
+  // 🆕 그룹 항목 제거 핸들러
+  const handleRemoveGroupEntry = (itemId: string, groupId: string, entryId: string) => {
+    setItems((prevItems) =>
+      prevItems.map((item) => {
+        if (item.id !== itemId) return item;
+        return {
+          ...item,
+          fieldGroups: {
+            ...item.fieldGroups,
+            [groupId]: (item.fieldGroups[groupId] || []).filter((e) => e.id !== entryId),
+          },
+        };
+      }),
+    );
+  };
+
+  // 🆕 그룹 항목 편집 핸들러 (클릭하면 수정 가능)
+  const handleEditGroupEntry = (itemId: string, groupId: string, entryId: string) => {
+    setIsEditing(true);
+    setEditingItemId(itemId);
+    setEditingGroupId(groupId);
+    setEditingDetailId(entryId);
+  };
+
+  // 🆕 다음 품목으로 이동
+  const handleNextItem = () => {
+    const currentIndex = items.findIndex((item) => item.id === editingItemId);
+    if (currentIndex < items.length - 1) {
+      // 다음 품목으로
+      const nextItem = items[currentIndex + 1];
+      setEditingItemId(nextItem.id);
+      const groups = componentConfig.fieldGroups || [];
+      const firstGroupId = groups.length > 0 ? groups[0].id : "default";
+      const newEntryId = `entry-${Date.now()}`;
+      setEditingDetailId(newEntryId);
+      setEditingGroupId(firstGroupId);
+      setIsEditing(true);
+    } else {
+      // 마지막 품목이면 편집 모드 종료
+      setIsEditing(false);
+      setEditingItemId(null);
+      setEditingDetailId(null);
+      setEditingGroupId(null);
+    }
+  };
+
+  // 🆕 개별 필드 렌더링 (itemId, groupId, entryId, entry 데이터 전달)
+  const renderField = (
+    field: AdditionalFieldDefinition,
+    itemId: string,
+    groupId: string,
+    entryId: string,
+    entry: GroupEntry,
+  ) => {
+    const value = entry[field.name] || field.defaultValue || "";
+
+    // 🆕 계산된 필드는 읽기 전용 (자동 계산 설정 기반)
+    const isCalculatedField = componentConfig.autoCalculation?.targetField === field.name;
+
+    const commonProps = {
+      value: value || "",
+      disabled: componentConfig.disabled || componentConfig.readonly,
+      placeholder: field.placeholder,
+      required: field.required,
+    };
+
+    // 🆕 inputType이 있으면 우선 사용, 없으면 field.type 사용
+    const renderType = field.inputType || field.type;
+
+    // 🆕 inputType에 따라 적절한 컴포넌트 렌더링
+    switch (renderType) {
+      // 기본 타입들
+      case "text":
+      case "varchar":
+      case "char":
+        return (
+          <Input
+            {...commonProps}
+            type="text"
+            onChange={(e) => handleFieldChange(itemId, groupId, entryId, field.name, e.target.value)}
+            maxLength={field.validation?.maxLength}
+            className="h-10 text-sm"
+          />
+        );
+
+      case "number":
+      case "int":
+      case "integer":
+      case "bigint":
+      case "decimal":
+      case "numeric":
+        // 🆕 계산된 단가는 천 단위 구분 및 강조 표시
+        if (isCalculatedField) {
+          const numericValue = parseFloat(value) || 0;
+          const formattedValue = new Intl.NumberFormat("ko-KR").format(numericValue);
+
+          return (
+            <div className="relative">
+              <Input
+                value={formattedValue}
+                readOnly
+                disabled
+                className={cn(
+                  "h-10 text-sm",
+                  "bg-primary/10 border-primary/30 text-primary font-semibold",
+                  "cursor-not-allowed",
+                )}
+              />
+              <div className="text-primary/70 absolute top-1/2 right-2 -translate-y-1/2 text-[10px]">자동 계산</div>
+            </div>
+          );
+        }
+
+        return (
+          <Input
+            {...commonProps}
+            type="number"
+            onChange={(e) => handleFieldChange(itemId, groupId, entryId, field.name, e.target.value)}
+            min={field.validation?.min}
+            max={field.validation?.max}
+            className="h-10 text-sm"
+          />
+        );
+
+      case "date":
+      case "timestamp":
+      case "datetime":
+        return (
+          <Input
+            {...commonProps}
+            type="date"
+            onChange={(e) => handleFieldChange(itemId, groupId, entryId, field.name, e.target.value)}
+            onClick={(e) => {
+              // 날짜 선택기 강제 열기
+              const target = e.target as HTMLInputElement;
+              if (target && target.showPicker) {
+                target.showPicker();
+              }
+            }}
+            className="h-10 cursor-pointer text-sm"
+          />
+        );
+
+      case "checkbox":
+      case "boolean":
+      case "bool":
+        return (
+          <Checkbox
+            checked={value === true || value === "true"}
+            onCheckedChange={(checked) => handleFieldChange(itemId, groupId, entryId, field.name, checked)}
+            disabled={componentConfig.disabled || componentConfig.readonly}
+          />
+        );
+
+      case "textarea":
+        return (
+          <Textarea
+            {...commonProps}
+            onChange={(e) => handleFieldChange(itemId, groupId, entryId, field.name, e.target.value)}
+            rows={2}
+            className="resize-none text-xs sm:text-sm"
+          />
+        );
+
+      // 🆕 추가 inputType들
+      case "code":
+      case "category":
+        // 🆕 옵션을 field.name 또는 field.codeCategory 키로 찾기
+        let categoryOptions = field.options; // 기본값
+
+        // 1순위: 필드 이름으로 직접 찾기 (category 타입에서 사용)
+        if (codeOptions[field.name]) {
+          categoryOptions = codeOptions[field.name];
+        }
+        // 2순위: codeCategory로 찾기 (code 타입에서 사용)
+        else if (field.codeCategory && codeOptions[field.codeCategory]) {
+          categoryOptions = codeOptions[field.codeCategory];
+        }
+
+        return (
+          <Select
+            value={value || ""}
+            onValueChange={(val) => handleFieldChange(itemId, groupId, entryId, field.name, val)}
+            disabled={componentConfig.disabled || componentConfig.readonly}
+          >
+            <SelectTrigger size="default" className="w-full">
+              <SelectValue placeholder={field.placeholder || "선택하세요"} />
+            </SelectTrigger>
+            <SelectContent>
+              {categoryOptions && categoryOptions.length > 0 ? (
+                categoryOptions
+                  .filter((option) => option.value !== "")
+                  .map((option) => (
+                    <SelectItem key={option.value} value={option.value}>
+                      {option.label}
+                    </SelectItem>
+                  ))
+              ) : (
+                <div className="text-muted-foreground py-6 text-center text-xs">옵션 로딩 중...</div>
+              )}
+            </SelectContent>
+          </Select>
+        );
+
+      case "entity":
+        // TODO: EntitySelect 컴포넌트 사용
+        return (
+          <Input
+            {...commonProps}
+            type="text"
+            onChange={(e) => handleFieldChange(itemId, groupId, entryId, field.name, e.target.value)}
+            className="h-8 text-xs sm:h-10 sm:text-sm"
+          />
+        );
+
+      case "select":
+        return (
+          <Select
+            value={value || ""}
+            onValueChange={(val) => handleFieldChange(itemId, groupId, entryId, field.name, val)}
+            disabled={componentConfig.disabled || componentConfig.readonly}
+          >
+            <SelectTrigger className="h-8 w-full text-xs sm:h-10 sm:text-sm">
+              <SelectValue placeholder={field.placeholder || "선택하세요"} />
+            </SelectTrigger>
+            <SelectContent>
+              {field.options
+                ?.filter((option) => option.value !== "")
+                .map((option) => (
+                  <SelectItem key={option.value} value={option.value}>
+                    {option.label}
+                  </SelectItem>
+                ))}
+            </SelectContent>
+          </Select>
+        );
+
+      // 기본값: 텍스트 입력
+      default:
+        return (
+          <Input
+            {...commonProps}
+            type="text"
+            onChange={(e) => handleFieldChange(itemId, groupId, entryId, field.name, e.target.value)}
+            maxLength={field.validation?.maxLength}
+            className="h-8 text-xs sm:h-10 sm:text-sm"
+          />
+        );
+    }
+  };
+
+  // 🆕 Entity Join된 필드명도 찾는 헬퍼 함수
+  const getFieldValue = useCallback((data: Record<string, any>, fieldName: string) => {
+    // 1. Entity Join 형식으로 먼저 찾기 (*_fieldName) - 우선순위!
+    //    예: item_id_item_name (품목의 품명) vs customer_item_name (거래처 품명)
+    const possibleKeys = Object.keys(data).filter(
+      (key) => key.endsWith(`_${fieldName}`) && key !== fieldName, // 자기 자신은 제외
+    );
+
+    if (possibleKeys.length > 0) {
+      // 🆕 여러 개 있으면 가장 긴 키 선택 (더 구체적인 것)
+      // 예: item_id_item_name (18자) vs customer_item_name (18자) 중 정렬 순서로 선택
+      // 실제로는 item_id로 시작하는 것을 우선
+      const entityJoinKey = possibleKeys.find((key) => key.includes("_id_")) || possibleKeys[0];
+      console.log(`🔍 [getFieldValue] "${fieldName}" → "${entityJoinKey}" =`, data[entityJoinKey]);
+      return data[entityJoinKey];
+    }
+
+    // 2. 직접 필드명으로 찾기 (Entity Join이 없을 때만)
+    if (data[fieldName] !== undefined) {
+      console.log(`🔍 [getFieldValue] "${fieldName}" → 직접 =`, data[fieldName]);
+      return data[fieldName];
+    }
+
+    console.warn(`⚠️ [getFieldValue] "${fieldName}" 못 찾음`);
+    return null;
+  }, []);
+
+  // 🆕 displayItems를 렌더링하는 헬퍼 함수 (그룹별)
+  const renderDisplayItems = useCallback(
+    (entry: GroupEntry, item: ItemData, groupId: string) => {
+      // 🆕 해당 그룹의 displayItems 가져오기
+      const group = (componentConfig.fieldGroups || []).find((g) => g.id === groupId);
+      const displayItems = group?.displayItems || [];
+
+      if (displayItems.length === 0) {
+        // displayItems가 없으면 기본 방식 (해당 그룹의 필드만 나열)
+        const fields = (componentConfig.additionalFields || []).filter((f) =>
+          componentConfig.fieldGroups && componentConfig.fieldGroups.length > 0 ? f.groupId === groupId : true,
+        );
+        return fields
+          .map((f) => {
+            const value = entry[f.name];
+            if (!value) return "-";
+
+            const strValue = String(value);
+
+            // 🔧 ISO 날짜 형식 자동 감지 및 포맷팅 (필드 타입 무관)
+            // ISO 8601 형식: YYYY-MM-DDTHH:mm:ss.sssZ 또는 YYYY-MM-DD
+            const isoDateMatch = strValue.match(/^(\d{4})-(\d{2})-(\d{2})(T|\s|$)/);
+            if (isoDateMatch) {
+              const [, year, month, day] = isoDateMatch;
+              return `${year}.${month}.${day}`;
+            }
+
+            return strValue;
+          })
+          .join(" / ");
+      }
+
+      // displayItems 설정대로 렌더링
+      return (
+        <>
+          {displayItems.map((displayItem) => {
+            const styleClasses = cn(
+              displayItem.bold && "font-bold",
+              displayItem.underline && "underline",
+              displayItem.italic && "italic",
+            );
+
+            const inlineStyle: React.CSSProperties = {
+              color: displayItem.color,
+              backgroundColor: displayItem.backgroundColor,
+            };
+
+            switch (displayItem.type) {
+              case "icon": {
+                if (!displayItem.icon) return null;
+                const IconComponent = (LucideIcons as any)[displayItem.icon];
+                if (!IconComponent) return null;
+                return <IconComponent key={displayItem.id} className="mr-1 inline-block h-3 w-3" style={inlineStyle} />;
+              }
+
+              case "text":
+                return (
+                  <span key={displayItem.id} className={styleClasses} style={inlineStyle}>
+                    {displayItem.value}
+                  </span>
+                );
+
+              case "field": {
+                const fieldValue = entry[displayItem.fieldName || ""];
+                const isEmpty = fieldValue === null || fieldValue === undefined || fieldValue === "";
+
+                // 🆕 빈 값 처리
+                if (isEmpty) {
+                  switch (displayItem.emptyBehavior) {
+                    case "hide":
+                      return null; // 항목 숨김
+                    case "default":
+                      // 기본값 표시
+                      const defaultValue = displayItem.defaultValue || "-";
+                      return (
+                        <span
+                          key={displayItem.id}
+                          className={cn(styleClasses, "text-muted-foreground")}
+                          style={inlineStyle}
+                        >
+                          {displayItem.label}
+                          {defaultValue}
+                        </span>
+                      );
+                    case "blank":
+                    default:
+                      // 빈 칸으로 표시
+                      return (
+                        <span key={displayItem.id} className={styleClasses} style={inlineStyle}>
+                          {displayItem.label}
+                        </span>
+                      );
+                  }
+                }
+
+                // 값이 있는 경우, 형식에 맞게 표시
+                let formattedValue = fieldValue;
+
+                // 🔧 자동 날짜 감지 (format 설정 없어도 ISO 날짜 자동 변환)
+                const strValue = String(fieldValue);
+                const isoDateMatch = strValue.match(/^(\d{4})-(\d{2})-(\d{2})(T|\s|$)/);
+                if (isoDateMatch && !displayItem.format) {
+                  const [, year, month, day] = isoDateMatch;
+                  formattedValue = `${year}.${month}.${day}`;
+                }
+
+                switch (displayItem.format) {
+                  case "currency":
+                    // 천 단위 구분
+                    formattedValue = new Intl.NumberFormat("ko-KR").format(Number(fieldValue) || 0);
+                    break;
+                  case "number":
+                    formattedValue = new Intl.NumberFormat("ko-KR").format(Number(fieldValue) || 0);
+                    break;
+                  case "date":
+                    // YYYY.MM.DD 형식
+                    if (fieldValue) {
+                      // 날짜 문자열을 직접 파싱 (타임존 문제 방지)
+                      const dateStr = String(fieldValue);
+                      const match = dateStr.match(/^(\d{4})-(\d{2})-(\d{2})/);
+                      if (match) {
+                        const [, year, month, day] = match;
+                        formattedValue = `${year}.${month}.${day}`;
+                      } else {
+                        // Date 객체로 변환 시도 (fallback)
+                        const date = new Date(fieldValue);
+                        if (!isNaN(date.getTime())) {
+                          formattedValue = date
+                            .toLocaleDateString("ko-KR", {
+                              year: "numeric",
+                              month: "2-digit",
+                              day: "2-digit",
+                            })
+                            .replace(/\. /g, ".")
+                            .replace(/\.$/, "");
+                        }
+                      }
+                    }
+                    break;
+                  case "badge":
+                    // 배지로 표시
+                    return (
+                      <Badge
+                        key={displayItem.id}
+                        variant={displayItem.badgeVariant || "default"}
+                        className={styleClasses}
+                        style={inlineStyle}
+                      >
+                        {displayItem.label}
+                        {formattedValue}
+                      </Badge>
+                    );
+                  case "text":
+                  default:
+                    // 일반 텍스트
+                    break;
+                }
+
+                // 🔧 마지막 안전장치: formattedValue가 여전히 ISO 형식이면 한번 더 변환
+                let finalValue = formattedValue;
+                if (typeof formattedValue === "string") {
+                  const isoCheck = formattedValue.match(/^(\d{4})-(\d{2})-(\d{2})(T|\s|$)/);
+                  if (isoCheck) {
+                    const [, year, month, day] = isoCheck;
+                    finalValue = `${year}.${month}.${day}`;
+                  }
+                }
+
+                return (
+                  <span key={displayItem.id} className={styleClasses} style={inlineStyle}>
+                    {displayItem.label}
+                    {finalValue}
+                  </span>
+                );
+              }
+
+              case "badge": {
+                const fieldValue = displayItem.fieldName ? entry[displayItem.fieldName] : displayItem.value;
+                return (
+                  <Badge
+                    key={displayItem.id}
+                    variant={displayItem.badgeVariant || "default"}
+                    className={styleClasses}
+                    style={inlineStyle}
+                  >
+                    {displayItem.label}
+                    {fieldValue}
+                  </Badge>
+                );
+              }
+
+              default:
+                return null;
+            }
+          })}
+        </>
+      );
+    },
+    [componentConfig.fieldGroups, componentConfig.additionalFields],
+  );
+
+  // 빈 상태 렌더링
+  if (items.length === 0) {
+    return (
+      <div style={componentStyle} className={className} onClick={handleClick}>
+        <div className="border-border bg-muted/30 flex flex-col items-center justify-center rounded-lg border-2 border-dashed p-8 text-center">
+          <p className="text-muted-foreground text-sm">{componentConfig.emptyMessage}</p>
+          {isDesignMode && (
+            <p className="text-muted-foreground mt-2 text-xs">
+              💡 이전 모달에서 "다음" 버튼으로 데이터를 전달하면 여기에 표시됩니다.
+            </p>
+          )}
+        </div>
+      </div>
+    );
+  }
+
+  // 🆕 그룹별로 입력 항목들 렌더링 (각 그룹이 독립적으로 여러 항목 관리)
+  const renderFieldsByGroup = (item: ItemData) => {
+    const fields = componentConfig.additionalFields || [];
+    const groups = componentConfig.fieldGroups || [];
+
+    // 그룹이 정의되지 않은 경우, 기본 그룹 사용
+    const effectiveGroups = groups.length > 0 ? groups : [{ id: "default", title: "입력 정보", order: 0 }];
+
+    const sortedGroups = [...effectiveGroups].sort((a, b) => (a.order || 0) - (b.order || 0));
+
+    return (
+      <div className="grid grid-cols-2 gap-3">
+        {sortedGroups.map((group) => {
+          const groupFields = fields.filter((f) => (groups.length === 0 ? true : f.groupId === group.id));
+
+          if (groupFields.length === 0) return null;
+
+          const groupEntries = item.fieldGroups[group.id] || [];
+          const isEditingThisGroup = isEditing && editingItemId === item.id && editingGroupId === group.id;
+
+          return (
+            <Card key={group.id} className="border-2 shadow-sm">
+              <CardHeader className="pb-3">
+                <CardTitle className="flex items-center justify-between text-sm font-semibold">
+                  <span>{group.title}</span>
+                  <Button
+                    type="button"
+                    onClick={() => handleAddGroupEntry(item.id, group.id)}
+                    size="sm"
+                    variant="outline"
+                    className="h-7 text-xs"
+                  >
+                    + 추가
+                  </Button>
+                </CardTitle>
+                {group.description && <p className="text-muted-foreground text-xs">{group.description}</p>}
+              </CardHeader>
+              <CardContent className="space-y-3">
+                {/* 이미 입력된 항목들 */}
+                {groupEntries.length > 0 ? (
+                  <div className="space-y-2">
+                    {groupEntries.map((entry, idx) => {
+                      const isEditingThisEntry = isEditingThisGroup && editingDetailId === entry.id;
+
+                      if (isEditingThisEntry) {
+                        // 편집 모드: 입력 필드 표시 (가로 배치)
+                        return (
+                          <Card key={entry.id} className="border-primary border-dashed">
+                            <CardContent className="p-3">
+                              <div className="mb-3 flex items-center justify-between">
+                                <span className="text-xs font-medium">수정 중</span>
+                                <Button
+                                  type="button"
+                                  variant="ghost"
+                                  size="sm"
+                                  onClick={() => {
+                                    setIsEditing(false);
+                                    setEditingItemId(null);
+                                    setEditingGroupId(null);
+                                    setEditingDetailId(null);
+                                  }}
+                                  className="h-6 text-xs"
+                                >
+                                  완료
+                                </Button>
+                              </div>
+                              {/* 🆕 가로 Grid 배치 (2~3열) */}
+                              <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">
+                                {groupFields.map((field) => (
+                                  <div key={field.name} className="space-y-1">
+                                    <label className="text-xs font-medium">
+                                      {field.label}
+                                      {field.required && <span className="text-destructive ml-1">*</span>}
+                                    </label>
+                                    {renderField(field, item.id, group.id, entry.id, entry)}
+                                  </div>
+                                ))}
+                              </div>
+                            </CardContent>
+                          </Card>
+                        );
+                      } else {
+                        // 읽기 모드: 텍스트 표시 (클릭하면 수정)
+                        return (
+                          <div
+                            key={entry.id}
+                            className="bg-muted/30 hover:bg-muted/50 flex cursor-pointer items-center justify-between rounded border p-2 text-xs"
+                            onClick={() => handleEditGroupEntry(item.id, group.id, entry.id)}
+                          >
+                            <span className="flex items-center gap-1">
+                              {idx + 1}. {renderDisplayItems(entry, item, group.id)}
+                            </span>
+                            <Button
+                              type="button"
+                              variant="ghost"
+                              size="sm"
+                              onClick={(e) => {
+                                e.stopPropagation();
+                                handleRemoveGroupEntry(item.id, group.id, entry.id);
+                              }}
+                              className="h-6 w-6 p-0"
+                            >
+                              <X className="h-3 w-3" />
+                            </Button>
+                          </div>
+                        );
+                      }
+                    })}
+                  </div>
+                ) : (
+                  <p className="text-muted-foreground text-xs italic">아직 입력된 항목이 없습니다.</p>
+                )}
+
+                {/* 새 항목 입력 중 */}
+                {isEditingThisGroup && editingDetailId && !groupEntries.find((e) => e.id === editingDetailId) && (
+                  <Card className="border-primary border-dashed">
+                    <CardContent className="space-y-2 p-3">
+                      <div className="mb-2 flex items-center justify-between">
+                        <span className="text-xs font-medium">새 항목</span>
+                        <Button
+                          type="button"
+                          variant="ghost"
+                          size="sm"
+                          onClick={() => {
+                            setIsEditing(false);
+                            setEditingItemId(null);
+                            setEditingGroupId(null);
+                            setEditingDetailId(null);
+                          }}
+                          className="h-6 text-xs"
+                        >
+                          취소
+                        </Button>
+                      </div>
+                      {groupFields.map((field) => (
+                        <div key={field.name} className="space-y-1">
+                          <label className="text-xs font-medium">
+                            {field.label}
+                            {field.required && <span className="text-destructive ml-1">*</span>}
+                          </label>
+                          {renderField(field, item.id, group.id, editingDetailId, {})}
+                        </div>
+                      ))}
+                    </CardContent>
+                  </Card>
+                )}
+              </CardContent>
+            </Card>
+          );
+        })}
+      </div>
+    );
+  };
+
+  // 🆕 Grid 레이아웃 렌더링 (완전히 재작성 - 그룹별 독립 관리)
+  const renderGridLayout = () => {
+    console.log("🎨 [renderGridLayout] 렌더링:", {
+      itemsLength: items.length,
+      displayColumns: componentConfig.displayColumns,
+      firstItemOriginalData: items[0]?.originalData,
+    });
+
+    return (
+      <div className="bg-card space-y-4 p-4">
+        {items.map((item, index) => {
+          // 제목용 첫 번째 컬럼 값
+          const titleValue = componentConfig.displayColumns?.[0]?.name
+            ? getFieldValue(item.originalData, componentConfig.displayColumns[0].name)
+            : null;
+
+          // 요약용 모든 컬럼 값들
+          const summaryValues = componentConfig.displayColumns
+            ?.map((col) => getFieldValue(item.originalData, col.name))
+            .filter(Boolean);
+
+          console.log("🔍 [renderGridLayout] 항목 렌더링:", {
+            index,
+            titleValue,
+            summaryValues,
+            displayColumns: componentConfig.displayColumns,
+            originalData: item.originalData,
+            "displayColumns[0]": componentConfig.displayColumns?.[0],
+            "originalData keys": Object.keys(item.originalData),
+          });
+
+          return (
+            <Card key={item.id} className="border shadow-sm">
+              <CardHeader className="pb-3">
+                <CardTitle className="flex items-center justify-between text-base font-semibold">
+                  <span>
+                    {index + 1}. {titleValue || "항목"}
+                  </span>
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => handleRemoveItem(item.id)}
+                    className="h-7 w-7 p-0 text-red-500"
+                  >
+                    <X className="h-4 w-4" />
+                  </Button>
+                </CardTitle>
+                {/* 원본 데이터 요약 */}
+                {summaryValues && summaryValues.length > 0 && (
+                  <div className="text-muted-foreground text-xs">{summaryValues.join(" | ")}</div>
+                )}
+              </CardHeader>
+              <CardContent>
+                {/* 그룹별 입력 항목들 렌더링 */}
+                {renderFieldsByGroup(item)}
+              </CardContent>
+            </Card>
+          );
+        })}
+      </div>
+    );
+  };
+
+  // 🔧 기존 renderGridLayout (백업 - 사용 안 함)
+  const renderGridLayout_OLD = () => {
+    return (
+      <div className="bg-card space-y-4 p-4">
+        {/* Modal 모드: 추가 버튼 */}
+        {isModalMode && !isEditing && items.length === 0 && (
+          <div className="py-8 text-center">
+            <p className="text-muted-foreground mb-4 text-sm">항목을 추가하려면 추가 버튼을 클릭하세요</p>
+            <Button type="button" onClick={() => setIsEditing(true)} size="sm" className="text-xs sm:text-sm">
+              + 추가
+            </Button>
+          </div>
+        )}
+
+        {/* Modal 모드: 편집 중인 항목 (입력창 표시) */}
+        {isModalMode &&
+          isEditing &&
+          editingItemId &&
+          (() => {
+            const editingItem = items.find((item) => item.id === editingItemId);
+            console.log("🔍 [Modal Mode] 편집 항목 찾기:", {
+              editingItemId,
+              itemsLength: items.length,
+              itemIds: items.map((i) => i.id),
+              editingItem: editingItem ? "찾음" : "못 찾음",
+              editingDetailId,
+            });
+            if (!editingItem) {
+              console.warn("⚠️ [Modal Mode] 편집할 항목을 찾을 수 없습니다!");
+              return null;
+            }
+
+            return (
+              <Card className="border-primary border-2 shadow-sm">
+                <CardHeader className="pb-3">
+                  <CardTitle className="flex items-center justify-between text-sm font-semibold">
+                    <span>
+                      품목:{" "}
+                      {getFieldValue(editingItem.originalData, componentConfig.displayColumns?.[0]?.name || "") ||
+                        "항목"}
+                    </span>
+                    <Button
+                      type="button"
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => {
+                        setIsEditing(false);
+                        setEditingItemId(null);
+                        setEditingDetailId(null);
+                      }}
+                      className="h-7 text-xs"
+                    >
+                      취소
+                    </Button>
+                  </CardTitle>
+                </CardHeader>
+                <CardContent className="space-y-3">
+                  {/* 원본 데이터 요약 */}
+                  <div className="text-muted-foreground bg-muted rounded p-2 text-xs">
+                    {componentConfig.displayColumns
+                      ?.map((col) => editingItem.originalData[col.name])
+                      .filter(Boolean)
+                      .join(" | ")}
+                  </div>
+
+                  {/* 🆕 이미 입력된 상세 항목들 표시 */}
+                  {editingItem.details.length > 0 && (
+                    <div className="space-y-2">
+                      <div className="text-xs font-medium">입력된 항목 ({editingItem.details.length}개)</div>
+                      {editingItem.details.map((detail, idx) => (
+                        <div
+                          key={detail.id}
+                          className="bg-muted/30 flex items-center justify-between rounded border p-2 text-xs"
+                        >
+                          <span>
+                            {idx + 1}. {detail[componentConfig.additionalFields?.[0]?.name] || "입력됨"}
+                          </span>
+                          <Button
+                            type="button"
+                            variant="ghost"
+                            size="sm"
+                            onClick={() => handleRemoveDetail(editingItem.id, detail.id)}
+                            className="h-6 w-6 p-0"
+                          >
+                            X
+                          </Button>
+                        </div>
+                      ))}
+                    </div>
+                  )}
+
+                  {/* 추가 입력 필드 */}
+                  {componentConfig.additionalFields &&
+                    componentConfig.additionalFields.length > 0 &&
+                    editingDetailId &&
+                    (() => {
+                      // 현재 편집 중인 detail 찾기 (없으면 빈 객체)
+                      const currentDetail = editingItem.details.find((d) => d.id === editingDetailId) || {
+                        id: editingDetailId,
+                      };
+                      return renderFieldsByGroup(editingItem.id, editingDetailId, currentDetail);
+                    })()}
+
+                  {/* 액션 버튼들 */}
+                  <div className="flex justify-end gap-2 pt-2">
+                    <Button
+                      type="button"
+                      onClick={() => handleAddDetail(editingItem.id)}
+                      size="sm"
+                      variant="outline"
+                      className="text-xs"
+                    >
+                      + 이 품목에 추가 입력
+                    </Button>
+                    <Button type="button" variant="default" onClick={handleNextItem} size="sm" className="text-xs">
+                      다음 품목
+                    </Button>
+                  </div>
+                </CardContent>
+              </Card>
+            );
+          })()}
+
+        {/* 저장된 항목들 (inline 모드 또는 modal 모드에서 편집 완료된 항목) */}
+        {items.map((item, index) => {
+          // Modal 모드에서 현재 편집 중인 항목은 위에서 렌더링하므로 스킵
+          if (isModalMode && isEditing && item.id === editingItemId) {
+            return null;
+          }
+
+          // Modal 모드: 작은 요약 카드
+          if (isModalMode) {
+            return (
+              <Card key={item.id} className="bg-muted/50 border shadow-sm">
+                <CardContent className="p-3">
+                  <div className="mb-2 flex items-center justify-between">
+                    <div className="flex-1">
+                      <div className="mb-1 text-sm font-semibold">
+                        {index + 1}.{" "}
+                        {getFieldValue(item.originalData, componentConfig.displayColumns?.[0]?.name || "") || "항목"}
+                      </div>
+                      <div className="text-muted-foreground text-xs">
+                        {componentConfig.displayColumns
+                          ?.map((col) => getFieldValue(item.originalData, col.name))
+                          .filter(Boolean)
+                          .join(" | ")}
+                      </div>
+                    </div>
+                    <div className="flex items-center gap-2">
+                      <Button
+                        type="button"
+                        variant="ghost"
+                        size="sm"
+                        onClick={() => {
+                          setIsEditing(true);
+                          setEditingItemId(item.id);
+                          const newDetailId = `detail-${Date.now()}`;
+                          setEditingDetailId(newDetailId);
+                        }}
+                        className="h-7 text-xs text-orange-600"
+                      >
+                        추가 입력
+                      </Button>
+                      {componentConfig.allowRemove && (
+                        <Button
+                          type="button"
+                          variant="ghost"
+                          size="icon"
+                          onClick={() => handleRemoveItem(item.id)}
+                          className="h-7 w-7 text-red-500"
+                        >
+                          <X className="h-3 w-3" />
+                        </Button>
+                      )}
+                    </div>
+                  </div>
+                  {/* 🆕 입력된 상세 항목들 표시 */}
+                  {item.details && item.details.length > 0 && (
+                    <div className="border-primary mt-2 space-y-1 border-l-2 pl-4">
+                      {item.details.map((detail, detailIdx) => (
+                        <div key={detail.id} className="text-primary text-xs">
+                          {detailIdx + 1}. {detail[componentConfig.additionalFields?.[0]?.name] || "입력됨"}
+                        </div>
+                      ))}
+                    </div>
+                  )}
+                </CardContent>
+              </Card>
+            );
+          }
+
+          // Inline 모드: 각 품목마다 여러 상세 항목 표시
+          return (
+            <Card key={item.id} className="border shadow-sm">
+              <CardContent className="space-y-3 p-4">
+                {/* 제목 (품명) */}
+                <div className="flex items-center justify-between">
+                  <div className="text-base font-semibold">
+                    {index + 1}.{" "}
+                    {getFieldValue(item.originalData, componentConfig.displayColumns?.[0]?.name || "") || "항목"}
+                  </div>
+                  <Button
+                    type="button"
+                    onClick={() => {
+                      const newDetailId = `detail-${Date.now()}`;
+                      handleAddDetail(item.id);
+                    }}
+                    size="sm"
+                    variant="outline"
+                    className="text-xs"
+                  >
+                    + 상세 입력 추가
+                  </Button>
+                </div>
+
+                {/* 원본 데이터 요약 (작은 텍스트, | 구분자) */}
+                <div className="text-muted-foreground text-xs">
+                  {componentConfig.displayColumns
+                    ?.map((col) => getFieldValue(item.originalData, col.name))
+                    .filter(Boolean)
+                    .join(" | ")}
+                </div>
+
+                {/* 🆕 각 상세 항목 표시 */}
+                {item.details && item.details.length > 0 ? (
+                  <div className="border-primary space-y-3 border-l-2 pl-4">
+                    {item.details.map((detail, detailIdx) => (
+                      <Card key={detail.id} className="border-dashed">
+                        <CardContent className="space-y-2 p-3">
+                          <div className="flex items-center justify-between">
+                            <div className="text-xs font-medium">상세 항목 {detailIdx + 1}</div>
+                            <Button
+                              type="button"
+                              variant="ghost"
+                              size="sm"
+                              onClick={() => handleRemoveDetail(item.id, detail.id)}
+                              className="h-6 w-6 p-0 text-red-500"
+                            >
+                              X
+                            </Button>
+                          </div>
+                          {/* 입력 필드들 */}
+                          {renderFieldsByGroup(item.id, detail.id, detail)}
+                        </CardContent>
+                      </Card>
+                    ))}
+                  </div>
+                ) : (
+                  <div className="text-muted-foreground pl-4 text-xs italic">아직 입력된 상세 항목이 없습니다.</div>
+                )}
+              </CardContent>
+            </Card>
+          );
+        })}
+
+        {/* Modal 모드: 하단 추가 버튼 (항목이 있을 때) */}
+        {isModalMode && !isEditing && items.length > 0 && (
+          <Button
+            type="button"
+            onClick={() => {
+              // 새 항목 추가 로직은 여기서 처리하지 않고, 기존 항목이 있으면 첫 항목을 편집 모드로
+              setIsEditing(true);
+              setEditingItemId(items[0]?.id || null);
+            }}
+            variant="outline"
+            size="sm"
+            className="w-full border-dashed text-xs sm:text-sm"
+          >
+            + 추가
+          </Button>
+        )}
+      </div>
+    );
+  };
+
+  // 기존 테이블 레이아웃 (사용 안 함, 삭제 예정)
+  const renderOldGridLayout = () => {
+    return (
+      <div className="bg-card overflow-auto">
+        <Table>
+          <TableHeader>
+            <TableRow className="bg-background">
+              {componentConfig.showIndex && (
+                <TableHead className="h-12 w-12 px-4 py-3 text-center text-xs font-semibold sm:text-sm">#</TableHead>
+              )}
+
+              {/* 원본 데이터 컬럼 */}
+              {componentConfig.displayColumns?.map((col) => (
+                <TableHead key={col.name} className="h-12 px-4 py-3 text-xs font-semibold sm:text-sm">
+                  {col.label || col.name}
+                </TableHead>
+              ))}
+
+              {/* 추가 입력 필드 컬럼 */}
+              {componentConfig.additionalFields?.map((field) => (
+                <TableHead key={field.name} className="h-12 px-4 py-3 text-xs font-semibold sm:text-sm">
+                  {field.label}
+                  {field.required && <span className="text-destructive ml-1">*</span>}
+                </TableHead>
+              ))}
+
+              {componentConfig.allowRemove && (
+                <TableHead className="h-12 w-20 px-4 py-3 text-center text-xs font-semibold sm:text-sm">작업</TableHead>
+              )}
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {items.map((item, index) => (
+              <TableRow key={item.id} className="bg-background hover:bg-muted/50 transition-colors">
+                {/* 인덱스 번호 */}
+                {componentConfig.showIndex && (
+                  <TableCell className="h-14 px-4 py-3 text-center text-xs font-medium sm:text-sm">
+                    {index + 1}
+                  </TableCell>
+                )}
+
+                {/* 원본 데이터 표시 */}
+                {componentConfig.displayColumns?.map((col) => (
+                  <TableCell key={col.name} className="h-14 px-4 py-3 text-xs sm:text-sm">
+                    {getFieldValue(item.originalData, col.name) || "-"}
+                  </TableCell>
+                ))}
+
+                {/* 추가 입력 필드 */}
+                {componentConfig.additionalFields?.map((field) => (
+                  <TableCell key={field.name} className="h-14 px-4 py-3">
+                    {renderField(field, item)}
+                  </TableCell>
+                ))}
+
+                {/* 삭제 버튼 */}
+                {componentConfig.allowRemove && (
+                  <TableCell className="h-14 px-4 py-3 text-center">
+                    {!componentConfig.disabled && !componentConfig.readonly && (
+                      <Button
+                        type="button"
+                        variant="ghost"
+                        size="icon"
+                        onClick={() => handleRemoveItem(item.id)}
+                        className="text-destructive hover:bg-destructive/10 hover:text-destructive h-7 w-7 sm:h-8 sm:w-8"
+                        title="항목 제거"
+                      >
+                        <X className="h-3 w-3 sm:h-4 sm:w-4" />
+                      </Button>
+                    )}
+                  </TableCell>
+                )}
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </div>
+    );
+  };
+
+  // 🆕 Card 레이아웃 렌더링 (Grid와 동일)
+  const renderCardLayout = () => {
+    return renderGridLayout();
+  };
+
+  // 🔧 기존 renderCardLayout (백업 - 사용 안 함)
+  const renderCardLayout_OLD = () => {
+    const isModalMode = componentConfig.inputMode === "modal";
+    console.log("🎨 [renderCardLayout] 렌더링 모드:", {
+      inputMode: componentConfig.inputMode,
+      isModalMode,
+      isEditing,
+      editingItemId,
+      itemsLength: items.length,
+    });
+
+    return (
+      <div className="bg-card space-y-3 p-4">
+        {/* Modal 모드: 추가 버튼 */}
+        {isModalMode && !isEditing && items.length === 0 && (
+          <div className="py-8 text-center">
+            <p className="text-muted-foreground mb-4 text-sm">항목을 추가하려면 추가 버튼을 클릭하세요</p>
+            <Button type="button" onClick={() => setIsEditing(true)} size="sm" className="text-xs sm:text-sm">
+              + 추가
+            </Button>
+          </div>
+        )}
+
+        {/* Modal 모드: 편집 중인 항목 (입력창 표시) */}
+        {isModalMode &&
+          isEditing &&
+          editingItemId &&
+          (() => {
+            const editingItem = items.find((item) => item.id === editingItemId);
+            console.log("🔍 [Modal Mode - Card] 편집 항목 찾기:", {
+              editingItemId,
+              itemsLength: items.length,
+              itemIds: items.map((i) => i.id),
+              editingItem: editingItem ? "찾음" : "못 찾음",
+              editingDetailId,
+            });
+            if (!editingItem) {
+              console.warn("⚠️ [Modal Mode - Card] 편집할 항목을 찾을 수 없습니다!");
+              return null;
+            }
+
+            return (
+              <Card className="border-primary border-2 shadow-sm">
+                <CardHeader className="pb-3">
+                  <CardTitle className="flex items-center justify-between text-sm font-semibold">
+                    <span>
+                      품목:{" "}
+                      {getFieldValue(editingItem.originalData, componentConfig.displayColumns?.[0]?.name || "") ||
+                        "항목"}
+                    </span>
+                    <Button
+                      type="button"
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => {
+                        setIsEditing(false);
+                        setEditingItemId(null);
+                        setEditingDetailId(null);
+                      }}
+                      className="h-7 text-xs"
+                    >
+                      취소
+                    </Button>
+                  </CardTitle>
+                </CardHeader>
+                <CardContent className="space-y-3">
+                  {/* 원본 데이터 요약 */}
+                  <div className="text-muted-foreground bg-muted rounded p-2 text-xs">
+                    {componentConfig.displayColumns
+                      ?.map((col) => editingItem.originalData[col.name])
+                      .filter(Boolean)
+                      .join(" | ")}
+                  </div>
+
+                  {/* 🆕 이미 입력된 상세 항목들 표시 */}
+                  {editingItem.details.length > 0 && (
+                    <div className="space-y-2">
+                      <div className="text-xs font-medium">입력된 항목 ({editingItem.details.length}개)</div>
+                      {editingItem.details.map((detail, idx) => (
+                        <div
+                          key={detail.id}
+                          className="bg-muted/30 flex items-center justify-between rounded border p-2 text-xs"
+                        >
+                          <span>
+                            {idx + 1}. {detail[componentConfig.additionalFields?.[0]?.name] || "입력됨"}
+                          </span>
+                          <Button
+                            type="button"
+                            variant="ghost"
+                            size="sm"
+                            onClick={() => handleRemoveDetail(editingItem.id, detail.id)}
+                            className="h-6 w-6 p-0"
+                          >
+                            X
+                          </Button>
+                        </div>
+                      ))}
+                    </div>
+                  )}
+
+                  {/* 추가 입력 필드 */}
+                  {componentConfig.additionalFields &&
+                    componentConfig.additionalFields.length > 0 &&
+                    editingDetailId &&
+                    (() => {
+                      // 현재 편집 중인 detail 찾기 (없으면 빈 객체)
+                      const currentDetail = editingItem.details.find((d) => d.id === editingDetailId) || {
+                        id: editingDetailId,
+                      };
+                      return renderFieldsByGroup(editingItem.id, editingDetailId, currentDetail);
+                    })()}
+
+                  {/* 액션 버튼들 */}
+                  <div className="flex justify-end gap-2 pt-2">
+                    <Button
+                      type="button"
+                      onClick={() => handleAddDetail(editingItem.id)}
+                      size="sm"
+                      variant="outline"
+                      className="text-xs"
+                    >
+                      + 이 품목에 추가 입력
+                    </Button>
+                    <Button type="button" variant="default" onClick={handleNextItem} size="sm" className="text-xs">
+                      다음 품목
+                    </Button>
+                  </div>
+                </CardContent>
+              </Card>
+            );
+          })()}
+
+        {/* 저장된 항목들 (inline 모드 또는 modal 모드에서 편집 완료된 항목) */}
+        {items.map((item, index) => {
+          // Modal 모드에서 현재 편집 중인 항목은 위에서 렌더링하므로 스킵
+          if (isModalMode && isEditing && item.id === editingItemId) {
+            return null;
+          }
+
+          // Modal 모드: 작은 요약 카드
+          if (isModalMode) {
+            return (
+              <Card key={item.id} className="bg-muted/50 border shadow-sm">
+                <CardContent className="flex items-center justify-between p-3">
+                  <div className="flex-1">
+                    <div className="mb-1 text-sm font-semibold">
+                      {index + 1}.{" "}
+                      {getFieldValue(item.originalData, componentConfig.displayColumns?.[0]?.name || "") || "항목"}
+                    </div>
+                    <div className="text-muted-foreground text-xs">
+                      {componentConfig.displayColumns
+                        ?.map((col) => getFieldValue(item.originalData, col.name))
+                        .filter(Boolean)
+                        .join(" | ")}
+                    </div>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <Button
+                      type="button"
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => {
+                        setIsEditing(true);
+                        setEditingItemId(item.id);
+                      }}
+                      className="h-7 text-xs text-orange-600"
+                    >
+                      수정
+                    </Button>
+                    {componentConfig.allowRemove && (
+                      <Button
+                        type="button"
+                        variant="ghost"
+                        size="sm"
+                        onClick={() => handleRemoveItem(item.id)}
+                        className="text-destructive h-7 text-xs"
+                      >
+                        X
+                      </Button>
+                    )}
+                  </div>
+                </CardContent>
+              </Card>
+            );
+          }
+
+          // Inline 모드: 각 품목마다 여러 상세 항목 표시
+          return (
+            <Card key={item.id} className="border shadow-sm">
+              <CardContent className="space-y-3 p-4">
+                {/* 제목 (품명) */}
+                <div className="flex items-center justify-between">
+                  <div className="text-base font-semibold">
+                    {index + 1}.{" "}
+                    {getFieldValue(item.originalData, componentConfig.displayColumns?.[0]?.name || "") || "항목"}
+                  </div>
+                  <Button
+                    type="button"
+                    onClick={() => {
+                      const newDetailId = `detail-${Date.now()}`;
+                      handleAddDetail(item.id);
+                    }}
+                    size="sm"
+                    variant="outline"
+                    className="text-xs"
+                  >
+                    + 상세 입력 추가
+                  </Button>
+                </div>
+
+                {/* 원본 데이터 요약 (작은 텍스트, | 구분자) */}
+                <div className="text-muted-foreground text-xs">
+                  {componentConfig.displayColumns
+                    ?.map((col) => getFieldValue(item.originalData, col.name))
+                    .filter(Boolean)
+                    .join(" | ")}
+                </div>
+
+                {/* 🆕 각 상세 항목 표시 */}
+                {item.details && item.details.length > 0 ? (
+                  <div className="border-primary space-y-3 border-l-2 pl-4">
+                    {item.details.map((detail, detailIdx) => (
+                      <Card key={detail.id} className="border-dashed">
+                        <CardContent className="space-y-2 p-3">
+                          <div className="flex items-center justify-between">
+                            <div className="text-xs font-medium">상세 항목 {detailIdx + 1}</div>
+                            <Button
+                              type="button"
+                              variant="ghost"
+                              size="sm"
+                              onClick={() => handleRemoveDetail(item.id, detail.id)}
+                              className="h-6 w-6 p-0 text-red-500"
+                            >
+                              X
+                            </Button>
+                          </div>
+                          {/* 입력 필드들 */}
+                          {renderFieldsByGroup(item.id, detail.id, detail)}
+                        </CardContent>
+                      </Card>
+                    ))}
+                  </div>
+                ) : (
+                  <div className="text-muted-foreground pl-4 text-xs italic">아직 입력된 상세 항목이 없습니다.</div>
+                )}
+              </CardContent>
+            </Card>
+          );
+        })}
+
+        {/* Modal 모드: 하단 추가 버튼 (항목이 있을 때) */}
+        {isModalMode && !isEditing && items.length > 0 && (
+          <Button
+            type="button"
+            onClick={() => {
+              // 새 항목 추가 로직은 여기서 처리하지 않고, 기존 항목이 있으면 첫 항목을 편집 모드로
+              setIsEditing(true);
+              setEditingItemId(items[0]?.id || null);
+            }}
+            variant="outline"
+            size="sm"
+            className="w-full border-dashed text-xs sm:text-sm"
+          >
+            + 추가
+          </Button>
+        )}
+      </div>
+    );
+  };
+
+  console.log("🎨 [메인 렌더] 레이아웃 결정:", {
+    layout: componentConfig.layout,
+    willUseGrid: componentConfig.layout === "grid",
+    inputMode: componentConfig.inputMode,
+  });
+
+  return (
+    <div style={componentStyle} className={cn("space-y-4", className)} onClick={handleClick}>
+      {/* 레이아웃에 따라 렌더링 */}
+      {componentConfig.layout === "grid" ? renderGridLayout() : renderCardLayout()}
+
+      {/* 항목 수 표시 */}
+      <div className="text-muted-foreground flex justify-between text-xs">
+        <span>총 {items.length}개 항목</span>
+        {componentConfig.targetTable && <span>저장 대상: {componentConfig.targetTable}</span>}
+      </div>
+    </div>
+  );
+};
+
+/**
+ * SelectedItemsDetailInput 래퍼 컴포넌트
+ * 추가적인 로직이나 상태 관리가 필요한 경우 사용
+ */
+export const SelectedItemsDetailInputWrapper: React.FC<SelectedItemsDetailInputComponentProps> = (props) => {
+  return <SelectedItemsDetailInputComponent {...props} />;
+};
diff --git a/frontend/lib/registry/components/selected-items-detail-input/SelectedItemsDetailInputConfigPanel.tsx b/frontend/lib/registry/components/selected-items-detail-input/SelectedItemsDetailInputConfigPanel.tsx
new file mode 100644
index 00000000..408934e2
--- /dev/null
+++ b/frontend/lib/registry/components/selected-items-detail-input/SelectedItemsDetailInputConfigPanel.tsx
@@ -0,0 +1,2075 @@
+"use client";
+
+import React, { useState, useMemo, useEffect } from "react";
+import { Label } from "@/components/ui/label";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Card, CardContent } from "@/components/ui/card";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
+import { Plus, X, ChevronDown, ChevronRight } from "lucide-react";
+import { SelectedItemsDetailInputConfig, AdditionalFieldDefinition, FieldGroup, DisplayItem, DisplayItemType, EmptyBehavior, DisplayFieldFormat } from "./types";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Check, ChevronsUpDown } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { getSecondLevelMenus, getCategoryColumns, getCategoryValues } from "@/lib/api/tableCategoryValue";
+import { CalculationBuilder } from "./CalculationBuilder";
+
+export interface SelectedItemsDetailInputConfigPanelProps {
+  config: SelectedItemsDetailInputConfig;
+  onChange: (config: Partial<SelectedItemsDetailInputConfig>) => void;
+  sourceTableColumns?: Array<{ columnName: string; columnLabel?: string; dataType?: string }>; // 🆕 원본 테이블 컬럼
+  targetTableColumns?: Array<{ columnName: string; columnLabel?: string; dataType?: string }>; // 🆕 대상 테이블 컬럼
+  allTables?: Array<{ tableName: string; displayName?: string }>;
+  screenTableName?: string; // 🆕 현재 화면의 테이블명 (자동 설정용)
+  onSourceTableChange?: (tableName: string) => void; // 🆕 원본 테이블 변경 콜백
+  onTargetTableChange?: (tableName: string) => void; // 🆕 대상 테이블 변경 콜백 (기존 onTableChange 대체)
+}
+
+/**
+ * SelectedItemsDetailInput 설정 패널
+ * 컴포넌트의 설정값들을 편집할 수 있는 UI 제공
+ */
+export const SelectedItemsDetailInputConfigPanel: React.FC<SelectedItemsDetailInputConfigPanelProps> = ({
+  config,
+  onChange,
+  sourceTableColumns = [], // 🆕 원본 테이블 컬럼
+  targetTableColumns = [], // 🆕 대상 테이블 컬럼
+  allTables = [],
+  screenTableName, // 🆕 현재 화면의 테이블명
+  onSourceTableChange, // 🆕 원본 테이블 변경 콜백
+  onTargetTableChange, // 🆕 대상 테이블 변경 콜백
+}) => {
+  const [localFields, setLocalFields] = useState<AdditionalFieldDefinition[]>(config.additionalFields || []);
+  const [displayColumns, setDisplayColumns] = useState<Array<{ name: string; label: string; width?: string }>>(config.displayColumns || []);
+  const [fieldPopoverOpen, setFieldPopoverOpen] = useState<Record<number, boolean>>({});
+  
+  // 🆕 필드 그룹 상태
+  const [localFieldGroups, setLocalFieldGroups] = useState<FieldGroup[]>(config.fieldGroups || []);
+  
+  
+  // 🆕 그룹별 펼침/접힘 상태
+  const [expandedGroups, setExpandedGroups] = useState<Record<string, boolean>>({});
+  
+  // 🆕 그룹별 표시 항목 설정 펼침/접힘 상태
+  const [expandedDisplayItems, setExpandedDisplayItems] = useState<Record<string, boolean>>({});
+  
+  // 🆕 원본 테이블 선택 상태
+  const [sourceTableSelectOpen, setSourceTableSelectOpen] = useState(false);
+  const [sourceTableSearchValue, setSourceTableSearchValue] = useState("");
+  
+  // 🆕 대상 테이블 선택 상태 (기존 tableSelectOpen)
+  const [tableSelectOpen, setTableSelectOpen] = useState(false);
+  const [tableSearchValue, setTableSearchValue] = useState("");
+
+  // 🆕 카테고리 매핑을 위한 상태
+  const [secondLevelMenus, setSecondLevelMenus] = useState<Array<{ menuObjid: number; menuName: string; parentMenuName: string }>>([]);
+  const [categoryColumns, setCategoryColumns] = useState<Record<string, Array<{ columnName: string; columnLabel: string }>>>({});
+  const [categoryValues, setCategoryValues] = useState<Record<string, Array<{ valueCode: string; valueLabel: string }>>>({});
+  
+  // 🆕 부모 데이터 매핑: 각 매핑별 소스 테이블 컬럼 상태
+  const [mappingSourceColumns, setMappingSourceColumns] = useState<Record<number, Array<{ columnName: string; columnLabel?: string; dataType?: string }>>>({});
+
+  // 🆕 소스 테이블 선택 시 컬럼 로드
+  const loadMappingSourceColumns = async (tableName: string, mappingIndex: number) => {
+    try {
+      console.log(`🔍 [매핑 ${mappingIndex}] 소스 테이블 컬럼 로드:`, tableName);
+      
+      const { tableManagementApi } = await import("@/lib/api/tableManagement");
+      const response = await tableManagementApi.getColumnList(tableName);
+      
+      if (response.success && response.data) {
+        const columns = response.data.columns || [];
+        setMappingSourceColumns(prev => ({
+          ...prev,
+          [mappingIndex]: columns.map((col: any) => ({
+            columnName: col.columnName,
+            columnLabel: col.displayName || col.columnLabel || col.columnName,
+            dataType: col.dataType,
+          }))
+        }));
+        console.log(`✅ [매핑 ${mappingIndex}] 컬럼 로드 성공:`, columns.length);
+      } else {
+        console.error(`❌ [매핑 ${mappingIndex}] 컬럼 로드 실패:`, response);
+      }
+    } catch (error) {
+      console.error(`❌ [매핑 ${mappingIndex}] 컬럼 로드 오류:`, error);
+    }
+  };
+
+  // 2레벨 메뉴 목록 로드
+  useEffect(() => {
+    const loadMenus = async () => {
+      const response = await getSecondLevelMenus();
+      if (response.success && response.data) {
+        setSecondLevelMenus(response.data);
+      }
+    };
+    loadMenus();
+  }, []);
+
+  // 메뉴 선택 시 카테고리 목록 로드
+  const handleMenuSelect = async (menuObjid: number, fieldType: "discountType" | "roundingType" | "roundingUnit") => {
+    if (!config.targetTable) {
+      console.warn("⚠️ targetTable이 설정되지 않았습니다");
+      return;
+    }
+    
+    console.log("🔍 카테고리 목록 로드 시작", { targetTable: config.targetTable, menuObjid, fieldType });
+    
+    const response = await getCategoryColumns(config.targetTable);
+    
+    console.log("📥 getCategoryColumns 응답:", response);
+    
+    if (response.success && response.data) {
+      console.log("✅ 카테고리 컬럼 데이터:", response.data);
+      setCategoryColumns(prev => ({ ...prev, [fieldType]: response.data }));
+    } else {
+      console.error("❌ 카테고리 컬럼 로드 실패:", response);
+    }
+    
+    // valueMapping 업데이트
+    handleChange("autoCalculation", {
+      ...config.autoCalculation,
+      valueMapping: {
+        ...config.autoCalculation.valueMapping,
+        _selectedMenus: {
+          ...(config.autoCalculation.valueMapping as any)?._selectedMenus,
+          [fieldType]: menuObjid,
+        },
+      },
+    });
+  };
+
+  // 카테고리 선택 시 카테고리 값 목록 로드
+  const handleCategorySelect = async (columnName: string, menuObjid: number, fieldType: "discountType" | "roundingType" | "roundingUnit") => {
+    if (!config.targetTable) return;
+    
+    const response = await getCategoryValues(config.targetTable, columnName, false, menuObjid);
+    if (response.success && response.data) {
+      setCategoryValues(prev => ({ ...prev, [fieldType]: response.data }));
+    }
+    
+    // valueMapping 업데이트
+    handleChange("autoCalculation", {
+      ...config.autoCalculation,
+      valueMapping: {
+        ...config.autoCalculation.valueMapping,
+        _selectedCategories: {
+          ...(config.autoCalculation.valueMapping as any)?._selectedCategories,
+          [fieldType]: columnName,
+        },
+      },
+    });
+  };
+
+  // 🆕 초기 로드 시 screenTableName을 targetTable로 자동 설정
+  React.useEffect(() => {
+    if (screenTableName && !config.targetTable) {
+      console.log("✨ 현재 화면 테이블을 저장 대상 테이블로 자동 설정:", screenTableName);
+      handleChange("targetTable", screenTableName);
+      
+      // 컬럼도 자동 로드
+      if (onTargetTableChange) {
+        onTargetTableChange(screenTableName);
+      }
+    }
+  }, [screenTableName]); // config.targetTable은 의존성에서 제외 (한 번만 실행)
+
+  const handleChange = (key: keyof SelectedItemsDetailInputConfig, value: any) => {
+    onChange({ [key]: value });
+  };
+
+  const handleFieldsChange = (fields: AdditionalFieldDefinition[]) => {
+    setLocalFields(fields);
+    handleChange("additionalFields", fields);
+  };
+
+  const handleDisplayColumnsChange = (columns: Array<{ name: string; label: string; width?: string }>) => {
+    setDisplayColumns(columns);
+    handleChange("displayColumns", columns);
+  };
+
+  // 필드 추가
+  const addField = () => {
+    const newField: AdditionalFieldDefinition = {
+      name: `field_${localFields.length + 1}`,
+      label: `필드 ${localFields.length + 1}`,
+      type: "text",
+    };
+    handleFieldsChange([...localFields, newField]);
+  };
+
+  // 필드 제거
+  const removeField = (index: number) => {
+    handleFieldsChange(localFields.filter((_, i) => i !== index));
+  };
+
+  // 필드 수정
+  const updateField = (index: number, updates: Partial<AdditionalFieldDefinition>) => {
+    const newFields = [...localFields];
+    newFields[index] = { ...newFields[index], ...updates };
+    handleFieldsChange(newFields);
+  };
+
+  // 🆕 필드 그룹 관리
+  const handleFieldGroupsChange = (groups: FieldGroup[]) => {
+    setLocalFieldGroups(groups);
+    handleChange("fieldGroups", groups);
+  };
+
+  const addFieldGroup = () => {
+    const newGroup: FieldGroup = {
+      id: `group_${localFieldGroups.length + 1}`,
+      title: `그룹 ${localFieldGroups.length + 1}`,
+      order: localFieldGroups.length,
+    };
+    handleFieldGroupsChange([...localFieldGroups, newGroup]);
+  };
+
+  const removeFieldGroup = (groupId: string) => {
+    // 그룹 삭제 시 해당 그룹에 속한 필드들의 groupId도 제거
+    const updatedFields = localFields.map(field => 
+      field.groupId === groupId ? { ...field, groupId: undefined } : field
+    );
+    setLocalFields(updatedFields);
+    handleChange("additionalFields", updatedFields);
+    handleFieldGroupsChange(localFieldGroups.filter(g => g.id !== groupId));
+  };
+
+  const updateFieldGroup = (groupId: string, updates: Partial<FieldGroup>) => {
+    const newGroups = localFieldGroups.map(g => 
+      g.id === groupId ? { ...g, ...updates } : g
+    );
+    handleFieldGroupsChange(newGroups);
+  };
+
+  // 표시 컬럼 추가
+  const addDisplayColumn = (columnName: string, columnLabel: string) => {
+    if (!displayColumns.some(col => col.name === columnName)) {
+      handleDisplayColumnsChange([...displayColumns, { name: columnName, label: columnLabel }]);
+    }
+  };
+
+  // 표시 컬럼 제거
+  const removeDisplayColumn = (columnName: string) => {
+    handleDisplayColumnsChange(displayColumns.filter((col) => col.name !== columnName));
+  };
+
+  // 🆕 표시 컬럼용: 원본 테이블에서 사용되지 않은 컬럼 목록
+  const availableColumns = useMemo(() => {
+    const usedColumns = new Set([...displayColumns.map(c => c.name), ...localFields.map((f) => f.name)]);
+    return sourceTableColumns.filter((col) => !usedColumns.has(col.columnName));
+  }, [sourceTableColumns, displayColumns, localFields]);
+
+  // 🆕 추가 입력 필드용: 대상 테이블에서 사용되지 않은 컬럼 목록
+  const availableTargetColumns = useMemo(() => {
+    const usedColumns = new Set([...displayColumns.map(c => c.name), ...localFields.map((f) => f.name)]);
+    return targetTableColumns.filter((col) => !usedColumns.has(col.columnName));
+  }, [targetTableColumns, displayColumns, localFields]);
+
+  // 🆕 원본 테이블 필터링
+  const filteredSourceTables = useMemo(() => {
+    if (!sourceTableSearchValue) return allTables;
+    const searchLower = sourceTableSearchValue.toLowerCase();
+    return allTables.filter(
+      (table) =>
+        table.tableName.toLowerCase().includes(searchLower) || table.displayName?.toLowerCase().includes(searchLower),
+    );
+  }, [allTables, sourceTableSearchValue]);
+
+  // 🆕 그룹별 항목 표시 설정 핸들러
+  const addDisplayItemToGroup = (groupId: string, type: DisplayItemType) => {
+    const newItem: DisplayItem = {
+      type,
+      id: `display-${Date.now()}`,
+    };
+
+    if (type === "field") {
+      // 해당 그룹의 필드만 선택 가능하도록
+      const groupFields = localFields.filter(f => f.groupId === groupId);
+      newItem.fieldName = groupFields[0]?.name || "";
+      newItem.format = "text";
+      newItem.emptyBehavior = "default";
+    } else if (type === "icon") {
+      newItem.icon = "Circle";
+    } else if (type === "text") {
+      newItem.value = "텍스트";
+    }
+
+    const updatedGroups = localFieldGroups.map(g => {
+      if (g.id === groupId) {
+        return {
+          ...g,
+          displayItems: [...(g.displayItems || []), newItem]
+        };
+      }
+      return g;
+    });
+    
+    setLocalFieldGroups(updatedGroups);
+    handleChange("fieldGroups", updatedGroups);
+  };
+
+  const removeDisplayItemFromGroup = (groupId: string, itemIndex: number) => {
+    const updatedGroups = localFieldGroups.map(g => {
+      if (g.id === groupId) {
+        return {
+          ...g,
+          displayItems: (g.displayItems || []).filter((_, i) => i !== itemIndex)
+        };
+      }
+      return g;
+    });
+    
+    setLocalFieldGroups(updatedGroups);
+    handleChange("fieldGroups", updatedGroups);
+  };
+
+  const updateDisplayItemInGroup = (groupId: string, itemIndex: number, updates: Partial<DisplayItem>) => {
+    const updatedGroups = localFieldGroups.map(g => {
+      if (g.id === groupId) {
+        const updatedItems = [...(g.displayItems || [])];
+        updatedItems[itemIndex] = { ...updatedItems[itemIndex], ...updates };
+        return {
+          ...g,
+          displayItems: updatedItems
+        };
+      }
+      return g;
+    });
+    
+    setLocalFieldGroups(updatedGroups);
+    handleChange("fieldGroups", updatedGroups);
+  };
+
+  // 🆕 선택된 원본 테이블 표시명
+  const selectedSourceTableLabel = useMemo(() => {
+    if (!config.sourceTable) return "원본 테이블을 선택하세요";
+    const table = allTables.find((t) => t.tableName === config.sourceTable);
+    return table ? table.displayName || table.tableName : config.sourceTable;
+  }, [config.sourceTable, allTables]);
+
+  // 대상 테이블 필터링
+  const filteredTables = useMemo(() => {
+    if (!tableSearchValue) return allTables;
+    const searchLower = tableSearchValue.toLowerCase();
+    return allTables.filter(
+      (table) =>
+        table.tableName.toLowerCase().includes(searchLower) || table.displayName?.toLowerCase().includes(searchLower),
+    );
+  }, [allTables, tableSearchValue]);
+
+  // 선택된 대상 테이블 표시명
+  const selectedTableLabel = useMemo(() => {
+    if (!config.targetTable) return "저장 대상 테이블을 선택하세요";
+    const table = allTables.find((t) => t.tableName === config.targetTable);
+    return table ? table.displayName || table.tableName : config.targetTable;
+  }, [config.targetTable, allTables]);
+
+  return (
+    <div className="space-y-4">
+      {/* 데이터 소스 ID */}
+      <div className="space-y-2">
+        <Label className="text-xs font-semibold sm:text-sm">
+          데이터 소스 ID <span className="text-primary font-normal">(자동 설정됨)</span>
+        </Label>
+        <Input
+          value={config.dataSourceId || ""}
+          onChange={(e) => handleChange("dataSourceId", e.target.value)}
+          placeholder="비워두면 URL 파라미터에서 자동 설정"
+          className="h-7 text-xs sm:h-8 sm:text-sm"
+        />
+        <p className="text-[10px] text-primary font-medium sm:text-xs">
+          ✨ URL 파라미터에서 자동으로 가져옵니다 (Button이 전달)
+        </p>
+        <p className="text-[10px] text-gray-500 sm:text-xs">
+          테스트용으로 직접 입력하려면 테이블명을 입력하세요
+        </p>
+      </div>
+
+      {/* 🆕 원본 데이터 테이블 */}
+      <div className="space-y-2">
+        <Label className="text-xs font-semibold sm:text-sm">
+          원본 데이터 테이블 <span className="text-destructive">*</span>
+        </Label>
+        <Popover open={sourceTableSelectOpen} onOpenChange={setSourceTableSelectOpen}>
+          <PopoverTrigger asChild>
+            <Button
+              variant="outline"
+              role="combobox"
+              aria-expanded={sourceTableSelectOpen}
+              className="h-8 w-full justify-between text-xs sm:text-sm"
+              disabled={allTables.length === 0}
+            >
+              {selectedSourceTableLabel}
+              <ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50 sm:h-4 sm:w-4" />
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent className="w-full p-0" align="start">
+            <Command>
+              <CommandInput placeholder="테이블 검색..." value={sourceTableSearchValue} onValueChange={setSourceTableSearchValue} className="h-8 text-xs sm:text-sm" />
+              <CommandEmpty>테이블을 찾을 수 없습니다.</CommandEmpty>
+              <CommandGroup className="max-h-64 overflow-auto">
+                {filteredSourceTables.map((table) => (
+                  <CommandItem
+                    key={table.tableName}
+                    value={table.tableName}
+                    onSelect={(currentValue) => {
+                      handleChange("sourceTable", currentValue);
+                      setSourceTableSelectOpen(false);
+                      setSourceTableSearchValue("");
+                      if (onSourceTableChange) {
+                        onSourceTableChange(currentValue);
+                      }
+                    }}
+                    className="text-xs sm:text-sm"
+                  >
+                    <Check
+                      className={cn(
+                        "mr-2 h-3 w-3 sm:h-4 sm:w-4",
+                        config.sourceTable === table.tableName ? "opacity-100" : "opacity-0",
+                      )}
+                    />
+                    {table.displayName || table.tableName}
+                  </CommandItem>
+                ))}
+              </CommandGroup>
+            </Command>
+          </PopoverContent>
+        </Popover>
+        <p className="text-[10px] text-gray-500 sm:text-xs">
+          이전 화면에서 전달받은 데이터의 원본 테이블 (예: item_info)
+        </p>
+      </div>
+
+      {/* 저장 대상 테이블 */}
+      <div className="space-y-2">
+        <Label className="text-xs font-semibold sm:text-sm">
+          저장 대상 테이블 <span className="text-destructive">*</span>
+        </Label>
+        <Popover open={tableSelectOpen} onOpenChange={setTableSelectOpen}>
+          <PopoverTrigger asChild>
+            <Button
+              variant="outline"
+              role="combobox"
+              aria-expanded={tableSelectOpen}
+              className="h-7 w-full justify-between text-xs sm:h-8 sm:text-sm"
+            >
+              {selectedTableLabel}
+              <ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50 sm:h-4 sm:w-4" />
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent className="w-full p-0" align="start">
+            <Command>
+              <CommandInput
+                placeholder="테이블 검색..."
+                value={tableSearchValue}
+                onValueChange={setTableSearchValue}
+                className="text-xs sm:text-sm"
+              />
+              <CommandEmpty className="text-xs sm:text-sm">테이블을 찾을 수 없습니다.</CommandEmpty>
+              <CommandGroup className="max-h-48 overflow-auto sm:max-h-64">
+                {filteredTables.map((table) => (
+                  <CommandItem
+                    key={table.tableName}
+                    value={table.tableName}
+                    onSelect={(currentValue) => {
+                      handleChange("targetTable", currentValue);
+                      setTableSelectOpen(false);
+                      setTableSearchValue("");
+                      if (onTargetTableChange) {
+                        onTargetTableChange(currentValue);
+                      }
+                    }}
+                    className="text-xs sm:text-sm"
+                  >
+                    <Check
+                      className={cn(
+                        "mr-2 h-3 w-3 sm:h-4 sm:w-4",
+                        config.targetTable === table.tableName ? "opacity-100" : "opacity-0",
+                      )}
+                    />
+                    {table.displayName || table.tableName}
+                  </CommandItem>
+                ))}
+              </CommandGroup>
+            </Command>
+          </PopoverContent>
+        </Popover>
+        <p className="text-[10px] text-gray-500 sm:text-xs">최종 데이터를 저장할 테이블</p>
+      </div>
+
+      {/* 표시할 원본 데이터 컬럼 */}
+      <div className="space-y-2">
+        <Label className="text-xs font-semibold sm:text-sm">표시할 원본 데이터 컬럼</Label>
+        <div className="space-y-2">
+          {displayColumns.map((col, index) => (
+            <div key={index} className="flex items-center gap-2">
+              <Input value={col.label || col.name} readOnly className="h-7 flex-1 text-xs sm:h-8 sm:text-sm" />
+              <Button
+                type="button"
+                variant="ghost"
+                size="icon"
+                onClick={() => removeDisplayColumn(col.name)}
+                className="h-6 w-6 text-red-500 hover:bg-red-50 sm:h-7 sm:w-7"
+              >
+                <X className="h-3 w-3 sm:h-4 sm:w-4" />
+              </Button>
+            </div>
+          ))}
+          
+          <Popover>
+            <PopoverTrigger asChild>
+              <Button
+                type="button"
+                variant="outline"
+                size="sm"
+                className="h-7 w-full border-dashed text-xs sm:text-sm"
+              >
+                <Plus className="mr-1 h-3 w-3 sm:h-4 sm:w-4" />
+                컬럼 추가
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent className="w-full p-0" align="start">
+              <Command>
+                <CommandInput placeholder="컬럼 검색..." className="text-xs sm:text-sm" />
+                <CommandEmpty className="text-xs sm:text-sm">사용 가능한 컬럼이 없습니다.</CommandEmpty>
+                <CommandGroup className="max-h-48 overflow-auto sm:max-h-64">
+                  {availableColumns.map((column) => (
+                    <CommandItem
+                      key={column.columnName}
+                      value={column.columnName}
+                      onSelect={() => addDisplayColumn(column.columnName, column.columnLabel || column.columnName)}
+                      className="text-xs sm:text-sm"
+                    >
+                      <div>
+                        <div className="font-medium">{column.columnLabel || column.columnName}</div>
+                        {column.dataType && <div className="text-[10px] text-gray-500">{column.dataType}</div>}
+                      </div>
+                    </CommandItem>
+                  ))}
+                </CommandGroup>
+              </Command>
+            </PopoverContent>
+          </Popover>
+        </div>
+        <p className="text-[10px] text-gray-500 sm:text-xs">
+          전달받은 원본 데이터 중 화면에 표시할 컬럼 (예: 품목코드, 품목명)
+        </p>
+      </div>
+
+      {/* 추가 입력 필드 정의 */}
+      <div className="space-y-2">
+        <Label className="text-xs font-semibold sm:text-sm">추가 입력 필드 정의</Label>
+
+        {localFields.map((field, index) => (
+          <Card key={index} className="border-2">
+            <CardContent className="space-y-2 pt-3 sm:space-y-3 sm:pt-4">
+              <div className="flex items-center justify-between">
+                <span className="text-xs font-semibold text-gray-700 sm:text-sm">필드 {index + 1}</span>
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="icon"
+                  onClick={() => removeField(index)}
+                  className="h-5 w-5 text-red-500 hover:bg-red-50 sm:h-6 sm:w-6"
+                >
+                  <X className="h-2 w-2 sm:h-3 sm:w-3" />
+                </Button>
+              </div>
+
+              <div className="grid grid-cols-2 gap-2 sm:gap-3">
+                <div className="space-y-1">
+                  <Label className="text-[10px] sm:text-xs">필드명 (컬럼)</Label>
+                  <Popover
+                    open={fieldPopoverOpen[index] || false}
+                    onOpenChange={(open) => setFieldPopoverOpen({ ...fieldPopoverOpen, [index]: open })}
+                  >
+                    <PopoverTrigger asChild>
+                      <Button
+                        variant="outline"
+                        role="combobox"
+                        className="h-6 w-full justify-between text-[10px] sm:h-7 sm:text-xs"
+                      >
+                        {field.name || "컬럼 선택"}
+                        <ChevronsUpDown className="ml-1 h-2 w-2 shrink-0 opacity-50 sm:h-3 sm:w-3" />
+                      </Button>
+                    </PopoverTrigger>
+                    <PopoverContent className="w-[180px] p-0 sm:w-[200px]">
+                      <Command>
+                        <CommandInput placeholder="컬럼 검색..." className="h-6 text-[10px] sm:h-7 sm:text-xs" />
+                        <CommandEmpty className="text-[10px] sm:text-xs">사용 가능한 컬럼이 없습니다.</CommandEmpty>
+                        <CommandGroup className="max-h-[150px] overflow-auto sm:max-h-[200px]">
+                          {availableTargetColumns.map((column) => (
+                            <CommandItem
+                              key={column.columnName}
+                              value={column.columnName}
+                              onSelect={() => {
+                                updateField(index, {
+                                  name: column.columnName,
+                                  label: column.columnLabel || column.columnName,
+                                  inputType: column.inputType || "text", // 🆕 inputType 포함
+                                  codeCategory: column.codeCategory, // 🆕 codeCategory 포함
+                                });
+                                setFieldPopoverOpen({ ...fieldPopoverOpen, [index]: false });
+                              }}
+                              className="text-[10px] sm:text-xs"
+                            >
+                              <Check
+                                className={cn(
+                                  "mr-1 h-2 w-2 sm:mr-2 sm:h-3 sm:w-3",
+                                  field.name === column.columnName ? "opacity-100" : "opacity-0",
+                                )}
+                              />
+                              <div>
+                                <div className="font-medium">{column.columnLabel}</div>
+                                <div className="text-[9px] text-gray-500">{column.columnName}</div>
+                              </div>
+                            </CommandItem>
+                          ))}
+                        </CommandGroup>
+                      </Command>
+                    </PopoverContent>
+                  </Popover>
+                </div>
+
+                <div className="space-y-1">
+                  <Label className="text-[10px] sm:text-xs">라벨</Label>
+                  <Input
+                    value={field.label}
+                    onChange={(e) => updateField(index, { label: e.target.value })}
+                    placeholder="필드 라벨"
+                    className="h-6 w-full text-[10px] sm:h-7 sm:text-xs"
+                  />
+                </div>
+              </div>
+
+              <div className="grid grid-cols-2 gap-2 sm:gap-3">
+                <div className="space-y-1">
+                  <Label className="text-[10px] sm:text-xs">타입 (자동)</Label>
+                  <Input
+                    value={field.inputType || field.type || "text"}
+                    readOnly
+                    disabled
+                    className="h-6 w-full text-[10px] sm:h-7 sm:text-xs bg-muted"
+                  />
+                  <p className="text-[9px] text-primary sm:text-[10px]">
+                    테이블 타입관리에서 자동 설정됨
+                  </p>
+                </div>
+
+                <div className="space-y-1">
+                  <Label className="text-[10px] sm:text-xs">Placeholder</Label>
+                  <Input
+                    value={field.placeholder || ""}
+                    onChange={(e) => updateField(index, { placeholder: e.target.value })}
+                    placeholder="입력 안내"
+                    className="h-6 w-full text-[10px] sm:h-7 sm:text-xs"
+                  />
+                </div>
+              </div>
+
+              {/* 🆕 원본 데이터 자동 채우기 */}
+              <div className="space-y-2">
+                <Label className="text-[10px] sm:text-xs">자동 채우기 (선택)</Label>
+                
+                {/* 테이블명 입력 */}
+                <Input
+                  value={field.autoFillFromTable || ""}
+                  onChange={(e) => updateField(index, { autoFillFromTable: e.target.value })}
+                  placeholder="비워두면 주 데이터 (예: item_price)"
+                  className="h-6 w-full text-[10px] sm:h-7 sm:text-xs"
+                />
+                <p className="text-[9px] text-gray-500 sm:text-[10px]">
+                  다른 테이블에서 가져올 경우 테이블명 입력
+                </p>
+                
+                {/* 필드 선택 */}
+                <Popover>
+                  <PopoverTrigger asChild>
+                    <Button
+                      variant="outline"
+                      role="combobox"
+                      className="h-6 w-full justify-between text-[10px] sm:h-7 sm:text-xs"
+                    >
+                      {field.autoFillFrom 
+                        ? sourceTableColumns.find(c => c.columnName === field.autoFillFrom)?.columnLabel || field.autoFillFrom
+                        : "필드 선택 안 함"}
+                      <ChevronsUpDown className="ml-1 h-2 w-2 shrink-0 opacity-50 sm:h-3 sm:w-3" />
+                    </Button>
+                  </PopoverTrigger>
+                  <PopoverContent className="w-[180px] p-0 sm:w-[200px]">
+                    <Command>
+                      <CommandInput placeholder="컬럼 검색..." className="h-6 text-[10px] sm:h-7 sm:text-xs" />
+                      <CommandEmpty className="text-[10px] sm:text-xs">원본 테이블을 먼저 선택하세요.</CommandEmpty>
+                      <CommandGroup className="max-h-[150px] overflow-auto sm:max-h-[200px]">
+                        <CommandItem
+                          value=""
+                          onSelect={() => updateField(index, { autoFillFrom: undefined })}
+                          className="text-[10px] sm:text-xs"
+                        >
+                          <Check
+                            className={cn(
+                              "mr-1 h-2 w-2 sm:mr-2 sm:h-3 sm:w-3",
+                              !field.autoFillFrom ? "opacity-100" : "opacity-0",
+                            )}
+                          />
+                          선택 안 함
+                        </CommandItem>
+                        {sourceTableColumns.map((column) => (
+                          <CommandItem
+                            key={column.columnName}
+                            value={column.columnName}
+                            onSelect={() => updateField(index, { autoFillFrom: column.columnName })}
+                            className="text-[10px] sm:text-xs"
+                          >
+                            <Check
+                              className={cn(
+                                "mr-1 h-2 w-2 sm:mr-2 sm:h-3 sm:w-3",
+                                field.autoFillFrom === column.columnName ? "opacity-100" : "opacity-0",
+                              )}
+                            />
+                            <div>
+                              <div className="font-medium">{column.columnLabel}</div>
+                              <div className="text-[9px] text-gray-500">{column.columnName}</div>
+                            </div>
+                          </CommandItem>
+                        ))}
+                      </CommandGroup>
+                    </Command>
+                  </PopoverContent>
+                </Popover>
+                
+                <p className="text-[9px] text-primary sm:text-[10px]">
+                  {field.autoFillFromTable 
+                    ? `"${field.autoFillFromTable}" 테이블에서 자동 채우기`
+                    : "주 데이터 소스에서 자동 채우기 (수정 가능)"
+                  }
+                </p>
+              </div>
+
+              {/* 🆕 필드 그룹 선택 */}
+              {localFieldGroups.length > 0 && (
+                <div className="space-y-1">
+                  <Label className="text-[10px] sm:text-xs">필드 그룹 (선택사항)</Label>
+                  <Select
+                    value={field.groupId || "none"}
+                    onValueChange={(value) => updateField(index, { groupId: value === "none" ? undefined : value })}
+                  >
+                    <SelectTrigger className="h-6 text-[10px] sm:h-7 sm:text-xs">
+                      <SelectValue placeholder="그룹 없음" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="none" className="text-xs">그룹 없음</SelectItem>
+                      {localFieldGroups.map((group) => (
+                        <SelectItem key={group.id} value={group.id} className="text-xs">
+                          {group.title} ({group.id})
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                  <p className="text-[9px] text-gray-500 sm:text-[10px]">
+                    같은 그룹 ID를 가진 필드들은 같은 카드에 표시됩니다
+                  </p>
+                </div>
+              )}
+
+              <div className="flex items-center space-x-2">
+                <Checkbox
+                  id={`required-${index}`}
+                  checked={field.required ?? false}
+                  onCheckedChange={(checked) => updateField(index, { required: checked as boolean })}
+                />
+                <Label htmlFor={`required-${index}`} className="cursor-pointer text-[10px] font-normal sm:text-xs">
+                  필수 입력
+                </Label>
+              </div>
+            </CardContent>
+          </Card>
+        ))}
+
+        <Button
+          type="button"
+          variant="outline"
+          size="sm"
+          onClick={addField}
+          className="h-7 w-full border-dashed text-xs sm:text-sm"
+        >
+          <Plus className="mr-1 h-3 w-3 sm:mr-2 sm:h-4 sm:w-4" />
+          필드 추가
+        </Button>
+      </div>
+
+      {/* 🆕 필드 그룹 관리 */}
+      <div className="space-y-2">
+        <Label className="text-xs font-semibold sm:text-sm">필드 그룹 설정</Label>
+        <p className="text-[10px] text-gray-500 sm:text-xs">
+          추가 입력 필드를 여러 카드로 나눠서 표시 (예: 거래처 정보, 단가 정보)
+        </p>
+
+        {localFieldGroups.map((group, index) => {
+          const isGroupExpanded = expandedGroups[group.id] ?? true;
+          
+          return (
+          <Collapsible
+            key={group.id}
+            open={isGroupExpanded}
+            onOpenChange={(open) => setExpandedGroups(prev => ({ ...prev, [group.id]: open }))}
+          >
+            <Card className="border-2">
+              <CardContent className="p-3 sm:p-4">
+                <div className="flex items-center justify-between mb-2">
+                  <CollapsibleTrigger asChild>
+                    <Button variant="ghost" size="sm" className="h-auto p-0 hover:bg-transparent">
+                      <div className="flex items-center gap-2">
+                        {isGroupExpanded ? (
+                          <ChevronDown className="h-4 w-4" />
+                        ) : (
+                          <ChevronRight className="h-4 w-4" />
+                        )}
+                        <span className="text-xs font-semibold sm:text-sm">
+                          그룹 {index + 1}: {group.title || group.id}
+                        </span>
+                      </div>
+                    </Button>
+                  </CollapsibleTrigger>
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="icon"
+                    onClick={() => removeFieldGroup(group.id)}
+                    className="h-6 w-6 text-red-500 hover:text-red-700 sm:h-7 sm:w-7"
+                  >
+                    <X className="h-3 w-3 sm:h-4 sm:w-4" />
+                  </Button>
+                </div>
+
+                <CollapsibleContent className="space-y-2 sm:space-y-3 mt-2">
+                  {/* 그룹 ID */}
+              <div className="space-y-1">
+                <Label className="text-[10px] sm:text-xs">그룹 ID</Label>
+                <Input
+                  value={group.id}
+                  onChange={(e) => updateFieldGroup(group.id, { id: e.target.value })}
+                  className="h-7 text-xs sm:h-8 sm:text-sm"
+                  placeholder="group_customer"
+                />
+              </div>
+
+              {/* 그룹 제목 */}
+              <div className="space-y-1">
+                <Label className="text-[10px] sm:text-xs">그룹 제목</Label>
+                <Input
+                  value={group.title}
+                  onChange={(e) => updateFieldGroup(group.id, { title: e.target.value })}
+                  className="h-7 text-xs sm:h-8 sm:text-sm"
+                  placeholder="거래처 정보"
+                />
+              </div>
+
+              {/* 그룹 설명 */}
+              <div className="space-y-1">
+                <Label className="text-[10px] sm:text-xs">그룹 설명 (선택사항)</Label>
+                <Input
+                  value={group.description || ""}
+                  onChange={(e) => updateFieldGroup(group.id, { description: e.target.value })}
+                  className="h-7 text-xs sm:h-8 sm:text-sm"
+                  placeholder="거래처 관련 정보를 입력합니다"
+                />
+              </div>
+
+              {/* 표시 순서 */}
+              <div className="space-y-1">
+                <Label className="text-[10px] sm:text-xs">표시 순서</Label>
+                <Input
+                  type="number"
+                  value={group.order || 0}
+                  onChange={(e) => updateFieldGroup(group.id, { order: parseInt(e.target.value) || 0 })}
+                  className="h-7 text-xs sm:h-8 sm:text-sm"
+                  min="0"
+                />
+              </div>
+
+              {/* 🆕 이 그룹의 항목 표시 설정 */}
+              <Collapsible
+                open={expandedDisplayItems[group.id] ?? false}
+                onOpenChange={(open) => setExpandedDisplayItems(prev => ({ ...prev, [group.id]: open }))}
+              >
+                <div className="rounded-lg border-2 border-dashed border-primary/30 bg-primary/5 p-2">
+                  <CollapsibleTrigger asChild>
+                    <Button variant="ghost" size="sm" className="h-auto w-full justify-start p-1 hover:bg-transparent">
+                      <div className="flex items-center gap-1">
+                        {expandedDisplayItems[group.id] ? (
+                          <ChevronDown className="h-3 w-3" />
+                        ) : (
+                          <ChevronRight className="h-3 w-3" />
+                        )}
+                        <Label className="text-[10px] font-semibold sm:text-xs cursor-pointer">
+                          항목 표시 설정 ({(group.displayItems || []).length}개)
+                        </Label>
+                      </div>
+                    </Button>
+                  </CollapsibleTrigger>
+                
+                <CollapsibleContent className="space-y-2 mt-2">
+                  {/* 추가 버튼들 */}
+                  <div className="flex gap-1 flex-wrap">
+                    <Button
+                      type="button"
+                      size="sm"
+                      variant="outline"
+                      onClick={() => addDisplayItemToGroup(group.id, "icon")}
+                      className="h-5 px-1.5 text-[8px] sm:h-6 sm:px-2 sm:text-[10px]"
+                    >
+                      <Plus className="mr-0.5 h-2.5 w-2.5 sm:mr-1 sm:h-3 sm:w-3" />
+                      아이콘
+                    </Button>
+                    <Button
+                      type="button"
+                      size="sm"
+                      variant="outline"
+                      onClick={() => addDisplayItemToGroup(group.id, "field")}
+                      className="h-5 px-1.5 text-[8px] sm:h-6 sm:px-2 sm:text-[10px]"
+                    >
+                      <Plus className="mr-0.5 h-2.5 w-2.5 sm:mr-1 sm:h-3 sm:w-3" />
+                      필드
+                    </Button>
+                    <Button
+                      type="button"
+                      size="sm"
+                      variant="outline"
+                      onClick={() => addDisplayItemToGroup(group.id, "text")}
+                      className="h-5 px-1.5 text-[8px] sm:h-6 sm:px-2 sm:text-[10px]"
+                    >
+                      <Plus className="mr-0.5 h-2.5 w-2.5 sm:mr-1 sm:h-3 sm:w-3" />
+                      텍스트
+                    </Button>
+                  </div>
+
+                  <p className="text-[9px] text-muted-foreground sm:text-[10px]">
+                    이 그룹의 입력 항목이 추가되면 어떻게 표시될지 설정
+                  </p>
+
+                  {(!group.displayItems || group.displayItems.length === 0) ? (
+                  <div className="rounded border border-dashed p-2 text-center text-[10px] text-muted-foreground">
+                    미설정 (모든 필드를 " / "로 구분하여 표시)
+                  </div>
+                ) : (
+                  <div className="space-y-1">
+                    {group.displayItems.map((item, itemIndex) => (
+                      <div key={item.id} className="rounded border bg-card p-2 space-y-1">
+                        {/* 헤더 */}
+                        <div className="flex items-center justify-between">
+                          <span className="text-[9px] font-medium sm:text-[10px]">
+                            {item.type === "icon" && "🎨"}
+                            {item.type === "field" && "📝"}
+                            {item.type === "text" && "💬"}
+                            {item.type === "badge" && "🏷️"}
+                          </span>
+                          <Button
+                            type="button"
+                            variant="ghost"
+                            size="sm"
+                            onClick={() => removeDisplayItemFromGroup(group.id, itemIndex)}
+                            className="h-4 w-4 p-0"
+                          >
+                            <X className="h-2 w-2" />
+                          </Button>
+                        </div>
+
+                        {/* 아이콘 설정 */}
+                        {item.type === "icon" && (
+                          <Input
+                            value={item.icon || ""}
+                            onChange={(e) => updateDisplayItemInGroup(group.id, itemIndex, { icon: e.target.value })}
+                            placeholder="Building"
+                            className="h-6 text-[9px] sm:text-[10px]"
+                          />
+                        )}
+
+                        {/* 텍스트 설정 */}
+                        {item.type === "text" && (
+                          <Input
+                            value={item.value || ""}
+                            onChange={(e) => updateDisplayItemInGroup(group.id, itemIndex, { value: e.target.value })}
+                            placeholder="| , / , -"
+                            className="h-6 text-[9px] sm:text-[10px]"
+                          />
+                        )}
+
+                        {/* 필드 설정 */}
+                        {item.type === "field" && (
+                          <div className="space-y-1">
+                            {/* 필드 선택 */}
+                            <Select
+                              value={item.fieldName || ""}
+                              onValueChange={(value) => updateDisplayItemInGroup(group.id, itemIndex, { fieldName: value })}
+                            >
+                              <SelectTrigger className="h-6 w-full text-[9px] sm:text-[10px]">
+                                <SelectValue placeholder="필드 선택" />
+                              </SelectTrigger>
+                              <SelectContent>
+                                {localFields.filter(f => f.groupId === group.id).map((field) => (
+                                  <SelectItem key={field.name} value={field.name} className="text-[9px] sm:text-[10px]">
+                                    {field.label || field.name}
+                                  </SelectItem>
+                                ))}
+                              </SelectContent>
+                            </Select>
+
+                            {/* 라벨 */}
+                            <Input
+                              value={item.label || ""}
+                              onChange={(e) => updateDisplayItemInGroup(group.id, itemIndex, { label: e.target.value })}
+                              placeholder="라벨 (예: 거래처:)"
+                              className="h-6 w-full text-[9px] sm:text-[10px]"
+                            />
+
+                            {/* 표시 형식 */}
+                            <Select
+                              value={item.format || "text"}
+                              onValueChange={(value) => updateDisplayItemInGroup(group.id, itemIndex, { format: value as DisplayFieldFormat })}
+                            >
+                              <SelectTrigger className="h-6 w-full text-[9px] sm:text-[10px]">
+                                <SelectValue />
+                              </SelectTrigger>
+                              <SelectContent>
+                                <SelectItem value="text" className="text-[9px] sm:text-[10px]">텍스트</SelectItem>
+                                <SelectItem value="currency" className="text-[9px] sm:text-[10px]">금액</SelectItem>
+                                <SelectItem value="number" className="text-[9px] sm:text-[10px]">숫자</SelectItem>
+                                <SelectItem value="date" className="text-[9px] sm:text-[10px]">날짜</SelectItem>
+                                <SelectItem value="badge" className="text-[9px] sm:text-[10px]">배지</SelectItem>
+                              </SelectContent>
+                            </Select>
+
+                            {/* 빈 값 처리 */}
+                            <Select
+                              value={item.emptyBehavior || "default"}
+                              onValueChange={(value) => updateDisplayItemInGroup(group.id, itemIndex, { emptyBehavior: value as EmptyBehavior })}
+                            >
+                              <SelectTrigger className="h-6 w-full text-[9px] sm:text-[10px]">
+                                <SelectValue />
+                              </SelectTrigger>
+                              <SelectContent>
+                                <SelectItem value="hide" className="text-[9px] sm:text-[10px]">숨김</SelectItem>
+                                <SelectItem value="default" className="text-[9px] sm:text-[10px]">기본값</SelectItem>
+                                <SelectItem value="blank" className="text-[9px] sm:text-[10px]">빈칸</SelectItem>
+                              </SelectContent>
+                            </Select>
+
+                            {/* 기본값 */}
+                            {item.emptyBehavior === "default" && (
+                              <Input
+                                value={item.defaultValue || ""}
+                                onChange={(e) => updateDisplayItemInGroup(group.id, itemIndex, { defaultValue: e.target.value })}
+                                placeholder="미입력"
+                                className="h-6 w-full text-[9px] sm:text-[10px]"
+                              />
+                            )}
+                          </div>
+                        )}
+                      </div>
+                    ))}
+                  </div>
+                  )}
+                  </CollapsibleContent>
+                  </div>
+                </Collapsible>
+                </CollapsibleContent>
+              </CardContent>
+            </Card>
+          </Collapsible>
+          );
+        })}
+
+        <Button
+          type="button"
+          variant="outline"
+          size="sm"
+          onClick={addFieldGroup}
+          className="h-7 w-full border-dashed text-xs sm:text-sm"
+        >
+          <Plus className="mr-1 h-3 w-3 sm:mr-2 sm:h-4 sm:w-4" />
+          그룹 추가
+        </Button>
+        
+        {localFieldGroups.length > 0 && (
+          <p className="text-[10px] text-amber-600 sm:text-xs">
+            💡 추가 입력 필드의 "필드 그룹 ID"에 위에서 정의한 그룹 ID를 입력하세요
+          </p>
+        )}
+      </div>
+
+      {/* 입력 모드 설정 */}
+      <div className="space-y-2">
+        <Label className="text-xs font-semibold sm:text-sm">입력 모드</Label>
+        <Select
+          value={config.inputMode || "inline"}
+          onValueChange={(value) => handleChange("inputMode", value as "inline" | "modal")}
+        >
+          <SelectTrigger className="h-7 text-xs sm:h-8 sm:text-sm">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="inline" className="text-xs sm:text-sm">
+              항상 표시 (Inline)
+            </SelectItem>
+            <SelectItem value="modal" className="text-xs sm:text-sm">
+              추가 버튼으로 표시 (Modal)
+            </SelectItem>
+          </SelectContent>
+        </Select>
+        <p className="text-[10px] text-muted-foreground sm:text-xs">
+          {config.inputMode === "modal" 
+            ? "추가 버튼 클릭 시 입력창 표시, 완료 후 작은 카드로 표시" 
+            : "모든 항목의 입력창을 항상 표시"}
+        </p>
+      </div>
+
+      {/* 레이아웃 설정 */}
+      <div className="space-y-2">
+        <Label className="text-xs font-semibold sm:text-sm">레이아웃</Label>
+        <Select
+          value={config.layout || "grid"}
+          onValueChange={(value) => handleChange("layout", value as "grid" | "card")}
+        >
+          <SelectTrigger className="h-7 text-xs sm:h-8 sm:text-sm">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="grid" className="text-xs sm:text-sm">
+              테이블 형식 (Grid)
+            </SelectItem>
+            <SelectItem value="card" className="text-xs sm:text-sm">
+              카드 형식 (Card)
+            </SelectItem>
+          </SelectContent>
+        </Select>
+        <p className="text-[10px] text-muted-foreground sm:text-xs">
+          {config.layout === "grid" ? "행 단위로 데이터를 표시합니다" : "각 항목을 카드로 표시합니다"}
+        </p>
+      </div>
+
+      {/* 자동 계산 설정 */}
+      <div className="space-y-3 rounded-lg border p-3 sm:p-4">
+        <div className="flex items-center justify-between">
+          <Label className="text-xs font-semibold sm:text-sm">자동 계산 설정</Label>
+            <Checkbox
+              id="enable-auto-calc"
+              checked={!!config.autoCalculation}
+              onCheckedChange={(checked) => {
+                if (checked) {
+                  handleChange("autoCalculation", {
+                    targetField: "",
+                    mode: "template",
+                    inputFields: {
+                      basePrice: "",
+                      discountType: "",
+                      discountValue: "",
+                      roundingType: "",
+                      roundingUnit: "",
+                    },
+                    calculationType: "price",
+                    valueMapping: {},
+                    calculationSteps: [],
+                  });
+                } else {
+                  handleChange("autoCalculation", undefined);
+                }
+              }}
+            />
+        </div>
+
+        {config.autoCalculation && (
+          <div className="space-y-2 border-t pt-2">
+            {/* 계산 모드 선택 */}
+            <div className="space-y-1">
+              <Label className="text-[10px] sm:text-xs">계산 방식</Label>
+              <Select
+                value={config.autoCalculation.mode || "template"}
+                onValueChange={(value: "template" | "custom") => {
+                  handleChange("autoCalculation", {
+                    ...config.autoCalculation,
+                    mode: value,
+                  });
+                }}
+              >
+                <SelectTrigger className="h-8 text-xs">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="template">템플릿 (가격 계산)</SelectItem>
+                  <SelectItem value="custom">커스텀 (계산식 빌더)</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+
+            {/* 템플릿 모드 */}
+            {config.autoCalculation.mode === "template" && (
+              <>
+                {/* 계산 필드 선택 */}
+                <div className="space-y-2 border-t pt-2 mt-2">
+              <Label className="text-[10px] font-semibold sm:text-xs">계산에 사용할 필드 선택</Label>
+              
+              <div className="space-y-2">
+                {/* 계산 결과 필드 */}
+                <div className="space-y-1">
+                  <Label className="text-[9px] sm:text-[10px]">계산 결과 필드</Label>
+                  <Select
+                    value={config.autoCalculation.targetField || ""}
+                    onValueChange={(value) => handleChange("autoCalculation", {
+                      ...config.autoCalculation,
+                      targetField: value,
+                    })}
+                  >
+                    <SelectTrigger className="h-7 text-xs">
+                      <SelectValue placeholder="필드 선택" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {(config.additionalFields || []).map((field) => (
+                        <SelectItem key={field.name} value={field.name}>
+                          {field.label || field.name}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+
+                {/* 기준 단가 필드 */}
+                <div className="space-y-1">
+                  <Label className="text-[9px] sm:text-[10px]">기준 단가 필드</Label>
+                  <Select
+                    value={config.autoCalculation.inputFields?.basePrice || ""}
+                    onValueChange={(value) => handleChange("autoCalculation", {
+                      ...config.autoCalculation,
+                      inputFields: {
+                        ...config.autoCalculation.inputFields,
+                        basePrice: value,
+                      },
+                    })}
+                  >
+                    <SelectTrigger className="h-7 text-xs">
+                      <SelectValue placeholder="필드 선택" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {(config.additionalFields || []).map((field) => (
+                        <SelectItem key={field.name} value={field.name}>
+                          {field.label || field.name}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+
+                <div className="grid grid-cols-2 gap-2">
+                  {/* 할인 방식 필드 */}
+                  <div className="space-y-1">
+                    <Label className="text-[9px] sm:text-[10px]">할인 방식</Label>
+                    <Select
+                      value={config.autoCalculation.inputFields?.discountType || ""}
+                      onValueChange={(value) => handleChange("autoCalculation", {
+                        ...config.autoCalculation,
+                        inputFields: {
+                          ...config.autoCalculation.inputFields,
+                          discountType: value,
+                        },
+                      })}
+                    >
+                      <SelectTrigger className="h-7 text-xs">
+                        <SelectValue placeholder="필드 선택" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {(config.additionalFields || []).map((field) => (
+                          <SelectItem key={field.name} value={field.name}>
+                            {field.label || field.name}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+
+                  {/* 할인값 필드 */}
+                  <div className="space-y-1">
+                    <Label className="text-[9px] sm:text-[10px]">할인값</Label>
+                    <Select
+                      value={config.autoCalculation.inputFields?.discountValue || ""}
+                      onValueChange={(value) => handleChange("autoCalculation", {
+                        ...config.autoCalculation,
+                        inputFields: {
+                          ...config.autoCalculation.inputFields,
+                          discountValue: value,
+                        },
+                      })}
+                    >
+                      <SelectTrigger className="h-7 text-xs">
+                        <SelectValue placeholder="필드 선택" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {(config.additionalFields || []).map((field) => (
+                          <SelectItem key={field.name} value={field.name}>
+                            {field.label || field.name}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                </div>
+
+                <div className="grid grid-cols-2 gap-2">
+                  {/* 반올림 방식 필드 */}
+                  <div className="space-y-1">
+                    <Label className="text-[9px] sm:text-[10px]">반올림 방식</Label>
+                    <Select
+                      value={config.autoCalculation.inputFields?.roundingType || ""}
+                      onValueChange={(value) => handleChange("autoCalculation", {
+                        ...config.autoCalculation,
+                        inputFields: {
+                          ...config.autoCalculation.inputFields,
+                          roundingType: value,
+                        },
+                      })}
+                    >
+                      <SelectTrigger className="h-7 text-xs">
+                        <SelectValue placeholder="필드 선택" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {(config.additionalFields || []).map((field) => (
+                          <SelectItem key={field.name} value={field.name}>
+                            {field.label || field.name}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+
+                  {/* 반올림 단위 필드 */}
+                  <div className="space-y-1">
+                    <Label className="text-[9px] sm:text-[10px]">반올림 단위</Label>
+                    <Select
+                      value={config.autoCalculation.inputFields?.roundingUnit || ""}
+                      onValueChange={(value) => handleChange("autoCalculation", {
+                        ...config.autoCalculation,
+                        inputFields: {
+                          ...config.autoCalculation.inputFields,
+                          roundingUnit: value,
+                        },
+                      })}
+                    >
+                      <SelectTrigger className="h-7 text-xs">
+                        <SelectValue placeholder="필드 선택" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {(config.additionalFields || []).map((field) => (
+                          <SelectItem key={field.name} value={field.name}>
+                            {field.label || field.name}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            {/* 카테고리 값 매핑 */}
+            <div className="space-y-3 border-t pt-3 mt-3">
+              <Label className="text-[10px] font-semibold sm:text-xs">카테고리 값 매핑</Label>
+              
+              {/* 할인 방식 매핑 */}
+              <Collapsible>
+                <CollapsibleTrigger asChild>
+                  <Button
+                    variant="ghost"
+                    className="flex w-full items-center justify-between p-2 hover:bg-muted"
+                  >
+                    <span className="text-xs font-medium">할인 방식 연산 매핑</span>
+                    <ChevronDown className="h-4 w-4" />
+                  </Button>
+                </CollapsibleTrigger>
+                <CollapsibleContent className="space-y-2 pt-2">
+                  {/* 1단계: 메뉴 선택 */}
+                  <div className="space-y-1">
+                    <Label className="text-[9px] sm:text-[10px]">1단계: 메뉴 선택</Label>
+                    <Select
+                      value={String((config.autoCalculation.valueMapping as any)?._selectedMenus?.discountType || "")}
+                      onValueChange={(value) => handleMenuSelect(Number(value), "discountType")}
+                    >
+                      <SelectTrigger className="h-7 text-xs">
+                        <SelectValue placeholder="2레벨 메뉴 선택" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {secondLevelMenus.map((menu) => (
+                          <SelectItem key={menu.menuObjid} value={String(menu.menuObjid)}>
+                            {menu.parentMenuName} &gt; {menu.menuName}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+
+                  {/* 2단계: 카테고리 선택 */}
+                  {(config.autoCalculation.valueMapping as any)?._selectedMenus?.discountType && (
+                    <div className="space-y-1">
+                      <Label className="text-[9px] sm:text-[10px]">2단계: 카테고리 선택</Label>
+                      <Select
+                        value={(config.autoCalculation.valueMapping as any)?._selectedCategories?.discountType || ""}
+                        onValueChange={(value) => handleCategorySelect(
+                          value,
+                          (config.autoCalculation.valueMapping as any)._selectedMenus.discountType,
+                          "discountType"
+                        )}
+                      >
+                        <SelectTrigger className="h-7 text-xs">
+                          <SelectValue placeholder="카테고리 선택" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {(categoryColumns.discountType || []).map((col: any) => (
+                            <SelectItem key={col.columnName} value={col.columnName}>
+                              {col.columnLabel || col.columnName}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    </div>
+                  )}
+
+                  {/* 3단계: 값 매핑 */}
+                  {(config.autoCalculation.valueMapping as any)?._selectedCategories?.discountType && (
+                    <div className="space-y-1">
+                      <Label className="text-[9px] sm:text-[10px]">3단계: 카테고리 값 → 연산 매핑</Label>
+                      {["할인없음", "할인율(%)", "할인금액"].map((label, idx) => {
+                        const operations = ["none", "rate", "amount"];
+                        return (
+                          <div key={label} className="flex items-center gap-2">
+                            <span className="text-xs w-20">{label}</span>
+                            <span className="text-xs text-muted-foreground">→</span>
+                            <Select
+                              value={
+                                Object.entries(config.autoCalculation.valueMapping?.discountType || {})
+                                  .find(([_, op]) => op === operations[idx])?.[0] || ""
+                              }
+                              onValueChange={(value) => {
+                                const newMapping = { ...config.autoCalculation.valueMapping?.discountType };
+                                Object.keys(newMapping).forEach(key => {
+                                  if (newMapping[key] === operations[idx]) delete newMapping[key];
+                                });
+                                if (value) {
+                                  newMapping[value] = operations[idx];
+                                }
+                                handleChange("autoCalculation", {
+                                  ...config.autoCalculation,
+                                  valueMapping: {
+                                    ...config.autoCalculation.valueMapping,
+                                    discountType: newMapping,
+                                  },
+                                });
+                              }}
+                            >
+                              <SelectTrigger className="h-7 flex-1 text-xs">
+                                <SelectValue placeholder="값 선택" />
+                              </SelectTrigger>
+                              <SelectContent>
+                                {(categoryValues.discountType || []).map((val: any) => (
+                                  <SelectItem key={val.valueCode} value={val.valueCode}>
+                                    {val.valueLabel}
+                                  </SelectItem>
+                                ))}
+                              </SelectContent>
+                            </Select>
+                            <span className="text-[10px] text-muted-foreground w-12">{operations[idx]}</span>
+                          </div>
+                        );
+                      })}
+                    </div>
+                  )}
+                </CollapsibleContent>
+              </Collapsible>
+
+              {/* 반올림 방식 매핑 */}
+              <Collapsible>
+                <CollapsibleTrigger asChild>
+                  <Button
+                    variant="ghost"
+                    className="flex w-full items-center justify-between p-2 hover:bg-muted"
+                  >
+                    <span className="text-xs font-medium">반올림 방식 연산 매핑</span>
+                    <ChevronDown className="h-4 w-4" />
+                  </Button>
+                </CollapsibleTrigger>
+                <CollapsibleContent className="space-y-2 pt-2">
+                  {/* 1단계: 메뉴 선택 */}
+                  <div className="space-y-1">
+                    <Label className="text-[9px] sm:text-[10px]">1단계: 메뉴 선택</Label>
+                    <Select
+                      value={String((config.autoCalculation.valueMapping as any)?._selectedMenus?.roundingType || "")}
+                      onValueChange={(value) => handleMenuSelect(Number(value), "roundingType")}
+                    >
+                      <SelectTrigger className="h-7 text-xs">
+                        <SelectValue placeholder="2레벨 메뉴 선택" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {secondLevelMenus.map((menu) => (
+                          <SelectItem key={menu.menuObjid} value={String(menu.menuObjid)}>
+                            {menu.parentMenuName} &gt; {menu.menuName}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+
+                  {/* 2단계: 카테고리 선택 */}
+                  {(config.autoCalculation.valueMapping as any)?._selectedMenus?.roundingType && (
+                    <div className="space-y-1">
+                      <Label className="text-[9px] sm:text-[10px]">2단계: 카테고리 선택</Label>
+                      <Select
+                        value={(config.autoCalculation.valueMapping as any)?._selectedCategories?.roundingType || ""}
+                        onValueChange={(value) => handleCategorySelect(
+                          value,
+                          (config.autoCalculation.valueMapping as any)._selectedMenus.roundingType,
+                          "roundingType"
+                        )}
+                      >
+                        <SelectTrigger className="h-7 text-xs">
+                          <SelectValue placeholder="카테고리 선택" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {(categoryColumns.roundingType || []).map((col: any) => (
+                            <SelectItem key={col.columnName} value={col.columnName}>
+                              {col.columnLabel || col.columnName}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    </div>
+                  )}
+
+                  {/* 3단계: 값 매핑 */}
+                  {(config.autoCalculation.valueMapping as any)?._selectedCategories?.roundingType && (
+                    <div className="space-y-1">
+                      <Label className="text-[9px] sm:text-[10px]">3단계: 카테고리 값 → 연산 매핑</Label>
+                      {["반올림없음", "반올림", "절삭", "올림"].map((label, idx) => {
+                        const operations = ["none", "round", "floor", "ceil"];
+                        return (
+                          <div key={label} className="flex items-center gap-2">
+                            <span className="text-xs w-20">{label}</span>
+                            <span className="text-xs text-muted-foreground">→</span>
+                            <Select
+                              value={
+                                Object.entries(config.autoCalculation.valueMapping?.roundingType || {})
+                                  .find(([_, op]) => op === operations[idx])?.[0] || ""
+                              }
+                              onValueChange={(value) => {
+                                const newMapping = { ...config.autoCalculation.valueMapping?.roundingType };
+                                Object.keys(newMapping).forEach(key => {
+                                  if (newMapping[key] === operations[idx]) delete newMapping[key];
+                                });
+                                if (value) {
+                                  newMapping[value] = operations[idx];
+                                }
+                                handleChange("autoCalculation", {
+                                  ...config.autoCalculation,
+                                  valueMapping: {
+                                    ...config.autoCalculation.valueMapping,
+                                    roundingType: newMapping,
+                                  },
+                                });
+                              }}
+                            >
+                              <SelectTrigger className="h-7 flex-1 text-xs">
+                                <SelectValue placeholder="값 선택" />
+                              </SelectTrigger>
+                              <SelectContent>
+                                {(categoryValues.roundingType || []).map((val: any) => (
+                                  <SelectItem key={val.valueCode} value={val.valueCode}>
+                                    {val.valueLabel}
+                                  </SelectItem>
+                                ))}
+                              </SelectContent>
+                            </Select>
+                            <span className="text-[10px] text-muted-foreground w-12">{operations[idx]}</span>
+                          </div>
+                        );
+                      })}
+                    </div>
+                  )}
+                </CollapsibleContent>
+              </Collapsible>
+
+              {/* 반올림 단위 매핑 */}
+              <Collapsible>
+                <CollapsibleTrigger asChild>
+                  <Button
+                    variant="ghost"
+                    className="flex w-full items-center justify-between p-2 hover:bg-muted"
+                  >
+                    <span className="text-xs font-medium">반올림 단위 값 매핑</span>
+                    <ChevronDown className="h-4 w-4" />
+                  </Button>
+                </CollapsibleTrigger>
+                <CollapsibleContent className="space-y-2 pt-2">
+                  {/* 1단계: 메뉴 선택 */}
+                  <div className="space-y-1">
+                    <Label className="text-[9px] sm:text-[10px]">1단계: 메뉴 선택</Label>
+                    <Select
+                      value={String((config.autoCalculation.valueMapping as any)?._selectedMenus?.roundingUnit || "")}
+                      onValueChange={(value) => handleMenuSelect(Number(value), "roundingUnit")}
+                    >
+                      <SelectTrigger className="h-7 text-xs">
+                        <SelectValue placeholder="2레벨 메뉴 선택" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {secondLevelMenus.map((menu) => (
+                          <SelectItem key={menu.menuObjid} value={String(menu.menuObjid)}>
+                            {menu.parentMenuName} &gt; {menu.menuName}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+
+                  {/* 2단계: 카테고리 선택 */}
+                  {(config.autoCalculation.valueMapping as any)?._selectedMenus?.roundingUnit && (
+                    <div className="space-y-1">
+                      <Label className="text-[9px] sm:text-[10px]">2단계: 카테고리 선택</Label>
+                      <Select
+                        value={(config.autoCalculation.valueMapping as any)?._selectedCategories?.roundingUnit || ""}
+                        onValueChange={(value) => handleCategorySelect(
+                          value,
+                          (config.autoCalculation.valueMapping as any)._selectedMenus.roundingUnit,
+                          "roundingUnit"
+                        )}
+                      >
+                        <SelectTrigger className="h-7 text-xs">
+                          <SelectValue placeholder="카테고리 선택" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {(categoryColumns.roundingUnit || []).map((col: any) => (
+                            <SelectItem key={col.columnName} value={col.columnName}>
+                              {col.columnLabel || col.columnName}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    </div>
+                  )}
+
+                  {/* 3단계: 값 매핑 */}
+                  {(config.autoCalculation.valueMapping as any)?._selectedCategories?.roundingUnit && (
+                    <div className="space-y-1">
+                      <Label className="text-[9px] sm:text-[10px]">3단계: 카테고리 값 → 단위 값 매핑</Label>
+                      {["1원", "10원", "100원", "1,000원"].map((label) => {
+                        const unitValue = label === "1,000원" ? 1000 : parseInt(label);
+                        return (
+                          <div key={label} className="flex items-center gap-2">
+                            <span className="text-xs w-20">{label}</span>
+                            <span className="text-xs text-muted-foreground">→</span>
+                            <Select
+                              value={
+                                Object.entries(config.autoCalculation.valueMapping?.roundingUnit || {})
+                                  .find(([_, val]) => val === unitValue)?.[0] || ""
+                              }
+                              onValueChange={(value) => {
+                                const newMapping = { ...config.autoCalculation.valueMapping?.roundingUnit };
+                                Object.keys(newMapping).forEach(key => {
+                                  if (newMapping[key] === unitValue) delete newMapping[key];
+                                });
+                                if (value) {
+                                  newMapping[value] = unitValue;
+                                }
+                                handleChange("autoCalculation", {
+                                  ...config.autoCalculation,
+                                  valueMapping: {
+                                    ...config.autoCalculation.valueMapping,
+                                    roundingUnit: newMapping,
+                                  },
+                                });
+                              }}
+                            >
+                              <SelectTrigger className="h-7 flex-1 text-xs">
+                                <SelectValue placeholder="값 선택" />
+                              </SelectTrigger>
+                              <SelectContent>
+                                {(categoryValues.roundingUnit || []).map((val: any) => (
+                                  <SelectItem key={val.valueCode} value={val.valueCode}>
+                                    {val.valueLabel}
+                                  </SelectItem>
+                                ))}
+                              </SelectContent>
+                            </Select>
+                            <span className="text-[10px] text-muted-foreground w-12">{unitValue}</span>
+                          </div>
+                        );
+                      })}
+                    </div>
+                  )}
+                </CollapsibleContent>
+              </Collapsible>
+
+              <p className="text-[9px] text-muted-foreground sm:text-[10px]">
+                💡 1단계: 메뉴 선택 → 2단계: 카테고리 선택 → 3단계: 값 매핑
+              </p>
+            </div>
+              </>
+            )}
+
+            {/* 커스텀 모드 (계산식 빌더) */}
+            {config.autoCalculation.mode === "custom" && (
+              <div className="space-y-2 border-t pt-2 mt-2">
+                <CalculationBuilder
+                  steps={config.autoCalculation.calculationSteps || []}
+                  availableFields={config.additionalFields || []}
+                  onChange={(steps) => {
+                    handleChange("autoCalculation", {
+                      ...config.autoCalculation,
+                      calculationSteps: steps,
+                    });
+                  }}
+                />
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+
+      {/* 옵션 */}
+      <div className="space-y-2 rounded-lg border p-3 sm:p-4">
+        <div className="flex items-center space-x-2">
+          <Checkbox
+            id="show-index"
+            checked={config.showIndex ?? true}
+            onCheckedChange={(checked) => handleChange("showIndex", checked as boolean)}
+          />
+          <Label htmlFor="show-index" className="cursor-pointer text-[10px] font-normal sm:text-xs">
+            항목 번호 표시
+          </Label>
+        </div>
+
+        <div className="flex items-center space-x-2">
+          <Checkbox
+            id="allow-remove"
+            checked={config.allowRemove ?? false}
+            onCheckedChange={(checked) => handleChange("allowRemove", checked as boolean)}
+          />
+          <Label htmlFor="allow-remove" className="cursor-pointer text-[10px] font-normal sm:text-xs">
+            항목 삭제 허용
+          </Label>
+        </div>
+
+        <div className="flex items-center space-x-2">
+          <Checkbox
+            id="disabled"
+            checked={config.disabled ?? false}
+            onCheckedChange={(checked) => handleChange("disabled", checked as boolean)}
+          />
+          <Label htmlFor="disabled" className="cursor-pointer text-[10px] font-normal sm:text-xs">
+            비활성화 (읽기 전용)
+          </Label>
+        </div>
+      </div>
+
+      {/* 🆕 부모 데이터 매핑 */}
+      <div className="space-y-2">
+        <div className="flex items-center justify-between">
+          <Label className="text-xs font-semibold sm:text-sm">부모 데이터 매핑</Label>
+            <Button
+              size="sm"
+              variant="outline"
+              className="h-7 text-xs"
+              onClick={() => {
+                const newMapping = {
+                  sourceTable: "", // 사용자가 선택
+                  sourceField: "",
+                  targetField: "",
+                  defaultValue: undefined,
+                };
+                handleChange("parentDataMapping", [
+                  ...(config.parentDataMapping || []),
+                  newMapping,
+                ]);
+              }}
+            >
+              <Plus className="mr-1 h-3 w-3" />
+              추가
+            </Button>
+        </div>
+
+        <p className="text-[9px] text-muted-foreground sm:text-[10px]">
+          이전 화면(거래처 선택 등)에서 넘어온 데이터를 자동으로 매핑합니다.
+        </p>
+
+        <div className="space-y-2">
+          {(config.parentDataMapping || []).map((mapping, index) => (
+            <Card key={index} className="p-3">
+              <div className="space-y-2">
+                {/* 소스 테이블 선택 */}
+                <div className="space-y-1">
+                  <Label className="text-[9px] sm:text-[10px]">소스 테이블</Label>
+                  <Popover>
+                    <PopoverTrigger asChild>
+                      <Button
+                        variant="outline"
+                        role="combobox"
+                        className="h-7 w-full justify-between text-xs font-normal"
+                      >
+                        {mapping.sourceTable
+                          ? allTables.find((t) => t.tableName === mapping.sourceTable)?.displayName ||
+                            mapping.sourceTable
+                          : "테이블 선택"}
+                        <ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
+                      </Button>
+                    </PopoverTrigger>
+                    <PopoverContent className="w-[300px] p-0" align="start">
+                      <Command>
+                        <CommandInput placeholder="테이블 검색..." className="h-8 text-xs" />
+                        <CommandList>
+                          <CommandEmpty className="text-xs">테이블을 찾을 수 없습니다.</CommandEmpty>
+                          <CommandGroup>
+                            {allTables.map((table) => (
+                              <CommandItem
+                                key={table.tableName}
+                                value={table.tableName}
+                                onSelect={(currentValue) => {
+                                  const updated = [...(config.parentDataMapping || [])];
+                                  updated[index] = {
+                                    ...updated[index],
+                                    sourceTable: currentValue,
+                                    sourceField: "", // 테이블 변경 시 필드 초기화
+                                  };
+                                  handleChange("parentDataMapping", updated);
+
+                                  // 테이블 선택 시 컬럼 로드
+                                  if (currentValue) {
+                                    loadMappingSourceColumns(currentValue, index);
+                                  }
+                                }}
+                                className="text-xs"
+                              >
+                                <Check
+                                  className={cn(
+                                    "mr-2 h-3 w-3",
+                                    mapping.sourceTable === table.tableName ? "opacity-100" : "opacity-0"
+                                  )}
+                                />
+                                {table.displayName || table.tableName}
+                              </CommandItem>
+                            ))}
+                          </CommandGroup>
+                        </CommandList>
+                      </Command>
+                    </PopoverContent>
+                  </Popover>
+                  <p className="text-[8px] text-muted-foreground">
+                    품목, 거래처, 사용자 등 데이터를 가져올 테이블을 선택하세요
+                  </p>
+                </div>
+
+                {/* 원본 필드 */}
+                <div className="space-y-1">
+                  <Label className="text-[9px] sm:text-[10px]">원본 필드</Label>
+                  <Popover>
+                    <PopoverTrigger asChild>
+                      <Button
+                        variant="outline"
+                        role="combobox"
+                        className="h-7 w-full justify-between text-xs font-normal"
+                        disabled={!mapping.sourceTable}
+                      >
+                        {mapping.sourceField
+                          ? mappingSourceColumns[index]?.find((c) => c.columnName === mapping.sourceField)
+                              ?.columnLabel || mapping.sourceField
+                          : "컬럼 선택"}
+                        <ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
+                      </Button>
+                    </PopoverTrigger>
+                    <PopoverContent className="w-[300px] p-0" align="start">
+                      <Command>
+                        <CommandInput placeholder="컬럼 검색..." className="h-8 text-xs" />
+                        <CommandList>
+                          {!mapping.sourceTable ? (
+                            <CommandEmpty className="text-xs">소스 테이블을 먼저 선택하세요</CommandEmpty>
+                          ) : !mappingSourceColumns[index] || mappingSourceColumns[index].length === 0 ? (
+                            <CommandEmpty className="text-xs">컬럼 로딩 중...</CommandEmpty>
+                          ) : (
+                            <>
+                              <CommandEmpty className="text-xs">컬럼을 찾을 수 없습니다.</CommandEmpty>
+                              <CommandGroup>
+                                {mappingSourceColumns[index].map((col) => {
+                                  const searchValue = `${col.columnLabel || col.columnName} ${col.columnName} ${col.dataType || ""}`.toLowerCase();
+                                  return (
+                                    <CommandItem
+                                      key={col.columnName}
+                                      value={searchValue}
+                                      onSelect={() => {
+                                        const updated = [...(config.parentDataMapping || [])];
+                                        updated[index] = { ...updated[index], sourceField: col.columnName };
+                                        handleChange("parentDataMapping", updated);
+                                      }}
+                                      className="text-xs"
+                                    >
+                                      <Check
+                                        className={cn(
+                                          "mr-2 h-3 w-3",
+                                          mapping.sourceField === col.columnName ? "opacity-100" : "opacity-0"
+                                        )}
+                                      />
+                                      <div className="flex flex-col">
+                                        <span>{col.columnLabel || col.columnName}</span>
+                                        {col.dataType && (
+                                          <span className="text-[10px] text-muted-foreground">
+                                            {col.dataType}
+                                          </span>
+                                        )}
+                                      </div>
+                                    </CommandItem>
+                                  );
+                                })}
+                              </CommandGroup>
+                            </>
+                          )}
+                        </CommandList>
+                      </Command>
+                    </PopoverContent>
+                  </Popover>
+                </div>
+
+                {/* 저장 필드 (현재 화면 테이블 컬럼) */}
+                <div className="space-y-1">
+                  <Label className="text-[9px] sm:text-[10px]">저장 필드 (현재 테이블)</Label>
+                  <Popover>
+                    <PopoverTrigger asChild>
+                      <Button
+                        variant="outline"
+                        role="combobox"
+                        className="h-7 w-full justify-between text-xs font-normal"
+                        disabled={targetTableColumns.length === 0}
+                      >
+                        {mapping.targetField
+                          ? targetTableColumns.find((c) => c.columnName === mapping.targetField)?.columnLabel ||
+                            mapping.targetField
+                          : "저장 테이블 컬럼 선택"}
+                        <ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
+                      </Button>
+                    </PopoverTrigger>
+                    <PopoverContent className="w-[300px] p-0" align="start">
+                      <Command>
+                        <CommandInput placeholder="컬럼 검색..." className="h-8 text-xs" />
+                        <CommandList>
+                          {targetTableColumns.length === 0 ? (
+                            <CommandEmpty className="text-xs">저장 테이블을 먼저 선택하세요</CommandEmpty>
+                          ) : (
+                            <>
+                              <CommandEmpty className="text-xs">컬럼을 찾을 수 없습니다.</CommandEmpty>
+                              <CommandGroup>
+                                {targetTableColumns.map((col) => {
+                                  const searchValue = `${col.columnLabel || col.columnName} ${col.columnName} ${col.dataType || ""}`.toLowerCase();
+                                  return (
+                                    <CommandItem
+                                      key={col.columnName}
+                                      value={searchValue}
+                                      onSelect={() => {
+                                        const updated = [...(config.parentDataMapping || [])];
+                                        updated[index] = { ...updated[index], targetField: col.columnName };
+                                        handleChange("parentDataMapping", updated);
+                                      }}
+                                      className="text-xs"
+                                    >
+                                      <Check
+                                        className={cn(
+                                          "mr-2 h-3 w-3",
+                                          mapping.targetField === col.columnName ? "opacity-100" : "opacity-0"
+                                        )}
+                                      />
+                                      <div className="flex flex-col">
+                                        <span>{col.columnLabel || col.columnName}</span>
+                                        {col.dataType && (
+                                          <span className="text-[10px] text-muted-foreground">{col.dataType}</span>
+                                        )}
+                                      </div>
+                                    </CommandItem>
+                                  );
+                                })}
+                              </CommandGroup>
+                            </>
+                          )}
+                        </CommandList>
+                      </Command>
+                    </PopoverContent>
+                  </Popover>
+                </div>
+
+                {/* 기본값 (선택사항) */}
+                <div className="space-y-1">
+                  <Label className="text-[9px] sm:text-[10px]">기본값 (선택사항)</Label>
+                  <Input
+                    value={mapping.defaultValue || ""}
+                    onChange={(e) => {
+                      const updated = [...(config.parentDataMapping || [])];
+                      updated[index] = { ...updated[index], defaultValue: e.target.value };
+                      handleChange("parentDataMapping", updated);
+                    }}
+                    placeholder="값이 없을 때 사용할 기본값"
+                    className="h-7 text-xs"
+                  />
+                </div>
+
+                {/* 삭제 버튼 */}
+                <Button
+                  size="sm"
+                  variant="ghost"
+                  className="h-6 w-full text-xs text-destructive hover:text-destructive"
+                  onClick={() => {
+                    const updated = (config.parentDataMapping || []).filter((_, i) => i !== index);
+                    handleChange("parentDataMapping", updated);
+                  }}
+                >
+                  <X className="mr-1 h-3 w-3" />
+                  삭제
+                </Button>
+              </div>
+            </Card>
+          ))}
+        </div>
+
+        {(config.parentDataMapping || []).length === 0 && (
+          <p className="text-center text-[10px] text-muted-foreground py-4">
+            매핑 설정이 없습니다. "추가" 버튼을 클릭하여 설정하세요.
+          </p>
+        )}
+
+          {/* 예시 */}
+          <div className="rounded-lg bg-green-50 p-2 text-xs">
+            <p className="mb-1 text-[10px] font-medium text-green-900">💡 예시</p>
+            <div className="space-y-1 text-[9px] text-green-700">
+              <p><strong>매핑 1: 거래처 ID</strong></p>
+              <p className="ml-2">• 소스 테이블: <code className="bg-green-100 px-1">customer_mng</code></p>
+              <p className="ml-2">• 원본 필드: <code className="bg-green-100 px-1">id</code> → 저장 필드: <code className="bg-green-100 px-1">customer_id</code></p>
+              
+              <p className="mt-1"><strong>매핑 2: 품목 ID</strong></p>
+              <p className="ml-2">• 소스 테이블: <code className="bg-green-100 px-1">item_info</code></p>
+              <p className="ml-2">• 원본 필드: <code className="bg-green-100 px-1">id</code> → 저장 필드: <code className="bg-green-100 px-1">item_id</code></p>
+              
+              <p className="mt-1"><strong>매핑 3: 품목 기준단가</strong></p>
+              <p className="ml-2">• 소스 테이블: <code className="bg-green-100 px-1">item_info</code></p>
+              <p className="ml-2">• 원본 필드: <code className="bg-green-100 px-1">standard_price</code> → 저장 필드: <code className="bg-green-100 px-1">base_price</code></p>
+            </div>
+          </div>
+      </div>
+
+      {/* 사용 예시 */}
+      <div className="rounded-lg bg-blue-50 p-2 text-xs sm:p-3 sm:text-sm">
+        <p className="mb-1 font-medium text-blue-900">💡 사용 예시</p>
+        <ul className="space-y-1 text-[10px] text-blue-700 sm:text-xs">
+          <li>• 품목 선택 모달 → 다음 버튼 → 거래처별 가격 입력</li>
+          <li>• 사용자 선택 모달 → 다음 버튼 → 권한 및 부서 할당</li>
+          <li>• 제품 선택 모달 → 다음 버튼 → 수량 및 납기일 입력</li>
+        </ul>
+      </div>
+    </div>
+  );
+};
+
+SelectedItemsDetailInputConfigPanel.displayName = "SelectedItemsDetailInputConfigPanel";
diff --git a/frontend/lib/registry/components/selected-items-detail-input/SelectedItemsDetailInputRenderer.tsx b/frontend/lib/registry/components/selected-items-detail-input/SelectedItemsDetailInputRenderer.tsx
new file mode 100644
index 00000000..efc9ca83
--- /dev/null
+++ b/frontend/lib/registry/components/selected-items-detail-input/SelectedItemsDetailInputRenderer.tsx
@@ -0,0 +1,51 @@
+"use client";
+
+import React from "react";
+import { AutoRegisteringComponentRenderer } from "../../AutoRegisteringComponentRenderer";
+import { SelectedItemsDetailInputDefinition } from "./index";
+import { SelectedItemsDetailInputComponent } from "./SelectedItemsDetailInputComponent";
+
+/**
+ * SelectedItemsDetailInput 렌더러
+ * 자동 등록 시스템을 사용하여 컴포넌트를 레지스트리에 등록
+ */
+export class SelectedItemsDetailInputRenderer extends AutoRegisteringComponentRenderer {
+  static componentDefinition = SelectedItemsDetailInputDefinition;
+
+  render(): React.ReactElement {
+    return <SelectedItemsDetailInputComponent {...this.props} renderer={this} />;
+  }
+
+  /**
+   * 컴포넌트별 특화 메서드들
+   */
+  
+  // text 타입 특화 속성 처리
+  protected getSelectedItemsDetailInputProps() {
+    const baseProps = this.getWebTypeProps();
+    
+    // text 타입에 특화된 추가 속성들
+    return {
+      ...baseProps,
+      // 여기에 text 타입 특화 속성들 추가
+    };
+  }
+
+  // 값 변경 처리
+  protected handleValueChange = (value: any) => {
+    this.updateComponent({ value });
+  };
+
+  // 포커스 처리
+  protected handleFocus = () => {
+    // 포커스 로직
+  };
+
+  // 블러 처리
+  protected handleBlur = () => {
+    // 블러 로직
+  };
+}
+
+// 자동 등록 실행
+SelectedItemsDetailInputRenderer.registerSelf();
diff --git a/frontend/lib/registry/components/selected-items-detail-input/index.ts b/frontend/lib/registry/components/selected-items-detail-input/index.ts
new file mode 100644
index 00000000..e4bca645
--- /dev/null
+++ b/frontend/lib/registry/components/selected-items-detail-input/index.ts
@@ -0,0 +1,47 @@
+"use client";
+
+import React from "react";
+import { createComponentDefinition } from "../../utils/createComponentDefinition";
+import { ComponentCategory } from "@/types/component";
+import type { WebType } from "@/types/screen";
+import { SelectedItemsDetailInputWrapper } from "./SelectedItemsDetailInputComponent";
+import { SelectedItemsDetailInputConfigPanel } from "./SelectedItemsDetailInputConfigPanel";
+import { SelectedItemsDetailInputConfig } from "./types";
+
+/**
+ * SelectedItemsDetailInput 컴포넌트 정의
+ * 선택된 항목들의 상세 정보를 입력하는 컴포넌트
+ */
+export const SelectedItemsDetailInputDefinition = createComponentDefinition({
+  id: "selected-items-detail-input",
+  name: "선택 항목 상세입력",
+  nameEng: "SelectedItemsDetailInput Component",
+  description: "선택된 항목들의 상세 정보를 입력하는 컴포넌트",
+  category: ComponentCategory.INPUT,
+  webType: "text",
+  component: SelectedItemsDetailInputWrapper,
+  defaultConfig: {
+    dataSourceId: "",
+    displayColumns: [],
+    additionalFields: [],
+    targetTable: "",
+    layout: "grid",
+    showIndex: true,
+    allowRemove: false,
+    emptyMessage: "전달받은 데이터가 없습니다.",
+    disabled: false,
+    readonly: false,
+  } as SelectedItemsDetailInputConfig,
+  defaultSize: { width: 800, height: 400 },
+  configPanel: SelectedItemsDetailInputConfigPanel,
+  icon: "Table",
+  tags: ["선택", "상세입력", "반복", "테이블", "데이터전달"],
+  version: "1.0.0",
+  author: "개발팀",
+  documentation: "https://docs.example.com/components/selected-items-detail-input",
+});
+
+// 컴포넌트는 SelectedItemsDetailInputRenderer에서 자동 등록됩니다
+
+// 타입 내보내기
+export type { SelectedItemsDetailInputConfig, AdditionalFieldDefinition } from "./types";
diff --git a/frontend/lib/registry/components/selected-items-detail-input/types.ts b/frontend/lib/registry/components/selected-items-detail-input/types.ts
new file mode 100644
index 00000000..88d02c8e
--- /dev/null
+++ b/frontend/lib/registry/components/selected-items-detail-input/types.ts
@@ -0,0 +1,324 @@
+"use client";
+
+import { ComponentConfig } from "@/types/component";
+
+/**
+ * 추가 입력 필드 정의
+ */
+export interface AdditionalFieldDefinition {
+  /** 필드명 (컬럼명) */
+  name: string;
+  /** 필드 라벨 */
+  label: string;
+  /** 입력 타입 */
+  type: "text" | "number" | "date" | "select" | "checkbox" | "textarea";
+  /** 🆕 데이터베이스 inputType (실제 렌더링 시 사용) */
+  inputType?: string;
+  /** 🆕 코드 카테고리 (inputType이 code/category일 때) */
+  codeCategory?: string;
+  /** 필수 입력 여부 */
+  required?: boolean;
+  /** 플레이스홀더 */
+  placeholder?: string;
+  /** 기본값 */
+  defaultValue?: any;
+  /** 🆕 원본 데이터에서 자동으로 값을 가져올 필드명 */
+  autoFillFrom?: string;
+  /** 🆕 자동 채우기할 데이터의 테이블명 (비워두면 주 데이터 소스 사용) */
+  autoFillFromTable?: string;
+  /** 선택 옵션 (type이 select일 때) */
+  options?: Array<{ label: string; value: string }>;
+  /** 필드 너비 (px 또는 %) */
+  width?: string;
+  /** 🆕 필드 그룹 ID (같은 그룹ID를 가진 필드들은 같은 카드에 표시) */
+  groupId?: string;
+  /** 검증 규칙 */
+  validation?: {
+    min?: number;
+    max?: number;
+    minLength?: number;
+    maxLength?: number;
+    pattern?: string;
+  };
+}
+
+/**
+ * 필드 그룹 정의
+ */
+export interface FieldGroup {
+  /** 그룹 ID */
+  id: string;
+  /** 그룹 제목 */
+  title: string;
+  /** 그룹 설명 (선택사항) */
+  description?: string;
+  /** 그룹 표시 순서 */
+  order?: number;
+  /** 🆕 이 그룹의 항목 표시 설정 (그룹별로 다른 표시 형식 가능) */
+  displayItems?: DisplayItem[];
+}
+
+/**
+ * 🆕 계산식 노드 타입
+ */
+export type CalculationNodeType = "field" | "constant" | "operation" | "function" | "previous";
+
+export interface CalculationNode {
+  type: CalculationNodeType;
+  // field: 필드명
+  fieldName?: string;
+  // constant: 상수값
+  value?: number;
+  // operation: 연산
+  operator?: "+" | "-" | "*" | "/" | "%" | "^";
+  left?: CalculationNode;
+  right?: CalculationNode;
+  // function: 함수
+  functionName?: "round" | "floor" | "ceil" | "abs" | "max" | "min";
+  params?: CalculationNode[];
+}
+
+/**
+ * 🆕 계산 단계
+ */
+export interface CalculationStep {
+  id: string;
+  label: string;
+  expression: CalculationNode;
+}
+
+/**
+ * 🆕 자동 계산 설정
+ */
+export interface AutoCalculationConfig {
+  /** 계산 대상 필드명 (예: calculated_price) */
+  targetField: string;
+  /** 🆕 계산 방식 */
+  mode: "template" | "custom";
+  
+  /** 템플릿 모드 (기존 방식) */
+  inputFields?: {
+    basePrice: string;
+    discountType: string;
+    discountValue: string;
+    roundingType: string;
+    roundingUnit: string;
+  };
+  calculationType?: "price" | "custom";
+  valueMapping?: {
+    discountType?: {
+      [valueCode: string]: "none" | "rate" | "amount";
+    };
+    roundingType?: {
+      [valueCode: string]: "none" | "round" | "floor" | "ceil";
+    };
+    roundingUnit?: {
+      [valueCode: string]: number;
+    };
+  };
+  
+  /** 커스텀 모드 (계산식 빌더) */
+  calculationSteps?: CalculationStep[];
+}
+
+/**
+ * 🆕 부모 화면 데이터 매핑 설정
+ */
+export interface ParentDataMapping {
+  /** 소스 테이블명 (필수) */
+  sourceTable: string;
+  /** 소스 테이블의 필드명 */
+  sourceField: string;
+  /** 저장할 테이블의 필드명 */
+  targetField: string;
+  /** 부모 데이터가 없을 때 사용할 기본값 (선택사항) */
+  defaultValue?: any;
+}
+
+/**
+ * SelectedItemsDetailInput 컴포넌트 설정 타입
+ */
+export interface SelectedItemsDetailInputConfig extends ComponentConfig {
+  /**
+   * 데이터 소스 ID (TableList 컴포넌트 ID 등)
+   * 이 ID를 통해 modalDataStore에서 데이터를 가져옴
+   */
+  dataSourceId?: string;
+  
+  /**
+   * 🆕 원본 데이터 테이블명 (표시 컬럼 선택 시 사용)
+   * 예: "item_info"
+   */
+  sourceTable?: string;
+  
+  /**
+   * 표시할 원본 데이터 컬럼들 (name, label, width)
+   * 원본 데이터 테이블의 컬럼을 표시
+   */
+  displayColumns?: Array<{ name: string; label: string; width?: string }>;
+  
+  /**
+   * 추가 입력 필드 정의
+   * 저장 대상 테이블의 컬럼을 입력
+   */
+  additionalFields?: AdditionalFieldDefinition[];
+  
+  /**
+   * 🆕 필드 그룹 정의
+   * 추가 입력 필드를 여러 카드로 나눠서 표시
+   */
+  fieldGroups?: FieldGroup[];
+  
+  /**
+   * 저장 대상 테이블
+   */
+  targetTable?: string;
+  
+  /**
+   * 🆕 부모 화면 데이터 매핑
+   * 이전 화면(예: 거래처 테이블)에서 넘어온 데이터를 저장 테이블의 필드에 자동 매핑
+   * 예: { sourceField: "id", targetField: "customer_id" }
+   */
+  parentDataMapping?: ParentDataMapping[];
+  
+  /**
+   * 🆕 자동 계산 설정
+   * 특정 필드가 변경되면 다른 필드를 자동으로 계산
+   */
+  autoCalculation?: AutoCalculationConfig;
+  
+  /**
+   * 레이아웃 모드
+   * - grid: 테이블 형식 (기본)
+   * - card: 카드 형식
+   */
+  layout?: "grid" | "card";
+  
+  /**
+   * 항목 번호 표시 여부
+   */
+  showIndex?: boolean;
+  
+  /**
+   * 항목 삭제 허용 여부
+   */
+  allowRemove?: boolean;
+  
+  /**
+   * 🆕 입력 모드
+   * - inline: 항상 입력창 표시 (기본)
+   * - modal: 추가 버튼 클릭 시 입력창 표시, 완료 후 작은 카드로 표시
+   */
+  inputMode?: "inline" | "modal";
+  
+  /**
+   * 빈 상태 메시지
+   */
+  emptyMessage?: string;
+  
+  // 공통 설정
+  disabled?: boolean;
+  readonly?: boolean;
+}
+
+/**
+ * 🆕 그룹별 입력 항목 (예: 그룹1의 한 줄)
+ */
+export interface GroupEntry {
+  /** 입력 항목 고유 ID */
+  id: string;
+  /** 입력된 필드 데이터 */
+  [key: string]: any;
+}
+
+/**
+ * 🆕 표시 항목 타입
+ */
+export type DisplayItemType = "icon" | "field" | "text" | "badge";
+
+/**
+ * 🆕 빈 값 처리 방식
+ */
+export type EmptyBehavior = "hide" | "default" | "blank";
+
+/**
+ * 🆕 필드 표시 형식
+ */
+export type DisplayFieldFormat = "text" | "date" | "currency" | "number" | "badge";
+
+/**
+ * 🆕 표시 항목 정의 (아이콘, 필드, 텍스트, 배지)
+ */
+export interface DisplayItem {
+  /** 항목 타입 */
+  type: DisplayItemType;
+  
+  /** 고유 ID */
+  id: string;
+  
+  // === type: "field" 인 경우 ===
+  /** 필드명 (컬럼명) */
+  fieldName?: string;
+  /** 라벨 (예: "거래처:", "단가:") */
+  label?: string;
+  /** 표시 형식 */
+  format?: DisplayFieldFormat;
+  /** 빈 값일 때 동작 */
+  emptyBehavior?: EmptyBehavior;
+  /** 기본값 (빈 값일 때 표시) */
+  defaultValue?: string;
+  
+  // === type: "icon" 인 경우 ===
+  /** 아이콘 이름 (lucide-react 아이콘명) */
+  icon?: string;
+  
+  // === type: "text" 인 경우 ===
+  /** 텍스트 내용 */
+  value?: string;
+  
+  // === type: "badge" 인 경우 ===
+  /** 배지 스타일 */
+  badgeVariant?: "default" | "secondary" | "destructive" | "outline";
+  
+  // === 공통 스타일 ===
+  /** 굵게 표시 */
+  bold?: boolean;
+  /** 밑줄 표시 */
+  underline?: boolean;
+  /** 기울임 표시 */
+  italic?: boolean;
+  /** 텍스트 색상 */
+  color?: string;
+  /** 배경 색상 */
+  backgroundColor?: string;
+}
+
+/**
+ * 🆕 품목 + 그룹별 여러 입력 항목
+ * 각 필드 그룹마다 독립적으로 여러 개의 입력을 추가할 수 있음
+ * 예: { "group1": [entry1, entry2], "group2": [entry1, entry2, entry3] }
+ */
+export interface ItemData {
+  /** 품목 고유 ID */
+  id: string;
+  /** 원본 데이터 (품목 정보) */
+  originalData: Record<string, any>;
+  /** 필드 그룹별 입력 항목들 { groupId: [entry1, entry2, ...] } */
+  fieldGroups: Record<string, GroupEntry[]>;
+}
+
+/**
+ * SelectedItemsDetailInput 컴포넌트 Props 타입
+ */
+export interface SelectedItemsDetailInputProps {
+  id?: string;
+  name?: string;
+  value?: any;
+  config?: SelectedItemsDetailInputConfig;
+  className?: string;
+  style?: React.CSSProperties;
+  
+  // 이벤트 핸들러
+  onChange?: (value: any) => void;
+  onSave?: (data: any[]) => void;
+}
diff --git a/frontend/lib/registry/components/split-panel-layout/SplitPanelLayoutComponent.tsx b/frontend/lib/registry/components/split-panel-layout/SplitPanelLayoutComponent.tsx
index ced60e9e..21a5bb0f 100644
--- a/frontend/lib/registry/components/split-panel-layout/SplitPanelLayoutComponent.tsx
+++ b/frontend/lib/registry/components/split-panel-layout/SplitPanelLayoutComponent.tsx
@@ -6,12 +6,32 @@ import { SplitPanelLayoutConfig } from "./types";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
-import { Plus, Search, GripVertical, Loader2, ChevronDown, ChevronUp, Save, ChevronRight, Pencil, Trash2 } from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+import {
+  Plus,
+  Search,
+  GripVertical,
+  Loader2,
+  ChevronDown,
+  ChevronUp,
+  Save,
+  ChevronRight,
+  Pencil,
+  Trash2,
+} from "lucide-react";
 import { dataApi } from "@/lib/api/data";
 import { entityJoinApi } from "@/lib/api/entityJoin";
 import { useToast } from "@/hooks/use-toast";
 import { tableTypeApi } from "@/lib/api/screen";
-import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription } from "@/components/ui/dialog";
+import { apiClient } from "@/lib/api/client";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+  DialogDescription,
+} from "@/components/ui/dialog";
 import { Label } from "@/components/ui/label";
 import { useTableOptions } from "@/contexts/TableOptionsContext";
 import { TableFilter, ColumnVisibility } from "@/types/table-options";
@@ -40,6 +60,18 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
   const resizable = componentConfig.resizable ?? true;
   const minLeftWidth = componentConfig.minLeftWidth || 200;
   const minRightWidth = componentConfig.minRightWidth || 300;
+  
+  // 필드 표시 유틸리티 (하드코딩 제거, 동적으로 작동)
+  const shouldShowField = (fieldName: string): boolean => {
+    const lower = fieldName.toLowerCase();
+    
+    // 기본 제외: id, 비밀번호, 토큰, 회사코드
+    if (lower === "id" || lower === "company_code" || lower === "company_name") return false;
+    if (lower.includes("password") || lower.includes("token")) return false;
+    
+    // 나머지는 모두 표시!
+    return true;
+  };
 
   // TableOptions Context
   const { registerTable, unregisterTable } = useTableOptions();
@@ -64,19 +96,25 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
   const [expandedItems, setExpandedItems] = useState<Set<any>>(new Set()); // 펼쳐진 항목들
   const [leftColumnLabels, setLeftColumnLabels] = useState<Record<string, string>>({}); // 좌측 컬럼 라벨
   const [rightColumnLabels, setRightColumnLabels] = useState<Record<string, string>>({}); // 우측 컬럼 라벨
+  const [leftCategoryMappings, setLeftCategoryMappings] = useState<
+    Record<string, Record<string, { label: string; color?: string }>>
+  >({}); // 좌측 카테고리 매핑
+  const [rightCategoryMappings, setRightCategoryMappings] = useState<
+    Record<string, Record<string, { label: string; color?: string }>>
+  >({}); // 우측 카테고리 매핑
   const { toast } = useToast();
 
   // 추가 모달 상태
   const [showAddModal, setShowAddModal] = useState(false);
   const [addModalPanel, setAddModalPanel] = useState<"left" | "right" | "left-item" | null>(null);
   const [addModalFormData, setAddModalFormData] = useState<Record<string, any>>({});
-  
+
   // 수정 모달 상태
   const [showEditModal, setShowEditModal] = useState(false);
   const [editModalPanel, setEditModalPanel] = useState<"left" | "right" | null>(null);
   const [editModalItem, setEditModalItem] = useState<any>(null);
   const [editModalFormData, setEditModalFormData] = useState<Record<string, any>>({});
-  
+
   // 삭제 확인 모달 상태
   const [showDeleteModal, setShowDeleteModal] = useState(false);
   const [deleteModalPanel, setDeleteModalPanel] = useState<"left" | "right" | null>(null);
@@ -117,51 +155,54 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
       };
 
   // 계층 구조 빌드 함수 (트리 구조 유지)
-  const buildHierarchy = useCallback((items: any[]): any[] => {
-    if (!items || items.length === 0) return [];
-    
-    const itemAddConfig = componentConfig.leftPanel?.itemAddConfig;
-    if (!itemAddConfig) return items.map(item => ({ ...item, children: [] })); // 계층 설정이 없으면 평면 목록
-    
-    const { sourceColumn, parentColumn } = itemAddConfig;
-    if (!sourceColumn || !parentColumn) return items.map(item => ({ ...item, children: [] }));
+  const buildHierarchy = useCallback(
+    (items: any[]): any[] => {
+      if (!items || items.length === 0) return [];
 
-    // ID를 키로 하는 맵 생성
-    const itemMap = new Map<any, any>();
-    const rootItems: any[] = [];
+      const itemAddConfig = componentConfig.leftPanel?.itemAddConfig;
+      if (!itemAddConfig) return items.map((item) => ({ ...item, children: [] })); // 계층 설정이 없으면 평면 목록
 
-    // 모든 항목을 맵에 추가하고 children 배열 초기화
-    items.forEach(item => {
-      const id = item[sourceColumn];
-      itemMap.set(id, { ...item, children: [], level: 0 });
-    });
+      const { sourceColumn, parentColumn } = itemAddConfig;
+      if (!sourceColumn || !parentColumn) return items.map((item) => ({ ...item, children: [] }));
 
-    // 부모-자식 관계 설정
-    items.forEach(item => {
-      const id = item[sourceColumn];
-      const parentId = item[parentColumn];
-      const currentItem = itemMap.get(id);
+      // ID를 키로 하는 맵 생성
+      const itemMap = new Map<any, any>();
+      const rootItems: any[] = [];
 
-      if (!currentItem) return;
+      // 모든 항목을 맵에 추가하고 children 배열 초기화
+      items.forEach((item) => {
+        const id = item[sourceColumn];
+        itemMap.set(id, { ...item, children: [], level: 0 });
+      });
 
-      if (!parentId || parentId === null || parentId === '') {
-        // 최상위 항목
-        rootItems.push(currentItem);
-      } else {
-        // 부모가 있는 항목
-        const parentItem = itemMap.get(parentId);
-        if (parentItem) {
-          currentItem.level = parentItem.level + 1;
-          parentItem.children.push(currentItem);
-        } else {
-          // 부모를 찾을 수 없으면 최상위로 처리
+      // 부모-자식 관계 설정
+      items.forEach((item) => {
+        const id = item[sourceColumn];
+        const parentId = item[parentColumn];
+        const currentItem = itemMap.get(id);
+
+        if (!currentItem) return;
+
+        if (!parentId || parentId === null || parentId === "") {
+          // 최상위 항목
           rootItems.push(currentItem);
+        } else {
+          // 부모가 있는 항목
+          const parentItem = itemMap.get(parentId);
+          if (parentItem) {
+            currentItem.level = parentItem.level + 1;
+            parentItem.children.push(currentItem);
+          } else {
+            // 부모를 찾을 수 없으면 최상위로 처리
+            rootItems.push(currentItem);
+          }
         }
-      }
-    });
+      });
 
-    return rootItems;
-  }, [componentConfig.leftPanel?.itemAddConfig]);
+      return rootItems;
+    },
+    [componentConfig.leftPanel?.itemAddConfig],
+  );
 
   // 🔧 사용자 ID 가져오기
   const { userId: currentUserId } = useAuth();
@@ -169,13 +210,13 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
   // 🔄 필터를 searchValues 형식으로 변환
   const searchValues = useMemo(() => {
     if (!leftFilters || leftFilters.length === 0) return {};
-    
+
     const values: Record<string, any> = {};
-    leftFilters.forEach(filter => {
-      if (filter.value !== undefined && filter.value !== null && filter.value !== '') {
+    leftFilters.forEach((filter) => {
+      if (filter.value !== undefined && filter.value !== null && filter.value !== "") {
         values[filter.columnName] = {
           value: filter.value,
-          operator: filter.operator || 'contains',
+          operator: filter.operator || "contains",
         };
       }
     });
@@ -185,55 +226,57 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
   // 🔄 컬럼 가시성 및 순서 처리
   const visibleLeftColumns = useMemo(() => {
     const displayColumns = componentConfig.leftPanel?.columns || [];
-    
+
     if (displayColumns.length === 0) return [];
-    
+
     let columns = displayColumns;
-    
+
     // columnVisibility가 있으면 가시성 적용
     if (leftColumnVisibility.length > 0) {
-      const visibilityMap = new Map(leftColumnVisibility.map(cv => [cv.columnName, cv.visible]));
+      const visibilityMap = new Map(leftColumnVisibility.map((cv) => [cv.columnName, cv.visible]));
       columns = columns.filter((col: any) => {
-        const colName = typeof col === 'string' ? col : (col.name || col.columnName);
+        const colName = typeof col === "string" ? col : col.name || col.columnName;
         return visibilityMap.get(colName) !== false;
       });
     }
-    
+
     // 🔧 컬럼 순서 적용
     if (leftColumnOrder.length > 0) {
       const orderMap = new Map(leftColumnOrder.map((name, index) => [name, index]));
       columns = [...columns].sort((a, b) => {
-        const aName = typeof a === 'string' ? a : (a.name || a.columnName);
-        const bName = typeof b === 'string' ? b : (b.name || b.columnName);
+        const aName = typeof a === "string" ? a : a.name || a.columnName;
+        const bName = typeof b === "string" ? b : b.name || b.columnName;
         const aIndex = orderMap.get(aName) ?? 999;
         const bIndex = orderMap.get(bName) ?? 999;
         return aIndex - bIndex;
       });
     }
-    
+
     return columns;
   }, [componentConfig.leftPanel?.columns, leftColumnVisibility, leftColumnOrder]);
 
   // 🔄 데이터 그룹화
   const groupedLeftData = useMemo(() => {
     if (!leftGrouping || leftGrouping.length === 0 || leftData.length === 0) return [];
-    
+
     const grouped = new Map<string, any[]>();
-    
+
     leftData.forEach((item) => {
       // 각 그룹 컬럼의 값을 조합하여 그룹 키 생성
-      const groupKey = leftGrouping.map(col => {
-        const value = item[col];
-        // null/undefined 처리
-        return value === null || value === undefined ? "(비어있음)" : String(value);
-      }).join(" > ");
-      
+      const groupKey = leftGrouping
+        .map((col) => {
+          const value = item[col];
+          // null/undefined 처리
+          return value === null || value === undefined ? "(비어있음)" : String(value);
+        })
+        .join(" > ");
+
       if (!grouped.has(groupKey)) {
         grouped.set(groupKey, []);
       }
       grouped.get(groupKey)!.push(item);
     });
-    
+
     return Array.from(grouped.entries()).map(([key, items]) => ({
       groupKey: key,
       items,
@@ -241,6 +284,42 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
     }));
   }, [leftData, leftGrouping]);
 
+  // 셀 값 포맷팅 함수 (카테고리 타입 처리)
+  const formatCellValue = useCallback(
+    (
+      columnName: string,
+      value: any,
+      categoryMappings: Record<string, Record<string, { label: string; color?: string }>>,
+    ) => {
+      if (value === null || value === undefined) return "-";
+
+      // 카테고리 매핑이 있는지 확인
+      const mapping = categoryMappings[columnName];
+      if (mapping && mapping[String(value)]) {
+        const categoryData = mapping[String(value)];
+        const displayLabel = categoryData.label || String(value);
+        const displayColor = categoryData.color || "#64748b";
+
+        // 배지로 표시
+        return (
+          <Badge
+            style={{
+              backgroundColor: displayColor,
+              borderColor: displayColor,
+            }}
+            className="text-white"
+          >
+            {displayLabel}
+          </Badge>
+        );
+      }
+
+      // 일반 값
+      return String(value);
+    },
+    [],
+  );
+
   // 좌측 데이터 로드
   const loadLeftData = useCallback(async () => {
     const leftTableName = componentConfig.leftPanel?.tableName;
@@ -250,8 +329,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
     try {
       // 🎯 필터 조건을 API에 전달 (entityJoinApi 사용)
       const filters = Object.keys(searchValues).length > 0 ? searchValues : undefined;
-      
-      
+
       const result = await entityJoinApi.getTableDataWithJoins(leftTableName, {
         page: 1,
         size: 100,
@@ -259,18 +337,17 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
         enableEntityJoin: true, // 엔티티 조인 활성화
         dataFilter: componentConfig.leftPanel?.dataFilter, // 🆕 데이터 필터 전달
       });
-      
-      
+
       // 가나다순 정렬 (좌측 패널의 표시 컬럼 기준)
       const leftColumn = componentConfig.rightPanel?.relation?.leftColumn;
       if (leftColumn && result.data.length > 0) {
         result.data.sort((a, b) => {
-          const aValue = String(a[leftColumn] || '');
-          const bValue = String(b[leftColumn] || '');
-          return aValue.localeCompare(bValue, 'ko-KR');
+          const aValue = String(a[leftColumn] || "");
+          const bValue = String(b[leftColumn] || "");
+          return aValue.localeCompare(bValue, "ko-KR");
         });
       }
-      
+
       // 계층 구조 빌드
       const hierarchicalData = buildHierarchy(result.data);
       setLeftData(hierarchicalData);
@@ -284,7 +361,14 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
     } finally {
       setIsLoadingLeft(false);
     }
-  }, [componentConfig.leftPanel?.tableName, componentConfig.rightPanel?.relation?.leftColumn, isDesignMode, toast, buildHierarchy, searchValues]);
+  }, [
+    componentConfig.leftPanel?.tableName,
+    componentConfig.rightPanel?.relation?.leftColumn,
+    isDesignMode,
+    toast,
+    buildHierarchy,
+    searchValues,
+  ]);
 
   // 우측 데이터 로드
   const loadRightData = useCallback(
@@ -297,9 +381,18 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
       setIsLoadingRight(true);
       try {
         if (relationshipType === "detail") {
-          // 상세 모드: 동일 테이블의 상세 정보
+          // 상세 모드: 동일 테이블의 상세 정보 (🆕 엔티티 조인 활성화)
           const primaryKey = leftItem.id || leftItem.ID || Object.values(leftItem)[0];
-          const detail = await dataApi.getRecordDetail(rightTableName, primaryKey);
+          
+          // 🆕 엔티티 조인 API 사용
+          const { entityJoinApi } = await import("@/lib/api/entityJoin");
+          const result = await entityJoinApi.getTableDataWithJoins(rightTableName, {
+            search: { id: primaryKey },
+            enableEntityJoin: true, // 엔티티 조인 활성화
+            size: 1,
+          });
+          
+          const detail = result.items && result.items.length > 0 ? result.items[0] : null;
           setRightData(detail);
         } else if (relationshipType === "join") {
           // 조인 모드: 다른 테이블의 관련 데이터 (여러 개)
@@ -316,6 +409,9 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
               rightColumn,
               leftValue,
               componentConfig.rightPanel?.dataFilter, // 🆕 데이터 필터 전달
+              true, // 🆕 Entity 조인 활성화
+              componentConfig.rightPanel?.columns, // 🆕 표시 컬럼 전달 (item_info.item_name 등)
+              componentConfig.rightPanel?.deduplication, // 🆕 중복 제거 설정 전달
             );
             setRightData(joinedData || []); // 모든 관련 레코드 (배열)
           }
@@ -346,8 +442,17 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
       setSelectedLeftItem(item);
       setExpandedRightItems(new Set()); // 좌측 항목 변경 시 우측 확장 초기화
       loadRightData(item);
+
+      // 🆕 modalDataStore에 선택된 좌측 항목 저장 (단일 선택)
+      const leftTableName = componentConfig.leftPanel?.tableName;
+      if (leftTableName && !isDesignMode) {
+        import("@/stores/modalDataStore").then(({ useModalDataStore }) => {
+          useModalDataStore.getState().setData(leftTableName, [item]);
+          console.log(`✅ 분할 패널 좌측 선택: ${leftTableName}`, item);
+        });
+      }
     },
-    [loadRightData],
+    [loadRightData, componentConfig.leftPanel?.tableName, isDesignMode],
   );
 
   // 우측 항목 확장/축소 토글
@@ -373,27 +478,30 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
   );
 
   // 🔧 컬럼의 고유값 가져오기 함수
-  const getLeftColumnUniqueValues = useCallback(async (columnName: string) => {
-    const leftTableName = componentConfig.leftPanel?.tableName;
-    if (!leftTableName || leftData.length === 0) return [];
+  const getLeftColumnUniqueValues = useCallback(
+    async (columnName: string) => {
+      const leftTableName = componentConfig.leftPanel?.tableName;
+      if (!leftTableName || leftData.length === 0) return [];
 
-    // 현재 로드된 데이터에서 고유값 추출
-    const uniqueValues = new Set<string>();
-    
-    leftData.forEach((item) => {
-      const value = item[columnName];
-      if (value !== null && value !== undefined && value !== '') {
-        // _name 필드 우선 사용 (category/entity type)
-        const displayValue = item[`${columnName}_name`] || value;
-        uniqueValues.add(String(displayValue));
-      }
-    });
-    
-    return Array.from(uniqueValues).map(value => ({
-      value: value,
-      label: value,
-    }));
-  }, [componentConfig.leftPanel?.tableName, leftData]);
+      // 현재 로드된 데이터에서 고유값 추출
+      const uniqueValues = new Set<string>();
+
+      leftData.forEach((item) => {
+        const value = item[columnName];
+        if (value !== null && value !== undefined && value !== "") {
+          // _name 필드 우선 사용 (category/entity type)
+          const displayValue = item[`${columnName}_name`] || value;
+          uniqueValues.add(String(displayValue));
+        }
+      });
+
+      return Array.from(uniqueValues).map((value) => ({
+        value: value,
+        label: value,
+      }));
+    },
+    [componentConfig.leftPanel?.tableName, leftData],
+  );
 
   // 좌측 테이블 등록 (Context에 등록)
   useEffect(() => {
@@ -403,11 +511,13 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
     const leftTableId = `split-panel-left-${component.id}`;
     // 🔧 화면에 표시되는 컬럼 사용 (columns 속성)
     const configuredColumns = componentConfig.leftPanel?.columns || [];
-    const displayColumns = configuredColumns.map((col: any) => {
-      if (typeof col === 'string') return col;
-      return col.columnName || col.name || col;
-    }).filter(Boolean);
-    
+    const displayColumns = configuredColumns
+      .map((col: any) => {
+        if (typeof col === "string") return col;
+        return col.columnName || col.name || col;
+      })
+      .filter(Boolean);
+
     // 화면에 설정된 컬럼이 없으면 등록하지 않음
     if (displayColumns.length === 0) return;
 
@@ -433,7 +543,15 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
     });
 
     return () => unregisterTable(leftTableId);
-  }, [component.id, componentConfig.leftPanel?.tableName, componentConfig.leftPanel?.columns, leftColumnLabels, component.title, isDesignMode, getLeftColumnUniqueValues]);
+  }, [
+    component.id,
+    componentConfig.leftPanel?.tableName,
+    componentConfig.leftPanel?.columns,
+    leftColumnLabels,
+    component.title,
+    isDesignMode,
+    getLeftColumnUniqueValues,
+  ]);
 
   // 우측 테이블은 검색 컴포넌트 등록 제외 (좌측 마스터 테이블만 검색 가능)
   // useEffect(() => {
@@ -503,7 +621,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
       try {
         const columnsResponse = await tableTypeApi.getColumns(rightTableName);
         setRightTableColumns(columnsResponse || []);
-        
+
         // 우측 컬럼 라벨도 함께 로드
         const labels: Record<string, string> = {};
         columnsResponse.forEach((col: any) => {
@@ -523,9 +641,107 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
     loadRightTableColumns();
   }, [componentConfig.rightPanel?.tableName, isDesignMode]);
 
+  // 좌측 테이블 카테고리 매핑 로드
+  useEffect(() => {
+    const loadLeftCategoryMappings = async () => {
+      const leftTableName = componentConfig.leftPanel?.tableName;
+      if (!leftTableName || isDesignMode) return;
+
+      try {
+        // 1. 컬럼 메타 정보 조회
+        const columnsResponse = await tableTypeApi.getColumns(leftTableName);
+        const categoryColumns = columnsResponse.filter((col: any) => col.inputType === "category");
+
+        if (categoryColumns.length === 0) {
+          setLeftCategoryMappings({});
+          return;
+        }
+
+        // 2. 각 카테고리 컬럼에 대한 값 조회
+        const mappings: Record<string, Record<string, { label: string; color?: string }>> = {};
+
+        for (const col of categoryColumns) {
+          const columnName = col.columnName || col.column_name;
+          try {
+            const response = await apiClient.get(`/table-categories/${leftTableName}/${columnName}/values`);
+
+            if (response.data.success && response.data.data) {
+              const valueMap: Record<string, { label: string; color?: string }> = {};
+              response.data.data.forEach((item: any) => {
+                valueMap[item.value_code || item.valueCode] = {
+                  label: item.value_label || item.valueLabel,
+                  color: item.color,
+                };
+              });
+              mappings[columnName] = valueMap;
+              console.log(`✅ 좌측 카테고리 매핑 로드 [${columnName}]:`, valueMap);
+            }
+          } catch (error) {
+            console.error(`좌측 카테고리 값 조회 실패 [${columnName}]:`, error);
+          }
+        }
+
+        setLeftCategoryMappings(mappings);
+      } catch (error) {
+        console.error("좌측 카테고리 매핑 로드 실패:", error);
+      }
+    };
+
+    loadLeftCategoryMappings();
+  }, [componentConfig.leftPanel?.tableName, isDesignMode]);
+
+  // 우측 테이블 카테고리 매핑 로드
+  useEffect(() => {
+    const loadRightCategoryMappings = async () => {
+      const rightTableName = componentConfig.rightPanel?.tableName;
+      if (!rightTableName || isDesignMode) return;
+
+      try {
+        // 1. 컬럼 메타 정보 조회
+        const columnsResponse = await tableTypeApi.getColumns(rightTableName);
+        const categoryColumns = columnsResponse.filter((col: any) => col.inputType === "category");
+
+        if (categoryColumns.length === 0) {
+          setRightCategoryMappings({});
+          return;
+        }
+
+        // 2. 각 카테고리 컬럼에 대한 값 조회
+        const mappings: Record<string, Record<string, { label: string; color?: string }>> = {};
+
+        for (const col of categoryColumns) {
+          const columnName = col.columnName || col.column_name;
+          try {
+            const response = await apiClient.get(`/table-categories/${rightTableName}/${columnName}/values`);
+
+            if (response.data.success && response.data.data) {
+              const valueMap: Record<string, { label: string; color?: string }> = {};
+              response.data.data.forEach((item: any) => {
+                valueMap[item.value_code || item.valueCode] = {
+                  label: item.value_label || item.valueLabel,
+                  color: item.color,
+                };
+              });
+              mappings[columnName] = valueMap;
+              console.log(`✅ 우측 카테고리 매핑 로드 [${columnName}]:`, valueMap);
+            }
+          } catch (error) {
+            console.error(`우측 카테고리 값 조회 실패 [${columnName}]:`, error);
+          }
+        }
+
+        setRightCategoryMappings(mappings);
+      } catch (error) {
+        console.error("우측 카테고리 매핑 로드 실패:", error);
+      }
+    };
+
+    loadRightCategoryMappings();
+  }, [componentConfig.rightPanel?.tableName, isDesignMode]);
+
   // 항목 펼치기/접기 토글
   const toggleExpand = useCallback((itemId: any) => {
-    setExpandedItems(prev => {
+    setExpandedItems((prev) => {
       const newSet = new Set(prev);
       if (newSet.has(itemId)) {
         newSet.delete(itemId);
@@ -537,37 +753,123 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
   }, []);
 
   // 추가 버튼 핸들러
-  const handleAddClick = useCallback((panel: "left" | "right") => {
-    setAddModalPanel(panel);
-    
-    // 우측 패널 추가 시, 좌측에서 선택된 항목의 조인 컬럼 값을 자동으로 채움
-    if (panel === "right" && selectedLeftItem && componentConfig.leftPanel?.leftColumn && componentConfig.rightPanel?.rightColumn) {
-      const leftColumnValue = selectedLeftItem[componentConfig.leftPanel.leftColumn];
-      setAddModalFormData({
-        [componentConfig.rightPanel.rightColumn]: leftColumnValue
-      });
-    } else {
-      setAddModalFormData({});
-    }
-    
-    setShowAddModal(true);
-  }, [selectedLeftItem, componentConfig]);
+  const handleAddClick = useCallback(
+    (panel: "left" | "right") => {
+      setAddModalPanel(panel);
+
+      // 우측 패널 추가 시, 좌측에서 선택된 항목의 조인 컬럼 값을 자동으로 채움
+      if (
+        panel === "right" &&
+        selectedLeftItem &&
+        componentConfig.leftPanel?.leftColumn &&
+        componentConfig.rightPanel?.rightColumn
+      ) {
+        const leftColumnValue = selectedLeftItem[componentConfig.leftPanel.leftColumn];
+        setAddModalFormData({
+          [componentConfig.rightPanel.rightColumn]: leftColumnValue,
+        });
+      } else {
+        setAddModalFormData({});
+      }
+
+      setShowAddModal(true);
+    },
+    [selectedLeftItem, componentConfig],
+  );
 
   // 수정 버튼 핸들러
-  const handleEditClick = useCallback((panel: "left" | "right", item: any) => {
-    setEditModalPanel(panel);
-    setEditModalItem(item);
-    setEditModalFormData({ ...item });
-    setShowEditModal(true);
-  }, []);
+  const handleEditClick = useCallback(
+    (panel: "left" | "right", item: any) => {
+      // 🆕 우측 패널 수정 버튼 설정 확인
+      if (panel === "right" && componentConfig.rightPanel?.editButton?.mode === "modal") {
+        const modalScreenId = componentConfig.rightPanel?.editButton?.modalScreenId;
+        
+        if (modalScreenId) {
+          // 커스텀 모달 화면 열기
+          const rightTableName = componentConfig.rightPanel?.tableName || "";
+          
+          // Primary Key 찾기 (우선순위: id > ID > 첫 번째 필드)
+          let primaryKeyName = "id";
+          let primaryKeyValue: any;
+          
+          if (item.id !== undefined && item.id !== null) {
+            primaryKeyName = "id";
+            primaryKeyValue = item.id;
+          } else if (item.ID !== undefined && item.ID !== null) {
+            primaryKeyName = "ID";
+            primaryKeyValue = item.ID;
+          } else {
+            // 첫 번째 필드를 Primary Key로 간주
+            const firstKey = Object.keys(item)[0];
+            primaryKeyName = firstKey;
+            primaryKeyValue = item[firstKey];
+          }
+          
+          console.log(`✅ 수정 모달 열기:`, {
+            tableName: rightTableName,
+            primaryKeyName,
+            primaryKeyValue,
+            screenId: modalScreenId,
+            fullItem: item,
+          });
+          
+          // modalDataStore에도 저장 (호환성 유지)
+          import("@/stores/modalDataStore").then(({ useModalDataStore }) => {
+            useModalDataStore.getState().setData(rightTableName, [item]);
+          });
+          
+          // 🆕 groupByColumns 추출
+          const groupByColumns = componentConfig.rightPanel?.editButton?.groupByColumns || [];
+          
+          console.log("🔧 [SplitPanel] 수정 버튼 클릭 - groupByColumns 확인:", {
+            groupByColumns,
+            editButtonConfig: componentConfig.rightPanel?.editButton,
+            hasGroupByColumns: groupByColumns.length > 0,
+          });
+          
+          // ScreenModal 열기 이벤트 발생 (URL 파라미터로 ID + groupByColumns 전달)
+          window.dispatchEvent(
+            new CustomEvent("openScreenModal", {
+              detail: {
+                screenId: modalScreenId,
+                urlParams: {
+                  mode: "edit",
+                  editId: primaryKeyValue,
+                  tableName: rightTableName,
+                  ...(groupByColumns.length > 0 && {
+                    groupByColumns: JSON.stringify(groupByColumns),
+                  }),
+                },
+              },
+            }),
+          );
+          
+          console.log("✅ [SplitPanel] openScreenModal 이벤트 발생:", {
+            screenId: modalScreenId,
+            editId: primaryKeyValue,
+            tableName: rightTableName,
+            groupByColumns: groupByColumns.length > 0 ? JSON.stringify(groupByColumns) : "없음",
+          });
+          
+          return;
+        }
+      }
+      
+      // 기존 자동 편집 모드 (인라인 편집 모달)
+      setEditModalPanel(panel);
+      setEditModalItem(item);
+      setEditModalFormData({ ...item });
+      setShowEditModal(true);
+    },
+    [componentConfig],
+  );
 
   // 수정 모달 저장
   const handleEditModalSave = useCallback(async () => {
-    const tableName = editModalPanel === "left" 
-      ? componentConfig.leftPanel?.tableName 
-      : componentConfig.rightPanel?.tableName;
-    
-    const sourceColumn = componentConfig.leftPanel?.itemAddConfig?.sourceColumn || 'id';
+    const tableName =
+      editModalPanel === "left" ? componentConfig.leftPanel?.tableName : componentConfig.rightPanel?.tableName;
+
+    const sourceColumn = componentConfig.leftPanel?.itemAddConfig?.sourceColumn || "id";
     const primaryKey = editModalItem[sourceColumn] || editModalItem.id || editModalItem.ID;
 
     if (!tableName || !primaryKey) {
@@ -581,15 +883,15 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
 
     try {
       console.log("📝 데이터 수정:", { tableName, primaryKey, data: editModalFormData });
-      
+
       // 프론트엔드 전용 필드 제거 (children, level 등)
       const cleanData = { ...editModalFormData };
       delete cleanData.children;
       delete cleanData.level;
-      
+
       // 좌측 패널 수정 시, 조인 관계 정보 포함
-      let updatePayload: any = cleanData;
-      
+      const updatePayload: any = cleanData;
+
       if (editModalPanel === "left" && componentConfig.rightPanel?.relation?.type === "join") {
         // 조인 관계가 있는 경우, 관계 정보를 페이로드에 추가
         updatePayload._relationInfo = {
@@ -600,7 +902,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
         };
         console.log("🔗 조인 관계 정보 추가:", updatePayload._relationInfo);
       }
-      
+
       const result = await dataApi.updateRecord(tableName, primaryKey, updatePayload);
 
       if (result.success) {
@@ -608,12 +910,12 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
           title: "성공",
           description: "데이터가 성공적으로 수정되었습니다.",
         });
-        
+
         // 모달 닫기
         setShowEditModal(false);
         setEditModalFormData({});
         setEditModalItem(null);
-        
+
         // 데이터 새로고침
         if (editModalPanel === "left") {
           loadLeftData();
@@ -639,7 +941,16 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
         variant: "destructive",
       });
     }
-  }, [editModalPanel, componentConfig, editModalItem, editModalFormData, toast, selectedLeftItem, loadLeftData, loadRightData]);
+  }, [
+    editModalPanel,
+    componentConfig,
+    editModalItem,
+    editModalFormData,
+    toast,
+    selectedLeftItem,
+    loadLeftData,
+    loadRightData,
+  ]);
 
   // 삭제 버튼 핸들러
   const handleDeleteClick = useCallback((panel: "left" | "right", item: any) => {
@@ -651,21 +962,20 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
   // 삭제 확인
   const handleDeleteConfirm = useCallback(async () => {
     // 우측 패널 삭제 시 중계 테이블 확인
-    let tableName = deleteModalPanel === "left" 
-      ? componentConfig.leftPanel?.tableName 
-      : componentConfig.rightPanel?.tableName;
-    
+    let tableName =
+      deleteModalPanel === "left" ? componentConfig.leftPanel?.tableName : componentConfig.rightPanel?.tableName;
+
     // 우측 패널 + 중계 테이블 모드인 경우
     if (deleteModalPanel === "right" && componentConfig.rightPanel?.addConfig?.targetTable) {
       tableName = componentConfig.rightPanel.addConfig.targetTable;
       console.log("🔗 중계 테이블 모드: 삭제 대상 테이블 =", tableName);
     }
-    
-    const sourceColumn = componentConfig.leftPanel?.itemAddConfig?.sourceColumn || 'id';
+
+    const sourceColumn = componentConfig.leftPanel?.itemAddConfig?.sourceColumn || "id";
     let primaryKey: any = deleteModalItem[sourceColumn] || deleteModalItem.id || deleteModalItem.ID;
 
     // 복합키 처리: deleteModalItem 전체를 전달 (백엔드에서 복합키 자동 처리)
-    if (deleteModalItem && typeof deleteModalItem === 'object') {
+    if (deleteModalItem && typeof deleteModalItem === "object") {
       primaryKey = deleteModalItem;
       console.log("🔑 복합키 가능성: 전체 객체 전달", primaryKey);
     }
@@ -682,18 +992,60 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
     try {
       console.log("🗑️ 데이터 삭제:", { tableName, primaryKey });
       
-      const result = await dataApi.deleteRecord(tableName, primaryKey);
+      // 🔍 중복 제거 설정 디버깅
+      console.log("🔍 중복 제거 디버깅:", {
+        panel: deleteModalPanel,
+        dataFilter: componentConfig.rightPanel?.dataFilter,
+        deduplication: componentConfig.rightPanel?.dataFilter?.deduplication,
+        enabled: componentConfig.rightPanel?.dataFilter?.deduplication?.enabled,
+      });
+
+      let result;
+
+      // 🔧 중복 제거가 활성화된 경우, groupByColumn 기준으로 모든 관련 레코드 삭제
+      if (deleteModalPanel === "right" && componentConfig.rightPanel?.dataFilter?.deduplication?.enabled) {
+        const deduplication = componentConfig.rightPanel.dataFilter.deduplication;
+        const groupByColumn = deduplication.groupByColumn;
+        
+        if (groupByColumn && deleteModalItem[groupByColumn]) {
+          const groupValue = deleteModalItem[groupByColumn];
+          console.log(`🔗 중복 제거 활성화: ${groupByColumn} = ${groupValue} 기준으로 모든 레코드 삭제`);
+          
+          // groupByColumn 값으로 필터링하여 삭제
+          const filterConditions: Record<string, any> = {
+            [groupByColumn]: groupValue,
+          };
+          
+          // 좌측 패널의 선택된 항목 정보도 포함 (customer_id 등)
+          if (selectedLeftItem && componentConfig.rightPanel?.mode === "join") {
+            const leftColumn = componentConfig.rightPanel.join.leftColumn;
+            const rightColumn = componentConfig.rightPanel.join.rightColumn;
+            filterConditions[rightColumn] = selectedLeftItem[leftColumn];
+          }
+          
+          console.log("🗑️ 그룹 삭제 조건:", filterConditions);
+          
+          // 그룹 삭제 API 호출
+          result = await dataApi.deleteGroupRecords(tableName, filterConditions);
+        } else {
+          // 단일 레코드 삭제
+          result = await dataApi.deleteRecord(tableName, primaryKey);
+        }
+      } else {
+        // 단일 레코드 삭제
+        result = await dataApi.deleteRecord(tableName, primaryKey);
+      }
 
       if (result.success) {
         toast({
           title: "성공",
           description: "데이터가 성공적으로 삭제되었습니다.",
         });
-        
+
         // 모달 닫기
         setShowDeleteModal(false);
         setDeleteModalItem(null);
-        
+
         // 데이터 새로고침
         if (deleteModalPanel === "left") {
           loadLeftData();
@@ -714,13 +1066,13 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
       }
     } catch (error: any) {
       console.error("데이터 삭제 오류:", error);
-      
+
       // 외래키 제약조건 에러 처리
       let errorMessage = "데이터 삭제 중 오류가 발생했습니다.";
       if (error?.response?.data?.error?.includes("foreign key")) {
         errorMessage = "이 데이터를 참조하는 다른 데이터가 있어 삭제할 수 없습니다.";
       }
-      
+
       toast({
         title: "오류",
         description: errorMessage,
@@ -730,73 +1082,76 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
   }, [deleteModalPanel, componentConfig, deleteModalItem, toast, selectedLeftItem, loadLeftData, loadRightData]);
 
   // 항목별 추가 버튼 핸들러 (좌측 항목의 + 버튼 - 하위 항목 추가)
-  const handleItemAddClick = useCallback((item: any) => {
-    const itemAddConfig = componentConfig.leftPanel?.itemAddConfig;
-    
-    if (!itemAddConfig) {
-      toast({
-        title: "설정 오류",
-        description: "하위 항목 추가 설정이 없습니다.",
-        variant: "destructive",
-      });
-      return;
-    }
+  const handleItemAddClick = useCallback(
+    (item: any) => {
+      const itemAddConfig = componentConfig.leftPanel?.itemAddConfig;
 
-    const { sourceColumn, parentColumn } = itemAddConfig;
-    
-    if (!sourceColumn || !parentColumn) {
-      toast({
-        title: "설정 오류",
-        description: "현재 항목 ID 컬럼과 상위 항목 저장 컬럼을 설정해주세요.",
-        variant: "destructive",
-      });
-      return;
-    }
+      if (!itemAddConfig) {
+        toast({
+          title: "설정 오류",
+          description: "하위 항목 추가 설정이 없습니다.",
+          variant: "destructive",
+        });
+        return;
+      }
 
-    // 선택된 항목의 sourceColumn 값을 가져와서 parentColumn에 매핑
-    const sourceValue = item[sourceColumn];
-    
-    if (!sourceValue) {
-      toast({
-        title: "데이터 오류",
-        description: `선택한 항목의 ${sourceColumn} 값이 없습니다.`,
-        variant: "destructive",
-      });
-      return;
-    }
+      const { sourceColumn, parentColumn } = itemAddConfig;
 
-    // 좌측 패널 추가 모달 열기 (parentColumn 값 미리 채우기)
-    setAddModalPanel("left-item");
-    setAddModalFormData({ [parentColumn]: sourceValue });
-    setShowAddModal(true);
-  }, [componentConfig, toast]);
+      if (!sourceColumn || !parentColumn) {
+        toast({
+          title: "설정 오류",
+          description: "현재 항목 ID 컬럼과 상위 항목 저장 컬럼을 설정해주세요.",
+          variant: "destructive",
+        });
+        return;
+      }
+
+      // 선택된 항목의 sourceColumn 값을 가져와서 parentColumn에 매핑
+      const sourceValue = item[sourceColumn];
+
+      if (!sourceValue) {
+        toast({
+          title: "데이터 오류",
+          description: `선택한 항목의 ${sourceColumn} 값이 없습니다.`,
+          variant: "destructive",
+        });
+        return;
+      }
+
+      // 좌측 패널 추가 모달 열기 (parentColumn 값 미리 채우기)
+      setAddModalPanel("left-item");
+      setAddModalFormData({ [parentColumn]: sourceValue });
+      setShowAddModal(true);
+    },
+    [componentConfig, toast],
+  );
 
   // 추가 모달 저장
   const handleAddModalSave = useCallback(async () => {
     // 테이블명과 모달 컬럼 결정
     let tableName: string | undefined;
     let modalColumns: Array<{ name: string; label: string; required?: boolean }> | undefined;
-    let finalData = { ...addModalFormData };
-    
+    const finalData = { ...addModalFormData };
+
     if (addModalPanel === "left") {
       tableName = componentConfig.leftPanel?.tableName;
       modalColumns = componentConfig.leftPanel?.addModalColumns;
     } else if (addModalPanel === "right") {
       // 우측 패널: 중계 테이블 설정이 있는지 확인
       const addConfig = componentConfig.rightPanel?.addConfig;
-      
+
       if (addConfig?.targetTable) {
         // 중계 테이블 모드
         tableName = addConfig.targetTable;
         modalColumns = componentConfig.rightPanel?.addModalColumns;
-        
+
         // 좌측 패널에서 선택된 값 자동 채우기
         if (addConfig.leftPanelColumn && addConfig.targetColumn && selectedLeftItem) {
           const leftValue = selectedLeftItem[addConfig.leftPanelColumn];
           finalData[addConfig.targetColumn] = leftValue;
           console.log(`🔗 좌측 패널 값 자동 채움: ${addConfig.targetColumn} = ${leftValue}`);
         }
-        
+
         // 자동 채움 컬럼 추가
         if (addConfig.autoFillColumns) {
           Object.entries(addConfig.autoFillColumns).forEach(([key, value]) => {
@@ -825,7 +1180,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
     }
 
     // 필수 필드 검증
-    const requiredFields = (modalColumns || []).filter(col => col.required);
+    const requiredFields = (modalColumns || []).filter((col) => col.required);
     for (const field of requiredFields) {
       if (!addModalFormData[field.name]) {
         toast({
@@ -839,19 +1194,19 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
 
     try {
       console.log("📝 데이터 추가:", { tableName, data: finalData });
-      
+
       const result = await dataApi.createRecord(tableName, finalData);
-      
+
       if (result.success) {
         toast({
           title: "성공",
           description: "데이터가 성공적으로 추가되었습니다.",
         });
-        
+
         // 모달 닫기
         setShowAddModal(false);
         setAddModalFormData({});
-        
+
         // 데이터 새로고침
         if (addModalPanel === "left" || addModalPanel === "left-item") {
           // 좌측 패널 데이터 새로고침 (일반 추가 또는 하위 항목 추가)
@@ -869,19 +1224,19 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
       }
     } catch (error: any) {
       console.error("데이터 추가 오류:", error);
-      
+
       // 에러 메시지 추출
       let errorMessage = "데이터 추가 중 오류가 발생했습니다.";
-      
+
       if (error?.response?.data) {
         const responseData = error.response.data;
-        
+
         // 백엔드에서 반환한 에러 메시지 확인
         if (responseData.error) {
           // 중복 키 에러 처리
           if (responseData.error.includes("duplicate key")) {
             errorMessage = "이미 존재하는 값입니다. 다른 값을 입력해주세요.";
-          } 
+          }
           // NOT NULL 제약조건 에러
           else if (responseData.error.includes("null value")) {
             const match = responseData.error.match(/column "(\w+)"/);
@@ -900,7 +1255,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
           errorMessage = responseData.message;
         }
       }
-      
+
       toast({
         title: "오류",
         description: errorMessage,
@@ -916,7 +1271,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
       // localStorage에서 저장된 설정 불러오기
       const storageKey = `table_column_visibility_${leftTableName}_${currentUserId}`;
       const savedSettings = localStorage.getItem(storageKey);
-      
+
       if (savedSettings) {
         try {
           const parsed = JSON.parse(savedSettings) as ColumnVisibility[];
@@ -931,15 +1286,13 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
   // 🔧 컬럼 가시성 변경 시 localStorage에 저장 및 순서 업데이트
   useEffect(() => {
     const leftTableName = componentConfig.leftPanel?.tableName;
-    
+
     if (leftColumnVisibility.length > 0 && leftTableName && currentUserId) {
       // 순서 업데이트
-      const newOrder = leftColumnVisibility
-        .map((cv) => cv.columnName)
-        .filter((name) => name !== "__checkbox__"); // 체크박스 제외
-      
+      const newOrder = leftColumnVisibility.map((cv) => cv.columnName).filter((name) => name !== "__checkbox__"); // 체크박스 제외
+
       setLeftColumnOrder(newOrder);
-      
+
       // localStorage에 저장
       const storageKey = `table_column_visibility_${leftTableName}_${currentUserId}`;
       localStorage.setItem(storageKey, JSON.stringify(leftColumnVisibility));
@@ -962,6 +1315,26 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [leftFilters]);
 
+  // 🆕 전역 테이블 새로고침 이벤트 리스너
+  useEffect(() => {
+    const handleRefreshTable = () => {
+      if (!isDesignMode) {
+        console.log("🔄 [SplitPanel] refreshTable 이벤트 수신 - 데이터 새로고침");
+        loadLeftData();
+        // 선택된 항목이 있으면 우측 패널도 새로고침
+        if (selectedLeftItem) {
+          loadRightData(selectedLeftItem);
+        }
+      }
+    };
+
+    window.addEventListener("refreshTable", handleRefreshTable);
+
+    return () => {
+      window.removeEventListener("refreshTable", handleRefreshTable);
+    };
+  }, [isDesignMode, loadLeftData, loadRightData, selectedLeftItem]);
+
   // 리사이저 드래그 핸들러
   const handleMouseDown = (e: React.MouseEvent) => {
     if (!resizable) return;
@@ -1042,11 +1415,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                 {componentConfig.leftPanel?.title || "좌측 패널"}
               </CardTitle>
               {!isDesignMode && componentConfig.leftPanel?.showAdd && (
-                <Button 
-                  size="sm" 
-                  variant="outline"
-                  onClick={() => handleAddClick("left")}
-                >
+                <Button size="sm" variant="outline" onClick={() => handleAddClick("left")}>
                   <Plus className="mr-1 h-4 w-4" />
                   추가
                 </Button>
@@ -1054,7 +1423,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
             </div>
             {componentConfig.leftPanel?.showSearch && (
               <div className="relative mt-2">
-                <Search className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+                <Search className="text-muted-foreground absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2" />
                 <Input
                   placeholder="검색..."
                   value={leftSearchQuery}
@@ -1081,15 +1450,15 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                         </tr>
                       </thead>
                       <tbody className="divide-y divide-gray-200 bg-white">
-                        <tr className="hover:bg-gray-50 cursor-pointer">
-                          <td className="whitespace-nowrap px-3 py-2 text-sm">데이터 1-1</td>
-                          <td className="whitespace-nowrap px-3 py-2 text-sm">데이터 1-2</td>
-                          <td className="whitespace-nowrap px-3 py-2 text-sm">데이터 1-3</td>
+                        <tr className="cursor-pointer hover:bg-gray-50">
+                          <td className="px-3 py-2 text-sm whitespace-nowrap">데이터 1-1</td>
+                          <td className="px-3 py-2 text-sm whitespace-nowrap">데이터 1-2</td>
+                          <td className="px-3 py-2 text-sm whitespace-nowrap">데이터 1-3</td>
                         </tr>
-                        <tr className="hover:bg-gray-50 cursor-pointer">
-                          <td className="whitespace-nowrap px-3 py-2 text-sm">데이터 2-1</td>
-                          <td className="whitespace-nowrap px-3 py-2 text-sm">데이터 2-2</td>
-                          <td className="whitespace-nowrap px-3 py-2 text-sm">데이터 2-3</td>
+                        <tr className="cursor-pointer hover:bg-gray-50">
+                          <td className="px-3 py-2 text-sm whitespace-nowrap">데이터 2-1</td>
+                          <td className="px-3 py-2 text-sm whitespace-nowrap">데이터 2-2</td>
+                          <td className="px-3 py-2 text-sm whitespace-nowrap">데이터 2-3</td>
                         </tr>
                       </tbody>
                     </table>
@@ -1113,22 +1482,27 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                       : leftData;
 
                     // 🔧 가시성 처리된 컬럼 사용
-                    const columnsToShow = visibleLeftColumns.length > 0 
-                      ? visibleLeftColumns.map((col: any) => {
-                          const colName = typeof col === 'string' ? col : (col.name || col.columnName);
-                          return {
-                            name: colName,
-                            label: leftColumnLabels[colName] || (typeof col === 'object' ? col.label : null) || colName,
-                            width: typeof col === 'object' ? col.width : 150,
-                            align: (typeof col === 'object' ? col.align : "left") as "left" | "center" | "right"
-                          };
-                        })
-                      : Object.keys(filteredData[0] || {}).filter(key => key !== 'children' && key !== 'level').slice(0, 5).map(key => ({
-                          name: key,
-                          label: leftColumnLabels[key] || key,
-                          width: 150,
-                          align: "left" as const
-                        }));
+                    const columnsToShow =
+                      visibleLeftColumns.length > 0
+                        ? visibleLeftColumns.map((col: any) => {
+                            const colName = typeof col === "string" ? col : col.name || col.columnName;
+                            return {
+                              name: colName,
+                              label:
+                                leftColumnLabels[colName] || (typeof col === "object" ? col.label : null) || colName,
+                              width: typeof col === "object" ? col.width : 150,
+                              align: (typeof col === "object" ? col.align : "left") as "left" | "center" | "right",
+                            };
+                          })
+                        : Object.keys(filteredData[0] || {})
+                            .filter((key) => key !== "children" && key !== "level")
+                            .slice(0, 5)
+                            .map((key) => ({
+                              name: key,
+                              label: leftColumnLabels[key] || key,
+                              width: 150,
+                              align: "left" as const,
+                            }));
 
                     // 🔧 그룹화된 데이터 렌더링
                     if (groupedLeftData.length > 0) {
@@ -1136,7 +1510,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                         <div className="overflow-auto">
                           {groupedLeftData.map((group, groupIdx) => (
                             <div key={groupIdx} className="mb-4">
-                              <div className="bg-gray-100 px-3 py-2 font-semibold text-sm">
+                              <div className="bg-gray-100 px-3 py-2 text-sm font-semibold">
                                 {group.groupKey} ({group.count}개)
                               </div>
                               <table className="min-w-full divide-y divide-gray-200">
@@ -1145,8 +1519,11 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                                     {columnsToShow.map((col, idx) => (
                                       <th
                                         key={idx}
-                                        className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
-                                        style={{ width: col.width ? `${col.width}px` : 'auto', textAlign: col.align || "left" }}
+                                        className="px-3 py-2 text-left text-xs font-medium tracking-wider text-gray-500 uppercase"
+                                        style={{
+                                          width: col.width ? `${col.width}px` : "auto",
+                                          textAlign: col.align || "left",
+                                        }}
                                       >
                                         {col.label}
                                       </th>
@@ -1155,10 +1532,12 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                                 </thead>
                                 <tbody className="divide-y divide-gray-200 bg-white">
                                   {group.items.map((item, idx) => {
-                                    const sourceColumn = componentConfig.leftPanel?.itemAddConfig?.sourceColumn || 'id';
+                                    const sourceColumn = componentConfig.leftPanel?.itemAddConfig?.sourceColumn || "id";
                                     const itemId = item[sourceColumn] || item.id || item.ID || idx;
-                                    const isSelected = selectedLeftItem && (selectedLeftItem[sourceColumn] === itemId || selectedLeftItem === item);
-                                    
+                                    const isSelected =
+                                      selectedLeftItem &&
+                                      (selectedLeftItem[sourceColumn] === itemId || selectedLeftItem === item);
+
                                     return (
                                       <tr
                                         key={itemId}
@@ -1170,12 +1549,10 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                                         {columnsToShow.map((col, colIdx) => (
                                           <td
                                             key={colIdx}
-                                            className="whitespace-nowrap px-3 py-2 text-sm text-gray-900"
+                                            className="px-3 py-2 text-sm whitespace-nowrap text-gray-900"
                                             style={{ textAlign: col.align || "left" }}
                                           >
-                                            {item[col.name] !== null && item[col.name] !== undefined 
-                                              ? String(item[col.name]) 
-                                              : "-"}
+                                            {formatCellValue(col.name, item[col.name], leftCategoryMappings)}
                                           </td>
                                         ))}
                                       </tr>
@@ -1193,13 +1570,16 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                     return (
                       <div className="overflow-auto">
                         <table className="min-w-full divide-y divide-gray-200">
-                          <thead className="sticky top-0 bg-gray-50 z-10">
+                          <thead className="sticky top-0 z-10 bg-gray-50">
                             <tr>
                               {columnsToShow.map((col, idx) => (
                                 <th
                                   key={idx}
-                                  className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
-                                  style={{ width: col.width ? `${col.width}px` : 'auto', textAlign: col.align || "left" }}
+                                  className="px-3 py-2 text-left text-xs font-medium tracking-wider text-gray-500 uppercase"
+                                  style={{
+                                    width: col.width ? `${col.width}px` : "auto",
+                                    textAlign: col.align || "left",
+                                  }}
                                 >
                                   {col.label}
                                 </th>
@@ -1208,10 +1588,12 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                           </thead>
                           <tbody className="divide-y divide-gray-200 bg-white">
                             {filteredData.map((item, idx) => {
-                              const sourceColumn = componentConfig.leftPanel?.itemAddConfig?.sourceColumn || 'id';
+                              const sourceColumn = componentConfig.leftPanel?.itemAddConfig?.sourceColumn || "id";
                               const itemId = item[sourceColumn] || item.id || item.ID || idx;
-                              const isSelected = selectedLeftItem && (selectedLeftItem[sourceColumn] === itemId || selectedLeftItem === item);
-                              
+                              const isSelected =
+                                selectedLeftItem &&
+                                (selectedLeftItem[sourceColumn] === itemId || selectedLeftItem === item);
+
                               return (
                                 <tr
                                   key={itemId}
@@ -1223,12 +1605,10 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                                   {columnsToShow.map((col, colIdx) => (
                                     <td
                                       key={colIdx}
-                                      className="whitespace-nowrap px-3 py-2 text-sm text-gray-900"
+                                      className="px-3 py-2 text-sm whitespace-nowrap text-gray-900"
                                       style={{ textAlign: col.align || "left" }}
                                     >
-                                      {item[col.name] !== null && item[col.name] !== undefined 
-                                        ? String(item[col.name]) 
-                                        : "-"}
+                                      {formatCellValue(col.name, item[col.name], leftCategoryMappings)}
                                     </td>
                                   ))}
                                 </tr>
@@ -1282,30 +1662,31 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                     <span className="text-muted-foreground ml-2 text-sm">데이터를 불러오는 중...</span>
                   </div>
                 ) : (
-                (() => {
-                  // 검색 필터링 (클라이언트 사이드)
-                  const filteredLeftData = leftSearchQuery
-                    ? leftData.filter((item) => {
-                        const searchLower = leftSearchQuery.toLowerCase();
-                        return Object.entries(item).some(([key, value]) => {
-                          if (value === null || value === undefined) return false;
-                          return String(value).toLowerCase().includes(searchLower);
-                        });
-                      })
-                    : leftData;
+                  (() => {
+                    // 검색 필터링 (클라이언트 사이드)
+                    const filteredLeftData = leftSearchQuery
+                      ? leftData.filter((item) => {
+                          const searchLower = leftSearchQuery.toLowerCase();
+                          return Object.entries(item).some(([key, value]) => {
+                            if (value === null || value === undefined) return false;
+                            return String(value).toLowerCase().includes(searchLower);
+                          });
+                        })
+                      : leftData;
 
-                  // 재귀 렌더링 함수
-                  const renderTreeItem = (item: any, index: number): React.ReactNode => {
-                    const sourceColumn = componentConfig.leftPanel?.itemAddConfig?.sourceColumn || 'id';
-                    const itemId = item[sourceColumn] || item.id || item.ID || index;
-                    const isSelected = selectedLeftItem && (selectedLeftItem[sourceColumn] === itemId || selectedLeftItem === item);
-                    const hasChildren = item.children && item.children.length > 0;
-                    const isExpanded = expandedItems.has(itemId);
-                    const level = item.level || 0;
+                    // 재귀 렌더링 함수
+                    const renderTreeItem = (item: any, index: number): React.ReactNode => {
+                      const sourceColumn = componentConfig.leftPanel?.itemAddConfig?.sourceColumn || "id";
+                      const itemId = item[sourceColumn] || item.id || item.ID || index;
+                      const isSelected =
+                        selectedLeftItem && (selectedLeftItem[sourceColumn] === itemId || selectedLeftItem === item);
+                      const hasChildren = item.children && item.children.length > 0;
+                      const isExpanded = expandedItems.has(itemId);
+                      const level = item.level || 0;
 
-                    // 조인에 사용하는 leftColumn을 필수로 표시
-                    const leftColumn = componentConfig.rightPanel?.relation?.leftColumn;
-                    let displayFields: { label: string; value: any }[] = [];
+                      // 조인에 사용하는 leftColumn을 필수로 표시
+                      const leftColumn = componentConfig.rightPanel?.relation?.leftColumn;
+                      let displayFields: { label: string; value: any }[] = [];
 
                       // 디버그 로그
                       if (index === 0) {
@@ -1321,12 +1702,15 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                           value: item[leftColumn],
                         });
 
-                        // 추가로 다른 의미있는 필드 1-2개 표시 (name, title 등)
+                        // 추가로 다른 의미있는 필드 1-2개 표시 (동적)
                         const additionalKeys = Object.keys(item).filter(
-                          (k) => k !== "id" && k !== "ID" && k !== leftColumn && 
-                                 (k.includes("name") || k.includes("title") || k.includes("desc"))
+                          (k) =>
+                            k !== "id" &&
+                            k !== "ID" &&
+                            k !== leftColumn &&
+                            shouldShowField(k),
                         );
-                        
+
                         if (additionalKeys.length > 0) {
                           displayFields.push({
                             label: additionalKeys[0],
@@ -1350,115 +1734,119 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                         }
                       }
 
-                    const displayTitle = displayFields[0]?.value || item.name || item.title || `항목 ${index + 1}`;
-                    const displaySubtitle = displayFields[1]?.value || null;
+                      const displayTitle = displayFields[0]?.value || item.name || item.title || `항목 ${index + 1}`;
+                      const displaySubtitle = displayFields[1]?.value || null;
 
-                    return (
-                      <React.Fragment key={itemId}>
-                        {/* 현재 항목 */}
-                        <div
-                          className={`group relative cursor-pointer rounded-md p-3 transition-colors hover:bg-muted ${
-                            isSelected ? "bg-primary/10 text-primary" : "text-foreground"
-                          }`}
-                          style={{ paddingLeft: `${12 + level * 24}px` }}
-                        >
-                          <div 
-                            className="flex items-center gap-2"
-                            onClick={() => {
-                              handleLeftItemSelect(item);
-                              if (hasChildren) {
-                                toggleExpand(itemId);
-                              }
-                            }}
+                      return (
+                        <React.Fragment key={itemId}>
+                          {/* 현재 항목 */}
+                          <div
+                            className={`group hover:bg-muted relative cursor-pointer rounded-md p-3 transition-colors ${
+                              isSelected ? "bg-primary/10 text-primary" : "text-foreground"
+                            }`}
+                            style={{ paddingLeft: `${12 + level * 24}px` }}
                           >
-                            {/* 펼치기/접기 아이콘 */}
-                            {hasChildren ? (
-                              <div className="flex-shrink-0">
-                                {isExpanded ? (
-                                  <ChevronDown className="h-4 w-4 text-gray-500" />
-                                ) : (
-                                  <ChevronRight className="h-4 w-4 text-gray-500" />
+                            <div
+                              className="flex items-center gap-2"
+                              onClick={() => {
+                                handleLeftItemSelect(item);
+                                if (hasChildren) {
+                                  toggleExpand(itemId);
+                                }
+                              }}
+                            >
+                              {/* 펼치기/접기 아이콘 */}
+                              {hasChildren ? (
+                                <div className="flex-shrink-0">
+                                  {isExpanded ? (
+                                    <ChevronDown className="h-4 w-4 text-gray-500" />
+                                  ) : (
+                                    <ChevronRight className="h-4 w-4 text-gray-500" />
+                                  )}
+                                </div>
+                              ) : (
+                                <div className="w-5" />
+                              )}
+
+                              {/* 항목 내용 */}
+                              <div className="min-w-0 flex-1">
+                                <div className="truncate font-medium">{displayTitle}</div>
+                                {displaySubtitle && (
+                                  <div className="text-muted-foreground truncate text-xs">{displaySubtitle}</div>
                                 )}
                               </div>
-                            ) : (
-                              <div className="w-5" />
-                            )}
-                            
-                 {/* 항목 내용 */}
-                 <div className="flex-1 min-w-0">
-                   <div className="truncate font-medium">{displayTitle}</div>
-                   {displaySubtitle && <div className="truncate text-xs text-muted-foreground">{displaySubtitle}</div>}
-                 </div>
-                 
-                 {/* 항목별 버튼들 */}
-                 {!isDesignMode && (
-                   <div className="flex flex-shrink-0 items-center gap-1 opacity-0 transition-opacity group-hover:opacity-100">
-                     {/* 수정 버튼 */}
-                     <button
-                       onClick={(e) => {
-                         e.stopPropagation();
-                         handleEditClick("left", item);
-                       }}
-                       className="rounded p-1 hover:bg-gray-200 transition-colors"
-                       title="수정"
-                     >
-                       <Pencil className="h-4 w-4 text-gray-600" />
-                     </button>
-                     
-                     {/* 삭제 버튼 */}
-                     <button
-                       onClick={(e) => {
-                         e.stopPropagation();
-                         handleDeleteClick("left", item);
-                       }}
-                       className="rounded p-1 hover:bg-red-100 transition-colors"
-                       title="삭제"
-                     >
-                       <Trash2 className="h-4 w-4 text-red-600" />
-                     </button>
-                     
-                     {/* 항목별 추가 버튼 */}
-                     {componentConfig.leftPanel?.showItemAddButton && (
-                       <button
-                         onClick={(e) => {
-                           e.stopPropagation();
-                           handleItemAddClick(item);
-                         }}
-                         className="rounded p-1 hover:bg-gray-200 transition-colors"
-                         title="하위 항목 추가"
-                       >
-                         <Plus className="h-4 w-4 text-gray-600" />
-                       </button>
-                     )}
-                   </div>
-                 )}
-                          </div>
-                        </div>
-                        
-                        {/* 자식 항목들 (접혀있으면 표시 안함) */}
-                        {hasChildren && isExpanded && item.children.map((child: any, childIndex: number) => renderTreeItem(child, childIndex))}
-                      </React.Fragment>
-                    );
-                  };
 
-                  return filteredLeftData.length > 0 ? (
-                    // 실제 데이터 표시
-                    filteredLeftData.map((item, index) => renderTreeItem(item, index))
-                  ) : (
-                    // 검색 결과 없음
-                    <div className="py-8 text-center text-sm text-muted-foreground">
-                      {leftSearchQuery ? (
-                        <>
-                          <p>검색 결과가 없습니다.</p>
-                          <p className="mt-1 text-xs text-muted-foreground/70">다른 검색어를 입력해보세요.</p>
-                        </>
-                      ) : (
-                        "데이터가 없습니다."
-                      )}
-                    </div>
-                  );
-                })()
-              )}
+                              {/* 항목별 버튼들 */}
+                              {!isDesignMode && (
+                                <div className="flex flex-shrink-0 items-center gap-1 opacity-0 transition-opacity group-hover:opacity-100">
+                                  {/* 수정 버튼 */}
+                                  <button
+                                    onClick={(e) => {
+                                      e.stopPropagation();
+                                      handleEditClick("left", item);
+                                    }}
+                                    className="rounded p-1 transition-colors hover:bg-gray-200"
+                                    title="수정"
+                                  >
+                                    <Pencil className="h-4 w-4 text-gray-600" />
+                                  </button>
+
+                                  {/* 삭제 버튼 */}
+                                  <button
+                                    onClick={(e) => {
+                                      e.stopPropagation();
+                                      handleDeleteClick("left", item);
+                                    }}
+                                    className="rounded p-1 transition-colors hover:bg-red-100"
+                                    title="삭제"
+                                  >
+                                    <Trash2 className="h-4 w-4 text-red-600" />
+                                  </button>
+
+                                  {/* 항목별 추가 버튼 */}
+                                  {componentConfig.leftPanel?.showItemAddButton && (
+                                    <button
+                                      onClick={(e) => {
+                                        e.stopPropagation();
+                                        handleItemAddClick(item);
+                                      }}
+                                      className="rounded p-1 transition-colors hover:bg-gray-200"
+                                      title="하위 항목 추가"
+                                    >
+                                      <Plus className="h-4 w-4 text-gray-600" />
+                                    </button>
+                                  )}
+                                </div>
+                              )}
+                            </div>
+                          </div>
+
+                          {/* 자식 항목들 (접혀있으면 표시 안함) */}
+                          {hasChildren &&
+                            isExpanded &&
+                            item.children.map((child: any, childIndex: number) => renderTreeItem(child, childIndex))}
+                        </React.Fragment>
+                      );
+                    };
+
+                    return filteredLeftData.length > 0 ? (
+                      // 실제 데이터 표시
+                      filteredLeftData.map((item, index) => renderTreeItem(item, index))
+                    ) : (
+                      // 검색 결과 없음
+                      <div className="text-muted-foreground py-8 text-center text-sm">
+                        {leftSearchQuery ? (
+                          <>
+                            <p>검색 결과가 없습니다.</p>
+                            <p className="text-muted-foreground/70 mt-1 text-xs">다른 검색어를 입력해보세요.</p>
+                          </>
+                        ) : (
+                          "데이터가 없습니다."
+                        )}
+                      </div>
+                    );
+                  })()
+                )}
               </div>
             )}
           </CardContent>
@@ -1469,9 +1857,9 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
       {resizable && (
         <div
           onMouseDown={handleMouseDown}
-          className="group flex w-1 cursor-col-resize items-center justify-center bg-border transition-colors hover:bg-primary"
-          >
-          <GripVertical className="h-4 w-4 text-muted-foreground group-hover:text-primary-foreground" />
+          className="group bg-border hover:bg-primary flex w-1 cursor-col-resize items-center justify-center transition-colors"
+        >
+          <GripVertical className="text-muted-foreground group-hover:text-primary-foreground h-4 w-4" />
         </div>
       )}
 
@@ -1489,11 +1877,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
               {!isDesignMode && (
                 <div className="flex items-center gap-2">
                   {componentConfig.rightPanel?.showAdd && (
-                    <Button 
-                      size="sm" 
-                      variant="outline"
-                      onClick={() => handleAddClick("right")}
-                    >
+                    <Button size="sm" variant="outline" onClick={() => handleAddClick("right")}>
                       <Plus className="mr-1 h-4 w-4" />
                       추가
                     </Button>
@@ -1504,7 +1888,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
             </div>
             {componentConfig.rightPanel?.showSearch && (
               <div className="relative mt-2">
-                <Search className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+                <Search className="text-muted-foreground absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2" />
                 <Input
                   placeholder="검색..."
                   value={rightSearchQuery}
@@ -1520,8 +1904,8 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
               // 로딩 중
               <div className="flex h-full items-center justify-center">
                 <div className="text-center">
-                  <Loader2 className="mx-auto h-8 w-8 animate-spin text-primary" />
-                  <p className="mt-2 text-sm text-muted-foreground">데이터를 불러오는 중...</p>
+                  <Loader2 className="text-primary mx-auto h-8 w-8 animate-spin" />
+                  <p className="text-muted-foreground mt-2 text-sm">데이터를 불러오는 중...</p>
                 </div>
               </div>
             ) : rightData ? (
@@ -1542,87 +1926,95 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
 
                   // 테이블 모드 체크
                   const isTableMode = componentConfig.rightPanel?.displayMode === "table";
-                  
+
                   if (isTableMode) {
                     // 테이블 모드 렌더링
                     const displayColumns = componentConfig.rightPanel?.columns || [];
-                    const columnsToShow = displayColumns.length > 0 
-                      ? displayColumns.map(col => ({
-                          ...col,
-                          label: rightColumnLabels[col.name] || col.label || col.name
-                        }))
-                      : Object.keys(filteredData[0] || {}).filter(key => !key.toLowerCase().includes("password")).slice(0, 5).map(key => ({
-                          name: key,
-                          label: rightColumnLabels[key] || key,
-                          width: 150,
-                          align: "left" as const
-                        }));
+                    const columnsToShow =
+                      displayColumns.length > 0
+                        ? displayColumns.map((col) => ({
+                            ...col,
+                            label: rightColumnLabels[col.name] || col.label || col.name,
+                          }))
+                        : Object.keys(filteredData[0] || {})
+                            .filter((key) => shouldShowField(key))
+                            .slice(0, 5)
+                            .map((key) => ({
+                              name: key,
+                              label: rightColumnLabels[key] || key,
+                              width: 150,
+                              align: "left" as const,
+                            }));
 
                     return (
                       <div className="w-full">
-                        <div className="mb-2 text-xs text-muted-foreground">
+                        <div className="text-muted-foreground mb-2 text-xs">
                           {filteredData.length}개의 관련 데이터
                           {rightSearchQuery && filteredData.length !== rightData.length && (
-                            <span className="ml-1 text-primary">(전체 {rightData.length}개 중)</span>
+                            <span className="text-primary ml-1">(전체 {rightData.length}개 중)</span>
                           )}
                         </div>
                         <div className="overflow-auto">
                           <table className="min-w-full divide-y divide-gray-200">
-                            <thead className="sticky top-0 bg-gray-50 z-10">
+                            <thead className="sticky top-0 z-10 bg-gray-50">
                               <tr>
                                 {columnsToShow.map((col, idx) => (
                                   <th
                                     key={idx}
-                                    className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
-                                    style={{ width: col.width ? `${col.width}px` : 'auto', textAlign: col.align || "left" }}
+                                    className="px-3 py-2 text-left text-xs font-medium tracking-wider text-gray-500 uppercase"
+                                    style={{
+                                      width: col.width ? `${col.width}px` : "auto",
+                                      textAlign: col.align || "left",
+                                    }}
                                   >
                                     {col.label}
                                   </th>
                                 ))}
                                 {!isDesignMode && (
-                                  <th className="px-3 py-2 text-right text-xs font-medium text-gray-500 uppercase">작업</th>
+                                  <th className="px-3 py-2 text-right text-xs font-medium text-gray-500 uppercase">
+                                    작업
+                                  </th>
                                 )}
                               </tr>
                             </thead>
                             <tbody className="divide-y divide-gray-200 bg-white">
                               {filteredData.map((item, idx) => {
                                 const itemId = item.id || item.ID || idx;
-                                
+
                                 return (
-                                  <tr
-                                    key={itemId}
-                                    className="hover:bg-accent transition-colors"
-                                  >
+                                  <tr key={itemId} className="hover:bg-accent transition-colors">
                                     {columnsToShow.map((col, colIdx) => (
                                       <td
                                         key={colIdx}
-                                        className="whitespace-nowrap px-3 py-2 text-sm text-gray-900"
+                                        className="px-3 py-2 text-sm whitespace-nowrap text-gray-900"
                                         style={{ textAlign: col.align || "left" }}
                                       >
-                                        {item[col.name] !== null && item[col.name] !== undefined 
-                                          ? String(item[col.name]) 
-                                          : "-"}
+                                        {formatCellValue(col.name, item[col.name], rightCategoryMappings)}
                                       </td>
                                     ))}
                                     {!isDesignMode && (
-                                      <td className="whitespace-nowrap px-3 py-2 text-right text-sm">
+                                      <td className="px-3 py-2 text-right text-sm whitespace-nowrap">
                                         <div className="flex justify-end gap-1">
-                                          <button
-                                            onClick={(e) => {
-                                              e.stopPropagation();
-                                              handleEditClick("right", item);
-                                            }}
-                                            className="rounded p-1 hover:bg-gray-200 transition-colors"
-                                            title="수정"
-                                          >
-                                            <Pencil className="h-4 w-4 text-gray-600" />
-                                          </button>
+                                          {(componentConfig.rightPanel?.editButton?.enabled ?? true) && (
+                                            <Button
+                                              variant={componentConfig.rightPanel?.editButton?.buttonVariant || "outline"}
+                                              size="sm"
+                                              onClick={(e) => {
+                                                e.stopPropagation();
+                                                handleEditClick("right", item);
+                                              }}
+                                              className="h-7"
+                                            >
+                                              <Pencil className="h-3 w-3 mr-1" />
+                                              {componentConfig.rightPanel?.editButton?.buttonLabel || "수정"}
+                                            </Button>
+                                          )}
                                           <button
                                             onClick={(e) => {
                                               e.stopPropagation();
                                               handleDeleteClick("right", item);
                                             }}
-                                            className="rounded p-1 hover:bg-red-100 transition-colors"
+                                            className="rounded p-1 transition-colors hover:bg-red-100"
                                             title="삭제"
                                           >
                                             <Trash2 className="h-4 w-4 text-red-600" />
@@ -1643,54 +2035,109 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                   // 목록 모드 (기존)
                   return filteredData.length > 0 ? (
                     <div className="space-y-2">
-                      <div className="mb-2 text-xs text-muted-foreground">
+                      <div className="text-muted-foreground mb-2 text-xs">
                         {filteredData.length}개의 관련 데이터
                         {rightSearchQuery && filteredData.length !== rightData.length && (
-                          <span className="ml-1 text-primary">(전체 {rightData.length}개 중)</span>
+                          <span className="text-primary ml-1">(전체 {rightData.length}개 중)</span>
                         )}
                       </div>
                       {filteredData.map((item, index) => {
                         const itemId = item.id || item.ID || index;
                         const isExpanded = expandedRightItems.has(itemId);
-                        
+
                         // 우측 패널 표시 컬럼 설정 확인
                         const rightColumns = componentConfig.rightPanel?.columns;
-                        let firstValues: [string, any][] = [];
-                        let allValues: [string, any][] = [];
-
-                        if (index === 0) {
-                          console.log("🔍 우측 패널 표시 로직:");
-                          console.log("  - rightColumns:", rightColumns);
-                          console.log("  - item keys:", Object.keys(item));
-                        }
+                        let firstValues: [string, any, string][] = [];
+                        let allValues: [string, any, string][] = [];
 
                         if (rightColumns && rightColumns.length > 0) {
-                          // 설정된 컬럼만 표시
+                          // 설정된 컬럼만 표시 (엔티티 조인 컬럼 처리)
+                          const summaryCount = componentConfig.rightPanel?.summaryColumnCount ?? 3;
                           firstValues = rightColumns
-                            .slice(0, 3)
-                            .map((col) => [col.name, item[col.name]] as [string, any])
-                            .filter(([_, value]) => value !== null && value !== undefined && value !== "");
-                          
-                          allValues = rightColumns
-                            .map((col) => [col.name, item[col.name]] as [string, any])
+                            .slice(0, summaryCount)
+                            .map((col) => {
+                              // 🆕 엔티티 조인 컬럼 처리 (예: item_info.item_number → item_number 또는 item_id_name)
+                              let value = item[col.name];
+                              if (value === undefined && col.name.includes('.')) {
+                                const columnName = col.name.split('.').pop();
+                                // 1차: 컬럼명 그대로 (예: item_number)
+                                value = item[columnName || ''];
+                                // 2차: item_info.item_number → item_id_name 또는 item_id_item_number 형식 확인
+                                if (value === undefined) {
+                                  const parts = col.name.split('.');
+                                  if (parts.length === 2) {
+                                    const refTable = parts[0]; // item_info
+                                    const refColumn = parts[1]; // item_number 또는 item_name
+                                    // FK 컬럼명 추론: item_info → item_id
+                                    const fkColumn = refTable.replace('_info', '').replace('_mng', '') + '_id';
+                                    
+                                    // 백엔드에서 반환하는 별칭 패턴:
+                                    // 1) item_id_name (기본 referenceColumn)
+                                    // 2) item_id_item_name (추가 컬럼)
+                                    if (refColumn === refTable.replace('_info', '').replace('_mng', '') + '_number' ||
+                                        refColumn === refTable.replace('_info', '').replace('_mng', '') + '_code') {
+                                      // 기본 참조 컬럼 (item_number, customer_code 등)
+                                      const aliasKey = fkColumn + '_name';
+                                      value = item[aliasKey];
+                                    } else {
+                                      // 추가 컬럼 (item_name, customer_name 등)
+                                      const aliasKey = `${fkColumn}_${refColumn}`;
+                                      value = item[aliasKey];
+                                    }
+                                  }
+                                }
+                              }
+                              return [col.name, value, col.label] as [string, any, string];
+                            })
                             .filter(([_, value]) => value !== null && value !== undefined && value !== "");
 
-                          if (index === 0) {
-                            console.log("  ✅ 설정된 컬럼 사용:", rightColumns.map(c => c.name));
-                          }
+                          allValues = rightColumns
+                            .map((col) => {
+                              // 🆕 엔티티 조인 컬럼 처리
+                              let value = item[col.name];
+                              if (value === undefined && col.name.includes('.')) {
+                                const columnName = col.name.split('.').pop();
+                                // 1차: 컬럼명 그대로
+                                value = item[columnName || ''];
+                                // 2차: {fk_column}_name 또는 {fk_column}_{ref_column} 형식 확인
+                                if (value === undefined) {
+                                  const parts = col.name.split('.');
+                                  if (parts.length === 2) {
+                                    const refTable = parts[0]; // item_info
+                                    const refColumn = parts[1]; // item_number 또는 item_name
+                                    // FK 컬럼명 추론: item_info → item_id
+                                    const fkColumn = refTable.replace('_info', '').replace('_mng', '') + '_id';
+                                    
+                                    // 백엔드에서 반환하는 별칭 패턴:
+                                    // 1) item_id_name (기본 referenceColumn)
+                                    // 2) item_id_item_name (추가 컬럼)
+                                    if (refColumn === refTable.replace('_info', '').replace('_mng', '') + '_number' ||
+                                        refColumn === refTable.replace('_info', '').replace('_mng', '') + '_code') {
+                                      // 기본 참조 컬럼
+                                      const aliasKey = fkColumn + '_name';
+                                      value = item[aliasKey];
+                                    } else {
+                                      // 추가 컬럼
+                                      const aliasKey = `${fkColumn}_${refColumn}`;
+                                      value = item[aliasKey];
+                                    }
+                                  }
+                                }
+                              }
+                              return [col.name, value, col.label] as [string, any, string];
+                            })
+                            .filter(([_, value]) => value !== null && value !== undefined && value !== "");
                         } else {
                           // 설정 없으면 모든 컬럼 표시 (기존 로직)
+                          const summaryCount = componentConfig.rightPanel?.summaryColumnCount ?? 3;
                           firstValues = Object.entries(item)
                             .filter(([key]) => !key.toLowerCase().includes("id"))
-                            .slice(0, 3);
-                          
-                          allValues = Object.entries(item).filter(
-                            ([key, value]) => value !== null && value !== undefined && value !== "",
-                          );
+                            .slice(0, summaryCount)
+                            .map(([key, value]) => [key, value, ''] as [string, any, string]);
 
-                          if (index === 0) {
-                            console.log("  ⚠️ 컬럼 설정 없음, 모든 컬럼 표시");
-                          }
+                          allValues = Object.entries(item)
+                            .filter(([key, value]) => value !== null && value !== undefined && value !== "")
+                            .map(([key, value]) => [key, value, ''] as [string, any, string]);
                         }
 
                         return (
@@ -1701,32 +2148,67 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                             {/* 요약 정보 */}
                             <div className="p-3">
                               <div className="flex items-start justify-between gap-2">
-                                <div 
+                                <div
                                   className="min-w-0 flex-1 cursor-pointer"
                                   onClick={() => toggleRightItemExpansion(itemId)}
                                 >
-                                  {firstValues.map(([key, value], idx) => (
-                                    <div key={key} className="mb-1 last:mb-0">
-                                      <div className="text-xs font-medium text-muted-foreground">{getColumnLabel(key)}</div>
-                                      <div className="truncate text-sm text-foreground" title={String(value || "-")}>
-                                        {String(value || "-")}
-                                      </div>
-                                    </div>
-                                  ))}
+                                  <div className="flex flex-wrap items-center gap-x-4 gap-y-2">
+                                    {firstValues.map(([key, value, label], idx) => {
+                                      // 포맷 설정 및 볼드 설정 찾기
+                                      const colConfig = rightColumns?.find(c => c.name === key);
+                                      const format = colConfig?.format;
+                                      const boldValue = colConfig?.bold ?? false;
+                                      
+                                      // 숫자 포맷 적용
+                                      let displayValue = String(value || "-");
+                                      if (value !== null && value !== undefined && value !== "" && format) {
+                                        const numValue = typeof value === 'number' ? value : parseFloat(String(value));
+                                        if (!isNaN(numValue)) {
+                                          displayValue = numValue.toLocaleString('ko-KR', {
+                                            minimumFractionDigits: format.decimalPlaces ?? 0,
+                                            maximumFractionDigits: format.decimalPlaces ?? 10,
+                                            useGrouping: format.thousandSeparator ?? false,
+                                          });
+                                          if (format.prefix) displayValue = format.prefix + displayValue;
+                                          if (format.suffix) displayValue = displayValue + format.suffix;
+                                        }
+                                      }
+                                      
+                                      const showLabel = componentConfig.rightPanel?.summaryShowLabel ?? true;
+                                      
+                                      return (
+                                        <div key={key} className="flex items-baseline gap-1">
+                                          {showLabel && (
+                                            <span className="text-muted-foreground text-xs font-medium whitespace-nowrap">
+                                              {label || getColumnLabel(key)}:
+                                            </span>
+                                          )}
+                                          <span 
+                                            className={`text-foreground text-sm ${boldValue ? 'font-semibold' : ''}`}
+                                            title={displayValue}
+                                          >
+                                            {displayValue}
+                                          </span>
+                                        </div>
+                                      );
+                                    })}
+                                  </div>
                                 </div>
                                 <div className="flex flex-shrink-0 items-start gap-1 pt-1">
                                   {/* 수정 버튼 */}
-                                  {!isDesignMode && (
-                                    <button
+                                  {!isDesignMode && (componentConfig.rightPanel?.editButton?.enabled ?? true) && (
+                                    <Button
+                                      variant={componentConfig.rightPanel?.editButton?.buttonVariant || "outline"}
+                                      size="sm"
                                       onClick={(e) => {
                                         e.stopPropagation();
                                         handleEditClick("right", item);
                                       }}
-                                      className="rounded p-1 hover:bg-gray-200 transition-colors"
-                                      title="수정"
+                                      className="h-7"
                                     >
-                                      <Pencil className="h-4 w-4 text-gray-600" />
-                                    </button>
+                                      <Pencil className="h-3 w-3 mr-1" />
+                                      {componentConfig.rightPanel?.editButton?.buttonLabel || "수정"}
+                                    </Button>
                                   )}
                                   {/* 삭제 버튼 */}
                                   {!isDesignMode && (
@@ -1735,7 +2217,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                                         e.stopPropagation();
                                         handleDeleteClick("right", item);
                                       }}
-                                      className="rounded p-1 hover:bg-red-100 transition-colors"
+                                      className="rounded p-1 transition-colors hover:bg-red-100"
                                       title="삭제"
                                     >
                                       <Trash2 className="h-4 w-4 text-red-600" />
@@ -1744,12 +2226,12 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                                   {/* 확장/접기 버튼 */}
                                   <button
                                     onClick={() => toggleRightItemExpansion(itemId)}
-                                    className="rounded p-1 hover:bg-gray-200 transition-colors"
+                                    className="rounded p-1 transition-colors hover:bg-gray-200"
                                   >
                                     {isExpanded ? (
-                                      <ChevronUp className="h-5 w-5 text-muted-foreground" />
+                                      <ChevronUp className="text-muted-foreground h-5 w-5" />
                                     ) : (
-                                      <ChevronDown className="h-5 w-5 text-muted-foreground" />
+                                      <ChevronDown className="text-muted-foreground h-5 w-5" />
                                     )}
                                   </button>
                                 </div>
@@ -1762,30 +2244,51 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                                 <div className="mb-2 text-xs font-semibold">전체 상세 정보</div>
                                 <div className="bg-card overflow-auto rounded-md border">
                                   <table className="w-full text-sm">
-                                    <tbody className="divide-y divide-border">
-                                      {allValues.map(([key, value]) => (
-                                        <tr key={key} className="hover:bg-muted">
-                                          <td className="px-3 py-2 font-medium whitespace-nowrap text-muted-foreground">
-                                            {getColumnLabel(key)}
-                                          </td>
-                                          <td className="px-3 py-2 break-all text-foreground">{String(value)}</td>
-                                        </tr>
-                                      ))}
+                                    <tbody className="divide-border divide-y">
+                                      {allValues.map(([key, value, label]) => {
+                                        // 포맷 설정 찾기
+                                        const colConfig = rightColumns?.find(c => c.name === key);
+                                        const format = colConfig?.format;
+                                        
+                                        // 숫자 포맷 적용
+                                        let displayValue = String(value);
+                                        if (value !== null && value !== undefined && value !== "" && format) {
+                                          const numValue = typeof value === 'number' ? value : parseFloat(String(value));
+                                          if (!isNaN(numValue)) {
+                                            displayValue = numValue.toLocaleString('ko-KR', {
+                                              minimumFractionDigits: format.decimalPlaces ?? 0,
+                                              maximumFractionDigits: format.decimalPlaces ?? 10,
+                                              useGrouping: format.thousandSeparator ?? false,
+                                            });
+                                            if (format.prefix) displayValue = format.prefix + displayValue;
+                                            if (format.suffix) displayValue = displayValue + format.suffix;
+                                          }
+                                        }
+                                        
+                                        return (
+                                          <tr key={key} className="hover:bg-muted">
+                                            <td className="text-muted-foreground px-3 py-2 font-medium whitespace-nowrap">
+                                              {label || getColumnLabel(key)}
+                                            </td>
+                                            <td className="text-foreground px-3 py-2 break-all">{displayValue}</td>
+                                          </tr>
+                                        );
+                                      })}
                                     </tbody>
                                   </table>
                                 </div>
                               </div>
                             )}
                           </div>
-                        );
-                      })}
+                          );
+                        })}
                     </div>
                   ) : (
-                    <div className="py-8 text-center text-sm text-muted-foreground">
+                    <div className="text-muted-foreground py-8 text-center text-sm">
                       {rightSearchQuery ? (
                         <>
                           <p>검색 결과가 없습니다.</p>
-                          <p className="mt-1 text-xs text-muted-foreground/70">다른 검색어를 입력해보세요.</p>
+                          <p className="text-muted-foreground/70 mt-1 text-xs">다른 검색어를 입력해보세요.</p>
                         </>
                       ) : (
                         "관련 데이터가 없습니다."
@@ -1797,30 +2300,52 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                 // 상세 모드: 단일 객체를 상세 정보로 표시
                 (() => {
                   const rightColumns = componentConfig.rightPanel?.columns;
-                  let displayEntries: [string, any][] = [];
+                  let displayEntries: [string, any, string][] = [];
 
                   if (rightColumns && rightColumns.length > 0) {
+                    console.log("🔍 [디버깅] 상세 모드 표시 로직:");
+                    console.log("  📋 rightData 전체:", rightData);
+                    console.log("  📋 rightData keys:", Object.keys(rightData));
+                    console.log("  ⚙️ 설정된 컬럼:", rightColumns.map((c) => `${c.name} (${c.label})`));
+                    
                     // 설정된 컬럼만 표시
                     displayEntries = rightColumns
-                      .map((col) => [col.name, rightData[col.name]] as [string, any])
-                      .filter(([_, value]) => value !== null && value !== undefined && value !== "");
-                    
-                    console.log("🔍 상세 모드 표시 로직:");
-                    console.log("  ✅ 설정된 컬럼 사용:", rightColumns.map(c => c.name));
+                      .map((col) => {
+                        // 🆕 엔티티 조인 컬럼 처리 (예: item_info.item_name → item_name)
+                        let value = rightData[col.name];
+                        console.log(`  🔎 컬럼 "${col.name}": 직접 접근 = ${value}`);
+                        
+                        if (value === undefined && col.name.includes('.')) {
+                          const columnName = col.name.split('.').pop();
+                          value = rightData[columnName || ''];
+                          console.log(`    → 변환 후 "${columnName}" 접근 = ${value}`);
+                        }
+                        
+                        return [col.name, value, col.label] as [string, any, string];
+                      })
+                      .filter(([key, value]) => {
+                        const filtered = value === null || value === undefined || value === "";
+                        if (filtered) {
+                          console.log(`  ❌ 필터링됨: "${key}" (값: ${value})`);
+                        }
+                        return !filtered;
+                      });
+
+                    console.log("  ✅ 최종 표시할 항목:", displayEntries.length, "개");
                   } else {
                     // 설정 없으면 모든 컬럼 표시
-                    displayEntries = Object.entries(rightData).filter(
-                      ([_, value]) => value !== null && value !== undefined && value !== ""
-                    );
+                    displayEntries = Object.entries(rightData)
+                      .filter(([_, value]) => value !== null && value !== undefined && value !== "")
+                      .map(([key, value]) => [key, value, ""] as [string, any, string]);
                     console.log("  ⚠️ 컬럼 설정 없음, 모든 컬럼 표시");
                   }
 
                   return (
                     <div className="space-y-2">
-                      {displayEntries.map(([key, value]) => (
+                      {displayEntries.map(([key, value, label]) => (
                         <div key={key} className="bg-card rounded-lg border p-4 shadow-sm">
                           <div className="text-muted-foreground mb-1 text-xs font-semibold tracking-wide uppercase">
-                            {getColumnLabel(key)}
+                            {label || getColumnLabel(key)}
                           </div>
                           <div className="text-sm">{String(value)}</div>
                         </div>
@@ -1853,7 +2378,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
             ) : (
               // 선택 없음
               <div className="flex h-full items-center justify-center">
-                <div className="text-center text-sm text-muted-foreground">
+                <div className="text-muted-foreground text-center text-sm">
                   <p className="mb-2">좌측에서 항목을 선택하세요</p>
                   <p className="text-xs">선택한 항목의 상세 정보가 여기에 표시됩니다</p>
                 </div>
@@ -1868,14 +2393,14 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
         <DialogContent className="max-w-[95vw] sm:max-w-[500px]">
           <DialogHeader>
             <DialogTitle className="text-base sm:text-lg">
-              {addModalPanel === "left" 
+              {addModalPanel === "left"
                 ? `${componentConfig.leftPanel?.title} 추가`
                 : addModalPanel === "right"
-                ? `${componentConfig.rightPanel?.title} 추가`
-                : `하위 ${componentConfig.leftPanel?.title} 추가`}
+                  ? `${componentConfig.rightPanel?.title} 추가`
+                  : `하위 ${componentConfig.leftPanel?.title} 추가`}
             </DialogTitle>
             <DialogDescription className="text-xs sm:text-sm">
-              {addModalPanel === "left-item" 
+              {addModalPanel === "left-item"
                 ? "선택한 항목의 하위 항목을 추가합니다. 필수 항목을 입력해주세요."
                 : "새로운 데이터를 추가합니다. 필수 항목을 입력해주세요."}
             </DialogDescription>
@@ -1885,7 +2410,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
             {(() => {
               // 어떤 컬럼들을 표시할지 결정
               let modalColumns: Array<{ name: string; label: string; required?: boolean }> | undefined;
-              
+
               if (addModalPanel === "left") {
                 modalColumns = componentConfig.leftPanel?.addModalColumns;
               } else if (addModalPanel === "right") {
@@ -1893,42 +2418,44 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
               } else if (addModalPanel === "left-item") {
                 modalColumns = componentConfig.leftPanel?.itemAddConfig?.addModalColumns;
               }
-              
+
               return modalColumns?.map((col, index) => {
-              // 항목별 추가 버튼으로 열렸을 때, parentColumn은 미리 채워져 있고 수정 불가
-              const isItemAddPreFilled = addModalPanel === "left-item" 
-                && componentConfig.leftPanel?.itemAddConfig?.parentColumn === col.name 
-                && addModalFormData[col.name];
-              
-              // 우측 패널 추가 시, 조인 컬럼(rightColumn)은 미리 채워져 있고 수정 불가
-              const isRightJoinPreFilled = addModalPanel === "right"
-                && componentConfig.rightPanel?.rightColumn === col.name
-                && addModalFormData[col.name];
-              
-              const isPreFilled = isItemAddPreFilled || isRightJoinPreFilled;
-              
-              return (
-                <div key={index}>
-                  <Label htmlFor={col.name} className="text-xs sm:text-sm">
-                    {col.label} {col.required && <span className="text-destructive">*</span>}
-                    {isPreFilled && <span className="ml-2 text-[10px] text-blue-600">(자동 설정됨)</span>}
-                  </Label>
-                  <Input
-                    id={col.name}
-                    value={addModalFormData[col.name] || ""}
-                    onChange={(e) => {
-                      setAddModalFormData(prev => ({
-                        ...prev,
-                        [col.name]: e.target.value
-                      }));
-                    }}
-                    placeholder={`${col.label} 입력`}
-                    className="h-8 text-xs sm:h-10 sm:text-sm"
-                    required={col.required}
-                    disabled={isPreFilled}
-                  />
-                </div>
-              );
+                // 항목별 추가 버튼으로 열렸을 때, parentColumn은 미리 채워져 있고 수정 불가
+                const isItemAddPreFilled =
+                  addModalPanel === "left-item" &&
+                  componentConfig.leftPanel?.itemAddConfig?.parentColumn === col.name &&
+                  addModalFormData[col.name];
+
+                // 우측 패널 추가 시, 조인 컬럼(rightColumn)은 미리 채워져 있고 수정 불가
+                const isRightJoinPreFilled =
+                  addModalPanel === "right" &&
+                  componentConfig.rightPanel?.rightColumn === col.name &&
+                  addModalFormData[col.name];
+
+                const isPreFilled = isItemAddPreFilled || isRightJoinPreFilled;
+
+                return (
+                  <div key={index}>
+                    <Label htmlFor={col.name} className="text-xs sm:text-sm">
+                      {col.label} {col.required && <span className="text-destructive">*</span>}
+                      {isPreFilled && <span className="ml-2 text-[10px] text-blue-600">(자동 설정됨)</span>}
+                    </Label>
+                    <Input
+                      id={col.name}
+                      value={addModalFormData[col.name] || ""}
+                      onChange={(e) => {
+                        setAddModalFormData((prev) => ({
+                          ...prev,
+                          [col.name]: e.target.value,
+                        }));
+                      }}
+                      placeholder={`${col.label} 입력`}
+                      className="h-8 text-xs sm:h-10 sm:text-sm"
+                      required={col.required}
+                      disabled={isPreFilled}
+                    />
+                  </div>
+                );
               });
             })()}
           </div>
@@ -1941,10 +2468,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
             >
               취소
             </Button>
-            <Button
-              onClick={handleAddModalSave}
-              className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
-            >
+            <Button onClick={handleAddModalSave} className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm">
               <Save className="mr-1 h-3 w-3 sm:h-4 sm:w-4" />
               저장
             </Button>
@@ -1957,7 +2481,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
         <DialogContent className="max-w-[95vw] sm:max-w-[500px]">
           <DialogHeader>
             <DialogTitle className="text-base sm:text-lg">
-              {editModalPanel === "left" 
+              {editModalPanel === "left"
                 ? `${componentConfig.leftPanel?.title} 수정`
                 : `${componentConfig.rightPanel?.title} 수정`}
             </DialogTitle>
@@ -1967,90 +2491,91 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
           </DialogHeader>
 
           <div className="space-y-3 sm:space-y-4">
-            {editModalItem && (() => {
-              // 좌측 패널 수정: leftColumn만 수정 가능
-              if (editModalPanel === "left") {
-                const leftColumn = componentConfig.rightPanel?.relation?.leftColumn;
-                
-                // leftColumn만 표시
-                if (!leftColumn || editModalFormData[leftColumn] === undefined) {
-                  return <p className="text-sm text-muted-foreground">수정 가능한 컬럼이 없습니다.</p>;
-                }
+            {editModalItem &&
+              (() => {
+                // 좌측 패널 수정: leftColumn만 수정 가능
+                if (editModalPanel === "left") {
+                  const leftColumn = componentConfig.rightPanel?.relation?.leftColumn;
 
-                return (
-                  <div>
-                    <Label htmlFor={`edit-${leftColumn}`} className="text-xs sm:text-sm">
-                      {leftColumn}
-                    </Label>
-                    <Input
-                      id={`edit-${leftColumn}`}
-                      value={editModalFormData[leftColumn] || ""}
-                      onChange={(e) => {
-                        setEditModalFormData(prev => ({
-                          ...prev,
-                          [leftColumn]: e.target.value
-                        }));
-                      }}
-                      placeholder={`${leftColumn} 입력`}
-                      className="h-8 text-xs sm:h-10 sm:text-sm"
-                    />
-                  </div>
-                );
-              }
-              
-              // 우측 패널 수정: 우측 패널에 설정된 표시 컬럼들만
-              if (editModalPanel === "right") {
-                const rightColumns = componentConfig.rightPanel?.columns;
-                
-                if (rightColumns && rightColumns.length > 0) {
-                  // 설정된 컬럼만 표시
-                  return rightColumns.map((col) => (
-                    <div key={col.name}>
-                      <Label htmlFor={`edit-${col.name}`} className="text-xs sm:text-sm">
-                        {col.label || col.name}
+                  // leftColumn만 표시
+                  if (!leftColumn || editModalFormData[leftColumn] === undefined) {
+                    return <p className="text-muted-foreground text-sm">수정 가능한 컬럼이 없습니다.</p>;
+                  }
+
+                  return (
+                    <div>
+                      <Label htmlFor={`edit-${leftColumn}`} className="text-xs sm:text-sm">
+                        {leftColumn}
                       </Label>
                       <Input
-                        id={`edit-${col.name}`}
-                        value={editModalFormData[col.name] || ""}
+                        id={`edit-${leftColumn}`}
+                        value={editModalFormData[leftColumn] || ""}
                         onChange={(e) => {
-                          setEditModalFormData(prev => ({
+                          setEditModalFormData((prev) => ({
                             ...prev,
-                            [col.name]: e.target.value
+                            [leftColumn]: e.target.value,
                           }));
                         }}
-                        placeholder={`${col.label || col.name} 입력`}
+                        placeholder={`${leftColumn} 입력`}
                         className="h-8 text-xs sm:h-10 sm:text-sm"
                       />
                     </div>
-                  ));
-                } else {
-                  // 설정이 없으면 모든 컬럼 표시 (company_code, company_name 제외)
-                  return Object.entries(editModalFormData)
-                    .filter(([key]) => key !== 'company_code' && key !== 'company_name')
-                    .map(([key, value]) => (
-                      <div key={key}>
-                        <Label htmlFor={`edit-${key}`} className="text-xs sm:text-sm">
-                          {key}
+                  );
+                }
+
+                // 우측 패널 수정: 우측 패널에 설정된 표시 컬럼들만
+                if (editModalPanel === "right") {
+                  const rightColumns = componentConfig.rightPanel?.columns;
+
+                  if (rightColumns && rightColumns.length > 0) {
+                    // 설정된 컬럼만 표시
+                    return rightColumns.map((col) => (
+                      <div key={col.name}>
+                        <Label htmlFor={`edit-${col.name}`} className="text-xs sm:text-sm">
+                          {col.label || col.name}
                         </Label>
                         <Input
-                          id={`edit-${key}`}
-                          value={editModalFormData[key] || ""}
+                          id={`edit-${col.name}`}
+                          value={editModalFormData[col.name] || ""}
                           onChange={(e) => {
-                            setEditModalFormData(prev => ({
+                            setEditModalFormData((prev) => ({
                               ...prev,
-                              [key]: e.target.value
+                              [col.name]: e.target.value,
                             }));
                           }}
-                          placeholder={`${key} 입력`}
+                          placeholder={`${col.label || col.name} 입력`}
                           className="h-8 text-xs sm:h-10 sm:text-sm"
                         />
                       </div>
                     ));
+                  } else {
+                    // 설정이 없으면 모든 컬럼 표시 (민감한 필드 제외)
+                    return Object.entries(editModalFormData)
+                      .filter(([key]) => shouldShowField(key))
+                      .map(([key, value]) => (
+                        <div key={key}>
+                          <Label htmlFor={`edit-${key}`} className="text-xs sm:text-sm">
+                            {key}
+                          </Label>
+                          <Input
+                            id={`edit-${key}`}
+                            value={editModalFormData[key] || ""}
+                            onChange={(e) => {
+                              setEditModalFormData((prev) => ({
+                                ...prev,
+                                [key]: e.target.value,
+                              }));
+                            }}
+                            placeholder={`${key} 입력`}
+                            className="h-8 text-xs sm:h-10 sm:text-sm"
+                          />
+                        </div>
+                      ));
+                  }
                 }
-              }
-              
-              return null;
-            })()}
+
+                return null;
+              })()}
           </div>
 
           <DialogFooter className="gap-2 sm:gap-0">
@@ -2061,10 +2586,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
             >
               취소
             </Button>
-            <Button
-              onClick={handleEditModalSave}
-              className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
-            >
+            <Button onClick={handleEditModalSave} className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm">
               <Save className="mr-1 h-3 w-3 sm:h-4 sm:w-4" />
               저장
             </Button>
diff --git a/frontend/lib/registry/components/split-panel-layout/SplitPanelLayoutConfigPanel.tsx b/frontend/lib/registry/components/split-panel-layout/SplitPanelLayoutConfigPanel.tsx
index 57ab7c33..f59a16e6 100644
--- a/frontend/lib/registry/components/split-panel-layout/SplitPanelLayoutConfigPanel.tsx
+++ b/frontend/lib/registry/components/split-panel-layout/SplitPanelLayoutConfigPanel.tsx
@@ -4,13 +4,14 @@ import React, { useState, useMemo, useEffect } from "react";
 import { Label } from "@/components/ui/label";
 import { Input } from "@/components/ui/input";
 import { Switch } from "@/components/ui/switch";
+import { Checkbox } from "@/components/ui/checkbox";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { Slider } from "@/components/ui/slider";
-import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem } from "@/components/ui/command";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import { Button } from "@/components/ui/button";
 // Accordion 제거 - 단순 섹션으로 변경
-import { Check, ChevronsUpDown, ArrowRight, Plus, X } from "lucide-react";
+import { Check, ChevronsUpDown, ArrowRight, Plus, X, ArrowUp, ArrowDown } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { SplitPanelLayoutConfig } from "./types";
 import { TableInfo, ColumnInfo } from "@/types/screen";
@@ -24,6 +25,174 @@ interface SplitPanelLayoutConfigPanelProps {
   screenTableName?: string; // 현재 화면의 테이블명 (좌측 패널에서 사용)
 }
 
+/**
+ * 그룹핑 기준 컬럼 선택 컴포넌트
+ */
+const GroupByColumnsSelector: React.FC<{
+  tableName?: string;
+  selectedColumns: string[];
+  onChange: (columns: string[]) => void;
+}> = ({ tableName, selectedColumns, onChange }) => {
+  const [columns, setColumns] = useState<any[]>([]); // ColumnTypeInfo 타입
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    if (!tableName) {
+      setColumns([]);
+      return;
+    }
+
+    const loadColumns = async () => {
+      setLoading(true);
+      try {
+        const { tableManagementApi } = await import("@/lib/api/tableManagement");
+        const response = await tableManagementApi.getColumnList(tableName);
+        if (response.success && response.data && response.data.columns) {
+          setColumns(response.data.columns);
+        }
+      } catch (error) {
+        console.error("컬럼 정보 로드 실패:", error);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    loadColumns();
+  }, [tableName]);
+
+  const toggleColumn = (columnName: string) => {
+    const newSelection = selectedColumns.includes(columnName)
+      ? selectedColumns.filter((c) => c !== columnName)
+      : [...selectedColumns, columnName];
+    onChange(newSelection);
+  };
+
+  if (!tableName) {
+    return (
+      <div className="rounded-md border border-dashed p-3">
+        <p className="text-xs text-muted-foreground text-center">
+          먼저 우측 패널의 테이블을 선택하세요
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <Label className="text-xs">그룹핑 기준 컬럼</Label>
+      {loading ? (
+        <div className="rounded-md border p-3">
+          <p className="text-xs text-muted-foreground text-center">로딩 중...</p>
+        </div>
+      ) : columns.length === 0 ? (
+        <div className="rounded-md border border-dashed p-3">
+          <p className="text-xs text-muted-foreground text-center">컬럼을 찾을 수 없습니다</p>
+        </div>
+      ) : (
+        <div className="space-y-1 rounded-md border p-3 max-h-[200px] overflow-y-auto">
+          {columns.map((col) => (
+            <div key={col.columnName} className="flex items-center gap-2">
+              <Checkbox
+                id={`groupby-${col.columnName}`}
+                checked={selectedColumns.includes(col.columnName)}
+                onCheckedChange={() => toggleColumn(col.columnName)}
+              />
+              <label
+                htmlFor={`groupby-${col.columnName}`}
+                className="text-xs cursor-pointer flex-1"
+              >
+                {col.columnLabel || col.columnName}
+                <span className="text-muted-foreground ml-1">({col.columnName})</span>
+              </label>
+            </div>
+          ))}
+        </div>
+      )}
+      <p className="text-[10px] text-muted-foreground mt-1">
+        선택된 컬럼: {selectedColumns.length > 0 ? selectedColumns.join(", ") : "없음"}
+        <br />
+        같은 값을 가진 모든 레코드를 함께 불러옵니다
+      </p>
+    </div>
+  );
+};
+
+/**
+ * 화면 선택 Combobox 컴포넌트
+ */
+const ScreenSelector: React.FC<{
+  value?: number;
+  onChange: (screenId?: number) => void;
+}> = ({ value, onChange }) => {
+  const [open, setOpen] = useState(false);
+  const [screens, setScreens] = useState<Array<{ screenId: number; screenName: string; screenCode: string }>>([]);
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    const loadScreens = async () => {
+      setLoading(true);
+      try {
+        const { screenApi } = await import("@/lib/api/screen");
+        const response = await screenApi.getScreens({ page: 1, size: 1000 });
+        setScreens(response.data.map((s) => ({ screenId: s.screenId, screenName: s.screenName, screenCode: s.screenCode })));
+      } catch (error) {
+        console.error("화면 목록 로드 실패:", error);
+      } finally {
+        setLoading(false);
+      }
+    };
+    loadScreens();
+  }, []);
+
+  const selectedScreen = screens.find((s) => s.screenId === value);
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          role="combobox"
+          aria-expanded={open}
+          className="h-8 w-full justify-between text-xs"
+          disabled={loading}
+        >
+          {loading ? "로딩 중..." : selectedScreen ? selectedScreen.screenName : "화면 선택"}
+          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="p-0 w-[400px]" align="start">
+        <Command>
+          <CommandInput placeholder="화면 검색..." className="text-xs" />
+          <CommandList>
+            <CommandEmpty className="text-xs py-6 text-center">화면을 찾을 수 없습니다.</CommandEmpty>
+            <CommandGroup className="max-h-[300px] overflow-auto">
+              {screens.map((screen) => (
+                <CommandItem
+                  key={screen.screenId}
+                  value={`${screen.screenName.toLowerCase()} ${screen.screenCode.toLowerCase()} ${screen.screenId}`}
+                  onSelect={() => {
+                    onChange(screen.screenId === value ? undefined : screen.screenId);
+                    setOpen(false);
+                  }}
+                  className="text-xs"
+                >
+                  <Check
+                    className={cn("mr-2 h-4 w-4", value === screen.screenId ? "opacity-100" : "opacity-0")}
+                  />
+                  <div className="flex flex-col">
+                    <span className="font-medium">{screen.screenName}</span>
+                    <span className="text-[10px] text-muted-foreground">{screen.screenCode}</span>
+                  </div>
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+};
+
 /**
  * SplitPanelLayout 설정 패널
  */
@@ -39,6 +208,9 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
   const [loadedTableColumns, setLoadedTableColumns] = useState<Record<string, ColumnInfo[]>>({});
   const [loadingColumns, setLoadingColumns] = useState<Record<string, boolean>>({});
   const [allTables, setAllTables] = useState<any[]>([]); // 조인 모드용 전체 테이블 목록
+  // 엔티티 참조 테이블 컬럼
+  type EntityRefTable = { tableName: string; columns: ColumnInfo[] };
+  const [entityReferenceTables, setEntityReferenceTables] = useState<Record<string, EntityRefTable[]>>({});
 
   // 관계 타입
   const relationshipType = config.rightPanel?.relation?.type || "detail";
@@ -158,10 +330,16 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
         isPrimaryKey: col.isPrimaryKey || false, // PK 여부 추가
         codeCategory: col.codeCategory || col.code_category,
         codeValue: col.codeValue || col.code_value,
+        referenceTable: col.referenceTable || col.reference_table, // 🆕 참조 테이블
+        referenceColumn: col.referenceColumn || col.reference_column, // 🆕 참조 컬럼
+        displayColumn: col.displayColumn || col.display_column, // 🆕 표시 컬럼
       }));
 
       console.log(`✅ 테이블 ${tableName} 컬럼 ${columns.length}개 로드됨:`, columns);
       setLoadedTableColumns((prev) => ({ ...prev, [tableName]: columns }));
+      
+      // 🆕 엔티티 타입 컬럼의 참조 테이블 컬럼도 로드
+      await loadEntityReferenceColumns(tableName, columns);
     } catch (error) {
       console.error(`테이블 ${tableName} 컬럼 로드 실패:`, error);
       setLoadedTableColumns((prev) => ({ ...prev, [tableName]: [] }));
@@ -169,6 +347,59 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
       setLoadingColumns((prev) => ({ ...prev, [tableName]: false }));
     }
   };
+  
+  // 🆕 엔티티 참조 테이블의 컬럼 로드
+  const loadEntityReferenceColumns = async (sourceTableName: string, columns: ColumnInfo[]) => {
+    const entityColumns = columns.filter(
+      col => (col.input_type === 'entity' || col.webType === 'entity') && col.referenceTable
+    );
+    
+    if (entityColumns.length === 0) {
+      return;
+    }
+    
+    console.log(`🔗 테이블 ${sourceTableName}의 엔티티 참조 ${entityColumns.length}개 발견:`,
+      entityColumns.map(c => `${c.columnName} -> ${c.referenceTable}`)
+    );
+    
+    const referenceTableData: Array<{tableName: string, columns: ColumnInfo[]}> = [];
+    
+    // 각 참조 테이블의 컬럼 로드
+    for (const entityCol of entityColumns) {
+      const refTableName = entityCol.referenceTable!;
+      
+      // 이미 로드했으면 스킵
+      if (referenceTableData.some(t => t.tableName === refTableName)) continue;
+      
+      try {
+        const refColumnsResponse = await tableTypeApi.getColumns(refTableName);
+        const refColumns: ColumnInfo[] = (refColumnsResponse || []).map((col: any) => ({
+          tableName: col.tableName || refTableName,
+          columnName: col.columnName || col.column_name,
+          columnLabel: col.displayName || col.columnLabel || col.column_label || col.columnName || col.column_name,
+          dataType: col.dataType || col.data_type || col.dbType,
+          input_type: col.inputType || col.input_type,
+        }));
+        
+        referenceTableData.push({ tableName: refTableName, columns: refColumns });
+        console.log(`  ✅ 참조 테이블 ${refTableName} 컬럼 ${refColumns.length}개 로드됨`);
+      } catch (error) {
+        console.error(`  ❌ 참조 테이블 ${refTableName} 컬럼 로드 실패:`, error);
+      }
+    }
+    
+    // 참조 테이블 정보 저장
+    setEntityReferenceTables(prev => ({
+      ...prev,
+      [sourceTableName]: referenceTableData
+    }));
+    
+    console.log(`✅ [엔티티 참조] ${sourceTableName}의 참조 테이블 저장 완료:`, {
+      sourceTableName,
+      referenceTableCount: referenceTableData.length,
+      referenceTables: referenceTableData.map(t => `${t.tableName}(${t.columns.length}개)`),
+    });
+  };
 
   // 좌측/우측 테이블이 변경되면 해당 테이블의 컬럼 로드
   useEffect(() => {
@@ -253,17 +484,21 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
     onChange(newConfig);
   };
 
+  // 좌측 테이블명
+  const leftTableName = config.leftPanel?.tableName || screenTableName || "";
+  
   // 좌측 테이블 컬럼 (로드된 컬럼 사용)
   const leftTableColumns = useMemo(() => {
-    const tableName = config.leftPanel?.tableName || screenTableName;
-    return tableName ? loadedTableColumns[tableName] || [] : [];
-  }, [loadedTableColumns, config.leftPanel?.tableName, screenTableName]);
+    return leftTableName ? loadedTableColumns[leftTableName] || [] : [];
+  }, [loadedTableColumns, leftTableName]);
 
+  // 우측 테이블명
+  const rightTableName = config.rightPanel?.tableName || "";
+  
   // 우측 테이블 컬럼 (로드된 컬럼 사용)
   const rightTableColumns = useMemo(() => {
-    const tableName = config.rightPanel?.tableName;
-    return tableName ? loadedTableColumns[tableName] || [] : [];
-  }, [loadedTableColumns, config.rightPanel?.tableName]);
+    return rightTableName ? loadedTableColumns[rightTableName] || [] : [];
+  }, [loadedTableColumns, rightTableName]);
 
   // 테이블 데이터 로딩 상태 확인
   if (!tables || tables.length === 0) {
@@ -737,6 +972,41 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
                   className="space-y-2 rounded-md border bg-white p-2"
                 >
                   <div className="flex items-center gap-2">
+                    {/* 순서 변경 버튼 */}
+                    <div className="flex flex-col gap-0.5">
+                      <Button
+                        size="sm"
+                        variant="ghost"
+                        onClick={() => {
+                          if (index === 0) return;
+                          const newColumns = [...(config.leftPanel?.columns || [])];
+                          [newColumns[index - 1], newColumns[index]] = [newColumns[index], newColumns[index - 1]];
+                          updateLeftPanel({ columns: newColumns });
+                        }}
+                        disabled={index === 0}
+                        className="h-4 w-6 p-0"
+                        title="위로 이동"
+                      >
+                        <ArrowUp className="h-3 w-3" />
+                      </Button>
+                      <Button
+                        size="sm"
+                        variant="ghost"
+                        onClick={() => {
+                          const columns = config.leftPanel?.columns || [];
+                          if (index === columns.length - 1) return;
+                          const newColumns = [...columns];
+                          [newColumns[index], newColumns[index + 1]] = [newColumns[index + 1], newColumns[index]];
+                          updateLeftPanel({ columns: newColumns });
+                        }}
+                        disabled={index === (config.leftPanel?.columns || []).length - 1}
+                        className="h-4 w-6 p-0"
+                        title="아래로 이동"
+                      >
+                        <ArrowDown className="h-3 w-3" />
+                      </Button>
+                    </div>
+                    
                     <div className="flex-1">
                       <Popover>
                         <PopoverTrigger asChild>
@@ -745,7 +1015,7 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
                             role="combobox"
                             className="h-8 w-full justify-between text-xs"
                           >
-                            {col.name || "컬럼 선택"}
+                            {col.label || col.name || "컬럼 선택"}
                             <ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
                           </Button>
                         </PopoverTrigger>
@@ -753,35 +1023,78 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
                           <Command>
                             <CommandInput placeholder="컬럼 검색..." className="text-xs" />
                             <CommandEmpty className="text-xs">컬럼을 찾을 수 없습니다.</CommandEmpty>
-                            <CommandGroup className="max-h-[200px] overflow-auto">
-                              {leftTableColumns.map((column) => (
-                                <CommandItem
-                                  key={column.columnName}
-                                  value={column.columnName}
-                                  onSelect={(value) => {
-                                    const newColumns = [...(config.leftPanel?.columns || [])];
-                                    newColumns[index] = {
-                                      ...newColumns[index],
-                                      name: value,
-                                      label: column.columnLabel || value,
-                                    };
-                                    updateLeftPanel({ columns: newColumns });
-                                  }}
-                                  className="text-xs"
-                                >
-                                  <Check
-                                    className={cn(
-                                      "mr-2 h-3 w-3",
-                                      col.name === column.columnName ? "opacity-100" : "opacity-0"
-                                    )}
-                                  />
-                                  {column.columnLabel || column.columnName}
-                                  <span className="ml-2 text-[10px] text-gray-500">
-                                    ({column.columnName})
-                                  </span>
-                                </CommandItem>
+                            <div className="max-h-[300px] overflow-auto">
+                              {/* 기본 테이블 컬럼 */}
+                              <CommandGroup heading={leftTableName ? `📋 ${leftTableName} 컬럼` : "📋 기본 컬럼"}>
+                                {leftTableColumns.map((column) => (
+                                  <CommandItem
+                                    key={column.columnName}
+                                    value={column.columnName}
+                                    onSelect={(value) => {
+                                      const newColumns = [...(config.leftPanel?.columns || [])];
+                                      newColumns[index] = {
+                                        ...newColumns[index],
+                                        name: value,
+                                        label: column.columnLabel || value,
+                                      };
+                                      updateLeftPanel({ columns: newColumns });
+                                      // Popover 닫기
+                                      document.body.click();
+                                    }}
+                                    className="text-xs"
+                                  >
+                                    <Check
+                                      className={cn(
+                                        "mr-2 h-3 w-3",
+                                        col.name === column.columnName ? "opacity-100" : "opacity-0"
+                                      )}
+                                    />
+                                    {column.columnLabel || column.columnName}
+                                    <span className="ml-2 text-[10px] text-gray-500">
+                                      ({column.columnName})
+                                    </span>
+                                  </CommandItem>
+                                ))}
+                              </CommandGroup>
+                              
+                              {/* 🆕 엔티티 참조 테이블 컬럼 */}
+                              {leftTableName && entityReferenceTables[leftTableName]?.map((refTable) => (
+                                <CommandGroup key={refTable.tableName} heading={`🔗 ${refTable.tableName} (엔티티)`}>
+                                  {refTable.columns.map((column) => {
+                                    const fullColumnName = `${refTable.tableName}.${column.columnName}`;
+                                    return (
+                                      <CommandItem
+                                        key={fullColumnName}
+                                        value={fullColumnName}
+                                        onSelect={(value) => {
+                                          const newColumns = [...(config.leftPanel?.columns || [])];
+                                          newColumns[index] = {
+                                            ...newColumns[index],
+                                            name: value,
+                                            label: column.columnLabel || column.columnName,
+                                          };
+                                          updateLeftPanel({ columns: newColumns });
+                                          // Popover 닫기
+                                          document.body.click();
+                                        }}
+                                        className="text-xs pl-6"
+                                      >
+                                        <Check
+                                          className={cn(
+                                            "mr-2 h-3 w-3",
+                                            col.name === fullColumnName ? "opacity-100" : "opacity-0"
+                                          )}
+                                        />
+                                        {column.columnLabel || column.columnName}
+                                        <span className="ml-2 text-[10px] text-gray-500">
+                                          ({column.columnName})
+                                        </span>
+                                      </CommandItem>
+                                    );
+                                  })}
+                                </CommandGroup>
                               ))}
-                            </CommandGroup>
+                            </div>
                           </Command>
                         </PopoverContent>
                       </Popover>
@@ -1133,6 +1446,44 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
           </Select>
         </div>
 
+        {/* 요약 표시 설정 (LIST 모드에서만) */}
+        {config.rightPanel?.displayMode === "list" && (
+          <div className="space-y-3 rounded-lg border border-gray-200 bg-gray-50 p-3">
+            <Label className="text-sm font-semibold">요약 표시 설정</Label>
+            
+            <div className="space-y-2">
+              <Label className="text-xs">표시할 컬럼 개수</Label>
+              <Input
+                type="number"
+                min="1"
+                max="10"
+                value={config.rightPanel?.summaryColumnCount ?? 3}
+                onChange={(e) => {
+                  const value = parseInt(e.target.value) || 3;
+                  updateRightPanel({ summaryColumnCount: value });
+                }}
+                className="bg-white"
+              />
+              <p className="text-xs text-gray-500">
+                접기 전에 표시할 컬럼 개수 (기본: 3개)
+              </p>
+            </div>
+
+            <div className="flex items-center justify-between space-x-2">
+              <div className="flex-1">
+                <Label className="text-xs">라벨 표시</Label>
+                <p className="text-xs text-gray-500">컬럼명 표시 여부</p>
+              </div>
+              <Checkbox
+                checked={config.rightPanel?.summaryShowLabel ?? true}
+                onCheckedChange={(checked) => {
+                  updateRightPanel({ summaryShowLabel: checked as boolean });
+                }}
+              />
+            </div>
+          </div>
+        )}
+
         {/* 컬럼 매핑 - 조인 모드에서만 표시 */}
         {relationshipType !== "detail" && (
           <div className="space-y-3 rounded-lg border border-gray-200 bg-gray-50 p-3">
@@ -1304,6 +1655,41 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
                   className="space-y-2 rounded-md border bg-white p-2"
                 >
                   <div className="flex items-center gap-2">
+                    {/* 순서 변경 버튼 */}
+                    <div className="flex flex-col gap-0.5">
+                      <Button
+                        size="sm"
+                        variant="ghost"
+                        onClick={() => {
+                          if (index === 0) return;
+                          const newColumns = [...(config.rightPanel?.columns || [])];
+                          [newColumns[index - 1], newColumns[index]] = [newColumns[index], newColumns[index - 1]];
+                          updateRightPanel({ columns: newColumns });
+                        }}
+                        disabled={index === 0}
+                        className="h-4 w-6 p-0"
+                        title="위로 이동"
+                      >
+                        <ArrowUp className="h-3 w-3" />
+                      </Button>
+                      <Button
+                        size="sm"
+                        variant="ghost"
+                        onClick={() => {
+                          const columns = config.rightPanel?.columns || [];
+                          if (index === columns.length - 1) return;
+                          const newColumns = [...columns];
+                          [newColumns[index], newColumns[index + 1]] = [newColumns[index + 1], newColumns[index]];
+                          updateRightPanel({ columns: newColumns });
+                        }}
+                        disabled={index === (config.rightPanel?.columns || []).length - 1}
+                        className="h-4 w-6 p-0"
+                        title="아래로 이동"
+                      >
+                        <ArrowDown className="h-3 w-3" />
+                      </Button>
+                    </div>
+                    
                     <div className="flex-1">
                       <Popover>
                         <PopoverTrigger asChild>
@@ -1312,7 +1698,7 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
                             role="combobox"
                             className="h-8 w-full justify-between text-xs"
                           >
-                            {col.name || "컬럼 선택"}
+                            {col.label || col.name || "컬럼 선택"}
                             <ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
                           </Button>
                         </PopoverTrigger>
@@ -1320,35 +1706,78 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
                           <Command>
                             <CommandInput placeholder="컬럼 검색..." className="text-xs" />
                             <CommandEmpty className="text-xs">컬럼을 찾을 수 없습니다.</CommandEmpty>
-                            <CommandGroup className="max-h-[200px] overflow-auto">
-                              {rightTableColumns.map((column) => (
-                                <CommandItem
-                                  key={column.columnName}
-                                  value={column.columnName}
-                                  onSelect={(value) => {
-                                    const newColumns = [...(config.rightPanel?.columns || [])];
-                                    newColumns[index] = {
-                                      ...newColumns[index],
-                                      name: value,
-                                      label: column.columnLabel || value,
-                                    };
-                                    updateRightPanel({ columns: newColumns });
-                                  }}
-                                  className="text-xs"
-                                >
-                                  <Check
-                                    className={cn(
-                                      "mr-2 h-3 w-3",
-                                      col.name === column.columnName ? "opacity-100" : "opacity-0"
-                                    )}
-                                  />
-                                  {column.columnLabel || column.columnName}
-                                  <span className="ml-2 text-[10px] text-gray-500">
-                                    ({column.columnName})
-                                  </span>
-                                </CommandItem>
+                            <div className="max-h-[300px] overflow-auto">
+                              {/* 기본 테이블 컬럼 */}
+                              <CommandGroup heading={rightTableName ? `📋 ${rightTableName} 컬럼` : "📋 기본 컬럼"}>
+                                {rightTableColumns.map((column) => (
+                                  <CommandItem
+                                    key={column.columnName}
+                                    value={column.columnName}
+                                    onSelect={(value) => {
+                                      const newColumns = [...(config.rightPanel?.columns || [])];
+                                      newColumns[index] = {
+                                        ...newColumns[index],
+                                        name: value,
+                                        label: column.columnLabel || value,
+                                      };
+                                      updateRightPanel({ columns: newColumns });
+                                      // Popover 닫기
+                                      document.body.click();
+                                    }}
+                                    className="text-xs"
+                                  >
+                                    <Check
+                                      className={cn(
+                                        "mr-2 h-3 w-3",
+                                        col.name === column.columnName ? "opacity-100" : "opacity-0"
+                                      )}
+                                    />
+                                    {column.columnLabel || column.columnName}
+                                    <span className="ml-2 text-[10px] text-gray-500">
+                                      ({column.columnName})
+                                    </span>
+                                  </CommandItem>
+                                ))}
+                              </CommandGroup>
+                              
+                              {/* 🆕 엔티티 참조 테이블 컬럼 */}
+                              {rightTableName && entityReferenceTables[rightTableName]?.map((refTable) => (
+                                <CommandGroup key={refTable.tableName} heading={`🔗 ${refTable.tableName} (엔티티)`}>
+                                  {refTable.columns.map((column) => {
+                                    const fullColumnName = `${refTable.tableName}.${column.columnName}`;
+                                    return (
+                                      <CommandItem
+                                        key={fullColumnName}
+                                        value={fullColumnName}
+                                        onSelect={(value) => {
+                                          const newColumns = [...(config.rightPanel?.columns || [])];
+                                          newColumns[index] = {
+                                            ...newColumns[index],
+                                            name: value,
+                                            label: column.columnLabel || column.columnName,
+                                          };
+                                          updateRightPanel({ columns: newColumns });
+                                          // Popover 닫기
+                                          document.body.click();
+                                        }}
+                                        className="text-xs pl-6"
+                                      >
+                                        <Check
+                                          className={cn(
+                                            "mr-2 h-3 w-3",
+                                            col.name === fullColumnName ? "opacity-100" : "opacity-0"
+                                          )}
+                                        />
+                                        {column.columnLabel || column.columnName}
+                                        <span className="ml-2 text-[10px] text-gray-500">
+                                          ({column.columnName})
+                                        </span>
+                                      </CommandItem>
+                                    );
+                                  })}
+                                </CommandGroup>
                               ))}
-                            </CommandGroup>
+                            </div>
                           </Command>
                         </PopoverContent>
                       </Popover>
@@ -1431,6 +1860,150 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
                       </div>
                     </div>
                   )}
+                  
+                  {/* LIST 모드: 볼드 설정 */}
+                  {!isTableMode && (
+                    <div className="space-y-2 border-t pt-2">
+                      <Label className="text-[10px] text-gray-600">요약 표시 옵션</Label>
+                      <label className="flex items-center gap-1.5 text-[10px] cursor-pointer">
+                        <input
+                          type="checkbox"
+                          checked={col.bold ?? false}
+                          onChange={(e) => {
+                            const newColumns = [...(config.rightPanel?.columns || [])];
+                            newColumns[index] = { ...newColumns[index], bold: e.target.checked };
+                            updateRightPanel({ columns: newColumns });
+                          }}
+                          className="h-3 w-3"
+                        />
+                        값 굵게 표시
+                      </label>
+                    </div>
+                  )}
+                  
+                  {/* 🆕 숫자 타입 포맷 설정 */}
+                  {(() => {
+                    // 컬럼 타입 확인
+                    const column = rightTableColumns.find(c => c.columnName === col.name);
+                    const isNumeric = column && ['numeric', 'decimal', 'integer', 'bigint', 'double precision', 'real'].includes(column.dataType?.toLowerCase() || '');
+                    
+                    if (!isNumeric) return null;
+                    
+                    return (
+                      <div className="space-y-2 border-t pt-2">
+                        <Label className="text-[10px] text-gray-600">숫자 포맷 설정</Label>
+                        
+                        <div className="grid grid-cols-2 gap-2">
+                          {/* 천 단위 구분자 */}
+                          <label className="flex items-center gap-1.5 text-[10px] cursor-pointer">
+                            <input
+                              type="checkbox"
+                              checked={col.format?.thousandSeparator ?? false}
+                              onChange={(e) => {
+                                const newColumns = [...(config.rightPanel?.columns || [])];
+                                newColumns[index] = {
+                                  ...newColumns[index],
+                                  format: {
+                                    ...newColumns[index].format,
+                                    thousandSeparator: e.target.checked,
+                                  },
+                                };
+                                updateRightPanel({ columns: newColumns });
+                              }}
+                              className="h-3 w-3"
+                            />
+                            천 단위 구분자 (,)
+                          </label>
+                          
+                          {/* 소수점 자릿수 */}
+                          <div className="space-y-1">
+                            <Label className="text-[10px] text-gray-600">소수점</Label>
+                            <Input
+                              type="number"
+                              min="0"
+                              max="10"
+                              placeholder="0"
+                              value={col.format?.decimalPlaces ?? ''}
+                              onChange={(e) => {
+                                const newColumns = [...(config.rightPanel?.columns || [])];
+                                newColumns[index] = {
+                                  ...newColumns[index],
+                                  format: {
+                                    ...newColumns[index].format,
+                                    decimalPlaces: e.target.value ? parseInt(e.target.value) : undefined,
+                                  },
+                                };
+                                updateRightPanel({ columns: newColumns });
+                              }}
+                              className="h-7 text-xs"
+                            />
+                          </div>
+                        </div>
+                        
+                        <div className="grid grid-cols-2 gap-2">
+                          {/* 접두사 */}
+                          <div className="space-y-1">
+                            <Label className="text-[10px] text-gray-600">접두사</Label>
+                            <Input
+                              type="text"
+                              placeholder="₩, $, 등"
+                              value={col.format?.prefix ?? ''}
+                              onChange={(e) => {
+                                const newColumns = [...(config.rightPanel?.columns || [])];
+                                newColumns[index] = {
+                                  ...newColumns[index],
+                                  format: {
+                                    ...newColumns[index].format,
+                                    prefix: e.target.value || undefined,
+                                  },
+                                };
+                                updateRightPanel({ columns: newColumns });
+                              }}
+                              className="h-7 text-xs"
+                            />
+                          </div>
+                          
+                          {/* 접미사 */}
+                          <div className="space-y-1">
+                            <Label className="text-[10px] text-gray-600">접미사</Label>
+                            <Input
+                              type="text"
+                              placeholder="원, 개, 등"
+                              value={col.format?.suffix ?? ''}
+                              onChange={(e) => {
+                                const newColumns = [...(config.rightPanel?.columns || [])];
+                                newColumns[index] = {
+                                  ...newColumns[index],
+                                  format: {
+                                    ...newColumns[index].format,
+                                    suffix: e.target.value || undefined,
+                                  },
+                                };
+                                updateRightPanel({ columns: newColumns });
+                              }}
+                              className="h-7 text-xs"
+                            />
+                          </div>
+                        </div>
+                        
+                        {/* 미리보기 */}
+                        {(col.format?.thousandSeparator || col.format?.prefix || col.format?.suffix || col.format?.decimalPlaces !== undefined) && (
+                          <div className="rounded bg-gray-100 p-2">
+                            <p className="text-[10px] text-gray-600 mb-1">미리보기:</p>
+                            <p className="text-xs font-medium">
+                              {col.format?.prefix || ''}
+                              {(1234567.89).toLocaleString('ko-KR', {
+                                minimumFractionDigits: col.format?.decimalPlaces ?? 0,
+                                maximumFractionDigits: col.format?.decimalPlaces ?? 10,
+                                useGrouping: col.format?.thousandSeparator ?? false,
+                              })}
+                              {col.format?.suffix || ''}
+                            </p>
+                          </div>
+                        )}
+                      </div>
+                    );
+                  })()}
                 </div>
               );
               })
@@ -1700,6 +2273,272 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
               />
       </div>
 
+      {/* 우측 패널 중복 제거 */}
+      <div className="space-y-4 border-t pt-4 mt-4">
+        <div className="flex items-center justify-between">
+          <div>
+            <h3 className="text-sm font-semibold">중복 데이터 제거</h3>
+            <p className="text-xs text-muted-foreground">
+              같은 값을 가진 데이터를 하나로 통합하여 표시
+            </p>
+          </div>
+          <Switch
+            checked={config.rightPanel?.deduplication?.enabled ?? false}
+            onCheckedChange={(checked) => {
+              if (checked) {
+                updateRightPanel({
+                  deduplication: {
+                    enabled: true,
+                    groupByColumn: "",
+                    keepStrategy: "latest",
+                    sortColumn: "start_date",
+                  },
+                });
+              } else {
+                updateRightPanel({ deduplication: undefined });
+              }
+            }}
+          />
+        </div>
+
+        {config.rightPanel?.deduplication?.enabled && (
+          <div className="space-y-3 pl-4 border-l-2">
+            {/* 중복 제거 기준 컬럼 */}
+            <div>
+              <Label className="text-xs">중복 제거 기준 컬럼</Label>
+              <Select
+                value={config.rightPanel?.deduplication?.groupByColumn || ""}
+                onValueChange={(value) =>
+                  updateRightPanel({
+                    deduplication: { ...config.rightPanel?.deduplication!, groupByColumn: value },
+                  })
+                }
+              >
+                <SelectTrigger className="h-8 text-xs">
+                  <SelectValue placeholder="기준 컬럼 선택" />
+                </SelectTrigger>
+                <SelectContent>
+                  {rightTableColumns.map((col) => (
+                    <SelectItem key={col.columnName} value={col.columnName}>
+                      {col.columnLabel || col.columnName}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              <p className="text-[10px] text-muted-foreground mt-1">
+                이 컬럼의 값이 같은 데이터들 중 하나만 표시합니다
+              </p>
+            </div>
+
+            {/* 유지 전략 */}
+            <div>
+              <Label className="text-xs">유지 전략</Label>
+              <Select
+                value={config.rightPanel?.deduplication?.keepStrategy || "latest"}
+                onValueChange={(value: any) =>
+                  updateRightPanel({
+                    deduplication: { ...config.rightPanel?.deduplication!, keepStrategy: value },
+                  })
+                }
+              >
+                <SelectTrigger className="h-8 text-xs">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="latest">최신 데이터 (가장 최근)</SelectItem>
+                  <SelectItem value="earliest">최초 데이터 (가장 오래된)</SelectItem>
+                  <SelectItem value="current_date">현재 유효한 데이터 (날짜 기준)</SelectItem>
+                  <SelectItem value="base_price">기준단가로 설정된 데이터</SelectItem>
+                </SelectContent>
+              </Select>
+              <p className="text-[10px] text-muted-foreground mt-1">
+                {config.rightPanel?.deduplication?.keepStrategy === "latest" && "가장 최근에 추가된 데이터를 표시합니다"}
+                {config.rightPanel?.deduplication?.keepStrategy === "earliest" && "가장 먼저 추가된 데이터를 표시합니다"}
+                {config.rightPanel?.deduplication?.keepStrategy === "current_date" && "오늘 날짜 기준으로 유효한 기간의 데이터를 표시합니다"}
+                {config.rightPanel?.deduplication?.keepStrategy === "base_price" && "기준단가(base_price)로 체크된 데이터를 표시합니다"}
+              </p>
+            </div>
+
+            {/* 정렬 기준 컬럼 (latest/earliest만) */}
+            {(config.rightPanel?.deduplication?.keepStrategy === "latest" ||
+              config.rightPanel?.deduplication?.keepStrategy === "earliest") && (
+              <div>
+                <Label className="text-xs">정렬 기준 컬럼</Label>
+                <Select
+                  value={config.rightPanel?.deduplication?.sortColumn || ""}
+                  onValueChange={(value) =>
+                    updateRightPanel({
+                      deduplication: { ...config.rightPanel?.deduplication!, sortColumn: value },
+                    })
+                  }
+                >
+                  <SelectTrigger className="h-8 text-xs">
+                    <SelectValue placeholder="정렬 기준 컬럼 선택" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {rightTableColumns
+                      .filter(col => col.dataType === 'date' || col.dataType === 'timestamp' || col.columnName.includes('date'))
+                      .map((col) => (
+                        <SelectItem key={col.columnName} value={col.columnName}>
+                          {col.columnLabel || col.columnName}
+                        </SelectItem>
+                      ))}
+                  </SelectContent>
+                </Select>
+                <p className="text-[10px] text-muted-foreground mt-1">
+                  이 컬럼의 값으로 최신/최초를 판단합니다 (보통 날짜 컬럼)
+                </p>
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+
+      {/* 🆕 우측 패널 수정 버튼 설정 */}
+      <div className="space-y-4 border-t pt-4 mt-4">
+        <div className="flex items-center justify-between">
+          <div>
+            <h3 className="text-sm font-semibold">수정 버튼 설정</h3>
+            <p className="text-xs text-muted-foreground">
+              우측 리스트의 수정 버튼 동작 방식 설정
+            </p>
+          </div>
+          <Switch
+            checked={config.rightPanel?.editButton?.enabled ?? true}
+            onCheckedChange={(checked) => {
+              updateRightPanel({
+                editButton: {
+                  enabled: checked,
+                  mode: config.rightPanel?.editButton?.mode || "auto",
+                  buttonLabel: config.rightPanel?.editButton?.buttonLabel,
+                  buttonVariant: config.rightPanel?.editButton?.buttonVariant,
+                },
+              });
+            }}
+          />
+        </div>
+
+        {(config.rightPanel?.editButton?.enabled ?? true) && (
+          <div className="space-y-3 pl-4 border-l-2">
+            {/* 수정 모드 */}
+            <div>
+              <Label className="text-xs">수정 모드</Label>
+              <Select
+                value={config.rightPanel?.editButton?.mode || "auto"}
+                onValueChange={(value: "auto" | "modal") =>
+                  updateRightPanel({
+                    editButton: {
+                      ...config.rightPanel?.editButton,
+                      mode: value,
+                      enabled: config.rightPanel?.editButton?.enabled ?? true,
+                    },
+                  })
+                }
+              >
+                <SelectTrigger className="h-8 text-xs">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="auto">자동 편집 (인라인)</SelectItem>
+                  <SelectItem value="modal">커스텀 모달 화면</SelectItem>
+                </SelectContent>
+              </Select>
+              <p className="text-[10px] text-muted-foreground mt-1">
+                {config.rightPanel?.editButton?.mode === "modal"
+                  ? "지정한 화면을 모달로 열어 데이터를 수정합니다"
+                  : "현재 위치에서 직접 데이터를 수정합니다"}
+              </p>
+            </div>
+
+            {/* 모달 화면 선택 (modal 모드일 때만) */}
+            {config.rightPanel?.editButton?.mode === "modal" && (
+              <div>
+                <Label className="text-xs">모달 화면</Label>
+                <ScreenSelector
+                  value={config.rightPanel?.editButton?.modalScreenId}
+                  onChange={(screenId) =>
+                    updateRightPanel({
+                      editButton: {
+                        ...config.rightPanel?.editButton!,
+                        modalScreenId: screenId,
+                      },
+                    })
+                  }
+                />
+                <p className="text-[10px] text-muted-foreground mt-1">
+                  수정 버튼 클릭 시 열릴 화면을 선택하세요
+                </p>
+              </div>
+            )}
+
+            {/* 버튼 라벨 */}
+            <div>
+              <Label className="text-xs">버튼 라벨</Label>
+              <Input
+                value={config.rightPanel?.editButton?.buttonLabel || "수정"}
+                onChange={(e) =>
+                  updateRightPanel({
+                    editButton: {
+                      ...config.rightPanel?.editButton!,
+                      buttonLabel: e.target.value,
+                      enabled: config.rightPanel?.editButton?.enabled ?? true,
+                      mode: config.rightPanel?.editButton?.mode || "auto",
+                    },
+                  })
+                }
+                className="h-8 text-xs"
+                placeholder="수정"
+              />
+            </div>
+
+            {/* 버튼 스타일 */}
+            <div>
+              <Label className="text-xs">버튼 스타일</Label>
+              <Select
+                value={config.rightPanel?.editButton?.buttonVariant || "outline"}
+                onValueChange={(value: any) =>
+                  updateRightPanel({
+                    editButton: {
+                      ...config.rightPanel?.editButton!,
+                      buttonVariant: value,
+                      enabled: config.rightPanel?.editButton?.enabled ?? true,
+                      mode: config.rightPanel?.editButton?.mode || "auto",
+                    },
+                  })
+                }
+              >
+                <SelectTrigger className="h-8 text-xs">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="default">기본 (파란색)</SelectItem>
+                  <SelectItem value="outline">외곽선</SelectItem>
+                  <SelectItem value="ghost">투명</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+
+            {/* 🆕 그룹핑 기준 컬럼 설정 (modal 모드일 때만 표시) */}
+            {config.rightPanel?.editButton?.mode === "modal" && (
+              <GroupByColumnsSelector
+                tableName={config.rightPanel?.tableName}
+                selectedColumns={config.rightPanel?.editButton?.groupByColumns || []}
+                onChange={(columns) => {
+                  updateRightPanel({
+                    editButton: {
+                      ...config.rightPanel?.editButton!,
+                      groupByColumns: columns,
+                      enabled: config.rightPanel?.editButton?.enabled ?? true,
+                      mode: config.rightPanel?.editButton?.mode || "auto",
+                    },
+                  });
+                }}
+              />
+            )}
+          </div>
+        )}
+      </div>
+
       {/* 레이아웃 설정 */}
       <div className="space-y-4 border-t pt-4 mt-4">
 
diff --git a/frontend/lib/registry/components/split-panel-layout/types.ts b/frontend/lib/registry/components/split-panel-layout/types.ts
index 95d98085..e5471566 100644
--- a/frontend/lib/registry/components/split-panel-layout/types.ts
+++ b/frontend/lib/registry/components/split-panel-layout/types.ts
@@ -21,6 +21,14 @@ export interface SplitPanelLayoutConfig {
       width?: number;
       sortable?: boolean; // 정렬 가능 여부 (테이블 모드)
       align?: "left" | "center" | "right"; // 정렬 (테이블 모드)
+      format?: {
+        type?: "number" | "currency" | "date" | "text"; // 포맷 타입
+        thousandSeparator?: boolean; // 천 단위 구분자 (type: "number" | "currency")
+        decimalPlaces?: number; // 소수점 자릿수
+        prefix?: string; // 접두사 (예: "₩", "$")
+        suffix?: string; // 접미사 (예: "원", "개")
+        dateFormat?: string; // 날짜 포맷 (type: "date")
+      };
     }>;
     // 추가 모달에서 입력받을 컬럼 설정
     addModalColumns?: Array<{
@@ -69,12 +77,23 @@ export interface SplitPanelLayoutConfig {
     showAdd?: boolean;
     showEdit?: boolean; // 수정 버튼
     showDelete?: boolean; // 삭제 버튼
+    summaryColumnCount?: number; // 요약에서 표시할 컬럼 개수 (기본: 3)
+    summaryShowLabel?: boolean; // 요약에서 라벨 표시 여부 (기본: true)
     columns?: Array<{
       name: string;
       label: string;
       width?: number;
       sortable?: boolean; // 정렬 가능 여부 (테이블 모드)
       align?: "left" | "center" | "right"; // 정렬 (테이블 모드)
+      bold?: boolean; // 요약에서 값 굵게 표시 여부 (LIST 모드)
+      format?: {
+        type?: "number" | "currency" | "date" | "text"; // 포맷 타입
+        thousandSeparator?: boolean; // 천 단위 구분자 (type: "number" | "currency")
+        decimalPlaces?: number; // 소수점 자릿수
+        prefix?: string; // 접두사 (예: "₩", "$")
+        suffix?: string; // 접미사 (예: "원", "개")
+        dateFormat?: string; // 날짜 포맷 (type: "date")
+      };
     }>;
     // 추가 모달에서 입력받을 컬럼 설정
     addModalColumns?: Array<{
@@ -113,6 +132,24 @@ export interface SplitPanelLayoutConfig {
 
     // 🆕 컬럼 값 기반 데이터 필터링
     dataFilter?: DataFilterConfig;
+
+    // 🆕 중복 제거 설정
+    deduplication?: {
+      enabled: boolean; // 중복 제거 활성화
+      groupByColumn: string; // 중복 제거 기준 컬럼 (예: "item_id")
+      keepStrategy: "latest" | "earliest" | "base_price" | "current_date"; // 어떤 행을 유지할지
+      sortColumn?: string; // keepStrategy가 latest/earliest일 때 정렬 기준 컬럼
+    };
+
+    // 🆕 수정 버튼 설정
+    editButton?: {
+      enabled: boolean; // 수정 버튼 표시 여부 (기본: true)
+      mode: "auto" | "modal"; // auto: 자동 편집 (인라인), modal: 커스텀 모달
+      modalScreenId?: number; // 모달로 열 화면 ID (mode: "modal"일 때)
+      buttonLabel?: string; // 버튼 라벨 (기본: "수정")
+      buttonVariant?: "default" | "outline" | "ghost"; // 버튼 스타일 (기본: "outline")
+      groupByColumns?: string[]; // 🆕 그룹핑 기준 컬럼들 (예: ["customer_id", "item_id"])
+    };
   };
 
   // 레이아웃 설정
diff --git a/frontend/lib/registry/components/table-list/SingleTableWithSticky.tsx b/frontend/lib/registry/components/table-list/SingleTableWithSticky.tsx
index edfb4b7f..45143dc3 100644
--- a/frontend/lib/registry/components/table-list/SingleTableWithSticky.tsx
+++ b/frontend/lib/registry/components/table-list/SingleTableWithSticky.tsx
@@ -61,16 +61,15 @@ export const SingleTableWithSticky: React.FC<SingleTableWithStickyProps> = ({
       className="relative flex h-full flex-col overflow-hidden bg-background shadow-sm"
       style={{
         width: "100%",
-        maxWidth: "100%",
+        height: "100%",
         boxSizing: "border-box",
       }}
     >
-      <div className="relative flex-1 overflow-x-auto overflow-y-auto">
+      <div className="relative flex-1 overflow-auto">
       <Table
         className="w-full"
         style={{
           width: "100%",
-          minWidth: "100%",
           tableLayout: "auto", // 테이블 크기 자동 조정
           boxSizing: "border-box",
         }}
diff --git a/frontend/lib/registry/components/table-list/TableListComponent.tsx b/frontend/lib/registry/components/table-list/TableListComponent.tsx
index 16734059..74d81211 100644
--- a/frontend/lib/registry/components/table-list/TableListComponent.tsx
+++ b/frontend/lib/registry/components/table-list/TableListComponent.tsx
@@ -230,16 +230,16 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
   }
 
   const componentStyle: React.CSSProperties = {
-    width: calculatedWidth,
-    height: isDesignMode ? "auto" : "100%",
-    minHeight: isDesignMode ? "300px" : "100%",
+    position: "relative",
     display: "flex",
     flexDirection: "column",
     backgroundColor: "hsl(var(--background))",
     overflow: "hidden",
-    ...style,
-    // width는 항상 100%로 고정 (부모 컨테이너가 gridColumns로 크기 제어)
+    boxSizing: "border-box",
     width: "100%",
+    height: "100%",
+    minHeight: isDesignMode ? "300px" : "100%",
+    ...style, // style prop이 위의 기본값들을 덮어씀
   };
 
   // ========================================
@@ -1107,6 +1107,29 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
       });
     }
 
+    // 🆕 modalDataStore에 선택된 데이터 자동 저장 (테이블명 기반 dataSourceId)
+    if (tableConfig.selectedTable && selectedRowsData.length > 0) {
+      import("@/stores/modalDataStore").then(({ useModalDataStore }) => {
+        const modalItems = selectedRowsData.map((row, idx) => ({
+          id: getRowKey(row, idx),
+          originalData: row,
+          additionalData: {},
+        }));
+        
+        useModalDataStore.getState().setData(tableConfig.selectedTable!, modalItems);
+        console.log("✅ [TableList] modalDataStore에 데이터 저장:", {
+          dataSourceId: tableConfig.selectedTable,
+          count: modalItems.length,
+        });
+      });
+    } else if (tableConfig.selectedTable && selectedRowsData.length === 0) {
+      // 선택 해제 시 데이터 제거
+      import("@/stores/modalDataStore").then(({ useModalDataStore }) => {
+        useModalDataStore.getState().clearData(tableConfig.selectedTable!);
+        console.log("🗑️ [TableList] modalDataStore 데이터 제거:", tableConfig.selectedTable);
+      });
+    }
+
     const allRowsSelected = data.every((row, index) => newSelectedRows.has(getRowKey(row, index)));
     setIsAllSelected(allRowsSelected && data.length > 0);
   };
@@ -1127,6 +1150,23 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
           selectedRowsData: data,
         });
       }
+
+      // 🆕 modalDataStore에 전체 데이터 저장
+      if (tableConfig.selectedTable && data.length > 0) {
+        import("@/stores/modalDataStore").then(({ useModalDataStore }) => {
+          const modalItems = data.map((row, idx) => ({
+            id: getRowKey(row, idx),
+            originalData: row,
+            additionalData: {},
+          }));
+          
+          useModalDataStore.getState().setData(tableConfig.selectedTable!, modalItems);
+          console.log("✅ [TableList] modalDataStore에 전체 데이터 저장:", {
+            dataSourceId: tableConfig.selectedTable,
+            count: modalItems.length,
+          });
+        });
+      }
     } else {
       setSelectedRows(new Set());
       setIsAllSelected(false);
@@ -1137,6 +1177,14 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
       if (onFormDataChange) {
         onFormDataChange({ selectedRows: [], selectedRowsData: [] });
       }
+
+      // 🆕 modalDataStore 데이터 제거
+      if (tableConfig.selectedTable) {
+        import("@/stores/modalDataStore").then(({ useModalDataStore }) => {
+          useModalDataStore.getState().clearData(tableConfig.selectedTable!);
+          console.log("🗑️ [TableList] modalDataStore 전체 데이터 제거:", tableConfig.selectedTable);
+        });
+      }
     }
   };
 
@@ -1766,6 +1814,22 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
     }
   }, [tableConfig.refreshInterval, isDesignMode]);
 
+  // 🆕 전역 테이블 새로고침 이벤트 리스너
+  useEffect(() => {
+    const handleRefreshTable = () => {
+      if (tableConfig.selectedTable && !isDesignMode) {
+        console.log("🔄 [TableList] refreshTable 이벤트 수신 - 데이터 새로고침");
+        setRefreshTrigger((prev) => prev + 1);
+      }
+    };
+
+    window.addEventListener("refreshTable", handleRefreshTable);
+
+    return () => {
+      window.removeEventListener("refreshTable", handleRefreshTable);
+    };
+  }, [tableConfig.selectedTable, isDesignMode]);
+
   // 초기 컬럼 너비 측정 (한 번만)
   useEffect(() => {
     if (!hasInitializedWidths.current && visibleColumns.length > 0) {
@@ -1875,7 +1939,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
     onDragStart: isDesignMode ? onDragStart : undefined,
     onDragEnd: isDesignMode ? onDragEnd : undefined,
     draggable: isDesignMode,
-    className: cn(className, isDesignMode && "cursor-move"),
+    className: cn("w-full h-full", className, isDesignMode && "cursor-move"), // customer-item-mapping과 동일
     style: componentStyle,
   };
 
@@ -1992,17 +2056,27 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
 
         {/* 테이블 컨테이너 */}
         <div
-          className="flex w-full max-w-full flex-1 flex-col overflow-hidden"
-          style={{ marginTop: `${tableConfig.filter?.bottomSpacing ?? 8}px` }}
+          className="flex flex-1 flex-col"
+          style={{ 
+            marginTop: `${tableConfig.filter?.bottomSpacing ?? 8}px`,
+            width: "100%",
+            height: "100%",
+            overflow: "hidden",
+          }}
         >
           {/* 스크롤 영역 */}
           <div
-            className="bg-background flex-1 w-full max-w-full overflow-x-auto overflow-y-auto"
-            style={{ position: "relative" }}
+            className="bg-background flex-1"
+            style={{ 
+              position: "relative",
+              width: "100%",
+              height: "100%",
+              overflow: "auto",
+            }}
           >
             {/* 테이블 */}
             <table
-              className={cn("table-mobile-fixed w-full max-w-full", !showGridLines && "hide-grid")}
+              className={cn("table-mobile-fixed", !showGridLines && "hide-grid")}
               style={{
                 borderCollapse: "collapse",
                 width: "100%",
diff --git a/frontend/lib/registry/components/table-list/index.ts b/frontend/lib/registry/components/table-list/index.ts
index 9a68a3c4..34da1fb6 100644
--- a/frontend/lib/registry/components/table-list/index.ts
+++ b/frontend/lib/registry/components/table-list/index.ts
@@ -96,7 +96,7 @@ export const TableListDefinition = createComponentDefinition({
     // 데이터 로딩
     autoLoad: true,
   },
-  defaultSize: { width: 120, height: 600 }, // 테이블 리스트 기본 높이
+  defaultSize: { width: 1000, height: 600 }, // 테이블 리스트 기본 크기 (너비 1000px, 높이 600px)
   configPanel: TableListConfigPanel,
   icon: "Table",
   tags: ["테이블", "데이터", "목록", "그리드"],
diff --git a/frontend/lib/registry/components/text-display/TextDisplayComponent.tsx b/frontend/lib/registry/components/text-display/TextDisplayComponent.tsx
index a1e96a78..07ce3f34 100644
--- a/frontend/lib/registry/components/text-display/TextDisplayComponent.tsx
+++ b/frontend/lib/registry/components/text-display/TextDisplayComponent.tsx
@@ -76,8 +76,8 @@ export const TextDisplayComponent: React.FC<TextDisplayComponentProps> = ({
         : componentConfig.textAlign === "right"
           ? "flex-end"
           : "flex-start",
-    wordBreak: "break-word",
-    overflow: "hidden",
+    whiteSpace: "nowrap",     // ← 한 줄로 유지        // ← 넘치는 부분 숨김
+    textOverflow: "ellipsis",  // ← 넘치면 ... 표시 (선택사항)
     transition: "all 0.2s ease-in-out",
     boxShadow: "none",
   };
diff --git a/frontend/lib/registry/components/text-input/TextInputComponent.tsx b/frontend/lib/registry/components/text-input/TextInputComponent.tsx
index 2eb565e0..ffbd7cac 100644
--- a/frontend/lib/registry/components/text-input/TextInputComponent.tsx
+++ b/frontend/lib/registry/components/text-input/TextInputComponent.tsx
@@ -686,7 +686,7 @@ export const TextInputComponent: React.FC<TextInputComponentProps> = ({
 
       <input
         type={inputType}
-        value={(() => {
+        defaultValue={(() => {
           let displayValue = "";
 
           if (isInteractive && formData && component.columnName) {
@@ -745,13 +745,6 @@ export const TextInputComponent: React.FC<TextInputComponentProps> = ({
           // isInteractive 모드에서는 formData 업데이트
           if (isInteractive && onFormDataChange && component.columnName) {
             onFormDataChange(component.columnName, newValue);
-          } else {
-            console.log("❌ TextInputComponent onFormDataChange 조건 미충족:", {
-              isInteractive,
-              hasOnFormDataChange: !!onFormDataChange,
-              hasColumnName: !!component.columnName,
-              columnName: component.columnName,
-            });
           }
 
           // props.onChange는 DynamicComponentRenderer의 handleChange
diff --git a/frontend/lib/registry/utils/createComponentDefinition.ts b/frontend/lib/registry/utils/createComponentDefinition.ts
index 824846d2..fe279281 100644
--- a/frontend/lib/registry/utils/createComponentDefinition.ts
+++ b/frontend/lib/registry/utils/createComponentDefinition.ts
@@ -63,7 +63,9 @@ export function createComponentDefinition(options: CreateComponentDefinitionOpti
     category, // 카테고리를 태그로 추가
     webType, // 웹타입을 태그로 추가
     ...name.split(" "), // 이름을 단어별로 분리하여 태그로 추가
-  ].filter((tag, index, array) => array.indexOf(tag) === index); // 중복 제거
+  ]
+    .filter((tag) => tag && typeof tag === 'string' && tag.trim().length > 0) // undefined, null, 빈 문자열 제거
+    .filter((tag, index, array) => array.indexOf(tag) === index); // 중복 제거
 
   // 컴포넌트 정의 생성
   const definition: ComponentDefinition = {
@@ -163,7 +165,7 @@ export function validateComponentDefinition(definition: ComponentDefinition): {
       warnings.push("태그가 너무 많습니다 (20개 초과)");
     }
     definition.tags.forEach((tag) => {
-      if (tag.length > 30) {
+      if (tag && typeof tag === 'string' && tag.length > 30) {
         warnings.push(`태그가 너무 깁니다: ${tag}`);
       }
     });
diff --git a/frontend/lib/utils/buttonActions.ts b/frontend/lib/utils/buttonActions.ts
index ef3b3747..d6ddd96c 100644
--- a/frontend/lib/utils/buttonActions.ts
+++ b/frontend/lib/utils/buttonActions.ts
@@ -16,6 +16,7 @@ export type ButtonActionType =
   | "edit" // 편집
   | "copy" // 복사 (품목코드 초기화)
   | "navigate" // 페이지 이동
+  | "openModalWithData" // 🆕 데이터를 전달하면서 모달 열기
   | "modal" // 모달 열기
   | "control" // 제어 흐름
   | "view_table_history" // 테이블 이력 보기
@@ -40,10 +41,18 @@ export interface ButtonActionConfig {
 
   // 모달/팝업 관련
   modalTitle?: string;
+  modalTitleBlocks?: Array<{ // 🆕 블록 기반 제목 (우선순위 높음)
+    id: string;
+    type: "text" | "field";
+    value: string; // type=text: 텍스트 내용, type=field: 컬럼명
+    tableName?: string; // type=field일 때 테이블명
+    label?: string; // type=field일 때 표시용 라벨
+  }>;
   modalDescription?: string;
   modalSize?: "sm" | "md" | "lg" | "xl";
   popupWidth?: number;
   popupHeight?: number;
+  dataSourceId?: string; // 🆕 modalDataStore에서 데이터를 가져올 ID (openModalWithData용)
 
   // 확인 메시지
   confirmMessage?: string;
@@ -104,6 +113,9 @@ export interface ButtonActionContext {
   // 플로우 선택된 데이터 정보 (플로우 위젯 선택 액션용)
   flowSelectedData?: any[];
   flowSelectedStepId?: number | null;
+  
+  // 🆕 같은 화면의 모든 컴포넌트 (TableList 자동 감지용)
+  allComponents?: any[];
 
   // 제어 실행을 위한 추가 정보
   buttonId?: string;
@@ -123,6 +135,9 @@ export interface ButtonActionContext {
   currentPage?: number; // 현재 페이지
   pageSize?: number; // 페이지 크기
   totalItems?: number; // 전체 항목 수
+
+  // 🆕 컴포넌트별 설정 (parentDataMapping 등)
+  componentConfigs?: Record<string, any>; // 컴포넌트 ID → 컴포넌트 설정
 }
 
 /**
@@ -149,6 +164,9 @@ export class ButtonActionExecutor {
         case "navigate":
           return this.handleNavigate(config, context);
 
+        case "openModalWithData":
+          return await this.handleOpenModalWithData(config, context);
+
         case "modal":
           return await this.handleModal(config, context);
 
@@ -190,6 +208,68 @@ export class ButtonActionExecutor {
   private static async handleSave(config: ButtonActionConfig, context: ButtonActionContext): Promise<boolean> {
     const { formData, originalData, tableName, screenId } = context;
 
+    console.log("💾 [handleSave] 저장 시작:", { formData, tableName, screenId });
+
+    // 🆕 저장 전 이벤트 발생 (SelectedItemsDetailInput 등에서 최신 데이터 수집)
+    // context.formData를 이벤트 detail에 포함하여 직접 수정 가능하게 함
+    window.dispatchEvent(new CustomEvent("beforeFormSave", {
+      detail: {
+        formData: context.formData
+      }
+    }));
+    
+    // 약간의 대기 시간을 주어 이벤트 핸들러가 formData를 업데이트할 수 있도록 함
+    await new Promise(resolve => setTimeout(resolve, 100));
+    
+    console.log("📦 [handleSave] beforeFormSave 이벤트 후 formData:", context.formData);
+
+    // 🆕 SelectedItemsDetailInput 배치 저장 처리 (fieldGroups 구조)
+    console.log("🔍 [handleSave] formData 구조 확인:", {
+      isFormDataArray: Array.isArray(context.formData),
+      keys: Object.keys(context.formData),
+      values: Object.entries(context.formData).map(([key, value]) => ({
+        key,
+        isArray: Array.isArray(value),
+        length: Array.isArray(value) ? value.length : 0,
+        firstItem: Array.isArray(value) && value.length > 0 ? {
+          hasOriginalData: !!value[0]?.originalData,
+          hasFieldGroups: !!value[0]?.fieldGroups,
+          keys: Object.keys(value[0] || {})
+        } : null
+      }))
+    });
+
+    // 🔧 formData 자체가 배열인 경우 (ScreenModal의 그룹 레코드 수정)
+    if (Array.isArray(context.formData)) {
+      console.log("⚠️ [handleSave] formData가 배열입니다 - SelectedItemsDetailInput이 이미 처리했으므로 일반 저장 건너뜀");
+      console.log("⚠️ [handleSave] formData 배열:", context.formData);
+      // ✅ SelectedItemsDetailInput이 이미 UPSERT를 실행했으므로 일반 저장을 건너뜀
+      return true; // 성공으로 반환
+    }
+
+    const selectedItemsKeys = Object.keys(context.formData).filter(key => {
+      const value = context.formData[key];
+      console.log(`🔍 [handleSave] 필터링 체크 - ${key}:`, {
+        isArray: Array.isArray(value),
+        length: Array.isArray(value) ? value.length : 0,
+        firstItem: Array.isArray(value) && value.length > 0 ? {
+          keys: Object.keys(value[0] || {}),
+          hasOriginalData: !!value[0]?.originalData,
+          hasFieldGroups: !!value[0]?.fieldGroups,
+          actualValue: value[0],
+        } : null
+      });
+      return Array.isArray(value) && value.length > 0 && value[0]?.originalData && value[0]?.fieldGroups;
+    });
+
+    if (selectedItemsKeys.length > 0) {
+      console.log("🔄 [handleSave] SelectedItemsDetailInput 배치 저장 감지:", selectedItemsKeys);
+      return await this.handleBatchSave(config, context, selectedItemsKeys);
+    } else {
+      console.log("⚠️ [handleSave] SelectedItemsDetailInput 데이터 감지 실패 - 일반 저장 진행");
+      console.log("⚠️ [handleSave] formData 전체 내용:", context.formData);
+    }
+
     // 폼 유효성 검사
     if (config.validateForm) {
       const validation = this.validateFormData(formData);
@@ -438,6 +518,230 @@ export class ButtonActionExecutor {
     return await this.handleSave(config, context);
   }
 
+  /**
+   * 🆕 배치 저장 액션 처리 (SelectedItemsDetailInput용 - 새로운 데이터 구조)
+   * ItemData[] → 각 품목의 details 배열을 개별 레코드로 저장
+   */
+  private static async handleBatchSave(
+    config: ButtonActionConfig, 
+    context: ButtonActionContext,
+    selectedItemsKeys: string[]
+  ): Promise<boolean> {
+    const { formData, tableName, screenId, selectedRowsData, originalData } = context;
+    
+    console.log(`🔍 [handleBatchSave] context 확인:`, {
+      hasSelectedRowsData: !!selectedRowsData,
+      selectedRowsCount: selectedRowsData?.length || 0,
+      hasOriginalData: !!originalData,
+      originalDataKeys: originalData ? Object.keys(originalData) : [],
+    });
+
+    if (!tableName || !screenId) {
+      toast.error("저장에 필요한 정보가 부족합니다. (테이블명 또는 화면ID 누락)");
+      return false;
+    }
+
+    try {
+      let successCount = 0;
+      let failCount = 0;
+      const errors: string[] = [];
+
+      // 🆕 부모 화면 데이터 준비 (parentDataMapping용)
+      // selectedRowsData 또는 originalData를 parentData로 사용
+      const parentData = selectedRowsData?.[0] || originalData || {};
+      
+      // 🆕 modalDataStore에서 누적된 모든 테이블 데이터 가져오기
+      // (여러 단계 모달에서 전달된 데이터 접근용)
+      let modalDataStoreRegistry: Record<string, any[]> = {};
+      if (typeof window !== 'undefined') {
+        try {
+          // Zustand store에서 데이터 가져오기
+          const { useModalDataStore } = await import('@/stores/modalDataStore');
+          modalDataStoreRegistry = useModalDataStore.getState().dataRegistry;
+        } catch (error) {
+          console.warn("⚠️ modalDataStore 로드 실패:", error);
+        }
+      }
+      
+      // 각 테이블의 첫 번째 항목을 modalDataStore로 변환
+      const modalDataStore: Record<string, any> = {};
+      Object.entries(modalDataStoreRegistry).forEach(([key, items]) => {
+        if (Array.isArray(items) && items.length > 0) {
+          // ModalDataItem[] → originalData 추출
+          modalDataStore[key] = items.map(item => item.originalData || item);
+        }
+      });
+      
+
+      // 각 SelectedItemsDetailInput 컴포넌트의 데이터 처리
+      for (const key of selectedItemsKeys) {
+        // 🆕 새로운 데이터 구조: ItemData[] with fieldGroups
+        const items = formData[key] as Array<{ 
+          id: string; 
+          originalData: any; 
+          fieldGroups: Record<string, Array<{ id: string; [key: string]: any }>>; 
+        }>;
+        
+        // 🆕 이 컴포넌트의 parentDataMapping 설정 가져오기
+        const componentConfig = context.componentConfigs?.[key];
+        const parentDataMapping = componentConfig?.parentDataMapping || [];
+
+        // 🆕 각 품목의 그룹 간 조합(카티션 곱) 생성
+        for (const item of items) {
+          const groupKeys = Object.keys(item.fieldGroups);
+          
+          // 각 그룹의 항목 배열 가져오기
+          const groupArrays = groupKeys.map(groupKey => ({
+            groupKey,
+            entries: item.fieldGroups[groupKey] || []
+          }));
+          
+          // 카티션 곱 계산 함수
+          const cartesianProduct = (arrays: any[][]): any[][] => {
+            if (arrays.length === 0) return [[]];
+            if (arrays.length === 1) return arrays[0].map(item => [item]);
+            
+            const [first, ...rest] = arrays;
+            const restProduct = cartesianProduct(rest);
+            
+            return first.flatMap(item => 
+              restProduct.map(combination => [item, ...combination])
+            );
+          };
+          
+          // 모든 그룹의 카티션 곱 생성
+          const entryArrays = groupArrays.map(g => g.entries);
+          const combinations = cartesianProduct(entryArrays);
+          
+          // 각 조합을 개별 레코드로 저장
+          for (let i = 0; i < combinations.length; i++) {
+            const combination = combinations[i];
+            try {
+              // 🆕 부모 데이터 매핑 적용
+              const mappedData: any = {};
+              
+              // 1. parentDataMapping 설정이 있으면 적용
+              if (parentDataMapping.length > 0) {
+                for (const mapping of parentDataMapping) {
+                  let sourceData: any;
+                  const sourceTableName = mapping.sourceTable;
+                  const selectedItemTable = componentConfig?.sourceTable;
+                  
+                  if (sourceTableName === selectedItemTable) {
+                    sourceData = item.originalData;
+                  } else {
+                    const tableData = modalDataStore[sourceTableName];
+                    if (tableData && Array.isArray(tableData) && tableData.length > 0) {
+                      sourceData = tableData[0];
+                    } else {
+                      sourceData = parentData;
+                    }
+                  }
+                  
+                  const sourceValue = sourceData[mapping.sourceField];
+                  
+                  if (sourceValue !== undefined && sourceValue !== null) {
+                    mappedData[mapping.targetField] = sourceValue;
+                  } else if (mapping.defaultValue !== undefined) {
+                    mappedData[mapping.targetField] = mapping.defaultValue;
+                  }
+                }
+              } else {
+                // 🔧 parentDataMapping 설정이 없는 경우 기본 매핑 (하위 호환성)
+                if (item.originalData.id) {
+                  mappedData.item_id = item.originalData.id;
+                }
+                
+                if (parentData.id || parentData.customer_id) {
+                  mappedData.customer_id = parentData.customer_id || parentData.id;
+                }
+              }
+              
+              // 공통 필드 복사 (company_code, currency_code 등)
+              if (item.originalData.company_code && !mappedData.company_code) {
+                mappedData.company_code = item.originalData.company_code;
+              }
+              if (item.originalData.currency_code && !mappedData.currency_code) {
+                mappedData.currency_code = item.originalData.currency_code;
+              }
+              
+              // 원본 데이터로 시작 (매핑된 데이터 사용)
+              let mergedData = { ...mappedData };
+              
+              // 각 그룹의 항목 데이터를 순차적으로 병합
+              for (let j = 0; j < combination.length; j++) {
+                const entry = combination[j];
+                const { id, ...entryData } = entry; // id 제외
+                mergedData = { ...mergedData, ...entryData };
+              }
+
+              // 🆕 조합 저장 시 id 필드 제거 (각 조합이 독립된 새 레코드가 되도록)
+              const { id: _removedId, ...dataWithoutId } = mergedData;
+
+              // 사용자 정보 추가
+              if (!context.userId) {
+                throw new Error("사용자 정보를 불러올 수 없습니다.");
+              }
+
+              const writerValue = context.userId;
+              const companyCodeValue = context.companyCode || "";
+
+              const dataWithUserInfo = {
+                ...dataWithoutId,
+                writer: dataWithoutId.writer || writerValue,
+                created_by: writerValue,
+                updated_by: writerValue,
+                company_code: dataWithoutId.company_code || companyCodeValue,
+              };
+
+              // INSERT 실행
+              const { DynamicFormApi } = await import("@/lib/api/dynamicForm");
+              const saveResult = await DynamicFormApi.saveFormData({
+                screenId,
+                tableName,
+                data: dataWithUserInfo,
+              });
+
+              if (saveResult.success) {
+                successCount++;
+              } else {
+                failCount++;
+                errors.push(`품목 ${item.id} > 조합 ${i + 1}: ${saveResult.message}`);
+              }
+            } catch (error: any) {
+              failCount++;
+              errors.push(`품목 ${item.id} > 조합 ${i + 1}: ${error.message}`);
+            }
+          }
+        }
+      }
+
+      // 결과 토스트
+      if (failCount === 0) {
+        toast.success(`${successCount}개 항목이 저장되었습니다.`);
+      } else if (successCount === 0) {
+        toast.error(`저장 실패: ${errors.join(", ")}`);
+        return false;
+      } else {
+        toast.warning(`${successCount}개 성공, ${failCount}개 실패: ${errors.join(", ")}`);
+      }
+
+      // 테이블과 플로우 새로고침
+      context.onRefresh?.();
+      context.onFlowRefresh?.();
+
+      // 저장 성공 후 이벤트 발생
+      window.dispatchEvent(new CustomEvent("closeEditModal"));
+      window.dispatchEvent(new CustomEvent("saveSuccessInModal"));
+
+      return true;
+    } catch (error: any) {
+      console.error("배치 저장 오류:", error);
+      toast.error(`저장 오류: ${error.message}`);
+      return false;
+    }
+  }
+
   /**
    * 삭제 액션 처리
    */
@@ -667,6 +971,198 @@ export class ButtonActionExecutor {
     return true;
   }
 
+  /**
+   * 🆕 데이터를 전달하면서 모달 열기 액션 처리
+   */
+  private static async handleOpenModalWithData(
+    config: ButtonActionConfig,
+    context: ButtonActionContext,
+  ): Promise<boolean> {
+    console.log("📦 데이터와 함께 모달 열기:", {
+      title: config.modalTitle,
+      size: config.modalSize,
+      targetScreenId: config.targetScreenId,
+      dataSourceId: config.dataSourceId,
+    });
+
+    // 🆕 1. 현재 화면의 TableList 또는 SplitPanelLayout 자동 감지
+    let dataSourceId = config.dataSourceId;
+    
+    if (!dataSourceId && context.allComponents) {
+      // TableList 우선 감지
+      const tableListComponent = context.allComponents.find(
+        (comp: any) => comp.componentType === "table-list" && comp.componentConfig?.tableName
+      );
+      
+      if (tableListComponent) {
+        dataSourceId = tableListComponent.componentConfig.tableName;
+        console.log("✨ TableList 자동 감지:", {
+          componentId: tableListComponent.id,
+          tableName: dataSourceId,
+        });
+      } else {
+        // TableList가 없으면 SplitPanelLayout의 좌측 패널 감지
+        const splitPanelComponent = context.allComponents.find(
+          (comp: any) => comp.componentType === "split-panel-layout" && comp.componentConfig?.leftPanel?.tableName
+        );
+        
+        if (splitPanelComponent) {
+          dataSourceId = splitPanelComponent.componentConfig.leftPanel.tableName;
+          console.log("✨ 분할 패널 좌측 테이블 자동 감지:", {
+            componentId: splitPanelComponent.id,
+            tableName: dataSourceId,
+          });
+        }
+      }
+    }
+    
+    // 여전히 없으면 context.tableName 또는 "default" 사용
+    if (!dataSourceId) {
+      dataSourceId = context.tableName || "default";
+    }
+
+    // 🆕 2. modalDataStore에서 현재 선택된 데이터 확인
+    try {
+      const { useModalDataStore } = await import("@/stores/modalDataStore");
+      const dataRegistry = useModalDataStore.getState().dataRegistry;
+      
+      const modalData = dataRegistry[dataSourceId] || [];
+
+      console.log("📊 현재 화면 데이터 확인:", {
+        dataSourceId,
+        count: modalData.length,
+        allKeys: Object.keys(dataRegistry), // 🆕 전체 데이터 키 확인
+      });
+
+      if (modalData.length === 0) {
+        console.warn("⚠️ 선택된 데이터가 없습니다:", dataSourceId);
+        toast.warning("선택된 데이터가 없습니다. 먼저 항목을 선택해주세요.");
+        return false;
+      }
+
+      console.log("✅ 모달 데이터 준비 완료:", {
+        currentData: { id: dataSourceId, count: modalData.length },
+        previousData: Object.entries(dataRegistry)
+          .filter(([key]) => key !== dataSourceId)
+          .map(([key, data]: [string, any]) => ({ id: key, count: data.length })),
+      });
+    } catch (error) {
+      console.error("❌ 데이터 확인 실패:", error);
+      toast.error("데이터 확인 중 오류가 발생했습니다.");
+      return false;
+    }
+
+    // 6. 동적 모달 제목 생성
+    const { useModalDataStore } = await import("@/stores/modalDataStore");
+    const dataRegistry = useModalDataStore.getState().dataRegistry;
+    
+    let finalTitle = "데이터 입력";
+    
+    // 🆕 블록 기반 제목 (우선순위 1)
+    if (config.modalTitleBlocks && config.modalTitleBlocks.length > 0) {
+      const titleParts: string[] = [];
+      
+      config.modalTitleBlocks.forEach((block) => {
+        if (block.type === "text") {
+          // 텍스트 블록: 그대로 추가
+          titleParts.push(block.value);
+        } else if (block.type === "field") {
+          // 필드 블록: 데이터에서 값 가져오기
+          const tableName = block.tableName;
+          const columnName = block.value;
+          
+          if (tableName && columnName) {
+            const tableData = dataRegistry[tableName];
+            if (tableData && tableData.length > 0) {
+              const firstItem = tableData[0].originalData || tableData[0];
+              const value = firstItem[columnName];
+              
+              if (value !== undefined && value !== null) {
+                titleParts.push(String(value));
+                console.log(`✨ 동적 필드: ${tableName}.${columnName} → ${value}`);
+              } else {
+                // 데이터 없으면 라벨 표시
+                titleParts.push(block.label || columnName);
+              }
+            } else {
+              // 테이블 데이터 없으면 라벨 표시
+              titleParts.push(block.label || columnName);
+            }
+          }
+        }
+      });
+      
+      finalTitle = titleParts.join("");
+      console.log("📋 블록 기반 제목 생성:", finalTitle);
+    }
+    // 기존 방식: {tableName.columnName} 패턴 (우선순위 2)
+    else if (config.modalTitle) {
+      finalTitle = config.modalTitle;
+      
+      if (finalTitle.includes("{")) {
+        const matches = finalTitle.match(/\{([^}]+)\}/g);
+        
+        if (matches) {
+          matches.forEach((match) => {
+            const path = match.slice(1, -1); // {item_info.item_name} → item_info.item_name
+            const [tableName, columnName] = path.split(".");
+            
+            if (tableName && columnName) {
+              const tableData = dataRegistry[tableName];
+              if (tableData && tableData.length > 0) {
+                const firstItem = tableData[0].originalData || tableData[0];
+                const value = firstItem[columnName];
+                
+                if (value !== undefined && value !== null) {
+                  finalTitle = finalTitle.replace(match, String(value));
+                  console.log(`✨ 동적 제목: ${match} → ${value}`);
+                }
+              }
+            }
+          });
+        }
+      }
+    }
+    
+    // 7. 모달 열기 + URL 파라미터로 dataSourceId 전달
+    if (config.targetScreenId) {
+      // config에 modalDescription이 있으면 우선 사용
+      let description = config.modalDescription || "";
+
+      // config에 없으면 화면 정보에서 가져오기
+      if (!description) {
+        try {
+          const screenInfo = await screenApi.getScreen(config.targetScreenId);
+          description = screenInfo?.description || "";
+        } catch (error) {
+          console.warn("화면 설명을 가져오지 못했습니다:", error);
+        }
+      }
+
+      // 🆕 전역 모달 상태 업데이트를 위한 이벤트 발생 (URL 파라미터 포함)
+      const modalEvent = new CustomEvent("openScreenModal", {
+        detail: {
+          screenId: config.targetScreenId,
+          title: finalTitle, // 🆕 동적 제목 사용
+          description: description,
+          size: config.modalSize || "lg", // 데이터 입력 화면은 기본 large
+          urlParams: { dataSourceId }, // 🆕 주 데이터 소스만 전달 (나머지는 modalDataStore에서 자동으로 찾음)
+        },
+      });
+
+      window.dispatchEvent(modalEvent);
+      
+      // 성공 메시지 (간단하게)
+      toast.success(config.successMessage || "다음 단계로 진행합니다.");
+      
+      return true;
+    } else {
+      console.error("모달로 열 화면이 지정되지 않았습니다.");
+      toast.error("대상 화면이 지정되지 않았습니다.");
+      return false;
+    }
+  }
+
   /**
    * 새 창 액션 처리
    */
@@ -2599,6 +3095,13 @@ export const DEFAULT_BUTTON_ACTIONS: Record<ButtonActionType, Partial<ButtonActi
   navigate: {
     type: "navigate",
   },
+  openModalWithData: {
+    type: "openModalWithData",
+    modalSize: "md",
+    confirmMessage: "다음 단계로 진행하시겠습니까?",
+    successMessage: "데이터가 전달되었습니다.",
+    errorMessage: "데이터 전달 중 오류가 발생했습니다.",
+  },
   modal: {
     type: "modal",
     modalSize: "md",
diff --git a/frontend/lib/utils/getComponentConfigPanel.tsx b/frontend/lib/utils/getComponentConfigPanel.tsx
index b4af1632..6bae6944 100644
--- a/frontend/lib/utils/getComponentConfigPanel.tsx
+++ b/frontend/lib/utils/getComponentConfigPanel.tsx
@@ -15,7 +15,7 @@ const CONFIG_PANEL_MAP: Record<string, () => Promise<any>> = {
   "radio-basic": () => import("@/lib/registry/components/radio-basic/RadioBasicConfigPanel"),
   "toggle-switch": () => import("@/lib/registry/components/toggle-switch/ToggleSwitchConfigPanel"),
   "file-upload": () => import("@/lib/registry/components/file-upload/FileUploadConfigPanel"),
-  "button-primary": () => import("@/lib/registry/components/button-primary/ButtonPrimaryConfigPanel"),
+  "button-primary": () => import("@/components/screen/config-panels/ButtonConfigPanel"),
   "text-display": () => import("@/lib/registry/components/text-display/TextDisplayConfigPanel"),
   "slider-basic": () => import("@/lib/registry/components/slider-basic/SliderBasicConfigPanel"),
   "image-display": () => import("@/lib/registry/components/image-display/ImageDisplayConfigPanel"),
@@ -26,6 +26,22 @@ const CONFIG_PANEL_MAP: Record<string, () => Promise<any>> = {
   "split-panel-layout": () => import("@/lib/registry/components/split-panel-layout/SplitPanelLayoutConfigPanel"),
   "repeater-field-group": () => import("@/components/webtypes/config/RepeaterConfigPanel"),
   "flow-widget": () => import("@/components/screen/config-panels/FlowWidgetConfigPanel"),
+  // 🆕 수주 등록 관련 컴포넌트들
+  "autocomplete-search-input": () =>
+    import("@/lib/registry/components/autocomplete-search-input/AutocompleteSearchInputConfigPanel"),
+  "entity-search-input": () => import("@/lib/registry/components/entity-search-input/EntitySearchInputConfigPanel"),
+  "modal-repeater-table": () => import("@/lib/registry/components/modal-repeater-table/ModalRepeaterTableConfigPanel"),
+  "order-registration-modal": () =>
+    import("@/lib/registry/components/order-registration-modal/OrderRegistrationModalConfigPanel"),
+  // 🆕 조건부 컨테이너
+  "conditional-container": () =>
+    import("@/lib/registry/components/conditional-container/ConditionalContainerConfigPanel"),
+  // 🆕 선택 항목 상세입력
+  "selected-items-detail-input": () =>
+    import("@/lib/registry/components/selected-items-detail-input/SelectedItemsDetailInputConfigPanel"),
+  // 🆕 섹션 그룹화 레이아웃
+  "section-card": () => import("@/lib/registry/components/section-card/SectionCardConfigPanel"),
+  "section-paper": () => import("@/lib/registry/components/section-paper/SectionPaperConfigPanel"),
 };
 
 // ConfigPanel 컴포넌트 캐시
@@ -55,6 +71,11 @@ export async function getComponentConfigPanel(componentId: string): Promise<Reac
       module[`${toPascalCase(componentId)}ConfigPanel`] ||
       module.RepeaterConfigPanel || // repeater-field-group의 export명
       module.FlowWidgetConfigPanel || // flow-widget의 export명
+      module.CustomerItemMappingConfigPanel || // customer-item-mapping의 export명
+      module.SelectedItemsDetailInputConfigPanel || // selected-items-detail-input의 export명
+      module.ButtonConfigPanel || // button-primary의 export명
+      module.SectionCardConfigPanel || // section-card의 export명
+      module.SectionPaperConfigPanel || // section-paper의 export명
       module.default;
 
     if (!ConfigPanelComponent) {
@@ -125,6 +146,10 @@ export const DynamicComponentConfigPanel: React.FC<ComponentConfigPanelProps> =
   const [error, setError] = React.useState<string | null>(null);
   const [selectedTableColumns, setSelectedTableColumns] = React.useState(tableColumns);
   const [allTablesList, setAllTablesList] = React.useState<any[]>([]);
+  
+  // 🆕 selected-items-detail-input 전용 상태
+  const [sourceTableColumns, setSourceTableColumns] = React.useState<any[]>([]);
+  const [targetTableColumns, setTargetTableColumns] = React.useState<any[]>([]);
 
   React.useEffect(() => {
     let mounted = true;
@@ -161,14 +186,15 @@ export const DynamicComponentConfigPanel: React.FC<ComponentConfigPanelProps> =
     setSelectedTableColumns(tableColumns);
   }, [tableColumns]);
 
-  // RepeaterConfigPanel인 경우에만 전체 테이블 목록 로드
+  // RepeaterConfigPanel과 selected-items-detail-input에서 전체 테이블 목록 로드
   React.useEffect(() => {
-    if (componentId === "repeater-field-group") {
+    if (componentId === "repeater-field-group" || componentId === "selected-items-detail-input") {
       const loadAllTables = async () => {
         try {
           const { tableManagementApi } = await import("@/lib/api/tableManagement");
           const response = await tableManagementApi.getTableList();
           if (response.success && response.data) {
+            console.log(`✅ 전체 테이블 목록 로드 완료 (${componentId}):`, response.data.length);
             setAllTablesList(response.data);
           }
         } catch (error) {
@@ -179,6 +205,60 @@ export const DynamicComponentConfigPanel: React.FC<ComponentConfigPanelProps> =
     }
   }, [componentId]);
 
+  // 🆕 selected-items-detail-input: 초기 sourceTable/targetTable 컬럼 로드
+  React.useEffect(() => {
+    if (componentId === "selected-items-detail-input") {
+      console.log("🔍 selected-items-detail-input 초기 설정:", config);
+      
+      // 원본 테이블 컬럼 로드
+      if (config.sourceTable) {
+        const loadSourceColumns = async () => {
+          try {
+            const { tableTypeApi } = await import("@/lib/api/screen");
+            const columnsResponse = await tableTypeApi.getColumns(config.sourceTable);
+
+            const columns = (columnsResponse || []).map((col: any) => ({
+              columnName: col.columnName || col.column_name,
+              columnLabel: col.displayName || col.columnLabel || col.column_label || col.columnName || col.column_name,
+              dataType: col.dataType || col.data_type || col.dbType,
+              inputType: col.inputType || col.input_type, // 🆕 inputType 추가
+            }));
+
+            console.log("✅ 원본 테이블 컬럼 초기 로드 완료:", columns.length);
+            setSourceTableColumns(columns);
+          } catch (error) {
+            console.error("❌ 원본 테이블 컬럼 초기 로드 실패:", error);
+          }
+        };
+        loadSourceColumns();
+      }
+      
+      // 대상 테이블 컬럼 로드
+      if (config.targetTable) {
+        const loadTargetColumns = async () => {
+          try {
+            const { tableTypeApi } = await import("@/lib/api/screen");
+            const columnsResponse = await tableTypeApi.getColumns(config.targetTable);
+
+            const columns = (columnsResponse || []).map((col: any) => ({
+              columnName: col.columnName || col.column_name,
+              columnLabel: col.displayName || col.columnLabel || col.column_label || col.columnName || col.column_name,
+              dataType: col.dataType || col.data_type || col.dbType,
+              inputType: col.inputType || col.input_type, // 🆕 inputType 추가
+              codeCategory: col.codeCategory || col.code_category, // 🆕 codeCategory 추가
+            }));
+
+            console.log("✅ 대상 테이블 컬럼 초기 로드 완료:", columns.length);
+            setTargetTableColumns(columns);
+          } catch (error) {
+            console.error("❌ 대상 테이블 컬럼 초기 로드 실패:", error);
+          }
+        };
+        loadTargetColumns();
+      }
+    }
+  }, [componentId, config.sourceTable, config.targetTable]);
+
   if (loading) {
     return (
       <div className="rounded-md border border-dashed border-gray-300 bg-gray-50 p-4">
@@ -251,6 +331,92 @@ export const DynamicComponentConfigPanel: React.FC<ComponentConfigPanelProps> =
     }
   };
 
+  // 🆕 원본 테이블 컬럼 로드 핸들러 (selected-items-detail-input용)
+  const handleSourceTableChange = async (tableName: string) => {
+    console.log("🔄 원본 테이블 변경:", tableName);
+    try {
+      const { tableTypeApi } = await import("@/lib/api/screen");
+      const columnsResponse = await tableTypeApi.getColumns(tableName);
+
+      const columns = (columnsResponse || []).map((col: any) => ({
+        columnName: col.columnName || col.column_name,
+        columnLabel: col.displayName || col.columnLabel || col.column_label || col.columnName || col.column_name,
+        dataType: col.dataType || col.data_type || col.dbType,
+        inputType: col.inputType || col.input_type, // 🆕 inputType 추가
+      }));
+
+      console.log("✅ 원본 테이블 컬럼 로드 완료:", columns.length);
+      setSourceTableColumns(columns);
+    } catch (error) {
+      console.error("❌ 원본 테이블 컬럼 로드 실패:", error);
+      setSourceTableColumns([]);
+    }
+  };
+
+  // 🆕 대상 테이블 컬럼 로드 핸들러 (selected-items-detail-input용)
+  const handleTargetTableChange = async (tableName: string) => {
+    console.log("🔄 대상 테이블 변경:", tableName);
+    try {
+      const { tableTypeApi } = await import("@/lib/api/screen");
+      const columnsResponse = await tableTypeApi.getColumns(tableName);
+
+      console.log("📡 [handleTargetTableChange] API 응답 (원본):", {
+        totalColumns: columnsResponse.length,
+        sampleColumns: columnsResponse.slice(0, 3),
+        currency_code_raw: columnsResponse.find((c: any) => (c.columnName || c.column_name) === 'currency_code')
+      });
+
+      const columns = (columnsResponse || []).map((col: any) => ({
+        columnName: col.columnName || col.column_name,
+        columnLabel: col.displayName || col.columnLabel || col.column_label || col.columnName || col.column_name,
+        dataType: col.dataType || col.data_type || col.dbType,
+        inputType: col.inputType || col.input_type, // 🆕 inputType 추가
+        codeCategory: col.codeCategory || col.code_category, // 🆕 codeCategory 추가
+      }));
+
+      console.log("✅ 대상 테이블 컬럼 변환 완료:", {
+        tableName,
+        totalColumns: columns.length,
+        currency_code: columns.find((c: any) => c.columnName === "currency_code"),
+        discount_rate: columns.find((c: any) => c.columnName === "discount_rate")
+      });
+
+      setTargetTableColumns(columns);
+    } catch (error) {
+      console.error("❌ 대상 테이블 컬럼 로드 실패:", error);
+      setTargetTableColumns([]);
+    }
+  };
+
+  // 🆕 수주 등록 관련 컴포넌트들은 간단한 인터페이스 사용
+  const isSimpleConfigPanel = [
+    "autocomplete-search-input",
+    "entity-search-input",
+    "modal-repeater-table",
+    "order-registration-modal",
+    "conditional-container",
+  ].includes(componentId);
+
+  if (isSimpleConfigPanel) {
+    return <ConfigPanelComponent config={config} onConfigChange={onChange} />;
+  }
+
+  // 🆕 selected-items-detail-input은 특별한 props 사용
+  if (componentId === "selected-items-detail-input") {
+    return (
+      <ConfigPanelComponent
+        config={config}
+        onChange={onChange}
+        sourceTableColumns={sourceTableColumns} // 🆕 원본 테이블 컬럼
+        targetTableColumns={targetTableColumns} // 🆕 대상 테이블 컬럼
+        allTables={allTablesList.length > 0 ? allTablesList : tables} // 전체 테이블 목록 (동적 로드 or 전달된 목록)
+        screenTableName={screenTableName} // 🆕 현재 화면의 테이블명 (자동 설정용)
+        onSourceTableChange={handleSourceTableChange} // 🆕 원본 테이블 변경 핸들러
+        onTargetTableChange={handleTargetTableChange} // 🆕 대상 테이블 변경 핸들러
+      />
+    );
+  }
+
   return (
     <ConfigPanelComponent
       config={config}
diff --git a/frontend/stores/modalDataStore.ts b/frontend/stores/modalDataStore.ts
new file mode 100644
index 00000000..eb6a2d11
--- /dev/null
+++ b/frontend/stores/modalDataStore.ts
@@ -0,0 +1,163 @@
+"use client";
+
+import { create } from "zustand";
+import { devtools } from "zustand/middleware";
+
+/**
+ * 모달 간 데이터 전달을 위한 전역 상태 관리
+ * 
+ * 용도:
+ * 1. 첫 번째 모달에서 선택된 데이터를 저장
+ * 2. 두 번째 모달에서 데이터를 읽어와서 사용
+ * 3. 데이터 전달 완료 후 자동 정리
+ */
+
+export interface ModalDataItem {
+  /**
+   * 항목 고유 ID (선택된 행의 ID나 키)
+   */
+  id: string | number;
+  
+  /**
+   * 원본 데이터 (테이블 행 데이터 전체)
+   */
+  originalData: Record<string, any>;
+  
+  /**
+   * 추가 입력 데이터 (사용자가 입력한 추가 정보)
+   */
+  additionalData?: Record<string, any>;
+}
+
+interface ModalDataState {
+  /**
+   * 현재 전달할 데이터
+   * key: 소스 컴포넌트 ID (예: "table-list-123")
+   * value: 선택된 항목들의 배열
+   */
+  dataRegistry: Record<string, ModalDataItem[]>;
+  
+  /**
+   * 데이터 설정 (첫 번째 모달에서 호출)
+   * @param sourceId 데이터를 전달하는 컴포넌트 ID
+   * @param items 전달할 항목들
+   */
+  setData: (sourceId: string, items: ModalDataItem[]) => void;
+  
+  /**
+   * 데이터 조회 (두 번째 모달에서 호출)
+   * @param sourceId 데이터를 전달한 컴포넌트 ID
+   * @returns 전달된 항목들 (없으면 빈 배열)
+   */
+  getData: (sourceId: string) => ModalDataItem[];
+  
+  /**
+   * 데이터 정리 (모달 닫힐 때 호출)
+   * @param sourceId 정리할 데이터의 소스 ID
+   */
+  clearData: (sourceId: string) => void;
+  
+  /**
+   * 모든 데이터 정리
+   */
+  clearAll: () => void;
+  
+  /**
+   * 특정 항목의 추가 데이터 업데이트
+   * @param sourceId 소스 컴포넌트 ID
+   * @param itemId 항목 ID
+   * @param additionalData 추가 입력 데이터
+   */
+  updateItemData: (sourceId: string, itemId: string | number, additionalData: Record<string, any>) => void;
+}
+
+export const useModalDataStore = create<ModalDataState>()(
+  devtools(
+    (set, get) => ({
+      dataRegistry: {},
+      
+      setData: (sourceId, items) => {
+        console.log("📦 [ModalDataStore] 데이터 저장:", { sourceId, itemCount: items.length, items });
+        set((state) => ({
+          dataRegistry: {
+            ...state.dataRegistry,
+            [sourceId]: items,
+          },
+        }));
+      },
+      
+      getData: (sourceId) => {
+        const items = get().dataRegistry[sourceId] || [];
+        console.log("📭 [ModalDataStore] 데이터 조회:", { sourceId, itemCount: items.length });
+        return items;
+      },
+      
+      clearData: (sourceId) => {
+        console.log("🗑️ [ModalDataStore] 데이터 정리:", { sourceId });
+        set((state) => {
+          const { [sourceId]: _, ...rest } = state.dataRegistry;
+          return { dataRegistry: rest };
+        });
+      },
+      
+      clearAll: () => {
+        console.log("🗑️ [ModalDataStore] 모든 데이터 정리");
+        set({ dataRegistry: {} });
+      },
+      
+      updateItemData: (sourceId, itemId, additionalData) => {
+        set((state) => {
+          const items = state.dataRegistry[sourceId] || [];
+          const updatedItems = items.map((item) =>
+            item.id === itemId
+              ? { ...item, additionalData: { ...item.additionalData, ...additionalData } }
+              : item
+          );
+          
+          console.log("✏️ [ModalDataStore] 항목 데이터 업데이트:", { sourceId, itemId, additionalData });
+          
+          return {
+            dataRegistry: {
+              ...state.dataRegistry,
+              [sourceId]: updatedItems,
+            },
+          };
+        });
+      },
+    }),
+    { name: "ModalDataStore" }
+  )
+);
+
+/**
+ * 모달 데이터 조회 Hook
+ * 
+ * @example
+ * const items = useModalData("table-list-123");
+ */
+export const useModalData = (sourceId: string) => {
+  return useModalDataStore((state) => state.getData(sourceId));
+};
+
+/**
+ * 모달 데이터 설정 Hook
+ * 
+ * @example
+ * const setModalData = useSetModalData();
+ * setModalData("table-list-123", selectedItems);
+ */
+export const useSetModalData = () => {
+  return useModalDataStore((state) => state.setData);
+};
+
+/**
+ * 모달 데이터 정리 Hook
+ * 
+ * @example
+ * const clearModalData = useClearModalData();
+ * clearModalData("table-list-123");
+ */
+export const useClearModalData = () => {
+  return useModalDataStore((state) => state.clearData);
+};
+
diff --git a/frontend/types/component.ts b/frontend/types/component.ts
index 5da67a6e..9569a419 100644
--- a/frontend/types/component.ts
+++ b/frontend/types/component.ts
@@ -16,6 +16,7 @@ export enum ComponentCategory {
   DISPLAY = "display", // 표시 컴포넌트 (라벨, 이미지, 아이콘 등)
   ACTION = "action", // 액션 컴포넌트 (버튼, 링크 등)
   LAYOUT = "layout", // 레이아웃 컴포넌트 (컨테이너, 그룹 등)
+  DATA = "data", // 데이터 컴포넌트 (테이블, 리스트 등)
   CHART = "chart", // 차트 컴포넌트 (그래프, 차트 등)
   FORM = "form", // 폼 컴포넌트 (폼 그룹, 필드셋 등)
   MEDIA = "media", // 미디어 컴포넌트 (이미지, 비디오 등)
diff --git a/frontend/types/digitalTwin.ts b/frontend/types/digitalTwin.ts
new file mode 100644
index 00000000..4d64e1a2
--- /dev/null
+++ b/frontend/types/digitalTwin.ts
@@ -0,0 +1,161 @@
+// Digital Twin 관련 타입 정의
+
+// 객체 타입
+export type ObjectType =
+  | "area" // Area (A동, B동, C동, 겐트리)
+  | "location-bed" // BED (사각형, 파란색, 상자)
+  | "location-stp" // STP (원형, 회색, 주차)
+  | "location-temp" // 임시베드 (BED와 동일)
+  | "location-dest" // 지정착지 (BED와 동일)
+  | "crane-mobile" // 모바일 크레인 (참고용)
+  | "rack"; // 랙 (참고용)
+
+// 3D 위치
+export interface Position3D {
+  x: number;
+  y: number;
+  z: number;
+}
+
+// 3D 크기
+export interface Size3D {
+  x: number;
+  y: number;
+  z: number;
+}
+
+// 자재 미리보기 정보
+export interface MaterialPreview {
+  height: number; // 스택 높이 (LOLAYER 기반)
+  topMaterial?: MaterialData; // 최상단 자재 정보 (선택사항)
+}
+
+// 자재 데이터 (WSTKKY)
+export interface MaterialData {
+  STKKEY: string; // 자재 키
+  LOCAKEY: string; // Location 키
+  AREAKEY: string; // Area 키
+  LOLAYER: number; // 층 (스택 순서)
+  STKWIDT?: number; // 폭
+  STKLENG?: number; // 길이
+  STKHEIG?: number; // 높이
+  STKWEIG?: number; // 무게
+  STKQTY?: number; // 수량
+  STKSTAT?: string; // 상태
+  STKREDT?: string; // 등록일
+  STKRMKS?: string; // 비고
+}
+
+// 배치된 객체
+export interface PlacedObject {
+  id: number; // 로컬 ID (음수: 임시, 양수: DB 저장됨)
+  type: ObjectType;
+  name: string;
+  position: Position3D;
+  size: Size3D;
+  rotation?: number; // 회전 각도 (라디안)
+  color: string;
+
+  // 외부 DB 연동
+  areaKey?: string; // MAREMA.AREAKEY
+  locaKey?: string; // MLOCMA.LOCAKEY
+  locType?: string; // MLOCMA.LOCTYPE (BED, STP, TMP, DES)
+
+  // 자재 정보
+  materialCount?: number; // 자재 개수
+  materialPreview?: MaterialPreview; // 자재 미리보기
+
+  // 계층 구조
+  parentId?: number;
+  displayOrder?: number;
+
+  // 편집 제한
+  locked?: boolean; // true면 이동/크기조절 불가
+  visible?: boolean;
+
+  // 동적 계층 구조
+  hierarchyLevel?: number; // 1, 2, 3...
+  parentKey?: string; // 부모 객체의 외부 DB 키
+  externalKey?: string; // 자신의 외부 DB 키
+}
+
+// 레이아웃
+export interface DigitalTwinLayout {
+  id: number;
+  companyCode: string;
+  externalDbConnectionId: number;
+  warehouseKey: string; // WAREKEY (예: DY99)
+  layoutName: string;
+  description?: string;
+  hierarchyConfig?: any; // JSON 설정
+  isActive: boolean;
+  createdBy?: number;
+  updatedBy?: number;
+  createdAt: string;
+  updatedAt: string;
+
+  // 통계 (조회 시만)
+  objectCount?: number;
+}
+
+// 레이아웃 상세 (객체 포함)
+export interface DigitalTwinLayoutDetail {
+  layout: DigitalTwinLayout;
+  objects: PlacedObject[];
+}
+
+// 창고 (MWAREMA)
+export interface Warehouse {
+  WAREKEY: string;
+  WARENAME: string;
+  WARETYPE?: string;
+  WARESTAT?: string;
+}
+
+// Area (MAREMA)
+export interface Area {
+  AREAKEY: string;
+  AREANAME: string;
+  AREATYP?: string; // 내부/외부
+  WAREKEY: string;
+  AREASTAT?: string;
+}
+
+// Location (MLOCMA)
+export interface Location {
+  LOCAKEY: string;
+  LOCANAME: string;
+  LOCTYPE: string; // BED, STP, TMP, DES
+  AREAKEY: string;
+  LOCWIDT?: number; // 폭 (현재 데이터는 0)
+  LOCLENG?: number; // 길이 (현재 데이터는 0)
+  LOCHEIG?: number; // 높이 (현재 데이터는 0)
+  LOCCUBI?: number; // 용적 (현재 데이터는 0)
+  LOCSTAT?: string;
+}
+
+// 자재 개수 (배치 시 사용)
+export interface MaterialCount {
+  LOCAKEY: string;
+  material_count: number;
+  max_layer: number;
+}
+
+// API 요청/응답 타입
+export interface CreateLayoutRequest {
+  externalDbConnectionId: number;
+  warehouseKey: string;
+  layoutName: string;
+  description?: string;
+  objects: PlacedObject[];
+}
+
+export interface UpdateLayoutRequest {
+  layoutName: string;
+  description?: string;
+  objects: PlacedObject[];
+}
+
+// 도구 타입 (UI용)
+export type ToolType = ObjectType;
+
diff --git a/frontend/types/screen-management.ts b/frontend/types/screen-management.ts
index a1dbd99a..195b9b61 100644
--- a/frontend/types/screen-management.ts
+++ b/frontend/types/screen-management.ts
@@ -446,9 +446,29 @@ export interface DataTableFilter {
 export interface ColumnFilter {
   id: string;
   columnName: string; // 필터링할 컬럼명
-  operator: "equals" | "not_equals" | "in" | "not_in" | "contains" | "starts_with" | "ends_with" | "is_null" | "is_not_null";
-  value: string | string[]; // 필터 값 (in/not_in은 배열)
-  valueType: "static" | "category" | "code"; // 값 타입
+  operator: 
+    | "equals" 
+    | "not_equals" 
+    | "in" 
+    | "not_in" 
+    | "contains" 
+    | "starts_with" 
+    | "ends_with" 
+    | "is_null" 
+    | "is_not_null"
+    | "greater_than"
+    | "less_than"
+    | "greater_than_or_equal"
+    | "less_than_or_equal"
+    | "between"
+    | "date_range_contains"; // 날짜 범위 포함 (start_date <= value <= end_date)
+  value: string | string[]; // 필터 값 (in/not_in은 배열, date_range_contains는 비교할 날짜)
+  valueType: "static" | "category" | "code" | "dynamic"; // 값 타입 (dynamic: 현재 날짜 등)
+  // date_range_contains 전용 설정
+  rangeConfig?: {
+    startColumn: string; // 시작일 컬럼명
+    endColumn: string; // 종료일 컬럼명
+  };
 }
 
 /**
diff --git a/frontend/types/unified-core.ts b/frontend/types/unified-core.ts
index cba1c3f7..4da2280a 100644
--- a/frontend/types/unified-core.ts
+++ b/frontend/types/unified-core.ts
@@ -85,8 +85,7 @@ export type ComponentType =
   | "area"
   | "layout"
   | "flow"
-  | "component"
-  | "category-manager";
+  | "component";
 
 /**
  * 기본 위치 정보
diff --git a/동적_테이블_접근_시스템_개선_완료.md b/동적_테이블_접근_시스템_개선_완료.md
index d143a6a5..da8f5e82 100644
--- a/동적_테이블_접근_시스템_개선_완료.md
+++ b/동적_테이블_접근_시스템_개선_완료.md
@@ -377,3 +377,4 @@ interface TablePermission {
 
 
 
+
diff --git a/선택항목_상세입력_완전_자동화_가이드.md b/선택항목_상세입력_완전_자동화_가이드.md
new file mode 100644
index 00000000..64886158
--- /dev/null
+++ b/선택항목_상세입력_완전_자동화_가이드.md
@@ -0,0 +1,375 @@
+# 선택 항목 상세입력 완전 자동화 가이드 🚀
+
+## ✨ 완전 자동화 완료!
+
+이제 **아무 설정도 하지 않아도** 데이터가 자동으로 전달됩니다!
+
+---
+
+## 🎯 자동화된 흐름
+
+### 1단계: TableList (선택 화면)
+```
+┌─────────────────────────────────┐
+│ TableList 컴포넌트              │
+│ - 테이블: item_info            │
+│ - 체크박스로 품목 3개 선택      │
+└─────────────────────────────────┘
+         ↓ (자동 저장)
+┌─────────────────────────────────┐
+│ modalDataStore                  │
+│ { "item_info": [선택된 데이터] }│
+└─────────────────────────────────┘
+```
+
+### 2단계: Button (다음 버튼)
+```
+┌─────────────────────────────────┐
+│ Button 컴포넌트                 │
+│ - 액션: "데이터 전달 + 모달열기"│
+│ - dataSourceId: (비워둠)       │ ← 자동 감지!
+└─────────────────────────────────┘
+         ↓ (자동 감지)
+┌─────────────────────────────────┐
+│ 같은 화면에서 TableList 찾기    │
+│ → tableName = "item_info"       │
+└─────────────────────────────────┘
+         ↓ (URL 전달)
+┌─────────────────────────────────┐
+│ 모달 열기                       │
+│ URL: ?dataSourceId=item_info    │
+└─────────────────────────────────┘
+```
+
+### 3단계: SelectedItemsDetailInput (상세 입력 화면)
+```
+┌─────────────────────────────────┐
+│ SelectedItemsDetailInput        │
+│ - dataSourceId: (비워둠)       │ ← URL에서 자동 읽기!
+└─────────────────────────────────┘
+         ↓ (자동 읽기)
+┌─────────────────────────────────┐
+│ URL: ?dataSourceId=item_info    │
+│ → modalDataStore에서 데이터 로드│
+└─────────────────────────────────┘
+         ↓
+┌─────────────────────────────────┐
+│ 화면에 데이터 표시              │
+│ 선택된 3개 품목 + 입력 필드     │
+└─────────────────────────────────┘
+```
+
+---
+
+## 🛠️ 설정 방법 (완전 자동)
+
+### 1단계: 선택 화면 구성
+
+#### TableList 컴포넌트
+```yaml
+테이블: item_info
+옵션:
+  - 체크박스 표시: ✓
+  - 다중 선택: ✓
+```
+
+**설정 끝!** 선택된 데이터는 자동으로 `modalDataStore`에 저장됩니다.
+
+#### Button 컴포넌트
+```yaml
+버튼 텍스트: "다음"
+버튼 액션: "데이터 전달 + 모달 열기" 🆕
+
+설정:
+  - 데이터 소스 ID: (비워둠) ← ✨ 자동 감지!
+  - 모달 제목: "상세 정보 입력"
+  - 모달 크기: Large
+  - 대상 화면: (상세 입력 화면 선택)
+```
+
+**중요**: `데이터 소스 ID`를 **비워두세요**! 자동으로 같은 화면의 TableList를 찾아서 테이블명을 사용합니다.
+
+---
+
+### 2단계: 상세 입력 화면 구성
+
+#### SelectedItemsDetailInput 컴포넌트 추가
+```yaml
+컴포넌트: "선택 항목 상세입력"
+```
+
+**설정 끝!** URL 파라미터에서 자동으로 `dataSourceId`를 읽어옵니다.
+
+#### 상세 설정 (선택사항)
+```yaml
+데이터 소스 ID: (비워둠) ← ✨ URL에서 자동!
+
+표시할 컬럼:
+  - 품목코드 (item_code)
+  - 품목명 (item_name)
+  - 규격 (specification)
+
+추가 입력 필드:
+  - 수량 (quantity): 숫자
+  - 단가 (unit_price): 숫자
+  - 납기일 (delivery_date): 날짜
+  - 비고 (remarks): 텍스트영역
+
+옵션:
+  - 레이아웃: 테이블 형식 (Grid)
+  - 항목 번호 표시: ✓
+  - 항목 제거 허용: ☐
+```
+
+---
+
+## 📊 실제 동작 시나리오
+
+### 시나리오: 수주 등록
+
+#### 1단계: 품목 선택
+```
+사용자가 품목 테이블에서 3개 선택:
+  ✓ [PD-001] 케이블 100m
+  ✓ [PD-002] 커넥터 50개
+  ✓ [PD-003] 단자대 20개
+```
+
+#### 2단계: "다음" 버튼 클릭
+```javascript
+// 자동으로 일어나는 일:
+1. 같은 화면에서 table-list 컴포넌트 찾기
+   → componentType === "table-list"
+   → tableName === "item_info"
+
+2. modalDataStore에서 데이터 확인
+   → modalData = [
+       { id: "PD-001", originalData: {...} },
+       { id: "PD-002", originalData: {...} },
+       { id: "PD-003", originalData: {...} }
+     ]
+
+3. 모달 열기 + URL 파라미터 전달
+   → URL: /screen/detail-input?dataSourceId=item_info
+```
+
+#### 3단계: 상세 정보 입력
+```
+자동으로 표시됨:
+
+┌───────────────────────────────────────────────────────┐
+│ 상세 정보 입력                                        │
+├───────────────────────────────────────────────────────┤
+│ # │ 품목코드 │ 품목명     │ 수량 │ 단가   │ 납기일  │
+├───┼──────────┼────────────┼──────┼────────┼─────────┤
+│ 1 │ PD-001   │ 케이블100m │ [  ] │ [    ] │ [     ] │
+│ 2 │ PD-002   │ 커넥터50개 │ [  ] │ [    ] │ [     ] │
+│ 3 │ PD-003   │ 단자대20개 │ [  ] │ [    ] │ [     ] │
+└───────────────────────────────────────────────────────┘
+
+사용자가 수량, 단가, 납기일만 입력하면 끝!
+```
+
+---
+
+## 🎨 UI 미리보기
+
+### Button 설정 화면
+```
+버튼 액션
+├─ 데이터 전달 + 모달 열기 🆕
+│
+└─ 데이터 전달 + 모달 설정
+   │
+   ├─ 데이터 소스 ID (선택사항)
+   │  [                                    ]
+   │  ✨ 비워두면 같은 화면의 TableList를 자동으로 감지합니다
+   │  직접 지정하려면 테이블명을 입력하세요 (예: item_info)
+   │
+   ├─ 모달 제목
+   │  [상세 정보 입력                      ]
+   │
+   ├─ 모달 크기
+   │  [큰 (Large) - 권장              ▼]
+   │
+   └─ 대상 화면 선택
+      [화면을 선택하세요...             ▼]
+```
+
+### SelectedItemsDetailInput 설정 화면
+```
+데이터 소스 ID (자동 설정됨)
+[                                    ]
+✨ URL 파라미터에서 자동으로 가져옵니다 (Button이 전달)
+테스트용으로 직접 입력하려면 테이블명을 입력하세요
+```
+
+---
+
+## 🔍 자동화 원리
+
+### 1. TableList → modalDataStore
+```typescript
+// TableListComponent.tsx
+const handleRowSelection = (rowKey: string, checked: boolean) => {
+  // ... 선택 처리 ...
+  
+  // 🆕 자동으로 스토어에 저장
+  const { useModalDataStore } = await import("@/stores/modalDataStore");
+  const dataSourceId = tableName; // item_info
+  const modalDataItems = selectedRowsData.map(row => ({
+    id: row.item_code,
+    originalData: row,
+    additionalData: {}
+  }));
+  useModalDataStore.getState().setData(dataSourceId, modalDataItems);
+};
+```
+
+### 2. Button → TableList 자동 감지
+```typescript
+// buttonActions.ts - handleOpenModalWithData()
+let dataSourceId = config.dataSourceId;
+
+// 🆕 비워있으면 자동 감지
+if (!dataSourceId && context.allComponents) {
+  const tableListComponent = context.allComponents.find(
+    (comp) => comp.componentType === "table-list" && comp.componentConfig?.tableName
+  );
+  
+  if (tableListComponent) {
+    dataSourceId = tableListComponent.componentConfig.tableName;
+    console.log("✨ TableList 자동 감지:", dataSourceId);
+  }
+}
+
+// 🆕 URL 파라미터로 전달
+const modalEvent = new CustomEvent("openScreenModal", {
+  detail: {
+    screenId: config.targetScreenId,
+    urlParams: { dataSourceId } // ← URL에 추가
+  }
+});
+```
+
+### 3. SelectedItemsDetailInput → URL 읽기
+```typescript
+// SelectedItemsDetailInputComponent.tsx
+import { useSearchParams } from "next/navigation";
+
+const searchParams = useSearchParams();
+const urlDataSourceId = searchParams?.get("dataSourceId");
+
+// 🆕 우선순위: URL > 설정 > component.id
+const dataSourceId = useMemo(
+  () => urlDataSourceId || componentConfig.dataSourceId || component.id,
+  [urlDataSourceId, componentConfig.dataSourceId, component.id]
+);
+
+// 🆕 스토어에서 데이터 로드
+const dataRegistry = useModalDataStore((state) => state.dataRegistry);
+const modalData = dataRegistry[dataSourceId] || [];
+```
+
+---
+
+## 🧪 테스트 시나리오
+
+### 기본 테스트
+1. **화면 편집기 열기**
+2. **첫 번째 화면 (선택) 만들기**:
+   - TableList 추가 (item_info)
+   - Button 추가 (버튼 액션: "데이터 전달 + 모달 열기")
+   - **dataSourceId는 비워둠!**
+3. **두 번째 화면 (상세 입력) 만들기**:
+   - SelectedItemsDetailInput 추가
+   - **dataSourceId는 비워둠!**
+   - 표시 컬럼 설정
+   - 추가 입력 필드 설정
+4. **할당된 화면에서 테스트**:
+   - 품목 3개 선택
+   - "다음" 버튼 클릭
+   - 상세 입력 화면에서 데이터 확인 ✅
+
+### 고급 테스트 (직접 지정)
+```yaml
+시나리오: 여러 TableList가 있는 화면
+
+화면 구성:
+  - TableList (item_info) ← 품목
+  - TableList (customer_info) ← 고객
+  - Button (품목 상세입력) ← dataSourceId: "item_info"
+  - Button (고객 상세입력) ← dataSourceId: "customer_info"
+```
+
+---
+
+## 🚨 주의사항
+
+### ❌ 잘못된 사용법
+```yaml
+# 1. 같은 화면에 TableList가 여러 개 있는데 비워둠
+TableList 1: item_info
+TableList 2: customer_info
+Button: dataSourceId = (비워둠) ← 어느 것을 선택해야 할까?
+
+해결: dataSourceId를 명시적으로 지정
+```
+
+### ✅ 올바른 사용법
+```yaml
+# 1. TableList가 1개인 경우
+TableList: item_info
+Button: dataSourceId = (비워둠) ← 자동 감지 OK!
+
+# 2. TableList가 여러 개인 경우
+TableList 1: item_info
+TableList 2: customer_info
+Button 1: dataSourceId = "item_info" ← 명시
+Button 2: dataSourceId = "customer_info" ← 명시
+```
+
+---
+
+## 🎯 완료 체크리스트
+
+### 구현 완료 ✅
+- [x] TableList → modalDataStore 자동 저장
+- [x] Button → TableList 자동 감지
+- [x] Button → URL 파라미터 전달
+- [x] SelectedItemsDetailInput → URL 자동 읽기
+- [x] 설정 패널 UI에 "자동" 힌트 추가
+
+### 사용자 경험 ✅
+- [x] dataSourceId 입력 불필요 (자동)
+- [x] 일관된 데이터 흐름 (자동)
+- [x] 오류 메시지 명확 (자동)
+- [x] 직관적인 UI (자동 힌트)
+
+---
+
+## 📝 요약
+
+**이제 사용자는 단 3단계만 하면 됩니다:**
+
+1. **TableList 추가** → 테이블 선택
+2. **Button 추가** → 액션 "데이터 전달 + 모달 열기" 선택
+3. **SelectedItemsDetailInput 추가** → 필드 설정
+
+**dataSourceId는 자동으로 처리됩니다!** ✨
+
+---
+
+## 🔗 관련 파일
+
+- `frontend/stores/modalDataStore.ts` - 데이터 저장소
+- `frontend/lib/utils/buttonActions.ts` - 버튼 액션 (자동 감지)
+- `frontend/lib/registry/components/table-list/TableListComponent.tsx` - 자동 저장
+- `frontend/lib/registry/components/selected-items-detail-input/SelectedItemsDetailInputComponent.tsx` - URL 자동 읽기
+- `frontend/components/screen/config-panels/ButtonConfigPanel.tsx` - 버튼 설정 UI
+- `frontend/lib/registry/components/selected-items-detail-input/SelectedItemsDetailInputConfigPanel.tsx` - 상세 입력 설정 UI
+
+---
+
+**🎉 완전 자동화 완료!**
+
diff --git a/선택항목_상세입력_컴포넌트_완성_가이드.md b/선택항목_상세입력_컴포넌트_완성_가이드.md
new file mode 100644
index 00000000..e3ce448f
--- /dev/null
+++ b/선택항목_상세입력_컴포넌트_완성_가이드.md
@@ -0,0 +1,413 @@
+# 선택 항목 상세입력 컴포넌트 - 완성 가이드
+
+## 📦 구현 완료 사항
+
+### ✅ 1. Zustand 스토어 생성 (modalDataStore)
+- 파일: `frontend/stores/modalDataStore.ts`
+- 기능:
+  - 모달 간 데이터 전달 관리
+  - `setData()`: 데이터 저장
+  - `getData()`: 데이터 조회
+  - `clearData()`: 데이터 정리
+  - `updateItemData()`: 항목별 추가 데이터 업데이트
+
+### ✅ 2. SelectedItemsDetailInput 컴포넌트 생성
+- 디렉토리: `frontend/lib/registry/components/selected-items-detail-input/`
+- 파일들:
+  - `types.ts`: 타입 정의
+  - `SelectedItemsDetailInputComponent.tsx`: 메인 컴포넌트
+  - `SelectedItemsDetailInputConfigPanel.tsx`: 설정 패널
+  - `SelectedItemsDetailInputRenderer.tsx`: 렌더러
+  - `index.ts`: 컴포넌트 정의
+  - `README.md`: 사용 가이드
+
+### ✅ 3. 컴포넌트 기능
+- 전달받은 원본 데이터 표시 (읽기 전용)
+- 각 항목별 추가 입력 필드 제공
+- Grid/Table 레이아웃 및 Card 레이아웃 지원
+- 6가지 입력 타입 지원 (text, number, date, select, checkbox, textarea)
+- 필수 입력 검증
+- 항목 삭제 기능
+
+### ✅ 4. 설정 패널 기능
+- 데이터 소스 ID 설정
+- 저장 대상 테이블 선택 (검색 가능한 Combobox)
+- 표시할 원본 데이터 컬럼 선택
+- 추가 입력 필드 정의 (필드명, 라벨, 타입, 필수 여부 등)
+- 레이아웃 모드 선택 (Grid/Card)
+- 옵션 설정 (번호 표시, 삭제 허용, 비활성화)
+
+---
+
+## 🚧 남은 작업 (구현 필요)
+
+### 1. TableList에서 선택된 행 데이터를 스토어에 저장
+
+**필요한 수정 파일:**
+- `frontend/lib/registry/components/table-list/TableListComponent.tsx`
+
+**구현 방법:**
+```typescript
+import { useModalDataStore } from "@/stores/modalDataStore";
+
+// TableList 컴포넌트 내부
+const setModalData = useModalDataStore((state) => state.setData);
+
+// 선택된 행이 변경될 때마다 스토어에 저장
+useEffect(() => {
+  if (selectedRows.length > 0) {
+    const modalDataItems = selectedRows.map((row) => ({
+      id: row[primaryKeyColumn] || row.id,
+      originalData: row,
+      additionalData: {},
+    }));
+    
+    // 컴포넌트 ID를 키로 사용하여 저장
+    setModalData(component.id || "default", modalDataItems);
+    
+    console.log("📦 [TableList] 선택된 데이터 저장:", modalDataItems);
+  }
+}, [selectedRows, component.id, setModalData]);
+```
+
+**참고:**
+- `selectedRows`: TableList의 체크박스로 선택된 행들
+- `component.id`: 컴포넌트 고유 ID
+- 이 ID가 SelectedItemsDetailInput의 `dataSourceId`와 일치해야 함
+
+---
+
+### 2. ButtonPrimary에 'openModalWithData' 액션 타입 추가
+
+**필요한 수정 파일:**
+- `frontend/lib/registry/components/button-primary/types.ts`
+- `frontend/lib/registry/components/button-primary/ButtonPrimaryComponent.tsx`
+- `frontend/lib/registry/components/button-primary/ButtonPrimaryConfigPanel.tsx`
+
+#### A. types.ts 수정
+
+```typescript
+export interface ButtonPrimaryConfig extends ComponentConfig {
+  action?: {
+    type: 
+      | "save" 
+      | "delete" 
+      | "popup" 
+      | "navigate" 
+      | "custom" 
+      | "openModalWithData"; // 🆕 새 액션 타입
+    
+    // 기존 필드들...
+    
+    // 🆕 모달 데이터 전달용 필드
+    targetScreenId?: number; // 열릴 모달 화면 ID
+    dataSourceId?: string; // 데이터를 전달할 컴포넌트 ID
+  };
+}
+```
+
+#### B. ButtonPrimaryComponent.tsx 수정
+
+```typescript
+import { useModalDataStore } from "@/stores/modalDataStore";
+
+// 컴포넌트 내부
+const modalData = useModalDataStore((state) => state.getData);
+
+// handleClick 함수 수정
+const handleClick = async () => {
+  // ... 기존 코드 ...
+  
+  // openModalWithData 액션 처리
+  if (processedConfig.action?.type === "openModalWithData") {
+    const { targetScreenId, dataSourceId } = processedConfig.action;
+    
+    if (!targetScreenId) {
+      toast.error("대상 화면이 설정되지 않았습니다.");
+      return;
+    }
+    
+    if (!dataSourceId) {
+      toast.error("데이터 소스가 설정되지 않았습니다.");
+      return;
+    }
+    
+    // 데이터 확인
+    const data = modalData(dataSourceId);
+    
+    if (!data || data.length === 0) {
+      toast.warning("전달할 데이터가 없습니다. 먼저 항목을 선택해주세요.");
+      return;
+    }
+    
+    console.log("📦 [ButtonPrimary] 데이터와 함께 모달 열기:", {
+      targetScreenId,
+      dataSourceId,
+      dataCount: data.length,
+    });
+    
+    // 모달 열기 (기존 popup 액션과 동일)
+    toast.success(`${data.length}개 항목을 전달합니다.`);
+    
+    // TODO: 실제 모달 열기 로직 (popup 액션 참고)
+    window.open(`/screens/${targetScreenId}`, "_blank");
+    
+    return;
+  }
+  
+  // ... 기존 액션 처리 코드 ...
+};
+```
+
+#### C. ButtonPrimaryConfigPanel.tsx 수정
+
+설정 패널에 openModalWithData 액션 설정 UI 추가:
+
+```typescript
+{config.action?.type === "openModalWithData" && (
+  <div className="mt-4 space-y-4 rounded-lg border bg-muted/50 p-4">
+    <h4 className="text-sm font-medium">데이터 전달 설정</h4>
+    
+    {/* 대상 화면 선택 */}
+    <div>
+      <Label htmlFor="target-screen">열릴 모달 화면</Label>
+      <Popover open={screenOpen} onOpenChange={setScreenOpen}>
+        <PopoverTrigger asChild>
+          <Button variant="outline" role="combobox" className="w-full justify-between">
+            {config.action?.targetScreenId
+              ? screens.find((s) => s.id === config.action?.targetScreenId)?.name || "화면 선택"
+              : "화면 선택"}
+            <ChevronsUpDown className="ml-2 h-4 w-4" />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent>
+          {/* 화면 목록 표시 */}
+        </PopoverContent>
+      </Popover>
+    </div>
+    
+    {/* 데이터 소스 ID 입력 */}
+    <div>
+      <Label htmlFor="data-source-id">데이터 소스 ID</Label>
+      <Input
+        id="data-source-id"
+        value={config.action?.dataSourceId || ""}
+        onChange={(e) =>
+          updateActionConfig("dataSourceId", e.target.value)
+        }
+        placeholder="table-list-123"
+      />
+      <p className="text-xs text-gray-500 mt-1">
+        💡 데이터를 전달할 컴포넌트의 ID (예: TableList의 ID)
+      </p>
+    </div>
+  </div>
+)}
+```
+
+---
+
+### 3. 저장 기능 구현
+
+**방법 1: 기존 save 액션 활용**
+
+SelectedItemsDetailInput의 데이터는 자동으로 `formData`에 포함되므로, 기존 save 액션을 그대로 사용할 수 있습니다:
+
+```typescript
+// formData 구조
+{
+  "selected-items-component-id": [
+    {
+      id: "SALE-003",
+      originalData: { item_code: "SALE-003", ... },
+      additionalData: { customer_item_code: "ABC-001", unit_price: 50, ... }
+    },
+    // ... 더 많은 항목들
+  ]
+}
+```
+
+백엔드에서 이 데이터를 받아서 각 항목을 개별 INSERT하면 됩니다.
+
+**방법 2: 전용 save 로직 추가**
+
+더 나은 UX를 위해 전용 저장 로직을 추가할 수 있습니다:
+
+```typescript
+// ButtonPrimary의 save 액션에서
+if (config.action?.type === "save") {
+  // formData에서 SelectedItemsDetailInput 데이터 찾기
+  const selectedItemsKey = Object.keys(formData).find(
+    (key) => Array.isArray(formData[key]) && formData[key][0]?.originalData
+  );
+  
+  if (selectedItemsKey) {
+    const items = formData[selectedItemsKey] as ModalDataItem[];
+    
+    // 저장할 데이터 변환
+    const dataToSave = items.map((item) => ({
+      ...item.originalData,
+      ...item.additionalData,
+    }));
+    
+    // 백엔드 API 호출
+    const response = await apiClient.post(`/api/table-data/${targetTable}`, {
+      data: dataToSave,
+      batchInsert: true,
+    });
+    
+    if (response.data.success) {
+      toast.success(`${dataToSave.length}개 항목이 저장되었습니다.`);
+      onClose?.();
+    }
+  }
+}
+```
+
+---
+
+## 🎯 통합 테스트 시나리오
+
+### 시나리오: 수주 등록 - 품목 상세 입력
+
+#### 1단계: 화면 구성
+
+**[모달 1] 품목 선택 화면 (screen_id: 100)**
+
+- TableList 컴포넌트
+  - ID: `item-selection-table`
+  - multiSelect: `true`
+  - selectedTable: `item_info`
+  - columns: 품목코드, 품목명, 규격, 단위, 단가
+
+- ButtonPrimary 컴포넌트
+  - text: "다음 (상세정보 입력)"
+  - action.type: `openModalWithData`
+  - action.targetScreenId: `101` (두 번째 모달)
+  - action.dataSourceId: `item-selection-table`
+
+**[모달 2] 상세 입력 화면 (screen_id: 101)**
+
+- SelectedItemsDetailInput 컴포넌트
+  - ID: `selected-items-detail`
+  - dataSourceId: `item-selection-table`
+  - displayColumns: `["item_code", "item_name", "spec", "unit"]`
+  - additionalFields:
+    ```json
+    [
+      { "name": "customer_item_code", "label": "거래처 품번", "type": "text" },
+      { "name": "customer_item_name", "label": "거래처 품명", "type": "text" },
+      { "name": "year", "label": "연도", "type": "select", "options": [...] },
+      { "name": "currency", "label": "통화", "type": "select", "options": [...] },
+      { "name": "unit_price", "label": "단가", "type": "number", "required": true },
+      { "name": "quantity", "label": "수량", "type": "number", "required": true }
+    ]
+    ```
+  - targetTable: `sales_detail`
+  - layout: `grid`
+
+- ButtonPrimary 컴포넌트 (저장)
+  - text: "저장"
+  - action.type: `save`
+  - action.targetTable: `sales_detail`
+
+#### 2단계: 테스트 절차
+
+1. [모달 1] 품목 선택 화면 열기
+2. TableList에서 3개 품목 체크박스 선택
+3. "다음" 버튼 클릭
+   - ✅ modalDataStore에 3개 항목 저장 확인 (콘솔 로그)
+   - ✅ 모달 2가 열림
+4. [모달 2] SelectedItemsDetailInput에 3개 항목 자동 표시 확인
+   - ✅ 원본 데이터 (품목코드, 품목명, 규격, 단위) 표시
+   - ✅ 추가 입력 필드 (거래처 품번, 단가, 수량 등) 빈 상태
+5. 각 항목별로 추가 정보 입력
+   - 거래처 품번: "ABC-001", "ABC-002", "ABC-003"
+   - 단가: 50, 200, 3000
+   - 수량: 100, 50, 200
+6. "저장" 버튼 클릭
+   - ✅ formData에 전체 데이터 포함 확인
+   - ✅ 백엔드 API 호출
+   - ✅ 저장 성공 토스트 메시지
+   - ✅ 모달 닫힘
+
+#### 3단계: 데이터 검증
+
+데이터베이스에 다음과 같이 저장되어야 합니다:
+
+```sql
+SELECT * FROM sales_detail;
+-- 결과:
+-- item_code | item_name | spec | unit | customer_item_code | unit_price | quantity
+-- SALE-003  | 와셔 M8   | M8   | EA   | ABC-001            | 50         | 100
+-- SALE-005  | 육각 볼트 | M10  | EA   | ABC-002            | 200        | 50
+-- SIL-003   | 실리콘    | 325  | kg   | ABC-003            | 3000       | 200
+```
+
+---
+
+## 📚 추가 참고 자료
+
+### 관련 파일 위치
+
+- 스토어: `frontend/stores/modalDataStore.ts`
+- 컴포넌트: `frontend/lib/registry/components/selected-items-detail-input/`
+- TableList: `frontend/lib/registry/components/table-list/`
+- ButtonPrimary: `frontend/lib/registry/components/button-primary/`
+
+### 디버깅 팁
+
+콘솔에서 다음 명령어로 상태 확인:
+
+```javascript
+// 모달 데이터 확인
+__MODAL_DATA_STORE__.getState().dataRegistry
+
+// 컴포넌트 등록 확인
+__COMPONENT_REGISTRY__.get("selected-items-detail-input")
+
+// TableList 선택 상태 확인
+// (TableList 컴포넌트 내부에 로그 추가 필요)
+```
+
+### 예상 문제 및 해결
+
+1. **데이터가 전달되지 않음**
+   - dataSourceId가 정확히 일치하는지 확인
+   - modalDataStore에 데이터가 저장되었는지 콘솔 로그 확인
+
+2. **컴포넌트가 표시되지 않음**
+   - `frontend/lib/registry/components/index.ts`에 import 추가되었는지 확인
+   - 브라우저 새로고침 후 재시도
+
+3. **저장이 안 됨**
+   - formData에 데이터가 포함되어 있는지 확인
+   - 백엔드 API 응답 확인
+   - targetTable이 올바른지 확인
+
+---
+
+## ✅ 완료 체크리스트
+
+- [x] Zustand 스토어 생성 (modalDataStore)
+- [x] SelectedItemsDetailInput 컴포넌트 생성
+- [x] 컴포넌트 렌더링 로직 구현
+- [x] 설정 패널 구현
+- [ ] TableList에서 선택된 데이터를 스토어에 저장
+- [ ] ButtonPrimary에 openModalWithData 액션 추가
+- [ ] 저장 기능 구현
+- [ ] 통합 테스트
+- [ ] 사용자 매뉴얼 작성
+
+---
+
+## 🚀 다음 단계
+
+1. TableList 컴포넌트에 modalDataStore 연동 추가
+2. ButtonPrimary에 openModalWithData 액션 구현
+3. 수주 등록 화면에서 실제 테스트
+4. 문제 발견 시 디버깅 및 수정
+5. 문서 업데이트 및 배포
+
+**예상 소요 시간**: 2~3시간
+
diff --git a/수주등록_화면_개발_계획서.md b/수주등록_화면_개발_계획서.md
new file mode 100644
index 00000000..1e6a8206
--- /dev/null
+++ b/수주등록_화면_개발_계획서.md
@@ -0,0 +1,1353 @@
+# 📋 수주 등록 화면 개발 계획서
+
+## 📌 프로젝트 개요
+
+**목표**: 수주 등록 모달 화면 구현을 위한 범용 컴포넌트 개발 및 전용 화면 구성
+
+**기간**: 약 4-5일
+
+**전략**: 핵심 범용 컴포넌트 우선 개발 → 전용 화면 구성 → 점진적 확장
+
+---
+
+## 🎯 Phase 1: 범용 컴포넌트 개발 (2-3일)
+
+### 1.1 EntitySearchInput 컴포넌트 ⭐⭐⭐
+
+**목적**: 엔티티 테이블(거래처, 품목, 사용자 등)에서 데이터를 검색하고 선택하는 범용 입력 컴포넌트
+
+#### 주요 기능
+
+- 자동완성 검색 (타이핑 시 실시간 검색)
+- 모달 검색 (버튼 클릭 → 전체 목록 + 검색)
+- 콤보 모드 (입력 필드 + 검색 버튼)
+- 다중 필드 검색 지원
+- 선택된 항목 표시 및 초기화
+
+#### 인터페이스 설계
+
+```typescript
+// frontend/lib/registry/components/entity-search-input/types.ts
+
+export interface EntitySearchInputProps {
+  // 데이터 소스
+  tableName: string; // 검색할 테이블명 (예: "customer_mng")
+  displayField: string; // 표시할 필드 (예: "customer_name")
+  valueField: string; // 값으로 사용할 필드 (예: "customer_code")
+  searchFields?: string[]; // 검색 대상 필드들 (기본: [displayField])
+
+  // UI 모드
+  mode?: "autocomplete" | "modal" | "combo"; // 기본: "combo"
+  placeholder?: string;
+  disabled?: boolean;
+
+  // 필터링
+  filterCondition?: Record<string, any>; // 추가 WHERE 조건
+  companyCode?: string; // 멀티테넌시
+
+  // 선택된 값
+  value?: any;
+  onChange?: (value: any, fullData?: any) => void;
+
+  // 모달 설정 (mode가 "modal" 또는 "combo"일 때)
+  modalTitle?: string;
+  modalColumns?: string[]; // 모달에 표시할 컬럼들
+
+  // 추가 표시 정보
+  showAdditionalInfo?: boolean; // 선택 후 추가 정보 표시 (예: 주소)
+  additionalFields?: string[]; // 추가로 표시할 필드들
+}
+```
+
+#### 파일 구조
+
+```
+frontend/lib/registry/components/entity-search-input/
+├── EntitySearchInputComponent.tsx       # 메인 컴포넌트
+├── EntitySearchModal.tsx                # 검색 모달
+├── types.ts                             # 타입 정의
+├── useEntitySearch.ts                   # 검색 로직 훅
+└── EntitySearchInputConfig.tsx          # 속성 편집 패널
+```
+
+#### API 엔드포인트 (백엔드)
+
+```typescript
+// backend-node/src/controllers/entitySearchController.ts
+
+/**
+ * GET /api/entity-search/:tableName
+ * Query params:
+ *   - searchText: 검색어
+ *   - searchFields: 검색할 필드들 (콤마 구분)
+ *   - filterCondition: JSON 형식의 추가 조건
+ *   - page, limit: 페이징
+ */
+router.get("/api/entity-search/:tableName", async (req, res) => {
+  const { tableName } = req.params;
+  const {
+    searchText,
+    searchFields,
+    filterCondition,
+    page = 1,
+    limit = 20,
+  } = req.query;
+
+  // 멀티테넌시 자동 적용
+  const companyCode = req.user.companyCode;
+
+  // 검색 실행
+  const results = await entitySearchService.search({
+    tableName,
+    searchText,
+    searchFields: searchFields?.split(","),
+    filterCondition: filterCondition ? JSON.parse(filterCondition) : {},
+    companyCode,
+    page: parseInt(page),
+    limit: parseInt(limit),
+  });
+
+  res.json({ success: true, data: results });
+});
+```
+
+#### 사용 예시
+
+```tsx
+// 거래처 검색 - 콤보 모드 (입력 + 버튼)
+<EntitySearchInput
+  tableName="customer_mng"
+  displayField="customer_name"
+  valueField="customer_code"
+  searchFields={["customer_name", "customer_code", "business_number"]}
+  mode="combo"
+  placeholder="거래처를 검색하세요"
+  modalTitle="거래처 검색 및 선택"
+  modalColumns={["customer_code", "customer_name", "address", "tel"]}
+  showAdditionalInfo
+  additionalFields={["address", "tel", "business_number"]}
+  value={formData.customerCode}
+  onChange={(code, fullData) => {
+    setFormData({
+      ...formData,
+      customerCode: code,
+      customerName: fullData.customer_name,
+      customerAddress: fullData.address,
+    });
+  }}
+/>
+
+// 품목 검색 - 모달 전용
+<EntitySearchInput
+  tableName="item_info"
+  displayField="item_name"
+  valueField="item_code"
+  mode="modal"
+  placeholder="품목 선택"
+  modalTitle="품목 검색"
+  value={formData.itemCode}
+  onChange={(code, fullData) => {
+    setFormData({
+      ...formData,
+      itemCode: code,
+      itemName: fullData.item_name,
+      unitPrice: fullData.unit_price,
+    });
+  }}
+/>
+
+// 사용자 검색 - 자동완성 전용
+<EntitySearchInput
+  tableName="user_info"
+  displayField="user_name"
+  valueField="user_id"
+  searchFields={["user_name", "user_id", "email"]}
+  mode="autocomplete"
+  placeholder="사용자 검색"
+  value={formData.userId}
+  onChange={(userId, userData) => {
+    setFormData({
+      ...formData,
+      userId,
+      userName: userData.user_name,
+    });
+  }}
+/>
+```
+
+---
+
+### 1.2 ModalRepeaterTable 컴포넌트 ⭐⭐
+
+**목적**: 모달에서 데이터를 검색하여 선택하고, 선택된 항목들을 동적 테이블(Repeater)에 추가하는 범용 컴포넌트
+
+#### 주요 기능
+
+- 모달 버튼 클릭 → 소스 테이블 검색 모달 열기
+- 다중 선택 지원 (체크박스)
+- 선택한 항목들을 Repeater 테이블에 추가
+- 추가된 행의 필드 편집 가능 (수량, 단가 등)
+- 계산 필드 지원 (수량 × 단가 = 금액)
+- 행 삭제 기능
+- 중복 방지 (이미 추가된 항목은 선택 불가)
+
+#### 인터페이스 설계
+
+```typescript
+// frontend/lib/registry/components/modal-repeater-table/types.ts
+
+export interface ModalRepeaterTableProps {
+  // 소스 데이터 (모달에서 가져올 데이터)
+  sourceTable: string; // 검색할 테이블 (예: "item_info")
+  sourceColumns: string[]; // 모달에 표시할 컬럼들
+  sourceSearchFields?: string[]; // 검색 가능한 필드들
+
+  // 모달 설정
+  modalTitle: string; // 모달 제목 (예: "품목 검색 및 선택")
+  modalButtonText?: string; // 모달 열기 버튼 텍스트 (기본: "품목 검색")
+  multiSelect?: boolean; // 다중 선택 허용 (기본: true)
+
+  // Repeater 테이블 설정
+  columns: RepeaterColumnConfig[]; // 테이블 컬럼 설정
+
+  // 계산 규칙
+  calculationRules?: CalculationRule[]; // 자동 계산 규칙
+
+  // 데이터
+  value: any[]; // 현재 추가된 항목들
+  onChange: (newData: any[]) => void; // 데이터 변경 콜백
+
+  // 중복 체크
+  uniqueField?: string; // 중복 체크할 필드 (예: "item_code")
+
+  // 필터링
+  filterCondition?: Record<string, any>;
+  companyCode?: string;
+}
+
+export interface RepeaterColumnConfig {
+  field: string; // 필드명
+  label: string; // 컬럼 헤더 라벨
+  type?: "text" | "number" | "date" | "select"; // 입력 타입
+  editable?: boolean; // 편집 가능 여부
+  calculated?: boolean; // 계산 필드 여부
+  width?: string; // 컬럼 너비
+  required?: boolean; // 필수 입력 여부
+  defaultValue?: any; // 기본값
+  selectOptions?: { value: string; label: string }[]; // select일 때 옵션
+}
+
+export interface CalculationRule {
+  result: string; // 결과를 저장할 필드
+  formula: string; // 계산 공식 (예: "quantity * unit_price")
+  dependencies: string[]; // 의존하는 필드들 (자동 추출 가능)
+}
+```
+
+#### 파일 구조
+
+```
+frontend/lib/registry/components/modal-repeater-table/
+├── ModalRepeaterTableComponent.tsx    # 메인 컴포넌트
+├── ItemSelectionModal.tsx             # 항목 선택 모달
+├── RepeaterTable.tsx                  # 동적 테이블 (편집 가능)
+├── types.ts                           # 타입 정의
+├── useCalculation.ts                  # 계산 로직 훅
+└── ModalRepeaterTableConfig.tsx       # 속성 편집 패널
+```
+
+#### 사용 예시
+
+```tsx
+// 품목 추가 테이블 (수주 등록)
+<ModalRepeaterTable
+  sourceTable="item_info"
+  sourceColumns={["item_code", "item_name", "spec", "unit", "unit_price"]}
+  sourceSearchFields={["item_code", "item_name", "spec"]}
+  modalTitle="품목 검색 및 선택"
+  modalButtonText="품목 검색"
+  multiSelect={true}
+  columns={[
+    { field: "item_code", label: "품번", editable: false, width: "120px" },
+    { field: "item_name", label: "품명", editable: false, width: "200px" },
+    { field: "spec", label: "규격", editable: false, width: "150px" },
+    {
+      field: "quantity",
+      label: "수량",
+      type: "number",
+      editable: true,
+      required: true,
+      defaultValue: 1,
+      width: "100px",
+    },
+    {
+      field: "unit_price",
+      label: "단가",
+      type: "number",
+      editable: true,
+      required: true,
+      width: "120px",
+    },
+    {
+      field: "amount",
+      label: "금액",
+      type: "number",
+      editable: false,
+      calculated: true,
+      width: "120px",
+    },
+    {
+      field: "delivery_date",
+      label: "납품일",
+      type: "date",
+      editable: true,
+      width: "130px",
+    },
+    {
+      field: "note",
+      label: "비고",
+      type: "text",
+      editable: true,
+      width: "200px",
+    },
+  ]}
+  calculationRules={[
+    {
+      result: "amount",
+      formula: "quantity * unit_price",
+      dependencies: ["quantity", "unit_price"],
+    },
+  ]}
+  uniqueField="item_code"
+  value={selectedItems}
+  onChange={(newItems) => {
+    setSelectedItems(newItems);
+    // 전체 금액 재계산
+    const totalAmount = newItems.reduce(
+      (sum, item) => sum + (item.amount || 0),
+      0
+    );
+    setFormData({ ...formData, totalAmount });
+  }}
+/>
+```
+
+#### 컴포넌트 동작 흐름
+
+1. **초기 렌더링**
+
+   - "품목 검색" 버튼 표시
+   - 현재 추가된 항목들을 테이블로 표시
+
+2. **모달 열기**
+
+   - 버튼 클릭 → `ItemSelectionModal` 열림
+   - `sourceTable`에서 데이터 조회 (페이징, 검색 지원)
+   - 이미 추가된 항목은 체크박스 비활성화 (중복 방지)
+
+3. **항목 선택 및 추가**
+
+   - 체크박스로 다중 선택
+   - "추가" 버튼 클릭 → 선택된 항목들이 `value` 배열에 추가
+   - `onChange` 콜백 호출
+
+4. **편집**
+
+   - 추가된 행의 편집 가능한 필드 클릭 → 인라인 편집
+   - `editable: true`인 필드만 편집 가능
+   - 값 변경 시 → 계산 필드 자동 업데이트
+
+5. **계산 필드 업데이트**
+
+   - `calculationRules`에 따라 자동 계산
+   - 예: `quantity` 또는 `unit_price` 변경 시 → `amount` 자동 계산
+
+6. **행 삭제**
+   - 각 행의 삭제 버튼 클릭 → 해당 항목 제거
+   - `onChange` 콜백 호출
+
+---
+
+## 🎯 Phase 2: 백엔드 API 개발 (1일)
+
+### 2.1 엔티티 검색 API
+
+**파일**: `backend-node/src/controllers/entitySearchController.ts`
+
+```typescript
+import { Request, Response } from "express";
+import pool from "../database/pool";
+import logger from "../utils/logger";
+
+/**
+ * 엔티티 검색
+ * GET /api/entity-search/:tableName
+ */
+export async function searchEntity(req: Request, res: Response) {
+  try {
+    const { tableName } = req.params;
+    const {
+      searchText = "",
+      searchFields = "",
+      filterCondition = "{}",
+      page = "1",
+      limit = "20",
+    } = req.query;
+
+    // 멀티테넌시
+    const companyCode = req.user!.companyCode;
+
+    // 검색 필드 파싱
+    const fields = searchFields ? (searchFields as string).split(",") : [];
+
+    // WHERE 조건 생성
+    const whereConditions: string[] = [];
+    const params: any[] = [];
+    let paramIndex = 1;
+
+    // 멀티테넌시 필터링
+    if (companyCode !== "*") {
+      whereConditions.push(`company_code = $${paramIndex}`);
+      params.push(companyCode);
+      paramIndex++;
+    }
+
+    // 검색 조건
+    if (searchText && fields.length > 0) {
+      const searchConditions = fields.map((field) => {
+        const condition = `${field}::text ILIKE $${paramIndex}`;
+        paramIndex++;
+        return condition;
+      });
+      whereConditions.push(`(${searchConditions.join(" OR ")})`);
+
+      // 검색어 파라미터 추가
+      fields.forEach(() => {
+        params.push(`%${searchText}%`);
+      });
+    }
+
+    // 추가 필터 조건
+    const additionalFilter = JSON.parse(filterCondition as string);
+    for (const [key, value] of Object.entries(additionalFilter)) {
+      whereConditions.push(`${key} = $${paramIndex}`);
+      params.push(value);
+      paramIndex++;
+    }
+
+    // 페이징
+    const offset = (parseInt(page as string) - 1) * parseInt(limit as string);
+    const whereClause =
+      whereConditions.length > 0
+        ? `WHERE ${whereConditions.join(" AND ")}`
+        : "";
+
+    // 쿼리 실행
+    const countQuery = `SELECT COUNT(*) FROM ${tableName} ${whereClause}`;
+    const dataQuery = `SELECT * FROM ${tableName} ${whereClause} ORDER BY id DESC LIMIT $${paramIndex} OFFSET $${
+      paramIndex + 1
+    }`;
+
+    params.push(parseInt(limit as string));
+    params.push(offset);
+
+    const countResult = await pool.query(
+      countQuery,
+      params.slice(0, params.length - 2)
+    );
+    const dataResult = await pool.query(dataQuery, params);
+
+    logger.info("엔티티 검색 성공", {
+      tableName,
+      searchText,
+      companyCode,
+      rowCount: dataResult.rowCount,
+    });
+
+    res.json({
+      success: true,
+      data: dataResult.rows,
+      pagination: {
+        total: parseInt(countResult.rows[0].count),
+        page: parseInt(page as string),
+        limit: parseInt(limit as string),
+      },
+    });
+  } catch (error: any) {
+    logger.error("엔티티 검색 오류", { error: error.message });
+    res.status(500).json({ success: false, message: error.message });
+  }
+}
+```
+
+**라우트 등록**: `backend-node/src/routes/index.ts`
+
+```typescript
+import { Router } from "express";
+import { authenticateToken } from "../middleware/authMiddleware";
+import { searchEntity } from "../controllers/entitySearchController";
+
+const router = Router();
+
+// 엔티티 검색
+router.get("/api/entity-search/:tableName", authenticateToken, searchEntity);
+
+export default router;
+```
+
+---
+
+### 2.2 수주 등록 API (기본)
+
+**파일**: `backend-node/src/controllers/orderController.ts`
+
+```typescript
+import { Request, Response } from "express";
+import pool from "../database/pool";
+import logger from "../utils/logger";
+
+/**
+ * 수주 등록
+ * POST /api/orders
+ */
+export async function createOrder(req: Request, res: Response) {
+  const client = await pool.connect();
+
+  try {
+    await client.query("BEGIN");
+
+    const {
+      inputMode, // 입력 방식
+      customerCode, // 거래처 코드
+      deliveryDate, // 납품일
+      items, // 품목 목록
+      memo, // 메모
+    } = req.body;
+
+    // 멀티테넌시
+    const companyCode = req.user!.companyCode;
+    const userId = req.user!.userId;
+
+    // 수주 마스터 생성
+    const orderQuery = `
+      INSERT INTO order_mng_master (
+        company_code,
+        order_no,
+        customer_code,
+        input_mode,
+        delivery_date,
+        total_amount,
+        memo,
+        created_by,
+        created_at
+      ) VALUES ($1, $2, $3, $4, $5, $6, $7, $8, NOW())
+      RETURNING *
+    `;
+
+    // 수주 번호 자동 생성 (채번 규칙 활용 - 별도 구현 필요)
+    const orderNo = await generateOrderNumber(companyCode);
+
+    // 전체 금액 계산
+    const totalAmount = items.reduce(
+      (sum: number, item: any) => sum + (item.amount || 0),
+      0
+    );
+
+    const orderResult = await client.query(orderQuery, [
+      companyCode,
+      orderNo,
+      customerCode,
+      inputMode,
+      deliveryDate,
+      totalAmount,
+      memo,
+      userId,
+    ]);
+
+    const orderId = orderResult.rows[0].id;
+
+    // 수주 상세 (품목) 생성
+    for (const item of items) {
+      const itemQuery = `
+        INSERT INTO order_mng_sub (
+          company_code,
+          order_id,
+          item_code,
+          item_name,
+          spec,
+          quantity,
+          unit_price,
+          amount,
+          delivery_date,
+          note
+        ) VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9, $10)
+      `;
+
+      await client.query(itemQuery, [
+        companyCode,
+        orderId,
+        item.item_code,
+        item.item_name,
+        item.spec,
+        item.quantity,
+        item.unit_price,
+        item.amount,
+        item.delivery_date,
+        item.note,
+      ]);
+    }
+
+    await client.query("COMMIT");
+
+    logger.info("수주 등록 성공", {
+      companyCode,
+      orderNo,
+      orderId,
+      itemCount: items.length,
+    });
+
+    res.json({
+      success: true,
+      data: {
+        orderId,
+        orderNo,
+      },
+    });
+  } catch (error: any) {
+    await client.query("ROLLBACK");
+    logger.error("수주 등록 오류", { error: error.message });
+    res.status(500).json({ success: false, message: error.message });
+  } finally {
+    client.release();
+  }
+}
+
+// 수주 번호 생성 함수 (예시 - 실제로는 채번 규칙 시스템 활용)
+async function generateOrderNumber(companyCode: string): Promise<string> {
+  const today = new Date();
+  const year = today.getFullYear().toString().slice(2);
+  const month = String(today.getMonth() + 1).padStart(2, "0");
+
+  // 당일 수주 카운트 조회
+  const countQuery = `
+    SELECT COUNT(*) FROM order_mng_master
+    WHERE company_code = $1
+      AND DATE(created_at) = CURRENT_DATE
+  `;
+
+  const result = await pool.query(countQuery, [companyCode]);
+  const seq = parseInt(result.rows[0].count) + 1;
+
+  return `ORD${year}${month}${String(seq).padStart(4, "0")}`;
+}
+```
+
+---
+
+## 🎯 Phase 3: 수주 등록 전용 컴포넌트 (1일)
+
+### 3.1 OrderRegistrationModal 컴포넌트
+
+**파일**: `frontend/components/order/OrderRegistrationModal.tsx`
+
+```tsx
+"use client";
+
+import React, { useState } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Label } from "@/components/ui/label";
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Textarea } from "@/components/ui/textarea";
+import { EntitySearchInput } from "@/lib/registry/components/entity-search-input/EntitySearchInputComponent";
+import { ModalRepeaterTable } from "@/lib/registry/components/modal-repeater-table/ModalRepeaterTableComponent";
+import { toast } from "sonner";
+import apiClient from "@/lib/api/client";
+
+interface OrderRegistrationModalProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onSuccess?: () => void;
+}
+
+export function OrderRegistrationModal({
+  open,
+  onOpenChange,
+  onSuccess,
+}: OrderRegistrationModalProps) {
+  // 입력 방식
+  const [inputMode, setInputMode] = useState<string>("customer_first");
+
+  // 폼 데이터
+  const [formData, setFormData] = useState<any>({
+    customerCode: "",
+    customerName: "",
+    deliveryDate: "",
+    memo: "",
+  });
+
+  // 선택된 품목 목록
+  const [selectedItems, setSelectedItems] = useState<any[]>([]);
+
+  // 저장 중
+  const [isSaving, setIsSaving] = useState(false);
+
+  // 저장 처리
+  const handleSave = async () => {
+    try {
+      // 유효성 검사
+      if (!formData.customerCode) {
+        toast.error("거래처를 선택해주세요");
+        return;
+      }
+
+      if (selectedItems.length === 0) {
+        toast.error("품목을 추가해주세요");
+        return;
+      }
+
+      setIsSaving(true);
+
+      // 수주 등록 API 호출
+      const response = await apiClient.post("/api/orders", {
+        inputMode,
+        customerCode: formData.customerCode,
+        deliveryDate: formData.deliveryDate,
+        items: selectedItems,
+        memo: formData.memo,
+      });
+
+      if (response.data.success) {
+        toast.success("수주가 등록되었습니다");
+        onOpenChange(false);
+        onSuccess?.();
+
+        // 폼 초기화
+        resetForm();
+      } else {
+        toast.error(response.data.message || "수주 등록에 실패했습니다");
+      }
+    } catch (error: any) {
+      console.error("수주 등록 오류:", error);
+      toast.error(
+        error.response?.data?.message || "수주 등록 중 오류가 발생했습니다"
+      );
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  // 취소 처리
+  const handleCancel = () => {
+    onOpenChange(false);
+    resetForm();
+  };
+
+  // 폼 초기화
+  const resetForm = () => {
+    setInputMode("customer_first");
+    setFormData({
+      customerCode: "",
+      customerName: "",
+      deliveryDate: "",
+      memo: "",
+    });
+    setSelectedItems([]);
+  };
+
+  // 전체 금액 계산
+  const totalAmount = selectedItems.reduce(
+    (sum, item) => sum + (item.amount || 0),
+    0
+  );
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-[95vw] sm:max-w-[1200px] max-h-[90vh] overflow-y-auto">
+        <DialogHeader>
+          <DialogTitle className="text-base sm:text-lg">수주 등록</DialogTitle>
+          <DialogDescription className="text-xs sm:text-sm">
+            새로운 수주를 등록합니다
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-6">
+          {/* 입력 방식 선택 */}
+          <div className="space-y-2">
+            <Label htmlFor="inputMode" className="text-xs sm:text-sm">
+              입력 방식 *
+            </Label>
+            <Select value={inputMode} onValueChange={setInputMode}>
+              <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm">
+                <SelectValue placeholder="입력 방식 선택" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="customer_first">거래처 우선</SelectItem>
+                <SelectItem value="quotation">견대 방식</SelectItem>
+                <SelectItem value="unit_price">단가 방식</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+
+          {/* 입력 방식에 따른 동적 폼 */}
+          {inputMode === "customer_first" && (
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+              {/* 거래처 검색 */}
+              <div className="space-y-2">
+                <Label className="text-xs sm:text-sm">거래처 *</Label>
+                <EntitySearchInput
+                  tableName="customer_mng"
+                  displayField="customer_name"
+                  valueField="customer_code"
+                  searchFields={[
+                    "customer_name",
+                    "customer_code",
+                    "business_number",
+                  ]}
+                  mode="combo"
+                  placeholder="거래처를 검색하세요"
+                  modalTitle="거래처 검색 및 선택"
+                  modalColumns={[
+                    "customer_code",
+                    "customer_name",
+                    "address",
+                    "tel",
+                  ]}
+                  showAdditionalInfo
+                  additionalFields={["address", "tel"]}
+                  value={formData.customerCode}
+                  onChange={(code, fullData) => {
+                    setFormData({
+                      ...formData,
+                      customerCode: code,
+                      customerName: fullData?.customer_name || "",
+                    });
+                  }}
+                />
+              </div>
+
+              {/* 납품일 */}
+              <div className="space-y-2">
+                <Label htmlFor="deliveryDate" className="text-xs sm:text-sm">
+                  납품일
+                </Label>
+                <Input
+                  id="deliveryDate"
+                  type="date"
+                  value={formData.deliveryDate}
+                  onChange={(e) =>
+                    setFormData({ ...formData, deliveryDate: e.target.value })
+                  }
+                  className="h-8 text-xs sm:h-10 sm:text-sm"
+                />
+              </div>
+            </div>
+          )}
+
+          {inputMode === "quotation" && (
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+              <div className="space-y-2">
+                <Label className="text-xs sm:text-sm">견대 번호 *</Label>
+                <Input
+                  placeholder="견대 번호를 입력하세요"
+                  className="h-8 text-xs sm:h-10 sm:text-sm"
+                />
+              </div>
+            </div>
+          )}
+
+          {inputMode === "unit_price" && (
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+              <div className="space-y-2">
+                <Label className="text-xs sm:text-sm">단가 방식 설정</Label>
+                <Input
+                  placeholder="단가 정보 입력"
+                  className="h-8 text-xs sm:h-10 sm:text-sm"
+                />
+              </div>
+            </div>
+          )}
+
+          {/* 추가된 품목 */}
+          <div className="space-y-2">
+            <Label className="text-xs sm:text-sm">추가된 품목</Label>
+            <ModalRepeaterTable
+              sourceTable="item_info"
+              sourceColumns={[
+                "item_code",
+                "item_name",
+                "spec",
+                "unit",
+                "unit_price",
+              ]}
+              sourceSearchFields={["item_code", "item_name", "spec"]}
+              modalTitle="품목 검색 및 선택"
+              modalButtonText="품목 검색"
+              multiSelect={true}
+              columns={[
+                {
+                  field: "item_code",
+                  label: "품번",
+                  editable: false,
+                  width: "120px",
+                },
+                {
+                  field: "item_name",
+                  label: "품명",
+                  editable: false,
+                  width: "200px",
+                },
+                {
+                  field: "spec",
+                  label: "규격",
+                  editable: false,
+                  width: "150px",
+                },
+                {
+                  field: "quantity",
+                  label: "수량",
+                  type: "number",
+                  editable: true,
+                  required: true,
+                  defaultValue: 1,
+                  width: "100px",
+                },
+                {
+                  field: "unit_price",
+                  label: "단가",
+                  type: "number",
+                  editable: true,
+                  required: true,
+                  width: "120px",
+                },
+                {
+                  field: "amount",
+                  label: "금액",
+                  type: "number",
+                  editable: false,
+                  calculated: true,
+                  width: "120px",
+                },
+                {
+                  field: "delivery_date",
+                  label: "납품일",
+                  type: "date",
+                  editable: true,
+                  width: "130px",
+                },
+                {
+                  field: "note",
+                  label: "비고",
+                  type: "text",
+                  editable: true,
+                  width: "200px",
+                },
+              ]}
+              calculationRules={[
+                {
+                  result: "amount",
+                  formula: "quantity * unit_price",
+                  dependencies: ["quantity", "unit_price"],
+                },
+              ]}
+              uniqueField="item_code"
+              value={selectedItems}
+              onChange={setSelectedItems}
+            />
+          </div>
+
+          {/* 전체 금액 표시 */}
+          {selectedItems.length > 0 && (
+            <div className="flex justify-end">
+              <div className="text-sm sm:text-base font-semibold">
+                전체 금액: {totalAmount.toLocaleString()}원
+              </div>
+            </div>
+          )}
+
+          {/* 메모 */}
+          <div className="space-y-2">
+            <Label htmlFor="memo" className="text-xs sm:text-sm">
+              메모
+            </Label>
+            <Textarea
+              id="memo"
+              placeholder="메모를 입력하세요"
+              value={formData.memo}
+              onChange={(e) =>
+                setFormData({ ...formData, memo: e.target.value })
+              }
+              className="text-xs sm:text-sm"
+              rows={3}
+            />
+          </div>
+        </div>
+
+        <DialogFooter className="gap-2 sm:gap-0">
+          <Button
+            variant="outline"
+            onClick={handleCancel}
+            disabled={isSaving}
+            className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
+          >
+            취소
+          </Button>
+          <Button
+            onClick={handleSave}
+            disabled={isSaving}
+            className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
+          >
+            {isSaving ? "저장 중..." : "저장"}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+```
+
+---
+
+## 🎯 Phase 4: 화면관리 시스템 통합 (선택 사항)
+
+### 4.1 컴포넌트 레지스트리 등록
+
+**파일**: `frontend/lib/registry/component-registry.ts`
+
+```typescript
+// EntitySearchInput 등록
+{
+  id: "entity-search-input",
+  name: "엔티티 검색 입력",
+  category: "input",
+  description: "데이터베이스 테이블에서 엔티티를 검색하고 선택하는 입력 필드",
+  component: EntitySearchInputComponent,
+  configPanel: EntitySearchInputConfig,
+  defaultProps: {
+    tableName: "",
+    displayField: "",
+    valueField: "",
+    mode: "combo",
+    placeholder: "검색...",
+  },
+},
+
+// ModalRepeaterTable 등록
+{
+  id: "modal-repeater-table",
+  name: "모달 연동 Repeater",
+  category: "data",
+  description: "모달에서 데이터를 선택하여 동적 테이블에 추가하는 컴포넌트",
+  component: ModalRepeaterTableComponent,
+  configPanel: ModalRepeaterTableConfig,
+  defaultProps: {
+    sourceTable: "",
+    modalTitle: "항목 검색 및 선택",
+    multiSelect: true,
+    columns: [],
+    value: [],
+  },
+},
+```
+
+---
+
+## 📅 개발 일정
+
+| Phase    | 작업 내용                                 | 예상 기간 | 담당자   |
+| -------- | ----------------------------------------- | --------- | -------- |
+| Phase 1  | EntitySearchInput 컴포넌트 개발           | 1.5일     | Frontend |
+| Phase 1  | ModalRepeaterTable 컴포넌트 개발          | 1.5일     | Frontend |
+| Phase 2  | 백엔드 API 개발 (엔티티 검색 + 수주 등록) | 1일       | Backend  |
+| Phase 3  | 수주 등록 전용 컴포넌트 개발              | 1일       | Frontend |
+| Phase 4  | 화면관리 시스템 통합 (선택)               | 1일       | Frontend |
+| **총계** |                                           | **4-5일** |          |
+
+---
+
+## ✅ 체크리스트
+
+### EntitySearchInput 컴포넌트
+
+- [ ] 기본 인터페이스 및 타입 정의
+- [ ] 자동완성 모드 구현
+- [ ] 모달 모드 구현
+- [ ] 콤보 모드 구현
+- [ ] 백엔드 API 연동
+- [ ] 멀티테넌시 적용
+- [ ] 선택된 항목 표시 및 추가 정보 표시
+- [ ] 속성 편집 패널 구현
+- [ ] 테스트 및 디버깅
+
+### ModalRepeaterTable 컴포넌트
+
+- [ ] 기본 인터페이스 및 타입 정의
+- [ ] 모달 검색 구현
+- [ ] 다중 선택 기능
+- [ ] Repeater 테이블 렌더링
+- [ ] 인라인 편집 기능
+- [ ] 계산 필드 자동 업데이트
+- [ ] 행 추가/삭제 기능
+- [ ] 중복 방지 로직
+- [ ] 속성 편집 패널 구현
+- [ ] 테스트 및 디버깅
+
+### 백엔드 API
+
+- [ ] 엔티티 검색 API 구현
+- [ ] 멀티테넌시 적용
+- [ ] 페이징 지원
+- [ ] 검색 필터링 로직
+- [ ] 수주 등록 API 구현
+- [ ] 트랜잭션 처리
+- [ ] 채번 규칙 연동
+- [ ] 오류 처리 및 로깅
+
+### 수주 등록 컴포넌트
+
+- [ ] 기본 폼 구조 구현
+- [ ] 입력 방식별 동적 폼 전환
+- [ ] EntitySearchInput 통합
+- [ ] ModalRepeaterTable 통합
+- [ ] 전체 금액 계산
+- [ ] 저장 로직 구현
+- [ ] 유효성 검사
+- [ ] UI/UX 개선
+
+---
+
+## 🎨 UI/UX 가이드라인
+
+### 모달 디자인
+
+- 최대 너비: `max-w-[95vw] sm:max-w-[1200px]`
+- 반응형 크기 적용
+- 스크롤 가능하도록 `overflow-y-auto` 적용
+- 모바일에서는 전체 화면에 가까운 크기
+
+### 입력 필드
+
+- 높이: `h-8 sm:h-10` (모바일 32px, 데스크톱 40px)
+- 텍스트 크기: `text-xs sm:text-sm`
+- 필수 항목은 라벨에 `*` 표시
+
+### 버튼
+
+- Footer 버튼: `gap-2 sm:gap-0`
+- 모바일에서는 같은 크기 (`flex-1`)
+- 데스크톱에서는 자동 크기 (`flex-none`)
+
+### 테이블
+
+- 고정 컬럼 너비 지정
+- 스크롤 가능하도록 설계
+- 모바일에서는 가로 스크롤 허용
+
+---
+
+## 🔧 기술 스택
+
+- **Frontend**: Next.js 14, TypeScript, React 18
+- **UI 라이브러리**: shadcn/ui, Tailwind CSS
+- **Backend**: Node.js, Express, TypeScript
+- **Database**: PostgreSQL
+- **상태 관리**: React Hooks (useState, useEffect)
+- **API 통신**: Axios
+
+---
+
+## 📝 참고 자료
+
+- [shadcn/ui 모달 가이드](.cursor/rules/admin-page-style-guide.mdc)
+- [멀티테넌시 가이드](.cursor/rules/multi-tenancy-guide.mdc)
+- [API 클라이언트 사용 규칙](.cursor/rules/)
+- [화면관리 시스템 문서](./화면관리_시스템_구현_계획서.md)
+
+---
+
+## 🚀 다음 단계
+
+1. **즉시 개발**: EntitySearchInput 컴포넌트부터 시작
+2. **병렬 작업**: 프론트엔드와 백엔드 API 동시 개발 가능
+3. **점진적 확장**: 견적서, 발주서 등 유사한 화면에 재사용
+4. **피드백 수집**: 실제 사용자 테스트 후 개선사항 반영
+
+---
+
+## ❓ FAQ
+
+### Q1: 다른 화면(견적서, 발주서)에도 사용할 수 있나요?
+
+**A**: 네! EntitySearchInput과 ModalRepeaterTable은 범용 컴포넌트로 설계되어 있어서 다른 화면에서도 바로 사용 가능합니다.
+
+### Q2: 화면관리 시스템에 통합해야 하나요?
+
+**A**: 필수는 아닙니다. Phase 3까지만 완료해도 수주 등록 기능은 정상 작동합니다. Phase 4는 향후 다른 화면을 더 쉽게 만들기 위한 선택사항입니다.
+
+### Q3: 계산 필드는 어떻게 작동하나요?
+
+**A**: `calculationRules`에 정의된 공식에 따라 자동으로 계산됩니다. 예를 들어 `quantity * unit_price`는 수량이나 단가가 변경될 때마다 자동으로 금액을 계산합니다.
+
+### Q4: 중복된 품목을 추가하면 어떻게 되나요?
+
+**A**: `uniqueField`에 지정된 필드(예: `item_code`)를 기준으로 중복을 체크하여, 이미 추가된 품목은 모달에서 선택할 수 없도록 비활성화됩니다.
+
+---
+
+## 📦 전용 컴포넌트 vs 범용 컴포넌트 (2025-01-15 추가)
+
+### 왜 전용 컴포넌트를 만들었나?
+
+**문제점**: 범용 컴포넌트를 수주 등록 모달에서 직접 사용하면, 화면 편집기에서 설정을 변경했을 때 수주 등록 로직이 깨질 수 있습니다.
+
+**예시:**
+
+- 사용자가 `AutocompleteSearchInput`의 `tableName`을 `customer_mng`에서 `item_info`로 변경
+- → 거래처 검색 대신 품목이 조회되어 수주 등록 실패
+
+**해결책**: 수주 등록 전용 래퍼 컴포넌트 생성
+
+### 전용 컴포넌트 목록
+
+#### 1. OrderCustomerSearch
+
+```tsx
+// frontend/components/order/OrderCustomerSearch.tsx
+
+// 범용 컴포넌트를 래핑하여 설정을 고정
+<AutocompleteSearchInputComponent
+  tableName="customer_mng" // 고정 (변경 불가)
+  displayField="customer_name" // 고정
+  valueField="customer_code" // 고정
+  searchFields={["customer_name", "customer_code", "business_number"]} // 고정
+  // ... 기타 고정 설정
+
+  value={value} // 외부에서 제어 가능
+  onChange={onChange} // 외부에서 제어 가능
+/>
+```
+
+**특징**:
+
+- `customer_mng` 테이블만 조회 (고정)
+- 거래처명, 거래처코드, 사업자번호로 검색 (고정)
+- 설정 변경 불가 → 안전
+
+#### 2. OrderItemRepeaterTable
+
+```tsx
+// frontend/components/order/OrderItemRepeaterTable.tsx
+
+// 수주 등록에 최적화된 컬럼 및 계산 규칙 고정
+<ModalRepeaterTableComponent
+  sourceTable="item_info" // 고정
+  columns={ORDER_COLUMNS} // 고정 (품번, 품명, 수량, 단가, 금액 등)
+  calculationRules={ORDER_CALCULATION_RULES} // 고정 (수량 * 단가)
+  uniqueField="id" // 고정
+  // ... 기타 고정 설정
+
+  value={value} // 외부에서 제어 가능
+  onChange={onChange} // 외부에서 제어 가능
+/>
+```
+
+**특징**:
+
+- `item_info` 테이블만 조회 (고정)
+- 수주에 필요한 컬럼만 표시 (고정)
+- 금액 자동 계산 공식 고정 (수량 \* 단가)
+- 설정 변경 불가 → 안전
+
+### 비교표
+
+| 항목       | 범용 컴포넌트                                     | 전용 컴포넌트                             |
+| ---------- | ------------------------------------------------- | ----------------------------------------- |
+| **목적**   | 화면 편집기에서 다양한 용도로 사용                | 수주 등록 전용                            |
+| **설정**   | ConfigPanel에서 자유롭게 변경 가능                | 하드코딩으로 고정                         |
+| **유연성** | 높음 (모든 테이블/필드 지원)                      | 낮음 (수주에 최적화)                      |
+| **안정성** | 사용자 실수 가능                                  | 설정 변경 불가로 안전                     |
+| **위치**   | `lib/registry/components/`                        | `components/order/`                       |
+| **사용처** | - 화면 편집기 드래그앤드롭<br/>- 범용 데이터 입력 | - 수주 등록 모달<br/>- 특정 비즈니스 로직 |
+
+### 사용 패턴
+
+#### ❌ 잘못된 방법 (범용 컴포넌트 직접 사용)
+
+```tsx
+// OrderRegistrationModal.tsx
+<AutocompleteSearchInputComponent
+  tableName="customer_mng" // ⚠️ 화면 편집기에서 변경 가능
+  displayField="customer_name" // ⚠️ 변경 가능
+  valueField="customer_code" // ⚠️ 변경 가능
+  // ... 설정이 바뀌면 수주 등록 로직 깨짐!
+/>
+```
+
+#### ✅ 올바른 방법 (전용 컴포넌트 사용)
+
+```tsx
+// OrderRegistrationModal.tsx
+<OrderCustomerSearch
+  value={customerCode}
+  onChange={handleChange}
+  // 내부 설정은 고정되어 있어 안전!
+/>
+```
+
+### 파일 구조
+
+```
+frontend/
+├── lib/registry/components/  # 범용 컴포넌트 (화면 편집기용)
+│   ├── autocomplete-search-input/
+│   │   ├── AutocompleteSearchInputComponent.tsx
+│   │   ├── AutocompleteSearchInputConfigPanel.tsx  # 설정 변경 가능
+│   │   └── types.ts
+│   ├── entity-search-input/
+│   │   ├── EntitySearchInputComponent.tsx
+│   │   ├── EntitySearchInputConfigPanel.tsx  # 설정 변경 가능
+│   │   └── types.ts
+│   └── modal-repeater-table/
+│       ├── ModalRepeaterTableComponent.tsx
+│       ├── ModalRepeaterTableConfigPanel.tsx  # 설정 변경 가능
+│       └── types.ts
+│
+└── components/order/  # 전용 컴포넌트 (수주 등록용)
+    ├── OrderCustomerSearch.tsx  # 설정 고정
+    ├── OrderItemRepeaterTable.tsx  # 설정 고정
+    ├── OrderRegistrationModal.tsx  # 메인 모달
+    └── README.md
+```
+
+### 개발 원칙
+
+1. **비즈니스 로직이 고정된 경우**: 전용 컴포넌트 생성
+2. **화면 편집기에서 사용**: 범용 컴포넌트 사용
+3. **전용 컴포넌트는 범용 컴포넌트를 래핑**: 중복 코드 최소화
+4. **Props 최소화**: 외부에서 제어 가능한 최소한의 prop만 노출
+
+### 참고 문서
+
+- 전용 컴포넌트 상세 문서: `frontend/components/order/README.md`
+- 범용 컴포넌트 문서: 각 컴포넌트 폴더의 README.md
+
+---
+
+**작성일**: 2025-01-14
+**최종 수정일**: 2025-01-15
+**작성자**: AI Assistant
+**버전**: 1.1